.quick-view__container {
    background-color: #eee;
    width: 100% !important;
    max-width: 350px;
    color: var(--text-color);
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
    flex: 0 0 auto;
    outline: 0;
    position: fixed;
    z-index: 110;
    overflow-y: auto;
    flex-direction: column;
    right: 0;
    top: 0;
    height: 100%;
}

.quick-view__content {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
    flex: 0 0 auto;
    flex-direction: column;
}

.quick-view__dkr-message {
    margin-top: 10px;
}

.quick-view__close {
    position: absolute;
    right: 8px;
    top: 8px;
}

    .quick-view__close a {
        color: var(--white) !important;
        text-decoration: none;
    }

.quick-view__product-number {
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px;
    margin: 0px;
}

.quick-view__product-info {
    display: flex;
    padding: 0 8px;
}

.quick-view__product-info__image {
    width: 64px;
    padding: 4px;
}

.quick-view__product-info__information {
    display: table;
}


    .quick-view__product-info__information .icon-file-pdf {
        color: var(--red);
    }
    .quick-view__product-info__information div {
        display: table-row;
    }

        .quick-view__product-info__information div span:first-child {
            font-weight: bold;
            white-space: nowrap;
        }

        .quick-view__product-info__information div span:not(.quick-view__datasheet) {
            display: table-cell;
            padding: 4px 4px;
        }

.quick-view__datasheet {
    display: flex;
    align-items: baseline;
}

.quick-view__list-tabs {
    border-radius: 0px;
    padding: 8px 10px;
    background-color: transparent;
}

    .quick-view__list-tabs ul {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        border-bottom: 3px solid var(--red);
        box-sizing: border-box;
        padding: 0px;
        margin-top: 5px;
        margin-bottom: 0px;
    }

        .quick-view__list-tabs ul li {
            font-size: 12px;
            display: inline-block;
            width: 100px;
            height: auto;
            max-height: 32px;
            margin: 0 10px 0 0;
            padding: 6px 6px;
            border-radius: 4px 4px 0 0;
            color: var(--text-color--light);
            background-color: var(--bg-color--card);
            border: 1px solid var(--slate-grey-lighten);
            border-bottom: 0;
            text-align: center;
            cursor: pointer;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
        }

            .quick-view__list-tabs ul li.active {
                font-weight: bold;
                background-color: var(--red);
                color: var(--white);
                border: 1px solid var(--red);
                border-bottom: 0;
                cursor: default;
            }

h2.quick-view__headline {
    background-color: var(--blurple-blue);
    font-size: 20px;
    font-weight: normal;
    color: var(--white);
    text-transform: uppercase;
    padding: 4px 10px;
    margin: 0px;
}

.quick-view__content .dk-card {
    margin: 10px;
    padding: 8px;
}

    .quick-view__content .dk-card h4 {
        font-size: 14px;
        border-bottom: solid 3px #ccc;
        margin: 0px;
        padding: 0px 0px 4px 0px;
        margin-bottom: 4px;
    }

thead tr.quick-view {
    border-top:none;
}

tr.quick-view {
    border-bottom:1px solid;
}

tr.quick-view td {
    padding: 4px 8px;
}

tbody tr.quick-view:last-child {
    border-bottom: none; /* Remove the bottom border from the last row */
}

.dkdk .quick-view__container {
    background-color: #222;
}

.onecolumn__full {
    max-width:100%;
}

/* FOR MYLIST DARK MODE ONLY */
/* todo: move these to be with their non-dark bretheren */
.dkdk .my-list--main-prod-list .yellow-row {
    background: #736d5a;
}

.dkdk .my-lists-tooltip img {
    mix-blend-mode: normal;
}
.dkdk .column-order-cell,
.dkdk .download-column-order-cell {
    mix-blend-mode: color-burn;
}

.dkdk .dk-error-message, 
.dkdk .dk-error-message__visible, 
.dkdk .dk-input__error-feedback, 
.dkdk small.dk-error-message {
    color: var(--red) !important;
}
.dkdk .dk-message--failure .dk-message__icon {
    background: var(--red);
}
/* END FOR MYLIST DARK MODE ONLY */

/* LANDING PAGE STYLE OVERRIDES */
.dk-pagination__link[aria-current=page] {
    border-radius: 0;
}
/* END LANDING PAGE STYLE OVERRIDES */

/* RTL Global Overrides */
.rtl .btn, 
.rtl .button, 
.rtl .dk-btn, 
.rtl .dk-btn__alternate, 
.rtl .dk-btn__primary, 
.rtl .dk-btn__secondary {
    margin: 5px 8px;
    margin-right: 0;
}

.rtl .dk-grid {
    margin-left: unset;
    margin-right: calc(-1 * var(--grid-gap));
}
.rtl .dk-grid > :not(.dk-grid) {
    padding-left: unset; 
    padding-right: var(--grid-gap);
}

.rtl label.dk-radio-button-label, 
.rtl label.dk-radio-label {
    margin-left: 0;
    margin-right: 7px;
}
/* END RTL Global Overrides */

body {
    overflow-x: hidden;
}

.error {
    color: var(--error);
}

.hidden {
    display: none;
}

.fixtable {
    table-layout: auto;
}

button:focus {
    outline-width: 0;
}

.float-buttons {
    float: right;
}
    .rtl .float-buttons {
        float: left;
    }

.radio-align-middle {
    vertical-align: middle;
}

.cdk-drop-list-dragging {
    cursor: grabbing;
}

.cdk-drop-list-dragging input[type="checkbox"].dk-checkbox, .cdk-drop-list-dragging label.dk-checkbox-label, .cdk-drop-list-dragging img {
    cursor: grabbing !important;
}

.cdk-drag img:active {
    cursor: grabbing;
}

.block {
    display: block;
}

/* MyLists Test Logo */
.myLists-Text-Logo {
    display: block; 
    font-size: 63px !important; 
    font-weight: bold; 
    font-weight: 800; 
    font-style: italic; 
    letter-spacing: -1px; 
    color: var(--onyx-grey); 
    cursor: default;
}
.dkdk .myLists-Text-Logo {
    color:var(--white);
}
.myLists-Text-Logo span {
    font-size: inherit; 
    color: var(--red);
}

/* DASHBOARD */
#dashboard-container > p:not(.h1) {
    margin: 1em 0 2em; 
    font-size: 14px;
}
#dashboard-container .start-a-list-container {
    display: block;
    margin: 0 0 20px;
}
#dashboard-container .start-a-list-container > div {
    display: inline-block;
    vertical-align: middle;
}
#upload-list-container {
    margin: 0 50px 0 0;
}
    .rtl #upload-list-container {
        margin: 0 0 0 50px;
    }
#upload-list-container .dashboard-logged-in-upload {
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer;
}
#upload-list-container .dashboard-logged-in-upload span.icon-upload-bottom {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 48px; 
    height: 48px; 
    padding: 10px; 
    font-size: 22px; 
    box-sizing: border-box; 
    border: 1px dashed var(--text-color); 
    border-radius: 0.5rem;
}
#upload-list-container .dashboard-logged-in-upload span:not(.icon-upload-bottom) {
    margin: 0 0 0 15px; 
    font-size: 14px; 
    font-weight: bold; 
    color: var(--blurple-blue);
}
    .rtl #upload-list-container .dashboard-logged-in-upload span:not(.icon-upload-bottom) {
        margin: 0 15px 0 0;
    }
#upload-list-container:hover .dashboard-logged-in-upload span:not(.icon-upload-bottom) {
    text-decoration: underline;
}

#create-an-empty-list-container {
    margin: 0 50px 0 0;
}
    .rtl #create-an-empty-list-container {
        margin: 0 0 0 50px;
    }
#create-an-empty-list-container #create-an-empty-list {
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer;
}
#create-an-empty-list-container #create-an-empty-list span.icon-plus {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 48px; 
    height: 48px; 
    padding: 10px; 
    font-size: 22px; 
    box-sizing: border-box; 
    border: 1px dashed var(--text-color); 
    border-radius: 0.5rem;
}
#create-an-empty-list-container #create-an-empty-list span:not(.icon-plus) {
    margin: 0 0 0 15px; 
    font-size: 14px; 
    font-weight: bold; 
    color: var(--blurple-blue);
}
    .rtl #create-an-empty-list-container #create-an-empty-list span:not(.icon-plus) {
        margin: 0 15px 0 0;
    }
#create-an-empty-list-container:hover #create-an-empty-list > span:not(.icon-plus) {
    text-decoration: underline;
}

.quote-id-container > p {
    font-size: 14px; 
    margin: 0 0 20px; 
    padding: 0;
}
.quote-id-container .dk-input-group {
    display: inline-block; 
    vertical-align: middle;
}
.quote-id-container .dk-input-group .dk-input-label {
    display: block; 
    font-size: 12px;
}
.quote-id-container .dk-input-group input {
    width: 200px;
}
.quote-id-container #view-quote {
    display: inline-block; 
    position: relative;
    top: 4px;
    left: 15px;
    margin: 0;
}
    .rtl .quote-id-container #view-quote {
        left: unset;
        right: 15px;
        margin: 0;
    }

.dashboard-table-container {
    display: block; 
    margin: 0 0 30px; 
    border-radius: 0.5rem 0.5rem 0 0;
}
.dashboard-table-container .listception-paginated-lists {
    margin: 5px 15px 20px;
}

/* DASHBOARD - BLOGS AND WEBINARS */
.blogs-and-webinars-container {
    display: block; 
    margin: 0;
}
.blogs-and-webinars-container ul,
.blogs-and-webinars-container ul li {
    list-style: none; 
    margin: 0; 
    padding: 0;
}
.blogs-and-webinars-container ul li {
    padding: 13px 0; 
    font-size: 14px; 
    line-height: 1.3; 
    border-top: 1px solid var(--border-color);
}
.blogs-and-webinars-container ul li:last-child {
    border-bottom: 1px solid var(--border-color);
}
.blogs-and-webinars-container ul li a {
    position: relative; 
    display: flex; 
    flex-flow: row nowrap; 
    align-items: center;
}
.blogs-and-webinars-container ul li a:hover {
    text-decoration: none;
}
.blogs-and-webinars-container ul li a::after {
    content: "\f105"; 
    width: 32px; 
    height: 32px; 
    margin: 0 0 0 auto; 
    padding: 0 0 0 30px; 
    font-size: 32px; 
    color: var(--red); 
    text-decoration: none;
}
    .rtl .blogs-and-webinars-container ul li a::after {
        content: "\f104"; 
        margin: 0 auto 0 0; 
        padding: 0 30px 0 0;
    }
.blogs-and-webinars-container ul li a:hover span {
    text-decoration: underline;
}

/* DASHBOARD - SEARCH */
.customer-list-search {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    position: relative;
    margin: 15px;
}

.customer-list-search label {
    padding: 0 15px 0 5px;
}
    .rtl .customer-list-search label {
        padding: 0 5px 0 15px;
    }

.customer-list-search label:last-child {
    padding: 0 10px 0 5px;
}
    .rtl .customer-list-search label:last-child {
        padding: 0 5px 0 10px;
    }

.customer-list-search .dashboard-list-search {
    position: relative;
}
.customer-list-search .dashboard-list-search input.dk-input {
    width: 200px; 
    padding: .7em 30px .7em 1em;
}
    .rtl .customer-list-search .dashboard-list-search input.dk-input {
        padding: .7em 1em .7em 30px;
    }

.customer-list-search .dashboard-list-search::after {
    content: "\f02e";
    position: absolute;
    top: 10px;
    right: 5px;
    width: 20px;
    height: 20px;
    font-size: 16px;
    font-weight: bold;
}
    .rtl .customer-list-search .dashboard-list-search::after {
        right: unset;
        left: 5px;
    }


/* CONTENT */
#content {
    position: relative;
    max-width: 100%;
}

/* FILE UPLOAD DROPZONE */
.imageDropzone {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px;
    font-size: 14px;
    text-align: center;
    background: var(--body-background-color);
    border: 2px dashed var(--cloud-grey);
    border-radius: 7px;
    box-sizing: border-box;
    cursor: pointer;
}

.imageDropzone::before {
    content: "\e905";
    display: block;
    position: relative;
    top: 0;
    left: 0;
    font-size: 48px;
    text-align: center;
    color: var(--blurple-blue);
}

/* EXTERNAL DASHBOARD */
.tutorial-panel {
    position: relative;
    display: block;
    width: 266px;
    height: 139px;
    margin: 0 auto 25px;
    background: url(/mylists/img_tutorial_bg.png) no-repeat;
}
.tutorial-panel .tutorial-part-poly {
    position: absolute;
    top: 14px;
    left: 24px;
    min-width: 138px;
    height: 109px;
    padding: 15px 13px;
    box-sizing: border-box;
    background: rgba(231, 204, 171, 0.75);
    clip-path: polygon(100% 0%, 100% 70%, 75% 70%, 75% 100%, 0 100%, 0 0);
    z-index: 1;
}
    .rtl .tutorial-panel .tutorial-part-poly {
        left: unset;
        right: 24px;
        /*clip-path: polygon(100% 0%, 100% 70%, 75% 70%, 75% 100%, 0 100%, 0 0);*/
        clip-path: polygon(100% 0, 100% 100%, 25% 100%, 25% 70%, 0 70%, 0 0);
    }

.tutorial-panel .tutorial-dk-logo {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    z-index: 10;
}
.tutorial-panel .tutorial-phrase {
    display: block;
    position: relative;
    max-width: 170px;
    min-width: 90px;
    font-size: 18px;
    font-weight: 700;
}
.tutorial-panel .tutorial-play-btn {
    position: absolute;
    display: block; 
    top: 54px;
    left: 0;
    right: 0;
    width: 62px;
    height: 53px;
    margin: 0 auto;
    background: url(/mylists/img_tutorial_play-btn.png) no-repeat;
    z-index: 10;
    font-size: 0;
}
.tutorial-panel .video-tutorial--link {
    display: block;
    width: 100%;
    height: 100%;
}

.tutorial-panel-content {
    padding: 20px;
}

.tutorial-panel-content h1 {
    margin: 0 0 0.67em;
}

/* GUEST DASHBOARD */
.tutorial-panel--lg {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    background: url(/mylists/img_tutorial_bg--lg.jpg) no-repeat;
    background-size: cover;
}
.tutorial-panel--lg .video-tutorial--link {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
    align-content: center;
    text-align: left;
}
    .rtl .tutorial-panel--lg .video-tutorial--link {
        text-align: right;
    }

.tutorial-panel--lg .tutorial-play-btn {
    position: relative;
    top: unset;
}

.tutorial-panel--lg .tutorial-dk-logo img {width: 50%;}
.tutorial-panel--lg .tutorial-phrase {
    max-width: 300px;
    min-width: 90px;
    font-size: 24px;
}

.tutorial-panel--lg .tutorial-part-poly {
    top: 24px;
    left: 24px;
    min-width: 138px;
    min-height: 109px;
    width: 60%;
    height: 60%;
    padding: 20px;
    clip-path: none;
}
.rtl .tutorial-panel--lg .tutorial-part-poly {clip-path: none;}



.dashboard-table {
    padding: 20px !important;
}

.dashboard-list-filter {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
}
    .rtl .dashboard-list-filter {
        margin: 0 auto 0 0;
    }

.customer-lists-component {
    padding: 0 !important;
}

.pagination-dropdown {
    background-color: var(--bg-color--card);
    border: none;
    color: var(--text-color);
}
.pagination-dropdown option {
    background-color: var(--bg-color--card);
    color: var(--text-color);
}

.dk-pagination li {
    padding: 0 2px;
}

.no-lists-message {
    background-color: var(--bg-color--card);
}

.no-lists-message div {
    text-align: center;
    padding: 75px 0;
    font-weight: bold;
}

.sort-ascending::after {
    content: "\e916";
    position: relative;
    top: 2px;
    right: -6px;
    width: 20px;
    height: 20px;
    font-size: 16px;
}
    .rtl .sort-ascending::after {
        right: unset;
        left: -6px;
    }

.sort-descending::after {
    content: "\e915";
    position: relative;
    top: 2px;
    right: -6px;
    width: 20px;
    height: 20px;
    font-size: 16px;
}
    .rtl .sort-descending::after {
        right: unset;
        left: -6px;
    }

.sort-normal::after {
    content: "\e914";
    position: relative;
    top: 2px;
    right: -6px;
    width: 20px;
    height: 20px;
    font-size: 16px;
}
    .rtl .sort-normal::after {
        right: unset;
        left: -6px;
    }

/* GUESTS HOMEPAGE */
.guests-section {
    padding-left: 0;
    padding-right: 0;
}
.guests-section,
.guests-section::before, 
.guests-section::after {
    background: var(--border-color--card);
}

.guests-header {
    margin: 20px auto;
    align-items: center;
}

.guests-header .dk-link,
.guest-page-buttons {
    margin-top: 10px;
}

.guests-header--logo {
    width: 200px;
    display: block;
}

.rtl .guests-header > div {
    padding: 0 32px 0 0;
}
.guests-header > div.guests-header--welcome {
    margin-top: 12px;
    padding: 10px 0 0;
}

.guest-page-buttons > div {
    display: inline-block;
}

.guest-page-buttons > button,
    .rtl .guest-page-buttons > button {
    margin: 0 10px;
}

.guests-header--image {
    width: 100%;
    max-width: 563px;
    max-height: 300px;
}

.guests-features {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}
.rtl .guests-features > div {
    padding: 0 32px 0 0;
}
.rtl .guests-features > div > div:not(.col_1-12) {
    padding: 0 32px 0 0;
}

.guest-features--title {
    text-decoration: underline;
}

.guest-features--section {
    padding: 15px;
}

.guests-features--image {
    width: 100%;
    max-width: 563px;
    max-height: 300px;
}

.guests-footer {
    padding: 35px 0;
}

.guests-footer,
.guests-footer::before,
.guests-footer::after {
    background: var(--border-color--card);
}

.guests-footer h4 {
    padding-bottom: 25px;
}

.guests-footer--benefits {
    padding: 30px;
}

.guests-footer--benefits div {
    display: block; 
    margin: 0 0 25px; 
    font-size: 18px; 
    line-height: 1.5;
}
.guests-footer--benefits div:last-child {
    margin: 0;
}

.guests-footer--tour {
    position: relative; 
    display: flex !important; 
    flex-flow: column nowrap;
    margin: 0 0 0 auto; 
    padding: 15px !important;
}
    .rtl .guests-footer--tour {
        margin: 0 auto 0 0;
    }

.guests-footer--tour .guests-footer--message > div {
    display: inline-block;
}
.guests-footer--tour .guests-footer--message {
    position: relative;
    bottom: 10px;
    top: 7px;
    left: 0;
    max-width: fit-content; 
    width: -moz-fit-content; 
    font-weight: bold;
}
.guests-footer--tour .guests-footer--message h4 {
    margin: 0; 
    padding: 0;
}

.guests-footer--tour .guests-footer--message .guests-footer--logo {
    position: relative; 
    top: 10px; 
    width: 150px; 
    padding: 0 0 0 10px;
}
    .rtl .guests-footer--message .guests-footer--logo {
        padding: 0 10px 0 0;
    }

.guests-footer--message > div:first-child {
    margin: 0 9px 0 0;
}
    .rtl .guests-footer--message > div:first-child {
        margin: 0 0 0 9px;
    }
