@font-face {
    font-family: 'Glacial'; 
    src: url('/fonts/GlacialIndifference-Regular.ttf'); 
}

.grid 
{
    display:grid;
    gap:20px;
}

.text-12{ font-size:12px; }
.text-13{ font-size:13px; }
.text-11{ font-size:11px; }
.text-14{ font-size:14px; }
.text-15{ font-size:15px; }

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

.v-field--variant-solo, .v-field--variant-solo-filled
{
    background-color: inherit !important;
    box-shadow:unset !important;
}

.v-field__input
{
    font-family: "Glacial";
    font-size: 14px;
    mask-image: unset !important;
    font-weight: 600;
    color: var(--text-color) !important;
}

.v-label 
{
    color: var(--input-border-color) !important;
}


.list-right-panel
{    
    border-left: 1px solid #efe8e8;    
    width:300px;
    background-color: var(--light-grey);
}

.width-100
{
    width:100px !important;
}

.width-300
{
    width:300px !important;
}

.border-right
{
    border-right:1px solid #dee2e6!important;
}
.grid-1-3
{
    grid-template-columns:1fr 3fr;
}

.project-card--actions
{
    position:Absolute;
    top:-10px;
    right:-10px;
}


.analytic-card:has(.card-big--heading-title-ribbon) .card-big--heading-title
{
    padding-left:16px;
}

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

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

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

.shrinkable-row h2
{
    font-size: 18px;    
}

.shrinkable-row .heading i
{
    opacity:0.1;
}

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

.table-hover:hover
{
    background-color: #ebebeb !important;
}

.chatgpt-input-blocknew.editable
{
    padding:60px 60px 30px 60px;
}

.chatgpt-input-blocknew
{
    padding:80px 60px 60px 80px;
    border-radius:20px;
    position: relative;
    background: var(--light-grey);
}

.chatgpt-input-blocknew .tipnew .tip-heading,
.chatgpt-input-blocknew .tipnew .tip-where *,
.chatgpt-input-blocknew .tipnew .tip-target
{
    padding: 8px 20px;
}

.chatgpt-input-blocknew .tipnew .tip-heading
{
    background:var(--input-bg); 
    width:150px;
}

.chatgpt-input-blocknew .tipnew .tip-where
{
    background:var(--light-grey);
    text-align:left;
    font-size:11px;
    font-weight:400;
    color:var(--testo);  
}

.lateral-banner
{
    position:Absolute;
    border-radius:0px 20px 20px 0px;
    writing-mode: vertical-rl;
    height:100%;
    text-transform: uppercase;
    font-weight:600;
    font-size:11px;
    top:0px;
    background:var(--input-bg);
    transform: scale(-1, -1);
    padding:10px;
    left:0px;
}
.chatgpt-input-blocknew .tipnew .tip-target
{
    background:var(--light-grey);
    color:var(--testo);  
}

.chatgpt-input-blocknew .tipnew
{
    position: absolute;
    left:50%;
    width:500px;
    overflow:Hidden;
    border:3px solid white;
    transform:translateX( -50% );   
    
    top: -10px;
    bottom:unset;
    font-size: 12px;
    font-weight: bold;
   
    border-radius: 5px;
   
}

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

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

.small-row
{
    height:60px;
}

.result-card .main-icon
{   
    opacity:0.05;
        font-size: 30px;
}

.result-card .main-icon.small
{
    font-size:15px;
}

.result-card .count-icon
{
    transform:rotate(-20deg);
    opacity:0.05;
    font-size:19px;
    position:Relative;
}

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


.comment-body
{
    padding:15px;   
    background: var(--light-grey);
    border-radius: 5px;
    font-size:14px;

}

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

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

.project-edit-block.ac-checked .block-icon
{
    background:var(--ac-bg);
    color:White;
}

.project-edit-block.ga-checked .block-icon
{
    background:var(--ga-bg);
    color:White;
}

.project-edit-block.fb-checked .block-icon
{
    background:var(--fb-bg);
    color:White;
}

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

.vuejs3-datepicker__clear-button
{
    top: 0px !important;
    color: white;
    font-size: 35px;
    right: 0 !important;
    line-height: 34px;
    width: 40px;
    border-radius: 0px 5px 5px 0px;
    text-align: center;
    height: 44px;
    background: var(--brand);
}

