:root {
  --font-color: #121212;
  --button-color:#2b76ab;
  font-size:14px;
}

/*---------- INPUT VARI------------*/
*{
    margin: 0;
    padding: 0;
    border-spacing: 0;
    outline:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    font-family: 'Comfortaa', cursive;
    font-weight: 400;
    line-height: 1.5;
}

body{
    max-width: 1600px;
    margin: 10px auto;
    padding:0px 10px;
}
ul{
    list-style-type: none;
}
img{
    transition: all 0.3s;
}

input[type=text],input[type=email],input[type=password],input[type=date],input[type=datetime-local],input[type=number],textarea,select{
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    border:1px solid #999999;
    padding:4px;
    -webkit-user-select:text;
    -khtml-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    -o-user-select:text;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    background:#fff;
    cursor: pointer;
    margin-right:4px;
    transition: all 0.3s;
    color: var(--font-color);
    max-height:30px;
}
textarea{
    max-height:100px;
}
select{
    height:30px;
}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=number]:focus,textarea:focus,select:focus{
    border-color:var(--button-color);
    box-shadow:0 0 2px var(--button-color);
    -moz-box-shadow:0 0 2px var(--button-color);
    -webkit-box-shadow: 0 0 2px var(--button-color);
}

input[type=checkbox],input[type=radio]{
    width: 18px;
    height: 18px;
    border: 1px solid #093978;
    background: #fff;
    appearance: none;
    padding:0;
    cursor: pointer;
    flex-shrink: 0;
}

input[type="checkbox"]:checked, input[type="radio"]:checked{
    border: 7px solid #093978;
}


    
label{
    margin-right:4px;
    white-space: pre;
    color: var(--font-color);
}

label.error{
    position: absolute;
    color: red;
    margin-top: 20px;
}

button{
    color: #fff;
    background-color: var(--button-color);
    cursor:pointer;
    border: 1px solid transparent;
    border-radius:5px;
    transition: all 0.3s;
    padding:7px 10px;
}
button.piccolo{
    padding:3px 5px;
}
button:hover{
    transform: scale(1.1);
}

i{
    font-size:1.1em;
    cursor: pointer;
    margin: 0px 5px;
    transition: all 0.3s;
}
p{
    color:var(--font-color);
}
a{
    color:var(--font-color);
    cursor:pointer;
}
a:hover{
    color:var(--button-color);
}
b{
    font-weight: 900;
    color:#000;
}
#loadingpage{
    width:100%;
    height:100%;
    background: #000000e6;
    position:fixed;
    z-index: 10001;
    top:0;
    left:0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#loadingpage i{
    color: #fff;
    position: absolute;
    font-size: 30px;
}
#loadingpage p{
    color: #fff;
    margin-top: 60px;
}
.box{
    width:100%;
    border:1px solid var(--button-color);
    margin:20px auto;
    border-radius:4px;
}
.box .titolo{
    padding:5px;
    background: var(--button-color);
    color:#fff;
    text-align: center;
}
#tutto{margin:20px 10px;}
.jsgrid-cell{
    word-break: break-all;
    padding:5px 3px!important;
}
.jsgrid-table tr.finita td{
    background-color: rgb(0 161 255 / 30%);
}
.jsgrid-table tr.consegnata td{
     background-color: rgb(0 0 0 / 40%);
}
.jsgrid-filter-row input[type=checkbox]{
    width: 18px!important;
    height: 18px;
    padding: 0!important;
    border:2px solid #093978;
}
.jsgrid-filter-row input[type=checkbox]:checked{
    border:7px solid #093978;
}
.jsgrid-filter-row input[type=checkbox][readonly]{
    border:2px solid #ccc;
}
.jsgrid-edit-row input, .jsgrid-edit-row select, .jsgrid-edit-row textarea, .jsgrid-filter-row input, .jsgrid-filter-row select, .jsgrid-filter-row textarea, .jsgrid-insert-row input, .jsgrid-insert-row select, .jsgrid-insert-row textarea{padding:1px 2px!important;}

#tab_cal{
    font-size: 0.8em;
    margin:0px auto;
    text-align: center;
}
#tab_cal table{
    width:100%;
    margin:0px auto;
}
#tab_cal table td{
    padding:5px 2px;
}
#tab_cal b{
    font-weight: 900;
}
label[for='ragionesociale'],label[for='nome'],input[name='ragionesociale'],input[name='nome']{
    font-weight: 900;
}