.guests-footer--message .myLists-Text-Logo {
    display: inline-block;
    margin: 0;
    font-size: 42px !important;
}

.guests-footer--take-a-tour {
    position: relative;
    display: flex !important;
    flex-flow: column nowrap;
    flex: 1;
    width: auto;
    height: auto;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    justify-content: center;
}
.guests-footer--take-a-tour .myLists-Text-Logo {
    cursor: pointer;
}
.guests-footer--take-a-tour .dk-btn__primary {
    margin: 15px auto 10px;
}

/* NO ACCESS */
.no-access {
    padding: 40px 10px 75px;
}

.no-access--logo {
    padding-top: 25px;
    width: 175px;
}

.no-access--apologies {
    font-size: 2rem;
}

.no-access--report-error {
    font-size: 1.25rem;
}
.no-access--report-error > a {
    color: var(--link-blue);
}

/* MyLists TABLE */
.my-lists--top-toolbar {
    margin: 0 auto;
    padding: 0;
}

.my-lists--top-toolbar--container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    width: 100%;
    margin: 0 0 10px;
}

.my-lists--top-toolbar .my-lists--top-toolbar--container > div {
    display: flex;
    flex-flow: row wrap;
    align-items: center;

}

.my-lists--top-toolbar--container > span.my-lists-top-toolbar-search {
    position: relative;
    margin: 7px 10px 7px 0;
}
    .rtl .my-lists--top-toolbar--container > span.my-lists-top-toolbar-search {
        margin: 7px 0 7px 10px;
    }

/*.my-lists--top-toolbar--container > span.my-lists-top-toolbar-search input.dk-input {
    padding: .7em 30px .7em 1em;
}
    .rtl .my-lists--top-toolbar--container > span.my-lists-top-toolbar-search input.dk-input {
        padding: .7em 1em .7em 30px;
    }*/

.my-lists--top-toolbar--container > span.my-lists-top-toolbar-search::after {
    content: "\f02e";
    position: absolute;
    top: 8px;
    right: 15px;
    width: 20px;
    height: 20px;
    font-size: 16px;
}
    .rtl .my-lists--top-toolbar--container > span.my-lists-top-toolbar-search::after {
        right: unset;
        left: 15px;
    }

@media screen and (max-width:600px){
    .my-lists-top-toolbar-search {
        flex-grow:1;
    }
    .my-lists-top-toolbar-search input {
        width:100%;
    }

    .attrition-container {
        padding-top: 10px;
        margin: 0 !important;
        flex-grow: 1;
        justify-content: end;
    }
}


.list-limit-warning-message::before {
    position: relative;
    padding: 0 5px;
    content: "\f071";
    font-family: "dk";
    font-size: 12px;
}

.list-limit-warning-message {
    transition: all 0.2s ease;
    color: var(--red) !important;
    margin-top: 11px;
    pointer-events: none;
    font-weight: bold;
    font-size: 12px;
}

/* MyLists Attrition in the Column */
.attrition-input {
    position:relative;
}
.attrition-input::after {
    content: "\0025";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    color: var(--text-color);
}
    .rtl .attrition-input::after {
        right: unset;
        left: 10px;
    }

/* FILTER BOXES */
.my-lists-filter--container {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 15px 0 0;
    padding: 15px 0 10px;
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.my-lists-filter--container filter {
    display: inline-block;
    width: auto;
    height: 200px;
    margin: 3px 7px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.filterTitle {
    margin: 0;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
}

.filterBody {
    float: left;
    display: block;
    width: inherit;
    height: 165px;
    margin: 0;
    padding: 10px 15px 10px 5px;
    overflow: auto;
    box-sizing: border-box;
}
    .rtl .filterBody {
        float: right;
        padding: 10px 5px 10px 15px;
    }

/* FILTER BUTTONS */
.dk-btn__borderless {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    text-align:left;
}

.rtl .dk-btn__borderless {
    text-align: right;
}

.dk-btn__borderless:hover {
    background: var(--bg-color--card);
    border-color: var(--border-color);
}

.my-lists--top-toolbar--container .more-features-dropdown > button,
.my-lists--top-toolbar--container .more-features-dropdown > button.dk-btn__borderless {
    display: block;
    width: 100%;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    background: var(--bg-color--card);
}

.my-lists--top-toolbar--container .more-features-dropdown > button:hover,
.my-lists--top-toolbar--container .more-features-dropdown > button.dk-btn__borderless:hover {
    border-radius: 0;
    background: var(--border-color--card);
}

.my-lists--top-toolbar--container .dk-btn__borderless,
.filters-button .dk-btn__borderless {
    border-color: transparent;
    box-shadow: none;
    color: var(--text-color);
}

.my-lists--top-toolbar--container .dk-btn__borderless:hover,
.filters-button .dk-btn__borderless:hover {
    background: var(--bg-color--card);
    border-color: var(--border-color);
    box-shadow: inset 0 0 0 2px var(--btn-border-color--secondary__hover);
}

.moreFeaturesBtn {
    font-size: large;
    padding: 4px 15px;
}

.my-lists-filters {
}

.my-lists-filters::before {
    position: relative;
    padding: 0 5px;
    content: "\e900";
    font-family: "dk";
    font-size: 12px;
}

.my-lists-filters--hide {
}

.my-lists-filters--hide::before {
    position: relative;
    padding: 0 5px;
    content: "\e900";
    font-family: "dk";
    font-size: 12px;
}

.my-lists-clear-filters {
    margin: 7px 0 25px 7px;
}
    .rtl .my-lists-clear-filters {
        margin: 7px 7px 25px 0;
    }

.my-lists-clear-selections {
}
.my-lists-clear-selections::before {
    position: relative;
    padding: 0 5px;
    content: "\e900";
    font-family: "dk";
    font-size: 12px;
}

.my-lists-edit-columns {
}

.my-lists-edit-columns::before {
    content: '\f0c9';
    display: inline-block;
    position: relative;
    top: -1px;
    margin: 0 7px 0 0;
    padding: 0;
    vertical-align: middle;
    transform: rotate(90deg);
}
    .rtl .my-lists-edit-columns::before {
        margin: 0 0 0 7px;
    }

.my-lists-download {
}

.my-lists-download::before {
    position: relative;
    padding: 0 5px;
    content: "\e905";
    font-family: "dk";
    font-size: 12px;
}


.my-lists-share::before {
    position: relative;
    padding: 0 5px;
    content: "\f1e0";
    font-family: "dk";
    font-size: 12px;
}

.filters-button {
    display: inline-block;
    width: auto;
}

.my-lists-tools--container {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
}

#scrollbar-wrapper {
    position: relative;
    margin: 0 -20px;
}

#scrollbar-wrapper .scrollbar-content table tr td.tableCell:first-child {
    box-shadow: 3px 0 3px -2px rgba(0,0,0,0.1);
}

#scrollbar-wrapper > div:not(#scrollbar-content) {
    background: var(--bg-color--card);
}

.addPartsBar {
    width: 100%;
    background: var(--bg-color--card);
    color: var(--text-color);
    text-align: center;
    z-index: 3;
    border: 0;
    border-top: 1px solid var(--border-color);
}

.fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
}

.customer-information {
    padding: 30px 0;
    text-align: left;
}
    .rtl .customer-information {
        text-align: right;
    }

.customer-information th:first-child {
    padding-right: 50px;
}
    .rtl .customer-information th:first-child {
        padding-right: 0;
        padding-left: 50px;
    }

.customer-information td {
    padding-right: 30px;
}
    .rtl .customer-information td {
        padding-right: 0;
        padding-left: 30px;
    }

.customer-list-page-selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin: 10px 0;
    padding: 0;
}

.customer-list-page-selector .customer-list-showing {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.customer-list-page-selector .customer-list-search {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.customer-list-page-selector .customer-list-pagination {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

/* MY LIST TOP INFOBAR */
.my-lists--top-infobar {
    margin: 8px auto 0;
    padding: 0;
}

.my-lists--top-infobar th {
    padding: 0 10px 0 0;
    font-weight: bold;
    color: var(--blurple-blue);
    text-align: left;
}
    .rtl .my-lists--top-infobar th {
        padding: 0 0 0 10px;
        text-align: right;
    }

.my-lists--top-infobar td {
    padding: 3px 10px 0 0;
    text-align: left;
}
    .rtl .my-lists--top-infobar td {
        padding: 3px 0 0 10px;
        text-align: right;
    }

.customerTable tr:first-child {
    font-weight: bold;
    color: var(--blurple-blue);
}

.customerTable td {
    padding: 0 10px 8px 0;
}
    .rtl .customerTable td {
        padding: 0 0 8px 10px;
    }

.my-lists-infobar--list-name {
    display: flex;
    align-items: center;
    padding: 0;
}

.listName, .listName-readOnly {
    display: inline-block;
    min-width: 200px;
    font-size: xx-large
}

.listName:hover {
    border-bottom: 1px solid var(--border-color);
}

.dkdk .listName:hover {
    border-bottom: 1px solid var(--white);
}

.edit-list-name {
    border: none;
    font-size: xx-large;
    font-weight: bold;
    box-shadow: none;
    box-sizing: border-box;
    height: 40px;
    margin: 20px 0 15px;
    width: 200px;
}

.edit-list-name:focus {
    box-shadow: none;
    border-bottom: 1px solid var(--border-color);
    outline: none;
    width: 200px;
}

.edit-list-name--error {
    box-shadow: none;
    border-bottom: 1px solid var(--red);
    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--red);
    outline: none;
    width: 200px;
    font-size: xx-large;
    font-weight: bold;
    box-sizing: border-box;
    height: 40px;
    margin: 20px 0 15px;
}

.green-check {
    cursor: pointer;
    background: var(--success);
    border-radius: 50%;
    padding: 4px;
    color: var(--reverse-text-color);
    display: inline-flex;
}

.red-x {
    cursor: pointer;
    display: inline-block;
    background: var(--red);
    border-radius: 50%;
    color: var(--reverse-text-color);
    height: 20px;
    width: 21px;
    font-size: large;
    font-weight: bold;
    text-align: center;
    transform: rotate(45deg) translate(0px, 3px);
    position: relative;
    top: -1px;
}

.tags-wrapper {
    margin-right:16px;
}

.rtl .tags-wrapper {
    margin-left:16px;
    margin-right:0px;
}

@media screen and (max-width:768px) {
    .tags-wrapper {
        margin:0 0 8px 0 !important;
    }
}

.colaborator-tag-view {
    padding: 0;
}

.close-size {
    font-size: 10px;
    padding-left: 5px;
    color: var(--red);
    font-weight: bold;
}

.close-size:hover {
    cursor: pointer;
}

.mylist-infobar--second-row {
    display: flex;
    align-items: center;
    margin: 7px 0 7px;
}

@media screen and (max-width:768px) {
    .mylist-infobar--second-row {
        flex-wrap:wrap;
        margin-top:0px;
    }
}

/* MY LIST BOTTOM TOOLBAR */
.my-lists-table-toolbar--container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
}

.my-lists-table-toolbar--container > div:first-child {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    margin: 0;
    padding: 0 20px;
    text-align: left;
}
    .rtl .my-lists-table-toolbar--container > div:first-child {
        text-align: right;
    }

.my-lists-table-toolbar--container > div:last-child {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}

.my-lists-table-toolbar--container > div.my-lists-table-toolbar-btns--container {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.my-lists-table-toolbar-sort,
.my-lists-table-toolbar-btns {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-flow: row wrap;
    width: auto;
    margin: 10px auto;
    padding: 0;
    align-items: center;
}

.my-lists-table-toolbar-divider {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 0 0 0 15px;
    border: 0;
    border-left: 1px solid var(--border-color);
}


.rtl .my-lists-table-toolbar-divider {
    margin: 0 10px 0 0;
    padding: 0 15px 0 0;
    border: 0;
    border-right: 1px solid var(--border-color);
}

.my-lists-move-to-index {
    font-weight: bold;
    text-transform: uppercase;
}

.my-lists-move-to-index input.dk-input {
    width: 90px;
    margin: 0 0 0 7px;
    box-sizing: border-box;
}
    .rtl .my-lists-move-to-index input.dk-input {
        margin: 0 7px 0 0;
    }

.row-addQuantity-link {
    margin: 3px 0 0 25px;
}
    .rtl .row-addQuantity-link {
        margin: 3px 25px 0 0;
    }

.my-lists-table-toolbar-sort .my-lists-sort-products {
    min-width: 30px;
    height: 29px;
    padding: 4px 16px;
    font-size: 20px;
}

.my-lists-table-toolbar-sort .my-lists-sort-products > span {
    line-height: normal;
}

/* Upsell Notification Banner */
.upsell-notification {
    padding: 5px 5px 5px 40px;
    display: inline-block;
    position: relative;
    background: var(--body-background-color);
    margin-top: 5px;
    width: 75%;
    border-radius: 4px;
}
    .rtl .upsell-notification {
        padding: 5px 40px 5px 5px;
    }

.upsell-notification div:before {
    content: "\f06a";
    font-size: 20px;
    position: absolute;
    left:8px;
    top: 8px;
}
    .rtl .upsell-notification div:before {
        left: unset;
        right: 8px;
    }

.upsell-notification div {
    display: inline;
}

.upsell-notification label {
    padding: 0 4px;
}

/* Review Parts */
.review-parts-mfg-container {
    border-left: 2px solid var(--border-bg);
    margin-left: 5px;
}
    .rtl .review-parts-mfg-container {
        border-left: 0;
        border-right: 2px solid var(--border-bg);
        margin-left: 0;
        margin-right: 5px;
    }

.review-parts-mfg-link {
    padding-left: 5px;
}
    .rtl .review-parts-mfg-link {
        padding-left: 0;
        padding-right: 5px;
    }

/* BACK TO LIST */
.my-lists-back-to-lists {
    display: block;
    margin: 0;
    padding: 0;
}

.view-quote__detail-list .my-lists-back-to-lists {
    display: block;
    margin: 0;
    padding-top: 32px;
    font-size: 1.2em;
}

.my-lists-back-to-lists a {
    text-decoration: none;
    cursor: pointer;
}

.my-lists-back-to-lists a::before {
    display: inline-block;
    white-space: pre-wrap;
    position: relative;
    top: 0;
    left: 0;
    margin: -2px 3px 0 0;
    content: "\e90f";
    font-family: "dk";
    font-size: 12px;
    font-weight: bold;
    color: var(--red);
    vertical-align: middle;
}
    .rtl .my-lists-back-to-lists a::before {
        left: unset;
        right: 0;
        margin: -2px 0 0 3px;
        content: "\f105";
        font-family: "dk";
    }

.my-lists-back-to-lists a:hover {
    text-decoration: underline;
}

.my-lists-back-to-lists a:hover::before,
.my-lists-back-to-lists a:hover::after {
    text-decoration: none;
}

/* TAKE A TOUR */
.take-a-tour {
    display: block;
    position: absolute;
    top: 8px;
    right: 0px;
}
    .rtl .take-a-tour {
        right: unset;
        left: 32px;
    }

.take-a-tour button {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px;
    background-color: var(--info);
    border-radius: 7%;
    font-weight: normal;
}

.take-a-tour button::before {
    content: "\f041";
    font-family: "dk";
    padding: 0 3px 0 0;
    width: 20px;
    height: 20px;
    font-size: 16px;
}
    .rtl .take-a-tour button::before {
        padding: 0 0 0 3px;
    }

.take-a-tour button:hover {
    background-color: var(--red);
}

/* TOUR MODAL */
tour-modal .modal {
    max-width: 768px;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 0;
}
    .rtl tour-modal .modal {
        max-width: 768px;
        width: calc(100% - 40px);
        margin: 0;
        padding: 0;
    }

tour-modal .tour--header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    width: 100%;
    height: 225px;
    background: var(--bg-color);
    border-radius: 8px 8px 0 0;
    text-align: center;
    box-sizing: border-box;
}

tour-modal .tour--header img {
    align-self: center;
    width: auto;
    height: auto;
    max-height: 190px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 16px 0 rgb(0 0 0 / 8%);
}

tour-modal .tour--header img.shadowless-image {
    box-shadow: none;
}

tour-modal .tour-copy--container {
    padding: 24px;
}

tour-modal .tour--footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    width: 100%;
    margin: 0;
    padding: 0 24px 24px;
    justify-content: space-between;
    box-sizing: border-box;
}

tour-modal .tour--footer label,
tour-modal .tour--footer > div {
    align-self: center;
}

/* Quote Progress Modal */
.progress-modal.modal {
    padding: 50px;
}

.progress-modal .loaded-progress {
    border-bottom: 5px solid var(--red);
    display: inline-block;
}

.progress-modal .remaining-progress {
    border-bottom: 2px solid var(--outline-grey);
    display: inline-block;
    margin-bottom: 1px;
}

/*Duplicate Modal*/
.duplicate-modal-content {
    margin-top: 25px;
}

.duplicate-modal-message {
    margin-bottom: 25px;
}

.duplicates-modal-header {
    display: block;
    margin-bottom: 25px;
}

/* TOOLTIP - GENERIC */
.my-lists-tooltip {
    position: relative;
    display: inline-block;
    border: 0;
    margin-top: 1%;
}

.my-lists-tooltip::before {
    position: relative;
    top: 30%;
    left: 4px;
    margin-right: 3px;
}
    .rtl .my-lists-tooltip::before {
        left: unset;
        right: 4px;
        margin-right: 0;
        margin-left: 3px;
    }

@media screen and (max-width:768px) {
    .my-lists-tooltip::before {
        top:10%;
    }
}

.my-lists-tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    bottom: 125%;
    left: 50%;
    width: 120px;
    margin-left: -60px;
    padding: 10px;
    text-align: left;
    color: var(--text-color);
    background: var(--bg-color--card);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}
    .rtl .my-lists-tooltip .tooltiptext {
        left: unset;
        right: 50%;
        margin-left: 0;
        margin-right: -60px;
        text-align: right;
    }

.my-lists-tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--bg-color--card) transparent transparent transparent;
}
    .rtl .my-lists-tooltip .tooltiptext::after {
        left: unset;
        right: 50%;
        margin-left: 0;
        margin-right: -5px;
    }

.my-lists-tooltip:hover .tooltiptext, 
.my-lists-tooltip:hover .copy-tooltiptext {
    visibility: visible;
    opacity: 1;
}

.my-lists-tooltip img {
    margin: 0 7px 0 0;
    mix-blend-mode: multiply;
    width: 40px;
    height: 40px;
}

.rtl .my-lists-tooltip img {
    margin: 0 0 0 7px;
}

/* TOOLTIP - ABOVE */
.my-lists-tooltip .tooltiptext--above {
    visibility: hidden;
    position: absolute;
    bottom: 125%;
    left: 50%;
    width: 120px;
    margin-left: -70px; /* Half Width + Padding */
    padding: 10px;
    text-align: left;
    color: var(--text-color);
    background: var(--bg-color--card);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
    border: 1px solid var(--black);
}
    .rtl .my-lists-tooltip .tooltiptext--above {
        left: unset;
        right: 50%;
        margin-left: 0;
        margin-right: -70px; /* Half Width + Padding */
        text-align: right;
    }

.my-lists-tooltip .tooltiptext--above::after, 
.my-lists-tooltip .tooltiptext--above::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
}