.vuejs3-datepicker__calendar{ right:0px; }
.vuejs3-datepicker #calendar-div{ background: var(--light-grey) !important;}
.vuejs3-datepicker__icon{ display:none !important; }
.vuejs3-datepicker__content{ margin-left:0px !important; font-size:13px !important; }
.vuejs3-datepicker__value{ border:none !important; padding:12px 15px !important; min-width:150px !important; }

.vuejs3-datepicker__calendar-topbar{ line-height: 15px;}
.vuejs3-branded #calendar-div{
    background: var(--brand) !important;
    color:White;
    font-weight:bold;
}
.vuejs3-gray #calendar-div{
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border-color);
}
.vuejs3-datepicker__clear-button:Hover
{
    color:var(--text-color);
    background-color: var(--button-hover);
}
.vuejs3-datepicker__calendar-topbar-year{ font-size:15px !important; }
.apexcharts-legend-series .apexcharts-legend-text
{
    padding:10px 20px;   
    margin-right:3px !important;
    border-radius:3px;
    display:flex;
    text-transform: uppercase;
}

.apexcharts-legend-series .apexcharts-legend-text
{    
    font-weight:700 !important;
    margin-left:0px !important;
}

.order-chart  .apexcharts-legend-marker,
.adv-chart  .apexcharts-legend-marker{ display:none; }

.order-chart .apexcharts-legend-series:nth-child(1) .apexcharts-legend-text,
.adv-chart .apexcharts-legend-series:nth-child(1) .apexcharts-legend-text
{
    background:#e01249;
    color:white;
}

.order-chart .apexcharts-legend-series:nth-child(1) .apexcharts-legend-text,
.adv-chart .apexcharts-legend-series:nth-child(1) .apexcharts-legend-text,
.order-chart .apexcharts-legend-series:nth-child(2) .apexcharts-legend-text,
.adv-chart .apexcharts-legend-series:nth-child(2) .apexcharts-legend-text,
.order-chart .apexcharts-legend-series:nth-child(5) .apexcharts-legend-text,
.adv-chart .apexcharts-legend-series:nth-child(2) .apexcharts-legend-text,
.adv-chart .apexcharts-legend-series:nth-child(3) .apexcharts-legend-text,
.order-chart .apexcharts-legend-series:nth-child(6) .apexcharts-legend-text,
.order-chart .apexcharts-legend-series:nth-child(7) .apexcharts-legend-text,
.order-chart .apexcharts-legend-series:nth-child(8) .apexcharts-legend-text
{
    color:White !important;
}

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

.ad-preview-image
{
    transform: rotate(-20deg);
    width: 35px;
    border-radius: 5px;
    height: 35px;
    object-fit: cover;
    outline: 2px solid #0000001a;
}

.order-chart .apexcharts-legend-series:nth-child(7) .apexcharts-legend-text
{
    background:#93587b;    
}
.order-chart .apexcharts-legend-series:nth-child(8) .apexcharts-legend-text
{
    background:#93587b;    
}

.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 .5s
}
.fade-enter,
.fade-leave-to{
    opacity: 0
}

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

body{
    overflow-x:hidden !important;
}

main,
.content{ height:100%; }

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

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

::-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,
.project-actions i,
.close-canvas,
.filters-mobile i,
.filters-mobile-list,
.filters-overlay,
.close-filters-mobile,
.filters-mobile,
.sidebar-project-icon,
.filter-button,
.saved-project,
.image-container .reset-image,
.sorting-icon,
.filter-sorting,
.organization,
.modal-option,
.actions-container .block-icon,
.vuejs3-datepicker__clear-button,
.chat-gpt-button,
.chat-gpt-button img, 
.choice-selector .choice,
.table-hover
{
    transition: 300ms ease all;
}

.base-transition
{
    transition: 300ms ease all;
}

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

.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.mini
{
    width:20px;
    height:20px;
}

