/* ----------- 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/top-nav-action/top-nav-action.light.css */
.light-theme {
    .top-action-container >  img {
        filter: invert(1);
    }
}
/* ----------- ENDING: /app/ui-components/top-nav-action/top-nav-action.light.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-icon {
        height: 10px;
        width: 10px;
        object-fit: contain;
        border: 1px red;
    }
}

.top-action-container>.image {
    object-fit: contain;
    height: 26px;
    width: 26px;
    border: 1px solid red;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.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/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.light.css */
.light-theme {
    .boxed {
        background-color: var(--dark-boxed-background);
        box-shadow: 0px 2px 12px 1px var(--shadow-color)
    }
}
/* ----------- ENDING: /app/ui-components/forms/forms-shared.light.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/time-viewer/time-viewer.css */
.time-viewer-container{

}

/* ----------- ENDING: /app/ui-components/time-viewer/time-viewer.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/store-selector/store-selector.light.css */
.light-theme {
    .store-selector-container {
        background: var(--dark-background-secondary);
        font-weight: 500;
        box-shadow: 0px 2px 4px 3px var(--shadow-color);
        border: none;
    }
    .store-selector-container:focus-visible{
            outline: var(--accent-color) auto 1px
    }

    .store-selector-carret {
       opacity: 40%;
    }
}
/* ----------- ENDING: /app/ui-components/store-selector/store-selector.light.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/app-timeline/app-timeline.slick.css */


app-timeline.slick{
    
}
/* ----------- ENDING: /app/ui-components/app-timeline/app-timeline.slick.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;
    color:var(--dark-color);
}

.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: var(--dark-color);
    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 var(--dark-background);
    border-radius: 50%;
    position:relative;
    font-weight: 300;
    font-size: 10px;
    background-color: #0099ff; 
    color:white;   
}

.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(var(--dark-color), transparent);
    background-color: initial;
}
/* ----------- ENDING: /app/ui-components/app-timeline/app-timeline.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: 15px;
    z-index: 3000;
}

.view-manager-container .content {
    /*   border: 1px solid blue;*/
    left: 0;
    right: 0;
    overflow-y: auto;
    padding-right: 10px;
}

/*
.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 .image {
    background-image: var(--caret-left);
    height: 15px;
    width: 15px;
    margin-right: 1px;
}

.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/view-manager/view-manager.light.css */
.light-theme {
    .view-manager-container .content {
        padding-left: 10px;
    }
}
/* ----------- ENDING: /app/ui-components/view-manager/view-manager.light.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/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/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/user-line/user-line.css */
.user-line-container{

}

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


/* ----------- STARTING: /app/ui-components/app-tabs/app-tabs.simple.css */

app-tabs.simple .item{
    color: var(--font-hint-color);
    background-color: transparent;
    border-bottom: 1px solid transparent ;
    border-radius: 0px;    
}

app-tabs.simple .item.selected{
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--font-hint-color) ;
    border-radius: 0px;
    background-color: transparent ;
    
}

app-tabs.simple .item:hover{
    background-color: transparent ;
}
/* ----------- ENDING: /app/ui-components/app-tabs/app-tabs.simple.css */


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

.app-tabs-container .item {
    margin-right: 10px;
    padding: 8px 40px;
    border-radius: 10px;
}

.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: var(--palette-app-tabs-hover);
    border-radius: 10px;
    color: var(--font-hint-color);
    cursor: pointer;
}

.app-tabs-container .item.selected {
    background-color: var(--palette-app-tabs-selected);
    border-radius: 10px;
    color: var(--font-hint-color);
}
/* ----------- ENDING: /app/ui-components/app-tabs/app-tabs.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: var(--dark-boxed-background);
    border-radius: 5px;    
    cursor: default;
}

/* ----------- ENDING: /app/ui-components/plus-n/plus-n.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/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/margin-blocks/margin-blocks.css */
.margin-block{
    display: inline-block;
    border-left: 2px solid var(--dark-tree-line);
    width: 10px;
    margin-left: 17px;
    height: 32px;
    vertical-align: middle;
}
/* ----------- ENDING: /app/ui-components/margin-blocks/margin-blocks.css */


/* ----------- STARTING: /app/ui-components/date/uib-datepicker-popup.css */
.uib-datepicker-popup.dropdown-menu {
    
    background: var(--popover-background-color-1);
    border: 1.26786px solid var(--popover-border-color-1);
    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: var(--secondary-btn-background);
    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: var(--secondary-btn-background);
    border: 1px solid var(--secondary-btn-color-border);
    height: 33px;
    width: 33px;
    border-radius: 16px;
}

.uib-datepicker-popup.dropdown-menu th button.uib-title {
    color: var(--dark-color);
    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;
}