.my-lists-tooltip .tooltiptext--above::after {
    margin-left: -5px;
    border-width: 5px;
    border-color: var(--black) transparent transparent transparent;
    border-top-color: var(--bg-color--card);
}

.my-lists-tooltip .tooltiptext--above::before {
    margin-left: -6px;
    border-width: 6px;
    border-color: var(--bg-color--card) transparent transparent transparent;
    border-top-color: var(--black);
}

.my-lists-tooltip:hover .tooltiptext--above {
    visibility: visible;
    opacity: 1;
}

/* TOOLTIP - BELOW */
.my-lists-tooltip .tooltiptext--below {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 120px;
    margin-left: -70px; /* Half Width + Padding */
    padding: 10px;
    text-align: left;
    color: var(--text-color);
    background: var(--bg-color--card);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
    border: 1px solid var(--black);
}
    .rtl .my-lists-tooltip .tooltiptext--below {
        left: unset;
        right: 50%;
        margin-left: 0;
        margin-right: -70px; /* Half Width + Padding */
        text-align: right;
    }

.my-lists-tooltip .tooltiptext--below::after, 
.my-lists-tooltip .tooltiptext--below::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
}

.my-lists-tooltip .tooltiptext--below::after {
    margin-left: -5px;
    border-width: 5px;
    border-color: transparent;
    border-bottom-color: var(--bg-color--card);
}

.my-lists-tooltip .tooltiptext--below::before {
    margin-left: -6px;
    border-width: 6px;
    border-color: transparent;
    border-bottom-color: var(--black);
}

.my-lists-tooltip:hover .tooltiptext--below {
    visibility: visible;
    opacity: 1;
}

.my-lists-tooltip .tooltiptext--above,
.my-lists-tooltip .tooltiptext--below {
    font-family: var(--dkfonts);
    font-size: 12px;
    line-height: 1.3;
}

/* TOOLTIP - SIDE (BOX BELOW | ARROW ON RIGHT TOP) */
.my-lists-tooltip .tooltip-side {
    visibility: hidden;
    position: absolute;
    top: 125%;
    left: 50%;
    width: 100%;
    min-width: 300px;
    max-width: 400px;
    margin-left: -277px;
    padding: 10px;
    text-align: left;
    color: var(--text-color);
    background: var(--bg-color--card);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
    border: 1px solid var(--black);
    white-space:normal;
    font-size:initial;
    font-weight:initial;
    text-transform:initial;
    font-size:11px;
}
    .rtl .my-lists-tooltip .tooltip-side {
        left: unset;
        right: 50%;
        margin-left: 0;
        margin-right: -277px;
        text-align: right;
    }

.my-lists-tooltip .tooltip-side::after, 
.my-lists-tooltip .tooltip-side::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 100%;
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
}
    .rtl .my-lists-tooltip .tooltip-side::after,
    .rtl .my-lists-tooltip .tooltip-side::before {
        left: unset;
        right: 100%;
    }

.my-lists-tooltip .tooltip-side::after {
    margin-left: -25px;
    border-width: 5px;
    border-color: transparent;
    border-bottom-color: var(--bg-color--card);
}
    .rtl .my-lists-tooltip .tooltip-side::after {
        margin-left: unset;
        margin-right: -25px;
    }

.my-lists-tooltip .tooltip-side::before {
    margin-left: -26px;
    border-width: 6px;
    border-color: transparent;
    border-bottom-color: var(--black);
}
    .rtl .my-lists-tooltip .tooltip-side::before {
        margin-left: unset;
        margin-right: -26px;
    }

.my-lists-tooltip:hover .tooltip-side {
    visibility: visible;
    opacity: 1;
}

/* TOOLTIP - SIDE (BOX BELOW | ARROW ON LEFT TOP) */
.my-lists-tooltip .tooltip-side--left {
    visibility: hidden;
    position: absolute;
    top: 125%;
    left: 50%;
    width: 100%;
    min-width: 300px;
    max-width: 400px;
    margin-left: -25px !important;
    padding: 10px;
    text-align: left;
    color: var(--text-color);
    background: var(--bg-color--card);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
    border: 1px solid var(--black);
    white-space: normal;
    font-size: initial;
    font-weight: initial;
    text-transform: initial;
    font-size: 11px;
}
    .rtl .my-lists-tooltip .tooltip-side--left {
        left: unset;
        right: 50%;
        margin-left: 0;
        margin-right: -25px;
        text-align: right;
    }

.my-lists-tooltip .tooltip-side--left::after, 
.my-lists-tooltip .tooltip-side--left::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
}
    .rtl .my-lists-tooltip .tooltip-side--left::after,
    .rtl .my-lists-tooltip .tooltip-side--left::before {
        left: unset;
        right: 0;
    }

.my-lists-tooltip .tooltip-side--left::after {
    margin-left: 25px;
    border-width: 5px;
    border-color: transparent;
    border-bottom-color: var(--bg-color--card);
}
    .rtl .my-lists-tooltip .tooltip-side--left::after {
        margin-left: unset;
        margin-right: 25px;
    }

.my-lists-tooltip .tooltip-side--left::before {
    margin-left: 24px;
    border-width: 6px;
    border-color: transparent;
    border-bottom-color: var(--black);
}
    .rtl .my-lists-tooltip .tooltip-side--left::before {
        margin-left: unset;
        margin-right: 24px;
    }

.my-lists-tooltip:hover .tooltip-side--left {
    visibility: visible;
    opacity: 1;
}
/* END TOOLTIPS */

td.manualEntryWrapper,
td.emptyDiv {
    height: auto;
    padding: 15px 10px;
    background: var(--bg-color--card) !important;
    z-index: 1;
}

td.emptyDiv {
    background: transparent;
}

.manual-entry--part-entry {
    margin-right:16px;
}

.rtl .manual-entry--part-entry {
    margin-right: 0px;
    margin-left: 16px;
}

.manual-entry--upload {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin: 10px 0;
    padding: 0;
}

.manual-entry--upload span {
    -webkit-box-flex: 0;
    width: auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 5px 0 0;
}
    .rtl .manual-entry--upload span {
        margin: 0 0 0 5px;
    }

.my-lists-button-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.manualEntryWrapper > div {
    position: relative;
    top: 0;
    left: 8px;
}
    .rtl .manualEntryWrapper > div {
        left: unset;
        right: 8px;
    }

/* PRICE TABLE FLYOUT */


.typeAhead--wrapper {
    padding: 0;
    display: flex;
    text-align: left;
    flex-direction: column
}

.typeAhead-dropdown-button {
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    padding: 2px 4px;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    color: var(--blurple-blue) !important;
    font-weight: bold !important;
}
    .typeAhead-dropdown-button:hover {
        background: var(--light-blurple)
    }
    .typeAhead-dropdown-button div {
        display: inline-block;
    }
        .typeAhead-dropdown-button div:first-child::before {
            content: "MFR#\00a0\00a0";
        }
        .typeAhead-dropdown-button div:last-child::before {
            content: "DK#\00a0\00a0\00a0\00a0\00a0";
        }

.show-price-table--wrapper {
    position: absolute;
    width: fit-content;
    width: -moz-fit-content;
    height: auto;
    overflow-y: auto;
    margin: 0;
    padding: 10px;
    z-index: 101;
}

.show-price-table {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    margin: 0;
    padding: 0;
}

    .show-price-table price-table-edit ~ price-table-edit {
        margin-left: 5px;
    }

.rtl .show-price-table price-table-edit ~ price-table-edit {
    margin-right: 5px;
    margin-left: 0px;
}

.show-price-table .price-break-table table {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.pricing-name {
    margin: 0 0 4px 0;
    padding: 0;
    background: var(--bg-color--card);
    font-size: 12px;
    font-weight: bold;
    color: var(--text-color);
    text-align: left;
    border: 0;
    border-bottom: 0 solid var(--border-color);
}

.rtl .pricing-name {
    text-align: right;
}

.show-price-table--wrapper table.dk-table tr {
    display: table-row;
}

.show-price-table--wrapper table.dk-table th,
.show-price-table--wrapper table.dk-table td {
    text-align: right;
    padding: 4px !important;
    border: solid 1px var(--table-border-color) !important;
}

    .show-price-table--wrapper table.dk-table th:first-child,
    .show-price-table--wrapper table.dk-table td:first-child {
        text-align: left;
    }

.rtl .show-price-table--wrapper table.dk-table th,
.rtl .show-price-table--wrapper table.dk-table td {
    text-align: left;
}

    .rtl .show-price-table--wrapper table.dk-table th:first-child,
    .rtl .show-price-table--wrapper table.dk-table td:first-child {
        text-align: right;
    }

.show-price-table--wrapper table.dk-table td {
    background-color: var(--table-tr-even-bg-color) !important;
}

.show-price-table--wrapper table.dk-table tr:nth-child(odd) td {
    background-color: var(--table-tr-odd-bg-color) !important;
}

.show-price-table--wrapper table.dk-table td[colspan="3"] {
    background-color: var(--border-color--card) !important;
    border: none !important;
}

    .show-price-table--wrapper table.dk-table td[colspan="3"] strong {
        padding-top: 8px;
        display: block;
    }

@media screen and (max-width:600px) {
    .show-price-table--wrapper {
        right: auto !important;
        left: auto !important;
    }

        .show-price-table--wrapper .dk-table {
        }

            .show-price-table--wrapper .dk-table tr {
                display: table-row !important;
            }

            .show-price-table--wrapper .dk-table th,
            .show-price-table--wrapper .dk-table td {
                display: table-cell !important;
                width: auto !important;
            }
}

/* DK TABLE DEFAULTS */
table.my-lists-table {
    width: 100%;
    margin: 0 0 15px;
    table-layout: fixed;
    border-top: 1px solid var(--border-color);
}

table.my-lists-table th,
table.my-lists-table td {
    padding: 10px 15px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    overflow-wrap: anywhere;
}

table.my-lists-table th {
    padding: 15px;
    width: 25%;
    white-space: nowrap;
}

table.my-lists-table th.list-name-column {
    width: 30%;
}

table.my-lists-table th.delete-column {
    width: 50px;
}


/* SHANE - LOOK AT THIS PLEASE */
table.partsList thead tr {
    background: var(--bg-color--card);
}

table.partsList tbody:not(.expanded-table-row) tr td,
table.partsList tbody tr ~ tr td {
    border-bottom: 1px solid var(--border-color--card);
}

table.partsList tbody:nth-child(even) tr {
    background: var(--body-background-color);
}

table.partsList tbody:nth-child(odd) tr {
    background: var(--bg-color--card);
}

table.partsList tbody tr.yellow-row {
    background: rgba(253, 248, 230, 1);
}

table.partsList tbody tr.grey-row {
    background: rgba(34, 34, 34, 1);
    color: var(--white);
}

/*@media screen and (max-width:600px) {
    table.partsList tbody tr.yellow-row td.tableCell,
    table.partsList tbody tr.grey-row td.tableCell {
        width: 600px !important;
    }
}
*/
table.partsList tbody tr ~ tr {
    display:none;
}

table.partsList tbody.expanded-table-row tr ~ tr {
    display: table-row;
}

table.partsList tbody tr.grey-row a,
table.partsList tbody tr.grey-row .link,
table.partsList tbody tr.grey-row .dk-link {
    color: var(--white);
    text-decoration: underline;
}

    table.partsList tbody tr.grey-row a:hover,
    table.partsList tbody tr.grey-row .link:hover,
    table.partsList tbody tr.grey-row .dk-link:hover {
        text-decoration: underline;
        color: var(--ice-grey);
    }

table.dpartsList tbody div tr.grey-row .my-lists-part-info label {
    display: block;
    position: relative;
    top: -4px;
    left: 10px;
    right: 10px;
    margin: 0;
    padding: 0;
}

.dk-table--blue .dk-table__headings tr,
.dk-table--blue thead tr,
.dk-table__headings--solid-blue tr {
    background: var(--table-th-bg-color-blue) !important;
    color: var(--white);
}

/* MAIN PRODUCT LIST - TABLE STYLING */
/* SHANE - LOOK AT THIS PLEASE - NOT SURE IF I NEED THE ADDITIONAL SCOPED CLASS '.my-list--main-prod-list' */
.my-list--main-prod-list tr:nth-child(even) {
    background: var(--table-tr-even-bg-color);
}
.my-list--main-prod-list tr:nth-child(odd) {
    background: var(--table-tr-odd-bg-color);
}

.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div:nth-child(even),
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div:nth-child(odd) {
    border-bottom: 1px solid var(--border-color--card);
}

.my-list--main-prod-list tr.yellow-row {
    background: rgba(253, 248, 230, 1);
    border-bottom: 1px solid var(--border-color--card);
}

.my-list--main-prod-list tr.grey-row {
    background: var(--onyx-grey);
    color: var(--white);
    border-bottom: 1px solid var(--border-color--card);
}

/* GREY ROW SPECIFIC STYLING */
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div.grey-row a,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div.grey-row .link,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div.grey-row .dk-link,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div tr.grey-row a,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div tr.grey-row .link,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div tr.grey-row .dk-link {
    color: var(--white); 
    text-decoration: underline;
}

.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div.grey-row a:hover,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div.grey-row .link:hover,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div.grey-row .dk-link:hover,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div tr.grey-row a:hover,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div tr.grey-row .link:hover,
.my-list--main-prod-list.dk-table--striped:not(.dk-table--border-grid) tbody > div tr.grey-row .dk-link:hover {
    color: var(--wispy-grey); 
    text-decoration: underline;
}

.my-list--main-prod-list tbody > tr.grey-row .my-lists-part-info label {
    display: block; 
    position: relative; 
    top: -4px; 
    left: 10px; 
    right: 10px; 
    margin: 0; 
    padding: 0;
}
.my-list--main-prod-list tbody > tr.grey-row .alt-parts p {
    color: var(--white);
}

.revision-row {
    border-bottom: none !important;
}
.revision-row td {
    border-bottom: none !important;
}

/* MY LIST TABLE ROW - PART INFO */
.my-lists-part-info--container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    width: 100%;
    margin: 0;
    padding: 0;
}

/*.my-lists-part-info--container > div {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}*/

.view-options {
    display: block;
    position: relative;
    top: 10px !important;
    left: 5px;
    right: 10px;
    margin: 0;
    padding: 0;
}
    .rtl .view-options {
        left: 10px;
        right: 5px;
    }

/*.my-lists-part-info-unmatched {
    padding-left: 10px;
}
    .rtl .my-lists-part-info-unmatched {
        padding-left: 0;
        padding-right: 10px;
    }*/

.my-lists-part-info div.cref-message > div {
    display: block;
    position: relative;
    top: -4px;
    margin: 0;
    padding: 0 0 5px;
}


/* ADDITIONAL SUPPLIER MODAL */
additional-suppliers div.dk-card {
    margin-bottom: 10px;
}

additional-suppliers table.main-table .addl-suppliers-radio {
    vertical-align: middle;
}

additional-suppliers table.header-table {
    width: 100%;
    padding-bottom: 5px;
    border-collapse: separate;
    border-spacing: 5px;
}

additional-suppliers table.header-table th {
    text-align: left;
    width: 50%;
}

additional-suppliers table.header-table td.vertial-align {
    vertical-align: top;
}

/* Alternate Parts Styling */
.alt-parts {
    padding: 0 10px 10px;
    width: fit-content;
    width: -moz-fit-content; 
}

.alt-parts:before {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% - 20px);
    background-color: var(--border-color--card);
    height: 2px;
}

@media screen and (min-width:601px) {
    .alt-parts {
        min-width: calc(100vw - 40px);
    }
}

.alt-parts p,
.alt-parts-input {
    padding: 10px 0px;
}

.alt-suggested-parts {
    padding: 0 10px 10px;
    width: fit-content;
    width: -moz-fit-content;
}
    .rtl .alt-suggested-parts {
        padding: 10px 30px 25px 10px;
    }

.alt-parts > p,
.alt-suggested-parts > p {
    margin: 0;
}

.my-alternates-table {
    border: solid 1px var(--border-color--card);
}

.alt-parts > div > table,
.alt-suggested-parts > div > table {
    width: auto;
}

.alt-parts-input > span {
    position: relative;
}

.alt-parts-input > input {
    width: 200px;
    margin: 0 0 10px;
}

.alt-parts-input > span::after {
    content: "\f105";
    position: absolute;
    top: 0;
    right: 10px;
    height: 20px;
    font-size: 16px;
}
    .rtl .alt-parts-input > span::after {
        right: unset;
        left: 10px;
    }

.alt-parts th,
.alt-suggested-parts th {
    text-transform: uppercase;
}

.alt-checkbox {
    display: flex !important;
    justify-content: center;
    padding-top: 23px !important;
}

/* LIST PAGINATION */
.listception-paginated-lists {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-flow: row wrap;
    width: auto;
    margin: 20px 0;
    padding: 0;
    align-items: center;
}

.listception-paginated-lists .listception-items-per-page,
.listception-paginated-lists .listception-pagination--wrapper {
    -webkit-box-flex: 0;
    width: auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.listception-paginated-lists .listception-pagination--wrapper {
    margin: 0 0 0 15px;
    padding: 0 0 0 15px;
    border: 0;
    border-left: 1px solid var(--rain-grey);
}
    .rtl .listception-paginated-lists .listception-pagination--wrapper {
        margin: 0 15px 0 0;
        padding: 0 15px 0 0;
        border: 0;
        border-right: 1px solid var(--rain-grey);
    }

.listception-paginated-lists .listception-pagination--wrapper ul li {
    cursor: pointer;
}

/* QUOTES PAGINATION */
.quote-toggle {
    display: flex;
    align-items: flex-end;
    width: auto;
    margin: 0;
    padding: 10px 15px;
    background-color: var(--border-color--card);
}

.quote-vs-list.quote-vs-list__selected:hover {
    background-color: var(--bg-color--card);
}
.quote-vs-list:not(.quote-vs-list__selected) {
    background: transparent; 
    border: 0; 
    box-shadow: none; 
    font-weight: normal; 
    margin: 0 8px 0 0;
}
    .rtl .quote-vs-list:not(.quote-vs-list__selected) {
        margin: 0 0 0 8px;
    }
.quote-vs-list:not(.quote-vs-list__selected):hover {
    background: var(--bg-color--card); 
    font-weight: bold;
}

.quote-vs-list-toggle {
    width: fit-content;
    width: -moz-fit-content;
    font-size: 1.2em;
    padding: 5px 0 !important;
    border-radius: 22px;
    display: flex;
    background-color: var(--blurple-blue);
    cursor: pointer;
    margin-top:16px;
}

.quote-vs-list-toggle div:not(.quote-vs-list-toggle__selected) {
    color: var(--white);
    padding: 5px 15px;
    margin: 0 7px;
}

.quote-vs-list__selected {
    box-shadow: none;
    cursor: default;
    margin: 0 8px 0 0;
}
    .rtl .quote-vs-list__selected {
        margin: 0 0 0 8px;
    }
.quote-vs-list__selected:hover {
    box-shadow: none; 
    background-color: var(--bg-color--card);
}

.quote-vs-list-toggle__selected {
    padding: 5px 12px;
    background-color: var(--bg-color--card);
    border-radius: 22px;
    margin: 0 7px;
}

.view-quote__detail-list .listception-paginated-lists {
    margin: 20px 0 0;
}

/* MAKE A LIST */
.make-a-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    margin: 25px 0 40px;
}