.actions-container .block-icon
{
        color:rgb(135 108 108 / 30%);
    width:40px;
    height:40px;
    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: var(--light-grey);
    padding: 3px 8px;
    justify-content: center;
    width: 34px;   
    align-items: center;
    border: 2px solid var(--light-bg);       
    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;
    transition: 300ms ease all;
    color: var(--input-border-color);
}

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

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

.filter-label-block
{
    width:50%;
}

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

.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:var(--overlay);
}

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

.overlay.black
{
    background-color: #1a1a1af7 !important;
}

.left-side{ width:40%; background-size:cover; background-position: center center;}
.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,
.right-side
{
    padding:150px;
    position:relative;
}

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

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

.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 strong{ 
    color: var(--brand);
    font-size: 2.0em;
    font-family: Gloria Hallelujah;
    font-weight: 300;    
 }
.left-side.login-image{ background-image:url(/img/login.jpg); }
.v-snackbar--variant-elevated
{
    background:White !important;
    color:var(--text-color) !important;
}

.v-field-label--floating
{
    font-family: Glacial;
    pointer-events: none; 
    text-transform: lowercase;
    font-size: 10px !important;
    color: var(--input-border-color);
}

.v-autocomplete .v-field__append-inner, 
.v-autocomplete .v-field__outline
{
    display:none;
}

.v-field__clearable
{
    opacity: 0.2 !important;
    font-size: 10px;
}

body .v-switch:has(label)
{
    height:60px;
}

body .v-switch--inset .v-switch__track
{
    height:28px;
}

body .v-switch .v-selection-control__wrapper
{
    height:30px;
}

body .v-switch--inset .v-switch__thumb 
{
    height: 20px;
    width: 20px;  
}

.v-switch label
{
    font-size: 10px;
   
    font-family: Glacial;
    pointer-events: none; 
    text-transform: lowercase;   
    color: #979797;
    font-weight:bold;
}

@media( min-width:768px )
{
    .v-switch label
    {
        margin-bottom: -5px;   
    }
}

.v-switch .v-selection-control
{
    min-height:auto !important;
    display:flex;
    flex-flow:column-reverse;
    align-items: flex-end;
}

.v-autocomplete .v-field-label
{
    font-weight: bold;
    font-family: Glacial;
    font-size: 14px;
    color: #beb8b8;
}


.v-input:not(.v-textarea--auto-grow) .v-field__input
{
    min-height:52px !important;
    padding-top:20px !important;
}

.v-field--variant-filled .v-field__overlay
{
    background:inherit !important;
}


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

.v-input__control:not(:has(.v-switch__track))
{
    background-color: var(--input-bg);
    border: 1px solid var(--input-border-color);
    border-radius:3px !important;
}

.v-overlay--active
{
    z-index:9100 !important;
}

.v-btn .v-btn__overlay
{
    display:none !important;
}

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

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

.default-button.extrasmall, 
.v-snackbar button
{
    font-size:12px !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.disabled
{
    background: #dddddd;
    color: #a99a9a !important;
}

.status-banner.done
{
    border: 2px solid #73a342;
    background: #89bd54;
}

.status-banner.grey
{
    border: 2px solid #dddddd;
      background: #dddddd;
    color: #a99a9a !important;
}

.status-banner.doing
{
    border: 2px solid #ad2727;
    background: #c72d2d;
}

.status-banner
{
    font-size:12px;
    border-radius:5px;
    padding:6px 25px;
    background:red;
    color:white;
}

.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:"Glacial";
    font-size:14px;
    font-weight:600;
}

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

.grey-bg
{
    background-color: #333 !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: 10px;
}

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

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

.form-group.has-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;
}

.form-group.has-icon input{ padding-left:65px !important; }

.form-group.has-icon .icon,
.form-group.has-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 .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;
    transition:300ms ease all;
    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;
}

.percentage-box.green-box i,
.percentage-box.red-box i
{
    margin-right:5px;
}

.table-column .percentage-box 
{
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
    display: flex;
  
    height: 18px;
    right: -8px;
    top: -8px;
    align-items: center;
}

.lined-card .percentage-box 
{
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    position: absolute;
    height: 18px;
    right: -8px;
    top: -8px;
    align-items: center;
}

.white-box
{
    border: 1px solid var(--light-grey);
    color: #b8b8c7;
    background: #fff;
}

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

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


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