.uib-datepicker-popup.dropdown-menu table:focus-visible{
    border: none
}
/* ----------- ENDING: /app/ui-components/date/uib-datepicker-popup.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: var(--circle-user-icon);
    border-color: var(--dark-side-nav-base);

}

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

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

.with-border .circle {
    border: 2px solid;
    border-color: var(--dark-side-nav-base);
}

.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-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/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/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: var(--palette-notification-bg);
        width: 100%;
        position: relative;
    }

    .notification-icon .icon{
        height: 18px;
        width: 18px;
        background-image: var(--notifications-icon-url); /*default to be override by type*/
        object-fit: contain;                
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .notification-icon.notification-about-operational-report .circle{
        background-color: var(--palette-notification-bg-1);

        .icon{
            background-image: var(--notifications-icon-url-1);
        }        
    }

    .notification-icon.notification-about-financial-report .circle{
        background-color: var(--palette-notification-bg-2);
        .icon{
            background-image: var(--notifications-icon-url-2);
        }
    }

    .notification-icon.notification-about-operational-report .circle{
        background-color: var(--palette-notification-bg-2);
        .icon{
            background-image: var(--notifications-icon-url-2);
        }
    }

    .notification-icon.notification-about-note .circle{
        background-color: var(--palette-notification-bg-3);
        .icon{
            background-image: var(--notifications-icon-url-3);
        }
    }
        
    .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/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/feedback/feedback.light.css */
.light-theme {
    .feedback-container .options-container .option {
        font-weight: 400;
    }
}
/* ----------- ENDING: /app/ui-components/modals/feedback/feedback.light.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/personal-settings/personal.settings.css */

/* ----------- ENDING: /app/ui-components/modals/personal-settings/personal.settings.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/videos-library/videos-library.css */
.videos-library-container{
    margin: 3em;
}


.videos-library-container .library-content{
    margin-top: 2em;    
    height: calc(100vh - 260px);    
}

.videos-library-container .videos-container{
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* spacing between items */
    overflow-y: auto;    
    height: calc(100vh - 350px);
}

.videos-library-container .videos-container .video-wrapper{
    flex: 0 1 calc(25% - 16px); /* 4 items per row */
    box-sizing: border-box;   
}

.videos-library-container .videos-container .item{

    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 16px;    
    
    padding: 1.5em 1em 1.5em 1em;
}

.videos-library-container .videos-container .item:hover{
    cursor: pointer;
    background-color: var(--dark-background-hover-secondary);
}

.videos-library-container .videos-container .item .preview{
    height: 190px;
    border-radius: 10px; 
    object-fit: cover;   
    filter: drop-shadow(0px 6.238px 12.476px rgba(0, 0, 0, 0.25));
}

.videos-library-container .videos-container .item .preview img{
    height: 100%;
    width: 100%;
    opacity: .5;
}

.videos-library-container .videos-container .item .preview .play-icon{
    opacity: 1;
}

.videos-library-container .videos-container .item .title{
    font-size: 16px;
    font-weight: 300;
}

.videos-library-container .videos-container .item .description{
    font-weight: 300;
}
/* ----------- ENDING: /app/ui-components/modals/videos-library/videos-library.css */


/* ----------- STARTING: /app/ui-components/modals/videos-library/videos-library.light.css */

.light-theme{

    .videos-library-container .videos-container .item .preview img{
        opacity: 1;
    }
}
/* ----------- ENDING: /app/ui-components/modals/videos-library/videos-library.light.css */


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

}

/* ----------- ENDING: /app/ui-components/modals/products/products.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/schedule-report/schedule-reports.light.css */
.light-theme {
    .schedule-report-container .cron-wrap select {
        background-color: var(--dark-background);
        border-color: var(--shadow-color);
        color: var(--dark-color);
    }
}
/* ----------- ENDING: /app/ui-components/modals/schedule-report/schedule-reports.light.css */


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

}


.how-to-video-container .video-container{
    border: 1px solid #383838;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;   
    height: 50vh;    
}

.how-to-video-container .video-title{
    margin-top: 60px;
}

.how-to-video-container video{
    object-fit: cover;
    height: 100%;
    width: 100%;
    display: block;
}

.how-to-video-container .modal-content{
    padding: 0;
    border: none;
}

.how-to-video-container .modal-body{
    margin:0;
    padding: 0;
}

.how-to-video-container .info-container{
    padding: 0px 30px;
    margin-bottom: 30px;
}
/* ----------- ENDING: /app/ui-components/modals/how-to-video/how-to-video.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/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/deal/deal.css */
.deal-details-container {
    margin-bottom: 2em;

    .top-row {
        padding-top: 80px;
    }

}

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

