@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { font-family: Roboto, sans-serif; margin: 0; color: #292F4C; /*padding-left: 220px;*/ }
input, select, textarea { font-family: Roboto, sans-serif }
.dis-none { display: none; }
.dis-none-i { display: none !important; }
.btn[disabled] { opacity: .5; cursor: default; }
ib { display: inline-block; }

#left { width: 220px; background: #292f4c; color: white; display: none; flex-direction: column; position: fixed; height: 100%; top: 0; left: 0; z-index: 10; }
    #left > .logo-w { margin: 20px; }
        #left > .logo-w > .logo { height: 68px; border-radius: 10px; }
    #left > .menu { flex: 1; display: flex; flex-direction: column; }
        #left > .menu > .item { display: flex; align-items: center; margin: 5px 0; cursor: pointer; padding: 5px 20px; position: relative; color: inherit; text-decoration: none; }
            #left > .menu > .item > .material-symbols-outlined { width: 30px; }
            #left > .menu > .item:hover { background: #1e243d; }
#deals-tog { margin-top: auto !important; }
        #left > .menu > .settings { margin-top: 0; }


#menu-profile > #logout { position: absolute; background: #292F4C; left: 222px; color: white; padding: 10px; font-size: 15px; border-radius: 4px; margin-top: 4px; display: none; white-space: nowrap; }
    #menu-profile > #logout:after { content: ''; border: solid 5px transparent; border-right-color: #292f4c; position: absolute; left: -10px; top: 14px; }
    #menu-profile > #logout:before { content: ''; border: solid 8px transparent; border-right-color: white; position: absolute; left: -16px; top: 11px; }
#menu-profile:hover > #logout { display: block; }

.logout-topnav { margin-left: 30px; margin-top: 0px; cursor:pointer; }


#deals-links { margin-bottom: 10px; display: block; }
    #deals-links > a { color: white; text-decoration: none; padding: 8px 5px 8px 40px; display: block; }
        #deals-links > a:hover { background: #424a66; }

#reports-links { margin-bottom: 10px; display: block; }
    #reports-links > a { color: white; text-decoration: none; padding: 8px 5px 8px 40px; display: block; }
        #reports-links > a:hover { background: #424a66; }

#main { flex: 1; /* overflow: auto; */ /* height: 100vh; */ }

.toast { position: fixed; top: 10px; background: black; color: white; padding: 10px 20px; border-radius: 100px; left: 50%; width: 300px; text-align: center; margin-left: -150px; }
.ac-buster { position: absolute; left: -1000px }
#spinner-w { text-align: center; }

.chk-2 { background: #565656; border-radius: 50px; border: none; width: 40px; height: 20px; padding: 3px; appearance: none; -webkit-appearance: none; cursor: pointer; }
    .chk-2:before { content: ''; width: 14px; height: 14px; background: white; border-radius: 100%; display: block; transition: transform .3s, background-color .3s; }
    .chk-2:checked:before { background: #155dfc; transform: translateX(19px); }
.mobile-menu-close { display: none;}
.mobile-icon-close { cursor: pointer; margin: 10px 10px }


.dealers-menu-open-div { display: none; }
.left-mobile-menu-close { display: none;}
.vin-header { color: black; height: 74px; width: 100%; /*position: fixed;*/ top: 0; background: #f0f8ff; /* left: 220px; */ display: flex; justify-content: flex-end; border-radius: 15px; }
.fbo-settings-div { cursor: pointer; display: flex; margin-right: 0px; text-decoration: none; color: white; }
.fbo-settings-icon { width: 34px; height: 34px; border-radius: 10px; background: #25293A; color: white; display: flex; justify-content: center; align-items: center; }
.fbo-span-text { display: flex; justify-items: center; align-items: center; }
.setting-profile-div { display: flex;  align-items: center; }
.fbo-red-circle { width: 54px; height: 54px; background: #C51412; border-radius: 100%; color: white; display: flex; justify-content: center; align-items: center; margin-right: 20px; margin-left: 20px; }
.fbo-header { color: var(--gray, #F1F1F1); font-family: Roboto; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.fbo-sub-header { color: var(--gray, #F1F1F1); font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.fbo-text { display: flex; flex-direction: column; }
.fbo-profile-div { cursor: pointer; display: flex; text-decoration: none; color: white; }
.settings-text { margin-top: 10px; }
.vin-logo-header { text-decoration: none; color: white; cursor: pointer; }
.desking-logo { text-decoration: none; color: var(--accent-btn-color); cursor: pointer; display: flex; margin-left: 25px; height: 100%; padding: 10px 0; }
    .desking-logo img { width: 150px; }
svg { margin-right: 10px; }

.zip-code-div { margin-right: 15px; display: flex; align-items: center; color: var(--text-color); }


#deals-links a { color: black; }
.drop-down-arrow { color: white; align-self: center; }
.settings-dropdown { z-index: 99999; display: none; top: 50px; right: 0; width: 200px; height: fit-content; color: black; padding: 15px; border: 1px #d6d6d6 solid; background: /*#f2f2f2*/ white; border-radius: 10px; position: absolute; }
#drop-settings { position: relative;}
.settings-menu { color: black; }
#reports-links a { color: black;}
.rotate-arrow { transform: rotate(180deg); }
.deals-header { border-bottom: 1px solid #e1e1e1; padding-bottom: 8px; }
.my-profile { margin-bottom: 15px; }
.add-margin-deals { margin-top: 20px; }
.settings-link { display: flex; text-decoration: none; color: black; margin-top: 0px; margin-bottom: 10px; align-items: center; }
.my-profile span { display: none; }
.add-margin-settings { margin-left: 7px; }
#deals-links > a:hover { background: #f2f2f2; }
#reports-links > a:hover { background: #f2f2f2; }

#msrpTrim { width: 100px; height: 49px; border-radius: 6px; border: none; margin-right: 10px; }
#trimButton { height: 49px; width: 49px; border-radius: 6px; background: #C51412; color: white; border: none; }


.dialog { width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; margin: auto; z-index: 999; }
    .dialog > .c { background: white; padding: 30px 25px; border-radius: 5px; width: 320px; height: fit-content; }
        .dialog > .c > .field { margin-bottom: 10px; }
            .dialog > .c > .field > .lbl { color: black; font-size: 14px; margin-bottom: 2px; }
            .dialog > .c > .field > input, .dialog > .c > .field > select { width: 100%; height: 49px; border: solid 1px #696d823b; border-radius: 5px; padding: 5px 6px; }
        .dialog > .c > .ok { background: #c51412; color: white; border: none; padding: 5px 20px; border-radius: 5px; width: 100%; height: 49px; margin-top: 20px; }
.dialog-field-class { display: flex; align-items: center; height: 30px; }

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.header-color { display: flex; border-bottom: 1px solid #D2D2D2; background: #f0f8ff; }
.make-flex {
    display: flex;
    justify-content: space-between;
}
.row-title-div { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; margin-bottom: 10px; gap: 3px; margin-right: 40px; }
.table-footer { height: 45px; background: #3455ff; color: white; font-weight: bold; }
.line-info { display: flex;}
.line-info-gap { display: flex; gap: 5px;}
.flex-for-lender { display: flex; gap: 15px; }

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#app-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 10000; }

/* Modal box */
#app-modal-box { background: #fff; border-radius: 8px; max-width: 700px; width: 90%; max-height: 90%; overflow-y: auto; padding: 20px; position: relative; box-shadow: 0 6px 20px rgba(0,0,0,0.3); font-family: sans-serif; }

/* Close button */
#app-modal-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 24px; cursor: pointer; color: #333; }

#app-modal-content { margin-top: 10px; }

.preview-for-cust{ display: none; }
.activity-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 14px; }

    .activity-table th, .activity-table td { padding: 8px 12px; border-bottom: 1px solid #ddd; text-align: left; }

    .activity-table th { background: #f4f4f4; font-weight: bold; }

    .activity-table tr:nth-child(even) { background: #fafafa; }

@media (max-width:767px) { /*#left { display: none; }*/ body { padding: 0px; margin: 0px; height: 100% }
}

@media (min-width:767px) {
    #mobile-header { display: none; }
}

@media (max-width:767px) {
    #mobile-header > .logo-w > .logo { height: 46px; border-radius: 10px; }
}
@media (max-width:425px) {
    .left-mobile-menu-close { display: flex; justify-content: end; }
    .left-mobile-icon-close { cursor: pointer; margin: 10px 10px }
    #deals-links > a { color: black; }
}