:root {  
    --brand:#ee1c25;
    --text-color:black;
    --light-border: #e5e5e5;
    --light-grey:#f3f6fb;
    --medium-grey:#d9dde9;
    --black: #3e3e3e;
    --black-alt:#30333a;
    --standard-bg: #fafafa;
    --sfondo:white;
    --rosso:#c15555;
    --base-gradient:linear-gradient(89deg, #ee1c25 0%, rgb(118 40 40) 100%);
    --alt-gradient: linear-gradient(94deg, rgba(238,28,37,1) 0%, rgba(138,34,71,1) 100%);
    --alt-gradient-reversed: linear-gradient(94deg, rgba(138,34,71,1) -80%, rgba(238,28,37,1) 100%);
    --green-gradient:linear-gradient(94deg, rgb(71 163 65) 0%, rgb(124 189 86) 100%);
    --verde:#8a885c;
    --base-text:#857c7c;
    --green:#8ea58e;
    --input-bg:#f9efef;
    --input-border-color:#E0CECE;
    --input-text-color:#000;    
    --bar_font_color:#fff;
    --base-shadow:0px 2px 15px 5px #00000008;  
    --button-hover-text:white;
    --button-hover:#333;
    --button-text-color:white;
    --card-icon-bg:#d7b7c0;
    --dashboard-heading-border-color:#fff;
    --alt-font:"Teko";  
    --green-box:#829b6a6e;
    --red-box:#e012496e;
}

@media (max-width: 576px)
{
    .w-sm-100{
        width: 100%!important;
    }  
}

.alt-text-color
{
    color:#adadad;
}

.bg-green-gradient
{
    background: var(--green-gradient);
}

.percentage-block
{
    padding:2px 8px;
    justify-content: space-between;
    width:80px;
    font-size:13px;    
    align-items: center;
    border-radius:3px;
}

.text-left 
{
    text-align:left;
}

.error-image
{
    max-width:500px;
    width:90%;
}

.smaller-text
{
    font-size:13px;
}

.profile-menu--container
{
    width:340px;
    
}

.section-width-padding 
{
    padding: 50px;
}

@media (max-width: 768px) {
    .section-width-padding {
        padding: 22px;
    }
}

.mininav-item 
{
    padding: 10px;
    border-radius: 7px;
    display: flex;

    align-items: center;
    width: 100%;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    position: relative;
}

.mininav-item:hover,
.mininav-item.active
{
    background-color: rgba(0,0,0,0.05);
}

.admin-panel--title:after {
    content: '';
    width: 100%;
    height: 1px;
    opacity: .1;
    margin-top: 10px;
    background: var(--text-color);
    display: block;
}

.admin-panel--title span
{
    font-size:24px;
}

.max-800
{
    max-width:800px;
}

@media( max-width: 960px )
{    
    .double-page--content 
    {
        padding-top: 80px !important;
    }

    .default-button.bigger-mobile
    {
        height:65px !important;
    }

    .settings-button {
        width: 100% !important;
        max-width: 100% !important;
    }

    .page-with-side-menu
    {
        padding-top:55px !important;
    }

    .profile-menu--container
    {
        width:100%;
        padding:10px 0px 5px 5px !important;
        z-index:2000;
        background:var(--input-bg);
        border-bottom: 1px solid var(--input-border-color);
        position:Fixed;        
    }

    .profile-menu--container .sidebar-navigation
    {
        flex-flow:row !important;
        overflow:auto;
        flex-wrap:nowrap;
    }

    .profile-menu--container .mininav-item 
    {
        width:126px;
        padding-top:9px !important;
        padding-bottom: 9px !important;
        display:flex;
        justify-content: center;
        flex-shrink:0;
    }

    .profile-menu--container .mininav-item  span
    {
        font-size:16px !important;        
        margin:0px;
    }
}

.bg-status-accepted
{
    background-color: #329f42 !important;
}

.bg-status-rejected
{
    background-color: #e13d3d !important;
}

.bg-status-pending
{
    background-color: #dbc157 !important;
}

.link
{
    color:var(--brand);
    text-decoration: underline;
}

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

.card-edited-by
{
    font-size:11px;
    margin-top:2px;
    color:#bcc2cb;
}

.fixed-bottom-right
{
    position:Fixed;
    right:20px;
    bottom:20px;
}

.help-icon
{
    transition: 300ms ease all;   
    box-shadow: 0px 3px 5px 2px #d7cdcd;
    border: 5px solid #cbbaba;
    border-radius: 50%;
    display: flex;
    color: white;
    background: #cbbaba;
    justify-content: center;
    align-items: center;
}

.alt-heading
{
    background:var(--brand);
    margin-left:-10px;
    color:white;
    display:inline-block;
    font-size:17px !important;
    border-radius:3px;
    font-family: Teko;
    padding:3px 10px 0px 10px;
}

.help-icon i
{
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:30px;
    width:40px;
    height:40px;
}

.result-card .count-icon-container 
{
    position:relative;
}

.result-card .main-icon
{
    transform:rotate(-20deg);
    opacity:0.05;
        font-size: 30px;
}

.bg-alt
{
    background:var(--light-grey);
}

.pending-bg
{
    background:linear-gradient(94deg, rgba(255,255,255,1) 0%, rgba(219,193,87,1) 100%);
}
.success-bg
{
    background:linear-gradient(94deg, rgba(255,255,255,1) 0%, #329f42 100%);
}
.rejected-bg
{
    background:linear-gradient(94deg, rgba(255,255,255,1) 0%, #e13d3d 100%);
}

.icon-opacity 
{
    opacity:0.2;
}

.quotation-selected-item .total
{
    font-size:16px;
    width:100px;
    line-height:16px;
    text-align: right;
}

.quotation-list-item--heading i
{
    font-size:10px;
    margin-right:3px;
    margin-bottom:2px;
}

.quotation-list-item .quotation-status span
{
    padding-inline: 8px;
    margin-top: -2px;
    display: inline-block;
}

.quotation-list-item .quotation-status--icon,
.quotation-list-item .quotation-status span
{
    padding-top:3px;
    padding-bottom:3px;
}

.quotation-list-item .quotation-status--icon i
{
    top: -3px;
    font-size:9px;
    
    position: relative;
}

.qty-button
{
    width: 35px;
    text-align: center;
    transition: 300ms ease all;
    font-size: 25px;
    opacity: 0.5;
    line-height: 33px;
    border-radius: 7px;
    height: 35px;
}

.qty-button:hover
{
        background: var(--brand);
        color:White;
        opacity:1;
}

.note-preset--button
{
    padding:7px 15px !important;
    height:auto !important;

}

.quotation-list-item .quotation-status--icon
{
    background:rgba( 255, 255, 255, 0.3 );    
    padding-inline:4px;
    height:100%;
}

.quotation-list-item .quotation-status
{
        
    color: White;
    height: 20px;
    display:flex;
    font-size: 11px;
    overflow: hidden;
    line-height: 20px;
    border-radius: 4px;

}

.quotation-list-item .quotation-creator
{        
     
        bottom:-25px;
}

.quotation-list-item .quotation-creator--data
{
        line-height:10px;
}

.quotation-list-item .quotation-creator--date
{
        font-size:10px;
        opacity:0.5;
}

.quotation-list-item .quotation-creator--name
{       
        font-size:11px;
        opacity:0.7;
        font-weight: bold;
        margin-top:1px;
}

.quotation-list-item .quotation-icon
{
     position: absolute;
    outline: 1px solid var(--light-grey);
    height: 30px;
    width: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    top: 50%;    
    font-size: 11px;
    text-align: center;
    transform: rotate(-15deg) translateY( -50% );
    line-height: 18px;
    left: -18px;
    background: var(--light-grey);
    font-weight: bold;
    border: 2px solid var(--dashboard-heading-border-color);
    color: var(--card-icon-bg);
}

.quotation-list-item .icon-count
{
        color:White;
        background-color: var(--brand);
        width:15px;
        height:15px;
        font-size:10px;
        font-family:Teko;
        font-weight:bold;
        text-align: center;
        line-height:15px;
        position: absolute;
        right:5px;
        bottom:5px;
        border-radius:50%;
}

.quotation-total
{
    font-size:13px;
    font-weight:500;
}

@media( max-width:768px )
{
    .quotation-total
    {
        font-size:11px;      
    }
}

.quotation-customer--name
{
    font-size:34px;
    font-weight:bold;
    text-transform: uppercase;
}
.quotation-customer--block .quotation-img 
{
    height:80px;
    opacity:0.9;
}

.quotation-suffix
{
    opacity: 0.7;
    font-size: 12px;
    display: inline-block;
    line-height: 12px;
    font-style: italic;
}

.quote-total
{
    font-size:30px;
}

.quote-item-data
{
        font-size: 14px;
    color: var(--brand);
    text-decoration: none;
    font-weight: bold;
}

.quote-total-vat
{
    font-size: 20px;
}

.text-uppercase
{
    text-transform: uppercase;
}

.result-card .count-icon:hover
{
    opacity:1;
    color:var(--brand);
}

.result-card .count-icon
{
    transform:rotate(-20deg);
    opacity:0.15;
    font-size:19px;
    transition:300ms ease all;
    position:Relative;
}

.result-card .count-icon-container .point-value
{
    position:Absolute;
    top:11px;
    right:4px;
}

.base-select:has(.col-form-label) select
{
    padding-top:20px !important;
}

.comment-notice-image
{
    background:White; 
    border-radius:50%;
    position:Relative;
    margin-right: 15px;
}

.comment-notice-image img
{
    height: 25px;
    opacity: 0.5;
}

.comment:not(:last-child)
{
    margin-bottom:10px;
}

.offcanv-inner  .footer
{
    border-top: 1px solid var(--light-border);
}

.card-edited-by i
{
    font-size:8px; 
}

.card-edited-by img 
{
    border-radius:50%;
    height:16px;
    width:16px;
}

.card-owner-name
{
    font-size: 10px;
    background: white;
    padding: 2px 5px 2px 12px;
    border-radius: 5px;
    border-right: 1px solid var(--light-grey);
    left: -10px;
    z-index: 0;
    border-top: 1px solid var(--light-grey);
    border-bottom: 1px solid var(--light-grey);
    position: relative;
}

.card-owner-container
{
    position: absolute;
    bottom: -11px;
    left: -10px;
    display: flex;
    align-items: flex-end;
}

.card-owner-badge
{
    overflow: hidden;
    z-index: 1;
    border-radius: 50%;
    border: 2px solid white;
    outline: 1px solid rgba(0,0,0,0.04);
}


.mini-logo
{
    height:15px;
    width:15px;
}

#app{ height:100%; }

h2{
    font-size:25px;
}

.row{ --bs-gutter-x: 0px; }

.full-page-content-block h3
{
    font-size:15px;
    font-weight:bold;
}

h3.dotted-before:before
{
    border-radius:50%;
    height:8px;
    width:8px;
    background:var(--brand);
    content:'';
    display:inline-block;
    margin-right:5px;
    border:2px solid white;
    outline:1px solid var(--brand);
}

.order-chart .apexcharts-legend-series:nth-child(2) .apexcharts-legend-text
{
    background:#222222;
    color:white;
}

.adv-chart .apexcharts-legend-series:nth-child(2) .apexcharts-legend-text
{
    background:#DB4437;    
}

.adv-chart .apexcharts-legend-series:nth-child(3) .apexcharts-legend-text
{
    background:#3b5998;    
}

.order-chart .apexcharts-legend-series:nth-child(3) .apexcharts-legend-text
{
    background:#e0d95c;    
}

.order-chart .apexcharts-legend-series:nth-child(4) .apexcharts-legend-text
{
    background:#fbbc7b;    
}

.order-chart .apexcharts-legend-series:nth-child(5) .apexcharts-legend-text
{
    background:#e01249;    
}

.order-chart .apexcharts-legend-series:nth-child(6) .apexcharts-legend-text
{
    background:#222222;    
}

.filter-label-block .mini-text
{
    font-size: 12px;
    line-height: 12px;
    margin-left: 10px;
}

.text-right
{
    text-align: right;
}

.h-100 {
    height: 100%!important;
}

button{
    border:none;
    box-shadow:unset;
    background-color:inherit;
    color: inherit;
}

*{
    box-sizing:border-box;
}


.fade-enter-active,
.fade-leave-active
{
    transition: opacity .9s
}

.fade-enter,
.fade-leave-to{
    opacity: 0
}

html,
body
{
    height:100%;
    background-color: var(--sfondo);
    color: var(--text-color);
    font-family:"Rubik"; 
    font-size:15px;
}

.color-text{ color: var(--text-color) !important;}

body{
    overflow-x:hidden !important;
}

main,
.content{ height:100%; }

main:has(aside)
{
    padding-left:70px;
}

.modal-header-tabs-container 
{
    border-bottom:1px solid var(--light-grey);
}

.filter-label-block .filter-count,
.date-selector .filter-count,
.filter-block .filter-count
{
    opacity: 0.1;
    font-size: 12px;
    font-weight:bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cdc5c5;
    text-align: center;
    line-height: 20px;
}

.header-back-button img
{
    height:30px;
}

.header-back-button
{
    padding:0px 15px;
    border-left:1px solid #ffffff1a;
    margin-left:8px;
}

.modal-header-tabs-option.active
{
    background-color: var(--light-grey);
}

.modal-header-tabs-option
{
    cursor: pointer;
    flex-basis:0;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

@media( max-width:768px )
{
    .modal-header-tabs-option
    {
        font-size: 11px;   
    }

    .vuejs3-datepicker__calendar
    {
        height: min-content;
        position: fixed !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.modal-header-tabs-option:not(:last-child)
{
    border-left:1px solid var(--light-grey);
}

.alt-font{ font-family:Teko; }
.alt-color{ color:var(--brand); }

.sidebar-text .alt-color{ color:#ff6363 !important; }

::-webkit-scrollbar { width: 8px; height:8px; }  
::-webkit-scrollbar-track { background: #f1f1f1;}
::-webkit-scrollbar-thumb { background: #e0cece;border-radius:3px;  }
::-webkit-scrollbar-thumb:hover { background: #555  }
/*
/* Swup
*/

.default-button,
.form-group.has-icon:after,
.filter-check + label,
.small-link,
.project-edit-block .block-icon,
.organization .block-icon,
.options-modal-content,
.project-actions i,
.close-canvas,
.filters-mobile i,
.filters-mobile-list,
.filters-overlay,
.options-modal,
.close-filters-mobile,
.filters-mobile,
.sidebar-project-icon,
.filter-button,
.saved-project,
.image-container .reset-image,
.sorting-icon,
.filter-sorting,
.organization,
.actions-container .block-icon,
.vuejs3-datepicker__clear-button,
.chat-gpt-button,
.chat-gpt-button img, 
.choice-selector .choice,  
.result-card .data-container > div  i,
.results-container-item,
.date-selector 
{
    transition: 300ms ease all;
}

.page-enter-active,
.page-leave-active {
  transition: all .8s;
}

.page-enter,
.page-leave-active {
  opacity: 0;
}

.overlay
{
    position:Absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
}

.filter-sorting.small
{
    height:40px;
    width:40px;
}

.filter-sorting
{
    cursor:pointer;
    height:46px;
    width:50px;
    border-radius: 0.25rem;
}

.filter-sorting:hover
{
    background: var(--brand);
    color:White;
}

.sorting-icon.rotated
{
    transform:rotate( 180deg );
}

.point-value
{
    border-radius: 50%;
    display:flex;
    align-items: center;
    justify-content: center;
}

.organization .empty small
{
    opacity: 0.2;  
}

.point-value.empty
{
    background-color: #3c414c !important;
}

.point-value.orange
{
    color:white;
    background-color: var(--brand);
}

.point-value.micro
{
    height:14px;
    width:14px;
    opacity:1;
    font-size: 9px;
    line-height: 10px;
}

.actions-container
{
    border-radius:20px;    
}

.actions-container .block-icon
{
        color:rgb(135 108 108 / 30%);
    width:40px;
    height:40px;
    position:Relative;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    margin-left:-10px;
    cursor:pointer;
}

.actions-container .block-icon i{font-size: 12px;}

.actions-container .block-icon:hover
{
    background-color:var(--brand);
    color:White;
}

.result-card .data-container
{
    
    position: absolute;
    right: -10px;
    top:-8px;
    z-index: 99; 
}

.comments-container
{
    margin-left:-8px;
}

.comments-container, 
.notices-container
{

    border-radius: 50%;   
    height: 30px;
    background: #f3f6fb;
    padding: 3px 8px;
    justify-content: center;
    width: 34px;   
    align-items: center;
    border: 2px solid white;       
    cursor: pointer;
}


.result-card .data-container > div:hover i
{
    color:Var(--brand);
}

.result-card .data-container > div 
 {
    position: relative;
 }

.result-card .data-container > div  i
{
    font-size: 15px;  
    color: var(--input-border-color);
}

.organization-content i, 
.card-title-suffix i
{
    font-size: 0.8em;
    margin-top: 4px;
}

.v-selection-control
{
    min-height:auto !important;
}

body .v-switch__track
{
    opacity: 1 !important;
    background-color:#e5e5e5;
}

.renewal-price-period
{
    font-size: 0.7em;
    font-weight: bold;
}

body .v-field--variant-solo {
    background: white;
    --v-input-control-height: 46px !important;
    box-shadow:unset !important;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border-color);
}

body .v-label.v-field-label--floating
{
    font-size:9px !important;
}

.v-field-label
{
    font-size:12px !important;
    opacity:0.4 !important;
    font-weight:500;
}

.v-field__prepend-inner
{
    width:35px;
}

.v-input__details
{   
    width:100%;
    text-align: right;
    padding:0px !important;
    margin-top:-4px;
    padding-bottom:3px !important;
}

body .v-field--variant-solo input,
body .v-field--variant-solo textarea
{
    font-weight:500;
    font-size:13px;
}

.v-field__prepend-inner i
{
    opacity:0.2 !important;
}

.labels-container
{
    gap:3px;
}

.labels-container .filter-label-block
{
    width:calc( 50% - 2px );
    margin-bottom:0px !important;
}

.filter-label-block
{
    width:50%;
    position:relative;
    margin-bottom: 4px !important;
}

.filter-label-block label
{
    display:flex;
    align-items: center;
    margin-bottom:4px;
}

.filter-label-block img
{
    height: 25px;
    width: auto;
    object-fit: cover;
    margin-right: 5px;
    margin-left: -10px;  
    padding: 2px;  
}

.font-weight-bold{ font-weight:bold; }
.organization,
.organization-member
{    
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-bottom:20px;
}

.overlay.dark
{
    background-color:#f9f9f9f7;
}

.left-side-content img
{   
    max-width:210px;
}

.carded-box
{
    border: 1px solid rgba(0,0,0,0.04);
    background: linear-gradient(270deg, rgba(243,246,251,1) 0%, rgba(255,255,255,1) 35%);
    position: relative;
    border-radius: 7px;
}

.after-date-container
{
    padding-left:30px;
}


.calendar-day-container .day-year
{
    line-height: 12px;
    padding: 5px 0px 3px 0px
}

.calendar-day-container .month
{
    font-size:12px;
}

.calendar-day-container .year
{
    font-size:8px;
    font-weight:bold; 
}

.tire-sale 
{
    min-width:260px;
    margin: 10px;
    width:100%;
}

.tire-sale--content
{
    min-height:132px;
}

@media( max-width:768px )
{
    .tire-sale 
    {        
        width:100%;
    }
}

.suggested-tires-filters
{
    position:sticky;
    top:-1px;
    z-index:999;
}

.no-scrollbar::-webkit-scrollbar
{

   display:none;

}

.opacity
{
    opacity:0.2;
}

.pt-50
{
    padding-top:50px !important;
}

.tire-sale--price
{   
    padding: 2px 10px;
    font-size: 24px;
    /* align-self: stretch; */
    POSITION: absolute;
    line-height: 15px;
    top: 15px;
    right: 5px; 
}

.tire-suggestion--availability
{
    display: flex;
    position: Absolute;
    gap: 2px;
    top: -10px;
    right: -5px;
}


.lined-div .divider
{
    flex-grow:1;  
    flex-shrink:1;
    display:block;
    margin:0px 20px 0px 20px;
    height:1px;
    background:Var(--light-grey);
}

.tire-suggestion--availability-value
{
    padding: 2px;
    z-index: 99;
    border: 1px solid var(--light-border);
    background: white;
    font-size: 9px;
    width: 23px;
    font-weight: bold;
    border-radius: 50%;
    height: 23px;
    line-height: 18px;
    text-align: center;
}

ol
{
    margin:0px !important;
}


.tire-suggestion
{
    padding-left:45px !important;     
}

.button.input-height
{
    height:52px;
}

.tire-sale--compile
{
    position:absolute;
    right:10px;
    bottom:10px;
}

.tire-sale--desc 
{
    opacity: 0.8;
    font-size: 13px;
    line-height:15px;
    font-style: italic;
}

.tire-sale--brand
{
    text-transform: uppercase;
    font-size: 19px;
    font-weight: 500;
    font-family: 'Teko';
}

.tire-sale--brand .card-ribbon,
.card-ribbon.extra
{
    font-size: 12px;
    width:fit-content;
    margin-top: -4px;
}

.tire-sale--details
{
    font-size:10px;    
}

.tire-sale--details i
{ 
    color:var(--brand);
    margin-right:2px;
    font-size:8px;
}

.tire-sale.MANODOPERAMECCANICA::after
{
    background:#1b2655;
}

.tire-sale.MECCANICA::after
{
    background:#1a2a6b;
}


.tire-sale.REVISIONE::after
{
    background:#424340;
}

.tire-sale.VETTURA::after,
.tire-sale.AUTOCARRO::after
{
    background:#c61e33;
}

.tire-sale.PRESTAZIONIVETTURA::after,
.tire-sale.PRESTAZIONIAUTOCARRO::after
{
    background:#ee1c25e8;
}

.tire-sale.ACCESSORI::after
{
    background:#9f3254;
}

.tire-sale.AMMINISTRAZIONE::after
{
    background:#5b5b91;
}

.tire-sale.REVISIONE .calendar-day-container .alt-color
{
    color:#d31a22 !important;
}

.tire-sale
{
    background-image:url('/img/TireSaleBase.png');
}

.tire-sale::after
{
    content: '';
    position: absolute;
    border-radius:5px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.tire-sale.VETTURA .calendar-day-container .alt-color
{
    color:#d31a22 !important;
}

.tire-sale.AMMINISTRAZIONE .calendar-day-container .alt-color
{
    color:#4b657e !important;
}

.tire-sale.USATO::after {
    background: #dddddde8;
}

.tire-sale.SCONTOMERCE::after {
    background: #ffffffe8;
}

.tire-sale.SCONTOMERCE,
.tire-sale.USATO,
.tire-sale.USATO .tire-sale--price,
.tire-sale.SCONTOMERCE .tire-sale--price
{
    color:#615757 !important;
}

.tire-sale.PRESTAZIONIVETTURA .calendar-day-container .alt-color
{
    color:#b51843 !important;
}

.carousel__pagination-button::after 
{
  
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: var(--light-grey) !important;
   
}

.carousel__pagination-button.carousel__pagination-button--active::after
{
    background-color: var(--brand) !important;
}

.tire-sale.ACCESSORI .calendar-day-container .alt-color
{
    color:#645896 !important;
}

.tire-sale .card-ribbon
{
    background: #f3f6fb29;
}

.card-ribbon
{
    background: var(--light-grey);
    border-radius: 3px;
    font-size: 10px;
    padding: 4px 6px 0px 6px;
}

h2::after
{
    content:'';
    height:1px;
    width:30px;
    background:var(--brand);
    display:block;
}

.gray-text
{
    color:#5f5f5f !important;
}

.tire-sale--prices-price.suggested
{
    line-height: 10px;
    font-size: 20px;
}

.tire-sale--prices-price.discounted
{
    margin-right: 8px;
    font-size: 17px;
    opacity: 0.3;
}

.tire-sale--prices-price.minimum
{
    font-size: 17px;
}

.empty-message
{
    color:#978f8f;
}

.standard-subtext,
.v-checkbox label
{
    color:#494747;
    line-height:15px;
    opacity:1;
    font-size:13px;
}

.boxed-with-outline
{
    border: 2px solid white;
    padding: 5px;
    border-radius: 50%;
    outline: 2px solid var(--light-grey);
    background: #efe8e8;
}

.carded-box--left-image img
{
    width:35px;
    opacity: 0.8;
}

.calendar-day-container
{
    position: Absolute;
    left: -15px;
    transform: translateY( -50% );
    top: 50%;
    color:var(--text-color);
}

.carded-box--left-image
{
    position:Absolute;
    left:-20px;
    top:50%;
    transform:translateY( -50% );
}

.calendar-day-container
{
    background:White;
    border-radius:6px;
    width:45px;
    
   
    overflow:hidden;
    border:1px solid var(--light-border);
}

.overlay.black
{
    background-color: #091540e0 !important;
}

.left-side{ width:40%; background-size:cover; background-position: center center;}
.left-side.small{ width:550px; flex-shrink:0; }
.right-side{ overflow:auto; flex-grow:1; overflow-x:hidden; }

.right-side-content{ max-width:600px; width:100%; z-index:9;  }
.right-side-content.small{ max-width:450px; }

.left-side-padding,
.right-side
{
    padding:150px 70px 70px 70px;
    position:relative;
}

.fullpage .left-side
{
    width:100%;
    height:100vh;
    text-align:Center;
}

.left-side-content{ max-width:550px; }

@media( max-width:768px )
{
    .left-side-content h1
    {
        padding-top:80px;
    }
}

.left-side-content,
.right-side-content
{   
    position:relative;
}

.left-side h1{ 
    font-size: 25px;
    margin-bottom: 20px;
    line-height: 40px; }
.left-side h1.error strong{ font-size:120px;  }


.left-side h1 
{ 
    font-family: var(--alt-font);
    text-transform: uppercase;
}

.left-side h1 strong
{ 
    color: var(--brand);
    font-size: 65px;   
    font-weight: 500;    
 }

.left-side.login-image{ background-image:url(/img/login.jpg); }
.v-snackbar--variant-elevated
{
    background:White !important;
    color:var(--text-color) !important;
}


.default-button.inactive
{
    background:var(--light-grey) !important;
    color:#b5b5b5 !important;
    border:1px solid #efefef;
}

.default-button
{
    font-size:12px;
}


.default-button,
.v-snackbar button
{
    color: var(--button-text-color) !important;
    background-color: var(--brand);    
    text-transform: uppercase;
    font-weight:600;
    padding: 10px 55px;
    border:none;
    border-radius:5px;
    cursor: pointer;
}

.v-snackbar button
{
    font-size: 10px !important;
    padding: 8px 55px !important;
}   

.default-button.loading
{
    padding:5px 35px;
}

.system-prompt-icon
{
    font-size: 8px;
    opacity: 0.2;
}

.v-snackbar--variant-elevated
{
    box-shadow:0 4px 12px 0 #0000001a !important;
}

.v-snackbar__content
{
    max-width:400px !important;
    font-size:13px !important;
}

.default-button.extrasmall, 
.v-snackbar button
{
    font-size:11px !important;
    padding:8px 25px 8px 25px !important;
    height:34px !important;
}

.text-break
{
    word-break: break-all;
}

.default-button.small
{
    font-size: 13px;
    padding: 10px 35px 10px 35px;
}

.default-button.mini{ font-size:10px; padding:7px 15px; height:27px;}
.default-button.minimini{ font-size:9px; padding:3px 8px 2px 8px;}
.default-button.medium{ padding: 10px 35px; }

.edited-by
{
    font-size:13px;
    text-align: right;
    line-height:13px;
}

.button-loader-img
{
    height:100%;
}

.button.mini .button-loader-img, 
.button.extrasmall .button-loader-img
{
    height:10px;
}

.default-button.loading
{
    height:50px;
}

.default-button.mini.loading
{
    height:29px;
}

.edited-by i{ 
    font-size: 23px;
    margin-left: 9px; 
}

.micro{ font-size:11px; opacity:0.6; }
.button:hover, 
.button.dark:hover,
.default-button.loading,
.image-container .reset-image:hover
{   
    background-color: var(--button-hover) !important;
    color:var(--button-hover-text) !important;
}


/* Input */ 
.input-bordered input,
.input-bordered select,
.input-bordered textarea,
.input-bordered .modal-select
{
    font-family:"Rubik";
    font-size:13px;
    font-weight:500;
}

.text-with-line .line
{
    height:1px;
    background:var(--light-border);
}

.text-with-line span
{
    font-size: 10px;
    color: #bdbaba;
    text-transform: uppercase;
}

.text-with-line .post-line 
{
    flex-grow:1;
}

.section-standard
{
    padding:40px;
}

.text-with-line.center .pre-line, 
.text-with-line.center .post-line
{
    flex-shrink:1;
    flex-grow:1;
}

.text-with-line .pre-line
{
    width:20px;
}

.analytic-full-card 
{
    border:1px solid #edecec;
    border-radius:5px;
}

.analytic-row-title
{
    border-bottom:1px solid #edecec;
}

.analytic-row
{
    font-size:13px;
}


.campaign-type .ribbon 
{
    padding: 2px 5px;
    width: 70px;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    font-size: 10px;
}

.brand-bg
{
    color: white !important;
    background: var(--brand) !important;
}

.campaign-type.facebook .ribbon, 
.fb-bg
{
    color:white !important;
    background: var(--fb-bg) !important;
}

.fb-color
{
    color: var(--fb-bg) !important;
}

.black-bg
{
    background-color: #000;
}

.campaign-type.google .ribbon
{
    color:white;
    background-color: #DB4437;
}

.chat-gpt-button.rotatingGrow
{
background-color: #e3cccc !important;
}

.chat-gpt-button.rotatingGrow img
{
    animation:rotatingGrow  3s infinite;
}

@keyframes rotatingGrow 
{
    0%   { transform:rotate( 0deg ) scale( 1); }
    25%  { transform:rotate( 90deg )scale( 1.15);}
    50%  { transform:rotate( 180deg )scale( 1.25);}
    75%  { transform:rotate( 270deg )scale( 1.15);}   
    100% { transform:rotate( 360deg )scale( 1); }
  }


.campaign-type.active-campaign .ribbon
{
    color:white;
    background: var(--ac-bg);
}

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

.analytic-row-columns > div 
{   
    text-align: right;
}

.vd-picker-header
{
        background-color:var(--brand) !important;
        border-color:var(--brand) !important;
        color:var(--button-text-color) !important;
}

.main-content.scrollable
{
    height:100vh;
}

.main-content.scrollable .full-page-content-block
{
    overflow:auto;
}

.filter-month .vd-wrapper
{
    width:200px;
    flex-grow:0;
}

.filter-month .vd-picker__input
{
    background:var(--brand) !important;
    color:var(--button-text-color) !important;
}

.no-results img
{
    opacity: 0.05;
    width: 400px;
    max-width: 95%;
}

.option-subtitle
{
    font-weight: bold;
    font-size: 11px;
}

.form-group.input-bordered
{
    position:relative;
}

.input-bordered:hover span:not(.tip):not(.invalid-feedback)
{
    color:white;
    font-weight:bold;
}

.form-group.has-select .select-icon
{
    border-left: 1px solid var(--input-border-color);
    border-right:none !important;
    color:black;
}


.form-group.has-icon:hover .icon,
.form-group.has-select:hover .icon
{
    background:var(--brand);   ;
}

.form-group.has-icon:hover .icon i,
.form-group.has-select:hover .icon i
{    
    color:White;
    opacity:1;
}

.border-3
{
    border-radius:3px;
}

.calendar-day-container{
    pointer-events: none;
}

.form-group.has-select .placehoder
{
    pointer-events: none;
    color: #c0beb6;
    position: absolute;
    font-weight: 500;
    bottom: 8px;
}

.form-group.has-icon.multiple-input input:first-of-type
{ padding-left:50px !important; }

.form-group.has-icon input:first-of-type, 
.input-bordered.has-icon:not(.form-group-search) select,
.form-group.has-select.has-icon .placehoder
{ padding-left:65px !important; }


.form-group.has-icon .icon,
.form-group.has-select .select-icon
{    
    position:absolute;
    pointer-events: none;
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    top:1px;   
    height: calc( 100% - 1px);
    width: 52px;   
    border-right: 1px solid var(--input-border-color);
    pointer-events:none;   
}

.form-group.has-icon .icon i,
.form-group.has-select .select-icon i {
    color: black;
    opacity: 0.2;
}

.form-group.has-select.small .icon
{
    height:38px;
}

.image-container .reset-image
{
    position:absolute;
    right:5px;
    top:5px;
    border-radius:50%;
    width:30px;
    height:30px;
    z-index:999;
    cursor:pointer;
    background-color:var(--rosso);
}

.input-results-container
{
    gap:5px;
}

.results-container-item
{
    padding: 0px 18px 0px 10px;
    border-radius: 7px;
    background: var(--light-border);
    font-size: 11px;
    position: Relative;   
    cursor:pointer;
}

.results-container-item::after
{
    content: '✕';
    position: absolute;
    right: 2px;
    top: 50%;
    width: 11px;
    font-size: 7px;
    border-radius: 50%;
    transform: translateY(-50%);
    height: 11px;
    background: #d9c5c5;
    text-align: center;
    line-height: 11px;
    font-family: Arial;
}

.image-container .reset-image i{ font-size:13px; }

.has-point-before::before
{
    content:'';
    height:6px;
    width:6px;
    border-radius: 50%;
    background-color: red;
    display:inline-block;
    position: relative;
    margin-right:5px;
    top:-1px;
}

.project-create-image{ height:150px; object-fit:cover; cursor:pointer; border-radius: 5px;}

.form-group.has-icon .icon{ left:1px;  border-radius:3px 0px 0px 3px; max-height:50px; }
.form-group.has-select .select-icon{ right:1px;  border-radius:0px 3px 3px 0px; }

.input-bordered.has-bg-white :is(input, select, textarea)
{
    background-color: white;
}


.input-bordered input,
.input-bordered select,
.input-bordered textarea,
.input-bordered .switch,
.input-bordered .modal-select
{
    
    background-color: var(--input-bg);   
    border:1px solid var(--input-border-color);
    border-radius:3px;
    padding: 24px 16px 16px 16px;
    height:52px;
}

.input-bordered:not(.form-group-search) input, 
.input-bordered textarea
{  
    
    padding: 22px 16px 16px 16px; 
}

.input-bordered.has-icon:not(.form-group-search):not(.multiple-input) input
{
    padding-top:29px !important;
}

.input-bordered.light input
{
    background-color: var(--light-grey);
    border:1px solid var(--light-grey);
}

.option-subtitle
{
    font-weight:bold;
    font-size:9px;
}

.option-subtitle i
{
    color:var(--brand);
    
}

.stores-modal .modal-option .option-image
{
    background:transparent;
    border-radius:0;
    width:60px;
}

.stores-modal .modal-option .option-main img
{
    height:45px;
    border-radius:5px;
}

.input-bordered .modal-select{ cursor:pointer; line-height:15px; padding: 17px;}
.input-bordered:hover .modal-select{ padding-left:16px; }

.no-access
{
    opacity: 0.2;
    font-size: 13px;
}

.cursor-pointer{ cursor:pointer; }

.input-bordered.small select
{
    height:40px;
    padding-top:0px;
    padding-bottom:0px;
}

.input-bordered textarea
{
    height:auto !important;
}

.input-bordered select
{
    padding:12px;
    padding-left:16px;
}

.input-bordered:not(.multiple-input):hover input,
.input-bordered.multiple-input input:hover,
.input-bordered:hover select,
.input-bordered:hover .modal-select,
.input-bordered:hover textarea,
.input-bordered:focus input,
.input-bordered:focus select,
.input-bordered:focus textarea
{
    border:1px solid var(--brand) !important;  
}

.copy-container > div 
{
    flex-basis:50%;
    flex-shrink:0;
}

.ad-revision-number
{
    height:25px;
    width:25px;
    font-size:11px;
    font-weight:bold;
    cursor: pointer;
    border-radius:5px;
    text-align: center;
    line-height:25px;
    margin-right:5px;
    background:Rgba(0,0,0,0.05);
    transition:300ms ease all;
}

.ad-revision-number.active,
.ad-revision-number:hover
{
    background:var(--brand);
    color:White;
}
.copy-container .original-copy
{
    background-color: #fffeff;
    border-right: 1px solid var(--light-grey);
}
.reworked-copy .empty
{
    opacity:0.3;
}

.chat-gpt-button
{
    position:absolute;
    left:50%;
    top:50%;
    transform:Translate( -50%, -50% );
    border-radius:50%;
    background-color:black;
    padding:5px;
    width:40px;
    height:40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-gpt-button img
{
    height:25px;
}

.image-input-bordered .input-tip
{
    background: white;
    bottom: -5px;
    width: auto;
    right: -5px;
    text-transform: lowercase;
    padding: 0px 5px; 
    font-size: 10px;
    color: #c1adad;   
    border-radius: 5px;
    display: block;
    position: absolute;
    
}

.max-400{ max-width:400px; }
html{ overflow:auto !important; }

.input-bordered span:not(.tip):not(.invalid-feedback):not(.slider)
{
    display: block;
    position: absolute;
    left: 0px;
    top: -8px; 
    font-family: Rubik;
    pointer-events: none;
    max-width:200px;
    transform: translateY(-30%);
    text-transform: lowercase;
    padding: 0px 5px;
    background-color:transparent;
    font-size: 9px;
    color: #c1adad;
}

.input-bordered:not(.form-group-search) input
{
    height:52px;
}

.card-main-image
{
    height: 40px;
    width: 40px;
    border-radius: 3px;
    object-fit: cover;
}

@media( max-width:760px )
{
    .card-main-image
    {
        width:40px;
        height:40px;
    }
}

.input-bordered:not(.form-group-search).small input
{
    height:32px;
}

.input-bordered.has-icon span:not(.tip):not(.invalid-feedback):not(.slider)
{
    left:60px !important;
}

.input-bordered.has-pretext span:not(.tip):not(.invalid-feedback):not(.slider)
{
    left:157px !important;
}

.input-bordered:not(.form-group-switch) span:not(.tip):not(.invalid-feedback):not(.slider)
{ 
 
    left: 11px;
    top: 15px;
}

.form-group.input-bordered
{    
    margin-bottom:10px;
   
}

.invalid-feedback{ color:var(--brand); font-size:11px; }
.form-control.is-invalid, .was-validated .form-control:invalid{ border-color:#f98186; }

.project
{   
    height: 220px;    
}


.revision-parameter
{
    background: var(--light-grey);
    padding: 3px 5px;
    font-size: 13px;
    border-radius: 5px;
    margin-right: 5px;
    font-weight: bold;
}


.carded-box.gpt
{
    background: linear-gradient(270deg, rgb(244 247 252) 0%, rgb(239 232 232) 35%);
   
}

.carded-box.old
{
    background:linear-gradient(270deg, rgb(217 217 217) 0%, rgb(241 241 241) 35%);
}

.filter-card
{ 
    min-height:100px;    
}

.analytic-heading
{
    border-radius:5px;
    background-color: var(--light-grey);
    border:1px solid #edecec;
}

h2{
    margin-bottom:0px !important;
}

.analytic-heading h2 
{
    margin:0px;
    font-size:20px;
}

.project-analytic-image
{
    height:100%;
    width:100px;
    
}

[v-cloak] {
display: none;
}

.project-image,
.project-content
{
    position:relative;
    width:50%;
    height:100%;    
}

.project-image-cover,
.project-logo
{
    object-fit:cover;
}

.project-image{ border-radius: 7px 0px 0px 7px; }

.card-badge-left-bottom.textual{ text-align:center;width:25px;height:25px; line-height:20px; font-size:10px; font-weight:bold; }
.card-badge-left-bottom{ position:absolute;  bottom:-5px; left:-10px; overflow:hidden; border-radius:50%; border:2px solid white; outline:1px solid rgba(0,0,0,0.04);  }
.project-logo{ 
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    max-height: 60px;
    width: auto;
    max-width: 60%;
 }

 .back-button
 {
    position: absolute;
    top: 40px;
    right: 0%;
    transform: translateX( 50% );
    background: white;
    border-radius: 4px;   
    border: 2px solid var(--light-grey);
    padding: 10px 30px;
    z-index: 999;
 }

 .back-button:hover
 {
     color:White;
     background:var(--brand);
 }

 .filter-bar-img 
 {
    height: 35px;
    width: 35px;
    transition:300ms ease all;
 }



.result-card .data-container .point-value
{    
    right:0px;
    z-index: 9;
    color: white !important;
    background: #e0cece !important;
    bottom: -5px;
    position: absolute;
    right: -4px;
}

.card-owner-badge img,
.card-badge-left-bottom img,
.project-image-cover{ height:100%; width:100%; object-fit: cover; }


.card-owner-badge img{ height:25px; width:25px; border-radius:50%; }

.organization-avatar img{ height:100%; width:100%; border-radius:3px; object-fit: cover;}

.card-badge-left-bottom img
{ height:30px; width:30px; object-fit: cover;  }
span.mini{ font-size:0.7em; }

.project .next-price
{
    position: absolute;
    padding: 4px 15px;
    right: -15px;
    color: white;
    font-weight: bold;
    top: 10px;
    font-size: 13px;
    box-shadow: 0px 2px 15px 5px #0000001a;
    border-radius: 5px;
    transform: rotate( 45deg );
}

.result-card .form-group-switch
{
    width:150px;
}

.result-card.new::after
{
    content:'NEW';
    position: absolute;
    font-weight:bold;
    right:-5px;
    bottom:-5px;
    font-family:Gloria Hallelujah;
    border-radius:20px;
    padding:1px 5px;
    font-size:8px;
    background:var(--brand);
    color:white;
    transform: rotate(-20deg);
}

.project .project-name,
.project-analytic .project-name
{
    font-weight: bold;
    font-size: 16px;
    padding-right: 30px;
    line-height: 20px;
    margin-bottom: -2px;
}

.small-link{
    color:White;
    font-size:10px;
    font-weight:bold;
}

.small-link:hover{ color:var(--brand); }

.project .project-description
{    
    font-size: 13px;   
}

.filter-card.inactive 
{
    filter:grayscale( 100% );
}

.project .project-url,
.result-card .project-url
{    
    font-size: 10px;    
    color: var(--brand);
    text-decoration: none;  
    font-weight:bold;
}

.project .project-url i{ margin-right:5px;  margin-bottom:20px; }
.project .project-duedate .text{

    font-size: 10px;
    line-height: 10px;
    font-style: italic;
    font-weight:bold;
}


.project .project-duedate
{

    font-size: 10px;
    
}

.bg-verde{ background:var(--verde); }
.bg-rosso{ background:var(--rosso); }
.bg-orange{ background:var(--brand); }
.bg-blue{ background:#54547a; }

.sticky-top
{
    position: sticky;
    top:0px;
}

.card-container
{
    display:grid;
    grid-template-columns: repeat( 4, 1fr );
    gap:20px;
}

.card-container-50
{
    display:grid;
    grid-template-columns: repeat( 2, 1fr );
    gap:20px;
}

.sticky-top .filter-block .vuejs3-datepicker:last-child
{
    margin-left:20px;
}

.w-90
{
    width:90px !important;
}

.w-80
{
    width:90px !important;
}

.w-150
{
    width:150px !important;
}

.w-110
{
    width:110px !important;
}

.w-130
{
    width:130px !important;
}
.w-250
{
    width:250px !important;
}
.w-300
{
    width:300px !important;
}

.w-200
{
    width:200px !important;
}

.product-customer-choice img
{   
   height:30px;
}

.product-customer-choice
{
    
    display:flex;
    justify-content: center;
    align-items: center;      
    background:white;   
    border-radius:50%; 
    position:absolute;
    left:-20px;
}

.analytic-card 
{     
    border:none; 
    border:1px solid var(--light-grey);
    border-radius:5px;       
}

.analytic-card .card-big--heading
{
    background: var(--light-grey);
    border-bottom: 1px solid var(--light-grey);   
    line-height: 28px; 
}

.choice-selector
{ 
       background: var(--light-grey);
    padding: 6px;
    border-radius: 3px;
}


.customers-container-heading
{
        padding: 15px 20px;
    background: var(--light-grey);
    border-top:1px solid white;
    border-bottom:1px solid white;
    position: sticky;
    top: 77px;
    z-index: 888;
}

.choice-selector .choice:nth-child(1 )
{
    border-radius: 3px 0px 0px 3px;
}


.customers-container-heading i.shrink
{
    color: #d7b7c0;
    padding: 8px;
    border-radius: 50%;
    background: #efe8e8;
    cursor:pointer;
}

.choice-selector .choice:nth-child(2 )
{
    border-radius: 0px 3px 3px 0px;
}

.choice-selector .choice:hover,
.choice-selector .choice.active
{
    color: black;
    background: var(--input-bg);
}


.choice-selector .choice
{
    padding: 8px 15px;
    cursor:pointer;
    background: var(--light-grey);
    font-size: 13px;
    color: #c9a5a5;    
}

.analytic-card .card-big--heading .block-icon i
{
    font-size: 12px;
    opacity: 0.2;
}

.analytic-card .card-big--heading .block-icon:Hover i
{
    opacity:1;
}

.analytic-card .card-big--heading .block-icon
{
    cursor: pointer;
    border-radius: 50%;
    height: 25px;
    display: flex;
    width: 25px;
    background: Rgba(0,0,0,0.02);
    align-items: center;
    justify-content: center;

}

.analytic-card .main-value
{
    font-size:25px;
}

.bottom-button
{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #d3b3b3;
    text-align: center;
    background: white;
    box-shadow: 0px 4px 10px 5px rgb(0 0 0 / 5%);
    bottom: 65px;
    right: 30px;
    line-height: 40px;
    z-index: 1998;
}

.card-big--ribbons
{
    gap:10px;
}

.card-big--ribbons .ribbon 
{
    background:var(--light-grey);
    border-radius:3px;
    font-family: Teko;
    font-size:14px;
}

.card-big--heading-title-ribbon {
    position: absolute;
    outline: 1px solid var(--light-grey);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    top: 7px;
    font-size: 14px;
    text-align: center;
    transform: rotate( -15deg );
    line-height: 27px;
    left: -10px;
    background: var(--light-grey);
    font-weight: bold;
    border: 2px solid var(--dashboard-heading-border-color);
    color: var(--card-icon-bg);
}

.card-big--ribbons .ribbon .value
{
    font-weight:bold;
}

.sub-section-title
{
    width:160px;
    text-align:left;
    font-weight:bold;
    line-height: 11px;
    font-size: 11px;    
    flex-shrink:0;
}

.lined-card
{   
    display:flex;
    justify-content: space-between;
    align-items:center;
    flex-flow:Row;
    border:1px solid var(--light-grey);
    min-width:250px;
    flex-grow:0;
}

.lined-card > div 
{   
    padding:8px 15px;
    height:46px;
    line-height:30px;
    background-color: var(--light-grey);
}

.lined-card .value{ width:60%; background:White; font-size:16px !important; }

.analytic-card.with-series
{
    flex-flow:row;
    width: 300px;
    min-width: 22%;
}

.vuejs3-datepicker #calendar-div 
{
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border-color);
}

.vuejs3-datepicker__value
{
    border:none !important;
}

.vuejs3-datepicker__value svg
{
    opacity:0.2;
}

body .vuejs3-datepicker__content
{
    font-size: 13px;
    line-height: 24px;
}

.vuejs3-datepicker__calendar
{
    right:0px !important;
}


.vuejs3-datepicker__calendar-topbar, 
.vuejs3-datepicker__calendar .cell.selected
{
    background-color: var(--brand ) !important;
}

#filters
{    
    background-color: var(--light-grey);
    width:100%;
    height:80px;
    z-index: 999;   
    border-bottom:2px solid white;
    margin-top:-5px;   
    box-shadow: 0px 7px 21px 2px rgba(0,0,0,0.06);
    border-top: 1px solid #efe8e8;
    border-bottom: 1px solid #efe8e8; 
}

#filters .input-bordered, .order-filter-block .input-bordered{ margin-bottom:0px; }
.order-select{ max-width:280px; }
.apexcharts-legend{ padding-left:0px !important; }
.filter-check + label
{
    cursor: pointer;
    font-size: 13px;
    padding: 12px 25px;
    background: var(--light-grey);
    font-weight: bold;
    margin-bottom:0px;   
    border-radius: 4px;
    flex-shrink:0;
}

.green-box {
    border: 1px solid #829b6a;
    color: #829b6a;
    background: #829b6a6e;
}

.red-box {
    border: 1px solid #e01249;
    color: #e01249;
    background: #e012496e;
}

.gray-box
{
    border: 1px solid #d5ced2;
    color: #a5a3a3;
    background: #dfdfdf6e;
}

@media( max-width:768px )
{
    .filter-check + label
    {
        font-size:11px;
        padding:12px 15px;
    }

    .calendar-day-container
    {   
        left: -10px;       
    }
}

.filter-heading 
{
    width:360px;
    min-width:25%;
    flex-shrink:0;
}

.vd-picker__input
{
    padding: 5px 10px;
    background: var(--light-grey);
    border-radius: 5px;
    margin-left:7px;   
}

#filters .vd-picker__input
{
        background:var(--input-bg);
        border: 1px solid var(--input-border-color);
   
}

.color-white
{
    color: white !important;
}


body .vd-picker__input:not(.vd-picker__input--no-date) .vd-picker__input-clear__icon .vd-icon.vd-icon
{ 
    height: 42px;
    min-width: 40px;
    width: 24px;
    position: absolute;
    color: white !important;
    transition:300ms ease all;
    top:0px;
    right:-2px;
    background: var(--brand);
    border-radius: 0px 5px 5px 0px;
}

body .vd-picker__input:not(.vd-picker__input--no-date) .vd-picker__input-clear:hover .vd-picker__input-clear__icon .vd-icon.vd-icon
{
    background-color:var(--button-hover);
    color:var(--black ) !important;
}

.full-page-heading h1
{
    line-height:35px;
    max-width:400px;
}

body .vd-picker__input input
{
    font-weight:bold !important;
    font-size:12px !important;
}

.remove-all{
    background: var(--brand) !important;
    color: white;
}

.page-item
{
    width: 35px;
    text-align: center;
    background: var(--light-grey);
    transition: 300ms ease all;
    line-height: 35px;
    margin: 2px;
    height: 35px;
    cursor: pointer;
    font-size: 12px;
}

.page-item.active
{
    background: var(--brand);
    color:white;
}

.page-item:hover
{
    color:black;
    background:var(--button-hover);
}

.filter-check.darker + label
{
    background: var(--input-bg);
}

.activeFilter
{
    line-height:12px;
    cursor: pointer;
    font-size: 13px;
    padding: 8px 15px;
    background: var(--light-grey);
    font-weight: bold;   
    border-radius: 4px;
    margin:2px;
    padding-right:35px;
    position: relative;

}

.bg-alt-gradient
{
    background: var(--alt-gradient);
}

.tire-option-input:checked + label, 
.tire-option.active,
.tire-option:hover,
.tire-option.active .counter,
.tire-option:hover .counter
{
    background:var(--alt-gradient);
    color:white;
}

.block-icon .point-value
{
    position: absolute;
    bottom: 7px;
    right: 5px;
}

.tire-option
{
    font-size: 11px;
    background: var(--light-grey);
    font-weight: bold;
    padding: 3px 0px;
    border-radius: 50%;
    color: #c5c5c5;
    width: 40px !important;
    line-height: 29px;
    height: 40px;
    transition: 300ms ease all;
}

.quotation-list-item.new-created .carded-box
{    
    background: #fbfae2;    
}

.fixed-actions
{
    display:flex;
    flex-flow:column;
    gap:5px;
    z-index:2000;
    align-items:flex-end;
}

.bottom-action:hover
{
    color:white !important;
    background: var(--brand) !important;
}

.fixed-actions .bottom-action {
    transition: 600ms ease all;
    box-shadow: 0px 4px 10px 5px rgb(0 0 0 / 5%);
    border-radius: 5px;
    display: flex;
    color: #4b3f3f;
    background: #f7f7f7;
    justify-content: center;
    align-items: center;
    padding: 5px;
    height: 50px;
}

#app:has(.fixed-actions) .result-container
{
    padding-bottom:80px;
}

.list-with-filters:has(.fixed-bottom-right)
{
    padding-bottom:80px;
}

.bottom-action-text
{
    max-width:0px;  
    transition: 300ms ease max-width;
}

.bottom-action:hover .bottom-action-text
{
    max-width:500px;
}

.fixed-actions .bottom-action i 
{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    width: 40px;
    height: 35px;
}



.quotation-action
{
        z-index:9;
        width:40px;
}

.quotation-action img
{
        filter:grayscale(100%);
        opacity:0.3;
        height:30px;
        transition:300ms ease all;
}

.quotation-action:hover img
{
        opacity: 1;
        filter:unset;
}

.tire-option .counter
{
    background-color: var(--light-grey);
    border: 2px solid white;
    font-size: 11px;
    position: absolute;
    border-radius: 50%;
    color: #a79292;
    width: 21px;
    bottom: -3px;
    line-height: 17px;
    right: -8px;
    text-align: center;
    height: 21px;
}
.tire-option-input:checked + label img,
.tire-option.active img,
.tire-option:hover img
{
    filter:invert(100%);
}

.tire-option img
{
    height:33px;
}

.border-right-none
{
    border-right:0px solid !important;
}


.border-top
{
    border-top:1px solid var(--light-border) !important;
}

.border-top-none
{
    border-top:0px solid !important;
}


.border-bottom
{
    border-bottom:1px solid var(--light-border) !important;
}

.border-bottom-none
{
    border-bottom:0px solid !important;
}

.bg-green:not(:hover):not(.inactive)
{
    background-color: #2c903e !important;
}

.border-right
{
    border-right:1px solid var(--light-border) !important;
}

.border-left
{
    border-left:1px solid var(--light-border) !important;
}

@media (min-width:768px)
{
    .border-md-right{ border-right:1px solid var(--light-border) !important; }
    .border-md-top{ border-top:1px solid var(--light-border) !important; }
    .border-md-bottom{ border-bottom:1px solid var(--light-border) !important; }
    .border-none-md-top{ border-top:0px solid !important; }
    .w-md-auto{ width:auto !important; }
}

.slider-with-bottom-arrows
{
    padding-bottom:25px;
}

.v-slide-group__prev
{
    right:45px;
}

.v-slide-group__next
{
    right:0px;
}

.v-slide-group__next, .v-slide-group__prev
{
    color:#917d7d !important;
    font-size:10px;
}

.v-slide-group__next, .v-slide-group__prev
{
    position: absolute;
    border-radius: 5px;
    bottom: 0px;
    border: 1px solid var(--light-border);
    background: #f3f6fb;
    min-width: 40px !important;
    height: 30px;
}

.right-side-row
{
    padding:50px;
    align-items: stretch;
}

.no-filters
{
    font-size:11px;
    opacity:0.1;
}

#selectedFilters:not(:empty)
{
    border-bottom: 1px solid #f6f4fd;
    padding: 1.5rem!important;
}

.activeFilter:after
{
    content: 'x';
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY( -50% );
    opacity: 0.1;
}

.activeFilter .filter-type
{
    font-size:7px;
}



.user-avatar--container img
{
    width:22px;
    aspect-ratio: 1;
    height:22px;
    border-radius: 50%;
}

.is-admin-icon
{
    color:var(--brand);
    position: absolute;
    font-size:10px;
    top:-2px;
    left:-4px;  

}

.quotation-selected-item
{
        min-height:85px;
}

.button-hover:hover
{
    background-color:var(--button-hover) !important;
    color:var(--button-hover-text) !important;
}

.button-hover:hover :is( i, span, ::before )
{
   
    color:var(--button-hover-text) !important;
    opacity:1 !important;
}

.filter-check + label:hover,
.filter-check:checked + label
{
    background-color:var(--brand);   
    color:White;
}

.filter-label-block:has(.filter-check:checked ) .filter-count,
.date-selector.active  .filter-count,
.date-selector:hover  .filter-count
{
    background-color: #00000087;
    opacity: 0.4;
}

.filter-label-block:not(:has(.filter-count)) .filter-check:checked + label:after
{
    content: '\f058';    
    font-family: 'Font Awesome 5 Free'; 
    position:absolute;
    right:10px; 
    color: #a71d23;
}

.filter-intro{ line-height:6px; height:40px; padding:0px 15px;   }
.filters-mobile-list .filter-intro{ padding:0px; }
#filters .filter-block:not(:first-child){ border-left: 1px solid #edeaf74c;  }
.project-count{     
    font-size: 25px;
    font-weight: bold;
    margin-right: 10px;
}

.project-title h2{ font-size:45px; font-weight:bold;line-height: 40px;  text-transform: uppercase;}

.project-edit-block div{ padding:20px; }

.project-edit-block
{
    position: relative;
    border-radius: 7px;
    box-shadow: var(--base-shadow);
    background-color: white;
    margin-bottom:20px;
    font-weight:bold;
    font-size:12px;
    cursor:pointer;
    height:70px;
}

.project-header-prefered
{
    font-size:28px;
    text-align: right;
}

.saved-project 
{
    color:var(--medium-grey);
    cursor:pointer;
}

.saved-project.active,
.saved-project:hover
{
    color:var(--brand);
}

.project-edit-block .block-icon,
.organization .block-icon
{
    border-left: 1px solid var(--light-grey); 
    background: var(--light-grey);  
    width:12%;
    border-radius: 0px 7px 7px 0px;
}

.project-edit-block.inactive .block-text
{
    opacity:0.2;
}

.project-edit-block:hover .block-icon,
.organization:hover .block-icon
{
    width:22%; 
    background:var(--brand);
    color:white;
}

a{ color:inherit; text-decoration:none; }

.round-icon
{
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    color:White;
    height:20px;
    width:20px;
    font-size:11px;
}

.project-description
{
    font-size:14px;
}

.right-side-heading
{
    margin-bottom:50px;
}

.right-side-heading h2
{
    font-weight:bold;
}

.permission-row
{      
       padding: 5px 0px 5px 10px;       
       margin-bottom: 10px;
       font-size: 12px;
       border: 2px dashed var(--light-grey);
       border-radius: 5px;
}

.full-page-heading .back-button
{
    bottom: -85px;
    left: -70px;
    right:auto;
    top:auto;
}

.button.floating
{
    position: fixed;
    bottom: 20px;
    right: 50px;
    padding:11px 70px;
}

.full-page-heading 
{
    padding:40px;
    background:var(--light-grey);
}

.full-page-content-heading,
.full-page-content-content:not(.tabled)
{
    padding:40px;
}


.full-page-content-block
{
    padding-left:40px;
    padding-right:40px;
    width:100%;
}

.full-page-content
{
    padding-bottom:50px;
    height:100%;
    overflow:auto;
}

.permission-row.no-border
{
    border:2px solid transparent;
}


.organization-avatar{ 
    height:70px; 
    width:80px; 
    border-radius:3px;
    overflow:hidden;
}
.permission-option{ width:60px; }
.permission-user-avatar
{
    border-radius:3px;
    height:30px;
    width:30px;
    margin-right:10px;
    object-fit:cover;
}

.v-selection-control__input [type="radio"],
.v-selection-control__input [type="checkbox"]
{
    opacity:1 !important;
}

.v-checkbox .v-selection-control.v-selection-control--dirty i
{
    color:var(--brand);
}

.v-checkbox .v-selection-control.v-selection-control--dirty i:before
{
    font-size:30px;
}

.v-checkbox .v-selection-control i
{
    border: 1px solid var(--input-border-color);
    background-color: var(--input-bg);
    opacity:1;
}

input[type="radio"]:before
{
    content: '';
    position: absolute;
    left:50%;  
    z-index:2;
    top: 50%;
    background: var(--brand);
    border-radius: 5px;
    width: 30px;
    height: 30px;
    display: block;
    -webkit-transition: 240ms;
    -o-transition: 240ms;
    transition: 240ms;
    -webkit-transform: scale(0) translate( -100%, -100% ) !important;
    -ms-transform: scale(0) translate( -100%, -100% ) !important;
    transform: scale(0) translate( -100%, -100% ) !important;
}

.break-all
{
    word-break: break-all;
}

.no-input-details .v-input__details
{
    display:none !important;
}



.v-selection-control__input::before
{
    background-color: rgba(0,0,0,0.06) !important;
}

input[type="radio"]:checked:before, 
input[type="checkbox"]:checked:before 
{
    webkit-transform: scale(0.5) translate( -100%, -100% ) !important;
    -ms-transform: scale(0.5) translate( -100%, -100% )  !important;
    transform: scale(0.5) translate( -100%, -100% ) !important;
}

input[type="radio"]:after
{
    content: '';
    display: block;
    background:var(--input-bg);
    border-radius:5px;
    position: relative;
    top: 50%;
    left:50%;
    transform: Translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border: 1px solid var(--input-border-color);
    -webkit-transition: 240ms;
    -o-transition: 240ms;
    transition: 240ms;
}

input[type="radio"],
input[type="checkbox"] 
{
    -webkit-appearance: none !important;
    outline: none;
    position: relative;
    border: none !important;
    cursor: pointer;
    outline-width: 0;
    border-radius: 50%;
    box-sizing: border-box;
}

.project-actions i
{
    background-color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;   
    border:1px solid rgba(0,0,0,0.04);
    font-size: 14px;
    cursor:pointer;

}

.project-actions i:hover
{
    background-color:var(--brand);
    color:White;
}

.offcanv
{
    left: 0;
    z-index: 9998;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    background: rgba(95,92,92,.6);
    pointer-events:none;
}

.input-bordered.has-pretext input
{
    padding-left:160px !important;
}

.input-bordered .pre-text
{
    position: absolute;
    height: calc( 100% - 2px );
    width: 100px;
    display: flex;
    justify-content: center;
    color: #786b6b;
    font-weight: bold;
    align-items: center;
    font-size: 13px;
    border-left: 2px solid #e3dbdb;
    background: #e3dbdb;
    left: 50px;
    top: 1px;
}

.offcanv-inner
{
    height: 100%;
    width: 550px;
    max-width: 100%;
    transform: translate3D(100%,0,0);
    -webkit-transform: translate3D(100%,0,0);
    top: 0;    
    position: fixed;
    background:white;
    right: 0;
    z-index: 19999;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    pointer-events:none;
    opacity: 0;
    transition: 500ms ease all;
}

.offcanv.opened {
    display: block;
    opacity: 1;
    pointer-events:auto;
}

.offcanv-inner.opened
{
    transform: translate3D(0,0,0);
    -webkit-transform: translate3D(0,0,0);
    opacity: 1;
    pointer-events:auto;
}

.offcanv-inner h3
{
    font-size:35px;
    margin-bottom:0px;
    line-height: 30px;
    text-align:right;
}

.close-canvas
{
    position: absolute;
    top: 10px;
    left: -50px;
    border-radius: 4px;
    width: 60px;
    height: 60px;
    background: var(--brand);
    z-index: 999;
    color:White;
    cursor:pointer;
}

.modal-content .close-canvas,
.options-modal .close-canvas
{
    top: -10px;
    right: -10px;  
    left:auto;
    width: 40px;
    height: 40px;
}

.close-canvas:hover{ background:var(--button-hover); color:var(--button-hover-text); }

.offcanv-inner .project-url
{
    font-size:14px;
}

.offcanv-inner .project-detail-row
{
    margin-bottom:15px;
}

.offcanvas-divider {
    border-bottom: 1px solid var(--light-grey);
}

.offcanvas-divider span 
{
    font-size: 11px;
    background-color: var(--brand);
    padding: 6px 25px;
    border-radius: 4px 4px 0px 0px;
    font-weight: bold;
    font-family: 'Gloria Hallelujah';
    color:white;
}

.offcanv-inner .project-detail-row .value,
.project-detail-row .value
{
    font-size:13px;
}

.offcanv-inner .project-detail-row .value.value-missing
{
    opacity: 0.2;
    font-size: 11px;
}

.project-detail-row  .text-content-alt{ font-weight:bold; font-size:13px; }

.offcanv-inner .project-detail-row .value.big{ font-size:18px; }

.offcanv-inner .project-detail-row .text,
.offcanv-inner .project-detail-row i
{    
    font-size: 12px;    
}
    
.offcanv-inner .project-detail-row .text
{
    color: white;
    font-family: 'Gloria Hallelujah';
    font-size: 12px;
    font-weight: bold;
}

.project-detail-row i{ font-size:15px; color: var(--brand);  }

.project-detail-row .icon-container
{
    width:20px;
}

.offcanv-content{ padding:3rem; min-height:100%; }

.magic-date{ font-size:30px; }
.magic-date.small{ font-size:25px; }
.magic-date.small .year{ font-size:20px; margin-top:-5px; }

.magic-date .year
{
    font-weight: bold;
    font-size: 1em;
    margin-top: -10px;
}

.magic-date .day, 
.magic-date .month 
{
    font-size: 0.4em;
    font-weight: bold;
}

.notice{ font-size:12px; }

.canvas-invoice
{   
    position:relative;
    color:black; 
    background-color:var(--light-grey);
}

.invoice
{
    position:relative;
}

.search-modal-options
{
    position: absolute;
    z-index: 999;
    top: 40px;
    background: white;
    box-shadow: 0px 0px 10px 5px #f5f5f5;
}

.search-modal-option
{
    padding: 10px 15px;
    cursor: pointer;  
    transition:300ms ease all;
}

.search-modal-option:not(last-child)
{
    border-bottom: 1px solid var(--light-border);
}

.search-modal-option.selected,
.search-modal-option:hover
{
    background:var(--brand);
    color:White;
}

.invoice:after
{
    position:absolute;
    right:-6px;
    top:-6px;
    border:3px solid white;
    width:30px;
    font-family: 'Font Awesome 5 Free';
    height: 30px;
    font-weight: 900;
    color:White;
    border-radius:50%;
    font-size:10px;
    text-align: center;
    line-height:25px;
}

.invoice.payed:after
{
    content:'\f00c';
    background:var(--green);
}

.invoice.unpayed:after
{
    content:'\f00d';
    background:var(--rosso);
}

.canvas-invoice .project-detail-row .text-content-alt{ font-size:10px; }
.canvas-invoice .project-detail-row { margin-bottom:5px; }
.canvas-invoice .invoice-note-text{ font-size:11px !important; }

.canvas-invoice .invoice-edited-by{

    position: absolute;
    right: 0px;
    bottom: 0px;
    border-left: 1px solid white;
    border-top: 1px solid white;
    padding: 3px 12px;
    font-size:10px !important; 
}
.invoice-status.not-payed{ color:var(--rosso); }
.invoice-status.payed{ color:var(--verde); }


.switch {
  
    display: inline-block;   
    border-radius: 45px !important;
    height: 30px !important;
    position: relative;
    padding: 0px !important;
    width: 60px !important;
  }

  .switch:has(input:checked) .slider {
    background: #d77373 !important;
}
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .modal-option
  {
      height:65px;
      position:relative;
      cursor:pointer;
  }

  .modal-option:hover, 
  .modal-option.selected
  {
    background: var(--alt-gradient-reversed);
    color: White;;
  }

  .custom-modal .modal-body.options 
  {
      padding: 0px;
  }

  .modal-option .option-image
  {
    width: 50px;
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    margin-right: 15px;
  }

  .modal-option .option-main img
  {
      height:30px;
      object-fit: cover;
  }

  .modal-option .option-text
  {
    font-size:14px;
  }

  .modal-option .option-text > div
  {
    font-weight:bold;
  }

  .modal-option.selected .option-subtitle,
  .modal-option.selected .option-subtitle i,
  .modal-option:hover .option-subtitle,
  .modal-option:hover .option-subtitle i
  {
    color:  #f7f7f794;
  }  
  

  .modal-option.selected:after
  {
        content:'\f058';
        position:absolute;
        right:15px;
        top:50%;
        transform:translateY( -50% );
        
        font-family: "Font Awesome 5 Free";
        font-weight:900;
        color:#a71d23;
        border-radius:50%;
        height:30px;
        width:30px;
        text-align: center;
        line-height: 35px;
  }

  .currency
  {
    font-size: 0.6em;
  }
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0px;
    left: 0px;
    right: 0;
    border-radius: 5px;
    border-radius: 45px !important;
    overflow: hidden;
    bottom: -1;
    background-color: var(--input-bg);
    -webkit-transition: .4s;
    transition: .4s;
    height: 100%;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: calc( 100% - 4px );
    width: 22px;
    left: 2px;
    right: 2px;
    border-radius: 45px;
    bottom: 0px;
    top: 2px;
    font-size: 13px;
    background-color: var(--medium-grey);
    font-weight: bold;
    -webkit-transition: .4s;
    transition: .4s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    border-right: 2px solid var(--input-border-color);
  }
  
  input:checked + .slider:before {
    background-color: var(--brand);
    border-right:0px;
    color:white;
  }

  input:checked + .slider:after {
    transform: translate( 50%, -50% ) rotate( 180deg );
    background-color: var(--input-border-color);
    color:black;
  }   
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(140%);
    -ms-transform: translateX(140%);
    transform: translateX(140%);
  }

.color-red{
    color:var(--rosso) !important;
}

.options-modal.show
{
    opacity:1; 
    pointer-events: auto;
    display:flex;
}

.color-green{
    color:var(--green) !important;
}

.gray-bg
{
    background:#b77284 !important;
}

.color-gray
{
    color:#b77284 !important;
}

.canvas-invoice.plain .invoice-status{ font-size:13px; } 
.canvas-invoice.plain .project-detail-row .text-content-alt{ font-size:12px; }
.canvas-invoice.plain  .invoice-edited-by, 
.canvas-invoice.plain  .invoice-note-text{ font-size:13px !important; }
.invoice-status 
{
    transform: rotate( 270deg ) translate(-50%, 0%);    
    position: absolute;
    left: -2%;
    top: 40%;   
    width: auto;
    border-radius: 4px 4px 0px 0px;
    text-transform: uppercase;
    text-align: center;
    transform-origin: left;
    font-weight: bold;
    font-size: 14px;
}
/* Filters */
.filters-mobile
{
    position:fixed;
    border:0px;
    left:0px;
    bottom:0px;    
    width:100%;
    height:40px;
    z-index: 1001;
    background: var(--alt-gradient);

}

.filters-mobile i
{
    border-radius: 50%;
    color: #d3b3b3;
    left: 50%;
    position: absolute;
    box-shadow: 0px 4px 10px 5px rgb(0 0 0 / 15%);
    cursor:pointer;
    bottom: 10px;
    transform: translateX( -50% );
    padding: 15px;
    background-color: white;
}

.close-filters-mobile
{
    font-weight:bold;
    cursor:pointer;
    background-color: var(--brand);
    color:white;
    min-height:56px;
    text-transform: uppercase;
}

.close-filters-mobile:hover { background-color:var(--brand);}

.filters-mobile.slidedDown{ bottom:-60px; }
.filters-mobile i:hover{ font-size:25px; }

.filters-mobile-list
{
    bottom:-100%;
}

.filters-mobile-list,
.options-modal-content
{
        opacity:1;        
        background-color:white;
        position:absolute;
        width:100%;     
        border-radius: 10px;       
        max-height: calc( 100% - 50px );
}

.options-modal-content
{
    max-height: calc(  80% - 3.5rem );
}

.filters-mobile-list > div,
.options-modal-content > div
{
    overflow:auto;
}

.modal .button
{
    width: 80%;
    display: block;
    margin: 0 auto;
}

.filter-button
{
    cursor: pointer;
    font-size: 13px;
    padding: 8px 15px;
    background: var(--brand);
    color:white;
    font-weight: bold;
    margin-left: 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

.left-side-block 
{
    padding-left:70px;
    padding-right:70px;
}

.options-modal
{
    align-items: center;
    justify-content: center;
    display:flex;
}

@media( min-width:992px )
{
    .options-modal-content
    {
        width: 96%;
        border: none !important;
        background-color: white; 
        max-width:500px;
        border-radius: 7px;      
        box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.05);
    }

    .options-modal-content.medium
    {
        max-width:650px;
    }
}



.filters-overlay,
.options-modal
{
    opacity:0;
    pointer-events:none;
    background-color:rgba(179, 174, 174, 0.6);
    position:fixed;
    width:100%;
    height:100%;
    left:0px;
    bottom:0px;
    z-index:9000;
}

@media( max-width: 1320px )
{ 

    .left-side{ width:40%; }
    .left-side h1{ font-size:40px; line-height:48px; }
}

.order-select
{
    min-width:220px;
}

.form-group-search
{
    width:330px;
}

.full-page-heading-small
{
    border-bottom:1px solid #f6f4fd;
}

@media( max-width: 1280px )
{
    .fixed-actions
    {
        bottom:50px;
        right:10px;
    }

    main:has(aside)
    {
        padding-left:0px; 
    }


    .options-modal-content
    {
        bottom:-100%;
    }

    .filters-overlay.show
    {
        opacity:1; 
        pointer-events: auto;
    }

    .filters-overlay.show .filters-mobile-list,
    .options-modal.show .options-modal-content
    {
        bottom:0%;
        opacity:1;
    
    }

    .list-with-filters
    {
        padding-top:60px !important;
        padding-bottom:60px !important;
    }

    body .full-page-heading-small
    {
        padding-top:70px !important;
    }

    #app :has(.list-with-filters) .full-page-heading-small
    {
        margin-bottom:-60px;       
    }

    #app:has(.fixed-actions) .result-container {
        padding-bottom: 30px;
    }

    .card-container-50
    {      
        grid-template-columns: repeat( 1, 1fr );     
    }

    .left-side > div:first-child
    {
        padding-top:80px !important;
    }

    .left-side-block
    {       
        padding-inline: 50px !important;
    }

    .left-side.small{ width:450px; }
    .left-side{ width:35%; }

    .left-side-padding,
    .right-side
    {
        padding:50px 50px 70px 50px;
        position:relative;
    }

    .left-side h1{ font-size:40px; line-height:48px; }
}

@media( max-width: 992px )
{
    
    .left-side,
    .left-side.small,
    .right-side
    {
       width:100%;
    }   

    .options-modal-content
    {
        max-height: calc( 100% - 50px );
    }

    .left-side-block
    {
        padding-top:80px !important;
        padding-inline: 30px !important;
        width:100%;
    }

    .left-side h1{ font-size:40px; line-height:48px; }

    .first-section
    {
        padding-top:70px !important;
    }

    .input-bordered input, 
    .input-bordered select, 
    .input-bordered textarea, 
    .input-bordered .switch, 
    .input-bordered .modal-select,
    .form-group.has-select .placehoder
    {
        font-size:12px;
    }

    .clear-filters-bar
    {
        position: fixed;
        top: unset;
        bottom: 0px;
        height:auto !important;
        box-shadow: 0px 0px 15px 1px #e3e3e3;
        padding-bottom:10px;
    }

    .clear-filters-bar button
    {
        padding:6px 30px;
        font-size:13px;
    }

    .quote-total-vat
    {
        font-size:18px;
    }

    .quote-total
    {
        font-size:27px;
    }

    .clear-filters-bar button{ margin-top:-10px; }
    
    .card-container
    {      
        grid-template-columns: repeat( 2, 1fr );     
    }
    .sub-section-title{ width:100%; margin-bottom:10px; }
    .sub-cards-container{ flex-wrap:wrap; }
  
    .left-side-padding{ text-align:left; padding:30px 30px 30px 30px !important; }   
    .right-side
    {
        padding:40px 25px;      
    }
    .back-button{
        top: 100%;
        right: 20px;
        transform: translateY( -50% );
    }
    .full-page-heading .back-button
    {
        bottom: -125px;
        left: 0px;
  
    }
    .full-page-heading{ padding-top:80px; }
    .full-page-content-block{ padding-left:20px; padding-right:20px; }

    .fullpage .left-side h1{ font-size:35px; line-height:48px; }
    .left-side h1:not(.error){ font-size:22px; line-height:42px; }
    .project-title h2{ font-size:24px;line-height: 24px; }
    .project-title + a { font-size:12px; }
    .project-edit-block{ height:60px; }
    .left-subtitle{ font-size:13px; }
    ::-webkit-scrollbar { width: 2px; height:2px; }  

    .offcanv-content{ padding:1.6rem; }
    .offcanv-inner{ width:calc( 100% - 30px ); }
    .close-canvas{
        left: -28px;
    
    width: 50px;
    height: 50px;
    }

    .offcanv-inner h3{ font-size:24px; line-height:24px; }
    .offcanv-inner .project-url{ font-size:12px; }

    
    #main-container{ padding-top:65px !important; }
}

@media( max-width: 768px )
{   

    #selectedFilters:not(:empty)
    {       
        padding: 1.0rem!important;
    }

    .activeFilter
    {
        font-size:11px;
    }

    .text-md-smaller
    {
        font-size:14px;
    }
   
    .right-side-row{ padding:30px; }
    .section-standard{ padding:40px 20px 40px 20px; }
    .card-container
    {      
        grid-template-columns: repeat( 1, 1fr );     
    }
   
    .project{ height:auto; flex-wrap: wrap; }
    .project-image, .project-content{ width:100%; }
    .project-image { border-radius:20px 20px 0px 0px; height:250px; }
    .project .project-name{ font-size:18px; line-height:18px; }
    .card-badge-left-bottom{ padding:2px 15px; right:-25px; left:auto; bottom: -20px; }
    .project-analytic .card-badge-left-bottom{ bottom:-10px; }
    .card-badge-left-bottom img:not(.project-card-responsible){ height:15px; }  
    .lined-card{ width:100%; }
}

#nprogress {
    pointer-events: none;
}

#nprogress .bar {
    background: var(--brand);
    position: fixed;
    z-index: 9999;
    top: 0px;
    left: 0;
    width: 100%;
    height: 5px;   
}

.nprogress-custom-parent {
    overflow: hidden;
    position: relative;
}  
.nprogress-custom-parent #nprogress .bar {
    position: absolute;
}