.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 .app-tabs-container .item {
    max-width: 180px;
    overflow-x: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    border-radius: 10px;
}

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

.deal-details-container .app-heading {
    font-size: 20px;
    font-weight: 400;
    /* display: flex;
    width: 90%; */

}

.deal-details-container .app-heading .do-ellipsis {}

.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 {
    margin-bottom: 20px;
    background-color: var(--dark-background);
}

.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/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-details/ro-details.css */
.ro-details-container{

}

/* ----------- ENDING: /app/ui-components/modals/ro-details/ro-details.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/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/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/top-nav-action/slide/top-nav-action-slide.css */
.top-slide {
    height: 100%;
}

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


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

/* ----------- ENDING: /app/ui-components/previews/preview-with-actions/preview-with-cations.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: var(--skeleton);
    border-radius: 10px;
}

.preview-popover {
    background-color: var(--dark-background);
    border: 1px solid; 
    border-color: var(--dark-grid-border-color);
    border-radius: 10px;
}

.preview-with-actions-container .view-container {
    align-content: center;
    width: 70%;
    background-color: var(--dark-grid-background-color);
    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: var(--dark-boxed-background);
    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: var(--dark-background-light-hover);
}

.preview-with-actions-container .actions-container .action.is-open {

    background-color:  var(--dark-background-light-hover);;
}

.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:  var(--dark-background-light-hover);;
}

.preview-with-actions-wrapper .dismiss-action {
    opacity: 0;
    transition: opacity .2s ease-in;
    position: absolute;
    right: -14px;
    top: -17px;
    border: 1px solid var(--dark-grid-border-color);
    border-radius: 50%;
    height: 30px;
    width: 30px;
    background-color: var(--dark-background)
}

.preview-with-actions-wrapper .dismiss-action .x {
    height: 10px;
    width: 10px;
    opacity: .6;
    background-image: var(--x-icon);
    background-size: cover;
}

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-with-actions/preview-with-actions.light.css */
.light-theme {
    .preview-popover {
        background-color: var(--dark-background-secondary);

    }

    .preview-with-actions-container .view-container {
       box-shadow: 0px 2px 12px 0px var(--shadow-color);
       border: 1px solid var(--preview-panel-border);
    }

    .preview-with-actions-container .actions-container .action {
        box-shadow: 0px 2px 12px 0px var(--shadow-color);
        border: 1px solid var(--preview-panel-action-border);
    }

    .preview-action-subpopover {
        background-color: var(--dark-background-secondary);
        box-shadow: 0px 4px 12px 3px var(--shadow-color);
    }

    .preview-with-actions-container .actions-container .action img{
        opacity: 1;
    }

    .preview-with-actions-wrapper .dismiss-action:hover{
        background-color: #eaf1f1;
    }

    .preview-with-actions-wrapper .dismiss-action .x{
        opacity: .2;
        background-image: url("/assets/images/x.png");

    }
}
/* ----------- ENDING: /app/ui-components/previews/preview-with-actions/preview-with-actions.light.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/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/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/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: var(--color-15);
    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/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/buttons/buttons.light.css */
.light-theme {
    .app-btn-shadow.circular .image{
        background-image: url("/assets/images-light-theme/caret-left.png");
    }
}
/* ----------- ENDING: /app/ui-components/forms/buttons/buttons.light.css */


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

.app-btn-shadow.circular .image{
    height: 18px;
    width: 18px;
    background-image: url("/assets/images/chevron-left.svg");
}

.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: var(--btn-shadow-hover);
        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/lookup/app-lookup.css */
.app-lookup {}

.app-lookup .boxed-input.boxed  {
    position: relative;
    opacity: 100%;
    
}



.app-lookup .boxed .items-container {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: block;
    float: left;
    width: inherit;
    padding: 5px 0px;
    margin: 4px 0 0;
    font-size: 14px;
    text-align: left;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    background-color: var(--dark-background-light);
    border-color: var(--dark-border-color);
    opacity: 100%;
}



