/** Font */
@import url('https://fonts.googleapis.com/css2?family=Quicksand');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans');

/** Costanti */
:root{
    --ow-colore-background-input-gruppi: #9FADFF;
    --ow-colore-bordi: #00053F;
    --ow-colore-testo-titolo: #002F7C;
    --ow-larghezza-loghi-header: calc(2rem + 5vh);
    --ow-padding-top-icone-header: 1vh;
    --ow-padding-horizontal-icone-header: 1vw;
    --ow-height-icone-header: auto;
    --ow-height-anchor-element-header: min-content;
    --ow-colore-principale-1: #164BA2;
    --ow-colore-principale-2: #00053F;
    --ow-tempo-transizione-sidebar: 0.2s;
    --ow-linear-gradient-button: linear-gradient(180deg, rgba(127, 150, 255, 0.00) 0%, #7F96FF 100%);
    --ow-wrapper-height: calc(75vh - 4rem);
    --ow-wrapper-height-2: calc(77vh - 5rem);
    --ow-min-height-row-grid: 5vh;
    --ow-background-color-th: #88ADFF;
    --ow-color-th: #191919;
    --ow-background-color-td: #FFFFFF;
    --ow-form-invalid-color: #ff0000;
    --ow-form-invalid-border-color: #ff0000;
    --ow-color-black: #000000;
}

html{
    height: 100%;
}

body{
    background-image: url('../assets/images/Background.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: Quicksand;
    margin: 0;
}

textarea,
input{
    font-family: 'Quicksand' !important;
}

input, select, textarea{
    font-size: 14pt;
}

[hidden]{
    display: none !important;
}

.w-2ch{
    width: 2ch;
}

.w-4ch{
    width: 4ch;
}

.w-6ch{
    width: 6ch;
}

.w-8ch{
    width: 8ch;
}

.w-10ch{
    width: 10ch;
}

.w-20ch{
    width: 20ch;
}

.p-0{
    padding: 0 !important;
}

.p-1{
    padding: 0.25rem !important;
}

.b-0{
    border: 0 !important;
}

.gap-1{
    gap: 0.25rem !important;
}

.w-auto{
    width: auto !important;
}

.w-50{
    width: 50% !important;
}

.w-100{
    width: 100% !important;
}

.vw-25{
    width: 25vw !important;
}

.no-margin{
    margin: 0 !important;
}
  
.m-1{
    margin: 0.25rem !important;
}

.m-2{
    margin: 0.5rem !important;
}

.m-3{
    margin: 1rem !important;
}

.m-4{
    margin: 1.5rem !important;
}

.m-5{
    margin: 3rem !important;
}

.m-auto{
    margin: auto !important;
}

.mt-0{
    margin-top: 0 !important;
}

.mt-1{
    margin-top: 0.25rem !important;
}

.mt-2{
    margin-top: 0.5rem !important;
}

.mt-3{
    margin-top: 1rem !important;
}

.mt-4{
    margin-top: 1.5rem !important;
}

.mt-5{
    margin-top: 3rem !important;
}

.max-h-50{
    max-height: 50%;
}

.max-h-25{
    max-height: 25%;
}

/** classe per numeri */
.number{
    text-align: right;
}

/** Center verticale */
.vertical-center{
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/** center vericale E orizzontale */
.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/** Responsive solo shrink  */
.responsive {
    max-width: 100%;
    height: auto;
}

/** Tolgo CSS non necessario dall'elemento anchor con figlio svg */
:is(a:has(svg):not([hidden])),
:is(button:has(svg):not([hidden])),
:is(a:has(img):not([hidden])),
:is(button:has(img):not([hidden])),
.transparent-button
{
    text-decoration: none;
    border: 0; 
    background-color: transparent;
    display: inline-block;
    height: inherit;
}

/** Readonly input o span */
.readonly-input-colore-principale-1{
    background-color: var(--ow-colore-principale-1);
    color: white;
    font-size: 14pt;
    border: 0;
    outline-width: 0;
}

/** Pulsante toggle della sidebar */
.toggleSidebar{
    position: relative;
    width: var(--ow-larghezza-loghi-header);
    height: var(--ow-height-icone-header);
    padding-top: var(--ow-padding-top-icone-header);
    padding-left: var(--ow-padding-horizontal-icone-header);
}
.toggleSidebar > a{
    content: url('../risorseGrafiche/hamburger.svg');
    width: var(--ow-larghezza-loghi-header);
    height: var(--ow-height-anchor-element-header);
}

.badge {
    background-color: red;
    color: white;
    padding: 6px;
    text-align: center;
    border-radius: 5px;
}

/** Logo nel header */
.logoHeader{
    width: var(--ow-larghezza-loghi-header);
    height: var(--ow-height-icone-header);
    padding-top: var(--ow-padding-top-icone-header);
    padding-right: var(--ow-padding-horizontal-icone-header);
}
.logoHeader > a{
    content: url('../risorseGrafiche/logoHeader.svg');
    width: var(--ow-larghezza-loghi-header);
    height: var(--ow-height-anchor-element-header);
}

/** Titolo pagina */
.titolo{
    position: relative;
    color: var(--ow-colore-testo-titolo);
    text-align: center;
    font-family: Quicksand;
    font-size: 2rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.08125rem;
    margin-top: 5vh;
    margin-bottom: 2vh;
    display: flex;
    flex-direction: column;
}

/** Separatore titolo */
.rettangolo8{
    background: url('../risorseGrafiche/Rettangolo_8.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    height: 1vh;
    min-width: 30vw;
}

/** CSS div bottoni pagine tabella */
.btnDiv{
    display: flex;
    justify-content: center;
    gap: 2vw;
    margin-top: 0.5rem;
}

.btnDiv button,
.btnDiv input[type=button]{
    border: 0;
    background: transparent;
}

/** Tabella */

.table-wrapper{
    overflow: auto;
    max-height: var(--ow-wrapper-height);
    margin: auto;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
}

.table-wrapper-2{
    overflow-y: auto;
    max-height: var(--ow-wrapper-height-2);
    margin: auto;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
}

.tabella{
    border-radius: 0.325rem;
    border: 2px solid var(--ow-colore-bordi);
    background: var(--ow-colore-principale-1);
    margin: auto;
    table-layout: auto;
    width: 100%;
}

.tabella th,
.container-colore-tabella-th{
    background-color: var(--ow-background-color-th);
    border-width: 1px;
    border-color: var(--ow-colore-bordi);
    border-radius: 5px;
    color: var(--ow-color-th);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: sticky;
    top: 0;
}

.tabella td{
    background-color: var(--ow-background-color-td);
    padding: 0 5px;
}

/** fill */
.fill-width{
    width: -moz-available !important;
    width: -webkit-fill-available !important;
    max-width: 100%;
    margin: auto 2vw;
}

.fill-height{
    height: -webkit-fill-available !important;
    height: -moz-available !important;
    max-height: 100%;
    margin: auto 2vw;
}

.fill{
    width: -moz-available !important;
    width: -webkit-fill-available !important;
    max-width: 100%;
    height: -webkit-fill-available !important;
    height: -moz-available !important;
    max-height: 100%;
    margin: auto 2vw;
}

@-moz-document url-prefix() {

    .fill {
        height: inherit !important;
    }

    .fill-height{
        height: inherit !important;
    }
    
}

.wrapper{
    height: var(--ow-wrapper-height);
    margin: 0 1vw;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wrapper-2{
    height: var(--ow-wrapper-height-2);
    margin: 0 1vw;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/** Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    z-index: 1;
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, var(--ow-colore-principale-1) 0%, var(--ow-colore-principale-2) 100%);
    overflow-x: hidden;
    transition: width var(--ow-tempo-transizione-sidebar);
    -webkit-transition: width var(--ow-tempo-transizione-sidebar);
}

.sidebar-collapse{
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

@media (min-width: 992px){
    .sidebar-collapse{
        display: flex !important;
        flex-basis: auto;
    }
}

.sidebar .novita{
    position: absolute;
    top: 1rem;
    left: 1vw;
}

.sidebar a {
    color: #ffffff;
    width: auto;
    height: 5vh;
}
.sidebar a:hover {
    color: #ff0000;
}
.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 1vw;
    font-size: 2.5rem;
    text-decoration: none;
}
.sidebar .tooltip {
    position: relative;
    display: flex;
    align-items: flex-end;
}
.sidebar .tooltip img{
    width: auto;
    height: 5vh;
}
.sidebar .tooltip::before {
    content: attr(data-title);
    position: absolute;
    text-align: center;
    bottom: calc(7vh - 1rem);
    left: 50%;
    gap:1vh;
    transform: translateX(-50%);
    padding: 5px 5px;
    color: #fff;
    font-size: 1rem;
    opacity: 0;
}
.sidebar .tooltip:hover::before{
    opacity: 1;
}

.sidebar.show{
    width: 12vw;
}

@media (max-width:500px){
    .sidebar.show{
        width: 100%;
    }
    .justify-content-sm-space-between{
        display: flex;
        justify-content: space-between !important;
    }
    .justify-content-sm-space-around{
        justify-content: space-around !important;
    }
}

/** Modal */
.modal{
    --ow-modal-margin: 0.5rem;
    --ow-modal-content-border-radius: 1.4375rem;
    --ow-modal-dialog-max-width: 75vw;
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-dialog{
    position: relative;
    width: auto;
    max-width: var(--ow-modal-dialog-max-width);
    margin: var(--ow-modal-margin);
    margin-left: auto;
    margin-right: auto;
}
.modal-dialog-centered{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100% - var(--ow-modal-margin) * 2);
}
.modal-content{
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    border-radius: var(--ow-modal-content-border-radius);
    border: 0.2rem solid #390BEF;
    background: #F6FAFF;
}
.modal-title{
    text-align: center;
    padding: 5px;
    color: #191919;
    text-align: center;
    font-family: Quicksand;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: normal;
}
.modal-body{
    padding: 5px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    margin: auto 2vw;
}
.modal-footer {
    margin-top: auto;
    padding: 1vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    min-height: 100%;
    margin: 0;
}
.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
    border-radius: 0;
}
.modal-fullscreen .modal-body {
    overflow-y: auto;
}

.closebtn{
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 16pt;
}

.closebtn:hover{
    cursor: default;
}

/** Container */
.container{
    border-radius: 0.1875rem;
    border: 0.1rem solid #000;
    background: #FFF;
    padding: 1vh 0.5vw;
    width: -webkit-fill-available;
    width: -moz-available;
    height: -webkit-fill-available;
    height: -moz-available;
}

.container-colore-principale-1{
    background-color: var(--ow-colore-principale-1);
    color: var(--ow-background-color-td);
}

/** Elemento grid che divide in 12 colonne*/
.row{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: minmax(5vh, auto);
    column-gap: 2vw;
}

/** Elemento grid colonne grandezza automatiche*/
.row-equal{
    width: 100%;
    display: grid;
    grid-auto-rows: minmax(var(--ow-min-height-row-grid), 1fr);
    grid-auto-columns: minmax(2vw, 1fr);
    column-gap: 2vw;
    grid-auto-flow: column dense;
}

.row-equal-row{
    width: 100%;
    display: grid;
    grid-auto-rows: minmax(var(--ow-min-height-row-grid), 1fr);
    grid-auto-columns: minmax(2vw, 1fr);
    grid-auto-flow: row;
}

.row-auto-row{
    grid-auto-rows: minmax(var(--ow-min-height-row-grid), auto);
}

/** Varie classi grid */
.row-wrapper{
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.row-input-esterno{
    display: grid;
    gap: 0.5rem;
    grid-template-rows: repeat(auto-fit, minmax(5vh, auto));
}
.row-input{
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/** wrapper azzurro */
.wrapper-blue{
    background-color: #80D2FF;
    border-width: 3px;
    border-color: #001FFF;
    border-style: solid;
    border-radius: 30px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.title-wrapper-blue{
    text-align: center;
    margin-top: -1vh;
    color: #191919;
    text-align: center;
    font-family: Quicksand;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: normal;
}

/** Gruppi label input select*/
.gruppi{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
    text-align: center;
}
.gruppi select{
    border: var(--ow-colore-bordi) solid 1px;
    border-radius: 5px;
    background-color: var(--ow-colore-background-input-gruppi);
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    width: auto;
}
.gruppi input{
    border: 1px solid var(--ow-colore-bordi);
    border-radius: 5px;
    background-color: var(--ow-colore-background-input-gruppi);
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    width: auto;
}

.gruppi-normal{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
    text-align: center;
    flex-wrap: wrap;
}

.gruppi-normal select{
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    width: auto;
}
.gruppi-normal input{
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    width: auto;
}

.gruppi-normal > .flex{
    flex: 1 1 50%;
}

.flex{
    flex: 1 1 auto;
}

.flex-same-size{
    flex: 1 1 0px;
}

.flex-wrap{
    display: flex;
    flex-wrap: wrap;
}

.flex-row{
    display: flex;
    flex-direction: row;
    align-items: start;
}

.flex-column{
    display: flex;
    flex-direction: column;
}

.justify-content-center{
    display: flex;
    justify-content: center;
}

.justify-content-space-around{
    display: flex;
    justify-content: space-around;
}

.justify-content-space-between{
    display: flex;
    justify-content: space-between;
}

.justify-content-space-evenly{
    display: flex;
    justify-content: space-evenly;
}

.justify-content-start{
    display: flex;
    justify-content: flex-start;
}

.justify-content-end{
    justify-content: flex-end;
}

.align-item-end{
    align-items: end;
}

.align-items-center{
    align-items: center;
}

.align-items-stretch{
    display: flex;
    align-items: stretch;
}

.align-content-center{
    align-content: center;
}

.align-self-center{
    align-self: center;
}

.align-self-start{
    align-self: flex-start;
}

.input-trasparent{
    background: transparent !important;
    border: none !important;
}

.input-normal{
    background: revert !important;
}

/** Form */
.was-validated :invalid, .is-invalid {
    color: var(--ow-color-black);
    background-color: var(--ow-form-invalid-color);
    border:2px solid var(--ow-form-invalid-border-color);
}

.was-validated :invalid:focus, .is-invalid:focus {
    color: var(--ow-color-black);
    background-color: var(--ow-form-invalid-color);
    border:2px solid var(--ow-form-invalid-border-color);
}

.transparent-button{
    padding: 0;
    cursor: pointer;
}

.wrap-column-5-row{
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
}

.wrap-column-7-row{
    display: grid;
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
}

.wrap-column{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(8rem - 2vw), 1fr));
}

.wrap-row{
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(calc(8rem - 2vw), 1fr));
}

.wrap-row-2-column{
    display: grid;
    grid-template-columns: repeat(2, minmax(20px, 1fr));
    grid-auto-flow: row dense;
}

.wrap-row-3-column{
    display: grid;
    grid-template-columns: repeat(3, minmax(20px, 1fr));
    grid-auto-flow: row dense;
}

.wrap-row-4-column{
    display: grid;
    grid-template-columns: repeat(4, minmax(20px, 1fr));
    grid-auto-flow: row dense;
}

.bottone-con-svg{
    background-color: #FFF !important;
    /*border-width: 2px !important;
    border-color: var(--ow-colore-bordi) !important;*/
    border: 2px solid var(--ow-colore-bordi) !important;
    border-radius: 15px !important;
    font-family: Quicksand !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
}

.bottone-con-svg-no-font-size{
    background-color: #FFF !important;
    /*border-width: 2px !important;
    border-color: var(--ow-colore-bordi) !important;*/
    border: 2px solid var(--ow-colore-bordi) !important;
    border-radius: 15px !important;
    font-family: Quicksand !important;
    cursor: pointer !important;
}

.gruppi-container-main{
    text-align: center;
    align-items: normal;
}

.secondo-container-magazzini{
    background-color: #EDEDED;
}

.bottoniTerzoContainer{
    justify-content: space-around;
    gap: 1vh;
}

.bottoniTerzoContainer button,
.bottoniTerzoContainer input[type="button"],
.bottone-linear-gradient{
    background: var(--ow-linear-gradient-button);
    border-width: 1px;
    border-color: var(--ow-colore-bordi);
    border-radius: 15px;
    cursor: pointer;
}

button.gr{
    background-color: #d9d9d9;
    border:solid 2px #808080;
    border-radius: 5px;
    color:#000000;
    outline:none;
    cursor:pointer;
    padding: 5px;
    font-size: 11pt;
}

button.gr:hover{
    background-color: #a6a6a6;
    border:solid 2px #808080;
    border-radius: 5px;
    color:#000000;
    outline:none;
    cursor:pointer;
    padding: 5px;
    font-size: 11pt;
}

.switch-svg{
    content: url('../risorseGrafiche/repeat.svg');
}

.green-circle-check{
    content: url('../risorseGrafiche/circle-check.svg');
}

.red-circle-x{
    content: url('../risorseGrafiche/red-circle-x.svg');
}

.elimina-svg{
    content: url('../risorseGrafiche/elimina.svg');
}

.modifica-svg{
    content: url('../risorseGrafiche/modifica.svg');
}

.veicolo-svg{
    content: url('../risorseGrafiche/veicolo.svg');
}

.pratica-svg{
    content: url('../risorseGrafiche/pratica.svg');
}

.docpra-svg{
    content: url('../risorseGrafiche/visDocPra.svg');
}

.cerca-svg{
    content: url('../risorseGrafiche/cerca.svg');
}

.creaPra-svg{
    content: url('../risorseGrafiche/creapratica.svg');
}

.seppia-100{
    filter: sepia(100%);
}

.undo-arrow{
    content: url('../risorseGrafiche/undo-arrow.svg');
}

.red-square-x{
    content: url('../risorseGrafiche/red-square-x.svg');
}

.floppy-disk-blue{
    content: url('../risorseGrafiche/floppy-disk-blue.svg');
}

.bank-blue{
    content: url('../risorseGrafiche/bank-blue.svg');
}

.add-square-blue{
    content: url('../risorseGrafiche/add-square-blue.svg');
}

.trash-red{
    content: url('../risorseGrafiche/trash-red.svg');
}

.aggiungicliente-svg{
    content: url('../risorseGrafiche/aggiungiCliente.svg');
}

.conferma-svg{
    content: url('../risorseGrafiche/conferma.svg');
}

.annulla-svg{
    content: url('../risorseGrafiche/esci.svg');
}

.salvaresta-svg{
    content: url('../risorseGrafiche/salvaResta.svg');
}

.salvaesci-svg{
    content: url('../risorseGrafiche/salvaCreaPratica.svg');
}

.libro-blue{
    content: url('../risorseGrafiche/libro-blue.svg');
}

.gallery-edit-blue{
    content: url('../risorseGrafiche/gallery-edit.svg');
}

.chart-blue{
    content: url('../risorseGrafiche/chart-blue.svg');
}

.shield-security-blue{
    content: url('../risorseGrafiche/shield-security-blue.svg');
}

.message{
    content: url('../risorseGrafiche/message.svg');
}

.message-add{
    content: url('../risorseGrafiche/message-add.svg');
}

.message-add-2{
    content: url('../risorseGrafiche/message-add-2.svg');
}

.password-check{
    content: url('../risorseGrafiche/password-check.svg');
}

.box-add{
    content: url('../risorseGrafiche/box-add.svg');
}

.empty-wallet-add{
    content: url('../risorseGrafiche/empty-wallet-add.svg');
}

.receipt-add{
    content: url('../risorseGrafiche/receipt-add.svg');
}

.add-circle-plus{
    content: url('../risorseGrafiche/add-circle-plus.svg');
}

.blue-eye{
    content: url('../risorseGrafiche/blue-eye.svg');
}

.add-item{
    content: url('../risorseGrafiche/add-items.svg');
}

.add-omino{
    content: url('../risorseGrafiche/add-omino.svg');
}

.call-add{
    content: url('../risorseGrafiche/call-add.svg');
}

.chat-left-text{
    content: url('../risorseGrafiche/chat-left-text.svg');
}

.print-icon{
    content: url('../risorseGrafiche/print-icon.svg');
}

.send-email{
    content: url('../risorseGrafiche/send-email.svg');
}
    
.send-svg{
    content: url('../risorseGrafiche/send-svg.svg');
}

.news-white{
    content: url('../risorseGrafiche/novita.svg');
}

.after-market{
    content: url('../risorseGrafiche/after-market.svg');
}

.xml-icon{
    content: url('../risorseGrafiche/xml.svg');
}