* {
    font-family: Arial, Helvetica, sans-serif;
}
input[type="text"], span, input[type="password"] {
    font-size: 8pt;
}
.page-title {
    background-color: var(--azzurro);
    width: 100%;
    height: 100px;
    padding-left: 20px;
}
.wrapper-2 {
    margin-top: 2%;
    /*margin-left: 8%;*/
    width: auto;
    padding: 10px;
}

.div-grid-2 {
    display: grid;
    column-gap: 8px;
    row-gap: 8px;
    grid-template-columns: auto auto;
}
.div-grid-3 {
    display: grid;
    column-gap: 8px;
    row-gap: 8px;
    grid-template-columns: auto auto auto;
}
.div-grid-4 {
    display: grid;
    column-gap: 8px;
    row-gap: 8px;
    grid-template-columns: auto auto auto auto;
}
.div-grid-5 {
    display: grid;
    column-gap: 8px;
    row-gap: 8px;
    grid-template-columns: auto auto auto auto auto;
}
.div-grid-6 {
    display: grid;
    column-gap: 8px;
    row-gap: 8px;
    grid-template-columns: auto auto auto auto auto auto;
}
input[type="text"], input[type="password"], input[type="email"], select {
    width: 100%;
    height: 30px;
    background-color: transparent;
    border: 1px solid var(--dark);
    border-radius: 4px;
    padding-left: 4px;
}
input[type="checkbox"], select {
    cursor: pointer;
    font-size: 8pt;
}
.response {
    width: auto;
    height: auto;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 8pt;
}
.response-overflow {
    height: 60px;
    overflow: auto;
}
.response-success {
    color: var(--floralwhite);
    background-color: var(--success);
    border: 1px solid var(--dark);
    border-radius: 4px;
}
.response-primary {
    color: var(--floralwhite);
    background-color: var(--primary);
    border: 1px solid var(--dark);
    border-radius: 4px;
}
.response-info {
    color: var(--floralwhite);
    background-color: var(--info);
    border: 1px solid var(--dark);
    border-radius: 4px;
}
.response-warning {
    color: var(--dark);
    background-color: var(--warning);
    border: 1px solid var(--dark);
    border-radius: 4px;
}
.response-danger {
    color: var(--floralwhite);
    background-color: var(--danger);
    border: 1px solid var(--dark);
    border-radius: 4px;
}
.full-screen {
    background-color: #000000; /*var(--fullscreenNew); /*var(--fullscreen); */
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
    display: none;
    opacity: 0.8;
}
/*
.img-loading {
    background-image: url("../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50 50;
    border-radius: 20px;
    position: fixed;
    top: 35%;
    left: 40%;
    width: 200px;
    height: 200px;
    z-index: 10000;
    display: none;
}
*/
.input-sm {
    height: 25px !important;
}
.btn-dl-data, .btn-export-excel, .buttons-excel, .buttons-csv {
    visibility: hidden;
}
.btn-export {
    position: relative;
    top: 20px;
}
.buttons-html5 { /* BOOTSTRAP BUTTONS EXPORT DATA*/
    width: 32px;
    height: 32px;
}
.btn-pdf {
    background-image: url('../img/icon-pdf.png');
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 5px center;
}
.btn-csv {
    background-image: url('../img/icon-csv.png');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 5px center;
}
.btn-excel {
    background-image: url('../img/icon-excel.png');
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 5px center;
}
.buttons-page-length {
    position: absolute;
    top: 60px;
    height: 30px;
    width: 100px; 
}
.dt-button-collection {
    position: absolute !important;
    top: 60px !important;
    left: 110px !important;
}
.button-page-length {
    margin-left: 10px;
}
.button-page-length, .buttons-page-length, .dt-button {
    background-color: var(--floralwhite);
    border: 1px solid var(--gray);
    border-radius: 4px;
}
/*
.row-table {
    position: relative;
    left: 5%;
    width: 95%;
}
*/
.table {
    word-wrap: break-word;
    font-size: 8pt;
}
.table-preview {
    width: 50% !important;
    height: 200px !important;
    overflow: auto !important;
}