.app-lookup .items-container .app-lookup-item {
    padding: 8px 15px;
    cursor: pointer;
    color: var(--dark-text-color);
    font-size: 14px;
}
/* ----------- ENDING: /app/ui-components/forms/lookup/app-lookup.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: var(--switch-background);
    border-radius: 50px;
    vertical-align: middle;
}
.on .app-switch-btn {
    background-color: var(--switch-on);
}
.app-switch-btn {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 15px;
    width: 15px;
    background-color: var(--switch-off);
    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: var(--select-multiple-selected-bg) !important;    
    cursor: pointer;
}
.select-multiple-container .select-multiple-container-menu .options .dropdown-item.selected{
    border-radius: 8px;
    background-color: var(--select-multiple-selected-bg) !important;
    border: 1px solid var(--select-multiple-selected-border);
    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;
}

.select-multiple-container .dropdown-item:not(.selected) .checkbox-check{
    display: none;
}
/* ----------- ENDING: /app/ui-components/forms/select-multiple/select-multiple.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;
    border-color: var(--dark-color);
    border-radius: 3px;
    vertical-align: middle;
}

.checkbox-blank:hover {
    border: 2px solid;
    border-color: var(--dark-color);
}

.app-checkbox .checkbox-check{
    position: absolute;
    bottom: 5px;
    left: 1px;
}

.checkbox-check {
    width: 20px;
    height: 20px;
    
    background-image: var(--checkbox-on);
    background-size: contain;
}


.checkbox-check.ng-hide {}

.app-checkbox .image{
    height: 20px;
    width: 20px;;
    background-image: url("/assets/images/checkbox-on.svg");
}


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


/* ----------- STARTING: /app/ui-components/forms/checkbox/checkbox.light.css */
.light-theme {
    .checkbox-blank {
        border-color: var(--dark-color-light);
        opacity: .5;
    }

    .app-checkbox .image{
        background-image: url("/assets/images-light-theme/checkbox-white.svg");
    }
}
/* ----------- ENDING: /app/ui-components/forms/checkbox/checkbox.light.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/forms/input/app-input.light.css */
.light-theme {
    .input.stealt  {
        background-color: var(--dark-boxed-background);
    }
}
/* ----------- ENDING: /app/ui-components/forms/input/app-input.light.css */


/* ----------- STARTING: /app/ui-components/forms/input/app-input.css */
input.stealt {
    border: none;
    width: 100%;
    background-color: transparent;
}

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: inherit;
}

.boxed-input:hover input.stealt {
    background-color: inherit;
}
/* ----------- ENDING: /app/ui-components/forms/input/app-input.css */


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

.app-select-container .boxed-content{
    display: flex;
    align-items: center;
    gap: 20px;
}
.app-select-label{
    font-size: 11px;
    font-weight: 500;
}

.app-select-selected-item{
    font-size: 14px;
    font-weight: 400;
  
}
.app-select-container .caret{
  
    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/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/store-selector/store-selector-tree/store-selector-tree.light.css */
.light-theme {
    .tree-brand-label {
        color: var(--dark-color);
        opacity: 1;
    }
}

/* ----------- ENDING: /app/ui-components/store-selector/store-selector-tree/store-selector-tree.light.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;
    border-color: var(--dark-color);
}


.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/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/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/number-viewer/number-viewer.light.css */
.light-theme{

    .number-viewer-container .zero-amount {
        opacity: .5;
    }
/*
    .number-viewer-container .negative{
        background: linear-gradient(90deg, rgb(255, 127, 127) 5%, rgb(255, 19, 104) 95%) text;        
    }

    .number-viewer-container .forecast{
        background: linear-gradient(90deg, #2d81e2 0%, #51CEFF 100%) text;        
    }
*/
}
/* ----------- ENDING: /app/ui-components/viewers/number-viewer/number-viewer.light.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;
}

.number-viewer-container .negative{
    background: var(--number-viewer-actual-negative);
    -webkit-text-fill-color: transparent;
    font-weight: 500;
}

.number-viewer-container .forecast{
    background: var(--number-viewer-forecast);
    -webkit-text-fill-color: transparent;
    font-weight: 500;
}
/* ----------- ENDING: /app/ui-components/viewers/number-viewer/number-viewer.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/subtitled-amount/subtitled-amount.light.css */
.light-theme {
    .subtitled-amount-container .amount-label {
        font-weight: unset;
    }
}
/* ----------- ENDING: /app/ui-components/viewers/subtitled-amount/subtitled-amount.light.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/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/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-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/small-percentage/small-percentage.css */
.small-percentage-container{

}

/* ----------- ENDING: /app/ui-components/viewers/small-percentage/small-percentage.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/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/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-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/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/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/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/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/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/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/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/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/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;
    color: var(--alert-text-color);
}

.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 var(--alert-dismiss-border-color) ;
    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{ 
    visibility: visible;
    
}
.stacked-alerts-container .dismiss-all{
    visibility : hidden;
    padding: .2em .7em;
    font-size: 11px;
    background-color: var(--alert-dismiss-all-bg);
    border-radius: 10px;
    font-weight: 250;;
    transform: background .5s ease-in;
}

.stacked-alerts-container .dismiss-all.visible:hover{
    background-color: var(--alert-dismiss-all-bg-hover);
    cursor: pointer;
    
}
/* ----------- ENDING: /app/ui-components/alerts/stacked-alerts/stacked-alerts.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 var(--dark-background);
    
}
/* ----------- ENDING: /app/ui-components/app-timeline/app-timeline-slick/app-timeline-slick.css */


/* ----------- STARTING: /app/ui-components/app-tabs/button-scrollable-tabs/button-scrollable-tabs.css */
.button-scrollable-tabs-container {
    display: flex;
    gap: 10px;
    flex-direction: row;
    margin-top: -8px;
}

.button-scrollable-tabs-container .tab-container-outer {
    overflow-x: hidden;
    padding-top: 8px;
    padding-bottom: 12px;
}

.button-scrollable-tabs-container .tab-container {
    align-self: auto;
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: nowrap;
}

.button-scrollable-tabs-container .scroll-arrow {
    align-content: center;
    border: 1px solid var(--button-scrollable-arrow-container-border);
    border-radius: 82px;
    height: 37px;
    width: 37px;
    position: relative;
    background-color: var(--button-scrollable-arrow-container-background);
    padding: 17px;
    margin-top: 8px;
}

.button-scrollable-tabs-container .scroll-arrow:hover {
    background-color: var(--button-scrollable-arrow-container-background-hover);
    border: 1px solid var(--button-scrollable-arrow-container-border-hover);
}

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

.button-scrollable-tabs-container .scroll-arrow.right img {
    transform: scaleX(-1) translate(50%, -50%);
}

.button-scrollable-tabs-container .tab-container .item {
    cursor: pointer;
    border: 1px solid var(--button-scrollable-tab-border);
    background-color: var(--button-scrollable-tab-background);
    flex: none;
    height: 37px;
    text-align: center;
    padding: 8px 20px;
    border-radius: 37px;
}

.button-scrollable-tabs-container .tab-container .item.selected,
.button-scrollable-tabs-container .tab-container .item:hover {
    background-color: var(--button-scrollable-tab-selected-background);
    border: 1px solid var(--button-scrollable-tab-selected-border);
}


.button-scrollable-tabs-container .tab-container .item.selected .boxed-number-viewer-container {
    background-color: var(--metric-tabs-selected);
    border: 1px solid var(--metric-tabs-selected-border);
}

.button-scrollable-tabs-container .tab-container .item.selected .boxed-number-viewer-container .app-label {
    opacity: 1;
}
/* ----------- ENDING: /app/ui-components/app-tabs/button-scrollable-tabs/button-scrollable-tabs.css */


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

}

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

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

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


