/* ----------- STARTING: /app/ui-components/popover-arrow/popover-arrow.css */
.triangle {
    width: 20px;
    height: 20px;
    /* border-top: 22px solid transparent;
    border-bottom: 22px solid var(--dark-border-color);
    border-right: 22px solid transparent; */
    border: 1px solid var(--dark-border-color);
    position: relative;
  }
  
  .triangle:after {
    content: '';
    width: 19px;
    height: 19px;
    /* border-top: 21px solid transparent;
    border-bottom: 21px solid var(--dark-background-light);
    border-right: 21px solid transparent; */
    border: 1px solid var(--dark-background-light);
    position: absolute;
    top: -21px;
    left: 1px;
  }
/* ----------- ENDING: /app/ui-components/popover-arrow/popover-arrow.css */


/* ----------- STARTING: /app/ui-components/page-dots/page-dots.css */
.page-dots-container{
    position: relative;
}

.page-dots-container .pages{
    display: flex;
    gap: 20px
}

.page-dots-container .dot{
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color:black;
    cursor: pointer;
}

.page-dots-container .slider{
    transition: left 100ms;
    height: 5px;
    width: 15px;
    position:absolute;
    left:0;
    background-image:linear-gradient(0deg, #4266f2, #5d92e9);
    border-radius: 5px;
}
/* ----------- ENDING: /app/ui-components/page-dots/page-dots.css */


/* ----------- STARTING: /app/ui-components/view-manager/view-manager.css */
.view-manager-container{
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom:0;
    
   /* border: 1px solid red;*/
}


.view-manager-wrapper{
    height: calc(100vh - 85px);    
    margin:1.5em;
    position: relative;
}


.view-manager-container .actions{
    position: absolute;
    right: 30px;
    top: 20px;
    z-index:3000;
}

.view-manager-container .content{
 /*   border: 1px solid blue;*/
    left:0;
    right:0;
    overflow-y: auto;   
    padding-right: 10px;
    padding-bottom: 20px;
}
/*
.view-manager-container .content.selected{
    left:0;
    right:0;
}
*/
.view-manager-container .actions .back{
    border-radius: 50%;
    border: 1px solid var(--dark-grid-border-color);
    height: 40px;
    width: 40px;
    position: relative;
}

.view-manager-container .actions .back img{
    height: 15px;
    left: 45%;
}

.view-manager-container .actions .back:hover{
    background-color: var(--dark-border-color);
    cursor: pointer;
}

/* ----------- ENDING: /app/ui-components/view-manager/view-manager.css */


/* ----------- STARTING: /app/ui-components/store-selector/store-selector.css */
.store-selector-container {
    width: 385px;
    max-width: 450px;
    height: 45px;
    vertical-align: middle;
    border-radius: 7px;
    background: var(--dark-background);
    color: var(--dark-color);
    border: 1.1px solid var(--dark-border-color);
    border-radius: 10px;
    position:relative;
}

    .store-selector-container > .store-selector-label {
        font-size: 16px;
        float: left;
        margin-left: 23px;
        
    }

.store-selector-carret {
    color: var(--dark-color);
    border-top: 8px dashed;
    border-right: 8px solid transparent !important;
    border-left: 8px solid transparent !important;
    position: absolute;
    right: 14px;
    top: 20px;
}

    #storeSelectorButton > .storeCount {
        float: left;
        margin-left: 10px;
        margin-top: 1px;
        font-size: 14px;
    }

    #storeSelectorButton > .loadingBars {
        margin-top: -8px;
        float: left;
    }

.store-selector-popover {
    background-color: var(--dark-background-light);
    min-width: 430px;
    max-width: 600px;
    /*max-height: 650px;*/
    border: 1px solid var( --dark-border-color);
    border-radius: 10px;
    z-index: 100;
}

    .store-selector-popover > .arrow {
        display: none !important;
    }

    .store-selector-popover .popover-content{
        padding-top: 27px;
    }

.popoverTreeHolder {
    max-height: 75vh;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: auto;
    padding-left: 18px;
    padding-right: 14px;
}

.storeSelector {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.store-selector-buttons {
    margin-top:1.5em;
    margin-bottom: 5px;
   
}

    .store-selector-buttons button {
        margin: 5px;
        z-index: 102;
        width: 168px;
    }

        .storeSelector-buttons button:hover {
            margin: 5px;
            transition: all 0.3s ease-in-out;
        }

/* ----------- ENDING: /app/ui-components/store-selector/store-selector.css */


/* ----------- STARTING: /app/ui-components/arrow-up-down/arrow-up-down.css */
.arrow-up-down-container{

}


/* ----------- ENDING: /app/ui-components/arrow-up-down/arrow-up-down.css */


/* ----------- STARTING: /app/ui-components/forms/forms-shared.css */
.boxed {
    font-family: "Montserrat";
    min-width: 100px;
    height: 43px;
    border: 1px solid var(--dark-boxed-border-color);
    display: -webkit-inline-box;
    border-radius: 10px;
    background-color: var(--dark-boxed-background);
    transition: var(--hover-transition);
    opacity: .7;;
}
    .boxed:hover {
        opacity: 1;
        background-color: var(--dark-boxed-background-hover);
    }

.boxed-content{
    padding-left:15px;
    padding-right: 15px;
}

.error .boxed {
    border: 1px solid var(--input-error)
}

.open > .dropdown-menu {
    display: block !important;
}

.teal-btn{
    background-color: rgba(0, 163, 255, .1);
    border-radius: 8px;
    color: var(--font-hint-color);
    height: 30px;
    position: relative;
    font-size: 12px;
}
.teal-btn:hover{
    cursor: pointer;
}

.form-alert{
    text-align: center;
    color: #ff6464;
}
/* ----------- ENDING: /app/ui-components/forms/forms-shared.css */


/* ----------- STARTING: /app/ui-components/forms/forms-shared.media.css */

@media  screen and (max-width: 1440px) {
   
}

  
/* ----------- ENDING: /app/ui-components/forms/forms-shared.media.css */


/* ----------- STARTING: /app/ui-components/app-tabs/app-tabs.css */
.app-tabs-container{

}

    .app-tabs-container .item {
        margin-right: 10px;        
        padding: 8px 40px;
        
    }
    .small .app-tabs-container .item {
        margin-right: 5px;        
        padding: 4px 20px;
        
    }

    .centered .app-tabs-container{
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }
        .app-tabs-container .item:hover {
            background-color: #224355;
            border-radius: 10px;
            color: var(--font-hint-color);
            cursor:pointer;
        }
        .app-tabs-container .item.selected {
            background-color: #224355;
            border-radius: 10px;
            color: var(--font-hint-color);
        }


/* ----------- ENDING: /app/ui-components/app-tabs/app-tabs.css */


/* ----------- STARTING: /app/ui-components/time-viewer/time-viewer.css */
.time-viewer-container{

}

/* ----------- ENDING: /app/ui-components/time-viewer/time-viewer.css */


/* ----------- STARTING: /app/ui-components/user-line/user-line.css */
.user-line-container{

}

/* ----------- ENDING: /app/ui-components/user-line/user-line.css */


/* ----------- STARTING: /app/ui-components/date/uib-datepicker-popup.css */
.uib-datepicker-popup.dropdown-menu {
    background-color: #1E2426;

    background: #1E2426;
    border: 1.26786px solid #505558;
    border-radius: 14px;

    margin-top: 8px;
    padding: 18px 32px;
    opacity: 1 !important;
    z-index: 1100;
}

.uib-datepicker-popup.dropdown-menu button {
    color: #5694F8;
    background-color: #21282B;
    background-image: none;
    border-radius: 8px;
    font-weight: 600;
    border-color: transparent;
    text-shadow: none;
    height: 34px;
    width: 87px;
    font-size: 13px;
    line-height: 21px;
    box-shadow: none;
    min-width: 0px;
    margin: 2px -6px;
}

.uib-datepicker-popup.dropdown-menu button:hover {
    background-color: var(--secondary-btn-background-hover);
}

.uib-datepicker-popup.dropdown-menu button.btn-info.active {
    color: var(--primary-btn-color);
    background: var(--primary-btn-background);
    border-color: transparent;
    font-weight: 500;
}

.uib-datepicker-popup.dropdown-menu button.btn-info .text-info {
    color: var(--primary-btn-color);
}

.uib-datepicker-popup.dropdown-menu th {
    padding: 4px 28px 16px;
}

.uib-datepicker-popup.dropdown-menu td {
    padding: 4px 14px;
}

.uib-datepicker-popup.dropdown-menu th button.uib-right,
.uib-datepicker-popup.dropdown-menu th button.uib-left {
    color: #56BEF8;
    font-size: 10px;
    background-color: #293235;
    border: 1px solid #404E53;
    height: 33px;
    width: 33px;
    border-radius: 16px;
}

.uib-datepicker-popup.dropdown-menu th button.uib-title {
    color: white;
    background-color: transparent;
}

.uib-datepicker-popup.dropdown-menu th button.uib-title.btn[disabled] {
    cursor: default;
    opacity: 1;
}

.uib-datepicker-popup.dropdown-menu th button.uib-title strong {
    font-weight: 400;
    font-size: 18px;
}
/* ----------- ENDING: /app/ui-components/date/uib-datepicker-popup.css */


/* ----------- STARTING: /app/ui-components/tiny-users-ribbon/tiny-users-ribbon.css */
.tiny-users-ribbon-container{

}

    .tiny-users-ribbon-container user-icon {
        margin-right: 5px;
        cursor:pointer;
    }

    .tiny-users-ribbon-container .arrow {
        display:none;
    }

    .tiny-users-ribbon-container .popover {
        background-color: var(--dark-background-light);
        border: 1px solid var(--dark-border-color)
    }
/* ----------- ENDING: /app/ui-components/tiny-users-ribbon/tiny-users-ribbon.css */


/* ----------- STARTING: /app/ui-components/dot/app-dot.css */
.app-dot {
    height: 12px;
    width: 12px;
    background-color: var(--font-hint-color);
    border-radius: 50%;
    border: 1.7px solid var(--dark-background);
    transform: scale(1);
    animation: pulse-blue 2s infinite;
}

.small > .app-dot{
    height: 5px;
    width: 5px;
}

/*
.blob {
    background: black;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    margin: 10px;
    height: 20px;
    width: 20px;
    transform: scale(1);
    animation: pulse-black 2s infinite;
}


    .blob.blue {
        background: rgba(0, 163, 255, 1);
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
        animation: pulse-blue 2s infinite;
    }

    */
/* ----------- ENDING: /app/ui-components/dot/app-dot.css */


/* ----------- STARTING: /app/ui-components/user-icon/user-icon.css */
.user-icon-container{


}

.user-icon-container .circle{
    border-radius: 50%;
    height: 39px;
    width: 39px;
    position: relative;
    background-color:#36577555
}

.user-icon-container .letter{
    color:var(--font-hint-color)
}

.app-small .user-icon-container .circle{
    height: 29px;
    width: 29px;
}

.with-border .circle {
    border: 2px solid rgba(0,0,0,0.5);
}

.app-tiny .user-icon-container .circle {
    height: 20px;
    width: 20px;
}
.app-tiny .user-icon-container .letter {
    font-size:12px;
}

.app-small .user-icon-container .letter {
    font-size: 11px;
}
    .app-small .user-icon-container .circle {
        height: 24px;
        width: 24px;
    }


.app-med .user-icon-container .letter {
    font-size: 11px;
}

.app-med .user-icon-container .circle {
    height: 26px;
    width: 26px;
}
/* ----------- ENDING: /app/ui-components/user-icon/user-icon.css */


/* ----------- STARTING: /app/ui-components/app-timeline/app-timeline.css */
.app-timeline-container{

}

.timeline{
    position: relative;    
}

.timeline .badge{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);    
    border: 1px solid black;
    font-weight: 300;
    font-size: 10px;
    background-color: #0099ff;
}

.timeline .event{
    position: relative;
    height: 30px;
   /* border:1px dotted red;*/
}

.timeline .event .label{
    position:absolute;
    top:50%;
    font-weight: 400;
    border-bottom: 1px solid #80808052;
    border-top: 1px solid #80808052;
}

.timeline .event.right .label{
    left:50%;
    transform: translate(15px,-50%);
}

.timeline .event.left .label{
    right:50%;
    transform: translate(-15px,-50%);
}
.timeline .event .label .sublabel{
    margin-top: 5px;
}

.timeline .line{
    height: 100%;
    width:2px;
    background-color: white;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    opacity: .4;
}

.timeline .group{
    position: relative;
}
.timeline .group .month{
    position: relative;
    height: 30px;           
}

.timeline .group .month .mlabel{
    position: absolute;
    top:50%;
    right:50%;
    transform: translate(-45%,-50%);
}

.timeline .stamp{
    height: 22px;
    width: 22px;
    border: 2px solid #1a1f21;
    border-radius: 50%;
    position:relative;
    font-weight: 300;
    font-size: 10px;
    background-color: #0099ff;    
}

.timeline .stamp .stamp-label{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -48%);
}

.timeline .spacer{
    position: relative;
    height: 20px;
}

.timeline .spacer .line{
    background-image: linear-gradient(white, transparent);
    background-color: initial;
}
/* ----------- ENDING: /app/ui-components/app-timeline/app-timeline.css */


/* ----------- STARTING: /app/ui-components/app-timeline/app-timeline.slick.css */


app-timeline.slick{
    
}
/* ----------- ENDING: /app/ui-components/app-timeline/app-timeline.slick.css */


/* ----------- STARTING: /app/ui-components/tags/tags.css */
.tags-container {     
    display: inline-block;
    padding: 3px 5px;
   
    border-radius: 3px;
   
}

/* ----------- ENDING: /app/ui-components/tags/tags.css */


/* ----------- STARTING: /app/ui-components/forecast-info-icon/forecast-info-icon.css */
.forecast-info-icon-container{
    
    
    padding: 5px;
    border-radius: 5px;
}

.forecast-info-icon-container:hover{
    background-color: #0972c238  /*var(--dark-grid-cell-hover) radial-gradient(circle, transparent 1%, #e8f2fb05 1%) center / 15000%;*/
}

.forecast-info-icon-container .icon{
    height: 18px;
    width: 18px;    
    background-image: url("/assets/images/smart-forecast.png");
    background-size: cover;       /* scale image to fill the div */
    background-position: center;  /* center the image */
}