.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; }
.form-group.has-select .icon{ right:1px;  border-radius:0px 3px 3px 0px; }


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

.input-bordered .modal-select{ cursor:pointer; line-height:15px; }
.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:hover input,
.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);  
}

.gap-5
{
    gap:5px;
}

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

.ad-revision-number
{
    height:32px;
    width:32px;
    font-size:11px;
    font-weight:bold;
    cursor: pointer;
    border-radius:5px;
    text-align: center;
    line-height:32px;   
    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;
    
}

html{ overflow:auto !important; }

.input-bordered span:not(.tip):not(.invalid-feedback):not(.slider)
{
    display: block;
    position: absolute;
    left: 0px;
    top: -8px; 
    font-family: Glacial;
    pointer-events: none;
    transform: translateY(-50%);
    text-transform: lowercase;
    padding: 0px 5px;
    background-color:transparent;
    font-size: 10px;
    color: var(--input-border-color);
}

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

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

.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:var(--brand); }

.project
{   
    height: 150px;    
}

.carded-box
{
    border: 1px solid var(--light-grey);
    background: var(--default-card-bg);
    position: relative;
    border-radius: 7px;
}

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

.project-analytic
{ 
    height:90px;    
}

.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{ width:40%; }
.project-content{ width:60%; }

.project-image,
.project-content
{
    position:relative;
    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%;
 }

 .full-page-heading-small h1
 {
    font-size:22px;
 }

 .full-page-heading-small p
 {
    font-size:12px;
 }

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

 .full-page-heading-small  .back-button
 {
    position:static !important;
    transform:none !important;
    margin-bottom:0px !important;
 }

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

.project-analytic .form-group-switch
{
    width:150px;
}

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

.project .project-url,
.project-analytic .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; }
.bg-white{ background: white; }

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

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

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

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

.analytic-card.red-card 
{       
    border:1px solid var(--rosso);
     color:White;
    background: var(--rosso);   
}

.analytic-card.red-card  .card-big--heading-title-ribbon 
{
    outline: 1px solid #a44e4e;   
    background: #a44e4e;  
}

.analytic-card.red-card .card-big--ribbons .ribbon 
{
    background: #a44e4e;  
    color: white;  
}

.analytic-card.red-card .card-big--heading
{
    color:White;
    background: #a44e4e;
}

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

.analytic-card.green-card 
{       
    border:1px solid var(--verde);
     color:White;
    background: var(--verde);   
}

.analytic-card.green-card  .card-big--heading-title-ribbon 
{
    outline: 1px solid #787653;   
    background: #787653;  
}

.analytic-card.green-card .card-big--ribbons .ribbon 
{
    background: #787653;  
    color: white;  
}

.analytic-card.green-card .card-big--heading
{
    color:White;
    background: #787653;
}

.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 var(--dashboard-heading-border-color);
    border-bottom:1px solid var(--dashboard-heading-border-color);
    position: sticky;
    top: 77px;
    z-index: 888;
}

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

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

.ads-container-heading h2{ font-size:17px; }


.customers-container-heading i.shrink,
.ads-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;
}

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

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

.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:200px;
    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%;
}

main:has(.full-page-heading-small) #filters
{
    margin-top:0px;
    margin-bottom:0px;
}

.rotated-20{
    transform: rotate(-20deg);
}

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

.order-filter-block{ max-width:400px; }
#filters .input-bordered, .order-filter-block .input-bordered{ margin-bottom:0px; }
.order-select{ width:220px; }
.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-left: 7px;
    border-radius: 4px;
    flex-shrink:0;
}

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

}

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

#selectedFilters:not(:empty)
{
    border-bottom: 1px solid var(--light-grey);
    padding: 1.0rem!important;
}

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

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

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

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

.filter-intro{ line-height:5px; height:40px; padding:0px 15px;   }
.filters-mobile-list .filter-intro{ padding:0px; }
#filters .filter-block:not(:first-child){ border-left: 1px solid #edeaf74c; margin-left:20px; }
.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;
}
input[type="radio"]:before, 
input[type="checkbox"]:before 
{
    content: '';
    position: absolute;
    left: -5px;
    top: -5px;
    background: var(--brand);
    border-radius: 5px;
    width: 40px;
    height: 40px;
    display: block;
    -webkit-transition: 240ms;
    -o-transition: 240ms;
    transition: 240ms;
    -webkit-transform: scale(0) !important;
    -ms-transform: scale(0) !important;
    transform: scale(0) !important;
}

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