.dati_cliente > div,.dati_consegna > div,.dati_pagamento > div{
    display: flex;
    align-items: center;
    justify-content: center;
    margin:10px;
    flex-wrap: wrap;
}
.dati_cliente > div > div,.dati_consegna > div > div,.dati_pagamento > div > div{
    display: flex;
    align-items: center;
    justify-content: center;
    margin:5px 0px;
}
.dati_cliente div input,.dati_consegna div input{
    width:100%;
}
.dati_cliente input[name='ragionesociale'],.dati_cliente input[name='nome'],input[name='ogg[]'],#cf_piva{text-transform: uppercase;}

#tabellone > div{
    display: flex;
    align-items: center;
    justify-content: center;
    margin:10px;
    flex-wrap: wrap;
}
#tabellone div input{
    width: 100%;
    font-size: 0.9em;
    text-transform: uppercase;
}
#tabellone div div:first-child{
    flex-grow: 1;
}
#tabellone div div:nth-child(2){
    margin-left: 5px;
    width: 60px;
}
#tabellone div div:nth-child(4){
    margin-left: 5px;
    width: 50px;
}

#tabellone div div:nth-child(3),#tabellone div div:nth-child(5),#tabellone div div:nth-child(6){
    display: flex;
    align-items: center;
    margin-left: 5px;
    width: 85px;
}
#tabellone input[type='number']{
    margin-right: 0;
}
#tabellone input[name='ogg[]']{
    padding-right: 92px;
}
select[name='cat[]']{
    height: 29px;
    float: right;
    position: relative;
    margin-top: -29px;
    margin-right: 0px;
}

#butt_mex{
    color: var(--button-color);
    background: #fff;
    border: 1px solid var(--button-color);
    font-weight: bold;
}

@media screen and (max-width: 550px) {
    #mod1,#mod2{display:block;}
}  


@media screen and (max-width: 1220px) {
    .dati_pagamento > div > div:nth-child(3),.dati_pagamento > div > div:nth-child(4){
        padding-top:20px;
    }
}  
@media print{
    @page {size: A4;margin:28mm 1mm 0mm 1mm;}
    html,body,#tutto{margin-top:0px!important}
    #menu_bar,#puls,#plusrighe,.menorighe{display:none!important;margin:0}
    :root{font-size:12px!important;}
    .box,#tutto{margin:10px auto;}
    #scritta{display:block!important;}
    #retro{display:block!important;}
    .box .titolo,#tit{padding:2px!important;font-size:0.85em;}
    input[type=text], input[type=email], input[type=password], input[type=date],input[type=datetime-local],input[type=number], textarea, select{font-size: 0.9em;box-shadow: none;-webkit-box-shadow: none;-moz-box-shadow: none;padding:2px!important;}
    input:-webkit-autofill {
        -webkit-background-clip: text;
      }
    input[type=text],input[type=email],input[type=password],input[type=date],input[type=datetime-local],input[type=number],select{height: 20px!important;}
    body{padding:0;margin:0;}
    .dati_cliente div:nth-child(1) div:nth-child(1){
        flex-grow: 0.5;
        width: 50%;
        justify-content: flex-start;
    }
    .dati_cliente div:nth-child(1) div:nth-child(2){
        width: 50%;
        flex-grow: 0.5;
        justify-content: flex-end;
    }
    .dati_cliente input[name='data'],.dati_cliente input[name='data_i']{
        max-width:100px!important;
    }
    .dati_cliente input[name='data_u']{max-width:115px!important;}
    #mod1{
        flex-grow: 0.5;
        margin-left: 0!important;
        justify-content: flex-start;
    }
    #mod2{
        flex-grow: 0.5;
    }
    input[name='ogg[]']{font-size:0.6em!important;}
    #tabellone div div:nth-child(2){
        width: 50px;
    }
    #tabellone div div:nth-child(4){
        width: 30px;
    }
    #tabellone div div:nth-child(3),#tabellone div div:nth-child(5),#tabellone div div:nth-child(6){
        width: 60px;
    }
    select[name='cat[]']{margin-top: -17px!important;padding:2px!important;width:auto!important;height:auto!important;appearance:none;font-size:0.6em!important;}
    .dati_pagamento > div > div{
        width:48%!important;
    }
    .dati_pagamento > div > div:nth-child(3),.dati_pagamento > div > div:nth-child(4){
        padding-top:20px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type=number] {
        -moz-appearance: textfield;
      }
    #pagato{display: none;}
}