.make-a-list .upload-list {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.make-a-list .create-blank-list {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    margin: 0 15px;
    text-align: center;
}

.make-a-list .create-blank-list h2 {
    margin: 0 0 1em;
}

.make-a-list .create-blank-list input {
    display: block;
    width: 100%;
    margin: 5px auto 0px;
}

.make-a-list .create-blank-list button {
    display: block;
    width: 100%;
    margin: 15px auto;
}

.make-a-list .create-blank-list--error {
    display: block;
    margin: 11px 0 0;
}

.make-a-list .or-msg-wrapper {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 0 1 100px;
    -ms-flex: 0 1 100px;
    flex: 0 1 100px;
    width: 250px;
    height: auto;
    border: 0;
}

.make-a-list .or-msg-vert-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 49%;
    width: 1px;
    background: var(--cloud-grey);
    z-index: 1;
}
    .rtl .make-a-list .or-msg-vert-line {
        left: unset;
        right: 49%;
    }

.make-a-list .or-msg-copy-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: auto;
    margin: -20px 0 0;
    text-align: center;
    z-index: 2;
}

.make-a-list .or-msg-copy {
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    background: var(--body-background-color);
}

/*#viewList {
    padding-left: 10px;
}
    .rtl #viewList {
        padding-left: 0;
        padding-right: 10px;
    }*/

.uploadNewList {
    padding-right: 50px;
}
    .rtl .uploadNewList {
        padding-right: 0;
        padding-left: 50px;
    }

/* UPLOAD MAPPER */
.uploadMapper {
    max-width: 1200px;
    margin: 0 auto;
}

.uploadMapper-container {

}

.uploadMapper-container .uploadMapper-header {

}

    .uploadMapper-container .uploadMapper-header .instructions {
        padding: 16px 16px 0 16px;
    }

.uploadMapper-container .uploadMapper-header small {
    display: block;
    margin: 11px 0 0;
}

.uploadMapper-container .uploadMapper-header p {
    font-size: 12px;
    line-height: 1.3;
}

.uploadMapper-scroller-container {
    position: relative;
}

.uploadMapper-scroller {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: scroll;
    overflow-y: auto;
}

.uploadMapper-scroller table {
    border-collapse: collapse;
}

.uploadMapper-scroller table tr th {
    height: 70px;
    text-align: left;
}
    .rtl .uploadMapper-scroller table tr th {
        text-align: right;
    }

.uploadMapper-scroller table tr td {
    text-align: left;
    white-space: nowrap;
    height: 30px;
}
    .rtl .uploadMapper-scroller table tr td {
        text-align: right;
    }

.uploadMapper-scroller table tr th:first-child {
    position: absolute;
    top: auto;
    left: 0;
    width: 50px;
    margin: 0;
    padding: 23px 10px 10px;
    background: var(--bg-color--card);
    border: 0;
    border-top: 0px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    font-size: 10px;
    text-align: center;
    box-sizing: content-box;
}
    .rtl .uploadMapper-scroller table tr th:first-child {
        left: unset;
        right: 0;
        border: 0;
        border-left: 1px solid var(--border-color);
    }

.uploadMapper-scroller table tr td:first-child {
    position: absolute;
    top: auto;
    left: 0;
    width: 50px;
    margin: -1px 0 0;
    padding-left: 10px;
    padding-right: 10px;
    border: 0;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    text-align: center;
}
    .rtl .uploadMapper-scroller table tr td:first-child {
        left: unset;
        right: 0;
        border: 0;
        border-left: 1px solid var(--border-color);
    }

.uploadMapper-scroller table tr th:nth-child(2),
.uploadMapper-scroller table tr td:nth-child(2) {
    padding-left: 80px;
}
    .rtl .uploadMapper-scroller table tr th:nth-child(2),
    .rtl .uploadMapper-scroller table tr td:nth-child(2) {
        padding-left: 0;
        padding-right: 80px;
    }

.uploadMapper-scroller table tr:nth-child(even) td:first-child {
    background: var(--body-background-color);
}

.uploadMapper-scroller table tr:nth-child(odd) td:first-child {
    background: var(--bg-color--card);
}

.uploadMapper-scroller .dk-table--striped tr:last-child td:first-child {
    border-bottom: 1px solid var(--border-color);
}

.uploadMapper-scroller .dk-table--striped .dk-radio-group {
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

.uploadMapper-scroller .dk-dropdown-group {
    padding: 0;
}

.header-dropdown {
    position: relative;
    padding: 10px 20px 10px 10px;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
}
    .rtl .header-dropdown {
        padding: 10px 10px 10px 20px;
    }

.uploadMapper-scroller th .tooltiptext--below {
    text-transform: none;
    font-weight: normal;
}

.uploadMapper-dropdown {
    height: 40px;
    border-color: var(--border-color);
    border-radius: 0.5rem;
}

.uploadMapper-scroller .uploadMapper-dropdown {
    height: 32px;
    border-color: var(--border-color);
    display: block
}

.upload-mapper-row-label {
    z-index: 1
}

.uploadMapper-formatMessages {
    align-items: center;
    padding: 10px 0;
}

.uploadMapper-formatMessages input:not(.dk-checkbox) {
    width: 230px;
    height: 40px;
}

.uploadMapper-formatMessages label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    padding: 0 15px;
}

.uploadMapper-continue {
    padding-top: 10px;
}

.uploadMapper-formatMessages small {
    display: block;
    margin: 11px;
}

.edit-mapping-buttons {
    display: inline-block;
    padding: 0 15px;
}

.edit-mapping-buttons .trashcan {
    margin: 10px;
    padding: 0 10px;
    border-left: solid 1px var(--rain-grey);
    color: var(--blurple-blue);
    opacity: 0.5;
}
    .rtl .edit-mapping-buttons .trashcan {
        border-left: 0;
        border-right: solid 1px var(--rain-grey);
    }

.disabled-dropdown {
    background-color: var(--cloud-grey);
    border-color: var(--rain-grey);
}

/* CORRECT BORDER ISSUE */
.uploadMapper-scroller .dk-table--striped:not(.dk-table--border-grid) thead > tr,
.uploadMapper-scroller .dk-table--striped:not(.dk-table--border-grid) .dk-table__headings {
    border-top: 0;
}

.uploadMapper-scroller .dk-table--striped:not(.dk-table--border-grid) tr,
.uploadMapper-scroller .dk-table--striped:not(.dk-table--border-grid) .dk-table__row {
    border-bottom: 1px solid var(--border-color);
}

/* BULK ADD PAGE */
.bulkAdd {
    max-width: 1150px;
    margin: 0 auto;
}

.bulkAdd-container {
    padding:16px;
}

.bulkAdd-container .bulk-add-header {

}

.bulkAdd-container .bulk-add-header .instructions {

}

.bulkAddTableHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    margin-bottom: 8px;   
    overflow-x: scroll;
}


.bulk-add-dropdown-container {
    padding-right: 8px;
    margin-bottom: 0;
}
    .rtl .bulk-add-dropdown-container {
        padding-right: 0;
        padding-left: 8px;
    }



.bulk-add-dropdown {
    height: 32px;
    border-color: var(--border-color);
}

.bulk-add-text-area {
    width: calc(100% - 6px);
    height: 350px;
    border-color: var(--border-color);
}



.bulk-add-label {
    font-family: var(--dkfonts);
    font-weight: 700;
    font-style: normal;
    font-size: 22px;
    color: var(--text-color);
    letter-spacing: normal;
}

.bulk-add-back-to-list {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 14px;
    text-align: left;
    font-family: var(--dkfonts);
    font-weight: 400;
    font-style: normal;
}
    .rtl .bulk-add-back-to-list {
        text-align: right;
    }

.bulk-add-back-to-list a {
    text-decoration: none;
    cursor: pointer;
}

.bulk-add-back-to-list a::before {
    display: inline-block;
    white-space: pre-wrap;
    position: relative;
    top: 0;
    left: 0;
    margin: 0 3px 0 0;
    content: "\f104";
    font-family: "dk";
    font-size: 12px;
    font-weight: bold;
    color: var(--red);
}
    .rtl .bulk-add-back-to-list a::before {
        display: none;
    }
    .rtl .bulk-add-back-to-list a::after {
        display: inline-block;
        white-space: pre-wrap;
        position: relative;
        top: 0;
        left: 0;
        margin: 0 3px 0 0;
        content: "\f105";
        font-family: "dk";
        font-size: 12px;
        font-weight: bold;
        color: var(--red);
    }

.bulk-add-back-to-list a:hover {
    text-decoration: underline;
}

.bulk-add-back-to-list a:hover::before,
.bulk-add-back-to-list a:hover::after {
    text-decoration: none;
}

/* LIST PREFERENCES PAGE*/
#listPreferences h1:not(.listName) {
    font-size: x-large;
}

.listPreferences-fileMapping {
    position: relative;
    display: block;
    margin: 30px 0;
    overflow: hidden;
}

.listPreferences-fileMapping-header {
    display: inline-block;
    margin: 10px;
}

.listPreferences-fileMapping-edit {
    display: inline-block;
    margin: 23px 10px;
    float: right;
}
    .rtl .listPreferences-fileMapping-edit {
        float: left;
    }

.listPreferences-container {
/*    position: relative;
    display: block;
    margin: 15px 0;
    overflow: hidden;
    padding: 15px 20px 10px;*/
}

.listPreferences-header {
    display: block;
    padding: 15px 20px 0;
}

.listPreferences-section {
    margin: 20px;
}

.listPreferences-section small {
    display: block;
    padding: 5px 0;
}

.listPreferences-option {
    padding: 4px 0;
}

    .listPreferences-option .dk-input {
        height: 20px;
        padding: 10px 4px;
        margin: 0 8px;
        top: 0px;
    }

.listPreferences-sub-option {
    margin-left: 31px;
    margin-top: 5px;
}

.listPreferences-sub-option-label {
    margin-top: 5px;
}

.dk-checkbox-label.disabled {
    cursor: default;
    color: #a4a4a4;
    color: var(--rain-grey);
    pointer-events: none;
}

    .dk-checkbox-label.disabled span.disabled {
        cursor: default;
        color: #a4a4a4;
        color: var(--rain-grey);
        pointer-events: none;
    }

.list-access_description {
    margin-top: -3px;
    margin-bottom: 10px;
}

.list-access_coworkers-wrapper {
    padding: 0;
    margin-top: -5px;
}

.list-access_coworkers-wrapper div {
    align-items: center;
}

.list-access_coworkers-wrapper label {
    padding-right: 5px;
}
    .rtl .list-access_coworkers-wrapper label {
        padding-right: 0;
        padding-left: 5px;
    }


.rtl .list-access_coworkers-wrapper div.dk-dropdown__container {
    left: 300px;
}

.list-access_password-wrapper {
    padding: 15px;
    background: var(--ice-grey);
    border-radius: 0.5rem;
}

.list-access_password-wrapper input {
    width: 250px;
}

.list-access_password-wrapper small {
    font-size: revert;
}

.list-access-message {
    padding-top: 15px;
    padding-bottom: 15px;
}

.list-access-list-name-guest {
    padding-bottom: 30px;
}

.list-access-message-guest {
    padding-top: 15px;
    padding-bottom: 20px;
}

.list-access-content-container {
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
}

.list-access-list-name-container {
    flex: 1;
}

.list-access-list-name {
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 13px;
}

.list-access-input-container {
    padding-right: 10px;
    flex: 1;
}
    .rtl .list-access-input-container {
        padding-right: 0;
        padding-left: 10px;
    }

.list-access-password-header {
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 5px;
}

.list-access-login-register {
    padding-top: 10px;
}

.list-access-button-container {
    padding-top: 15px;
    position: relative;
    left: -20px;
}
    .rtl .list-access-button-container {
        left: unset;
        right: -20px;
    }

.list-access-button-container-public {
    padding-top: 15px;
}

.password-eye-icon {
    position: relative;
    right: 25px;
    top: 5px;
    width: 20px;
    height: 20px;
    color: var(--rain-grey);
}
    .rtl .password-eye-icon {
        right: unset;
        left: 25px;
    }

.password-eye-icon-list-access-public {
    position: relative;
    right: -150px;
    top: -27px;
    width: 20px;
    height: 20px;
    color: var(--rain-grey);
}
    .rtl .password-eye-icon-list-access-public {
        right: unset;
        left: -150px;
    }

.password-eye-icon-list-access {
    position: relative;
    right: 25px;
    top: 5px;
    width: 20px;
    height: 20px;
    color: var(--rain-grey);
}
    .rtl .password-eye-icon-list-access {
        right: unset;
        left: 25px;
    }

.public-list-access-error {
    position: relative;
    top: -25px;
}


.listPreferences-save-default-preferences {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.listNameContainer {
    width: 100%;
    align-items: center;
}

.listNameContainerViewList {
    width: 70%;
    align-items: center;
}

.listNameInput {
    display: inline-block;
    overflow-x: auto;
    max-width: 90%;
    white-space: nowrap;
}

.invalidListName {
    display: block;
    margin: 7px;
}

.listNameInputViewList {
    display: inline-block;
    overflow-x: auto;
    max-width: 90%;
    white-space: nowrap;
}

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

.listNameButtons {
    display: inline-block;
    margin-left: 2%;
    align-content: center;
    min-width: 53px;
}
    .rtl .listNameButtons {
        margin-left: 0;
        margin-right: 2%;
    }

.visibility-option {
    justify-content: space-between;
    display: flex;
    align-items: baseline;
    width: 50%;
    padding: 5px 0;
}

.sharedUser {
    display: inline-flex;
    align-items: center;
    position: relative;
    right: -35px;
}
    .rtl .sharedUser {
        right: unset;
        left: -35px;
    }

.share-input {
    padding-top: 10px;
}

.share-input input {
    width: 225px;
    margin: 0 5px;
}

.share-input .select__wrapper {
    width: fit-content;
    display: inline-flex;
    margin: 0 5px;
}

.share-input > button {
    margin: 0 5px;
}

.share-input small {
    display: block;
    font-style: italic;
    padding: 5px;
}

.listPreferences .dk-dropdown__container {
    height: 35px;
}

.sharedUser .icon-close-circle {
    width: 20px;
    margin-left: 15px;
    font-size: 20px;
    color: var(--red);
    cursor: pointer;
}
    .rtl .sharedUser .icon-close-circle {
        margin-left: 0;
        margin-right: 15px;
    }

/* PART LIST VIEW PAGE */
.view-list-header {
    display: flex;
    align-items: baseline;
/*    padding-top: 15px
*/}

virtual-scroller {
    height: 1000px;
}

#viewList h1 {
    font-size: xx-large;
    margin: 0;
    padding: 0;
}

@media screen and (min-width:601px) {
    .part-info-content .part-dk-number {
        white-space: nowrap;
    }

    .part-info-content .part-description {
        white-space: nowrap;
    }
}

.mfgNameDisplay {
    color: var(--blurple-blue);
    font-weight: bold;
}

.supplierName {
    color: var(--text-color);
    font-weight: bold;    
}

.notification-banner {
    padding: 0 0 20px 50px;
}
    .rtl .notification-banner {
        padding: 0 50px 20px 0;
    }

.cref-message {
    padding-top: 5px;
}

.strikethrough-quantity {
    text-decoration: line-through;
    display: inline-block;
    padding-right: 5px;
}
    .rtl .strikethrough-quantity {
        padding-right: 0;
        padding-left: 5px;
    }

.strikethrough-quantity span {
    padding-right: 10px
}
    .rtl .strikethrough-quantity span {
        padding-right: 0;
        padding-left: 10px
    }

.visibility-wrapper, 
.visibility-wrapper div {
    display: inline-block;
}

@media screen and (max-width:768px){
    .visibility-wrapper {
        flex-grow: 1;
        width: 100%;
    }
}

.visibility-message {
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    padding-right: 10px
}
    .rtl .visibility-message {
        padding-right: 0;
        padding-left: 10px;
    }

.visibility-value {
    font-size: 12px;
    margin-top: 10px;
}

.visibility-radio {
    vertical-align: middle;
    padding-right: 30px;
}
    .rtl .visibility-radio {
        padding-right: 0;
        padding-left: 30px;
    }

.visibility-cancel {
    border: none;
    color: var(--stone-grey);
    background-color: var(--bg-color--card);
    text-decoration: underline;
    padding-right: 10px;
}
    .rtl .visibility-cancel {
        padding-right: 0;
        padding-left: 10px;
    }

.visibility-cancel:hover {
    cursor: pointer;
}

.edit-visibility {
    margin: 5px;
    padding-right: 14px;
    border-right: 1px solid var(--border-color);
}
    .rtl .edit-visibility {
        padding-right: 0;
        padding-left: 14px;
        border-right: 0;
        border-left: 1px solid var(--border-color);
    }

/* MESSAGE CONTAINER */
.my-lists-message-container {
    display: block;
    width: 920px;
}

.message-notification {
    clear: both;
    margin-top: 10px;
}

.message-notification.dk-message--failure .dk-message__content {
    padding: 12px 16px;
}

.message-notification.dk-message--failure .dk-message__details {
    font-size: larger;
}

/* TOP TOOL BAR FEATURE DROPDOWN */
.my-lists--top-toolbar .dk-list-more-features--container {
    position: relative;
}

.my-lists--top-toolbar button.features-dropdown--open {
    position: relative;
    z-index: 11;
    border: 1px solid var(--border-color);
    border-bottom: 1px solid var(--bg-color--card);
    box-shadow: 0;
    border-radius: 3px 3px 0 0;
    min-width: auto;
    width: auto;
    padding: 8px 12px;
}

.my-lists--top-toolbar button.features-dropdown--open:focus {
    box-shadow: none;
}

.my-lists--top-toolbar button.features-dropdown--closed {
    min-width: auto;
    width: auto;
    padding: 8px 12px;
}

.my-lists--top-toolbar--container .more-features-dropdown {
    position: absolute;
    top: 36px;
    left: auto;
    right: 8px;
    text-align: right;
    min-width: max-content;
    background: var(--bg-color--card);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
    z-index: 10;
}
    .rtl .my-lists--top-toolbar--container .more-features-dropdown {
        right: auto;
        left: 8px;
    }

.more-features-dropdown button {
    display: block; 
    margin: 5px 8px;
}
.more-features-dropdown button span {
    display: inline-block; 
    vertical-align: middle; 
    margin: 0 5px;
}

/* PREFERENCE BUTTON */
.my-lists--top-infobar .my-lists-list-preferences,
.mylist-infobar--second-row .my-lists-list-preferences {
    padding: 8px;
    text-align: center;
}

    .my-lists--top-infobar .my-lists-list-preferences::before,
    .mylist-infobar--second-row .my-lists-list-preferences::before {
        position: relative;
        padding: 0 5px;
        content: "\e994";
        font-family: "dk";
        font-size: 12px;
    }

@media screen and (max-width:768px) {
    .my-lists--top-infobar .my-lists-list-preferences {
        padding:0px;
        margin-bottom:10px;
    }

        .my-lists--top-infobar .my-lists-list-preferences:hover {
            background-color: initial;
            border: none;
            box-shadow: none;
        }
}

