/* IE10+ CSS */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
{
    h3.content-box-header.bg-red,
    h3.content-box-header.bg-white
    {
        height: 40px;
    }
}

/* IE Edge 16+ CSS */
@supports (-ms-ime-align:auto) 
{
    h3.content-box-header.bg-red,
    h3.content-box-header.bg-white
    {
        height: 40px;
    }
     
}

/* #region autocomplete  */
ul.ui-autocomplete {
    width:max-content;
    top:0px;
}

ul.ui-autocomplete > li.ui-menu-item.ui-state-focus {
    background: var(--color-base-lt);
}
/* #endregion autocomplete  */

/* #region lookup  */
.lookup i.icon-iconic-search {
    font-size: 2.0em;
    display: flex;
    cursor: pointer !important;

    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}

.lookup i.icon-iconic-search:before {
    color: #9acd32; /*icon_icon_color_yellowgreen*/
}

.lookup i.icon-iconic-search:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
}
/* #endregion lookup  */

/* #region spinner  */
#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1000;
}

#tab-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 60px;
    left:0px;
    display: block;
    background: rgba(255, 255, 255, 0.5);
}

 .spinner {
    color: var(--color-base);
    font-size: 50px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    position: relative;
    top: 50%;
    left: 50%;
    display: block;
    border-radius: 50%;
    transform: translateZ(0);
    animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
}