.tabs-content {
    border-left: 1px solid var(--palette-bordered-tab-border);
    border-bottom: 1px solid var(--palette-bordered-tab-border);
    border-right: 1px solid var(--palette-bordered-tab-border);
    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/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: var(--employees-tabs-background);
    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: var(--employees-tabs-selected);
    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/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: var(--metric-tabs-selected);
    border:1px solid var(--metric-tabs-selected-border);
}

.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/how-to/how-to-button/how-to-button.light.css */

.light-theme{

    .how-to-tooltip .items-container .item .video-thumbnail .image{
        opacity: 1;
    }
}
/* ----------- ENDING: /app/ui-components/how-to/how-to-button/how-to-button.light.css */


/* ----------- STARTING: /app/ui-components/how-to/how-to-button/how-to-button.css */
.how-to-button-container{
    display:flex;
    flex-direction: column;
    gap:10px;
    align-items: end;
    z-index: 10000;
    position: absolute;
    bottom: 1em;
    right: 1em;
}

.button-container{
  position: absolute;
  right: 10px;
  bottom: 100px;
}
.how-to-button-container .expand-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;

  /* Initial width fits just the icon */
  width: 40px;
  overflow: hidden;
  transition: width 0.3s ease;
}

.how-to-button-container .expand-button .icon {
  flex-shrink: 0;
  background-image: url("./../assets/images/how-to.png");
  height: 17px;
  width: 17px;
  margin-left: 1px;
}

.how-to-button-container .expand-button .text {
  margin-left: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}

.how-to-button-container .expand-button:hover {
  width: 145px; /* expands to the left */
}

.how-to-button-container .expand-button.expanded{
    width: 145px; /* expands to the left */
}

.how-to-button-container .expand-button:hover .text {
  opacity: 1;
}

.how-to-button-container .expand-button.expanded .text {
  opacity: 1;
}

.how-to-tooltip{
    
    width: 450px;
    padding: 1em;
   /* transform: translate(-310px,-10px);*/
}

.how-to-tooltip .arrow{
    display: none;
}

.how-to-tooltip.in{
    opacity: 1 !important;
}

.how-to-tooltip .tooltip-inner{
    max-width: initial;
}


