:root {
    --bianco: #FFF;
    --defaultFont: 'Source Sans Pro', 'Segoe UI', 'Droid Sans', Tahoma, Arial, sans-serif;
    --secondFont: 'Fjalla One', sans-serif;
    --osvaldoFont: 'Oswald', sans-serif;
    --newFont: 'Europa', sans-serif;
    --size14: 14px;
    --size16: 16px;
    --upperCase: uppercase;
    --colore-primario: rgba(0, 0, 0, 1);
    --colore-secondario: rgba(82, 83, 94, 1);
    --colore-primario-tras: rgba(0, 0, 0, 0.5);
    --colore-secondario-tras: rgba(82, 83, 94, 0.5);
    --colore-alternativo: rgba(218, 228, 227, 1);
    --colore-alternativo-tras: rgba(218, 228, 227, 0.25);
    --color-success: rgba(2, 188, 119, 1);
    --color-success-tras: rgba(2, 188, 119, 0.3);
    --color-danger: rgba(231, 76, 60, 1);
    --color-danger-tras: rgba(231, 76, 60, 0.3);
    --color-warning: rgba(241, 196, 15, 1);
    --color-warning-tras: rgba(241, 196 15, 0.3);
    --color-silver: rgba(192, 192, 192, 1);
    --color-silver-tras: rgba(192, 192, 192, 0.3);
    --color-gold: rgba(255, 215, 0, 1);
    --color-gold-tras: rgba(255, 215, 0, 0.3);
    --color-bronze: rgba(205, 127, 50, 1);
    --color-bronze-tras: rgba(205, 127, 50, 0.3);
   --colore-arancio: #FF8C00;
}

.btn-text {
    color: var(--colore-primario) 
}
.btn-text:hover {
    color: var(--colore-arancio) 
}

.link-white {
    color: #FFF;
    text-decoration: underline;
}

.link-white:hover {
    color: var(--colore-primario)
}

.color-sec {
    color: var(--colore-secondario)
}

.color-pri {
    color: var(--colore-primario)
}

.color-alter {
    color: var(--colore-alternativo)
}

.btn-primary-color {
    background: var(--colore-primario)
}

.btn-primary-color:hover {
    background: var(--colore-arancio)
}

.btn-secondary-color {
    color: var(--colore-secondario);
    border-color: var(--colore-secondario);
}

.btn-secondary-color:hover {
    background: var(--colore-secondario)
}

.bg-success {
    color: #FFF;
    background: var(--color-success)
}

.bg-danger {
    color: #FFF;
    background: var(--color-danger)
}

.bg-warning {
    color: #FFF;
    background: var(--color-warning)
}

/**
ROBA ARANCIONE 
*/


.badge-primary {
    background-color: var(--colore-arancio);
    color: #fff;
}
.layout-example-block {
    color: var(--colore-arancio);
}

/**
    FORMA STAFF
*/

.has-length .input-group-text,
.form-control:focus,
.pagination-new .selected {
    border-color: var(--colore-secondario) !important;
}

.form-control:focus,
.custom-select:focus {

    box-shadow: 0 -1px 0 0 var(--colore-alternativo) inset;
}

/**
    LAYOUT
*/

#home-user .app-brand,
#layout-sidenav,
#home-user .sidenav.bg-dark,
.divider-custom {
    background: var(--colore-primario) !important;
    background-color: var(--colore-primario) !important;
}

.divider-custom,
#layout-sidenav,
#home-user .sidenav.bg-dark,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before {
    background: var(--colore-secondario) !important;
    background-color: var(--colore-secondario) !important;
}


#home-user .navbar {
    background-color: linear-gradient(to right, var(--colore-primario), var(--colore-secondario));
}

.sidenav.bg-dark .sidenav-link:hover,
.sidenav.bg-dark .sidenav-link:focus {
    font-weight: bold !important;
    color: var(--colore-alternativo) !important;

}

.navbar.bg-dark {
    background: var(--colore-secondario) !important;
    background-color: var(--colore-secondario) !important;
    /* background: linear-gradient(to right, var(--colore-primario), var(--colore-secondario)); */
    color: var(--colore-alternativo)
}

.bg-preview {
    background-color: var(--colore-alternativo) !important;
}