/* TAGS */
.tag {
    border: 1px solid var(--onyx-grey);
    text-align: center;
    border-radius: 100px;
    padding: 2px 15px;
    margin: 2px 3px;
    background-color: var(--bg-color--card);
    display: inline-block;
}


.dkdk .tag {
    border-color:var(--white);
}

.tag-edit {
    cursor: pointer;
    min-width: 50px;
    width: auto;
}

.add-tag:hover {
    cursor: pointer;
}

.share-list-copy-conatiner {
    padding-left: 10px;
}
    .rtl .share-list-copy-conatiner {
        padding-left: 0;
        padding-right: 10px;
    }

input::-ms-reveal, input::-ms-clear {
    display: none;
}

.with-tags {
    border-left: 1px solid var(--border-color);
    padding-left: 10px;
}
    .rtl .with-tags {
        border-left: 0;
        border-right: 1px solid var(--border-color);
        padding-left: 0;
        padding-right: 10px;
    }

.subsLink {
    padding: 2px 0;
}

.topBottomPadding {
    padding: 2px 0;
}

.include-attrition-display {
    font-weight: bold;
    display: inline-block;
    padding-right: 5px;
    text-transform: uppercase;
}

.uppercase {
    text-transform: uppercase;
}



table {
    border-spacing: 0;
}

.tableHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    height: 35px;
    background: var(--border-color--card);
    align-content: center;
    font-weight: bold;
    text-transform: uppercase;
}
.tableHeader.sticky {
    background: var(--border-color--card);
}

.partTableWrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-width: 100%;
    max-height: 700px;
}

.partTable {
    table-layout: fixed;
}

.partTable th {
    position: sticky;
    top: 0;
    left: 0;
    height: 50px;
    padding-left: 5px;
    background: var(--border-color--card);
    text-align: left;
}
    .rtl .partTable th {
        left: 0;
        right: 0;
        padding-left: 0;
        padding-right: 5px;
        text-align: right;
    }

.part-info-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    align-items: center;
}

.part-info-content .dk-checkbox-group {
    align-items: center;
}

.part-info-content .dk-checkbox-label {
    padding: 0 10px;
}

.part-info-alternate-icon {
    font-weight: bolder;
    font-size: 20px;
    cursor: pointer;
    width: 23px;
    height: 23px;
    padding: 0 10px 0 0;
}
    .rtl .part-info-alternate-icon {
        padding: 0 0 0 10px;
    }

.partInfoHeader {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 35px;
    margin: 0;
    padding: 0;
    align-content: center;
    background: var(--border-color--card);
    z-index: 5;
}

.partInfoHeader .dk-checkbox-group {
    padding-top: 6px;
    align-items: center;
}

.partInfoHeader .dk-checkbox-label {
    padding: 0 10px;
}

.partInfoHeader .partInfo-part-title {
    margin: 10px 0 0;
}

.columnHeader {
    text-align: center;
}

.partTable td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-color--card);
    z-index: 2;
}
    .rtl .partTable td:first-child {
        left: 0;
        right: 0;
    }

.partTable th:first-child {
    z-index: 3;
}

/* PRICING SUMMARY */
.price-summary {
    display: inline-flex;
    margin: 10px 0 10px auto;
    font-size: xx-large;
}
    .rtl .price-summary {
        margin: 10px auto 10px 0;
    }

.price-summary--with-assemblies {
    display: inline-flex;
    margin: 10px 0 10px auto;
    font-size: xx-large;
}
    .rtl .price-summary--with-assemblies {
        margin: 10px auto 10px 0;
    }

.price-summary--currency {
    font-weight: bold;
    text-transform: uppercase;
    padding-right: 10px;
    display: inline-block
}
    .rtl .price-summary--currency {
        padding-right: 0;
        padding-left: 10px;
    }

.price-summary--total-price__wrapper {
    text-align: right;
}
    .rtl .price-summary--total-price__wrapper {
        text-align: left;
    }

.price-summary--total-price {
    font-weight: bold;
    display: inline-block;
}

.price-summary--assemblies-price {
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid var(--border-color);
    color: var(--rain-grey);
    white-space: nowrap;
    font-weight: bold;
    display: inline-block
}
    .rtl .price-summary--assemblies-price {
        border-left: 0;
        border-right: 1px solid var(--border-color);
    }

/* MARKETPLACE MESSAGING */
.shippedByDisplay {
    display: block;
    margin: 8px 0;
    padding: 0;
}

.shippedByDisplay .marketPlaceProduct {
    display: inline-flex;
    text-transform: uppercase;
    color:var(--red);
}

.marketPlaceProduct::before {
    padding: 0 5px 0 0;
    content: "\e91b";
    font-family: "dk";
    font-size: 12px;
    font-weight: bold;
}
    .rtl .marketPlaceProduct::before {
        padding: 0 0 0 5px;
    }

.shippedByDisplay .quantity-message {
    display: block;
    padding: 0 0 3px;
    white-space:nowrap;
}

.shippedByDisplay .marketPlace-message {
    display: block;
    font-family: var(--dkfonts);
    font-size: 12px;
    font-weight: normal;
    color: var(--red);
    cursor: default;
}

.shippedByDisplay .quantity-message .help-icon-link {
    padding: 0 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

/* PACK TYPE DROPDOWN */
.packtype-wrapper,
.packType-dropdown--wrapper {
    position: relative;
}

.packType-dropdown-button {
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    padding: 2px 4px;
}

    .packType-dropdown-button .packType-dropdown--flex {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: auto;
        height: auto;
        justify-content: flex-end;
        text-align: right;
        color: var(--text-color);
        box-sizing: border-box;
        font-weight: bold;
    }

.rtl .packType-dropdown-button .packType-dropdown--flex {
    text-align: left;
    padding: 0px 5px 0px 0px;
}

.packType-dropdown-button--arrow::after {
    padding: 0 3px 0 6px;
    content: "\f107";
    font-family: "dk";
    font-size: 12px;
}

    .rtl .packType-dropdown-button--arrow::after {
        display: none;
        content: none;
    }

.rtl .packType-dropdown-button--arrow::before {
    padding: 0 6px 0 3px;
    content: "\f107";
    font-family: "dk";
    font-size: 12px;
}

.packType-dropdown-button div {
    display: inline-block
}

.packType-dropdown-button:hover {
    border: 1px solid var(--text-color);
}

.packtype-wrapper div {
    display: inline-block
}

.packtype-selectOptionsList {
    position: absolute;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2px;
    background: var(--bg-color--card);
    box-shadow: 0 8px 16px #0003;
    z-index: 1;
    box-sizing: border-box;
}

.align-qty {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: end;
    height:37px;
    box-sizing:border-box;
}

.packaging-error-messages {
    text-align:center;
}

.offerUpsell .packType,
.offerUpsell .unitPrice,
.offerUpsell .extPrice {
    vertical-align: top !important;
}

.editable pack-type:last-of-type .align-qty:not(.packType-dropdown-button),
.editable unit-price:last-of-type .align-qty:not(.packType-dropdown-button),
.editable extended-price:last-of-type .align-qty:not(.packType-dropdown-button) {
    margin-bottom: 24px;
}

pack-type:nth-of-type(6) .align-qty,
unit-price:nth-of-type(6) .align-qty,
extended-price:nth-of-type(6) .align-qty {
    margin-bottom: 0px;
}



.packtype-item-packaging {
    display: inline-block;
    padding: 0 0 0 5px;
    border-left: solid 1px var(--black);
    margin: 0 5px;
}
    .rtl .packtype-item-packaging {
        padding: 0 5px 0 0;
        border-left: 0;
        border-right: solid 1px var(--black);
    }

.dkdk .packtype-item-packaging {
    border-color:var(--white);
}

.packtype-selectOption-item {
    display: block;
    margin: 0;
    padding: 4px;
}

.packtype-selectOption-item div {
    display: inline-block
}

.packtype-selectOption-item:hover {
    background: var(--blurple-blue);
    color: var(--white);
}

.align-qty {
    height: 36px;
    margin-bottom: 7px;
}

div.align-qty:nth-of-type(6) {
    margin-bottom: 0px;
}


/* TABLE CELL STYLING */
.tableCell {
/*    position: relative;
*/    padding:8px 16px;
    text-align: start;
    border-right: 2px solid var(--border-color--card);
    background-color: inherit;
}
    .rtl .tableCell {
        border-right: 0;
        border-left: 2px solid var(--border-color--card);
    }

.tableCell.packType {
    position: static;
}

.tableCell.quantity {
/*    position: inherit;
*/}

.partTableCell input {
    max-width: 150px;
}

.thinnerHeader {
    width: 150px;
}

.customizeOpen button {
    position: relative;
    width: auto;
    margin-left: 3px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    color: var(--blurple-blue);
    background-color: var(--bg-color--card);
    border: none;
    z-index: 6;
}
    .rtl .customizeOpen button {
        margin-left: 0;
        margin-right: 3px;
    }

.no-parts-on-list {
    position: relative;
    height: 500px;
    min-height: 500px;
    padding-left: 10px;
    background-color: inherit;
}
    .rtl .no-parts-on-list {
        padding-left: 0;
        padding-right: 10px;
    }

.qtyEntry input {
    margin: 3px;
    padding: 5px;
    border: 2px solid var(--border-color);
    border-radius: 5px;
}

.singlePartButton button {
    width: 75px;
    margin: 3px;
    padding: 5px;
    text-align: center;
    border: 2px solid var(--outline-grey);
    border-radius: 5px;
}

.add-btn button {
    background-color: var(--bg-color--card);
    color: var(--blurple-blue);
    font-weight: bold;
}

.inlineBlock,
.singleEntry td {
    display: inline-block;
}

.floatingAddRow {
    position: absolute;
    bottom: 0;
    margin-left: 10px;
    padding: 10px;
    z-index: 9999;
}
    .rtl .floatingAddRow {
        margin-left: 0;
        margin-right: 10px;
    }

.customerIdInput::-webkit-outer-spin-button, .customerIdInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.edit-icon {
    height: 14px;
    margin: 0 7px;
    cursor: pointer;
    color: var(--text-color);
}

.my-lists-infobar--list-name .edit-icon, .listPreferences-header .edit-icon, .uploadMapper-container .edit-icon {
    margin: 5px 10px;
    font-size: large;
    font-weight: bold;
    display: inline-block;
}

minimum-order-quantity div {
    display: inline-block
}

.moq-subpack {
    display: block;
    padding-top: 2px;
}

/* ADJUST YES-NO BUTTON SPACING */
.my-lists-infobar--list-name--options span, .listPreferences-header span, .edit-mapping-buttons span:not(.trashcan) {
    margin: 0 3px;
}



/* MyLists Assemblies and Revisions */
.internalOnly-edit {
    margin-left: 37%;
    margin-bottom: 5%;
    padding-right: 14px;
}

.rtl .internalOnly-edit {
    margin-left: 0;
    margin-right: 37%;
    padding-right: 0;
    padding-left: 14px;
}

/*.revision-group,
.assemblies-container {
    margin: 0 0 0 8px;
}

    .rtl .revision-group,
    .rtl .assemblies-container {
        margin: 0 8px 0 0;
    }*/



    @media screen and (max-width:768px){
        .revision-group,
        .assemblies-container {
            margin: 0;
        }

        .rtl .revision-group,
        .rtl .assemblies-container {
            margin: 0;
        }

        .assemblies-container {
            flex-grow: 1;
            display: flex;
            justify-content: end;
        }

            .revision-group .dk-input,
            .assemblies-container .dk-input {
                margin-bottom: 4px;
            }

    }

.revision-group select,
.revision-group select:focus,
.revision-group select option {
    background-color: var(--bg-color--input);
}

.dkdk .revision-group select {
    background-image: url(https://www.digikey.com/-/media/Designer/Global/Icons/icon-triangle-down_white.png)
}
    
.assemblies-input {
    width: 85px;
}

.assemblies-label {
    white-space:nowrap;
}

.assemblies-tooltip {
    margin: 0 5px 0 0;
}
    .rtl .assemblies-tooltip {
        margin: 0 0 0 5px;
    }

.my-lists--top-toolbar--container > .assemblies-container > div.assemblies-input-container {
    position: relative;
    margin: 0 10px 0 0;
}
    .rtl .my-lists--top-toolbar--container > .assemblies-container > div.assemblies-input-container {
        margin: 0 0 0 10px;
    }
    
.my-lists--top-toolbar--container > .assemblies-container > div.assemblies-input-container input.dk-input {
    padding-right: 30px;
}
    .rtl .my-lists--top-toolbar--container > .assemblies-container > div.assemblies-input-container input.dk-input {
        padding-right: 0;
        padding-left: 30px;
    }

/* MyLists Assemblies in the Column */
.quantity-cell-container {
    position: relative;
    width: 100%;
}

.quantity-container {
    width: 100%;
}

.assemblies-cell-container {
    margin: 0 0 0 2.5%;
    display: contents;
}
    .rtl .assemblies-cell-container {
        margin: 0 2.5% 0 0;
    }

.assemblies-cell {
    font-size: 12px;
    padding: 0 3px;
}

.icon-plus.assemblies-cell, 
.icon-close.assemblies-cell {
    font-size: 8.5px;
}

.quantity-assembly-header {
    font-weight: bold;
    font-size: 10px;
    padding: 0 5px;
}

.assemblies-cell-container > span:first-child {
    padding: 0 3px 0 7px;
}
    .rtl .assemblies-cell-container > span:first-child {
        padding: 0 7px 0 3px;
    }

/*All Toggle switch stuff. There's a lot. Checkboxes can't be classically styled, soooo here we go*/
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 18px;
}

/* Hide default HTML checkbox */
.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cloud-grey);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 13px;
    left: 3px;
    bottom: 4px;
    background-color: var(--bg-color--card);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 60%;
}

input:checked + .slider {
    background-color: var(--blurple-blue);
}

input:checked + .slider:before {
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(15px);
}

.attrition-container {
    display: inline-flex;
    order: 2;
    margin: 0 0 0 auto;
}
    .rtl .attrition-container {
        margin: 0 auto 0 0;
    }

.attrition-container label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.857rem;
    gap:0px !important;
}

    .attrition-container label:before,
    .attrition-container label:after {
        font-size: 1rem;
        margin-left:8px;
    }

    .rtl .attrition-container label:before,
    .rtl .attrition-container label:after {
        margin-left: 0px;
        margin-right:8px;
    }

.attrition-text {
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
}

.attrition-tooltip {
    display: inline-block;
    padding: 0 5px;
}

.attrition-switch-container {
    display: inline-block;
    margin: 0 0 0 5px;
}
    .rtl .attrition-switch-container {
        margin: 0 5px 0 0;
    }

/* Gets rid of the X on input boxes for IE */
::-ms-clear {
    display: none;
}

/* Gets rid of number input box arrows for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*Gets rid of number input box arrows for Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

div.quantity {
    margin-bottom:8px;
}

/*div.quantity:nth-of-type(6) {
    margin-bottom:0px;
}*/

div.quantity input.dk-radio {
    margin: 0 7px;
}

/* STANDARD MODAL STYLE UPDATE */
.modal {
    position: fixed;
    top: 50vh;
    left: 50%;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color--card);
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.08);
    border: 0;
    border-radius: 8px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    z-index: 102;
    display: flex;
    flex-direction: column;
    max-height: 95vh;
}

.modal:focus {
    outline: none;
}

.blurple-background {
    background-color: #1a1552 !important;
}

.modal.spinner {
    min-width: 300px;
    min-height: 150px;
}

.modalHead {
    padding: 24px 24px 16px;
}

.modalTitle {
    margin: 0;
    padding: 0;
    font-size: 22px;
    font-weight: bold;
    color: var(--text-color);
}

.modalBody {
    height: 100%;
    overflow: auto;
    padding: 0 24px 24px;
}


.modalBody table {
    overflow: auto;
}

.modalBody img.product-img {
    width: 100%;
    height: auto;
}

.download-spinner {
    position: relative;
    left: 45%;
    top: 45%;
    line-height: 0.5em;
}
    .rtl .download-spinner {
        left: unset;
        right: 45%;
    }

.spinnerBackground {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 101;
}

.overflow-x--auto {
    overflow-x: auto;
}

/* MODAL SIZES */
.small {
    max-width: 368px;
    width: calc(100% - 40px);
    margin: 0 auto;
}
.medium {
    max-width: 568px;
    width: calc(100% - 40px);
    margin: 0 auto;
}
.large {
    max-width: 768px;
    width: calc(100% - 40px);
    margin: 0 auto;
}
.x-large {
    max-width: 968px;
    width: calc(100% - 40px);
    margin: 0 auto;
}

.change-log-table {
    border-collapse: collapse;
    text-align: left;
    margin: 10px 0 10px 35px; /* top, right, bottom, left */
}

    .change-log-table th,
    .change-log-table td {
        padding: 8px;
        font-weight: normal; /* Unbold the header */
    }

    .change-log-table th {
        background-color: transparent;
        border-bottom: 1px solid #ddd; /* Adds bottom border under the header */
    }

    .change-log-table td {
        vertical-align: top;
    }

    .change-log-table tbody tr {
        border-bottom: 1px solid #ddd;
    }

    .change-log-table th:first-child,
    .change-log-table td:first-child {
        min-width: 150px;
    }

    .change-log-table label {
        display: block;
    }

    .change-log-table tbody tr:last-child {
        border-bottom: none;
    }

/*CHANGE LOG MODAL*/
.change-log-message {
    font-size: 12px;
    padding-right: 10px;
}

.change-log-icon {
    padding-right: 10px;
    vertical-align: middle;
    font-size: 24px;
}

.transaction-row {
    padding-bottom: 5px;
}


.change-log-modified-by {
    font-size: 10px;
    color: #666666;
    padding-left: 35px;
}

/* CUSTOMIZE COLUMNS MODAL */
.customize-column-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    margin: 0;
    padding: 15px 20px;
    background: var(--bg-color--card);
    z-index: 1000;
    overflow: auto;
    box-sizing: border-box;
}
    .rtl .customize-column-modal {
        right: unset;
        left: 0;
    }

.customize-column-modal ul.column-order-table,
.customize-column-modal ul.column-order-table li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.customize-column-modal ul.column-order-table li {
    margin: 10px 0;
}

.column-order-row {
    display: block;
}

.column-order-cell {
    display: block;
    float: left;
    margin: -5px 3px 0 0;
    cursor: grab;
}
    .rtl .column-order-cell {
        float: right;
        margin: -5px 0 0 3px;
    }

.customize-column-modal .column-order-cell--white {
    color: var(--reverse-text-color);
    cursor: auto !important;
}

.customize-column-modal .customize-buttons {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    text-align: center;
}
.customize-column-modal .customize-buttons  button {
    flex: 1 0 auto;
    margin: 5px 8px 5px 0;
}
    .rtl .customize-column-modal button {
        margin: 5px 0 5px 8px;
    }
.customize-column-modal .customize-buttons button:last-child {
    margin: 5px 0;
}

/* DOWNLOAD MODAL - SPECIFIC STYLING */
.customize-download-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    margin: 0;
    padding: 5px 20px;
    background: var(--bg-color--card);
    z-index: 999999;
    overflow: auto;
    box-sizing: border-box;
}
    .rtl .customize-download-modal {
        right: unset;
        left: 0;
    }

.customize-download-modal .download-options {
    margin: 10px 0;
}