input[type="radio"]:after, 
input[type="checkbox"]:after 
{
    content: '';
    display: block;
    background:var(--input-bg);
    border-radius:5px;
    width: 30px;
    height: 30px;
    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: var(--light-bg);
    border-radius: 50%;
    width: 30px;
    height: 30px;   
    border:1px solid var(--light-grey);
    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
{
    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%; overflow:auto; }

.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;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .modal-option
  {
      height:70px;
      position:relative;
      cursor:pointer;
  }

  .modal-option:hover, 
  .modal-option.selected
  {
      background-color:rgba(0,0,0,0.1);
  }

  .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.selected:after
  {
        content:'\f00c';
        position:absolute;
        right:15px;
        top:50%;
        transform:translateY( -50% );
        background:var(--brand);
        font-family: "Font Awesome 5 Free";
        font-weight:900;
        color:white;
        border-radius:50%;
        height:30px;
        width:30px;
        text-align: center;
        line-height: 35px;
  }

  .currency
  {
      font-weight:bold;
      color: var(--brand);
      font-family: Gloria Hallelujah;
      font-size: 0.7em;
  }
  /* 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%;
  }

  .switch:has(input:checked) .slider
  {
    background:#d77373 !important;
  }
  
  .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;
}

.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: black;

}

.filters-mobile i
{
    border-radius: 50%;
    color: White;
    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: var( --brand);
}

.close-filters-mobile
{
    font-weight:bold;
    cursor:pointer;
    background-color: black;
    color:white;
    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
{
        opacity:0;        
        background-color:white;
        position:absolute;
        width:100%;
        bottom:-100%;
        border-radius: 10px;
        max-height: calc( 100% - 50px );
}

.suspended-tag
{
    position: absolute;   
    background: var(--rosso);
    color: white;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    z-index: 0;
    height:100%;
    writing-mode: vertical-lr;
    font-size: 11px;
    padding: 2px 0px;
    right: 0px;
}

.suspended-tag i
{
    font-size:.8em;
    margin-right:5px;
    transform:rotate(90deg);
}

.filters-mobile-list > 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;
}

.filters-overlay
{
    opacity:0;
    pointer-events:none;
    background-color:rgba(0,0,0,0.7);
    position:fixed;
    width:100%;
    height:100%;
    left:0px;
    bottom:0px;
    z-index:2000;
}

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

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

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

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

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


@media( max-width: 1320px )
{
    .left-side,
    .right-side
    {
        padding:100px;
    }

    .left-side{ width:40%; }

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

@media( max-width: 1220px )
{
    .left-side,
    .right-side
    {
        padding:60px;
    }

    .left-side{ width:35%; }

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

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

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

@media( max-width: 992px )
{
    main:not( :has(.full-page-heading-small) ) .list-with-filters 
    {
        padding-top: 60px !important;    
    }

    .full-page-heading-small > div
    {
        padding-top: 60px !important;  
    }

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

    #selectedFilters:not(:empty) {
        padding: 1rem!important;
    }
    
    .card-container
    {      
        grid-template-columns: repeat( 2, 1fr );     
    }

    .grid-1-3
    {      
        grid-template-columns: 1fr;     
    }

    .sub-section-title{ width:100%; margin-bottom:10px; }
    .sub-cards-container{ flex-wrap:wrap; }
    main:has(aside)
    {
    padding-left:0px; 
    }
    .left-side{ text-align:left; padding:90px 30px 30px 30px; }   
    .right-side
    {
        padding:40px 30px;
    }
    .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:45px; line-height:48px; }
    .left-side h1:not(.error){ font-size:25px; line-height:32px; }
    .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; }

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

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

    .filter-check + label{ font-size:11px; }
    .filter-intro{ font-size:13px; }
    #main-container{ padding-top:65px !important; }
}

@media( max-width: 768px )
{
    .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; }
    .suspended-tag{ width:250px; }
    .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;
}