.how-to-tooltip .items-container{
    padding-right: 1em;
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin: 1em 0em 1em 1em;
    gap: 1.5em;
}

.how-to-tooltip .items-container .item{
    display: flex;
    flex-direction:  column;
    align-items: start;
    gap: 1em;
    padding: .7em .7em 1em .7em;
    border-radius: 10px;
    transition: background-color .2s ease-in;
}

.how-to-tooltip .items-container .item:hover{
    background-color: var(--dark-background-hover-secondary);
    cursor: pointer;
}

.how-to-tooltip .items-container .item .video-thumbnail{
    align-self: stretch;
    object-fit: fill;
    border-radius: 10px;
    
    box-shadow: 0px 6px 12px 0px #00000075;
    margin-bottom: 1em;
    position: relative;
}

.how-to-tooltip .items-container .item .video-thumbnail .image{
  opacity: .5;
  height: 183px;
  width: 367px;    
  background-size: cover;
  border-radius: 5px;
}

.how-to-tooltip .items-container .item .title{
    font-size: 18px;
    font-weight: 300;
}

.how-to-tooltip .items-container .item .description{

    font-size: 14px;
    font-weight: 300;
    text-align: left;
    
}

.how-to-tooltip .heading{
    text-align: left;
    margin: .5em 0em 1em .5em;
}
/* ----------- ENDING: /app/ui-components/how-to/how-to-button/how-to-button.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/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: var(--circle-user-icon);
    border: 3px solid;
    border-color: var(--dark-side-nav-base);
}

.ripple:hover .circle:is(.top, .bottom) {
    border-color:#202628;
}

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

.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/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;
    margin: 5px;
}

.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 {
    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-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;
    margin: 5px;
}

.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 {
    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 var(--dark-grid-border-color)4D;
    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;
}


@media  (max-width: 1440px) {
    
    .app-month-range-picker .divider{
        margin: 0;
    }
  }
/* ----------- ENDING: /app/ui-components/date/month-range-picker/app-month-range-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/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-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: var(--dark-grid-row-selected-flash);
    background-size: 100%;
    transition: background 0s;
  }

.cell-actionable-col-container .showing.cell-col-wrapper{
    background-color: var(--dark-grid-row-selected);
    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-numeric/cell-numeric.css */
.cell-numeric-container{
    
}

    

/* ----------- ENDING: /app/ui-components/cells/cell-numeric/cell-numeric.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-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-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/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-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-tree/cell-tree.css */
.cell-tree-container{
    display: inline-flex;
    flex-direction: row;
}

.cell-tree-spacer {
    border-left: 2px solid;
    border-color: 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-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-text/cell-text.css */
.cell-text-container{

}

/* ----------- ENDING: /app/ui-components/cells/cell-text/cell-text.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-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-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: var(--action-wrapper-hover);
    cursor: pointer;
    border-radius: 8px;
}

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

.actionable-popover-menu {
    width: 250px;
    background-color: var(--dark-side-nav-popover-backrgound);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 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/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/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: var(--contained-line-loader-background);
    z-index: 10;
    border-radius: 8px;
    overflow: hidden;
}
/* ----------- ENDING: /app/ui-components/loaders/line-loader/line-loader.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/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: var(--metric-tabs-selected);
    cursor:pointer;
    
}

.salesperson-profile-others-container .salesperson-small.selected{
    background-color: var(--metric-tabs-selected);
    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/modals/deal/details-deal-customers/details-deal-customers.css */
.details-deal-customers-container {
 
    .info {
        width: 70%;
    }
}



.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 var(--modal-separator-line);
}

.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;
    max-width: 90%;
}
/* ----------- ENDING: /app/ui-components/modals/deal/details-deal-customers/details-deal-customers.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 var(--modal-separator-line);
}

.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-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/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-tradein/details-deal-tradein.css */
.details-deal-tradein-container {
    .top-container .info {
        width: 100%;
    }
}


.details-deal-tradein-container .top-container {
    display: flex;
    gap: 20px;
    padding-bottom: 1em;
    border-bottom: 1px solid;
    border-color: var(--modal-separator-line);
}


.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-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-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-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-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 var(--modal-separator-line);
}

.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/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-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-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-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-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-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-gl-entry/preview-gl-entry.light.css */
.light-theme {
    .preview-gl-entry-container .gl-entry-container .right .row2 .item .subtitle {
        font-weight: 500
    }

}
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-gl-entry/preview-gl-entry.light.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-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;
    border-color: var(--color-15);
    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: var(--text-light);
}

#preview-financial-current-period .top-section .left .month-info,
#preview-financial-current-period .top-section .right .period-comparison {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

#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;
    color: var(--dark-color);
}


#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;
    color: var(--text-light-50);
}