.customize-download-modal .download-options .dk-table {
    width: auto;
    min-width: 0;
}

.customize-download-modal .download-options .dk-table th,
.customize-download-modal .download-options .dk-table td {
    padding: 2px 5px;
    border: 0;
}

.customize-download-modal .download-options td {
    padding-right: 10px;
}
    .rtl .customize-download-modal .download-options td {
        padding-right: 0;
        padding-left: 10px;
    }

.customize-download-modal .download-columns {
    display: block;
    width: auto;
    height: auto;
    min-height: 150px;
    margin: 2px auto;
    padding: 0;
    border: 0;
    border-top: 0;
    border-bottom: 0;
    box-sizing: border-box;
}

.customize-download-modal .download-columns .h2 {
    padding-bottom: 0;
}

.customize-download-modal .download-buttons {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    text-align: center;
}

.customize-download-modal .download-buttons button {
    flex: 1 0 auto;
    margin: 5px 8px 5px 0;
}
    .rtl .customize-download-modal .download-buttons button {
        margin: 5px 0 5px 8px;
    }

.customize-download-modal .download-buttons button:last-child {
    margin: 5px 0;
}

.customize-download-modal .download-columns-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    width: auto;
    margin: 0 0 7px;
}

.customize-download-modal .download-columns-header > label {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
}
    .rtl .customize-download-modal .download-columns-header > label {
        text-align: right;
    }

.customize-download-modal .download-columns-header .download-selectAll {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: right;
}
    .rtl .customize-download-modal .download-columns-header .download-selectAll {
        text-align: left;
    }

.customize-download-modal ul.download-column-order-table,
.customize-download-modal ul.download-column-order-table li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.customize-download-modal ul.download-column-order-table li {
    display: block;
    width: auto;
    height: auto;
    margin: 10px 0;
}

.customize-download-modal .download-column-order-row {
    display: block;
}

.customize-download-modal .download-column-order-cell {
    display: block;
    float: left;
    margin: -5px 3px 0 0;
    cursor: grab;
}
    .rtl .customize-download-modal .download-column-order-cell {
        float: right;
        margin: -5px 0 0 3px;
    }

.customize-download-modal .download-column-order-cell--white {
    color: var(--reverse-text-color);
    cursor: auto !important
}

/* DOWNLOAD EMAIL */
.customize-download-modal .email-wrapper {
    display: block;
    margin: 10px 0 15px;
}

.customize-download-modal .email-wrapper .dk-input-group-with-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    width: 100%;
    margin: 10px 0;
}

.customize-download-modal .email-wrapper .dk-input-group-with-btn > div {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: calc(100% - 200px);
}

.customize-download-modal .email-wrapper .dk-input-group-with-btn > div label {
    display: block;
    margin: 0 0 5px;
}

.customize-download-modal .email-wrapper .dk-input-group-with-btn > div input {
    width: 100%;
}

.customize-download-modal .email-wrapper .dk-input-group-with-btn button {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin: 5px 8px;
    align-self: self-start;
    position: relative;
    top: 16px;
}

.customize-download-modal .email-wrapper .email-msg {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    box-sizing: border-box;
}
.customize-download-modal .email-wrapper .email-msg .email-sent {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    visibility: visible;
    margin: 0;
    padding: 3px 0;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: var(--reverse-text-color);
    background: var(--success);
    /* MESSAGE ANIMATION */
    -moz-animation: messageAnimation 0s ease-in 5s forwards;
    -webkit-animation: messageAnimation 0s ease-in 5s forwards;
    -o-animation: messageAnimation 0s ease-in 5s forwards;
    animation: messageAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.customize-download-modal .email-wrapper .email-msg .email-error {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--red);
    line-height: 1.3;
}

.customize-download-modal .email-wrapper .email-msg .email-error::before {
    content: "\f071";
    font-family: "dk";
    font-size: 1rem;
    position: relative;
    top: 1px;
    padding: 0 5px 0 0;
}

    .rtl .customize-download-modal .email-wrapper .email-msg .email-error::before {
        padding: 0 0 0 5px;
    }

/* QUOTE EMAIL */
.quote-result .email-wrapper p {
    display: inline;
    font-size: 1.25rem;
}

.quote-result .email-wrapper button {
    position: inherit;
}

.quote-result .email-wrapper .dk-input {
    margin: 0 0 0 30px;
    width: 50%;
}
    .rtl .quote-result .email-wrapper .dk-input {
        margin: 0 30px 0 0;
    }

.quote-result .email-wrapper .dk-input-group-with-btn button {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    position: relative;
    top: 0;
    margin: 5px 8px;
}

.download-quote-div {
    font-size: 1.25rem;
    margin-bottom: 30px;
}

.download-quote-button-text {
    width: 30px;
    display: inline-block;
}

.download-quote-div .download-quote-button {
    margin-left: 25px;
    display: inline-block;
}
    .rtl .download-quote-div .download-quote-button {
        margin-left: 0;
        margin-right: 25px;
    }

.download-quote-button::before {
    position: relative;
    padding: 0 5px;
    content: "\e905";
    font-family: "dk";
    font-size: 12px;
}

.modal .email-wrapper .email-msg {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    box-sizing: border-box;
}

.modal .email-wrapper .email-msg .email-sent {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    visibility: visible;
    margin: 0;
    padding: 10px 0;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: var(--reverse-text-color);
    background: var(--success);
    /* MESSAGE ANIMATION */
    -moz-animation: messageAnimation 0s ease-in 5s forwards;
    -webkit-animation: messageAnimation 0s ease-in 5s forwards;
    -o-animation: messageAnimation 0s ease-in 5s forwards;
    animation: messageAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.modal .email-wrapper .email-msg .email-error {
    display: block;
    position: relative;
    top: -9px;
    left: -18px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: var(--red);
}
    .rtl .modal .email-wrapper .email-msg .email-error {
        left: unset;
        right: -40px;
    }

.modal .email-wrapper .email-msg .email-error::before {
    content: "\f071";
    font-family: "dk";
    font-size: 1rem;
    position: relative;
    top: 1px;
    padding: 0 5px 0 0;
}
    .rtl .modal .email-wrapper .email-msg .email-error::before {
        padding: 0 0 0 5px;
    }

@keyframes messageAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes messageAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}

/* DRAG AND DROP STYLING FOR PARTS LIST */
.cdk-drag-placeholder {
    opacity: 0;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.partRow:last-child {
    border: none;
}

.listOfParts.cdk-drop-list-dragging .partRow:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.partRow:not(.cdk-drag-preview) td {
    border-bottom: 1px solid var(--border-color);
}

.cdk-drag-preview {
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    text-align: center;
    background: var(--bg-color--card);
    cursor: grabbing;
}

.cdk-drag-preview td {
    background: var(--bg-color--card);
    vertical-align: middle;
}

.cdk-drag-preview .partTableCell {
    width: 300px;
}

/* VIEW QUOTE COMPONENT */
.view-quote {
    background: var(--body-background-color);
    border-top: 1px solid var(--border-color);
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -20px !important;
}

.view-quote__quote-list {
    overflow-y: auto;
    padding: 15px 20px;
    min-width: 250px;
    max-height: 500px;
    display: inline-block;
}

.view-quote__quote-list-card {
    margin: 8px 0 7px;
    padding: 6px 15px;
}

.view-quote__quote-list-card:hover:not(.quote-list-selected__wrapper) {
    border: 1px solid var(--blurple-blue);
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
}

.view-quote__quote-list-card div {
    padding: 2px;
}

.quote-list-selected__wrapper {
    border: 2px solid var(--blurple-blue);
    box-sizing: border-box;
    border-radius: 4px;
}

.quote-list-selected__wrapper::before {
    border-color: var(--blurple-blue);
    position: relative;
    left: -18px;
    top: -14px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--blurple-blue);
    content: "";
    display: block;
    transform: rotate(45deg);
}
    .rtl .quote-list-selected__wrapper::before {
        left: unset;
        right: -18px;
        border-right: 0;
        border-left: 10px solid var(--blurple-blue);
        transform: rotate(-45deg);
    }

.quote-list-selected {
    margin-top: -20px;
}

.view-quote__quote-info div:not(.icon-info-circle):not(.copy-tooltiptext) {
    display: inline-block;
    padding-top: 10px;
    font-size: initial;
}

.view-quote__quote-info div span {
    font-weight: bold;
}

.view-quote__quote-info .my-lists-tooltip {
    font-size: 14px;
}

.view-quote__quote-info .my-lists-tooltip span,
    .rtl .view-quote__quote-info .my-lists-tooltip span {
    font-weight: inherit;
}

.view-quote__quote-controls {
    padding: 10px 0;
}
.view-quote__quote-controls .view-quote-left-buttons {
    display: inline-block; 
    margin: 0 2px;
}
.view-quote__quote-controls button:not(.dk-btn__secondary) {
    float: right;
}
    .rtl .view-quote__quote-controls button:not(.dk-btn__secondary) {
        float: left;
    }

.quote-detail__product-info {
    max-width: 300px;
}

.quote-detail__product-info span {
    display: block;
    padding: 3px 0;
}

.quote-detail__product-info span span {
    display: unset;
}

.quote-detail__product-info span span:nth-child(2) {
    display: inline-block;
}

.quote-detail__product-info .detail-note {
    padding-top: 10px;
}

.quote-detail__price {
    padding: 5px;
    min-height: 14px;
}

.view-quote-toolbar {
    position: relative;
    margin: 0 -20px !important;
}
.view-quote-toolbar .viewquote-toolbar-flex-container {
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin: 10px 0 !important;
    padding: 0;
}
.view-quote-toolbar.sticky .viewquote-toolbar-flex-container {
    width: calc(100% - 40px);
    margin: 0 auto !important;
}

.view-quote-toolbar.sticky {
    position: fixed;
    top: unset;
    bottom: 0;
    width: calc(100% + 40px);
    background-color: var(--bg-color--card);
    margin: 0 -20px;
}
.view-quote-toolbar.sticky .viewquote-toolbar-flex-container {
    display: inline-flex;
    align-items: center;
    width: calc(100% - 32px);
    margin: 0 var(--grid-gap) !important;
    box-shadow: none;
}

.view-quote-toolbar.sticky .empty-toolbar-div {
    min-width: 249px; 
    width: auto;
}
.view-quote-toolbar .empty-toolbar-div {width: 0; margin: 0; padding: 0; font-size: 0;}
.view-quote-toolbar .view-quote-button-container {
    width: 100%;
    display: inline-block;
    margin: 0 20px;
}

.view-quote-toolbar .view-quote-left-buttons {
    display: inline-block; 
    margin: 0 2px;
}
.view-quote-right-buttons {
    display: inline-block; 
    float: right;
}
    .rtl .view-quote-right-buttons {
        float: left;
    }


.sticky-scrollbar {
    position: sticky;
    bottom: 0;
    z-index: 6;
}

.no-list-quote-toolbar-div {
    /*width: 32px;*/
    width: 0;
}

.view-quote__detail-list {
    width: 100%; 
    margin: 0 var(--grid-gap) var(--grid-gap) !important; 
    padding: 0 !important;
    max-width:1000px;
}
.view-quote__detail-list table,
.view-quote__quote-list--container {
    border: none;
    --tw-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 var(--black), 0 0 var(--black), var(--tw-shadow);
    border-collapse: collapse;
}

.view-quote__quote-list--container {
    margin: 0 !important; 
    padding: 0 !important;
}

.view-quote__detail-list table th:nth-child(-n+2) {
    width: 1%;
}
.view-quote__detail-list table th:nth-child(3) {
    width: 30%;
}
.view-quote__detail-list table thead tr {
    border-top: none;
}

.quote-without-list {
    height: auto;
    padding: 0 !important;
}

/* CREATE ORDER */
.create-order-error-msg {
    color: var(--red);
}

.create-order-buttons {
    float: right;
}
    .rtl .create-order-buttons {
        float: left;
    }

/* CART OPTIONS MODAL */
.dk-dropdown__container {
    width: unset !important;
}
/* Create Quote MODAL */
.quote-note-container {
    margin-bottom: 20px;
    margin-top: 20px;
}

.icon-reload::before {
    content: "\f01e";
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-size: 15px;
}

.quote-exclamation-point {
    color: var(--red);
    padding-right: 5px;
    font-weight: bold !important;
}

.quote-ship-dropdown-flex{
    display:flex;
    align-items:center;
    gap:8px;
    flex-direction:row;
}

/* QUOTE RESULT MODAL */
.quote-result h2 {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.2em;
    padding-top: 10px;
}

.quote-result-number {
    font-size: 1.3em;
    padding: 5px 0;
    position: relative;
    display: inline-block;
    padding-right: 75px;
}
    .rtl .quote-result-number {
        padding: 5px 0;
        padding-left: 75px;
    }

.view-quote .quote-number-tooltip {
    padding-right: 20px;
}
    .rtl .view-quote .quote-number-tooltip {
        padding-right: 0;
        padding-left: 20px;
    }

.quote-number-tooltip + .my-lists-tooltip {
    margin-left: -20px;
    visibility: hidden;
    opacity: 0;
}
    .rtl .quote-number-tooltip + .my-lists-tooltip {
        margin-left: 0;
        margin-right: -20px;
    }

.quote-number-tooltip:hover + .my-lists-tooltip, .quote-number-tooltip + .my-lists-tooltip:hover {
    visibility: visible;
    opacity: 1;
}

.quote-result-copy {
    font-size: 1.3em;
}

.copy-tooltiptext {
    visibility: hidden;
    position: absolute;
    bottom: -15%;
    left: 125%;
    padding: 5px 10px;
    color: var(--reverse-text-color);
    background: var(--cloud-grey);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}
    .rtl .copy-tooltiptext {
        left: unset;
        right: 125%;
    }

.my-lists-tooltip .copy-tooltiptext::after {
    content: "";
    position: absolute;
    top: 30%;
    left: 0;
    margin-left: -9px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--border-color) transparent transparent;
}
    .rtl .my-lists-tooltip .copy-tooltiptext::after {
        left: unset;
        right: 0;
        margin-left: 0;
        margin-right: -9px;
    }

view-quote__quote-info div .quote-result-number {
    width: unset;
}

/* email */
.email-wrapper {
    display: block;
    margin: 10px 0 15px;
}

.email-wrapper .dk-input-group-with-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    width: 100%;
    margin: 10px 0;
}

.email-wrapper .dk-input-group-with-btn > div {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: calc(100% - 200px);
}

.email-wrapper .dk-input-group-with-btn > div label {
    display: block;
    margin: 0 0 5px;
    font-size: 12px;
}

.email-wrapper .dk-input-group-with-btn > div input {
    width: 100%;
}

.email-wrapper .dk-input-group-with-btn button {
    -webkit-box-flex: 1;
    width: auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    position: relative;
    top: 8px;
    margin: 5px 8px;
}

.email-wrapper .email-msg .email-error {
    margin: 11px 0 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--red);
}

.email-wrapper .email-msg .email-error::before {
    content: "\f071";
    font-family: "dk";
    font-size: 1rem;
    position: relative;
    top: 1px;
    padding: 0 5px 0 0;
}
    .rtl .email-wrapper .email-msg .email-error::before {
        padding: 0 0 0 5px;
    }
/* email */

/* VIEW OPTIONS MODAL */
.view-options-result-table {
    display: block;
    width: auto;
    height: auto;
    margin: 10px auto;
}

.view-options-table-overflow {
    display: block;
    width: auto;
    height: auto;
    max-height: 200px;
    margin: 10px auto;
    overflow: auto;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

.view-options-table-overflow table th,
.view-options-table-overflow table td {
    white-space: nowrap;
}

.view-options-table-overflow table th {border-bottom: 1px solid var(--border-color);}

.view-options-selections--wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    width: auto;
    height: auto;
    margin: 10px auto;
}

.view-options-selections--wrapper > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.view-options-selections--wrapper > div:first-child {
    text-align: left;
}
    .rtl .view-options-selections--wrapper > div:first-child {
        text-align: right;
    }

.view-options-selections--wrapper > div:last-child {
    text-align: right;
}
    .rtl .view-options-selections--wrapper > div:last-child {
        text-align: left;
    }

/* COMBINE DUPLICATES MODAL */
.combine-duplicates-select-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 15px 0 5px;
}

.combine-duplicates-select {
    width: 100%;
    margin: 5px;
}

/* PACK CORRECTIONS MODAL */
.pack-corrections-section-label {
    padding: 10px 0;
    font-weight: bold;
    margin-bottom: 10px;
}

.pack-corrections-selected {
    padding: 5px 0;
}

.pack-corrections-table {
    display: block;
    width: auto;
    height: auto;
    max-height: 200px;
    margin: -10px 0 10px auto;
    overflow: auto;
    box-sizing: border-box;
}
    .rtl .pack-corrections-table {
        margin: -10px auto 10px 0;
    }

.pack-corrections-table td, .pack-corrections-table table, 
.pack-corrections-table th {
    border: hidden;
}

.pack-corrections-table thead th {
    padding: 5px 10px;
}

/* DELETE LIST MODAL */
.delete-list-content {
    padding: 10px 0;
}

.delete-list-modal .modal {
    width: auto;
    padding: 25px;
}

/* SHARE LIST MODAL */
.share-list-modal > div:first-child {
    margin: 10px auto;
}

.share-list-modal h3 {
    text-transform: uppercase;
}

.share-list-modal input {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 32px);
    max-width: 355px;
}
.share-list-modal .my-lists-tooltip {
    display: inline-block;
    vertical-align: middle;
}
.share-list-modal .modalBody > div {
    margin: 0 0 10px;
}

.share-list-modal button:not(.dk-btn__primary) {
    margin: 0 10px;
}

/* MULTIPLE PARTS/CREF PER CREF/PART MODAL */
.mult-parts-per-cref-part-info {
    display: block;
}

.mult-parts-per-cref-display {
    display: inline-block;
    padding-left: 5px;
}
    .rtl .mult-parts-per-cref-display {
        padding-left: 0;
        padding-right: 5px;
    }

.mult-crefs-per-part-crefoptions {
/*    max-height: 110px;
    overflow-y: scroll;
    padding: 5px;*/
}

.btn-grey__borderless {
    color: var(--rain-grey);
    border: none;
    font-size: 12px;
    background: none;
    cursor: pointer;
}

.btn-grey__borderless:hover {
    text-decoration: underline;
}

/* VALUE CALCULATOR MODAL */
.value-calculator-modal table {
    /*border-collapse: collapse;*/
}

.value-calculator-modal .dk-table thead tr {
    border-top: none;
}

.value-calculator-modal .dk-table--striped:not(.dk-table--border-grid) tr, 
.dk-table--striped:not(.dk-table--border-grid) .dk-table__row {
    /*border: 1px solid var(--border-color);*/
}

.value-calculator-modal table.dk-table td {
    padding: 0.5em 1.2em;
}

.value-calculator-modal .existingPackOption span {
    padding: 5px 0;
    display: block;
}

.value-calculator-modal .view-options-table-overflow {
    max-height: unset;
}

.value-calculator-modal .quantity {
    display: flex;
    align-items: center;
}

.value-calculator-modal .quantity div {
    display: inline-block;
}

.value-calculator-modal .quantity label {
    display: block;
    padding: 5px 10px;
}