@keyframes mltShdSpin {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes round {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* #endregion spinner  */

/*  Consente al plugin di rezise delle colonne di funzionare in modo corretto,
    ma richiede di assegnare una "width" di default alle colonne delle DataTable */
table.dataTable
{
    table-layout: fixed;
}

table.dataTable > thead > tr > th > .glyph-icon
{
    font-size: 1.3em;
}

table.dataTable > tbody > tr > td:not(.dataTables_empty)
{
    padding: 5px !important;
}

/*table.dataTable > tbody > tr:hover
{
    background-color: #f6f6f6 !important;
}*/

table.dataTable > tbody > tr > td,
table.dataTable > thead > tr > th
{
    overflow: hidden;
    white-space: nowrap !important;
}

table.dataTable > tbody > tr > td {
    font-size: 12px;
    font-weight: 400;
    color: black;

    text-overflow: ellipsis;
    max-width: 200px;
    /*min-width: 70px;*/
}

table.dataTable > thead > tr > th {
    font-size: 13px;
    color: black !important;
    /*text-overflow: ellipsis;*/
}

table.dataTable > tbody > tr > td > div.tooltip
{
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

.dataTables_wrapper
{
    position: relative;
    margin-top: 10px !important;
}
        
.dataTables_processing
{
    color: white;
    background-color: var(--color-base);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-top: 0px !important;
    z-index: 999;
}
        
.dataTables_length,
.dataTables_info
{
    float: left;
}

.dataTables_length
{
    margin-bottom: 5px;
    margin-right: 30px;
}

.dataTables_length select
{
    float: none !important;
    margin-right: 5px !important;
    margin-left: 5px !important;
}

/*  Risolve il problema dell'header duplicato dovuto all'utilizzo della proprietà "scrollX: true" delle DataTable
    https://stackoverflow.com/questions/29226283/duplicate-empty-header-occur-in-datatable-when-enabling-scrollx-or-scrolly-when */
div.dataTables_scrollBody thead tr[role="row"]
{
    visibility: collapse !important;
    height: 0px !important;
}

/* Per le DataTable con la proprietà scrollX o scrollY attiva */
div.dataTables_scrollHead table.dataTable
{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}
/* Per le DataTable con la proprietà scrollX o scrollY attiva */
div.dataTables_scrollBody table.dataTable
{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
}

div:not(.dataTables_scrollHead):not(.dataTables_scrollHeadInner):not(.dataTables_scrollBody) > table.dataTable
{
    border-radius: 10px;
    overflow: hidden;
}

[id^="recordsTotal"] {
    text-align: center;
}




/*
Assegno a tutte le celle della prima colonna (che solitamente contengono bottoni) di tutte le dataTable,
la dimensione minima, cosicchè eventuale spazio superfluo venga elminato.
*/
/*
.dataTable > tbody > tr > td:first-child:not(.dataTables_empty)
{
    width: 1px;
}
*/
.dt-pulsanti 
{
    width: 1px;
}

td.dt-icon-center
{
    text-align: -webkit-center;
    text-align: -moz-center;
}

th.dt-icon-center
{
    padding-right: 20px !important;
}


td.align_center
{
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
}
/*vedi commento per td.align_center*/
td.align_left
{
    text-align: left;
    text-align: -webkit-left;
    text-align: -moz-left;
}
/*vedi commento per td.align_center*/
td.align_right
{
    text-align: right;
    text-align: -webkit-right;
    text-align: -moz-right;
}

[class^="tdPulsante"] {
    cursor: pointer;
    padding-left: 3px !important;
    padding-right: 3px !important;  
    color: black !important;
}

[class^="tdPulsante"]:hover {
    /*color: #7e7e7e !important;*/
    color: white !important;
    background: var(--color-base);
    border-radius: 3px;
}
        
div.dt-buttons
{
    /*position: relative;*/
    /*float: right;*/
}

button.dt-button:not(.colvis-button):not(.colvis-header)
{
    background: none;
    border: none;
    margin-bottom: 5px;
    width: auto !important;
}

button.dt-button:not(.button-refresh):not(.colvis-button-collection):not(.colreset-button):not(.colvis-button):not(.colvis-header)
{
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    /*padding: 0;*/
}

button.dt-button:not(.button-refresh):not(.colvis-button-collection):not(.colreset-button):not(.colvis-button):not(.colvis-header):hover
{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
}

button.dt-button div.dt-icon-button,
/* Per i custom button */
button.dt-button img
{
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
}

button.dt-button div.dt-icon-button i.glyph-icon 
{
    font-size: 2.5em;
}

div.dt-button-collection
{
    width: 400px;
    background: white;
    border-radius: 3px;
    box-shadow: 8px 8px 20px 0 rgb(0 0 0 / 20%);
}

div.dt-button-collection button.dt-button
{
    display: inline-block;
    width: 32%;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px;
    margin: 2px;
}

div.dt-button-collection button.colvis-header
{
    width: 98%;
    height: 30px;
    border: none;
    background: none;
    cursor: default;
}

div.dt-button-collection button.colvis-button
{
    display: inline-block;
    width: 48%;
}

div.dt-button-collection button.colvis-button:active, div.dt-button-collection button.colvis-button.active
{
    color: white;
    background-color: var(--color-base);
}

div.dt-button-collection h3
{
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 100;
    border-bottom: 1px solid #9f9f9f;
    font-size: var(--fs-body-lg);
    font-weight: bold;
}

div.dt-button-background
{
    background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
}

button[id^="btn"][id$="_ColReset"]
{
    margin-right: 200px;
}
/*
div.button
{
    font-size: 2.5em;
    color: black;
    cursor: pointer;
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}


div.button:hover
{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
}
*/
.add-button {
    cursor: default;
    padding-top: 0px !important;
    padding-bottom: 1px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.add-button div
{
    cursor: pointer;
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}

.add-button div:hover
{
    /*color: var(--color-base);*/
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
}

.add-button div i
{
    font-size: 1.8em;
}

button.tot-sel-button
{
    cursor: default;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
}

button.tot-sel-button:hover
{
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
}

button.left-button
{
    float: left;
}

button.right-button
{
    float: right;
}

/* "refresh-button" andrebbe in conflitto con una classe omonima di Bratilus */
/*
.button-refresh
{
    transition: all .5s ease-in-out !important;
    -webkit-transition: all .5s ease-in-out !important;
    -moz-transition: all .5s ease-in-out !important;
}
        
.button-refresh:hover
{
    transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
    -moz-transform: rotate(180deg) !important;
}
*/

/* Vedi "custom.animations.js" */
.button-refresh {
    transition: transform .5s ease-in-out !important;
    -webkit-transition: transform .5s ease-in-out !important;
    -moz-transition: transform .5s ease-in-out !important;
}

.arrow-right,
.arrow-left
{
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

.arrow-left:hover
{
   /*color: var(--color-base);*/
   transform: translate(-15px);
   -webkit-transform: translate(-15px);
   -moz-transform: translate(-15px);
}

.arrow-right:hover
{
   /*color: var(--color-base);*/
   transform: translate(15px);
   -webkit-transform: translate(15px);
   -moz-transform: translate(15px);
}

.pulsante_folder{
    width:50px;
    cursor:pointer;
}

.pulsante_folder_search {
    cursor: pointer;
}


div#btsearch .icon-elusive-search-circled {
    position: relative;
}

div#btsearch .icon-elusive-search-circled:hover:after {
	animation: ripple 1.5s ease;
}

div#btsearch .icon-elusive-search-circled:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
	transform: scale(0);
}

@keyframes ripple {
	from { transform: scale(0); opacity: 1; }
	to { transform: scale(3); opacity: 0; }
}

/* #region MODALI  */
.modal.fade
{
    text-align: center;
    overflow: hidden; /* evita che ci sia uno scrolling aggiuntivo durante il drag della modale */
}

.modal.fade:before {
    content: '';  
    height: 100%;
    vertical-align: middle;
}

/* 2023-10-12 M.N. */
div:not([id$=MainModal]).modal.fade:before {
    /* Dispone la modale al centro dello schermo */
    /* NB: Non usare su MainModal, altrimenti la modale "scompare" in caso la larghezza superi quella della finestra del browser */
    display: inline-block;
}

.modal.fade .modal-dialog
{
    display: inline-block;
    vertical-align: middle;
}

.modal.fade .modal-header
{
    cursor: move;
    padding: 9px 15px;
    background-color: var(--color-base); /*#CCC*/
    color: white;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
       
div[id$=AlertModal] .modal-footer,
div[id$=ConfirmModal] .modal-footer,
div[id$=EditModal] .modal-footer
{
    padding: 9px 15px;
}

div[id$=AlertModal] .modal-body,
div[id$=ConfirmModal] .modal-body {
	text-align: left;
	/* display: inline-flex; */
	padding-left: 100px !important;
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

div[id$=WaitModal] {
    z-index: 9999 !important;
}

div[id$=WaitModal] .modal-dialog {
    width: 300px !important;
}

div[id$=WaitModal] .loading {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div[id$=WaitModal] .loading .spinner {
    /* Override di parte del CSS generico della classe .spinner */
    position: unset !important;
    top: unset !important;
    left: unset !important;
    /**********************/
}

.modal-body.modal_warning:before {
    content: "\f071"; /* icon-warning */
    font-family: FontAwesome;
    color: #ffa500;
    font-size: 3.0em;
    position: absolute;
    left: 5%;
    top: calc(100% / 6);
}

.modal-body.modal_error:before {
    content: "\e821"; /* icon-elusive-cancel-circled */
    font-family: elusive;
    color: #ff0000;
    font-size: 3.0em;
    position: absolute;
    left: 5%;
    top: calc(100% / 6);
}

.modal-body.modal_info:before {
    content: "\f05a"; /* icon-info-circle */
    font-family: FontAwesome;
    color: #0000ff;
    font-size: 3.0em;
    position: absolute;
    left: 5%;
    top: calc(100% / 6);
}

.modal-body.modal_question:before {
    content: "\f059"; /* icon-question-circle */
    font-family: FontAwesome;
    color: #0000ff;
    font-size: 3.0em;
    position: absolute;
    left: 5%;
    top: calc(100% / 6);
}
/* #endregion MODALI  */

.separator
{                     /*var(--color-base)*/
    /*background-color: rgb(192, 23, 24);*/
    /*background-color: rgb(0, 0, 0);*/
    background-color: #7e7e7e; /* Colore default icone Bratilius */
    color: White;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.formTdLabel[style*="display: table"]
{
    margin-top: 2px;
    margin-bottom: 2px;
}

.formTdLabel[style*="display: table"] input
{
    margin-left: 2px;
}

table.custom-radio tbody tr td
{
    padding-right: 10px;
}

input[type="file"]::-webkit-file-upload-button {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: white;
    background: var(--color-base);
    border: none;
	padding-bottom: 3px;
    padding-top: 3px;
}

::-webkit-scrollbar {
    width: 12px; /* for vertical scrollbars */
    height: 10px; /* for vertical scrollbars */
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    background: #dcdcdc;  /*var(--color-base)*/
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a9a9a9;  /*#b30000*/
}

::-webkit-scrollbar-thumb:active {
    background: #808080;
}

.LabelErrore
{
    font-weight: bold;
    color: #FF0000;
    display: inline;
}

.LabelWarning {
    font-weight: bold;
    color: #FFBB00;
    display: inline;
    background: grey;
    border-radius: 3px;
    padding: 5px;
}

.badge-warning, .bg-orange, .bg-warning, .bootstrap-switch-warning, .btn-warning, .checkbox-warning div[id^=uniform-] span.checked, .hover-orange:hover, .hover-warning:hover, 
.label-warning, .radio-warning div[id^=uniform-] span.checked {
    color: #fff;
    border-color: var(--color-base) !important;
    background: var(--color-base) !important;
}

.content-box-header.sortable {
    cursor: move;
}

/* #region "Bratilius CSS override" */
.badge-danger, .bg-danger, .bg-red, .bootstrap-switch-danger, .btn-danger, .checkbox-danger div[id^=uniform-] span.checked, .hover-danger:hover,
.hover-red:hover, .label-danger, .radio-danger div[id^=uniform-] span.checked {
    color: #fff;
    border-color: var(--color-base) !important; /*colore originale: #f33*/
    background: var(--color-base) !important; /*colore originale: #ff5757*/
}
.btn-danger:focus {
    color: #fff;
    border-color: var(--color-base) !important;
    background: var(--color-base) !important;
}
.btn-danger.active, .btn-danger.disabled, .btn-danger.disabled.active, .btn-danger.disabled:active, .btn-danger.disabled:focus, .btn-danger.disabled:hover,
.btn-danger:active, .btn-danger:hover, .btn-danger[disabled], .btn-danger[disabled].active, .btn-danger[disabled]:active, .btn-danger[disabled]:focus,
.btn-danger[disabled]:hover, .label-danger[href]:focus, .label-danger[href]:hover, .open .dropdown-toggle.btn-danger {
    color: #fff;
    border-color: var(--color-base) !important; /*colore originale: #ff1f1f*/
    background: var(--color-base-lt) !important; /*colore originale: #f33*/
}
.border-red {
    border-color: var(--color-base-lt) !important;
}
.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
    border-color: var(--color-base) !important;
}
.ui-datepicker .ui-datepicker-current-day a, .ui-datepicker .ui-datepicker-current-day span, .ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
    color: #fff;
    background: var(--color-base) !important;
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:focus {
    color: #fff;
    border-color: var(--color-base) !important;
    background-color: var(--color-base) !important;
}
.bsdatepicker td span:hover, .bsdatepicker td.active, .bsdatepicker td.day.active:hover, .bsdatepicker th.next:hover, .bsdatepicker th.prev:hover,
.daterangepicker .calendar th.next:hover, .daterangepicker .calendar th.prev:hover, .daterangepicker td.active, .daterangepicker td.available.active:hover,
.hover-primary:hover, .label-primary[href]:focus, .label-primary[href]:hover, .open .dropdown-toggle.btn-primary, .pagination > .active > a:hover,
.pagination > .active > span:hover, .ui-accordion-header.ui-accordion-header-active.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-state-hover,
.ui-datepicker .ui-datepicker-prev.ui-state-hover, .ui-datepicker td a:hover, .ui-dialog-buttonset button:hover, .ui-rangeSlider-bar:active, .ui-rangeSlider-bar:hover,
.ui-slider-handle.ui-state-active, .ui-slider-handle.ui-state-hover {
    color: #fff;
    border-color: var(--color-base) !important; /*colore originale: #2173c0*/
    background-color: var(--color-base-lt) !important; /*colore originale: #3ca1ff*/
}
.btn-primary.active, .btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover,
.btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled]:active,
.btn-primary[disabled]:focus, .btn-primary[disabled]:hover {
    color: #fff;
    border-color: #2173c0 !important;
    background-color: #3ca1ff !important;
}
#page-sidebar li a:hover, #page-sidebar li.sfHover > a.sf-with-ul, #sidebar-menu li.active > a {
    color: var(--color-base) !important; /*colore originale: #2381E9*/
}
select.ui-datepicker-month,
select.ui-datepicker-year {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #ddd;
}
.ui-datepicker select.ui-datepicker-month {
    width: 30% !important;
    margin-left: 30px !important;
}
.ui-datepicker, .ui-dialog, .ui-menu {
    position: inherit !important;
    float: inherit! important;
}
.tooltip-inner {
    max-width: inherit !important;
}
.ms-container {
    width: 700px;
}
.ms-list {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.ms-hover {
    background: var(--color-base) !important;
}
.icon-calendar:before {
    color: var(--color-base);
}
.bs-label {
    font-size: 100% !important;
}
ul.ui-tabs-nav {
    display: contents !important;
}

h3.content-box-header.bg-red,
h3.content-box-header.bg-white {
    padding: 0px !important;
    /*font-size: 15px !important;*/
}

h3.content-box-header.bg-default,
h3.content-box-header.bg-black {
    padding: 10px !important;
}

/* NB: "content-box-header-icon-container" è un classe custom (non fa parte di Bratilius) */
h3.content-box-header.bg-default > .content-box-header-icon-container {
    display: inline-flex;
    margin-right: 5px;
}

h3.content-box-header.bg-default > .glyph-icon,
h3.content-box-header.bg-default > .content-box-header-icon-container > .glyph-icon {
    opacity: 1 !important;
    color: black !important;
}
/* #endregion */

/* #region "dialog_popup.css" */
/*body {
    font-size: 11px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    margin: 3px;
}

label.lbTitle {
    color: #333399;
    background-color: #DBDBDB;
}

table.tbTitle {
    background-color: white;
    border: 0;
    width: 100%;
}

.datepicker {
    white-space: nowrap;
    cursor: pointer;
}*/

.checkbox, input[type="checkbox"], .pulsante
{
    cursor: pointer;
}

.connectedSortable {
    list-style-type: none;
    margin: 0;
    padding: 0 0 2.5em;
    float: left;
    margin-right: 10px;
    border: 1px dotted #cccccc;
    background: #f3f3f3;
    height: 150px;
    width: 200px;
    overflow: auto;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.connectedSortable li {
    margin: 3px 5px 5px 2px;
    padding: 5px;
    width: 150px;
    height: 12px;
    cursor: pointer;
    background-image: url('Images/sfondo_barra.gif');
    background-repeat: repeat-x;
    border: 1px solid #555555;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -khtml-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -khtml-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -khtml-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -khtml-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
/* #endregion */

/* #region "pannelli.css" */
.pannello_scuro {
    color: white;
    background-color: #222222;
    border: 2px solid black;
    padding: 2px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -khtml-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -khtml-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -khtml-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    
    filter:alpha(opacity=70);
    opacity: 0.7;
    -moz-opacity:0.7;
    
}

/*.Pannello {
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    border-right: 2px solid #999999;
    border-bottom: 2px solid #999999;
    background-color: #FAFAFA;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.Pannello_top {
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #999999;
}

.Pannello_titolo {
    border-bottom: 1px solid #999999;
    background-color: #999999;
    color: #FFFFFF;
    text-align: right;
    vertical-align: middle;
    padding-right: 20px;
    background-repeat: no-repeat;
    background-position: -20px -20px;
    height: 50px;
    font-size: 12px;
    font-weight: bold;
}*/
/* #endregion */

/* START: J-SELECTOR per SELECT e OPTIONS */
.j-selector {
    border: 1px solid lightgrey;
    overflow-y: auto;
    border-radius: 5px;
}

.j-selector option {
    padding: 3px 5px 3px 5px;
    margin: 3px;
    border-radius: 5px;
    font-family: inherit;
    font-size: inherit;
}

.j-selector option:hover {
    background-color: var(--color-base) !important;
    color: #fff;
    cursor: pointer;
}
/* END: J-SELECTOR per SELECT e OPTIONS */