#UTFI_TABLE_BUTTONS_2_info, #UTFI_TABLE_BUTTONS_2_paginate {
    font-size: 8pt;
}
#UTFI_TABLE_BUTTONS_2_filter {
    font-size: 8pt;
}
.title-view {
    margin-top: 10px !important;
    color: var(--floralwhite) !important;
}
.btn-outline:hover {
    transition: 2s;
    background-color: transparent !important;
    color: var(--dark) !important;
}
.img-loading {
    border: 0px solid grey;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 4px;
    /*box-shadow: 0px 3px 20px; rgba(0, 0, 0, 0.5);*/
    /*position: fixed; top: 25%; left: 46%;*/
    /* ottima sintassi per centrare gli elementi. */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    /* /ottima sintassi per centrare gli elementi. */
    width: 300px;
    height: 200px;
    color: red !important;
    background-image: url("../img/loading.gif");
    /* background: url('../img/earth.gif') no-repeat center top; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: none;
    z-index: 10000;
    /*
	animation-name: divpanel;
	animation-duration: 3s;
*/
}
.btn-ivan {
    border: 1px solid var(--dark);
    border-radius: 4px;
    font-size: 10pt;
}
.btn-ivan-size-16 {
    width: 16px;
    height: 16px;
    font-size: 8px;
}
.btn-ivan-size-24 {
    width: 24px;
    height: 24px;
    font-size: 12px;
}
.btn-ivan-size-32 {
    width: 32px;
    height: 32px;
    font-size: 20px;
}
.btn-ivan-size-48 {
    width: 48px;
    height: 48px;
    font-size: 36px;
}
.btn-ivan-size-64 {
    width: 64px;
    height: 64px;
    font-size: 40px;
}
.btn-ivan-size-button-0 {
    width: auto;
    height: 30px;
}
.div-domanda {
    transition: 2s;
    border: 1px solid var(--dark);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 4px;
    /*box-shadow: 0px 3px 20px; rgba(0, 0, 0, 0.5);*/
    /*position: fixed; top: 25%; left: 46%;*/
    /* ottima sintassi per centrare gli elementi. */
    position: fixed;
    left: 50%;
    top: -50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    /* /ottima sintassi per centrare gli elementi. */
    width: 80%;
    height: 380;
    display: block;
    z-index: 9999;
    background-color: var(--floralwhite);
}
.title-domanda {
    border-radius: 20px 20px 0 0;
    position: absolute; top:0; left: 0; right: 0;
    padding:4px;
    background-color: var(--info);
    text-align: center;
    height: 80px;
    line-height: 80px;
    color: var(--floralwhite);
    text-transform: uppercase;
}
.btn-chiudi-popup {
    position:fixed; bottom: 90%; right:8px;
}
.body-domanda {
    position: absolute; top:80px; left: 0; right: 0;
    padding:4px;
}
.body-domanda-2 {
    position: absolute; top: 120px; left: 0; right: 0;
    padding:4px;
}
textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 8pt;
    border: 1px solid var(--dark);
    border-radius: 4px;
    padding-left: 4px;
}
.message-fat {
    width: 100%;
    height: 100px;
}
.tr-color-rose {
    background-color: var(--lightpink) !important;
    color: var(--dark) !important;
}
.clear {
    clear: both;
}
.iclose {
    float:right; padding: 10px; position: relative; font-size:24px; cursor:pointer;
}
/* MEDIA QUERY */
/* PORTRAIT ONLY iPhone */
@media only screen and (max-device-width: 800px) and (orientation: portrait) {
    .img-loading {
        left: 26%;
    }
    .tag-utente-azienda {
        display: none;
    }
} /* ./PORTRAIT ONLY iPhone */
/* LANDSCAPE ONLY iPhone */
@media only screen and (max-device-width: 1000px) and (orientation: landscape) {
    
} /* ./LANDSCAPE ONLY iPhone */
/* LANSCAPE ONLY LAPTOP 1280x580 */
@media only screen and (min-device-width: 1260px) and (max-device-height: 580px) and (orientation: landscape) {
    
} /* ./LANDSCAPE ONLY LAPTOP 1280x580 */
/* PORTRAIT ONLY iPad */
@media only screen and (min-device-width: 810px) and (orientation: portrait) {
    
} /* ./PORTRAIT ONLY iPad */
/* LANDSCAPE ONLY iPad */
@media only screen
and (min-device-width: 1080px) 
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {
    
} /* ./LANDSCAPE ONLY iPad */
/* ./MEDIA QUERY */