:root {
    --irri-alt-text: #2b8fc3;
    --orange: #d88376;
    --irri-lightorange: #ffebda;
    
    --irri-red: #eb4141;
    --irri-background: white;
    --irri-blu1: #2b8fc3;
    --irri-blu2: #0090d3;
    --irri-darker-blue: #2f718f;
    --irri-green: #00980e;
    --irri-dark-green: #4c6c4f;
    --irri-hard-black: #161616;
    --irri-success: #a0bfa0;
    --irri-light-grey: #f7f7f7;
    --irri-green-gradient: linear-gradient(to right, var(--irri-green) 0%,var(--irri-dark-green) 100%);

    --light-border: #e5e5e5;
    --black: #3e3e3e;
    --black-alt:#30333a;
    --standard-bg: #fafafa;
    --sfondo:#3c414c;
    --rosso:#c15555;
    --verde:#8a885c;

    --irri-semi-transparent: #2d7da4b3;
    
    --irri-text-color: #1f1f1f;
}

*{
    box-sizing:border-box;
}

html{ overflow: hidden; }

.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: white;
    font-family:Poppins;
    overflow-x: hidden;
}

main,
.content{ height:100%; }

.page-with-side
{
    padding-left:70px;
}

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

::-webkit-scrollbar { width: 8px; }  
::-webkit-scrollbar-track { background: #f1f1f1;}
::-webkit-scrollbar-thumb { background: var(--orange);border-radius:3px;  }
::-webkit-scrollbar-thumb:hover { background: #555  }
/*
/* Swup
*/
#swup
{
    width:100%;   
    background-color: var(--irri-standard-bg);   
}

.default-button,
.form-group.has-icon:after,
.filter-check + label,
.small-link,
.project-edit-block .block-icon,
.project-actions i,
.close-canvas,
.filters-mobile i,
.filters-mobile-list,
.filters-overlay,
.close-filters-mobile,
.filters-mobile,
.sidebar-project-icon,
.image-container .reset-image
{
    transition: 300ms ease all;
}

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

.overlay.dark
{
    background-color:#33363ce6;
}

.left-side{ width:45%; background-size:cover; background-position: center center;}
.right-side{ overflow:auto; flex-grow:1; }

.right-side-content{ max-width:600px; width:100%;  }
.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:50px; margin-bottom:20px; line-height:60px; }
.left-side h1.error strong{ font-size:120px;  }
.left-side h1 strong{ color:var(--orange); font-size:1.5em; }
.left-side.login-image{ background-image:url(/img/login.jpg); }

.default-button
{
    color: #FCFEFF;
    background-color: var(--orange);
    font-family: "Poppins", Sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 35px;
    border:none;
    border-radius:7px;
    cursor: pointer;
}

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

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

.default-button.mini{ font-size:10px; padding:7px 15px;}
.default-button.medium{ padding: 10px 35px; }

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

.button-loader-img
{
    height:40px;
}

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

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

.micro{ font-size:11px; opacity:0.6; }
.button:hover, 
.button.dark:hover,
.default-button.loading
{
    transform: translate3d( 0, -5px, 0 );
    background-color: #42444b;
}

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

/* Input */ 

.input-bordered input,
.input-bordered select,
.input-bordered textarea
{
    font-family:Poppins;
    font-size:13px;
    font-weight:600;
}

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

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

.input-bordered:hover select,
.input-bordered select:focus
{   
    padding-left:15px;
}

.input-bordered:hover input,
.input-bordered:hover textarea,
.input-bordered input:focus,
.input-bordered textarea:focus
{   
    padding:16px;
}

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

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

.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:48px;
    width:50px;
    background:#3b3e46;
    pointer-events:none;   
}

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

.image-container .reset-image i{ font-size:13px; }
.image-container .reset-image:hover{ background-color:var(--black-alt); }

.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
{
    border: 1px solid #373d43;   
    padding:17px;
    height:50px;
    color:var(--black);
    background: #5f6471;
    width:100%;
    transition:none !important;
}


.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 textarea,
.input-bordered:focus input,
.input-bordered:focus select,
.input-bordered:focus textarea
{
    border:2px solid var(--orange);  
}

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

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

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

.project
{    
    margin: 20px;
    height: 220px;
    position: relative;
    border-radius: 20px;   
    box-shadow: 0px 2px 15px 5px #0000001a;
    background-color: #30333a;
}

[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: 20px 0px 0px 20px; overflow:hidden; }