.value-calculator-modal p span {
    display: block;
}

.value-calculator-modal p span:first-child {
    font-weight: bold;
}

.savings {
    display: flex;
    justify-content: flex-end;
    margin: 5px 10px;
}

.savings strong {
    margin: 0 5px;
}

/* SPINNER */
@keyframes spinner-line-fade-more {
    0%, 100% {opacity: 0; /* minimum opacity */}
    1% {opacity: 1;}
}

@keyframes spinner-line-fade-quick {
    0%, 39%, 100% {opacity: 0.25; /* minimum opacity */}
    40% {opacity: 1;}
}

@keyframes spinner-line-fade-default {
    0%, 100% {opacity: 0.22; /* minimum opacity */}
    1% {opacity: 1;}
}

/* MODAL SPINNER */
.modalSpinner {
    position: relative;
    font-size: 50px;
    left: 40%;
    line-height: 0.5em;
    padding: 10px;
}
    .rtl .modalSpinner {
        left: unset;
        right: 40%;
    }

.scroll-container {
    width: 100%;
}

.viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.visible-list {
    background: var(--wispy-grey);
    width: 100%;
}

.item {
    height: 100px;
    line-height: 100px;
    border-bottom: 1px solid var(--white);
    box-sizing: border-box;
}

.table-toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
}

.table-toolbar .vertical-line {
    border: 0;
    border-right: 1px solid var(--border-color);
    margin: 0 20px;
}
    .rtl .table-toolbar .vertical-line {
        border: 0;
        border-left: 1px solid var(--border-color);
    }

.part-adding-tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    width: 120px;
    padding: 5px 0;
    background: var(--black);
    color: var(--white);
    text-align: center;
    border-radius: 6px;
}

#personalTable tr:not(:first-child):hover {
    background-color: orange;
    height: 40px;
    transform: scale(1.05);
}

/*Custom Checkbox*/
/* The container */
.container {
    display: table-cell;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .rtl .container {
        padding-left: 0;
        padding-right: 35px;
    }

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: var(--wispy-grey);
}
    .rtl .checkmark {
        left: unset;
        right: 0;
    }

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: var(--cloud-grey);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: var(--red);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
    .rtl .container .checkmark:after {
        left: 0;
        right: 5px;
    }

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: var(--border-color);
}
    .rtl .sticky {
        left: unset;
        right: 0;
    }

.bold {
    font-weight: bold;
}

.emptyDiv {
    background: var(--bg-color--card);
    z-index: 0;
}

.add-btn-link {
    border: none;
    font-size: 12px;
    background: none;
}

.add-btn-link:focus {
    border-style: dashed;
    border-color: var(--black);
    border-width: 1px;
}

/* STICKY HEADER AND SCROLLBAR */
/* These are all needed for the sticky scrollbar, and header on the view list page */
.scrollbar-content {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    overflow-x: auto;
    overflow-y: hidden;
}

.scrollbar-content::-webkit-scrollbar {
    display: none;
}

.scrollbar-proxy-wrapper {
    background-color: var(--bg-color--card);
    border-bottom: 1px solid var(--rain-grey);
    border-top: 1px solid var(--rain-grey);
    margin-top: -2px;
    bottom: 61px;
    overflow: auto;
    top: auto;
    z-index: 2;
}

.scrollbar-proxy {
    height: 1px;
    z-index: 2;
}

.compare-all-subs {
    padding-left: 20px;
    font-size: 16px
}

.myListHeader {
    width: 200px;
    height: 200px;
}

.immaredline {
    width: 36px;
    margin: 0;
    margin-top: -10px;
    border: none;
    height: 3px;
    background: var(--red);
}

/* End of sticky scrollbar and header */

.icon-trash {
    font-size: 17px; 
    cursor: pointer;
}
.icon-trash::before {
    font-weight: bold;
}

.trashcan {
    width: 20px;
    height: 20px;
    background-image: url(//www.digikey.com/-/media/images/icons/trash.png);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    font-size: 14px;
}

.trashcan:hover {
    cursor: pointer;
}

/* ListName Styles */
.list-name-label {
    font-size: 12px;
}

.list-name-input {
    min-width: 335px;
}

.list-name-error-message {
    display: block;
    color: var(--red) !important;
}

.listNameContainer {
    margin-left: 20px;
    padding-top: 20px;
}
    .rtl .listNameContainer {
        margin-left: 0;
        margin-right: 20px;
    }

/* Media Queries */
/* This one is explicitly for the toolbar styling */
@media screen and (max-width: 1250px) {
    .my-lists-table-toolbar--container {
        grid-template-columns: none;
    }
}
/* This one is explicitly for the toolbar styling */
@media screen and (max-width: 1250px) {
    .view-quote__quote-controls {
        grid-template-columns: none;
    }
}

/*@media screen and (max-width: 1200px) {
    .my-lists--top-toolbar .my-lists--top-toolbar--container > div {
        width: auto;
    }
}
*/
/* Large Devices - Desktops */
@media screen and (max-width: 1024px) {
    /* MESSAGE CONTAINER */
    .my-lists-message-container {
        display: block;
        width: auto;
    }
}

/* Medium Devices - tablets */
@media screen and (max-width: 991px) {
    .view-quote {
        display: block; 
        margin: 0 -20px; 
        overflow: visible;
    }
    .view-quote__quote-list {
        display: flex !important; 
        flex-flow: row nowrap; 
        overflow-x: auto; 
        width: 100%; 
        height: auto; 
        padding: 15px 20px;
    }
    .view-quote__quote-list--container {
        width: 100%; 
        margin: 0 auto !important; 
        padding: 0 !important;
    }
    
    .view-quote__quote-list-card {
        flex: 0 0 100px; 
        margin: 0 10px 0 0;
    }
        .rtl .view-quote__quote-list-card {
            margin: 0 0 0 10px;
        }

    view-quote-detail {
        display: block; 
        width: 100%; 
        padding: 0 20px !important;
    }

    .view-quote__detail-list {
        width: calc(100% - 40px); 
        margin: 0 20px 20px !important;
    }
    .view-quote__detail-list > pagination table {
        display: block; 
        width: 100%; 
        overflow-x: auto;
    }
    .view-quote__quote-controls {
        text-align: center;
    }

    .view-quote-button-container {
        right: 0; 
        left: 0; 
        width: 100%; 
        margin: 0 auto; 
        padding: 7px 20px; 
        text-align: center;
    }

    .view-quote-toolbar {
        width: calc(100% + 40px); 
        margin: 0 -20px; 
    }
    .view-quote-toolbar .viewquote-toolbar-flex-container {
        width: calc(100% - 40px);
        margin: 0 auto !important;
    }
    .viewquote-toolbar-flex-container .empty-toolbar-div {
        display: none;
    }

    .view-quote-toolbar .view-quote-button-container,
        .rtl .view-quote-toolbar .view-quote-button-container {
            margin: 0 -20px;
        }

    .view-quote-toolbar.sticky .view-quote-button-container,
    .rtl .view-quote-toolbar.sticky .view-quote-button-container {
        margin: 0 -12px;
    }

    .view-quote-button-container .view-quote-right-buttons {
        float: none;
    }
    .view-quote__quote-controls .view-quote-left-buttons,
    .view-quote-toolbar .view-quote-left-buttons {
        margin: 0;
    }
    
    .view-quote__quote-controls button:not(.dk-btn__secondary),
        .rtl .view-quote__quote-controls button:not(.dk-btn__secondary) {
            float: none;
        }

    .guests-footer--message .myLists-Text-Logo {
        margin: 0; 
        font-size: 42px !important;
    }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
    .tutorial-panel--lg .tutorial-part-poly {
        width: 80%;
        height: 70%;
    }
}

@media screen and (max-width: 900px) {
    .my-lists-table-toolbar--container {
        display: block;
    }
    .my-lists-table-toolbar--container > div:first-child {
        display: flex;
        justify-content: center;
        margin: 7px 0 0;
        padding: 0;
    }

    .customer-lists-component .section-content > div:first-child {
        display: block; 
        width: 100%;
    }
    .customer-lists-component .section-content > div:nth-child(2) {
        display: block;
    }
}

/* Small Devices */
@media screen and (max-width: 830px) {
    /* ADJUST ADD PARTS TOOLBAR (BOTTOM) */
    .addPartsBar {
        height: auto;
    }
    .my-lists-table-toolbar--container {
        display: initial;
    }
    .my-lists-table-toolbar--container > div {
        margin: 0;
    }
}

/* Small Devices - landscape phones */
@media screen and (max-width: 768px) {
    .make-a-list .upload-list {
        -webkit-box-flex: 1;
        width: 100%;
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    }

    .make-a-list .create-blank-list {
        -webkit-box-flex: 1;
        width: 100%;
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    }

    .make-a-list .or-msg-wrapper {
        -webkit-box-flex: 1;
        width: 100%;
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        height: 50px;
    }

    .make-a-list .or-msg-vert-line {
        top: 25px;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--cloud-grey);
    }

    .make-a-list .or-msg-copy-wrapper {
        position: relative;
        top: 7px;
        left: 0;
        right: 0;
        width: 50px;
        height: auto;
        margin: 0 auto;
    }
    
    .customer-lists-contact {
        width: auto;
    }

    .guests-header > div:last-child {
        display: block; 
        margin: 30px auto 0; 
        padding: 0; 
        text-align: center;
    }
    .guests-header--video {
        display: block; 
        margin: 20px auto 0;
    }
    .guests-header--welcome > h3 {
        font-size: 18px; 
        line-height: 1.3;
    }
    .guests-header--welcome .guest-page-buttons {
        max-width: 400px; 
        margin: 0 auto;
    }
    .guests-header--welcome .guest-page-buttons > div {
        display: block; 
        margin: 0 auto 7px;
    }
    .guests-header--welcome .guest-page-buttons #dropzoneForm {
        display: block; 
        width: 100%; 
        margin: 0 auto;
    }
    .guests-header--welcome .guest-page-buttons button#btn-new-list {
        display: block; 
        width: 100%; 
        margin: 0 auto;
    }
    .guests-header--welcome #btn-example-list {
        text-align: center;
    }

    .guests-features > h3 {
        display: block; 
        width: 100%; 
        margin: 0 auto; 
        text-align: center;
    }
    .guests-features > div {
        margin: 0 auto; 
        padding: 0; 
        max-width: 400px;
    }
    .guests-features > div > div {
        margin: 0 auto; 
        padding: 0;
    }
    .guests-features .guest-features--section {
        padding: 15px 15px 0;
    }
    .guests-features--image {
        display: block; 
        margin: 10px auto;
    }

    .guests-footer > div > div.section-content {
        margin: 0 auto;
    }
    .guests-footer > div > div.section-content > div:first-child {
        display: block; 
        width: 100%; 
        max-width: 595px; 
        margin: 0 auto; 
        padding: 0;
    }
    .guests-footer .guests-footer--tour {
        /*display: block; 
        width: auto; */
        margin: 20px auto 0 !important;
    }

    .customer-lists-contact > div > span {
        padding: 0;
    }
    .customer-lists-contact > div label {
        margin: 0;
    }
    .customer-lists-contact button {
        margin: 0; 
        padding: 0 2.3em 0 0;
    }
        .rtl .customer-lists-contact button {
            margin: 0; 
            padding: 0 0 0 2.3em;
        }

    #viewList {
        padding: 0;
    }
    #viewList h1 {
        font-size: x-large;
    }
    .edit-list-name {
        font-size: x-large;
    }
    .my-lists-infobar--list-name {
        display: block; 
        margin: 7px 0; 
        padding: 15px 0 0;
    }
    .listNameLabelContainer {
        display: block;
    }
    .my-lists--top-infobar {
        margin: 0 auto; 
        padding: 0;
    }
    .price-summary {
        font-size: x-large;
    }
    .price-summary--with-assemblies {
        font-size: x-large;
    }
}

@media screen and (max-width: 700px) {
    /* TOUR MODAL */
    tour-modal .tour--header {
        height: auto;
        padding: 30px 0;
    }

    tour-modal .tour--header img {
        width: 90%;
        height: auto;
        max-height: 190px;
    }

    tour-modal .tour-copy--container {
        padding: 0 18px;
    }

    tour-modal .tour-copy--container .tour-copy p.h3 {
        font-size: 18px;
    }

    tour-modal .tour-copy--container .tour-copy p.dk-text--lg,
    tour-modal .tour-copy--container .tour-copy p:not(.h3) {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    tour-modal .tour--footer {
        padding: 0 18px 18px;
    }

    tour-modal .tour--footer .float-buttons button {
        display: inline-block;
        vertical-align: middle;
        min-width: 70px;
        padding: 8px 20px;
    }
}

@media screen and (max-width: 600px) {
    /* LISTS and QUOTE MOBILE TABLE */
    table.my-lists-table thead {
        display: none;
    }
    table.my-lists-table tbody tr {
        display: block; 
        position: relative; 
        padding: 10px; 
        border-bottom: 1px solid var(--border-color);
    }
    table.my-lists-table tbody tr:first-child {
        border-top: 1px solid var(--border-color);
    }
    table.my-lists-table tbody tr td {
        display: block; 
        margin: 0; 
        padding: 0 0 5px; 
        border: 0;
    }
    table.my-lists-table tbody tr td .icon-trash {
        font-size: 17px; 
        cursor: pointer; 
        position: absolute; 
        top: 10px; 
        right: 10px;
    }
        .rtl table.my-lists-table tbody tr td .icon-trash {
            right: unset; 
            left: 10px;
        }
    table.my-lists-table tbody tr #tags {
        padding: 0;
    }
    table.my-lists-table tbody tr .tag {
        margin: 2px 2px 5px;
    }

    #upload-list-container {
        margin: 0 25px 10px 0;
    }
        .rtl #upload-list-container {
            margin: 0 0 10px 25px;
        }

    .my-lists-table-toolbar-divider {
        display: block; 
        margin: 0; 
        padding: 3px 0 0; 
        border: 0; 
        border-top: 1px solid var(--border-color);
    }
        .rtl .my-lists-table-toolbar-divider {
            display: block; 
            margin: 0; 
            padding: 3px 0 0; 
            border: 0; 
            border-top: 1px solid var(--border-color);
        }
    .my-lists-table-toolbar-btns {
        display: block; 
        margin: 10px 20px 0; 
        padding: 0 0 10px; 
        text-align: center;
    }
    .my-lists-table-toolbar-btns file-upload,
    .my-lists-table-toolbar > button {
        display: inline-block; 
        padding: 0 0 3px;
    }

    .view-quote__quote-controls,
    .view-quote-button-container {
        display: flex; 
        flex-flow: row wrap;
    }
    .view-quote__quote-controls button.dk-btn__secondary,
    .view-quote-button-container button.dk-btn__secondary {
        flex: 1 1 auto;
    }
    .view-quote__quote-controls button:not(.dk-btn__secondary),
    .view-quote-button-container button:not(.dk-btn__secondary) {
        float: none; 
        width: 100%;
    }
    
    .view-quote__quote-controls .view-quote-right-buttons {
        float: none; 
        display: block; 
        width: 100%; 
        margin: 3px auto; 
    }
    .view-quote-button-container .view-quote-right-buttons {
        float: none; 
        display: block; 
        width: 100%; 
        margin: 3px auto; 
    }

    .view-quote__quote-controls .view-quote-left-buttons,
    .view-quote-button-container .view-quote-left-buttons {
        display: flex; 
        flex-flow: row wrap; 
        width: 100%; 
        margin: 0 auto;
    }
    .view-quote__quote-controls .view-quote-left-buttons > button,
    .view-quote-button-container .view-quote-left-buttons > button {
        flex: 1 1 auto;
    }
    .view-quote__quote-controls .view-quote-left-buttons > button:last-child,
        .rtl .view-quote__quote-controls .view-quote-left-buttons > button:last-child {
            margin-right: 0; 
            margin-left: 0;
        }
    .view-quote-button-container .view-quote-left-buttons > button:last-child,
        .rtl .view-quote-button-container .view-quote-left-buttons > button:last-child {
            margin-right: 0; 
            margin-left: 0;
        }

    .view-quote__quote-controls .view-quote-left-buttons button:nth-child(2),
    .view-quote-button-container .view-quote-left-buttons button:nth-child(2) {
        margin: 5px 0 5px 8px;
    }
        .rtl .view-quote__quote-controls .view-quote-left-buttons button:nth-child(2),
        .rtl .view-quote-button-container .view-quote-left-buttons button:nth-child(2) {
            margin: 5px 8px 5px 0;
        }

    #viewList h1 {
        font-size: large;
    }
    .edit-list-name {
        font-size: large;
    }
    .price-summary {
        font-size: large;
    }
    .price-summary--with-assemblies {
        font-size: large;
    }

    .tutorial-panel--lg .tutorial-part-poly {
        top: 16px;
        left: 16px;
        width: 80%;
        height: 70%;
    }

    .rtl .tutorial-panel--lg .tutorial-part-poly {
        left: unset;
        right: 16px;
    }
}

/* Extra Small Devices - portrait phones */
@media screen and (max-width: 575px) {
    .customer-lists-contact > div,
    .customer-lists-contact > div:first-child,
    .customer-lists-contact > div:not(.loading-customer):not(.loading-currency),
    .customer-lists-contact > div:first-child:not(.loading-customer):not(.loading-currency) {
        -webkit-box-flex: 1;
        width: 100%;
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        margin: 0 5px 3px;
        padding: 7px 0 0;
    }
    .take-a-tour {
        right: 20px;
    }
        .rtl .take-a-tour {
            right: unset; 
            left: 20px;
        }
}

@media screen and (max-width: 550px) {
    .customer-list-search .dashboard-list-search {
        width: 100%; 
        margin: 0 0 10px;
    }
    .customer-list-search .dashboard-list-search input.dk-input {
        width: 100%;
    }

    .guests-footer--message .myLists-Text-Logo {
        margin: 0; 
        font-size: 32px !important;
    }
}

@media screen and (max-width: 500px) {
    .customer-list-search {
        float: none;
    }
    .customer-list-search input {
        width: 100%; 
        box-sizing: border-box;
    }
    .dashboard-list-filter {
        margin: 0;
    }

    .guests-footer--tour .guests-footer--message > div {
        font-size: 12px;
    }
    .guests-footer--message .myLists-Text-Logo { 
        font-size: 28px !important;
    }
}

@media screen and (max-width: 425px) {
    .customize-column-modal, 
    .customize-download-modal {
        width: auto;
    }

    .guests-footer--tour .guests-footer--message > div {
        display: block;
    }
    .guests-footer--message .myLists-Text-Logo {
        display: block; 
    }
}

/* For Smaller Devices */
@media screen and (max-width: 376px) {}

/* Print Styles */
@media print {}

/* Pulsating Loading.  This is making sure that we cover every supported browser*/
.ml-pulsate {
    -webkit-animation: pulsate 1.5s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: pulsate 1.5s ease-out;
    -moz-animation-iteration-count: infinite;
    -ms-animation: pulsate 1.5s ease-out;
    -ms-animation-iteration-count: infinite;
    -o-animation: pulsate 1.5s ease-out;
    -o-animation-iteration-count: infinite;
    animation: pulsate 1.5s ease-out;
    animation-iteration-count: infinite;
    opacity: 0.3;
    background-color: #d3d3d3;
}