.forecast-popover{
    padding: .2em .5em;
    background: linear-gradient(90deg, #1084D7, #0059a6); /* blue gradient */
    color: white;
    font-family: 'Montserrat';
    font-size: 12px;
    font-weight: 300;    
}

.forecast-popover:not(.with-arrow) .arrow {
        display: none;
        
    }

.forecast-popover .heading{
    font-weight: 400;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.forecast-popover .content{
   
    margin-top: .4em;
}

.forecast-popover .icon{
    height: 13px;
    width: 13px;    
    background-image: url("/assets/images/smart-forecast-white.png");
    background-size: cover;       /* scale image to fill the div */
    background-position: center;  /* center the image */
}

/* ----------- ENDING: /app/ui-components/forecast-info-icon/forecast-info-icon.css */


/* ----------- STARTING: /app/ui-components/type-trigger/type-trigger.css */
.type-trigger-container{

}

/* ----------- ENDING: /app/ui-components/type-trigger/type-trigger.css */


/* ----------- STARTING: /app/ui-components/badge/app-badge.css */

.app-badge {
    
    background-color: #5185e5;
    
  }
  
  .app-badge-content {
    
  }
/* ----------- ENDING: /app/ui-components/badge/app-badge.css */


/* ----------- STARTING: /app/ui-components/margin-blocks/margin-blocks.css */
.margin-block{
    display: inline-block;
    border-left: 2px solid #506E7866;
    width: 10px;
    margin-left: 17px;
    height: 32px;
    vertical-align: middle;
}
/* ----------- ENDING: /app/ui-components/margin-blocks/margin-blocks.css */


/* ----------- STARTING: /app/ui-components/plus-n/plus-n.css */
.plus-n-container{
    color: var(--font-hint-color);
    padding: 1px 3px;
}

.plus-n-container:hover{
    background-color: #20282b;
    border-radius: 5px;    
    cursor: default;
}

/* ----------- ENDING: /app/ui-components/plus-n/plus-n.css */


/* ----------- STARTING: /app/ui-components/top-nav-action/top-nav-action.css */
.top-action-container {
    /*
    margin-left:27px;  
    vertical-align:middle;
    display: -webkit-inline-box;
    position: relative;
    height: 22px;
    width: 22px;
    vertical-align: baseline;
    */
    padding: 7px;
    
    border-radius: 50%;
    margin-left: 22px;
    /* vertical-align: middle; */
    display: inline-block;
    position: relative;
    height: 36px;
    width: 36px;
    vertical-align: baseline;
}
.top-action-container > img{
    object-fit: contain;
    height: 100%;
    width: 100%;
}

    .top-action-container:hover {
            
        background: var(--dark-background-hover) radial-gradient(circle, transparent 1%, var(--dark-background-hover) 1%) center / 15000%;      
        cursor: pointer;        
    }

.top-nav-popover {
    font-family: "Montserrat";
    background: var(--dark-background-light);
    color: var(--dark-color);
    border: 1.1px solid var(--dark-border-color);
    border-radius: 10px;
    margin-top: 20px !important;
    transform: translateX(-45%);
    
}

    .top-nav-popover > .arrow{ 
       display: none;
    }

/* ----------- ENDING: /app/ui-components/top-nav-action/top-nav-action.css */


/* ----------- STARTING: /app/ui-components/alerts/stacked-alerts/stacked-alerts.css */
.stacked-alerts-container{        
    position: fixed;
    top: 100px;
    right: 30px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.stacked-alerts-container .alert-wrapper{
    position: relative;
}
.stacked-alerts-container .stacked-alert{
    overflow-x: hidden;
    border-radius: 10px;        
    position: relative;
    margin-bottom: 15px;
}

.stacked-alerts-container .stacked-alert .alert-content{
    padding: 12px 40px;
    display: flex;
    gap: 40px;
    font-size: 12px;
    max-width: 700px;
}

.stacked-alerts-container .stacked-alert.danger{
    background-image: linear-gradient(90deg,#fc2364,#ff4164);
}
.stacked-alerts-container .stacked-alert.warning{
    background-color: orange;
}
.stacked-alerts-container .stacked-alert.success{
    background-image: linear-gradient(90deg,#2adbe7,#3cce91);
}
.stacked-alerts-container .stacked-alert.info{
    background-color: lightseagreen;
}
.stacked-alerts-container .alert-wrapper.dismiss{
    animation:  alert-out 300ms cubic-bezier(.33,0,0,1) forwards;
}
.stacked-alerts-container .alert-wrapper.adding{
    animation:  alert-in 300ms cubic-bezier(.33,0,0,1) forwards;
    
}

.stacked-alerts-container .stacked-alert .action{
    opacity: .8;
    font-weight: 500;
    align-self: center;
    flex-shrink: 0;
}
.stacked-alerts-container .stacked-alert .action:hover{
    cursor: pointer;
    opacity: 1;
    overflow-x: hidden;
}

.stacked-alert .dismiss-bar{
    height: 2px;
    background-color: white;
    opacity: .6;
    width: 100%;
}

@keyframes  alert-in {
    0% {
        opacity: 0;
        transform: translateX(10%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
@keyframes alert-out{
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    30% {
        opacity: .7;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(30%);
    }
}

.stacked-alerts-container .stacked-alert .stacked-alert-label{
    text-align: justify;
}


.stacked-alerts-container .alert-wrapper .alert-dismiss{
    opacity: 0; 
    
    position: absolute;
    top: -12px;
    right: -10px;
    border: 2px solid #1a2427;
    border-radius: 50%;
    padding: 5px;
    height: 25px;
    width: 25px;
}
.stacked-alerts-container .alert-wrapper .alert-dismiss.persistent{
    opacity: 1;
    font-weight: 300;
    font-size: 11px;
}

.stacked-alerts-container .alert-wrapper.danger .alert-dismiss{
    background-image: linear-gradient(90deg,#fc2364,#ff4164);
}
.stacked-alerts-container .alert-wrapper.warning .alert-dismiss{
    background-color: orange;
}
.stacked-alerts-container .alert-wrapper.success .alert-dismiss{
    background-image: linear-gradient(90deg,#2adbe7,#3cce91);
    
}
.stacked-alerts-container .alert-wrapper.info .alert-dismiss{
    background-color: lightseagreen;
}

.stacked-alerts-container .alert-wrapper:hover .alert-dismiss{
    opacity: 1;
}

.stacked-alerts-container .alert-wrapper .alert-dismiss:hover{    
    cursor: pointer;
}

.stacked-alerts-container .alert-wrapper .alert-dismiss img{
    height: 8px;
    width: 8px;;
}

.stacked-alerts-container .dismiss-all.visible{
    opacity: .7;
}
.stacked-alerts-container .dismiss-all{
    opacity: 0;
    padding: .2em .7em;
    font-size: 11px;
    background-color: var(--secondary-btn-background);
    border-radius: 10px;
    font-weight: 250;;
    transform: opacity .5s ease-in;
}

.stacked-alerts-container .dismiss-all.visible:hover{
    background-color: var(--secondary-btn-background-hover);
    cursor: pointer;
    opacity: 1;
}
/* ----------- ENDING: /app/ui-components/alerts/stacked-alerts/stacked-alerts.css */


/* ----------- STARTING: /app/ui-components/legends/chart-top-legend/chart-top-legend.css */
.chart-top-legend-container{
    display: flex;
    gap: 20px;
    flex-direction: row;
    justify-content: center;
}

.chart-top-legend-container .legend-item{
    display: flex;
    flex-direction: row;
    gap :7px;
    align-items: baseline;;
}

.chart-top-legend-container .color{
    height: 7px;
    width: 7px;
    border-radius: 50%;
}

.chart-top-legend-container .title{
    font-size: 11px;
}


/* ----------- ENDING: /app/ui-components/legends/chart-top-legend/chart-top-legend.css */


/* ----------- STARTING: /app/ui-components/modals/deal/deal.css */
.deal-details-container{

}

.deal-details-container .top-row .modal-panel{
    height: 400px;
    overflow-x: auto;
    overflow-y: auto;
}

.deal-details-container .second-row {
    margin-top: 20px;    
}
.deal-details-container .second-row .modal-panel{
    padding-left: 2em;
    height: 350px;
    overflow-y: auto;
}
.deal-details-container .second-row .modal-panel .app-heading{
    margin-bottom: 1em;
}

.deal-details-container .middle-row {
    margin-top: 20px;    
}

.deal-details-container .products-row{
    margin-top: 20px;    
}
.deal-details-container .products-row .modal-panel{
    padding: 2em;    
}
.deal-details-container .products-row .modal-panel .app-heading{
    margin-bottom: 1em;
}


.deal-details-container .gl-row{
    margin-top: 2em;    
}
.deal-details-container .gl-row .modal-panel{
    padding: 2em;
}
.deal-details-container .gl-row .modal-panel .app-heading{
    margin-bottom: 1em;
}

.deal-details-container .app-timeline-container{
    margin-top: 2em
}

.deal-details-container .app-tabs-container .item{
    max-width: 180px;
    overflow-x: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.deal-details-container cell-deal-status{
    display: inline-block;
    vertical-align: text-bottom;
}

.deal-details-container .app-heading{
    font-size: 20px;
    font-weight: 400;
    
}

.deal-details-container .app-sub-heading{
    font-size: 14px;
    font-weight: 300;
}

.deal-details-container .app-sub-sub-heading{
    opacity: .7;    
}

.deal-details-container scrollable-tabs{
    margin-top:1em
}

.deal-details-container .heading .top{
    
    display: flex;
    gap:20px;
    align-items: center;
}

.deal-details-container .top-heading{
    height: 54px;
    margin-bottom: 20px;
}

.deal-details-container .tab-content{
    height: 60vh;
    overflow-y: auto;
}



.deal-details-container cell-deal-status{
    margin-left:10px;
}
/* ----------- ENDING: /app/ui-components/modals/deal/deal.css */


/* ----------- STARTING: /app/ui-components/modals/products/products.css */
.products-container{

}

/* ----------- ENDING: /app/ui-components/modals/products/products.css */


/* ----------- STARTING: /app/ui-components/modals/trend-side-by-side/trend-side-by-side.css */
.trend-side-by-side-container{

}

/* ----------- ENDING: /app/ui-components/modals/trend-side-by-side/trend-side-by-side.css */


/* ----------- STARTING: /app/ui-components/modals/vehicle-transactions-modal/vehicle-transactions-modal.css */
.vehicle-transactions-modal-container{

}

/* ----------- ENDING: /app/ui-components/modals/vehicle-transactions-modal/vehicle-transactions-modal.css */


/* ----------- STARTING: /app/ui-components/modals/financial-line-drilldown-modal/financial-line-drilldown-modal.css */
.financial-line-modal-container.modal-fullscreen .modal-body{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.financial-line-modal-container.modal-fullscreen h3.modal-title{
    margin-bottom: 1em;
}
/* ----------- ENDING: /app/ui-components/modals/financial-line-drilldown-modal/financial-line-drilldown-modal.css */


/* ----------- STARTING: /app/ui-components/modals/ro-transactions-modal/ro-transactions-modal.css */
.ro-transactions-modal-container{

}

/* ----------- ENDING: /app/ui-components/modals/ro-transactions-modal/ro-transactions-modal.css */


/* ----------- STARTING: /app/ui-components/modals/how-to-video/how-to-video.css */
.how-to-video-container{

}


.how-to-video-container .video-container{
    margin: -37px;
    height: 340px;
    border-bottom: 1px solid #d3d3d317;
}

.how-to-video-container .video-title{
    margin-top: 60px;
}
/* ----------- ENDING: /app/ui-components/modals/how-to-video/how-to-video.css */


/* ----------- STARTING: /app/ui-components/modals/schedule-report/schedule-report.css */
.schedule-report-container .modal-body{
    display: flex;
    flex-direction: column;
    gap: 40px;
}


.schedule-report-container .row1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.schedule-report-container .row1 .title{
    font-size: 20px;
}

.schedule-report-container .subtitle{
    font-size: 16px;
    margin-bottom: .5em;
}

.schedule-report-container .cron-wrap select{
    background-color: #1e2628;
    border-color: transparent;   
    color:white; 
}

.schedule-report-container .cron-wrap span{
    opacity: .7;
}
.schedule-report-container  select:focus-visible{
    outline: none;
    border: none;
}



/* ----------- ENDING: /app/ui-components/modals/schedule-report/schedule-report.css */


/* ----------- STARTING: /app/ui-components/modals/parts-invoice-details/parts-invoice-details.css */

/* ----------- ENDING: /app/ui-components/modals/parts-invoice-details/parts-invoice-details.css */


/* ----------- STARTING: /app/ui-components/modals/ro-details/ro-details.css */
.ro-details-container{

}

/* ----------- ENDING: /app/ui-components/modals/ro-details/ro-details.css */


/* ----------- STARTING: /app/ui-components/modals/inventory-details/inventory-details.css */
.inventory-details-container{

}


/* ----------- ENDING: /app/ui-components/modals/inventory-details/inventory-details.css */


/* ----------- STARTING: /app/ui-components/modals/feedback/feedback.css */
.feedback-container{

}


.feedback-container .modal-header{
    margin: -10px;
    padding: 0;
}

.feedback-container .modal-header .top-img{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;   
    object-fit: cover;
    width: 100%;
    height: 200px;
}

.feedback-container .modal-content{
    border: 15px;    
}

.feedback-container .options-container{
    
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.feedback-container .options-container .option{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 300;
}

.feedback-container .options-container .option-text{
    opacity: .6;
}
.feedback-container .feedback-input{
    width: 100%;
    background-color: transparent;
    border-radius: 10px;
    margin-top: 2em; 
    padding: 10px;   
}
/* ----------- ENDING: /app/ui-components/modals/feedback/feedback.css */


/* ----------- STARTING: /app/ui-components/modals/salesperson-profile/salesperson-profile-modal.css */
.salesperson-profile-modal-container{   
    overflow-y: auto;
}



.salesperson-profile-modal-container .top-container{
    margin-top: 0px;
}

.salesperson-profile-modal-container .metric-tabs-container{
    margin-bottom: 30px;
    margin-right:30px;
}

.salesperson-profile-chart-container .top-container{
    height: 110px;    
}

.salesperson-profile-modal-container .chart-and-users-container{
    margin-top:3em;
    padding:15px 20px;
    
}

.salesperson-profile-modal-container .info-container{
    margin-left:20px;
}

.salesperson-profile-modal-container .info-container .name-label{
    font-size: 20px;
    margin-bottom: 25px;
}

.salesperson-profile-modal-container .top-metrics-container .boxed-number-viewer-container{
    
    margin-right: 5px;
}

.salesperson-profile-modal-container .top-metrics-container .number-viewer-container{
    font-size: 16px;
}

.salesperson-profile-modal-container .salesperson-profile-chart-container{
   
}

.salesperson-profile-modal-container .salesperson-profile-others-container{
    height: 460px;
    overflow-y: auto;
    margin-top:1em;
}

.salesperson-profile-modal-container .filters-container{
    margin-top:2em
}

.salesperson-profile-modal-container .employee-select-container{
    margin-top: 3em;
    margin-bottom: 2em;
}
/* ----------- ENDING: /app/ui-components/modals/salesperson-profile/salesperson-profile-modal.css */


/* ----------- STARTING: /app/ui-components/store-selector/store-selector-tree/store-selector-tree.css */

.store-tree-selector:hover {
    cursor: pointer;
}


.store-tree-expander:hover {
    cursor: pointer;
}

.store-selector-tree-group {
    font-weight: 500;
    font-size: 17px;
}
    .store-selector-tree-group:hover{
        cursor: pointer;
    }

.tree-store-label {
    font-weight: 400;
    vertical-align: text-bottom;
}

    .tree-store-label:hover {
        cursor: pointer;
    }

.tree-brand-label {
    font-weight: 300;
    opacity: .5;
    vertical-align: text-bottom;
}

    .tree-brand-label:hover {
        cursor: pointer;
    }

.tree-id-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-color-light);
    margin-left: 0.5em;
}

    .tree-id-label:hover {
    }

.store-selector-item {
}

    .store-selector-item .checkbox-blank:hover {
        border: 1px solid #FFF;
    }


.stores-group {
    margin-left: .8em;
    padding-left: .4em;
    border-left: 2px solid var(--dark-tree-line);
    /*margin-top: 5px;
    margin-bottom: 5px;*/
}

.store-group.hidden {
    height: 0px;
    -webkit-transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    -ms-transition: height 0.5s linear;
    -o-transition: height 0.5s linear;
    transition: height 0.5s linear;
}

.store-group.open {
    height: 100%;
    -webkit-transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    -ms-transition: height 0.5s linear;
    -o-transition: height 0.5s linear;
    transition: height 0.5s linear;
}


.brand-item-container {
    padding: 4px 6px;
    transition: var(--hover-transition);
    border-radius: 4px;
    transition: background 0.8s;
    background-position: center;
    display: flex;
    align-items: center;
    gap:5px
}
    .brand-item-container:hover {
        background: var(--dark-background-light-hover);
    }
    .brand-item-container.ripple:hover {
        background: var(--dark-background-light-hover) radial-gradient(circle, transparent 1%, var(--dark-background-light-hover) 1%) center/15000%;
    }

    .brand-item-container.ripple:active {
        background-color: rgba(255,255,255,.2);
        background-size: 100%;
        transition: background 0s;
    }

.group-item-container {
    padding: 4px 6px;
    transition: var(--hover-transition);
    border-radius: 4px;
    transition: background 0.8s;
    background-position: center;
}

    .group-item-container:hover {
        background: var(--dark-background-light-hover);
    }
    .group-item-container.ripple:hover {
        background: var(--dark-background-light-hover) radial-gradient(circle, transparent 1%, var(--dark-background-light-hover) 1%) center/15000%;
    }

    .group-item-container.ripple:active {
        background-color: rgba(255,255,255,.2);
        background-size: 100%;
        transition: background 0s;
    }

.store-item-container {
    padding: 4px 6px;
    transition: var(--hover-transition);
    border-radius: 4px;
    transition: background 0.8s;
    background-position: center;
    display: flex;
    align-items: center;
    gap:5px
}
    .store-item-container:hover {
        background: var(--dark-background-light-hover);
    }
    .store-item-container.ripple:hover {
        background: var(--dark-background-light-hover) radial-gradient(circle, transparent 1%, var(--dark-background-light-hover) 1%) center/15000%;
    }

    .store-item-container.ripple:active {
        background-color: rgba(255,255,255,.2);
        background-size: 100%;
        transition: background 0s;
    }

.store-with-brands-caret {
    position: relative;  
    display: none;
    float: right;
    border-radius: 30px;
    height: 20px;
    width: 20px;  
    transition: background 0.8s;
    background-position: center;
}

    .store-with-brands-caret:hover {
        background: var(--dark-background-light-hover);
        cursor: pointer;
    }

    .store-with-brands-caret > img {
        height: 6px
    }

    .store-with-brands-caret.isExpanded {
        transform: rotate(180deg);
      
    }

    .store-with-brands-caret.ripple:hover {
        background: var(--dark-background-light-hover) radial-gradient(circle, transparent 1%, var(--dark-background-light-hover) 1%) center/15000%;
    }

    .store-with-brands-caret.ripple:active {
        background-color: rgba(255,255,255,.2);
        background-size: 100%;
        transition: background 0s;
    }

.store-with-brands-item-container {
    padding: 4px 6px;
    /*transition: var(--hover-transition);*/
    border-radius: 4px;
    transition: background 0.8s;
    display: flex;
    align-items: center;
    gap:5px
}
    .store-with-brands-item-container:hover {
        background: var(--dark-background-light-hover);
    }
        .store-with-brands-item-container:hover .store-with-brands-caret {
            position: relative;
            display: inline-block;
            float: right;
        }
    .store-with-brands-item-container.ripple:hover {
        background: var(--dark-background-light-hover) radial-gradient(circle, transparent 1%, var(--dark-background-light-hover) 1%) center/15000%;
    }
    .store-with-brands-item-container.ripple:active:not(:has(:active)) {
        background-color: rgba(255,255,255,.2);
        background-size: 100%;
        transition: background 0s;
    }
    .store-with-brands-item-container.ripple:active:has(.tree-store-label:active) {
        background-color: rgba(255,255,255,.2);
        background-size: 100%;
        transition: background 0s;
    }
    .store-with-brands-item-container.ripple:active:has(app-checkbox:active) {
        background-color: rgba(255,255,255,.2);
        background-size: 100%;
        transition: background 0s;
    }
/* ----------- ENDING: /app/ui-components/store-selector/store-selector-tree/store-selector-tree.css */


/* ----------- STARTING: /app/ui-components/cells/cell-tree/cell-tree.css */
.cell-tree-container{
    display: inline-flex;
    flex-direction: row;
}

.cell-tree-spacer{
    border-left: 2px solid var(--dark-tree-line);
    width: 10px;
    margin-left: 17px;
}

.cell-tree-value{
    height: 100%;
}
/* ----------- ENDING: /app/ui-components/cells/cell-tree/cell-tree.css */


/* ----------- STARTING: /app/ui-components/cells/cell-store-label/cell-store-label.css */
.cell-store-label-container {
    text-align: left;
    color: var(--dark-grid-color);
    display: inline-block;
}

.cell-store-label-container>.store-name {}


.cell-store-label-container>.store-id {
    color: var(--dark-color-light);
    font-weight: 600;
    margin-left: 0.5em;
}

.cell-store-label-close{
    float: right;
}
/* ----------- ENDING: /app/ui-components/cells/cell-store-label/cell-store-label.css */


/* ----------- STARTING: /app/ui-components/cells/cell-preview/cell-preview.css */
.cell-preview-container{

}


.popover-centered{
    left:25% !important;
    
}
/* ----------- ENDING: /app/ui-components/cells/cell-preview/cell-preview.css */


/* ----------- STARTING: /app/ui-components/cells/cell-actionable-col/cell-actionable-col.css */
.cell-actionable-col-container{
    cursor:pointer;
}
   
.cell-actionable-col-container .cell-col-wrapper{
    display: inline;
    padding: 5px 14px;
    border-radius: 6px;
}
/*
.cell-actionable-col-container .cell-col-wrapper:hover
{
    background-color: var(--dark-grid-cell-hover);
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}
*/
.cell-actionable-col-container .cell-col-wrapper {
    background-position: center;
    transition: background 0.8s;
  }
  .cell-actionable-col-container .cell-col-wrapper:hover {
    background: var(--dark-grid-cell-hover) radial-gradient(circle, transparent 1%, #e8f2fb05 1%) center/15000%;
  }
  .cell-actionable-col-container .cell-col-wrapper:active {
    background-color: #e8f2fb05;
    background-size: 100%;
    transition: background 0s;
  }

.cell-actionable-col-container .showing.cell-col-wrapper{
    background-color: var(--dark-grid-cell-hover);
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}

.cell-actionable-col-container cell-numeric{
    display: inline-block;
}

.cell-actionable-col-container:has(cell-numeric){
    text-align: right;
}

.cell-actionable-col-container cell-numeric-vs{
    display: inline-block;
}
.cell-actionable-col-container:has(cell-numeric-vs){
    text-align: right;
}

/*no actionable*/

.cell-col-container .cell-col-wrapper{
    display: inline;
    padding: 4px 20px;    
}


.cell-col-container cell-numeric{
    display: inline-block;
}

.cell-col-container:has(cell-numeric){
    text-align: right;
}

.cell-col-container cell-numeric-vs{
    display: inline-block;
}
.cell-col-container:has(cell-numeric-vs){
    text-align: right;
}
/* ----------- ENDING: /app/ui-components/cells/cell-actionable-col/cell-actionable-col.css */


/* ----------- STARTING: /app/ui-components/cells/cell-note/cell-note.css */
.cell-note-container{
    
}

.cell-note-container img{
    width: 15px;
    height: 15px;
    opacity: .5;
}

.cell-note-container img:hover{
    opacity: 1;
    cursor: pointer;
}
/* ----------- ENDING: /app/ui-components/cells/cell-note/cell-note.css */


/* ----------- STARTING: /app/ui-components/cells/cell-preview-col/cell-preview-col.css */
.cell-preview-col-container{

}

/* ----------- ENDING: /app/ui-components/cells/cell-preview-col/cell-preview-col.css */


/* ----------- STARTING: /app/ui-components/cells/cell-text/cell-text.css */
.cell-text-container{

}

/* ----------- ENDING: /app/ui-components/cells/cell-text/cell-text.css */


/* ----------- STARTING: /app/ui-components/cells/cell-numeric-vs/cell-numeric-vs.css */
.cell-numeric-vs-container{

}

/*
    .cell-numeric-vs-container.with-content number-viewer:hover {
        font-weight:500;
    }
*/
.cell-numeric-popover .top {
    font-size: 30px;
   
}

.cell-numeric-popover .bottom {
    font-weight: 300;
    padding-left: 15px;
    margin-top: 10px;
    padding-right: 15px;
    margin-bottom: 10px;
}

    .cell-numeric-popover .bottom .difference {
        border-top:1px solid;
        padding-top:10px;
        margin-bottom:20px;
    }

    .numneric-vs-tooltip{
        width: 250px;
    }
.numneric-vs-tooltip .tooltip-inner {
            max-width:100%;
        }
/* ----------- ENDING: /app/ui-components/cells/cell-numeric-vs/cell-numeric-vs.css */


/* ----------- STARTING: /app/ui-components/cells/cell-actionable/cell-actionable.css */
.cell-actionable-container{
    cursor:pointer;
}

.actionable-popover{
    padding: 2px 12px;
}

    .actionable-popover .action-wrapper:not(:first-child) {
        margin-left: 20px;
    }
    .actionable-popover .action-wrapper {
        height: 25px;
        width: 25px;
        position: relative;
    }

    
    .actionable-popover .action-wrapper:hover {
        background-color: #323F43;
        cursor: pointer;
        border-radius: 8px;
    }

.actionable-popover  .action img{
    max-width: 17px;
    max-height: 17px;
}

.actionable-popover-menu {
    width:250px;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .actionable-popover-menu .heading {
        padding-inline: 20px;
        padding-bottom:10px;
        opacity:.5
    }

    .actionable-popover-menu .item {
        padding: 10px 20px;
        cursor:pointer;
    }


/* ----------- ENDING: /app/ui-components/cells/cell-actionable/cell-actionable.css */


/* ----------- STARTING: /app/ui-components/cells/cell-large-text/cell-large-text.css */
.cell-large-text-container{
    
}

/* ----------- ENDING: /app/ui-components/cells/cell-large-text/cell-large-text.css */


/* ----------- STARTING: /app/ui-components/cells/cell-numeric-with-percentage/cell-numeric-with-percentage.css */
.cell-numeric-with-percentage-container{
    
    display: flex;
    justify-content: end;
    flex-direction: row;
    margin-right: 15px;
}


.cell-numeric-with-percentage-container .small-percentage-container{
    display: flex;
    flex-direction: column;   
    align-items: flex-start;
    font-size: 11px;
   
    line-height: 24px;
}

.cell-numeric-with-percentage-container .number-viewer-container{
   
}

.cell-numeric-with-percentage-container small-percentage{
    width: 60px;
}

.cell-numeric-with-percentage-container .small-percentage-container number-viewer{
    opacity: .8;
}
/* ----------- ENDING: /app/ui-components/cells/cell-numeric-with-percentage/cell-numeric-with-percentage.css */


/* ----------- STARTING: /app/ui-components/cells/cell-numeric-with-percentage-and-label/cell-numeric-with-percentage-and-label.css */
.cell-numeric-with-percentage-and-label-container{
    display: flex;
    justify-content: end;
    flex-direction: row;
    margin-right: 18px;       
    gap: 15px;
}

.cell-numeric-with-percentage-and-label-container .left{
    display: flex;
    gap: 5px;
    flex-direction: row;
    width: 90px;
    justify-content: end;
}

.cell-numeric-with-percentage-and-label-container .right{
    line-height: initial;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 90px;
    font-weight: 300;
}

.cell-numeric-with-percentage-and-label-container .right .negative{
    color:white !important;
}

.cell-numeric-with-percentage-and-label-container .right .top{
    display: flex;
    flex-direction: row;
    gap:5px;
    align-items: center;    
    opacity: .8;
}


.cell-numeric-with-percentage-and-label-container .negative{
    background: linear-gradient(90deg, #ff7f7f 5%, #ff1368 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;

}

.cell-numeric-with-percentage-and-label-container .caret.up{
   color: #0ff986;
}
.cell-numeric-with-percentage-and-label-container .caret.down{
    color: #fb5563;
 }
/* ----------- ENDING: /app/ui-components/cells/cell-numeric-with-percentage-and-label/cell-numeric-with-percentage-and-label.css */


/* ----------- STARTING: /app/ui-components/cells/cell-numeric/cell-numeric.css */
.cell-numeric-container{
    
}

    

/* ----------- ENDING: /app/ui-components/cells/cell-numeric/cell-numeric.css */


/* ----------- STARTING: /app/ui-components/cells/cell-numeric-vs-show-other/cell-numeric-vs-show-other.css */
.cell-numeric-vs-container.vs-show-other{
    display: inline;
}


.numeric-vs-show-other-tooltip.tooltip{
    opacity: 1;
}
/* ----------- ENDING: /app/ui-components/cells/cell-numeric-vs-show-other/cell-numeric-vs-show-other.css */


/* ----------- STARTING: /app/ui-components/forms/checkbox/checkbox.css */

.app-checkbox {
    display: inline-block;
    width: 22px;
    height: 22px;
    cursor: pointer;
    position: relative;
}

.checkbox-blank {
    /* Rectangle 205 */
    display:inline-block;
    box-sizing: border-box;    
    width: 15px;
    height: 15px;   
    border: 1px solid #FFFFFF;
    border-radius: 3px;
    vertical-align: middle;
}
    .checkbox-blank:hover {
        border: 2px solid #FFFFFF;
    }

.checkbox-check {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 1px;
}

    .checkbox-check.ng-hide {

    }

/* ----------- ENDING: /app/ui-components/forms/checkbox/checkbox.css */


/* ----------- STARTING: /app/ui-components/forms/icon-select-action/app-icon-select-action.css */
.app-icon-select-action{
    cursor: pointer;
}
.app-icon-select-action .dropdown-item{
    cursor: pointer;
}

.app-icon-select-popover{
    padding: 2px;
}
.app-icon-select-popover .popover-item{
    padding: 8px 16px;
}
.app-icon-select-popover .popover-item:hover{
    cursor: pointer;
    background: var(--dark-background-hover);
}
/* ----------- ENDING: /app/ui-components/forms/icon-select-action/app-icon-select-action.css */


/* ----------- STARTING: /app/ui-components/forms/select/app-select.css */
.app-select-container:hover{
   background-color: var(--dark-background-light);
   cursor: pointer;
}

.app-select-label{
    font-size: 11px;
    font-weight: 500;
    margin-top: 5px;
}

.app-select-selected-item{
    font-size: 14px;
    font-weight: 400;
    margin-top: -3px;
}
.app-select-selected-item > .caret{
    margin-left:1em;
    vertical-align: middle;
    font-size: 16px;
    border-top: 6px dashed;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

app-select.financials .boxed{
    width: 180px;
}

app-select.metric .boxed{
    /*width: 200px;*/
}

app-select .boxed-content{
    width: 100%;
}

app-select .dropdown-item.inner{
    margin-left: 25px;
    border-left: 1px solid var(--dark-side-nav-border);
}
/* ----------- ENDING: /app/ui-components/forms/select/app-select.css */


/* ----------- STARTING: /app/ui-components/forms/input/app-input.css */
input.stealt {
    border: none;
    width: 100%;
    background-color: var(--dark-boxed-background);
}

input.stealt.disable{
    cursor:not-allowed
}

    input.stealt:focus-visible {
        border: none;
        border-color: var(--dark-boxed-background-hover);
        outline-color: var(--dark-boxed-border-color);
        outline-width: 0;
    }

    input.stealt:hover {
        background-color: var(--dark-boxed-background-hover);
    }

.boxed-input:hover input.stealt {
    background-color: var(--dark-boxed-background-hover);
}

/* ----------- ENDING: /app/ui-components/forms/input/app-input.css */


/* ----------- STARTING: /app/ui-components/forms/switch/app-switch.css */
.app-switch {
    position: relative;
    display: -webkit-inline-box;
    width: 35px;
    height: 15px;
    cursor: pointer;
    background-color: #171D1F;
    border-radius: 50px;
    vertical-align: middle;
}
.on .app-switch-btn {
    background-color: #00a3ff;
}
.app-switch-btn {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 15px;
    width: 15px;
    background-color: #344044;
    border-radius: 20px;
}

.app-switch.on > .app-switch-btn{
    left: auto;
    right: 0;
}

.lg .app-switch{
    height: 20px;
    width: 45px;
}
.lg .app-switch-btn{
    height: 20px;
    width: 20px;
}

.app-label {
    font-weight: 500;
    font-size: 14px;
}
/* ----------- ENDING: /app/ui-components/forms/switch/app-switch.css */


/* ----------- STARTING: /app/ui-components/forms/select-multiple/select-multiple.css */
.select-multiple-container{

}



.select-multiple-container .select-multiple-container-menu{
    display: flex;
    flex-direction: column;
    margin: 1em;
}

.select-multiple-container  .number-tag{
    color: var(--font-hint-color);
}

.select-multiple-container .select-multiple-container-menu .options{
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;    
}

.select-multiple-container .select-multiple-container-menu .options .dropdown-item{
    padding: .3em 0.8em;
    min-width: 220px;
    margin-top: 2px;
    border: 1px solid transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.select-multiple-container .select-multiple-container-menu .options .dropdown-item:hover{
    border-radius: 8px;
    background-color: #232c2fc0 !important;    
    cursor: pointer;
}
.select-multiple-container .select-multiple-container-menu .options .dropdown-item.selected{
    border-radius: 8px;
    background-color: #232c2f !important;
    border: 1px solid #353c3f;
    cursor: pointer;
}

.select-multiple-container .select-multiple-container-menu .options .dropdown-item.selected img{
    opacity: 1;
}

.select-multiple-container .select-multiple-container-menu .options .dropdown-item img{
    opacity: 0;
    height: 15px;
    margin-left: 2em;
}

.select-multiple-container .select-multiple-container-menu .bottom{
    margin-top: 2em;
    display: flex;
    flex-direction: row;  
    gap: .5em;  
}

.select-multiple-container .select-multiple-container-menu .bottom button{
    flex:1;
    border-radius: 10px;
    font-weight: 300;
    font-size: 12px;
}

.select-multiple-container .select-multiple-container-menu .top{
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    gap: .5em;
    border-bottom: 1px solid #263033;
    padding-bottom: 1em;
    
}

.select-multiple-container .select-multiple-container-menu .top button {
    font-weight: 300;
    font-size: 12px;
    border-radius: 10px;
}
/* ----------- ENDING: /app/ui-components/forms/select-multiple/select-multiple.css */


/* ----------- STARTING: /app/ui-components/forms/buttons/buttons.css */
.app-btn-shadow.circular{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    position: relative;
}

.app-btn-stealt {
    opacity: 0.5;
}
    .app-btn-stealt:hover {
        opacity:1;
        cursor:pointer;
    }

.app-btn-shadow:hover {
    background-color: var(--dark-border-color);
    cursor: pointer;
}

.app-btn-shadow.light:hover {
    background-color: var(--circular-btn-hover-light) !important;
}

    .app-btn-shadow.circular:hover {
        background-color: #cecece0d;
        cursor:pointer;
    }


.app-btn-primary {
    background: var(--primary-btn-background);
    border-radius: 12.6786px;
    border: none;
    color: var(--primary-btn-color);
    text-align: center;
    font-weight: 500;
}
    .app-btn-primary:hover {
        color: var(--primary-btn-color);
        background: var(--primary-btn-background-hover);
    }

.app-btn-secondary {
    background: var(--secondary-btn-background);
    border-radius: 12px;
    color: var(--secondary-btn-color);
    text-align: center;
    font-weight: 600;
}
    .app-btn-secondary:hover {
        background: var(--secondary-btn-background-hover);
        color: var(--secondary-btn-color);
    }

.app-btn-tertiary{
    background: var(--tertiary-btn-background);
    color: var(--tertiary-btn-color);
    border-radius: 10px;
    text-align: center;
}
.app-btn-tertiary:hover{
    background: var(--tertiary-btn-background-hover);
    color: var(--tertiary-btn-color);
}

.app-btn-quaternary{
    background: var(--tertiary-btn-background);
    color: var(--tertiary-btn-color);
    border-radius: 10px;
    border-color: var(--tertiary-btn-background-hover);
    text-align: center;
}
.app-btn-quaternary:hover{
    background: var(--tertiary-btn-background-hover);
    color: var(--tertiary-btn-color);
}

.app-btn-danger {
    background: var(--danger-btn-background);
    border-radius: 12.6786px;
    border: none;
    color: #FFF;
    text-align: center;
}

.app-btn-warning {
    text-align: center;
    border-radius: 12.6786px;
}

.app-btn-lg{
    /*height:45px;*/
    font-size: 14px;
    padding: 10px 40px;
}

.btn.disabled {
    cursor:default;
    opacity:.5;
}

.app-btn{
    padding: 7px 12px;
    cursor:pointer;
}

.btn:focus-visible,
.btn:active,
.btn:focus{
    outline: none !important;
    border:none !important;
    color: white;
}
/* ----------- ENDING: /app/ui-components/forms/buttons/buttons.css */


/* ----------- STARTING: /app/ui-components/forms/textarea/textarea.css */
.textarea-container{
    
}

    .textarea-container textarea {
        width: 100%;
        padding: 10px;
        resize:none;
        height:auto;
        overflow: hidden;
    }

        .textarea-container textarea:focus-visible {
            outline-width:0;
            
        }

/* ----------- ENDING: /app/ui-components/forms/textarea/textarea.css */


/* ----------- STARTING: /app/ui-components/app-tabs/bordered-tabs/bordered-tabs.css */
.bordered-tabs-container{

}

    .bordered-tabs-container .item {
        border-bottom: 1px solid var(--dark-border-color);
        padding: 1em 2em;
        cursor: pointer;
        color: var(--font-hint-color)
    }

        .bordered-tabs-container .item.selected {
            border-bottom: initial;
            border-top: 1px solid var(--dark-border-color);
            border-top-right-radius: 20px;
            border-top-left-radius: 5px;
            border-left: 1px solid var(--dark-border-color);           
            border-bottom-right-radius:  20px;
            border-bottom-color: transparent;            
            font-weight: 600;
            color: white;
        }

            .bordered-tabs-container .item.selected + .item {
                border-bottom-left-radius: 20px;
            }


.tabs-content {
    border-left: 1px solid var(--dark-border-color);
    border-bottom: 1px solid var(--dark-border-color);
    border-right: 1px solid var(--dark-border-color);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
/* ----------- ENDING: /app/ui-components/app-tabs/bordered-tabs/bordered-tabs.css */


/* ----------- STARTING: /app/ui-components/app-tabs/metric-tabs/metric-tabs.css */
.metric-tabs-container{
    display: flex;   
    gap:10px;
    flex-direction: row; 
}


.metric-tabs-container .boxed-number-container{  
    align-self: auto;    
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: hidden;
}

.metric-tabs-container .scroll-arrow{
    padding-inline: 10px;
    align-content: center;
}

.metric-tabs-container .scroll-arrow:hover{
    cursor: pointer;;
}

.metric-tabs-container .scroll-arrow.right img{
    transform: rotate(180deg);
}
.metric-tabs-container .boxed-number-container .item{
    cursor:pointer;
    opacity: .9;   
    border:1px solid transparent; 
    flex: none;
}

.metric-tabs-container .boxed-number-container .item:hover{
    opacity: 1;
}

.metric-tabs-container .boxed-number-container .item.selected{
    
    border-radius: 10px;
}

.metric-tabs-container .boxed-number-container .item.selected .boxed-number-viewer-container{
    background-color: #094054;
    border:1px solid #00A3FF;
}

.metric-tabs-container .boxed-number-container .item.selected .boxed-number-viewer-container .app-label{
    opacity: 1;;
}

/* ----------- ENDING: /app/ui-components/app-tabs/metric-tabs/metric-tabs.css */


/* ----------- STARTING: /app/ui-components/app-tabs/scrollable-tabs/scrollable-tabs.css */
.scrollable-tabs-container {
    white-space: nowrap;
    overflow: scroll;
}


    .scrollable-tabs-container .item {
        padding: 5px 20px;
        cursor:pointer;
    }

        .scrollable-tabs-container .item.selected {
            color: var(--font-hint-color);
            border-bottom: 2px solid var(--font-hint-color);
        }
/* ----------- ENDING: /app/ui-components/app-tabs/scrollable-tabs/scrollable-tabs.css */


/* ----------- STARTING: /app/ui-components/app-tabs/employee-tabs/employee-tabs.css */
.employee-tabs-container{
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: hidden;
}

.employee-tabs-container .item{
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 8px 40px 8px 20px;
    border-radius: 8px;
    border:1px solid transparent;
    background-color: #273236;
    align-items: center;
    flex:none;
    font-size: 13px;
    opacity: .9;
}
.employee-tabs-container .item:hover{
    cursor: pointer;
    opacity: 1;
}

.employee-tabs-container .item.selected{
    background-color: #394C52;
    border: 1px solid rgba(233, 233, 234, .54);
    opacity: 1;
}

/* ----------- ENDING: /app/ui-components/app-tabs/employee-tabs/employee-tabs.css */


/* ----------- STARTING: /app/ui-components/data-charts/bar-line-from-center/bar-line-from-center.css */
.bar-line-from-center-container{
    height: 4px;    
    display: flex;
    flex-direction: row;
}


.bar-line-from-center-container .dot{
    background-color: #656565;
    border-radius: 50%;
    width: 4px;
    height: 2px;
    align-self: center;
}

.bar-line-from-center-container .left,
.bar-line-from-center-container .right{
    background-color: #323434;
    height: 2px;
    width: 50%;
    align-self: center;
}


.bar-line-from-center-container .right .fill{
    background-image: linear-gradient(to right,#26e7c9, #18ff88);
    
    height: 100%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.bar-line-from-center-container .left .fill{
    background-image: linear-gradient( to right,#ff6a76, #ff3336);
    
    height: 100%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}
/* ----------- ENDING: /app/ui-components/data-charts/bar-line-from-center/bar-line-from-center.css */


/* ----------- STARTING: /app/ui-components/data-charts/bar-line-value/bar-line-value.css */
.bar-line-value{
    display: flex;
    flex-direction: column;
}



.bar-line-value .line-value{
    display: flex;
    flex-direction: row;
    padding-bottom: 2px;
    justify-content: space-between
}

.bar-line-value .line-value .label{
    font-family: Montserrat;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    padding: 0;
    
}

.bar-line-value .line-value > number-viewer{
    font-family: Montserrat;
    font-size: 12px;
    font-weight: 300;
    text-align: left;
    vertical-align: baseline;
    line-height: 1;
}

.bar-line-value .bar-percentage {
    display: inline-flex;
}
    .bar-line-value .bar-percentage .bar-container {
        display: inline-block;
        margin: 2px 0px;
        position: relative;
        width: 100%;
        background-color: #76ff8c08;
        border-radius:3px
    }
.bar-line-value .bar-percentage .bar-container .fill {
    height: 4px;
    border-radius: 6px;
    background-color: #3535356b;
}

.bar-line-value .bar-percentage .fill.positive{
    background-color: var(--bar-line-positive);
}

.bar-line-value .bar-percentage .fill.negative{
    background-color: var(--bar-line-negative);
}
/* ----------- ENDING: /app/ui-components/data-charts/bar-line-value/bar-line-value.css */


/* ----------- STARTING: /app/ui-components/data-charts/bar-line/bar-line.css */
.bar-line-container{
    position: relative;
    width: 50px;
}

.bar-line-container .bar-container{
    height: 2px;
    background-color: #19fefa36;
}

.bar-line-container .bar-container .fill{
    width: 50%;
    position: absolute;
    left: 0px;
    height: 2px;
    border-radius: 3px;
    background-image: linear-gradient(to right, #2fa7e7, #19fefb);
}


/* ----------- ENDING: /app/ui-components/data-charts/bar-line/bar-line.css */


/* ----------- STARTING: /app/ui-components/previews/preview-with-actions/preview-with-actions.css */
.preview-with-actions-container{
    display: flex;
    flex-direction: row;
    width: 800px;
    height: 300px;
    padding: 15px;
    gap:15px
}


.preview-action-subpopover{
    background-color: #293337;
    border-radius: 10px;
}

.preview-popover{
    background-color:#1a1f21 ;
    border: 1px solid #4b5052;
    border-radius: 10px;
}

.preview-with-actions-container .view-container{
    align-content: center;
    width: 70%;
    background-color: #1c2224;
    flex:480;
    border-radius: 10px;
}

.preview-with-actions-container .actions-container{
    display: flex;
    gap:10px;
    justify-content: start;    
    flex-direction: column;
    flex:370;
}

.preview-with-actions-container .actions-container.no-actions{
    display: none;
}

.preview-with-actions-container .actions-container .action{
    cursor: pointer;
    font-size: 13px;
    padding: 15px 10px 15px 20px;
    border-radius: 10px;
    background-color: #20282b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.preview-with-actions-container .actions-container .action img{
    width: 5px;height: 16px;
   
    opacity: .6;
}

.preview-with-actions-container .actions-container .action .action-label{
    margin-right: 10px;
}

.preview-with-actions-container .actions-container .indicator{
    padding-right: 5px;
}

.preview-with-actions-container .actions-container .action:hover{
    
    background-color: #293337;
}
.preview-with-actions-container .actions-container .action.is-open{
    
    background-color: #293337;
}

.preview-with-actions-container .actions-container .action .action-more{
    display: flex;
    align-items: center;
}

.preview-with-actions-wrapper:hover .dismiss-action{
    opacity: 1;
}

.preview-with-actions-wrapper .dismiss-action:hover{
    cursor: pointer;
    background-color: #293337;
}
.preview-with-actions-wrapper .dismiss-action{
    opacity: 0;
    transition: opacity .2s ease-in;
    position: absolute;
    right: -14px;
    top: -17px;
    border: 1px solid #4b5052;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    background-color: #1a1f21;
}

.preview-with-actions-wrapper .dismiss-action .x{
    height: 10px;
    width: 10px;
    opacity: .6;
}

preview-with-actions.wide .view-container{
    flex: 780;
}

preview-with-actions.wider .view-container{
    flex: 1000;
}

/* ----------- ENDING: /app/ui-components/previews/preview-with-actions/preview-with-actions.css */


/* ----------- STARTING: /app/ui-components/previews/preview-chart-with-actions/preview-chart-with-actions.css */
.preview-chart-with-actions-container{
    height: 200px;
    width: 400px;
   
}

.preview-chart-with-actions-container .actions-container{
    height: 20px;
    
}

.preview-chart-with-actions-container .chart-container{
    position: relative;
    height: 100px;
}

/* ----------- ENDING: /app/ui-components/previews/preview-chart-with-actions/preview-chart-with-actions.css */


/* ----------- STARTING: /app/ui-components/date/month-range-picker/app-month-range-picker.css */
.app-month-range-picker {
    max-width: 300px;
    display: -webkit-inline-box;
    vertical-align: top;
}

.app-month-range-picker .boxed-content {
    display: flex;
    flex-direction: row;
    padding-left: 15px;
    padding-right: 20px;
}

.app-month-range-picker p {}

.app-month-range-picker .cal-container {
    display: flex;
    padding-right: 15px;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.app-month-range-picker .cal-container .img-container {
    background-color: var(--dark-boxed-icon-background-color);
    padding: 3px 4px;
    border-radius: 9px;
}

.app-month-range-picker .cal-container img {
    display: inline-block;
    height: 17px;
    margin-top: -3px;
}

.app-month-range-picker .divider {
    border-right: 1px solid #4B50524D;
    margin: 10px 20px;
}

.app-month-range-picker .input-from-container,
.app-month-range-picker .input-to-container {
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    cursor: pointer;
}
.app-month-range-picker .input-from-container input{
    cursor: pointer;
}
.app-month-range-picker .input-to-container input{
    cursor: pointer;
}

.app-month-range-picker .input-from-container input,
.app-month-range-picker .input-to-container input {
    max-width: 65px;
    background: none;
    border: none;
    padding: 0;
    margin-top: -5px;
    font-size: 15px;
    font-weight: 400;
    color: var(--dark-boxed-inactive-color);
    box-shadow: none;
}

.app-month-range-picker .input-from-container input:active,
.app-month-range-picker .input-to-container input:active {
    color: var(--dark-boxed-active-color);
    -webkit-box-shadow: none;
    box-shadow: none;
}
/* ----------- ENDING: /app/ui-components/date/month-range-picker/app-month-range-picker.css */


/* ----------- STARTING: /app/ui-components/date/month-picker/app-month-picker.css */
.app-monthpicker {
    min-width: 165px;
    display: -webkit-inline-box;
}

.app-monthpicker .boxed-content {
    display: flex;
    flex-direction: row;
}

.app-monthpicker .boxed {
    opacity: 1;
}


.app-monthpicker p {}

.app-monthpicker .cal-container {
    display: flex;
    padding-right: 15px;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.app-monthpicker .cal-container .img-container {
    background-color: var(--dark-boxed-icon-background-color);
    padding: 3px 4px;
    border-radius: 9px;
}

.app-monthpicker .cal-container img {
    display: inline-block;
    height: 17px;
    margin-top: -3px;
}

.app-monthpicker .input-container {
    display: flex;
    flex-direction: column;
}

.app-monthpicker .input-container input {
    max-width: 65px;
    background: none;
    border: none;
    padding: 0;
    margin-top: -5px;
    font-size: 15px;
    font-weight: 400;
    color: var(--dark-boxed-inactive-color);
    box-shadow: none;
}

.app-monthpicker .input-container input:active {
    color: var(--dark-boxed-active-color);
    -webkit-box-shadow: none;
    box-shadow: none;
}
/* ----------- ENDING: /app/ui-components/date/month-picker/app-month-picker.css */


/* ----------- STARTING: /app/ui-components/date/month-picker-inline/month-picker-inline.css */
.month-picker-inline-container{

}

.month-picker-inline-container .boxed-content{
    display: flex;
    flex-direction: row;
    gap:15px;
    align-items: center;
    cursor: pointer;
}


.month-picker-inline-container .input-container input {
    max-width: 85px;
    background: none;
    border: none;
    padding: 0;
    margin-top: -5px;
    font-size: 15px;
    font-weight: 400;
    color: var(--dark-color);
    box-shadow: none;
    cursor: pointer;
}



/* ----------- ENDING: /app/ui-components/date/month-picker-inline/month-picker-inline.css */


/* ----------- STARTING: /app/ui-components/user-icon/users-icon-loading/users-icon-loading.css */
.users-icon-loading-container{

}

/* ----------- ENDING: /app/ui-components/user-icon/users-icon-loading/users-icon-loading.css */


/* ----------- STARTING: /app/ui-components/app-timeline/app-timeline-slick/app-timeline-slick.css */
.app-timeline-slick-container{

}

.app-timeline-slick-container .timeline-slick{
    display: flex;
    flex-direction: column;
}

.app-timeline-slick-container .month{
    margin-bottom: 10px;
    margin-top: 10px;
    
}

.app-timeline-slick-container .mlabel{
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}

.app-timeline-slick-container .events-container{
    border-left: 1px solid #5798AD;
    padding-left: 20px;
}

.app-timeline-slick-container .event{
    opacity: .5;
    text-transform: capitalize;
    font-size: 12px;
}

.app-timeline-slick-container .day{
    font-size: 13px;
    text-transform: uppercase;
}

.app-timeline-slick-container .day-events{
    display: flex;
    flex-direction: column;
    gap: 7px;
   
}

.app-timeline-slick-container .day-events:not(:last-child){
    margin-bottom: 20px;
}

.app-timeline-slick-container .day-container{
    position: relative;
}

.app-timeline-slick-container .day-container .circle{
    height: 11px;
    width: 11px;
    border-radius: 50%;
    background-color: var(--font-hint-color);
    position: absolute;
    left: -26px;
    top: 50%;
    border: 3px solid #1a1f21;
    
}
/* ----------- ENDING: /app/ui-components/app-timeline/app-timeline-slick/app-timeline-slick.css */


/* ----------- STARTING: /app/ui-components/viewers/deal-financials-tree/deal-financials-tree.css */
.deal-financials-tree-container{
    width: 1020px;
    height: 290px;
    position: relative;
   /* border: 1px solid blue;*/

}

.deal-financials-tree-container .lines{
    position: absolute;
    top: 20px;
    left: 40px
}

.deal-financials-tree-container .lines{
    
    width: 899px;
    height: 170px;
    background-image: url(/assets/images/vehicle-sales/lines.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}
.deal-financials-tree-container .lines financials-tree-box{
    position: absolute;
}
.deal-financials-tree-container .lines financials-tree-box-simple{
    position: absolute;
}
financials-tree-box.sg{
    top: -20px;
    left: 150px;
}
financials-tree-box.hb{
    top: 10px;
    left: -40px;
}
financials-tree-box.i{
    top: 70px;
    left: 20px;
}
financials-tree-box.fg{
    top: 80px;
    left: 160px;
}

financials-tree-box.fg .title{
    font-size: 13px;
}
financials-tree-box.bg .title{
    font-size: 13px;
}
financials-tree-box.sg .title{
    font-size: 13px !important;
}

financials-tree-box-simple.sc{
    top: 150px;
    left: -40px;
}

financials-tree-box.bg{
    top: 75px;
    right: 280px;
}

financials-tree-box-simple.oc{
    width: 130px;
    top: 60px;
    right: -100px;
}
financials-tree-box.in{   
    top: 150px;
    right: -80px;
}

financials-tree-box.bw{
    top: 150px;
    right: 45px;
}

financials-tree-box.bp{
    top: 150px;
    right: 155px;
}
financials-tree-box.f{
    top: 150px;
    right: 270px;
}
financials-tree-box.t{
    top: 150px;
    left: 70px;
}
financials-tree-box.v{
    top: 150px;
    left: 180px;
}
financials-tree-box.fw{
    top: 150px;
    left: 290px;
}
financials-tree-box.fp{
    top: 150px;
    left: 400px;
}

/* ----------- ENDING: /app/ui-components/viewers/deal-financials-tree/deal-financials-tree.css */


/* ----------- STARTING: /app/ui-components/viewers/ro-advisors/ro-advisors.css */
.ro-advisors-container {
    display: flex;
    gap: 10px;
    padding-left: 17px;
}

/* ----------- ENDING: /app/ui-components/viewers/ro-advisors/ro-advisors.css */


/* ----------- STARTING: /app/ui-components/viewers/colored-labeled-counter-badge/colored-labeled-counter-badge.css */
.colored-labeled-counter-badge-container{
    display: inline-flex;
    gap: 5px;
    padding: 0px 10px;
    border-radius: 3px;;
    font-size: 12px;
}

/* ----------- ENDING: /app/ui-components/viewers/colored-labeled-counter-badge/colored-labeled-counter-badge.css */


/* ----------- STARTING: /app/ui-components/viewers/subtitled-amount/subtitled-amount.css */


.subtitled-amount-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.left .subtitled-amount-container{
    align-items: normal;
}

.subtitled-amount-container .amount{
    font-size: 18px;
}

.subtitled-amount-container .amount-label {
    opacity: .7;
    font-weight: 100;
    letter-spacing: .05em;
}
/* ----------- ENDING: /app/ui-components/viewers/subtitled-amount/subtitled-amount.css */


/* ----------- STARTING: /app/ui-components/viewers/inventory-status-badge/inventory-status-badge.css */
.inventory-status-badge-container{

}

.inventory-status-badge-container .status{
    padding: 3px 5px;    
    border-radius: 8px;
}
/* ----------- ENDING: /app/ui-components/viewers/inventory-status-badge/inventory-status-badge.css */


/* ----------- STARTING: /app/ui-components/viewers/deal-status-badge/deal-status-badge.css */
.deal-status-badge-container{

}

.deal-status-badge-container .badge{
    background-color: var(--circular-btn-hover-light);
    font-weight: 400;
}

deal-status-badge.small .badge{
    font-size: 11px;
}
/* ----------- ENDING: /app/ui-components/viewers/deal-status-badge/deal-status-badge.css */


/* ----------- STARTING: /app/ui-components/viewers/deal-purchase-lease-badge/deal-purchase-lease-badge.css */
.deal-purchase-lease-badge-container{
    display: inline-block;
}


.deal-purchase-lease-badge-container .content-container{
    padding: 3px 5px;    
    border-radius: 8px;
    font-size: 12px;
}

deal-purchase-lease-badge.small .content-container{
    font-size: 11px;
}
/* ----------- ENDING: /app/ui-components/viewers/deal-purchase-lease-badge/deal-purchase-lease-badge.css */


/* ----------- STARTING: /app/ui-components/viewers/extended-service-line-type-badge/extended-service-line-type-badge.css */
.extended-service-line-type-badge-container{
    position: relative;    
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: inline-block;
}


.extended-service-line-type-badge-container .initial{
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    font-size: 13px;
}

extended-service-line-type-badge.large .pay-type-badge-container{
    width: 30px;
    height: 30px;
}

extended-service-line-type-badge.large .pay-type-badge-container .initial{
    font-size: 16px;
}


/* ----------- ENDING: /app/ui-components/viewers/extended-service-line-type-badge/extended-service-line-type-badge.css */


/* ----------- STARTING: /app/ui-components/viewers/deal-salespeople/deal-salespeople.css */
.deal-salespeople-container{
    display:flex;
    gap:7px
}

/* ----------- ENDING: /app/ui-components/viewers/deal-salespeople/deal-salespeople.css */


/* ----------- STARTING: /app/ui-components/viewers/ro-status/ro-status.css */
.ro-status-container{
    display: inline-block;
}


.ro-status-container .content{
    padding: 3px 5px;
    border-radius: 5px;
}
/* ----------- ENDING: /app/ui-components/viewers/ro-status/ro-status.css */


/* ----------- STARTING: /app/ui-components/viewers/inventory-age/inventory-age.css */
.inventory-age-container{

}

.inventory-age-container .days{
    padding: 3px 5px;    
    border-radius: 8px;
}

/* ----------- ENDING: /app/ui-components/viewers/inventory-age/inventory-age.css */


/* ----------- STARTING: /app/ui-components/viewers/deal-purchase-lease-counter-badge/deal-purchase-lease-counter-badge.css */
.deal-purchase-lease-counter-badge-container{
    
    padding: 1px 15px;
    display: flex;
    gap: 10px;
    font-size: 13px;
}

/* ----------- ENDING: /app/ui-components/viewers/deal-purchase-lease-counter-badge/deal-purchase-lease-counter-badge.css */


/* ----------- STARTING: /app/ui-components/viewers/small-percentage/small-percentage.css */
.small-percentage-container{

}

/* ----------- ENDING: /app/ui-components/viewers/small-percentage/small-percentage.css */


/* ----------- STARTING: /app/ui-components/viewers/deal-trade-in-badge/deal-trade-in-badge.css */
.deal-trade-in-badge-container{

}

.deal-trade-in-badge-container .trade-in-badge{
    padding: 3px 5px;    
    border-radius: 8px;
    font-size: 12px;
    color:#00D1FF;
    background-color: #00D1FF16;
}
/* ----------- ENDING: /app/ui-components/viewers/deal-trade-in-badge/deal-trade-in-badge.css */


/* ----------- STARTING: /app/ui-components/viewers/boxed-number-viewer/boxed-number-viewer.css */
.boxed-number-viewer-container{
    display: inline-block;
    
    border: 1px solid var(--dark-boxed-border-color);    
    border-radius: 10px;
    background-color: var(--dark-boxed-background);
    padding: 5px 20px;
    min-width: 100px;
}

.boxed-number-viewer-container .app-label{
    display: inline;
    font-size: 12px;
    opacity: .3;
    font-weight: 400;
}

.boxed-number-viewer-container .number-container{
    display: inline;
}

.boxed-number-viewer-container .number-viewer-container{
    text-align: center;
}

/* ----------- ENDING: /app/ui-components/viewers/boxed-number-viewer/boxed-number-viewer.css */


/* ----------- STARTING: /app/ui-components/viewers/number-viewer/number-viewer.css */
.number-viewer-container{
       
        
}

    .number-viewer-container .number {
       
    }

    .number-viewer-container .zero-amount{
        opacity: .2;
    }
/* ----------- ENDING: /app/ui-components/viewers/number-viewer/number-viewer.css */


/* ----------- STARTING: /app/ui-components/viewers/ro-pay-type-badge/pay-type-badge.css */
.pay-type-badge-container{
    position: relative;    
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: inline-block;
}


.pay-type-badge-container .initial{
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    font-size: 13px;
}

ro-pay-type-badge.large .pay-type-badge-container{
    width: 30px;
    height: 30px;
}

ro-pay-type-badge.large .pay-type-badge-container .initial{
    font-size: 16px;
}


/* ----------- ENDING: /app/ui-components/viewers/ro-pay-type-badge/pay-type-badge.css */


/* ----------- STARTING: /app/ui-components/viewers/parts-sale-type-badge/parts-sale-type-badge.css */
.parts-sale-type-badge-container{
    position: relative;    
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: inline-block;
    margin-right: 4px;
}


.parts-sale-type-badge-container .initial{    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    font-size: 13px;
}

parts-sale-type-badge.large .parts-sale-type-badge-container{
    width: 30px;
    height: 30px;
}

parts-sale-type-badge.large .parts-sale-type-badge-container .initial{
    font-size: 16px;
}


/* ----------- ENDING: /app/ui-components/viewers/parts-sale-type-badge/parts-sale-type-badge.css */


/* ----------- STARTING: /app/ui-components/viewers/number-viewer-vs/number-viewer-vs.css */
.number-viewer-vs-container{

}

/* ----------- ENDING: /app/ui-components/viewers/number-viewer-vs/number-viewer-vs.css */


/* ----------- STARTING: /app/ui-components/viewers/deal-events-viewer/deal-events-viewer.css */
.deal-events-viewer-container{

}



/* ----------- ENDING: /app/ui-components/viewers/deal-events-viewer/deal-events-viewer.css */


/* ----------- STARTING: /app/ui-components/viewers/inventory-stock-badge/inventory-stock-badge.css */
.inventory-stock-badge-container{

}


.inventory-stock-badge-container .stock{
    padding: 3px 5px;
    
    border-radius: 8px;
}
/* ----------- ENDING: /app/ui-components/viewers/inventory-stock-badge/inventory-stock-badge.css */


/* ----------- STARTING: /app/ui-components/users-ribbon/users-ribbon-loading/users-ribbon-loading.css */
.users-ribbon-loading-container{

}


.user-ribbon-container users-icon-loading:not(:last-child) {
    margin-right: -20%;
}
/* ----------- ENDING: /app/ui-components/users-ribbon/users-ribbon-loading/users-ribbon-loading.css */


/* ----------- STARTING: /app/ui-components/badge/title-badge/title-badge.css */
.title-badge
{
    display: inline;
}
/* ----------- ENDING: /app/ui-components/badge/title-badge/title-badge.css */


/* ----------- STARTING: /app/ui-components/notifications/icon/notifications-icon.css */
.notification-icon {
    height: 40px;
    width: 40px;
    display: inline-block;
    vertical-align: middle;
}

    .notification-icon .circle {
        border-radius: 50%;
        height: 100%;
        background-color: #448F9F33;
        width: 100%;
        position: relative;
    }


    .notification-icon .icon {        
        color:white;
    }

.unread .notification-icon .circle {
    /*
    transform: scale(1);
    animation: pulse-green-sutil 2s infinite;
        */
}
/* ----------- ENDING: /app/ui-components/notifications/icon/notifications-icon.css */


/* ----------- STARTING: /app/ui-components/avatars/employee-avatar/employee-avatar.css */
.employee-avatar-container{
    display: inline-block;
    border-radius: 7px;
   /* background: linear-gradient(0deg, #1388F5, #23C8FC);*/
    padding: 20px 10px 0px 10px;
}

employee-avatar.small img{
    height: 20px;
    ;
}

employee-avatar.small .employee-avatar-container{
    padding: 4px 2px 0px 2px;
    border-radius: 4px;
}


employee-avatar.med img{
    height: 45px;
    ;
}

employee-avatar.med .employee-avatar-container{
    padding: 4px 2px 0px 2px;
    border-radius: 4px;
}
/* ----------- ENDING: /app/ui-components/avatars/employee-avatar/employee-avatar.css */


/* ----------- STARTING: /app/ui-components/scroll/scroll-assist/scroll-assist.css */
.scroll-assist-container{

}

.scroll-assist {
    position: relative;
}

    .scroll-assist .scroll-action {
        position: absolute;
        height: 10px;
        width: 10px;
        background-color: red;
    }

        .scroll-assist .scroll-action.top {
            top: 0px;
            left: 50%;
            transform:translateX(-50%);
        }

        .scroll-assist .scroll-action.left {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        .scroll-assist .scroll-action.bottom {
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .scroll-assist .scroll-action.right {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }

/* ----------- ENDING: /app/ui-components/scroll/scroll-assist/scroll-assist.css */


/* ----------- STARTING: /app/ui-components/notes/icon/notes-icon.css */
.notes-icon {
    height:41px;
    width:41px;
    display: inline-block;
    position:relative;
}


    .notes-icon .circle:is(.top,.bottom) {
        position: relative;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        background-color: #365775;
        border: 2px solid rgba(0,0,0,0.5);
    }

        .notes-icon .circle span {
            font-size: 14px;
            color: var(--font-hint-color)
        }

        .notes-icon .circle.top {
            position:absolute;
            top:0px;
            left:0px;
        }
        .notes-icon .circle.bottom {
            position: absolute;
            bottom:0px;
            right:0px;
            z-index:1;
        }
/* ----------- ENDING: /app/ui-components/notes/icon/notes-icon.css */


/* ----------- STARTING: /app/ui-components/notes/viewer/notes-side-viewer.css */
.note-side-viewer btn-close{
    position: absolute;
    top:10px;
    right:10px;
}
/* ----------- ENDING: /app/ui-components/notes/viewer/notes-side-viewer.css */


/* ----------- STARTING: /app/ui-components/loaders/line-loader/line-loader.css */
/*

.line-loader-container {
    height: 2px;
}


@keyframes changewidth {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.line-loader-container .bar {
    background-color: #0071bc;
    height: 2px;
    animation-duration: 2s;
    animation-name: changewidth;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}
*/
.line-loader-container {
    width: 100%;
    height: 3px;
    position: relative;
    overflow: hidden;
   /* background-color: #ddd; 
    margin: 100px auto;*/
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.line-loader-container:before {
    content: "";
    position: absolute;
    left: -50%;
    height: 3px;
    width: 20%;
    background-color: #0071bc;
    -webkit-animation: lineAnim 1.5s linear infinite;
    -moz-animation: lineAnim 1.5s linear infinite;
    animation: lineAnim 1.5s linear infinite;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    
    overflow: hidden;
}

@keyframes lineAnim {
    0% {
        left: -40%;
    }
    50% {
        left: 20%;
        width: 80%;
    }
    100% {
        left: 100%;
        width: 100%;
    }
}
contained-line-loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1c2224d1;
    z-index: 10;
    border-radius: 8px;
    overflow: hidden;
}


/* ----------- ENDING: /app/ui-components/loaders/line-loader/line-loader.css */


/* ----------- STARTING: /app/ui-components/top-nav-action/slide/top-nav-action-slide.css */
.top-slide {
    height: 100%;
    background-color: var(--dark-background-light);
    border-left: 1px solid var(--dark-border-color);
}

/* ----------- ENDING: /app/ui-components/top-nav-action/slide/top-nav-action-slide.css */


/* ----------- STARTING: /app/ui-components/alerts/information/informational-alert/informational-alert.css */
.informational-alert-container{
    font-weight: 500;
    font-size: 85%;
    color: #5CD9FF;
    padding: 8px 16px; 
    border-radius: 3px;
    background-color: #3E87F833;
    display: inline-block;
}

  .informational-alert-container webicon {
    padding-right: 5px;
    vertical-align: text-bottom;
  }

  .informational-alert-container .action-text{
    text-decoration: underline;
  }

  .informational-alert-container .action-text:hover{
    cursor: pointer;
  }
/* ----------- ENDING: /app/ui-components/alerts/information/informational-alert/informational-alert.css */


/* ----------- STARTING: /app/ui-components/view-manager/deal/sales-transactions-view/sales-transactions-view.css */
.sales-transactions-view-container{

}



.sales-transactions-view-container .grid-stealth{
    margin-top:2em;
}

.sales-transactions-view-container .content-container{
    margin-top: 1em;
    position: relative;
    height: calc(100vh - 270px);
}

.sales-transactions-view-container .filters-container{
    margin-top: 1em;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
/* ----------- ENDING: /app/ui-components/view-manager/deal/sales-transactions-view/sales-transactions-view.css */


/* ----------- STARTING: /app/ui-components/view-manager/deal/deal-details-view/deal-details-view.css */
.deal-details-view-container{

}

.deal-details-view-container .heading{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/* ----------- ENDING: /app/ui-components/view-manager/deal/deal-details-view/deal-details-view.css */


/* ----------- STARTING: /app/ui-components/view-manager/deal/products-details-view/products-details-view.css */
.products-details-view-container{

}


    .products-details-view-container .content-container {
        position: relative;
        height: calc(100vh - 280px);
        margin-top: 20px;
    }
/* ----------- ENDING: /app/ui-components/view-manager/deal/products-details-view/products-details-view.css */


/* ----------- STARTING: /app/ui-components/view-manager/parts/parts-invoice-details-view/parts-invoice-details-view.css */
.parts-invoice-details-view-container {}

.parts-invoice-details-view-container .top-heading {
    height: 55px;
}

.parts-invoice-details-view-container .top {
    display: flex;
    gap: 10px;
    align-items: center;
}

.parts-invoice-details-view-container .top .app-heading{
    font-size: 20px;
}

.parts-invoice-details-view-container .app-sub-sub-heading{
    opacity: .5;
}

.parts-invoice-details-view-container .timeline-container{
    margin-top: 34px;
}


.parts-invoice-details-view-container .gross-table{
    position: relative;
}

.parts-invoice-details-view-container .row1 .modal-panel{
    height: 370px;
    overflow: auto;
}

.parts-invoice-details-view-container .gross-table{
    height: 310px;
}

.parts-invoice-details-view-container .parts-count-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2em;
    margin-top: 8em;
}
.parts-invoice-details-view-container .parts-count-container .item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.parts-invoice-details-view-container .parts-count-container .amount{
    font-size: 36px;
}
.parts-invoice-details-view-container .parts-count-container .amount-label{
    opacity: .5;
    font-size: 14px;
}

.parts-invoice-details-view-container .vehicle-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em;        
}

.parts-invoice-details-view-container .vehicle-container:not(:last-child){
    border-bottom: 1px solid #ffffff1c;
}

.parts-invoice-details-view-container .vehicle-container .item{
    display: flex;
    flex-direction: column;
    align-items: center;
}


.parts-invoice-details-view-container .ro-lines-grid-wrapper{
    height: 310px;
    position: relative;
    margin-top:1em;
}

.parts-invoice-details-view-container .gl-entries-wrapper{
    height: 310px;
    position: relative;
    margin-top:1em;
}

.parts-invoice-details-view-container .advisor-container{
    padding: 1em;
    padding-top: 3em;
}

.parts-invoice-details-view-container .advisor-container .advisor-card{
    margin-top: 3em;
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 3em;
}

.parts-invoice-details-view-container .no-info-found{
    opacity: .5;
    font-size: 13px;
    margin-top: 50px;
    text-align: center;
}

.parts-invoice-details-view-container .cost-sale-panel{
    text-align: center;
    margin: 21px;
}

.parts-invoice-details-view-container .cost-sale-panel > .amount{
    font-size: 32px;
}

.parts-invoice-details-view-container .cost-sale-panel > .amount-label{
    opacity: .5;
    font-size: 14px;
}
/* ----------- ENDING: /app/ui-components/view-manager/parts/parts-invoice-details-view/parts-invoice-details-view.css */


/* ----------- STARTING: /app/ui-components/view-manager/financials/edit-budget-view/edit-budget-view.css */
.edit-budget-view-container{

}


.edit-budget-view-container .app-heading {
    font-size: 20px;
    font-weight: 400;
}

.edit-budget-view-container .filters{
    
    display: flex;
    flex-direction: row;
    gap: 2em;
    align-items: center;
    margin-left: 2em;
}

.edit-budget-view-container .grid-container{
    margin-top: 1em;
    position: relative;
    height: calc(100vh - 280px);
}

.edit-budget-view-container .grid-stealth{
    margin-top: 3em;
}
/* ----------- ENDING: /app/ui-components/view-manager/financials/edit-budget-view/edit-budget-view.css */


/* ----------- STARTING: /app/ui-components/view-manager/financials/gl-posting-reference/gl-posting-reference.css */
.gl-posting-reference-container{

}


.gl-posting-reference-container .content-container{
    height: calc(100vh - 190px);
    margin-top: 3em;
}
/* ----------- ENDING: /app/ui-components/view-manager/financials/gl-posting-reference/gl-posting-reference.css */


/* ----------- STARTING: /app/ui-components/view-manager/financials/gl-posting-details/gl-posting-details.css */
.gl-posting-details-container{

}

.gl-posting-details-container .content-container{
    margin-top: 3em;
}

.gl-posting-details-container .grid-container{
    margin-top:1em;
    position: relative;
    height: calc(100vh - 400px);
}

.gl-posting-details-container .details-container{
    height: 200px;
}

.gl-posting-details-container .timeline-container{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/* ----------- ENDING: /app/ui-components/view-manager/financials/gl-posting-details/gl-posting-details.css */


/* ----------- STARTING: /app/ui-components/view-manager/service/ro-details-view/ro-details-view.css */
.ro-details-view-container{
 
}

.ro-details-view-container .top-heading{
    height: 55px;
}
.ro-details-view-container .top{
    display: flex;
    gap:10px;
    align-items: center;
}

.ro-details-view-container .top .app-heading{
    font-size: 20px;
}

.ro-details-view-container .vin{
    opacity: .5;
}


.ro-details-view-container .gross-table{
    position: relative;
}

.ro-details-view-container .row1 .modal-panel{
    height: 370px;
    overflow: auto;
}

.ro-details-view-container .gross-table{
    height: 310px;
}

.ro-details-view-container .hours-container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2em;
}
.ro-details-view-container .hours-container .item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ro-details-view-container .hours-container .amount{
    font-size: 18px;
}
.ro-details-view-container .hours-container .amount-label{
    opacity: .5;
    font-size: 13px;
}

.ro-details-view-container .customer-container{
    margin-top: 2em;
    border-bottom: 1px solid #ffffff1c;
    display: flex  ;
    flex-direction: column ;
    gap: 10px;
    padding-bottom: 1em;
}
.ro-details-view-container .customer-container .name{
 font-size: 20px;
 font-weight: 300;
}

.ro-details-view-container .customer-container .address{
    font-weight: 300;
    font-size: 12px;
    opacity: .7;
}

.ro-details-view-container .customer-container .phone{
    font-weight: 300;
    font-size: 12px;
    opacity: .7;
}

.ro-details-view-container .vehicle-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em;        
}

.ro-details-view-container .vehicle-container:not(:last-child){
    border-bottom: 1px solid #ffffff1c;
}

.ro-details-view-container .vehicle-container .item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ro-details-view-container .vehicle-container .amount{
    font-size: 18px;
}
.ro-details-view-container .vehicle-container .amount-label{
    opacity: .5;
    font-size: 13px;
}

.ro-details-view-container .row2 .grid-container{
    height: 370px;
}

.ro-details-view-container .ro-lines-grid-container, 
.ro-details-view-container .ro-mls-grid-wrapper {
    height: 310px;
    position: relative;
    margin-top:1em;
}

.ro-details-view-container .parts-invoice-wrapper{
    height: 310px;
    position: relative;
}

.ro-details-view-container .gl-entries-wrapper{
    height: 530px;
    position: relative;
    margin-top:1em;
}

.ro-details-view-container .advisor-container{
    padding: 1em;
    padding-top: 3em;
}

.ro-details-view-container .advisor-container .advisor-card{
    margin-top: 3em;
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 3em;
}
/* ----------- ENDING: /app/ui-components/view-manager/service/ro-details-view/ro-details-view.css */


/* ----------- STARTING: /app/ui-components/view-manager/service/ro-transactions-view/ro-transactions-view.css */
.ro-transactions-view-container{

}

.ro-transactions-view-container .grid-stealth{
    margin-top:2em;
}

.ro-transactions-view-container .content-container{
    margin-top: 1em;
    position: relative;
    height: calc(100vh - 270px);
}

.ro-transactions-view-container .filters-container{
    margin-top: 1em;
}
/* ----------- ENDING: /app/ui-components/view-manager/service/ro-transactions-view/ro-transactions-view.css */


/* ----------- STARTING: /app/ui-components/view-manager/shared/trend-side-by-side-view/trend-side-by-side-view.css */
.trend-side-by-side-view-container{

}


.trend-side-by-side-view-container .chart-container{
    height: calc((100vh - 450px)/2);
    position: relative;
    margin:2em;
}

.trend-side-by-side-view-container .table-container{
    height: calc((100vh - 200px)/2);
    margin-top:3em;    
    position:relative
}

.trend-side-by-side-view-container .series-container{
    height: calc(100vh - 198px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding:1em;
    overflow-y: auto;
}

.trend-side-by-side-view-container .series-container .serie{
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trend-side-by-side-view-container .series-container .serie:hover{
    background-color: #2732364f;
    cursor: pointer;
}

.trend-side-by-side-view-container .series-container .serie.selected{
    background-color: #273236;
}

.trend-side-by-side-view-container .series-container .serie-dot{
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: red;
}
/* ----------- ENDING: /app/ui-components/view-manager/shared/trend-side-by-side-view/trend-side-by-side-view.css */


/* ----------- STARTING: /app/ui-components/view-manager/inventory/inventory-details-view/inventory-details-view.css */
.inventory-details-view-container{

}


.inventory-details-view-container .heading{
    display: flex;
    flex-direction: column;
}
.inventory-details-view-container .heading .top{
    display: flex;
    gap:7px;
}



.inventory-details-view-container .row1 .modal-panel{
   
    overflow-y: auto;
}
.inventory-details-view-container .row1 .modal-panel.large{
    height: 1040px;
    overflow-y: auto;
}

.inventory-details-view-container .modal-panel .app-heading{
    margin-bottom:1em;
    margin-left: 13px;
    font-size: 17px;
}


.inventory-details-view-container .financial-items-container{
    display: flex;
    justify-content: space-between;
    padding:2em
}


.inventory-details-view-container .timeline-container{
    overflow: auto;
    height: 313px;
}


    .inventory-details-view-container .web-imprint-container {
        height:200px
    }

        .inventory-details-view-container .web-imprint-container .actions-container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 180px;
        }
            .inventory-details-view-container .web-imprint-container .actions-container .btn-action-stat {
                padding: 10px 20px;
                border: 1px solid #00A3ff2E;
                border-radius: 10px;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                color: #00A3ff;
                cursor: pointer;
            }

                .inventory-details-view-container .web-imprint-container .actions-container .btn-action-stat.selected {
                    background-color: #00A3ff2E;
                }

        .inventory-details-view-container .web-imprint-container .chart-container {
            position:relative;
            height: 200px;
        }
/* ----------- ENDING: /app/ui-components/view-manager/inventory/inventory-details-view/inventory-details-view.css */


/* ----------- STARTING: /app/ui-components/view-manager/inventory/inventory-vehicle-details-view/inventory-vehicle-details-view.css */
.inventory-vehicle-details-view-container{

}


.inventory-vehicle-details-view-container .recall{
    margin-bottom: 3em;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 300;
}

.inventory-vehicle-details-view-container .recall-label{
    opacity: .7;
    font-weight: 300;
}

.inventory-vehicle-details-view-container .recalls-container{
    margin-top: 2em;
    margin-left: 2em;
}

.inventory-vehicle-details-view-container .app-heading{
    margin-left: 2em;
}

.inventory-vehicle-details-view-container .component{
    font-size: 16px;
}

.inventory-vehicle-details-view-container .content-scrollable{
    height: calc(100vh - 200px);
    overflow-y: auto;
}
/* ----------- ENDING: /app/ui-components/view-manager/inventory/inventory-vehicle-details-view/inventory-vehicle-details-view.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-products/details-deal-products.css */
.details-deal-products-container{

}


.details-deal-products-container .top{
    margin-top:20px;
}


.details-deal-products-container .bottom{
    margin-top:20px;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-products/details-deal-products.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-info/details-deal-info.css */
.details-deal-info-container{

}


.details-deal-info-container .section{
    margin-top:20px;
}

.details-deal-info-container app-timeline{
    margin-top:20px
}

.details-deal-info-container .section-row{
    padding:8px 15px;
}
.details-deal-info-container .section-row.odd{
    background-color : var(--dark-boxed-background-hover);
    border-radius: 5px;;
}

.details-deal-info-container .section-row .left{
    display: inline-block;
    width: 170px;
}

.details-deal-info-container .section-row .right{
    display: inline-block;
}

.details-deal-info-container .heading{
    margin: 15px;
}

.details-deal-info-container .app-card{
    padding-top: 10px;
    padding-bottom: 10px;
}

.details-deal-info-container .spacer{
    height: 20px;
}

.details-deal-info-container .app-tabs-container{
    margin-top:20px;
    margin-bottom: 20px;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-info/details-deal-info.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-customers/details-deal-customers.css */
.details-deal-customers-container{

}



.details-deal-customers-container{
    padding: 1em;
}

.details-deal-customers-container .modal-subpanel{
    margin-top:1em;
}


.details-deal-customers-container .top-container{
    display: flex;
    gap:20px;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(211, 211, 211, 0.1);
}

.details-deal-customers-container .employee-id{
    opacity: .7;
    font-size:12px;
}

.details-deal-customers-container .bottom-container{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-direction: column;
    margin-left: 70px;
}


.details-deal-customers-container .modal-subpanel{
    padding:20px
}

.details-deal-customers-container .bottom-container .address,
.details-deal-customers-container .bottom-container .city-state{
    font-size: 13px;
    
}

.details-deal-customers-container .bottom-container .zip{
    opacity: .7;;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-customers/details-deal-customers.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-gl/details-deal-gl.css */
.details-deal-gl-container{

}

.details-deal-gl-container .deal-gl-entries-grid-container{
    margin-top: 40px;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-gl/details-deal-gl.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-employees/details-deal-employees.css */
.details-deal-employees-container{

}


.details-deal-employees-container .section{
    margin-top:20px;
}

.details-deal-employees-container app-timeline{
    margin-top:20px
}

.details-deal-employees-container .section-row{
    padding:8px 15px;
}
.details-deal-employees-container .app-card{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top:20px;
}

.details-deal-employees-container .app-tabs-container{
    margin-top:20px;
    margin-bottom: 20px;
}

.details-deal-employees-container .section-row .right{
    display: inline-block;
}

.details-deal-employees-container .section-row .left{
    display: inline-block;
    width: 170px;
}

.details-deal-employees-container  .section-row.odd{
    background-color : var(--dark-boxed-background-hover);
    border-radius: 5px;;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-employees/details-deal-employees.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-tradein/details-deal-tradein.css */
.details-deal-tradein-container{

}


.details-deal-tradein-container .top-container{
    display: flex;
    gap:20px;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(211, 211, 211, 0.1);
}


.details-deal-tradein-container .modal-subpanel{
    padding:10px
}

.details-deal-tradein-container .modal-subpanel{
    margin-top:2em;
}


.details-deal-tradein-container .bottom-container{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    flex-direction: row;
}

.details-deal-tradein-container .actions-container{
    margin-top: 30px;
}

.details-deal-tradein-container .bottom-container .metric .amount{
    font-size: 17px;
    text-align: center;
}

.details-deal-tradein-container .bottom-container .metric .amount-label{
    text-align: center;
    opacity: .6;
    font-size: 11px;
    margin-top: 10px;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-tradein/details-deal-tradein.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-salespeople/details-deal-salespeople.css */
.details-deal-salespeople-container{
    padding: 1em;
}

.details-deal-salespeople-container .modal-subpanel{
    margin-top:1em;
}


.details-deal-salespeople-container .top-container{
    display: flex;
    gap:20px;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(211, 211, 211, 0.1);
}

.details-deal-salespeople-container .employee-id{
    opacity: .7;
    font-size:12px;
}

.details-deal-salespeople-container .bottom-container{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.details-deal-salespeople-container .bottom-container .amount{
    font-size:20px;
    text-align: center;
}

.details-deal-salespeople-container .bottom-container .amount-label{
    text-align: center;
    opacity: .6;
    
    font-size: 11px;
    margin-top: 10px;
}

.details-deal-salespeople-container .modal-subpanel{
    padding:20px
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-salespeople/details-deal-salespeople.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-managers/details-deal-managers.css */


.details-deal-managers-container{
    padding: 1em;
}

.details-deal-managers-container .modal-subpanel{
    margin-top:1em;
}


.details-deal-managers-container .top-container{
    display: flex;
    gap:20px;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(211, 211, 211, 0.1);
}

.details-deal-managers-container .employee-id{
    opacity: .7;
    font-size:12px;
}

.details-deal-managers-container .bottom-container{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.details-deal-managers-container .bottom-container .amount{
    font-size:20px;
    text-align: center;
}

.details-deal-managers-container .bottom-container .amount-label{
    text-align: center;
    opacity: .6;
    
    font-size: 11px;
    margin-top: 10px;
}

.details-deal-managers-container .modal-subpanel{
    padding:20px
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-managers/details-deal-managers.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-gross/details-deal-gross.css */
.details-deal-gross-container{

}


.details-deal-gross-container .back-btn{
    z-index: 1;
    position: absolute;
    top: 50%;
}

.details-deal-gross-container .fwd-btn{
    z-index: 1;
    position: absolute;
    top: 50%;
    right:0;
    rotate: 180deg;
}

.details-deal-gross-container .deal-gross-content{
    margin-inline: 10px 10px;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-gross/details-deal-gross.css */


/* ----------- STARTING: /app/ui-components/modals/salesperson-profile/salesperson-profile-transactions/salesperson-profile-transactions.css */
.salesperson-profile-transactions-container{
    height: 40vh;
    padding-top:1em;
}

/* ----------- ENDING: /app/ui-components/modals/salesperson-profile/salesperson-profile-transactions/salesperson-profile-transactions.css */


/* ----------- STARTING: /app/ui-components/modals/salesperson-profile/salesperson-profile-chart/salesperson-profile-chart.css */
.salesperson-profile-chart-container{

}

.salesperson-profile-chart-container .chart-container{
    position: relative;
    height: 300px;
    margin-right:100px;
    margin-left:20px;
    margin-top:1em;
}
/* ----------- ENDING: /app/ui-components/modals/salesperson-profile/salesperson-profile-chart/salesperson-profile-chart.css */


/* ----------- STARTING: /app/ui-components/modals/salesperson-profile/salesperson-profile-others/salesperson-profile-others.css */
.salesperson-profile-others-wrapper{
    padding:15px;
}

.salesperson-profile-others-wrapper .teal-btn{
    margin-inline: 15px 20px;
}
.salesperson-profile-others-container{
    padding:20px 15px;
}


.salesperson-profile-others-container .salesperson-small{
    padding:5px 10px;
    margin-bottom: 5px;;
    border-radius: 8px;
    border:1px solid transparent;
}
.salesperson-profile-others-container .salesperson-small:hover{
    background-color: #273236;
    cursor:pointer;
    
}

.salesperson-profile-others-container .salesperson-small.selected{
    background-color: #273236;
    border:1px solid rgba(233, 233, 234, .23);
}

.salesperson-profile-others-container .salesperson-small .name-label{
    margin-left:15px;      
    font-size: 13px;
}
/* ----------- ENDING: /app/ui-components/modals/salesperson-profile/salesperson-profile-others/salesperson-profile-others.css */


/* ----------- STARTING: /app/ui-components/cells/parts/cell-parts-sale-types/cell-parts-sale-types.css */
.cell-parts-sale-types-container{
    padding-top:5px;    
 }
 
 
 
/* ----------- ENDING: /app/ui-components/cells/parts/cell-parts-sale-types/cell-parts-sale-types.css */


/* ----------- STARTING: /app/ui-components/cells/parts/cell-parts-invoice-no/cell-parts-invoice-no.css */
.cell-parts-invoice-no-container{

}

.cell-parts-invoice-no-container.voided{
    text-decoration: line-through;
}

/* ----------- ENDING: /app/ui-components/cells/parts/cell-parts-invoice-no/cell-parts-invoice-no.css */


/* ----------- STARTING: /app/ui-components/cells/service/cell-ro-gl-cost-sale/cell-ro-gl-cost-sale.css */
.cell-ro-gl-cost-sale-container{

}

/* ----------- ENDING: /app/ui-components/cells/service/cell-ro-gl-cost-sale/cell-ro-gl-cost-sale.css */


/* ----------- STARTING: /app/ui-components/cells/service/cell-ro-status/cell-ro-status.css */
.cell-ro-status-container{

}


/* ----------- ENDING: /app/ui-components/cells/service/cell-ro-status/cell-ro-status.css */


/* ----------- STARTING: /app/ui-components/cells/service/cell-ro-technicians/cell-ro-technicians.css */
.cell-ro-technicians-container{
    display: flex;
    padding-left: 17px;
}

/* ----------- ENDING: /app/ui-components/cells/service/cell-ro-technicians/cell-ro-technicians.css */


/* ----------- STARTING: /app/ui-components/cells/service/cell-extended-service-line-types/cell-extended-service-line-types.css */
.cell-extended-service-line-types-container{
    padding-top:5px;
}
/* ----------- ENDING: /app/ui-components/cells/service/cell-extended-service-line-types/cell-extended-service-line-types.css */


/* ----------- STARTING: /app/ui-components/cells/service/cell-ro-paytypes/cell-ro-paytypes.css */
.cell-ro-paytypes-container{
   padding-top:5px;
}



/* ----------- ENDING: /app/ui-components/cells/service/cell-ro-paytypes/cell-ro-paytypes.css */


/* ----------- STARTING: /app/ui-components/cells/service/cell-ro-gl-cost-sale-type/cell-ro-gl-cost-sale-type.css */
.cell-ro-gl-cost-sale-type-container{

}

/* ----------- ENDING: /app/ui-components/cells/service/cell-ro-gl-cost-sale-type/cell-ro-gl-cost-sale-type.css */


/* ----------- STARTING: /app/ui-components/cells/vehicles/cell-deal-salesperson/cell-deal-salesperson.css */
.cell-deal-salesperson-container{
    padding-left: 15px;
    display: flex;
    gap:7px
}


.salesperson-more-tooltip .salesperson-info{
    padding: 5px;
}
/* ----------- ENDING: /app/ui-components/cells/vehicles/cell-deal-salesperson/cell-deal-salesperson.css */


/* ----------- STARTING: /app/ui-components/cells/vehicles/cell-deal-customer/cell-deal-customer.css */
.cell-deal-customer-container{
    padding-left:17px;
    display: flex;
    gap:7px;
}

.cell-deal-customer-container .name.multiple:hover{
    font-weight: 400;
}

.customer-more-tooltip .customer-info{
    padding: 5px 5px;
}
/* ----------- ENDING: /app/ui-components/cells/vehicles/cell-deal-customer/cell-deal-customer.css */


/* ----------- STARTING: /app/ui-components/cells/vehicles/cell-deal-date/cell-deal-date.css */
.cell-deal-date-container{
    padding-left:15px;
    display: inline-block;
}


.deal-events-tooltip{
    width: 250px;
    opacity: 1 !important;
}

.deal-events-tooltip .tooltip-inner{
    max-width:250px;
    padding:20px
}
/* ----------- ENDING: /app/ui-components/cells/vehicles/cell-deal-date/cell-deal-date.css */


/* ----------- STARTING: /app/ui-components/cells/vehicles/cell-deal-tradeins/cell-deal-tradeins.css */
.cell-deal-tradeins-container{
    
}

/* ----------- ENDING: /app/ui-components/cells/vehicles/cell-deal-tradeins/cell-deal-tradeins.css */


/* ----------- STARTING: /app/ui-components/cells/vehicles/cell-deal-manager/cell-deal-manager.css */
.cell-deal-manager-container{
    padding-left: 18px;
}

/* ----------- ENDING: /app/ui-components/cells/vehicles/cell-deal-manager/cell-deal-manager.css */


/* ----------- STARTING: /app/ui-components/cells/vehicles/cell-deal-status/cell-deal-status.css */
.cell-deal-status-container{
    padding-left:15px;
}

/* ----------- ENDING: /app/ui-components/cells/vehicles/cell-deal-status/cell-deal-status.css */


/* ----------- STARTING: /app/ui-components/cells/cell-actionable/action-item/action-item.css */
.action-item-container{

}

/* ----------- ENDING: /app/ui-components/cells/cell-actionable/action-item/action-item.css */


/* ----------- STARTING: /app/ui-components/cells/inventory/cell-inventory-status/cell-inventory-status.css */
.cell-inventory-status-container{
    padding-left:15px;
}



/* ----------- ENDING: /app/ui-components/cells/inventory/cell-inventory-status/cell-inventory-status.css */


/* ----------- STARTING: /app/ui-components/cells/inventory/cell-inventory-stock/cell-inventory-stock.css */
.cell-inventory-stock-container{
    padding-left:15px;
}


/* ----------- ENDING: /app/ui-components/cells/inventory/cell-inventory-stock/cell-inventory-stock.css */


/* ----------- STARTING: /app/ui-components/cells/inventory/cell-days-age/cell-days-age.css */
.cell-days-age-container{

}

/* ----------- ENDING: /app/ui-components/cells/inventory/cell-days-age/cell-days-age.css */


/* ----------- STARTING: /app/ui-components/forms/autocomplete/users-autocomplete/users-autocomplete.css */
.users-autocomplete-container{
    position:relative;
}

    .users-autocomplete-container .users-list {
        position:absolute;
        left:10px;
        top: 50px;
    }

        .users-autocomplete-container .users-list .chat-user-item {
            cursor:pointer;
        }

/* ----------- ENDING: /app/ui-components/forms/autocomplete/users-autocomplete/users-autocomplete.css */


/* ----------- STARTING: /app/ui-components/forms/input/boxed/boxed-input.css */
.boxed-input > .boxed-content {
    margin-top: 10px;
    width: 100%;
    /*padding-right:38px;*/
}
input::placeholder {
    color: #56BEF8;
    opacity: 8; /* Firefox */
}
.boxed-input img {
    vertical-align: middle;
    position: relative;
   
    width:18px;
    height:18px;
}

.boxed-input.boxed {
    width: 100%
}

    .boxed-input.boxed:has(img) input {
        width: calc(100% - 26px);
    }

    .boxed-input.boxed.disable{
        cursor: not-allowed;
    }

.lg .boxed-input input {
    font-size: 18px;
}

.lg .boxed {
    height:50px
}

@media screen and (max-width: 1440px) {

    .lg .boxed-input input {
        font-size: 16px
    }

    .lg .boxed {
        height: 40px;
    }

    .boxed-input > .boxed-content {
        margin-top: 7px;
    }
}
/* ----------- ENDING: /app/ui-components/forms/input/boxed/boxed-input.css */


/* ----------- STARTING: /app/ui-components/forms/input/auto-grow-input/auto-grow-input.css */
.auto-grow-input-container{

}

/* ----------- ENDING: /app/ui-components/forms/input/auto-grow-input/auto-grow-input.css */


/* ----------- STARTING: /app/ui-components/forms/advanced/employee-select/employee-select.css */

.employee-select-container{
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: hidden;
}

.employee-select-container .item{
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 8px 40px 8px 20px;
    border-radius: 8px;
    border:1px solid transparent;
    background-color: #273236;
    align-items: center;
    flex:none;
    font-size: 13px;
    opacity: .9;
}
.employee-select-container .item:hover{
    cursor: pointer;
    opacity: 1;
}

.employee-select-container .item.selected{
    background-color: #394C52;
    border: 1px solid rgba(233, 233, 234, .54);
    opacity: 1;
}

/* ----------- ENDING: /app/ui-components/forms/advanced/employee-select/employee-select.css */


/* ----------- STARTING: /app/ui-components/forms/switch/multi-way-switch/multi-way-switch.css */
.multi-way-switch-container{

}


.multi-way-switch-container .item{
    padding-inline: 20px;
    align-content: center;
    cursor: pointer;
    margin: 5px;
    
}

.multi-way-switch-container .item.selected{
    background-color: #224355;
    border-radius: 8px;
    transition: background-color ease-in-out .2s;
    color:#00A3FF;
}
/* ----------- ENDING: /app/ui-components/forms/switch/multi-way-switch/multi-way-switch.css */


/* ----------- STARTING: /app/ui-components/forms/switch/boxed/boxed-switch.css */
.boxed-switch   .boxed-content{
    margin-top: 10px;
    display: flex;
}

.boxed-switch   app-switch{
    margin-left: 1em;
    vertical-align: text-bottom;
}
/* ----------- ENDING: /app/ui-components/forms/switch/boxed/boxed-switch.css */


/* ----------- STARTING: /app/ui-components/forms/buttons/close/btn-close.css */
.btn-close {
    height:50px;
    width:50px;
}

.btn-close.small {
    height: 30px;
    width: 30px;
}



.btn-circle {
    height: 50px;
    width: 50px;
    border: 1px solid var(--dark-border-color);
    border-radius:50%;
    position: relative;
    cursor:pointer;
}
    .btn-circle:hover {
        background-color: var(--dark-border-color)
    }

    .btn-circle img {
        height: 11px;
        width: 11px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }

    .btn-close.small > .btn-circle{
    height: 30px;
    width: 30px;
}

    .btn-close.small > .btn-circle img{
    height: 9px;
    width: 9px;
}


/* ----------- ENDING: /app/ui-components/forms/buttons/close/btn-close.css */


/* ----------- STARTING: /app/ui-components/forms/buttons/reload/btn-reload.css */
.btn-reload{
    display: inline-block;
    height:43px;
    width:54px;
    cursor:pointer;
    min-width: 43px;
    min-height: 43px;
    padding: 10px 14px;
}

/* ----------- ENDING: /app/ui-components/forms/buttons/reload/btn-reload.css */


/* ----------- STARTING: /app/ui-components/forms/buttons/button-dropdown/button-dropdown.css */
.button-dropdown-container{
    display: flex;
    align-items: center;
    gap: 15px;
    padding-inline: 30px;
    cursor: pointer;
}

.button-dropdown-container img{
    height: 15px;
    width: 15px;
}


.dropdown-list-container{
    display: flex;
    flex-direction: column;
   
}

.dropdown-list-container .separator{
    height: 1px;
    background-color: #434f51;
}
.dropdown-list-container .action{
    padding: 10px 20px;
    width: 300px;
    display: flex;
    gap:15px;
    align-items: center;
}
.dropdown-list-container .action img{
    height: 15px;
    width: 15px;
    
}

.dropdown-list-container .action:hover{
    cursor: pointer;
    background-color: #293a3d;
}

/* ----------- ENDING: /app/ui-components/forms/buttons/button-dropdown/button-dropdown.css */


/* ----------- STARTING: /app/ui-components/forms/buttons/close-no-border/btn-close-no-border.css */
.btn-close-no-border {
    height:50px;
    width:50px;
}

.btn-circle-no-border {
    height: 50px;
    width: 50px;
    border-radius:50%;
    position: relative;
    cursor:pointer;
}
    .btn-circle-no-border:hover {
        background-color: var(--dark-background-hover);
    }

    .btn-circle-no-border img {
        height: 20px;
        width: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }

/* ----------- ENDING: /app/ui-components/forms/buttons/close-no-border/btn-close-no-border.css */


/* ----------- STARTING: /app/ui-components/data-charts/bar-line-value/multi-bar-line-value/multi-bar-line-value.css */
.multi-bar-line-value{
    
}

.multi-bar-line-value .bar-line-value{
    margin-bottom: 16px;
}
/* ----------- ENDING: /app/ui-components/data-charts/bar-line-value/multi-bar-line-value/multi-bar-line-value.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-finance-manager-products/preview-finance-manager-products.css */
.preview-finance-manager-products-container {
    display: flex;
    gap: 20px;
    flex-direction: column;
    margin-left: 60px;
    margin-right: 30px;
}

    .preview-finance-manager-products-container .row1{
        display: flex;
        flex-direction: row;        
    }
    .preview-finance-manager-products-container .line {
        height:2px;
        border-bottom: 1px solid lightgray;
        opacity: .2;
    }

        .preview-finance-manager-products-container .row1 .number-viewer-container {
            font-size: 22px;
        }

        .preview-finance-manager-products-container .row1 .group {
            flex:1
        }

    .preview-finance-manager-products-container .subtitled-amount-container {
        gap: 0px;
    }
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-finance-manager-products/preview-finance-manager-products.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-finance-manager-institution-general/preview-finance-manager-institution-general.css */
.preview-finance-manager-institution-general-container{
    display: flex;
    flex-direction: row;    
    margin-left: 1em;
    margin-right: 1em;
    gap: 1em
}

.preview-finance-manager-institution-general-container .left{
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 55;
}

.preview-finance-manager-institution-general-container .right{
    display: flex;
    flex-direction: column;
    flex: 45;
    gap: 5px;
}

.preview-finance-manager-institution-general-container .row1 .number {
    margin-right:.5em
}

.preview-finance-manager-institution-general-container  .figures {
    margin-top: 20px;
    gap: 5px;
    display: flex;
}

.preview-finance-manager-institution-general-container .figures .subtitled-amount-container {
        gap:0px
    }

    .preview-finance-manager-institution-general-container .bar-line-value .line-value .label {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .preview-finance-manager-institution-general-container .right .top-container{
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-finance-manager-institution-general/preview-finance-manager-institution-general.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-ro/preview-ro.css */
.preview-ro-container{
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 20px;
}

.preview-ro-container .heading{
    font-size: 18px;
    display: flex;
    gap: 10px;
}

.preview-ro-container .subheading{
    display: flex;
    gap: 10px;
    font-size: 12px;
    opacity: .7;
    font-weight: 400;
}

.preview-ro-container .gross .heading{
    font-size: 12px;
    opacity: .7;
    font-weight: 400;
}
.preview-ro-container .gross .number{
    font-size: 40px;
}

.preview-ro-container .types{
    display: flex;
    flex-direction: row;
    gap: 10px;
}



/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-ro/preview-ro.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-parts-invoice/preview-parts-invoice.css */
.preview-parts-invoice-container{
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 20px;
}

.preview-parts-invoice-container .heading{
    font-size: 18px;
    display: flex;
    gap: 10px;
}

.preview-parts-invoice-container .subheading{
    display: flex;
    gap: 10px;
    font-size: 12px;
    opacity: .7;
    font-weight: 400;
}

.preview-parts-invoice-container .subheading > .lines, .preview-parts-invoice-container .subheading > .parts{
    flex: 1
}

.preview-parts-invoice-container .values {
    display: flex;
    flex-direction: row;
}

.preview-parts-invoice-container .gross, .preview-parts-invoice-container .margin {
    flex: 1
}

.preview-parts-invoice-container .gross .heading, .preview-parts-invoice-container .margin .heading{
    font-size: 12px;
    opacity: .7;
    font-weight: 400;
    
}
.preview-parts-invoice-container .gross .number, .preview-parts-invoice-container .margin .number{
    font-size: 40px;
    flex: 1
}

.preview-parts-invoice-container .types{
    display: flex;
    flex-direction: row;
    gap: 10px;
}



/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-parts-invoice/preview-parts-invoice.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-gl-entry/preview-gl-entry.css */
.preview-gl-entry-container{
    margin: 1em;
}


.preview-gl-entry-container .gl-entry-container{
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-top: 2em;
}

.preview-gl-entry-container .gl-entry-container .left{
    height: 200px;
    overflow-y: auto;
    padding-left: 5px;
}

.preview-gl-entry-container .gl-entry-container .right{
    height: 200px;
    overflow-y: auto;
    width: 350px;
    /* padding-top: 40px; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.preview-gl-entry-container .gl-entry-container .right .row1{
    display: flex;
    justify-content: space-around;
}


.preview-gl-entry-container .gl-entry-container .right .row2{

    border-top: 1px solid #d3d3d326;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 40px;
}


.preview-gl-entry-container .gl-entry-container .right .row2 .item{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap:10px
}
.preview-gl-entry-container .gl-entry-container .right .row2 .item .main{

    font-size: 18px;
}

.preview-gl-entry-container .gl-entry-container .right .row2 .item .subtitle{
    opacity: .5;
    font-size: 13px;
}

.preview-gl-entry-container .gl-entry-container .right .row1 .number-viewer-container{
    font-size: 28px;
}
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-gl-entry/preview-gl-entry.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-sales-people/preview-sales-people.css */
.preview-sales-people-container{
    display: flex;
    
    flex-direction: column;
    padding: 0px 10px 0px 20px;
    justify-content: space-between;
    height: 250px;
}

.preview-sales-people-container .units .count{
    margin-left: 10px;
}

.preview-sales-people-container .units{
    font-size: 18px;
}


.preview-sales-people-container .breakdown-counters{
    display: flex;
    gap: 20px;
}

.preview-sales-people-container .row3{
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: baseline;
}
.preview-sales-people-container .row4{
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: baseline;
}


.preview-sales-people-container .subtitled-amount-container{
    gap: 5px;
    align-items: start;
}


.preview-sales-people-container .subtitled-amount-container .amount-label{
    font-size: 12px;
}

.preview-sales-people-container subtitled-amount.large .amount{
    font-size: 24px;
}
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-sales-people/preview-sales-people.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-finance-manager-institution-specific/preview-finance-manager-institution-specific.css */
.preview-finance-manager-institution-specific-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 1em;
    margin-right: 1em;
}

.preview-finance-manager-institution-specific-container .row1{
    display: flex;
    flex-direction: row;    
}

.preview-finance-manager-institution-specific-container .row1 .group{
    flex: 1
}


.preview-finance-manager-institution-specific-container .subtitled-amount-container{
    gap:0
}
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-finance-manager-institution-specific/preview-finance-manager-institution-specific.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-finance-manager/preview-finance-manager.css */
.preview-finance-manager-container{
    display:flex;
    flex-direction:row;

}

    .preview-finance-manager-container .section {
        flex: 5;
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 10px 20px;
    }
        .preview-finance-manager-container .section.right {
            flex:4;
            gap:15px;
        }


    .preview-finance-manager-container .figures {
        margin-top: 10px;
        gap: 5px;
        display: flex;
    }

        .preview-finance-manager-container .figures .subtitled-amount-container {
            gap:0px
        }

    .preview-finance-manager-container .row1 .number {
        margin-right:.5em
    }

    .preview-finance-manager-container .section.right number-viewer {
        display: inline-block;
        margin-left: 1em;
    }

    .preview-finance-manager-container .top-container {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .preview-finance-manager-container .bar-line-value .line-value .label {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-finance-manager/preview-finance-manager.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-financial-current-period/preview-financial-current-period.css */
#preview-financial-current-period {}

#preview-financial-current-period .top-section {
    display: flex;
    flex-direction: row;
    align-self: start;
    border-bottom: 1px solid #FFFFFF15;
    margin: 0px 20px;
    padding: 13px 0;
}

#preview-financial-current-period .top-section .left,
#preview-financial-current-period .top-section .right,
#preview-financial-current-period .visuals-section .left,
#preview-financial-current-period .visuals-section .right {
    display: flex;
    flex-direction: column;
}

#preview-financial-current-period .top-section .left .line-text {
    font-size: 12px;
    font-weight: 300;
    line-height: 14.63px;
    letter-spacing: 0.08em;
    text-align: left;
    color: #FFFFFF99;
}

#preview-financial-current-period .top-section .left .month-info,
#preview-financial-current-period .top-section .right .period-comparison {
    display: flex;
    flex-direction: row;
}

#preview-financial-current-period .top-section .left {
    flex-grow: 2;
    gap: 8px;
}


#preview-financial-current-period .top-section .left .month-info {}

#preview-financial-current-period .top-section .left .month-info .period {
    font-size: 19px;
    font-weight: 300;
    line-height: 23.16px;
    letter-spacing: 0.08em;
    text-align: left;
    flex-grow: 1;
}


#preview-financial-current-period .top-section .left .month-info .value {
    font-size: 20px;
    font-weight: 300;
    line-height: 24.38px;
    text-align: left;
    flex-grow: 1;
}

#preview-financial-current-period .top-section .right {
    flex-grow: 1;
    gap: 8px;
}


#preview-financial-current-period .top-section .right .period-comparison .period {
    font-size: 12px;
    font-weight: 300;
    /* line-height: 14.63px; */
    letter-spacing: 0.08em;
    text-align: left;
    color: #FFFFFF99;
    margin-right: 10px;
}

#preview-financial-current-period .top-section .right .period-comparison > number-viewer{
    font-size: 12px;
    font-weight: 400;
}

#preview-financial-current-period .top-section .right .period-comparison > number-viewer.is-positive{
    color: #6BE37F !important
}

#preview-financial-current-period .visuals-section {
    display: flex;
    flex-direction: row;
    margin: 0px 20px;
    padding: 13px 0;
    gap: 32px;
}
#preview-financial-current-period .visuals-section .left{
    flex-grow: 1.5;
}

#preview-financial-current-period .visuals-section .left .bar-line-value .line-value .label {
    width: 70px;
}

#preview-financial-current-period .visuals-section .right {
    flex-grow: 1;
}

#preview-financial-current-period .visuals-section .right .bar-line-value .line-value .label {
    width: 90px
}

 .app-popover:not(.with-arrow) #preview-financial-current-period .arrow {
    display: block;
}

#preview-financial-current-period .arrow-up-down-container{
    margin-top: 4px;
    margin-right: 6px;
}



#preview-financial-current-period .arrow.up{
    filter: drop-shadow(0 1000px 0 var(--bar-line-positive));
    transform: translateY(-1000px);
}

#preview-financial-current-period .arrow.down{
    filter: drop-shadow(0 1000px 0 var(--bar-line-negative));
    transform: translateY(-1000px);
}

#preview-financial-current-period .previous-values {
    margin-bottom: 39px;
}

#preview-financial-current-period .forecast-value .bar-line-value .bar-percentage .fill.positive
{
    background-image: linear-gradient(90deg, rgb(95, 215, 255) 5%, rgb(20, 137, 255) 95%);
}


#preview-financial-current-period .forecast-value .bar-line-value .line-value .label,
#preview-financial-current-period .forecast-value.positive .bar-line-value .line-value .number
{
    background: linear-gradient(90deg, rgb(95, 215, 255) 5%, rgb(20, 137, 255) 95%) text !important;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
    
}

#preview-financial-current-period .forecast-value .bar-line-value .line-value .label{}

#preview-financial-current-period .forecast-value .bar-line-value .line-value .label::after {
    content: " ";
    background-image: url("/assets/images/smart-forecast.png");
    background-size: contain;
    background-repeat: no-repeat;  
    position: fixed;
    width: 14px;
    height: 11px;
    margin-left: 5px;
}
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-financial-current-period/preview-financial-current-period.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-inventory/preview-inventory.css */
.preview-inventory-wrapper-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-right: 10px;
    margin-left: 10px;
}

.preview-inventory-wrapper-container .top-main-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    

}

.preview-inventory-wrapper-container .sub-label{
    font-size: 12px;
    opacity: .7;
    align-content: center;
}

.preview-inventory-wrapper-container .top-container{
    flex:3
}

.preview-inventory-wrapper-container .bottom-container{
    display: flex;
    flex-direction: column;
    flex: 5;
    gap: 10px;
}

.preview-inventory-wrapper-container .custom-row{
    display: flex;
}

.preview-inventory-wrapper-container .bottom-container .sub-container{

    display: flex;
    flex-direction: row;
    flex:9;
    gap: 10px;
}
.preview-inventory-wrapper-container .bottom-container .sub-container.right{
    flex: 10;
}
.preview-inventory-wrapper-container .top-container number-viewer{
    font-size: 22px
}


.preview-inventory-wrapper-container .bottom-container number-viewer{
    font-size: 16px;
}

.preview-inventory-wrapper-container .bottom-container inventory-age{
    font-size: 16px;
}

.preview-inventory-wrapper-container .chart-container{
    height: 140px;
    position: relative;
    
}
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-inventory/preview-inventory.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-trend-chart/preview-trend-chart.css */
.preview-trend-chart-container{

}

/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-trend-chart/preview-trend-chart.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-advisor/preview-advisor.css */
.preview-advisor-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 245px;
    margin-left: 20px;
}

.preview-advisor-container .row1{
    font-size: 18px;
    display: flex;
    gap:10px
}

.preview-advisor-container .row1 .app-heading{
    font-weight: 300;
}

.preview-advisor-container .row2{
    display: flex;
    gap: 10px;
}

.preview-advisor-container .row3{
    display: flex;
    gap:50px
}


.preview-advisor-container .row4{
    display: flex;
    gap:50px
}

.preview-advisor-container .row3 .amount{
    font-size: 24px;
}

.preview-advisor-container .subtitled-amount-container{
    gap:3px
}


.preview-advisor-container .row4 .amount{
    font-size: 21px;
}

.preview-advisor-container .amount-label{
    letter-spacing: .08em;
    font-weight: 200;
}

.preview-advisor-container .row4 .amount-label{
    font-size: 12px;
}
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-advisor/preview-advisor.css */


/* ----------- STARTING: /app/ui-components/previews/wrappers/preview-deal/preview-deal.css */
.preview-deal-container{
    padding:1em;
    height: 274px;
}

.preview-deal-container .vehicle-label{
    max-width: 180px;
}
.preview-deal-container .content-container{
    display: flex;
    gap: 20px
}

.preview-deal-container .content-container .left-side{
    flex: 70;
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.preview-deal-container .content-container .right-side{
    flex: 30;
    position: relative;
}
.preview-deal-container .content-container .right-side .timeline-container{
    height: 240px;
    overflow-y: auto;
    padding-left: 5px;
    padding-bottom: 20px;
}

.preview-deal-container .content-container .right-side .shadow{
    height: 30px;
    position: absolute;
    bottom: 0;
    background-image: linear-gradient(360deg, #1c2224, transparent);
    width: 100%;
  
}

.preview-deal-container .content-container .left-side .heading{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    letter-spacing: .07em;
}

.preview-deal-container .content-container .left-side .heading .miles{
    text-wrap: nowrap;
}

.preview-deal-container .content-container .left-side .heading1{
    display: flex;
    flex-direction: row;
    gap: 10px;
    opacity: .7;
    align-items: center;
    letter-spacing: .07em;
}

.preview-deal-container .content-container .heading3{
    display: flex;
    justify-content: center;    
    align-items: center;
    gap: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.preview-deal-container .content-container .gross-container{
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    align-items: center;
    padding: 10px;
    background-color: #1f262b;
    border-radius: 8px;
    gap:5px
}

.preview-deal-container .content-container .gross-container .amount{
    font-size: 20px;
}

.preview-deal-container .content-container .gross-container .amount-label{

}

.preview-deal-container .content-container .heading4{
    display: flex;
    flex-direction: column;
    gap:10px;
}

.preview-deal-container .content-container .heading4 .personel{
    display: flex;
    gap:7px;
    align-items: center;
    letter-spacing: .08em;
}

.preview-deal-container .content-container .heading5{
    display: flex;
    gap: 10px;
}

.preview-deal-container .content-container .heading4 .personel .personel-label{
    opacity: .5;
    text-wrap: nowrap;
}


.preview-deal-container .content-container .heading4 .personel .more{
    color: var(--font-hint-color);
    padding: 1px 3px;
}

.preview-deal-container .content-container .heading4 .personel .more:hover{
    
    background-color: #20282b;
    border-radius: 5px;    
    cursor: default;
}

.preview-deal-container .content-container .heading4 .tradein-label{
    opacity: .5;
}

.preview-deal-container .tradein-container{
    cursor: default;
}

.trade-in-popover .metrics-container{
    display: flex;
    gap: 30px;
    padding: 1em;
    padding-top: 1.5em;
}
.trade-in-popover .metrics-container .metric .amount{
    font-size: 16px;
}
.trade-in-popover .metrics-container .metric .amount-label{
    font-size: 12px;
    opacity: .5;
}

.trade-in-popover .tooltip-inner{
    max-width: initial;
}
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-deal/preview-deal.css */


/* ----------- STARTING: /app/ui-components/date/date-range-picker/boxed-date-range-picker/boxed-date-range-picker.css */
.boxed-date-range-picker-container{
    width:300px;
    display:inline-block;
    vertical-align:middle;
    padding-left: 10px;
    align-content: center;
    cursor: pointer;
}

.app-date-range-picker {
    font-family:"Montserrat";
    font-size:14px;
    font-weight:300;
}

    .app-date-range-picker.daterangepicker {
        background-color: var(--dark-background);
        border: 1px solid var(--dark-border-color);
        padding: 30px;
        border-radius: 12px;
    }

        .app-date-range-picker.daterangepicker.show-ranges.ltr .drp-calendar.left {
            border-left:none;
        }

        .app-date-range-picker.daterangepicker .drp-buttons {
            border-top: none;
        }

        .app-date-range-picker.daterangepicker .calendar-table {
            background-color: var(--dark-background);
        }


        .app-date-range-picker.daterangepicker td.in-range::before {
            height:20px;
            border:  1px solid red;
        }
        .app-date-range-picker.daterangepicker td.in-range {
            
            color: var(--dark-color);            
            background-image: linear-gradient(#00a3ff38, #00a3ff38);
            color: var(--dark-color);
            background-color: transparent;
            background-size: 100% 21px;
            background-position-y: 5px;           
            background-repeat: no-repeat;                        
        }


        .app-date-range-picker.daterangepicker td.active {
            background-color: var(--font-hint-color);
            border-radius: 50%;
            box-shadow: 0px 3px 3px 0px #7CEEF540;
        }
        .app-date-range-picker.daterangepicker .calendar-table td {
            line-height: 22px;
            border: transparent;
        }
            .app-date-range-picker.daterangepicker .calendar-table td:hover {
                background-color: #00a3ff87;
                border-radius: 50%;
            }

            .app-date-range-picker.daterangepicker .calendar-table td.off {
                background-color: var(--dark-background);
                color: var(--dark-color);
                opacity: .5;
            }
                .app-date-range-picker.daterangepicker .calendar-table td.off.ends.active.end-date.available {
                    background-color: #00a3ff87;
                }
                .app-date-range-picker.daterangepicker .calendar-table td.off.ends.active.start-date.available {
                    background-color: #00a3ff87;
                }
                .app-date-range-picker.daterangepicker .calendar-table th.prev.avaliable {
                    color: var(--font-hint-color);
                }
            .app-date-range-picker.daterangepicker .calendar-table th.prev.avaliable:hover {
                border: 1px solid var(--dark-border-color);
                border-radius: 50%;
            }

        .app-date-range-picker.daterangepicker .calendar-table {
            border: none;
            padding-right: 20px;
            padding-left:20px;
        }


        .app-date-range-picker.daterangepicker .drp-calendar.left .calendar-table {
            
        }

        .app-date-range-picker.daterangepicker .calendar-table thead th{
            font-weight: 500;
        }

        .app-date-range-picker.daterangepicker .ranges {
            padding-right: 30px;
            margin-right: 0px;
            border-right: 1px solid var(--dark-tree-line);
        }


            .app-date-range-picker.daterangepicker .ranges li {
                display: inline-block;
                margin-top:5px;
            }
            .app-date-range-picker.daterangepicker .ranges li:hover {
                background-color: #29435063;
            }
            .app-date-range-picker.daterangepicker .ranges li.active {
                color: var(--font-hint-color);
                border-radius:5px;
                background-color: #294350;
            }

            .app-date-range-picker.daterangepicker td.available:hover, .daterangepicker th.available:hover{
                background-color: #13425c;
                border-radius: 50%;
            }

            .app-date-range-picker.daterangepicker .calendar-table .next span, .app-date-range-picker.daterangepicker .calendar-table .prev span {
                border-color: solid var(--font-hint-color);
                color:var(--font-hint-color)
            }

            .app-date-range-picker.daterangepicker .calendar-table th.prev.available:hover{
                background-color: var(--dark-background-light-hover);
                /*border-color: var(--dark-border-color);*/
                border-radius: 50%;
            }
            .app-date-range-picker.daterangepicker .calendar-table th.next.available:hover{
                background-color: var(--dark-background-light-hover);
                /*border-color: var(--dark-border-color);*/
                border-radius: 50%;
            }

            .app-date-range-picker.daterangepicker .drp-selected{
                display: none;
            }

            .app-date-range-picker.daterangepicker .cancelBtn, .app-date-range-picker.daterangepicker .applyBtn{
                padding: 6px 30px;
                font-weight: 500;
            }

.app-date-range-picker .image-container{
    margin-left: 5px;
}
.app-date-range-picker .from {
    margin-left: 35px;
    border-right: 1px solid var(--dark-background-light-hover);
}
.app-date-range-picker .to{
    margin-left: 20px;
}

.app-date-range-picker .top{
    font-size: 11px;
    font-weight: 500;
    margin-bottom: -4px;
}

.app-date-range-picker .bottom{
    opacity: .7;;
}

.app-date-range-picker .from .bottom{
    padding-right: 20px;
}

.boxed-date-range-picker-container{
    position: relative;
}

.boxed-date-range-picker-container .facade{
    margin-top:4px;
}
.boxed-date-range-picker-container input{
    position: absolute;
    z-index: 1;
    cursor: pointer;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
}
/* ----------- ENDING: /app/ui-components/date/date-range-picker/boxed-date-range-picker/boxed-date-range-picker.css */


/* ----------- STARTING: /app/ui-components/viewers/deal-financials-tree/financials-tree-box/financials-tree-box.css */
.financials-tree-box-container{

}


.financials-tree-box-container .box{
    min-width: 105px;
    padding: 3px 10px;     
    background-color: #273539;
    border-radius: 7px;
}
.financials-tree-box-container .box .divider{
    margin: 5px 5PX;
    height: 1px;
    border-top: #ffffff12 solid 1px;
}

.financials-tree-box-container .box .title{
    font-size: 11px;
    font-weight: 400;
    text-align: right;
}

.financials-tree-box-container .box .amount{
    font-weight: 200;
    font-size: 12px;
    opacity: .9;
    text-align: right;
}

.financials-tree-box-container .box.empty .amount{
    opacity: .3;
}


.financials-tree-box-container .box.empty .title{
    opacity: .3;
}
/* ----------- ENDING: /app/ui-components/viewers/deal-financials-tree/financials-tree-box/financials-tree-box.css */


/* ----------- STARTING: /app/ui-components/viewers/deal-financials-tree/financials-tree-box-simple/financials-tree-box-simple.css */
.financials-tree-box-simple-container{

}

/* ----------- ENDING: /app/ui-components/viewers/deal-financials-tree/financials-tree-box-simple/financials-tree-box-simple.css */


/* ----------- STARTING: /app/ui-components/notes/viewer/chat/note-chat.css */
.chat-container {
    
    height: 88vh;
    width: 450px;
    
}

.notes-sidedrill-container .notes-conversation {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100vh - 260px);
    margin-top: 35px;
    margin-bottom: 40px;
}

.notes-header .back{
    
}

.notes-header users-ribbon {
    cursor: pointer;
}

.notes-header .users-labels {
    margin-left: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 19.64px;
    line-height: 24px;
    width: 290px;
}

.chat-container .note-container {
   
    margin-top:30px
}

.note-container user-icon {
    display:inline-block;
    vertical-align:bottom;
}
.note-container .message-container {
    display: inline-block;
    vertical-align: bottom;
    background-color: #365775;
    border-radius: 10px 10px 10px 0;
    padding: 35px 15px;
    width: 370px;
}

.note-container.fake{
    opacity: .3;
}

.note-container .note-message-triangle {
    width: 15px;
    height: 15px;
    background-color: #365775;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -3px;
    position:relative;    
}
.note-message-triangle .over {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: var(--dark-background-light);
    border-radius: 0px 0px 1000px 0px;
}

.note-container .message-text {
    margin-top: 20px;
    font-weight: 400;
    color: rgba(255,255,255,.7);
}

.note-container .message-title {
    font-weight:400;
}

.note-container .message-time {
    font-weight: 400;
    font-size: 11px;
    margin-top: -18px;
}

.chat-container .notes-submit{
   
}

.chat-container .notes-large-input {
    border: 1px solid var(--dark-border-color);
    border-radius: 10px;
    padding: 10px;
}

.notes-large-input button {
    width: 100px;
    margin: auto;
    margin-right: 0;
}

.notes-large-input textarea {
    background-color: var(--dark-background-light) !important;
    color: var(--dark-color) !important;
    border: 0px;
    font-size: 17px;
    font-weight: 500;
    resize: none;
}
    .notes-large-input textarea::placeholder {
        opacity:0.4;
    }
    .notes-large-input textarea:focus {
        border-color: none;
        box-shadow: none;
    }

    .notes-large-input textarea:focus {
        border-color: none;
        box-shadow: none;
    }
.chat-container .users-autocomplete {
    position: absolute;
    bottom: 120px;
    left: 10px;
    border: 1px solid var(--dark-border-color);
    border-radius: 10px;
    padding: 10px 5px 10px 5px;
    background-color: var(--dark-background-light);
}

    .chat-container .users-autocomplete .chat-user-container {
        cursor: pointer;
    }

    
.resizable-slide-panel {
    box-shadow: 0px 0px 30px 0px rgba(255,255,266,0.5);
    background-color: var(--dark-background-light)
}

.drilldown-panel-tabbed .button-container {
    padding: 20px 20px 0 10px;
}

.drilldown-notes-wraper {
    
}

.notes-sidedrill-container {
  
   padding: 20px 20px 0px 20px;
}


    .notes-sidedrill-container .notes-submit {
       
    }

    .notes-header{
        margin-top: 7px;
    }
/* ----------- ENDING: /app/ui-components/notes/viewer/chat/note-chat.css */


/* ----------- STARTING: /app/ui-components/view-manager/parts/parts-invoice-details-view/parts-invoice-cost-sale-chart/parts-invoice-cost-sale-chart.css */
.parts-invoice-cost-sale-chart-container{
    height: 290px;
    margin-right:40px;
    position: relative;
}

/* ----------- ENDING: /app/ui-components/view-manager/parts/parts-invoice-details-view/parts-invoice-cost-sale-chart/parts-invoice-cost-sale-chart.css */


/* ----------- STARTING: /app/ui-components/view-manager/service/ro-details-view/ro-details-gross-chart/ro-details-gross-chart.css */
.ro-details-gross-chart-container{
    height: 290px;
    margin-right:40px;
    position: relative;
}

/* ----------- ENDING: /app/ui-components/view-manager/service/ro-details-view/ro-details-gross-chart/ro-details-gross-chart.css */


/* ----------- STARTING: /app/ui-components/view-manager/service/ro-details-view/ro-parts-invoices/ro-parts-invoices.css */
.ro-parts-invoices {}


.ro-parts-invoices .content-container {}

.ro-parts-invoices .parts-invoice-tabs {
    border-radius: 10px;
    height: 320px;
    padding: 15px 0px 15px 0px;
    background-color: #242c3059;
    overflow-y: auto;
}

.ro-parts-invoices .parts-invoice-tabs .parts-invoice {
    padding: 10px 20px;
    cursor: pointer;
}

.ro-parts-invoices .parts-invoice-tabs .parts-invoice.selected {
    background-color: #d9d9d908;
}


.ro-parts-invoices .parts-invoice-tabs .parts-invoice:hover:not(.selected) {
    background-color: #D9D9D905;
}


.ro-parts-invoices .invoice-content {}


.ro-parts-invoices .invoice-details {
    display: flex;
    flex-direction: column;
    height: 305px;
    overflow-y: auto;
}

.ro-parts-invoices .invoice-details .invoice-no > .invoice{
    font-weight: 600;
    font-size: 16px;
}

.ro-parts-invoices .invoice-details .invoice-no > parts-sale-type-badge{
    vertical-align: middle;
}

.ro-parts-invoices .invoice-details .po-section .po-label {
    opacity: .5;
}

.ro-parts-invoices .invoice-details .parts-count-section {}

.ro-parts-invoices .invoice-details .parts-count-section .count {
    font-size: 26px;
    text-align: center;
}


.ro-parts-invoices .invoice-details .parts-count-section .parts-label {
    font-size: 16px;
    opacity: .5;
    text-align: center;
}


.ro-parts-invoices .invoice-details .row2 {
    display: flex;
    column-gap: 40px;
    align-items: center;
    flex-grow: 1;
}


.ro-parts-invoices .invoice-details .info-section {
    width: 200px;
    display: flex;
    flex-direction: column;
    row-gap: 34px;
}

.ro-parts-invoices .invoice-details .info-section .sale-type-section,
.ro-parts-invoices .invoice-details .info-section .po-section {
    /* border-bottom: 1px solid #ffffff1c;
    padding-bottom: 10px; */
}

.ro-parts-invoices .invoice-details .date-section {}
/* ----------- ENDING: /app/ui-components/view-manager/service/ro-details-view/ro-parts-invoices/ro-parts-invoices.css */


/* ----------- STARTING: /app/ui-components/view-manager/inventory/inventory-details-view/inventory-deal/inventory-deal.css */
.inventory-deal-container{
    margin-left: 15px;
}


.inventory-deal-container .deal-info-container{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top:25px;
}

.inventory-deal-container .row1{
    display: flex;
    gap:10px;
    align-items: center;
}

.inventory-deal-container .spacer{
    width: 80%;
}

.inventory-deal-container .row1 .dealno{
    font-size: 15px;
    letter-spacing: .07em;
    opacity: .8;
}
.inventory-deal-container .row1{
    font-size:11px
}

.inventory-deal-container .row2{
    font-size: 10px;
}
.inventory-deal-container .row2 .sp-label{
    opacity: .5;
    letter-spacing: .07em;
    font-size: 10px;
}

.inventory-deal-container .row3{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.inventory-deal-container .row3-2{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.inventory-deal-container .super-label{
    font-size: 12px;
    letter-spacing: .05em;
    opacity: .5;
}

.inventory-deal-container .row3-1 .amount{
    font-size: 33px;
    margin-top:5px
}

.inventory-deal-container .row3-2{
    display: flex;
    flex-direction: row;
    gap: 30px
}

.inventory-deal-container .row3-2 .date{
    font-size: 15px;
    opacity: .8;
    margin-top: 5px;
}
/* ----------- ENDING: /app/ui-components/view-manager/inventory/inventory-details-view/inventory-deal/inventory-deal.css */


/* ----------- STARTING: /app/ui-components/view-manager/inventory/inventory-details-view/inventory-ros/inventory-ros.css */
.inventory-ros-container{

}


.inventory-ros-container .repair-order.selected{
    background-color: #d9d9d908;
    
}
.inventory-ros-container .repair-order{    
    padding: 10px 20px;
    cursor: pointer;      
}

.inventory-ros-container .repair-order:hover:not(.selected){
    background-color: #D9D9D905;
}

.inventory-ros-container .ro-tabs{
    border-radius: 10px;
    height: 285px;
    padding: 15px 0px 15px 0px;
    background-color: #242c3059;
    overflow-y: auto;
}

.inventory-ros-container .ro-details{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inventory-ros-container .ro-details .row1{
    display: flex;
    gap: 10px
}

.inventory-ros-container .ro-details .row2{
    font-size: 13px;
    display: flex;
    gap: 10px
}
.inventory-ros-container .ro-details .row2 .sa-label{
    opacity: .5;
}

.inventory-ros-container .ro-details .row3{
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 150px;
}

.inventory-ros-container .ro-details .row3-2{
    display: flex;
    gap: 30px;
}

.inventory-ros-container .ro-details .super-label{
    font-size: 13px;
    letter-spacing: .05em;
    opacity: .5;
}

.inventory-ros-container .ro-details .ro-gross{
    font-size: 40px;
    letter-spacing: 0.05em;
}

.inventory-ros-container .ro-details .date{
    font-size: 18px;
    letter-spacing: 0.08em;
}

.inventory-ros-container .ro-details .date-container{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* ----------- ENDING: /app/ui-components/view-manager/inventory/inventory-details-view/inventory-ros/inventory-ros.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-waterfall/deal-gross-waterfall.css */
.deal-gross-waterfall-container{

}

.deal-gross-waterfall-container .top-label{
    margin-top:20px;
    margin-bottom: 20px;
}

.deal-gross-waterfall-container .app-tabs-container{
    margin-top:20px;
    margin-bottom: 20px;;
}


.deal-gross-waterfall-container .deal-gross-details-grid-container{
    margin-top:10px;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-waterfall/deal-gross-waterfall.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-comparison/deal-gross-comparison.css */
.deal-gross-comparison-container{
    margin-left: 30px;
    margin-right: 30px;
}


.deal-gross-comparison-container .deal-gross-comparison-chart-container{
    margin-top:10px;
}

.deal-gross-comparison-container .app-tabs-container{
    margin-top:10px;
    margin-bottom: 10px;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-comparison/deal-gross-comparison.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-chart/deal-gross-chart.css */
.deal-gross-chart-container{
    height: 300px;
    margin-right:40px;
    position: relative;
}

/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-chart/deal-gross-chart.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-comparison-chart/deal-gross-comparison-chart.css */
.deal-gross-comparison-chart-container{
    height: 250px;
    position: relative;
    margin-right:40px;
}



/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-comparison-chart/deal-gross-comparison-chart.css */


/* ----------- STARTING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-waterfall-chart/deal-gross-waterfall-chart.css */
.deal-gross-waterfall-chart-container{
    height: 300px;
    margin-right:40px;
    position: relative;
}

/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-gross/deal-gross-waterfall-chart/deal-gross-waterfall-chart.css */


/* ----------- STARTING: /app/ui-components/cells/financials/cell-financial-label/heading/cell-financial-label-heading.css */
.cell-financial-label-heading{
    text-align: left;
    font-weight: 600;
    color: var(--dark-grid-heading-color);
    text-transform: uppercase;
}
/* ----------- ENDING: /app/ui-components/cells/financials/cell-financial-label/heading/cell-financial-label-heading.css */


/* ----------- STARTING: /app/ui-components/cells/financials/cell-financial-label/computed/cell-financial-label-computed.css */
.cell-financial-label-computed{
    text-align: left;
    color: var( --dark-grid-color);
}
/* ----------- ENDING: /app/ui-components/cells/financials/cell-financial-label/computed/cell-financial-label-computed.css */


/* ----------- STARTING: /app/ui-components/cells/financials/cell-financial-label/account-group/cell-financial-label-account-group.css */
.cell-financial-label-account-group{
    text-align: left;
    color: var( --dark-grid-color);
}
/* ----------- ENDING: /app/ui-components/cells/financials/cell-financial-label/account-group/cell-financial-label-account-group.css */


/* ----------- STARTING: /app/ui-components/cells/financials/cell-financial-value/computed/cell-financial-value-computed.css */

/* ----------- ENDING: /app/ui-components/cells/financials/cell-financial-value/computed/cell-financial-value-computed.css */


/* ----------- STARTING: /app/ui-components/cells/financials/cell-financial-value/account-group/cell-financial-value-account-group.css */

/* ----------- ENDING: /app/ui-components/cells/financials/cell-financial-value/account-group/cell-financial-value-account-group.css */


/* ----------- STARTING: /app/ui-components/notes/viewer/chat/users-list/chat-users-list.css */

.chat-users-list-popover .popover-inner {
    width: 350px;
}
.chat-users-list-popover .popover-content {
    width: 350px;
}

    .chat-users-list-container .email-container {
        max-width:180px;
        margin-left:12px
    }


    .chat-users-list-container .chat-user-container {
        margin: 3px 0px 3px 0px;
        padding: 7px 10px 7px 10px;
    }
/* ----------- ENDING: /app/ui-components/notes/viewer/chat/users-list/chat-users-list.css */


/* ----------- STARTING: /app/ui-components/notes/viewer/chat/users-ribbon/users-ribbon.css */
.user-ribbon-container user-icon:not(:last-child) {
    margin-right: -20%;
}

.user-ribbon-container user-icon .circle{
    background-color: #366675;
}

.user-ribbon-container user-icon:nth-child(1) .circle{
    background-color:#1A446A;
}


/* ----------- ENDING: /app/ui-components/notes/viewer/chat/users-ribbon/users-ribbon.css */