#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: var(--text-light-50);
    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;
    color: var(--dark-color);
}

#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;
    color: var(--dark-color);
}

.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-financial-current-period/preview-financial-current-period.light.css */
.light-theme {
    #preview-financial-current-period .top-section .right .period-comparison .period {
        font-weight: 500;
    }

    .ag-theme-app .ag-menu .ag-picker-field-wrapper {
        background: none !important;
        border: none !important;
    }

    .ag-theme-app .ag-menu .ag-picker-field-wrapper:hover {
        background: var(--dark-background-lighter);
        cursor: pointer;
    }

    #preview-financial-current-period .top-section .left .line-text{
        font-weight: 400;
    }
}
/* ----------- ENDING: /app/ui-components/previews/wrappers/preview-financial-current-period/preview-financial-current-period.light.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: 5px;
    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-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: var(--shadow-bg);
    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: var(-gross-container-color);
    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: var(--dark-boxed-background);
    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/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/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/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: var(--separator);
}
.dropdown-list-container .action{
    padding: 10px 20px;
    width: 240px;
    display: flex;
    gap:15px;
    align-items: center;
}
.dropdown-list-container .action img{
    height: 15px;
    width: 15px;
    
}

.dropdown-list-container .action:hover{
    cursor: pointer;
    border-radius: 13px;
}

/* ----------- ENDING: /app/ui-components/forms/buttons/button-dropdown/button-dropdown.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-close.with-shadow .btn-close .btn-circle{
    border-radius: 50%;
    border: 4px solid;
    border-color: var(--modal-btn-close-border);
    box-shadow: none;
}


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

    .btn-circle .image {
        height: 11px;
        width: 11px;
        background-image: var(--x-icon);        
    }

    .btn-circle.sm{
        height: 38px;
        width: 38px;
    }

    btn-close.med .btn-circle{
        height: 40px;
        width: 40px;
    }
/* ----------- ENDING: /app/ui-components/forms/buttons/close/btn-close.css */


/* ----------- STARTING: /app/ui-components/forms/buttons/close/btn-close.light.css */
.light-theme {
    .btn-circle {
        border: 2px solid;
        border-color: var(--dark-border-color-accent-15);
        
        box-shadow: 0px 4.371px 22.945px 0px var(--shadow-color);
    }

    .btn-circle .image {        
        background-image: url("/assets/images/x.png");        
    }
}
/* ----------- ENDING: /app/ui-components/forms/buttons/close/btn-close.light.css */


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

/* ----------- ENDING: /app/ui-components/forms/buttons/close-no-border/btn-close-no-border.light.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 .icon {
    height: 20px;
    width: 20px;
    background-image: var(--button-no-border-x); ;
}
/* ----------- ENDING: /app/ui-components/forms/buttons/close-no-border/btn-close-no-border.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;
}

.btn-reload .image {
    background-image: var(--reload);
    background-repeat: no-repeat;
    height: 20px;
    aspect-ratio: 1;
}
/* ----------- ENDING: /app/ui-components/forms/buttons/reload/btn-reload.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/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;
    border-radius: 8px;
    transition: background-color ease-in-out .2s;
    background-color: transparent;
}

.multi-way-switch-container .item.selected {
    background-color: var(--multiway-switch-selected-bg);
    color: #00A3FF;
}

.multi-way-switch-container .item:not(.selected):hover{
    background-color: var(--multiway-switch-selected-hover);
}


@media  (max-width: 1440px) {
    
    .multi-way-switch-container .item .item-label {
        max-width: 60px;
    }
  }
/* ----------- 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;
}

@media  (max-width: 1440px) {
    
    .boxed-switch {
        .app-label{
            max-width: 80px;
        }
    }
  }

  @media  (max-width: 1000px) {
    
    .boxed-switch {
        .app-label{
            display: none;
        }
    }
  }
/* ----------- ENDING: /app/ui-components/forms/switch/boxed/boxed-switch.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: var(--employees-tabs-background);
    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: var(--employees-tabs-selected);
    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/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/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/boxed/boxed-input.light.css */
.light-theme {
}
/* ----------- ENDING: /app/ui-components/forms/input/boxed/boxed-input.light.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/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/alerts/information/informational-alert/informational-alert.css */
.informational-alert-container{
    font-weight: 500;
    font-size: 85%;
    color: var(--informational-alert-color);
    padding: 8px 16px; 
    border-radius: 3px;
    background-color: var(--informational-alert-background);
    display: inline-block;
}
 .informational-alert-container .wrapper{
    display:flex;
    gap: 10px;
    align-items: center;
 }

  .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;
  }

  .informational-alert-container .info-icon{
    border-radius: 50%;
    height: 12px;
    width: 12px;
    border: 3px solid;
    background-color: transparent;
    border-color: var(--informational-alert-color);
    opacity: .7;
  }