.loading-image {
    height: 50px;
    width: 50px;
    margin-right: 10px;
}

.loading-part-description {
    height: 20px;
    width: 200px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.loading-part-mfg {
    height: 20px;
    width: 200px;
}

.loading-column {
    height: 100%;
    width: 100%;
}

.loading-list-name {
    width: 250px;
    height: 40px;
    margin: 25px 0;
}

.loading-visibility-tags-revisions {
    height: 20px;
    width: 450px;
}

.loading-assemblies {
    width: 150px;
    height: 40px;
}

.loading-filters-attrition-row {
    margin-top: 15px;
    display: flex;
}

.loading-attrition {
    width: 250px;
    margin-left: auto;
    margin-right: 3%;
    display: block;
    height: 30px;
}

.loading-filters-row {
    width: 1000px;
    height: 40px;
}

.loading-price-summary {
    width: 200px;
    height: 30px;
}

.loading-table-row {
    width: 100%;
    height: 100px;
}

.loading-table-header {
    width: 100%;
    height: 30px;
    margin-top: 25px;
}

.loading-preferences-file {
    width: 100%;
    margin-bottom: 25px;
    height: 45px;
}

.loading-preferences-name {
    width: 250px;
    height: 40px;
    margin: 20px 25px;
}

.loading-preferences-section {
    margin: 40px 25px 25px;
    height: 25px;
    width: 100px;
}

.loading-preferences-option {
    margin: 25px;
    height: 32px;
    width: 70%;
}

.loading-preferences-save-default {
    height: 25px;
    width: 25%;
    margin: 35px 25px 25px;
}

.loading-heading {
    height: 22px;
    margin: 6px 0 12px;
}
.loading-tutorial-panel {
    height: 142px;
    margin: 0 auto 25px;
}
.loading-blog-and-webinars-panel {
    height: 191px;
    margin: 10px 0 0;
}

.loading-logo {
    width: 200px;
    height: 60px;
    margin: 15px 0;
}

.loading-logged-in-button {
    height: 40px;
    margin: 15px 0;
}

.loading-logged-in-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.loading-logged-in-box {
    height: 25px;
    width: 13%;
    float: right;
    display: inline-block;
}

.loading-logged-in-search {
    height: 30px;
    width: 55%;
    float: right;
    display: inline-block;
}

.loading-logged-in-small-pagination {
    height: 15px;
    width: 20%;
}

.loading-logged-in-pagination {
    height: 20px;
    width: 25%;
    margin-top: 20px;
}

.loading-logged-in-table-row {
    width: 100%;
    height: 60px;
}

.loading-quote-card {
    height: 60px;
    margin: 15px 0;
}

.loading-quote-info {
    height: 30px;
    width: 55%;
    display: block;
}

.loading-quote-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 0;
}

.loading-quote-buttons {
    height: 30px;
    width: 35%;
    display: inline-block;
}

.loading-quote-add-to-cart {
    height: 30px;
    width: 15%;
    float: right;
    display: inline-block;
}

.loading-quote-table-row {
    width: 100%;
    height: 100px;
}

@-webkit-keyframes pulsate {
    0% {opacity: 0.3;}
    50% {opacity: 1.0;}
    100% {opacity: 0.3;}
}

@-moz-keyframes pulsate {
    0% {opacity: 0.3;}
    50% {opacity: 1.0;}
    100% {opacity: 0.3;}
}

@-ms-keyframes pulsate {
    0% {opacity: 0.3;}
    50% {opacity: 1.0;}
    100% {opacity: 0.3;}
}

@-o-keyframes pulsate {
    0% {opacity: 0.3;}
    50% {opacity: 1.0;}
    100% {opacity: 0.3;}
}

@keyframes pulsate {
    0% {opacity: 0.3;}
    50% {opacity: 1.0;}
    100% {opacity: 0.3;}
}


.bulk-add-button {
   margin-top:16px;
}

.padding-left {
    padding-left: 5px;
}

/*mobile experiment*/
.my-lists-top-toolbar-buttons {
    display:flex;
}
.my-alternates-table td,
table.partsList tbody tr .my-alternates-table td:first-child {
    padding: 8px 16px !important;
    position: initial !important;
    left: auto !important;
    right: auto !important;
    border: none !important;
    box-shadow: none !important;
}

.my-alternates-table .dk-btn--sm {
    margin: 0px !important;
}

.guest-upload-button {
    display: inline-block;
    padding-right: 10px;
}

.grey-row .my-alternates-table td,
.grey-row .my-alternates-table th {
    color:var(--text-color) !important;
}

    .grey-row .my-alternates-table td a,
    .grey-row .my-alternates-table td .dk-link {
        color: var(--link-blue) !important;
    }

@media screen and (max-width:600px) {
    .take-a-tour {
        position: initial;
    }

    .list-name-input {
        min-width: calc(100% - 40px);
    }

    table.partsList {
        width:100%;
    }

        #tableHeader,
        .tableHeader,
        table.partsList thead,
        tbody[id*='detailRow_'] td.tableCell:not(:first-child),
        .emptyDiv,
        #scrollbar-proxy,
        #duplicateScrollbar {
            display: none;
        }

    tbody[id*='detailRow_'] td.tableCell:first-child,
    .tableCell.manualEntryWrapper {
        width: calc(100% - 32px) !important;
        border: none;
        box-shadow: none !important;
    }

    .expanded-table-row {
        display: block;
        width: 100% !important;
    }

        .expanded-table-row tr {
            display: block;
            width: 100% !important;
        }

        .expanded-table-row td.tableCell {
            display: block !important;
            width: calc(100% - 32px) !important;
            height: auto !important;
            min-height: 0px !important;
        }

            .expanded-table-row td.tableCell:before {
                content: attr(data-cellheader);
                display: block;
                font-weight: bold;
                padding-bottom: 8px;
            }

            .expanded-table-row tr td:first-child:before {
                content: ""; 
                display: none;
            }


            .expanded-table-row td.tableCell {
            border-bottom: solid 1px #eee;
            }

            .dkdk .expanded-table-row td.tableCell {
            border-bottom: solid 1px #333;
            }


    .row-addQuantity-link {
        margin:0px;
    }

        .row-addQuantity-link button {
            padding:0px;
        }

        .unitPrice .align-qty,
        .extPrice .align-qty,
        .packType .align-qty {
            min-height: 100%;
            margin: 0 !important;
            display: block;
            text-align: left;
            height: auto;
        }

    .unitPrice .align-qty,
    .extPrice .align-qty {
        padding: 0 0 4px 0;
    }

    .packType-dropdown-button {
        padding:0px;
    }

        .packType-dropdown-button:hover {
            border: 1px solid transparent;
        }

    .packtype-selectOptionsList {
        margin:0px;
    }


    .packType-dropdown-button .packType-dropdown--flex {
        display: inline-block;
        width: auto;
        padding: 0 0 4px 0;
        text-align: left;
    }

        .packType-dropdown-button .packType-dropdown--flex > div {
            display:block;
        }


        .attrition-input {
            width: 175px;
        }

    .my-list--main-prod-list {
        border-top: solid 1px var(--bg-color--card);
    }

    .my-list--main-prod-list div[style*='padding-bottom'] {
        padding-bottom: 0px !important;
    }

    .bulk-add-button {
        width: 100%;
    }

    .alternate-parts-edit,
    alternate-parts-read {
        display:block !important;
    }

    .alternate-parts-edit td,
    .alternate-parts-read td {
        border: none !important;
        box-shadow: none !important;
    }

    .alt-parts:before {
        display:none;
    }

    .my-alternates-table {
        min-width: 250px;
        border:none;
    }

        .my-alternates-table thead {
            display: none;
        }

        .my-alternates-table tr {
            width: 100%;
            display: flex !important;
            flex-direction: column;
            margin-bottom: 16px;
            position: relative;
        }

            .my-alternates-table tr td {
                width: 100%;
                background-color: #eee !important;
                padding: 4px 16px !important;
                order: 3;
            }

            .dkdk .my-alternates-table tr td {
                background-color: #333 !important;
            }

                .my-alternates-table tr td:nth-child(2) {
                    padding-top: 16px !important;
                    order: 1;
                }

                .my-alternates-table tr td:nth-last-child(2) {
                    padding-bottom: 16px !important;
                }

                .my-alternates-table tr td:nth-last-child(6) {
                    order: 2
                }

                .my-alternates-table tr td.delete-alternate {
                    position: absolute !important;
                    right: 16px !important;
                    top: calc(50% - 18px);
                    width: 0px !important;
                }

                    .rtl .my-alternates-table tr td.delete-alternate {
                        left: 16px !important;
                        right: auto !important;
                    }

                .my-alternates-table tr td.alt-checkbox {
                    display: none !important;
                }

                .my-alternates-table tr td:before {
                    content: none;
                }

                .my-alternates-table tr td[data-cellheader]:before {
                    content: attr(data-cellheader);
                    display: inline;
                    padding-right: 8px;
                    padding-bottom: 0px;
                }

    .listPreferences #continue {
        width: 100%;
    }

    .my-lists-filter--container {
        display: flex;
        flex-direction: column;
    }

        .my-lists-filter--container filter,
        .filterBody {
            height: auto;
        }
}

.replace-primary,
.delete-alternate {
    padding: 0px !important;
}


video-tutorial-modal .modalHead {
    margin-bottom: 16px;
}

.video-tutorial--container {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

    .video-tutorial--container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }



table.partsList thead tr th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--border-color--card);
    color: var(--text-color);
    padding: 4px 8px;
    border-right: solid 2px var(--border-color--card);
    /* Ensure this stays above the emulated border right in tbody th {}: */
    z-index: 1;
    text-transform:uppercase;
}

    table.partsList thead tr th:first-child {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 2;
        background: var(--border-color--card);
        color: var(--text-color);
        /* Ensure this stays above the emulated border right in tbody th {}: */
        z-index: 2;
        border-right: solid 1px var(--border-color--card);
        box-shadow: 1px 0 0 0 var(--border-color--card);
        text-align:left;
        padding:4px 16px;
    }

        table.partsList thead tr th:first-child .dk-checkbox-label {
            padding: 0 10px;
        }


        table.partsList tbody tr td:first-child {
            position: sticky;
            background-color: inherit;
            left: 0;
            z-index: 2;
            border-right: 1px solid var(--border-color--card);
            /* Browsers tend to drop borders on sticky elements, so we emulate the border-right using a box-shadow to ensure it stays: */
            box-shadow: 1px 0 0 0 var(--border-color--card);
        }



#tableWrapper {
    margin-left: -20px;
    width: calc(100% + 40px);
}

.rtl #tableWrapper {
    margin-left:auto;
    margin-right:-20px;
}

.my-lists-tools--container {
    margin-left: -20px;
    width: calc(100% + 40px);
    margin-top: -18px;
    z-index: 100;
    height: 78px;
}

.rtl .my-lists-tools--container {
    margin-left:auto;
    margin-right:-20px;
}

@media screen and (max-width:600px) {
    .my-lists-tools--container {
        height:auto;
        margin-top:0px;
        position:unset;
    }
}

.my-lists-tools--fixed.anchored {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index:99;
}

.tableCell .quantity {
    white-space: nowrap;
    flex-wrap:nowrap;
}

.tableCell .availability_status {
    white-space:nowrap;
}

.tableCell .availability_status_messages div {
    margin-bottom:4px;
    white-space:nowrap;
}

.tableCell .tariff-status {
    min-width: 100px;
}

/*dashboard*/
.dashboard {
}

.dashboard_hero {
    display: flex;
    column-gap:16px;
    margin-bottom:24px;
}

.dashboard_hero > div:first-child {
    flex-grow: 1;
}

.dashboard_hero > div:last-child {
}

.dashboard_hero h1 {
    color: var(--red);
    font-size:28px;
}

.dashboard_hero p {
    line-height:18px;
}

.dashboard_tour {
    background-color: var(--light-blurple);
    text-align: center;
    padding: 16px;
    margin: 8px 0px;
}


.dashboard_tour a {
    color: var(--text-color);
}

.dashboard_tour span.dk-btn__primary {
    width:32px;
    font-size:18px;
    min-width:unset;
    padding: 8px 4px 4px 4px;
    margin:0px 8px;
    vertical-align:middle;
}

.dashboard_faster {
    text-align:center;
    margin: 8px 0px 16px 0px;
}

    .dashboard_faster h2 {
        font-size:18px;
        padding-bottom:0px;
    }

    .dashboard_pill {
        border: solid 1px var(--text-color);
        border-radius: 24em;
        display: inline-block;
        padding: 2px;
        background-color: #f5f5f5;
        position: relative;
        overflow: hidden;
    }

    .dkdk .dashboard_pill {
        background-color:#333;
    }

    .dashboard_pill::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(50% - 2px);
        height: calc(100% - 4px);
        background-color: #000;
        border-radius: 24em;
        transition: transform 0.3s ease;
        z-index: 0;
    }

    .dkdk .dashboard_pill::before {
        background-color: #fff;
    }

    .dashboard_pill button:last-child.active ~ ::before,
    .dashboard_pill button:nth-child(2).active {
        /* This selector won't work, we need a different approach */
    }

    /* Move the indicator to the right when the second button is active */
    .dashboard_pill:has(button:nth-child(2).active)::before {
        transform: translateX(100%);
    }

    /* RTL: anchor pill indicator to the right and slide left */
    .rtl .dashboard_pill::before {
        left: auto;
        right: 2px;
    }

    .rtl .dashboard_pill:has(button:nth-child(2).active)::before {
        transform: translateX(-100%);
    }

        .dashboard_pill button {
            border: none;
            border-radius: 24em;
            padding:8px 24px;
            background-color:transparent;
            color: var(--text-color);
            cursor:pointer;
            position: relative;
            z-index: 1;
            transition: color 0.3s ease;
        }

            .dashboard_pill button.active {
                color: white;
                cursor:default;
            }

.dkdk .dashboard_pill button.active {
    color: black;
}

.dashboard_pill-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.your-list-headline {
    display:flex;
    padding: 16px 0px 24px;
}

    .your-list-headline h2 {
        flex-grow:1;
        padding:0px;
    }

    .your-list-headline a {
    }

    .dashboard .dk-card__80 {
        max-width: 900px;
        margin: 0 auto;
    }

.dashboard table.dk-table {
    border-collapse:collapse;
}
    .dashboard table.dk-table thead tr {
        border-top:none;
    }

    .dashboard table.dk-table thead th {
        text-transform: none;
        background-color: #f5f5f5;
    }

.dkdk .dashboard table.dk-table thead th {
    background-color: #333;
    color:white;
}

.features-table {
    table-layout: fixed;
}

.features-table th:first-child,
.features-table td:first-child {
    width: 60%;
}

.features-table th:not(:first-child),
.features-table td:not(:first-child) {
    width: 20%;
    text-align: center;
}

.features-table th:not(:first-child) {
    text-align: center;
}

.dashboard_gotthis {
    display: flex;
    flex-grow: 1;
    width: calc(100% - 32px);
    margin: 16px 0px;
    background-color: var(--light-blurple);
}

    .dashboard_gotthis .gotthis_text {
        min-width: 50%;
        display: flex;
        padding: 16px;
    }


.generate-quote {
    display: flex;
    flex-grow: 1;
    width: calc(100% - 32px);
    margin: 16px 0px;
}

.generate-quote .generate-quote_form {
    min-width: 50%;
    padding: 16px;
    box-sizing: initial !important;
}

    .generate-quote .generate-quote_form h3 {
        font-size:14px;
    }
        .generate-quote .generate-quote_form label {
            display:block;
            font-weight:bold;
        }
    .generate-quote .generate-quote_form #quoteQuickAdd {
        display: block;
        border: dashed 2px var(--text-color);
        border-radius: 6px;
        width: calc(100% - 32px);
        min-height: 50px;
        padding: 16px;
        margin: 16px 0px 8px;
    }
        .dashboard_gotthis .gotthis_text .gotthis_headline {
            flex-grow: 1;
        }

        .dashboard_gotthis .gotthis_text p {
            margin: 0px;
        }

    .dashboard_gotthis .gotthis_text .gotthis_buttons {
        white-space:nowrap;

    }

.dashboard_gotthis .gotthis_image {
    min-width: 50%;
    background-image: url(/mylists/you_got_this_banner.jpg);
    background-position: center;
    background-size: 100%;
}

    .generate-quote .generate-quote_image {
        min-width: 50%;
        background-image: url(/mylists/generate_quote_image.jpg);
        background-position: center;
    }

.dashboard_faq {
    background-image: url(/mylists/faq_background.jpg);
    background-position: top center;
    padding-top: 150px;
    background-repeat: no-repeat;
}

.dashboard_collapse {
    max-width: 900px;
    margin: 0 auto 32px;
    background-color: var(--body-background-color);
    padding:20px;
}

    .dashboard_collapse h2.faq-headline {
        text-align: center;
        padding: 32px 0 16px;
    }

    .dashboard_collapse .collapse_panel {
        border-bottom: solid 1px #ccc;
    }

.dashboard_collapse .collapse_panel span {
   padding:16px;
   display:block;
   font-weight:bold;
   cursor: pointer;
}

    .dashboard_collapse .collapse_panel span:after {
        content: "\f107";
        float: right;
        font-size:18px;
        transition: transform 0.3s ease;
    }


    .dashboard_collapse .collapse_panel.active span:after {
        content: "\f106";
        transform: rotate(180deg);
    }

.dashboard_collapse .collapse_panel div {
    max-height: 0;
    overflow: hidden;
    padding: 0px 16px;
    transition: max-height 0.3s ease, padding 0.3s ease;
}


.dashboard_collapse .collapse_panel.active div {
    max-height: 1000px;
    padding: 16px;
    transition: max-height 0.5s ease, padding 0.3s ease;
}

.dashboard_additional div {
}

.dashboard_additional div span {
    font-size:14px;
    font-weight:bold;
    display:block;
}

.dashboard_additional div span:after {
    display:block;
    content: '';
    height:1px;
    width:40px;
    background-color:var(--red);
    margin:8px 0px 12px 0px;
}

.dashboard_additional div a {
    display:block;
    cursor:pointer;
}

.dashboard_additional div a:after {
    content: "\e92f";
    padding:0px 8px;
    vertical-align:middle;
}

@media screen and (min-width:769px) and (max-width:1024px) {
    .dashboard_hero > div:first-child {
        flex-grow: 1;
        min-width: 400px;
    }

    .dashboard_hero > div:last-child img {
        width: 100%
    }
}

@media screen and (max-width: 768px) {

    .dashboard_hero {
        display: flex;
        column-gap: 16px;
        margin-bottom: 24px;
        flex-direction: column;
    }

        .dashboard_hero > div:first-child {
            flex-grow: 1;
        }

        .dashboard_hero > div:last-child {
            padding-top: 16px;
        }

            .dashboard_hero > div:last-child img {
                width: 100%
            }

    .generate-quote {
        flex-direction:column;
        width: 100%;
    }

    .generate-quote .generate-quote_image {
        height:300px;
    }

    .dashboard_gotthis {
        display: block;
        width: 100%;
    }

        .dashboard_gotthis .gotthis_text {
            display: flex;
            padding: 16px;
            flex-direction: column;
        }

            .dashboard_gotthis .gotthis_text .gotthis_buttons {
                padding-top: 16px;
            }
}