.nav-tabs .nav-link {
    background-image: linear-gradient(var(--colore-secondario), var(--colore-secondario));
}

/**
SELECT E TEXT 
*/

.material-style .select2-container--default.select2-container--focus:not(.select2-container--disabled) .select2-selection,
.material-style .select2-container--default.select2-container--open:not(.select2-container--disabled) .select2-selection {
    border-color: var(--colore-secondario) !important;
    box-shadow: 0 -1px 0 0 var(--colore-secondario) inset !important;
}

.select2-results__message {
    background: var(--colore-secondario) !important;
    color: #FFF;
}

.container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--colore-secondario) !important;
    color: #fff !important;
}

.material-style .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--colore-secondario) !important;
    color: #fff !important;
}

.custom-file-input:focus~.custom-file-label {
    border-bottom-color: var(--colore-secondario);
    box-shadow: 0 -1px 0 0 var(--colore-secondario)inset;
}

/**
    CHECKBOX AND SWITCH
*/


.custom-control.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before,
.custom-control.custom-checkbox .custom-control-input:checked~.custom-control-label::before,
.custom-control.custom-radio .custom-control-input:checked~.custom-control-label::before {
    border-color: var(--color-success)
}

.custom-control.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--color-success)
}

.custom-control .custom-control-input:checked~.custom-control-label::after {
    background: var(--color-success-tras)
}

.switcher-input:checked~.switcher-indicator {
    background: var(--color-success-tras)
}

.switcher-input:checked~.switcher-indicator::after {
    background: var(--color-success)
}

.switcher-input:checked~.switcher-indicator::before {
    background: var(--color-success-tras)
}

.switcher-input:focus~.switcher-indicator {
    box-shadow: 0 0 0 2px var(--color-success-tras)
}

.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--colore-secondario-tras)
}

.custom-control.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before,
.custom-control.custom-checkbox .custom-control-input:checked~.custom-control-label::before,
.custom-control.custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--color-success)
}

.custom-control.custom-radio .custom-control-input~.custom-control-label::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%231cbb84'/%3E%3C/svg%3E");
}



.btn-table .icona-custom:hover,
.btn-header .icona-custom:hover,
.modal-header,
.badge-primary-custom,
.btn-table-colored .icona-custom,
.btn-table-colored .icona-custom:hover,

.btn-table .icona-custom:hover,
.btn-header .icona-custom:hover,
.btn-header i,
#home-admin .layout-navbar .navbar-brand,
.btn-header,
.pagination-new .selected,
.pagination-new .selected:hover,
.pagination-new .page:hover,
.page-logo a,
.info-card-text span,
.info-card,
.footer-icon-link,
.nav-menu li a:hover>[class*='fa-'],
.nav-menu li>ul li a,
.nav-menu li.open>a,
.nav-menu li.open a i,

.btn-round-custom:hover,
.btn-round-custom:focus,
td .btn-danger,
td .btn-success,
.icon-hover-primary:hover,
.material-style #toast-container>.toast-success,
.green,
.marker,
.dropdown-header-custom {
    background: var(--colore-secondario)
}

.callout-primary {
    border-color: var(--color-success-tras) !important;
    background-color: var(--color-success-tras);
    color: #58625f;
}

.errorSummary {
    border-color: var(--color-danger-tras) !important;
    background-color: var(--color-danger-tras) !important;
    color: #58625f !important;
    padding: 7px;
    font-size: .75rem;
    border: 1px solid;
    border-radius: 3px;
    border-left: 3px var(--color-danger) solid !important;
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.03), 0 1px 4px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.04);
    font-weight: 300;
}

.errorSummary i {
    font-size: 1rem;
    color: var(--color-danger);
}

.callout {
    padding: 7px;
    font-size: .75rem;
    border: 1px solid;
    border-radius: 3px;
    ;
    border-left: 3px var(--color-success) solid !important;
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.03), 0 1px 4px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.04);
}

.icona-info {
    font-size: 1rem;
    color: var(--color-success);
}

.text-info-box {
    font-weight: 300;
}

.error {
    border-color: var(--color-danger) !important;
}

.errorMessage {

    background-color: var(--color-danger-tras)
}

.t7 {
    padding-top: 7px;
}