@media  (max-width: 1440px) {
    
        .informational-alert-container .info{
          display: none;
        }
 
}
/* ----------- ENDING: /app/ui-components/alerts/information/informational-alert/informational-alert.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/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;
    margin-bottom: 1em;
}
/* ----------- ENDING: /app/ui-components/view-manager/financials/edit-budget-view/edit-budget-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{
    padding: 0 1em;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 98%;
}


.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 - 85px)/2);
    margin-top:3em;    
    position:relative
}

.trend-side-by-side-view-container .series-container{
    height: calc(100vh - 170px);
    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: var(--series-selector-hover);
    cursor: pointer;
}

.trend-side-by-side-view-container .series-container .serie.selected{
    background-color: var(--series-selector);
}

.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/service/ro-details-view/ro-details-view.css */
.ro-details-view-container {
    padding-bottom: 1em;
}

.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/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/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/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/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/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/view-manager/inventory/inventory-details-view/inventory-details-view.css */
.inventory-details-view-container {
    padding-bottom: 3em;

    .top-heading {
        margin-bottom: 20px;
        background-color: var(--dark-background);
    }
}


.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 {
    min-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/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 - 230px);
    margin-top: 35px;
    margin-bottom: 10px;
}

.notes-sidedrill-container

.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-bottom: 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 20px;
    width: 370px;
}

.note-container.fake {
    opacity: .3;
}

.note-container .note-message-triangle {
    width: 25px;
    height: 20px;
    background-color: #365775;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -4px;
    position: relative;
}
.message-user-icon {
    margin: 0 -0.3em  0 0 
}
.note-message-triangle .over {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: var(--dark-side-nav-base);
    border-radius: 0px 0px 1000px 0px;
}

.note-container .message-text {
    margin-top: 0.5em;
    font-weight: 300;
    color: var(--text-color-alternative);
}

.note-container .message-title {
    font-weight: 500;
    color: var(--text-color-alternative);

}

.note-container .message-time {
    font-weight: 400;
    font-size: 11px;
    margin-top: -18px;
    color: var(--text-color-alternative);
    opacity: 80%;

}

.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:transparent;
    color: var(--dark-color);
    border: 0px;
    font-size: 17px;
    font-weight: 500;
    resize: none;
    margin-bottom: 0.5em;
}

.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/notes/viewer/chat/note-chat.light.css */
.light-theme {
    .notes-large-input {
        border: 1px solid var(--dark-border-color-accent);

        textarea::placeholder {
            opacity: 1;
        }
    }
}
/* ----------- ENDING: /app/ui-components/notes/viewer/chat/note-chat.light.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: var(--daterangepicker-range-hover);
            }
            .app-date-range-picker.daterangepicker .ranges li.active {
                color: var(--font-hint-color);
                border-radius:5px;
                background-color: var(--daterangepicker-range-selected);
            }

            .app-date-range-picker.daterangepicker td.available:hover, .daterangepicker th.available:hover{
                background-color: var(--daterangepicker-date-hover);
                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;
}



@media  (max-width: 1440px) {
    
        
    .app-date-range-picker .from {
        margin-left: 15px;
        
    }
    .app-date-range-picker .to{
        margin-left: 10px;
    }

    .boxed-date-range-picker-container {
        width: 260px;
    }

  }
/* ----------- ENDING: /app/ui-components/date/date-range-picker/boxed-date-range-picker/boxed-date-range-picker.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-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/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-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-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/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/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-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-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-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-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/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/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/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/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/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-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/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-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-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/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: var(--ro-parts-invoice-container) ;
    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: var(--ro-parts-invoice-selected) ;
}


.ro-parts-invoices .parts-invoice-tabs .parts-invoice:hover:not(.selected) {
    background-color: var(--repair-order-hover);
}


.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/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/inventory/inventory-details-view/inventory-ros/inventory-ros.css */
.inventory-ros-container {}


.inventory-ros-container .repair-order.selected {
    background-color: var(--repair-order-selected);

}

.inventory-ros-container .repair-order {
    padding: 10px 20px;
    cursor: pointer;
}

.inventory-ros-container .repair-order:hover:not(.selected) {
    background-color: var(--repair-order-hover);
}

.inventory-ros-container .ro-tabs {
    border-radius: 5px;
    height: 275px;
    background-color: var(--repair-order-tabs);
    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/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/notes/viewer/chat/users-ribbon/users-ribbon.css */
.user-ribbon-container user-icon:not(:last-child) {
    margin-right: -12%;
}

.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 */


/* ----------- 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/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 */