.project-type{ position:absolute; bottom:0px; left:0px;  border-radius: 0px 20px 0px 0px; background: #30333a; padding: 4px 15px; }
.project-logo{ 
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    max-height: 60px;
    width: auto;
    max-width: 60%;
 }

.project-logo img,
.project-type img,
.project-image-cover{ height:100%; width:100%; }
.project-type img{ height:20px; }
span.mini{ font-size:0.7em; }

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

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

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

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

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

.project .project-url
{    
    font-size: 10px;    
    color: var(--orange);
    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;
}


.project .project-duedate
{
    border-bottom:1px solid rgba(0,0,0,0.1);
    font-size: 13px;
    
}

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

#filters
{
    position: sticky;
    top:0px;
    background-color: #363a44;
    width:100%;
    height:80px;
    z-index: 99;
    
}

#filters .input-bordered{ margin-bottom:0px; }

.filter-check + label
{
    cursor: pointer;
    font-size: 13px;
    padding: 8px 15px;
    background: #3c414c;
    font-weight: bold;
    margin-left: 7px;
    border-radius: 4px;
}

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

.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 #3c414c; margin-left:20px; }
.project-count{     
    font-size: 25px;
    font-weight: bold;
    margin-right: 10px;
}

.project-title h2{ font-size:50px; font-weight:bold;line-height: 45px; }

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

.project-edit-block
{
    position: relative;
    border-radius: 20px;
    box-shadow: 0px 2px 15px 5px #0000001a;
    background-color: #30333a;
    margin-bottom:20px;
    font-weight:bold;
    font-size:13px;
    cursor:pointer;
    height:70px;
}

.project-edit-block .block-icon
{

    border-left: 1px solid #3c414c;
    background: #3c414c;
  
    width:12%;
    border-radius: 0px 20px 20px 0px;
}

.project-edit-block:hover .block-icon
{
    width:22%;
    font-size:20px;
    background:var(--orange);
}

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

.permission-row
{
    height:40px;
}

.permission-option{ width:60px; }

input[type="radio"]:before, 
input[type="checkbox"]:before 
{
    content: '';
    position: absolute;
    left: -5px;
    top: -5px;
    background: #d88376;
    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:#30333a;
    border-radius:5px;
    width: 30px;
    height: 30px;
    border: 1px solid #30333a;
    -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: #3c414c;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    box-shadow: 0px 1px 8px 4px #0000000d;
    font-size: 14px;
    cursor:pointer;

}

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

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

.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:var(--sfondo);
    right: 0;
    z-index: 19999;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    
    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;
}

.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(--black);
    z-index: 999;
    cursor:pointer;
}

.close-canvas:hover{ background:var(--orange); }

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

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

.offcanvas-divider {
    border-bottom: 1px solid #484d58;
}

.offcanvas-divider span 
{
    font-size: 11px;
    background-color: #484d58;
    padding: 6px 25px;
    border-radius: 4px 4px 0px 0px;
    font-weight: bold;
    font-family: 'Gloria Hallelujah';
}

.offcanv-inner .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(--orange);  }

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

.offcanv-content{ padding:3rem; }

.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
{
    border-left:1px solid rgb(72 77 88);
    position:relative;
    color:White;
    margin-bottom:20px;
    background-color:#484d58;
}

.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 #3c414c;
    border-top: 1px solid #3c414c;
    padding: 3px 12px;
    font-size:10px !important; 
}
.invoice-status.not-payed{ color:var(--rosso); }
.invoice-status.payed{ color:var(--verde); }

.canvas-invoice.plain .invoice-status{ font-size:16px; } 
.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: -3%;
    top: 40%;   
    width: auto;
    border-radius: 4px 4px 0px 0px;
    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: #30333a;

}

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

.close-filters-mobile
{
    font-weight:bold;
    cursor:pointer;
    background-color: #3c414c;
}

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

.filters-mobile.slidedDown{ bottom:-60px; }
.filters-mobile i:hover{ background-color: var(--sfondo); font-size:25px; }
.filters-mobile-list
{
        opacity:0;        
        background-color:#363a44;
        position:absolute;
        width:100%;
        bottom:-100%;
        border-radius: 10px;
}

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

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

@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 )
{
    .page-with-side{ padding-left:0px; }
    .left-side{ text-align:left; padding:90px 30px 30px 30px; }   
    .right-side
    {
        padding:40px 30px;
    }
    .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; }  

    .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; }
    #projects{ padding-top:60px; }
}

@media( max-width: 768px )
{
    .project{ height:auto; flex-wrap: wrap; }
    .project-image, .project-content{ width:100%; }
    .project-image { border-radius:20px 20px 0px 0px; }
    .project .project-name{ font-size:18px; line-height:18px; }
    .project-type{ padding:2px 15px; }
    .project-type img{ height:15px; }

}