:root {
    --disabled : #cdcfd0;
    --lightgrey: #aeaeae;
    --request: #af4dff;
    --refused: #b43b3b;
    --invoice: #6fd16d;
    --planned: #55dde2; 
    --noauth: #766088;
    --bordercolor: #e9ecef;
    --new: #e83e8c;
    --light-success: #e9f9f7;
    --light-info: #e6f2fa
}

/*** loaders ***/
.loading-dots {
    display: none;
}

.loading-dots.show {
    display: flex;
}

.dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #333;
    margin: 0 2px;
    opacity: 0;
}

.dot:nth-child(1) {
    animation: fade 1.5s infinite;
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation: fade 1.5s infinite;
    animation-delay: 0.5s;
}

.dot:nth-child(3) {
    animation: fade 1.5s infinite;
    animation-delay: 1s;
}

@keyframes fade {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
/*****************/

.omc-custom-file, .omc-custom-file::after{
    position: absolute;
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #4f5467;
    top: 0;
    right: 0;
}

.omc-custom-file {
    left: 0;
    z-index: 1;
    font-weight: 300;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 2px;
    height: calc(1.5em + .75rem + 2px);
}

.omc-custom-file::after {
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + .75rem);
    content: "Browse";
    background-color: #f8f9fa;
    border-left: inherit;
    border-radius: 0 2px 2px 0;
}

.pointer {
    cursor: pointer;
}
.scroll-table {
    overflow-y:scroll;
    height:600px;
}
th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.omc-table-no-margin{
    margin-bottom: 0 !important;
}
.hidetext{
    -webkit-text-security: disc;
}
.error_message {
    color: var(--danger);
    font-weight: 500;
}
.microphone {
    border-radius: 20px !important;
}

.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y,
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y{
    width: 8px !important;
    right: -2px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    z-index: 1;
}
.sidebar-link {
    z-index: 0;
}

.d-drop-items {
    transition: all 0.15s ease-in-out;
}
.d-drop + .d-drop-items {
    display: none;
    position: absolute;
    background-color: white;
    z-index: 9999;
}
.d-drop:focus + .d-drop-items,
.d-drop + .d-drop-items:active {
    display: block;
}
.d-drop-item:hover {
    background-color: var(--bordercolor);
    color: var(--dark);
}
/*********** noauth ************/
.badge-noauth {
    color: #fff;
    background-color: var(--noauth);
}
.label-noauth {
    background-color: var(--noauth);
}
.text-noauth {
    color: var(--noauth);
}
.bg-noauth {
    background-color: var(--noauth);
}
.btn-noauth {
    color: #fff;
    background-color: var(--noauth);
    border-color: var(--noauth);
}
.btn-outline-noauth {
    color: var(--noauth);
    border-color: var(--noauth);
}
.btn-outline-noauth:hover {
    color: #fff;
    background-color: var(--noauth);
    border-color: var(--noauth);
}
.btn-noauth:hover {
    color: #fff;
    background-color: #8d7a58;
    border-color: #8d7a58;
}
.btn-noauth:not(:disabled):not(.disabled).active,
.btn-outline-noauth:not(:disabled):not(.disabled):active,
.show > .btn-noauth.dropdown-toggle {
    color: #fff;
    background-color: var(--noauth);
}
.btn-noauth.focus, 
.btn-outline-noauth:focus,
.btn-noauth:not(:disabled):not(.disabled).active:focus,
.btn-outline-noauth:not(:disabled):not(.disabled).active:focus,
.btn-noauth:not(:disabled):not(.disabled):active:focus,
.btn-outline-noauth:not(:disabled):not(.disabled):active:focus,
.show > .btn-noauth.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(141, 122, 88, 0.5);
}
/*********** CYAN ************/
/* Aggiungo !important poichè sovrascrivo un colore standard */
.badge-cyan {
    color: #fff !important;
    background-color: var(--cyan) !important;
}
.label-cyan {
    background-color: var(--cyan) !important;
}
.text-cyan {
    color: var(--cyan) !important;
}
.bg-cyan {
    background-color: var(--cyan) !important;
}
.btn-cyan {
    color: #fff;
    background-color: var(--cyan) !important;
    border-color: var(--cyan) !important;
}
.btn-outline-cyan {
    color: var(--cyan) !important;
    border-color: var(--cyan) !important;
}
.btn-outline-cyan:hover {
    color: #fff !important;
    background-color: var(--cyan) !important;
    border-color: var(--cyan) !important;
}
.btn-cyan:hover {
    color: #fff !important;
    background-color: #009297 !important;
    border-color: #009297 !important;
}
.btn-cyan:not(:disabled):not(.disabled).active,
.btn-outline-cyan:not(:disabled):not(.disabled):active,
.show > .btn-cyan.dropdown-toggle {
    color: #fff !important;
    background-color: var(--cyan) !important;
}
.btn-cyan.focus, 
.btn-outline-cyan:focus,
.btn-cyan:not(:disabled):not(.disabled).active:focus,
.btn-outline-cyan:not(:disabled):not(.disabled).active:focus,
.btn-cyan:not(:disabled):not(.disabled):active:focus,
.btn-outline-cyan:not(:disabled):not(.disabled):active:focus,
.show > .btn-cyan.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 146, 151, 0.5) !important;
}
/*********** planned ************/
.badge-planned {
    color: #fff;
    background-color: var(--planned);
}
.label-planned {
    background-color: var(--planned);
}
.text-planned {
    color: var(--planned);
}
.bg-planned {
    background-color: var(--planned);
}
.btn-planned {
    color: #fff;
    background-color: var(--planned);
    border-color: var(--planned);
}
.btn-outline-planned {
    color: var(--planned);
    border-color: var(--planned);
}
.btn-outline-planned:hover {
    color: #fff;
    background-color: var(--planned);
    border-color: var(--planned);
}
.btn-planned:hover {
    color: #fff;
    background-color: #4ab6b6;
    border-color: #4ab6b6;
}
.btn-planned:not(:disabled):not(.disabled).active,
.btn-outline-planned:not(:disabled):not(.disabled):active,
.show > .btn-planned.dropdown-toggle {
    color: #fff;
    background-color: var(--planned);
}
.btn-planned.focus, 
.btn-outline-planned:focus,
.btn-planned:not(:disabled):not(.disabled).active:focus,
.btn-outline-planned:not(:disabled):not(.disabled).active:focus,
.btn-planned:not(:disabled):not(.disabled):active:focus,
.btn-outline-planned:not(:disabled):not(.disabled):active:focus,
.show > .btn-planned.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(114, 250, 255, 0.5);
}
/*********** INVOICE ************/
.badge-invoice {
    color: #fff;
    background-color: var(--invoice);
}
.label-invoice {
    background-color: var(--invoice);
}
.text-invoice {
    color: var(--invoice);
}
.bg-invoice {
    background-color: var(--invoice);
}
.btn-invoice {
    color: #fff;
    background-color: var(--invoice);
    border-color: var(--invoice);
}
.btn-outline-invoice {
    color: var(--invoice);
    border-color: var(--invoice);
}
.btn-outline-invoice:hover {
    color: #fff;
    background-color: var(--invoice);
    border-color: var(--invoice);
}
.btn-invoice:hover {
    color: #fff;
    background-color: #08b905;
    border-color: #08b905;
}
.btn-invoice:not(:disabled):not(.disabled).active,
.btn-outline-invoice:not(:disabled):not(.disabled):active,
.show > .btn-invoice.dropdown-toggle {
    color: #fff;
    background-color: var(--invoice);
}
.btn-invoice.focus, 
.btn-outline-invoice:focus,
.btn-invoice:not(:disabled):not(.disabled).active:focus,
.btn-outline-invoice:not(:disabled):not(.disabled).active:focus,
.btn-invoice:not(:disabled):not(.disabled):active:focus,
.btn-outline-invoice:not(:disabled):not(.disabled):active:focus,
.show > .btn-invoice.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(8, 185, 5, 0.5);
}
/*********** ORANGE ************/
.badge-orange {
    color: #fff;
    background-color: var(--orange);
}
.label-orange {
    background-color: var(--orange);
}
.text-orange {
    color: var(--orange);
}
.bg-orange {
    background-color: var(--orange) !important;
}
.btn-orange {
    color: #fff;
    background-color: var(--orange);
    border-color: var(--orange);
}
.btn-outline-orange {
    color: var(--orange);
    border-color: var(--orange);
}
.btn-outline-orange:hover {
    color: #fff;
    background-color: var(--orange);
    border-color: var(--orange);
}
.btn-orange:hover {
    color: #fff;
    background-color: #c96e00;
    border-color: #c96e00;
}
.btn-orange:not(:disabled):not(.disabled).active,
.btn-outline-orange:not(:disabled):not(.disabled):active,
.show > .btn-orange.dropdown-toggle {
    color: #fff;
    background-color: var(--orange);
}
.btn-orange.focus, 
.btn-outline-orange:focus,
.btn-orange:not(:disabled):not(.disabled).active:focus,
.btn-outline-orange:not(:disabled):not(.disabled).active:focus,
.btn-orange:not(:disabled):not(.disabled):active:focus,
.btn-outline-orange:not(:disabled):not(.disabled):active:focus,
.show > .btn-orange.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(201, 110, 0, 0.5);
}
/* ------------------------------------ */

/* stesso colore dei bordi */
.bg-bordercolor {
    background-color: var(--bordercolor);
}
.text-bordercolor {
    color: var(--bordercolor);
}

/* labels */
/* aggiungo classe per label più piccole */
.label-sm {
    padding: 2px 8px !important; 
    line-height: 11px !important;
    font-size: 70% !important;
}
.label-secondary {
    background-color: var(--secondary);
}
.label-dark {
    background-color: var(--dark);
}
.badge-refused {
    color: #fff;
    background-color: var(--refused);
}
.text-refused {
    color: var(--refused);
}
.bg-refused {
    background-color: var(--refused);
}
.text-request {
    color: var(--request);
}
.badge-request {
    color: #fff;
    background-color: var(--request);
}
.bg-request {
    background-color: var(--request);
}

/* NEW */
.badge-new {
    color: #fff;
    background-color: var(--new);
}
.bg-new, .label-new {
    background-color: var(--new);
}
.notify-exclamation-new {
    position: absolute;
    right: -10px;
    top: -9px;
    font-size: 15px;
    border: solid 2px var(--new);
    border-radius: 50px;
    background: var(--new);
}
.btn-new {
    color: #fff;
    background-color: var(--new);
    border-color: var(--new);
}
.text-new {
    color: var(--new);
}
.btn-outline-new {
    color: var(--new);
    border-color: var(--new);
}
.btn-outline-new:hover {
    color: #fff;
    background-color: var(--new);
    border-color: var(--new);
}
.btn-new:hover {
    color: #fff;
    background-color: #ce327a;
    border-color: #ce327a;
}
.btn-new:not(:disabled):not(.disabled).active,
.btn-outlinenew:not(:disabled):not(.disabled):active,
.show > .btn-new.dropdown-toggle {
    color: #fff;
    background-color: var(--new);
}
.btn-new.focus, 
.btn-outline-new:focus,
.btn-new:not(:disabled):not(.disabled).active:focus,
.btn-outline-new:not(:disabled):not(.disabled).active:focus,
.btn-new:not(:disabled):not(.disabled):active:focus,
.btn-outline-new:not(:disabled):not(.disabled):active:focus,
.show > .btn-new.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(232, 62, 140, 0.5);
}
.badge-lightgrey {
    color: #fff;
    background-color: var(--lightgrey);
}
.bg-lightgrey, .label-lightgrey {
    background-color: var(--lightgrey);
}
.notify-exclamation-lightgrey {
    position: absolute;
    right: -10px;
    top: -9px;
    font-size: 15px;
    border: solid 2px var(--lightgrey);
    border-radius: 50px;
    background: var(--lightgrey);
}
.btn-lightgrey {
    color: #fff;
    background-color: var(--lightgrey);
    border-color: var(--lightgrey);
}
.btn-outline-lightgrey {
    color: var(--lightgrey);
    border-color: var(--lightgrey);
}
.btn-outline-lightgrey:hover {
    color: #fff;
    background-color: var(--lightgrey);
    border-color: var(--lightgrey);
}
.btn-lightgrey:hover {
    color: #fff;
    background-color: #9D9D9D;
    border-color: #9D9D9D;
}
.btn-lightgrey:not(:disabled):not(.disabled).active,
.btn-outlinelightgrey:not(:disabled):not(.disabled):active,
.show > .btn-lightgrey.dropdown-toggle {
    color: #fff;
    background-color: var(--lightgrey);
}
.btn-lightgrey.focus,
.btn-outline-lightgrey:focus,
.btn-lightgrey:not(:disabled):not(.disabled).active:focus,
.btn-outline-lightgrey:not(:disabled):not(.disabled).active:focus,
.btn-lightgrey:not(:disabled):not(.disabled):active:focus,
.btn-outline-lightgrey:not(:disabled):not(.disabled):active:focus,
.show > .btn-lightgrey.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(157, 157, 157, 0.5);
}
.btn-disabled {
    color: white;
    border-color: var(--disabled);
    background-color: var(--disabled);
}
.btn-outline-disabled {
    color: var(--disabled);
    border-color: var(--disabled);
}
.spinnerOff {
    display: none;
}
.spinnerOn {
    display: block;
}
.omc-d-15 {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}
.omc-d-20 {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
#enter-demo label {
    color: white;
}
.login-demo-link a {
    color: #d0efff;
}
#loginform #capslock-text {
    margin: unset;
    height: 0;
    transform: scaleY(0);
    display: grid;
    place-items: center;
    background-color: rgba(255, 247, 131, 0.274);
    border: 1px solid #e9ecef77;
}
#loginform #capslock-text .icon-container {
    display: grid;
    place-items: center;
    margin: 0;
}
#loginform #capslock-text input {
    border: none;
    background-color: transparent;
    padding: 0;
}
i .ti-lock::before {
    position: absolute;
    top: 50%;
    transform: translate(-50%, 0);
}

#main-wrapper[data-sidebartype="mini-sidebar"] .logo-icon,
#main-wrapper[data-sidebartype="full"] .logo-small {
    display: inline !important;
}
#main-wrapper[data-sidebartype="mini-sidebar"] .logo-small,
#main-wrapper[data-sidebartype="full"] .logo-icon {
    display: none !important;
}

#main-wrapper[data-sidebartype="full"] .logo-small,
#main-wrapper[data-sidebartype="full"] .logo-small img {
    height: 61px;
    width: auto;
    max-width: 218px;
    overflow: hidden;
    vertical-align: top;
}

/* LABEL RICHIESTE */
.label-refused {
    color: white;
    background-color: var(--refused);
}
.label-noauth {
    position: relative;
    background-color: var(--noauth);
}
.label-noauth::before {
    content: '';
    position: absolute;
    inset: 0;
    aspect-ratio: 1;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background: linear-gradient(45deg, rgba(0,0,0,0) 0% 45%, rgba(255, 255, 255, 0.3) 45% 55%, rgba(0,0,0,0) 55% 100%);
}
.label-request {
    position: relative;
    background-color: var(--request);
    color: white;
}
.label-planned {
    position: relative;
    background-color: var(--planned);
    color: white;
}
.icon::before {
    content: '';
    position: absolute;
    inset: 0;
    aspect-ratio: 1;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.3);
    letter-spacing: .1em;
    animation: loading 1000ms ease infinite alternate;
}
@keyframes loading {
    0% {transform: scaleX(0);}
    33% {transform: scaleX(0.4);}
    66% {transform: scaleX(0.7);}
    100% {transform: scaleX(1);}
}
@keyframes slide {
    0% {transform: scaleX(0);}
    33% {transform: scaleX(0.4);}
    66% {transform: scaleX(0.7);}
    100% {transform: scaleX(1);}
}
.label-default {
    background: white;
    border: 1px inset var(--info);
    color: var(--info);
    font-weight: 600;
}
/******** CONFIGURATORE MODELLI *************/
a {
    color: #2996cc;
}

a:hover {
    text-decoration: none;
}

p {
    line-height: 1.5em;
}

.small {
    color: #666;
    font-size: 0.875em;
}

.large {
    font-size: 1.25em;
}

.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    list-style: none;
    font-size: 13px;
    line-height: 20px;
}

.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dd-list .dd-list {
    padding-left: 30px;
}

.dd-collapsed .dd-list {
    display: none;
}

.dd-item,
.dd-empty,
.dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 20px;
    font-size: 13px;
    line-height: 20px;
}

.dd-handle {
    display: block;
    height: 30px;
    margin: 5px 0;
    padding: 5px 10px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.dd-handle:hover {
    color: #2ea8e5;
    background: #fff;
}

.dd-item > button {
    display: block;
    position: relative;
    cursor: pointer;
    float: left;
    width: 25px;
    height: 20px;
    margin: 5px 0;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    font-weight: bold;
}

.dd-item > button:before {
    content: '+';
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    text-indent: 0;
}

.dd-item > button[data-action="collapse"]:before {
    content: '-';
}

.dd-placeholder,
.dd-empty {
    margin: 5px 0;
    padding: 0;
    min-height: 30px;
    background: #f2fbff;
    border: 1px dashed #b6bcbf;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.dd-empty {
    border: 1px dashed #bbb;
    min-height: 100px;
    background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
    -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.dd-dragel {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

.dd-dragel > .dd-item .dd-handle {
    margin-top: 0;
}

.dd-dragel .dd-handle {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
    box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
}

.nestable-lists {
    display: block;
    clear: both;
    padding: 30px 0;
    width: 100%;
    border: 0;
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
}

#nestable-menu {
    padding: 0;
    margin: 20px 0;
}

#nestable-output,
#nestable2-output {
    width: 100%;
    height: 7em;
    font-size: 0.75em;
    line-height: 1.333333em;
    font-family: Consolas, monospace;
    padding: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#nestable2 .dd-handle {
    color: #fff;
    border: 1px solid #999;
    background: #bbb;
    background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
    background: -moz-linear-gradient(top, #bbb 0%, #999 100%);
    background: linear-gradient(top, #bbb 0%, #999 100%);
}

#nestable2 .dd-handle:hover {
    background: #bbb;
}

#nestable2 .dd-item > button:before {
    color: #fff;
}

.dd-hover > .dd-handle {
    background: #2ea8e5 !important;
}

.dd3-content {
    display: block;
    height: 30px;
    margin: 5px 0;
    padding: 5px 10px 5px 40px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.dd3-content:hover {
    color: #2ea8e5;
    background: #fff;
}

.dd-dragel > .dd3-item > .dd3-content {
    margin: 0;
}

.dd3-item > button {
    margin-left: 30px;
}

.dd3-handle {
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    cursor: pointer;
    width: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #aaa;
    background: #ddd;
    background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
    background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
    background: linear-gradient(top, #ddd 0%, #bbb 100%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.dd3-handle:before {
    content: '≡';
    display: block;
    position: absolute;
    left: 0;
    top: 3px;
    width: 100%;
    text-align: center;
    text-indent: 0;
    color: #fff;
    font-size: 20px;
    font-weight: normal;
}

.dd3-handle:hover {
    background: #ddd;
}

.deleteModelChildren {
    position: absolute;
    top: 12px;
    right: 5px;
}

.setModelChildren {
    position: absolute;
    top: 6px;
    right: 22px;
}

.myadmin-dd > li > .dd-handle {
    background: #fff;
    border: 1px solid rgba(120, 130, 140, .13);
    padding: 8px 16px;
    height: auto;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    border-radius: 0;
}

.myadmin-dd > li > ol {
    padding-left: 30px;
}

.open_sel .deleteModelChildren {
    right: 8px;
}

.sel_open_qta {
    position: absolute;
    height: 38px;
    right: 50px;
    width: 70px;
    top: 0;
}
.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}
.validation-req {
    position: relative;
    transition: all 300ms;
}
.validation-req::after {
    content: '';
    border-radius: 50%;
    position: absolute;
    background-color: rgb(255, 110, 110);
    top: 6px;
    right: 6px;
    height: 10px;
    width: 10px;
}
.validation-req::before {
    content: 'Elemento obbligatorio';
    position: absolute;
    background-color: rgba(48, 48, 48, 0.678);
    top: -13.5px;
    right: 20px;
    z-index: 2;
    color: white;
    font-size: 12px;
    clip-path: polygon(94% 0, 94% 79%, 100% 100%, 0 100%, 0 0);
    padding: .5ch 2.2ch .5ch 1ch;
    transform: scaleX(0);
    transform-origin: right;
    transition: all 300ms ease-out;
}
.validation-req:hover::before {
    transform: scaleX(1);
    transform-origin: right;
}

i.icon-Arrow-DowninCircle {
    position: relative;
}
i.icon-Arrow-DowninCircle::after {
    content: 'Procedi al prossimo step';
    position: absolute;
    background-color: rgba(48, 48, 48, 0.678);
    margin: 0 auto;
    top: -22px;
    left: 50%;
    transform: scaleY(0) translateX(-50%);
    z-index: 2;
    color: white;
    font-size: 12px;
    width: max-content;
    clip-path: polygon(100% 0, 100% 67%, 54% 67%, 50% 97%, 46% 67%, 0 67%, 0 0);
    padding: .4em .6em 1.2em .6em;
    font-family: 'Poppins';
    transform-origin: bottom;
    transition: all 250ms ease-out;
}
i.icon-Arrow-DowninCircle.text-success {
    pointer-events: none;
}
i.icon-Arrow-DowninCircle:not(.text-success):hover::after {
    transform: scaleY(1) translateX(-50%);;
    transform-origin: bottom;
}
/******************GENERICO**************************/
.pointer {
    cursor: pointer;
}
.nobg {
    background: none;
}
.noborder {
    border: none;
}
.show {
    display: block;
}
tr.show {
    display: table-row;
}
.hide {
    display: none;
}
.bold {
    font-weight: bold;
}
.nopadding {
    padding : 0;
}
.background-orange {
    background: orange;
}
.dropdown-clienti {
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    max-width: 100%;
    width: 100%;
}
/*******************HOME CLIENTE*************************/
.home-cliente .container-contratti,
.home-cliente .container-interventi {
    min-height: auto;
}

.home-cliente .wrap-interventi {
    padding-top: 0;
}
/*******************EDiT CLIENTE*************************/
.edit-clienti #frm .tab-pane {
    display: block;
    height: 0;
    overflow: hidden;
}
.edit-clienti #frm .tab-content > .active {
    display: block;
    height: auto;
}

/*******************PERMESSI*************************/
.page-permissions th,
.page-permissions td {
    text-align: center;
    width: 12.5%;
}
/************ EDIT ARTICOLI *************************/
.vertical-centered {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.horizontal-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.textarea-wide-container textarea {
    min-height: 20.8vh;
}
.textarea-medium-container textarea {
    min-height: 12vh;
}
#TagTag {
    border: 1px solid #e9ecef;
    color: #3e5574;
}
.no-bottom-margin {
    margin: 0;
}
/*******************ARTICOLI*************************/
.hind {
    display: none;
}

.Allvisible {
    display: block !important;
}
.left1rem {
    left: 1rem;
}
.price-article .fa-arrow-circle-down,
.price-article .fa-arrow-circle-up {
    position: absolute;
    z-index: 99;
    right: 10px;
    top: 10px;
}
.price-article .fa-arrow-circle-down::before {
    z-index: 99;
    font-size: 17px;
    color: #ef6e6e;
}
.price-article .fa-arrow-circle-up::before {
    z-index: 5;
    font-size: 17px;
    color: #22c6ab;
}
.page-articoli .input-group-text {
    display: block;
    width: 35px;
    height: 35px;
    padding: 0.375rem 0;
}
.page-articoli .articolo-immagine {
    width: 200px;
    height: 200px;
}
.page-articoli #kit-table-container {
    display: none !important;
}
.flag-disattivo i::before {
    color: lightgrey;
}
.page-articoli .w-175 {
    width: 175px;
}
/************************INTERVENTI**********************************/
#select_cliente {
    z-index: 2;
    position: absolute;
    top: 63px;
    right: 10px;
    left: 10px;
    max-width: 100%;
    width: auto;
}
.clienti_list {
    border:none;
}
.thumb-white::-moz-range-thumb {
    background-color: white;
}
.thumb-white::-webkit-slider-thumb {
    background-color: white;
}
.thumb-white::-ms-thumb {
    background-color: white;
}
.omc-int-data-ins {
    display: flex;
    gap: 5px;
    position: absolute;
    top: 41px;
    font-size: 12px;
}

/************************TodoList Interventi **********************************/

.todo .todo-list-header .todo-list-options {
    display: none;
}.todo .todo-list-header:hover .todo-list-options {
    display: block;
}
/************************QUILL EDITOR**********************************/
.ql-container {
    height: auto;
    min-height: 300px;
    max-height: 600px;
    overflow-y: scroll;
    margin-bottom: 25px;
}

/*****************CONFIGURATORE**************************************/
#conf_form * {
    list-style: none;
}
.wizard-content .wizard > .actions > ul > li > a[href="#next"]:hover {
    background: #2962ff;
}
.waiting {
    cursor: wait;
    position: relative;
    transition: all 0.1s ease-in-out;
}
.waiting::after {
    content: '';
    z-index: 99999;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
}
.rule-on .rule-switch {
    display: none;
}
a[href="#finish"]:hover {
    background-color: var(--success) !important;
}
.hide-disabled .disabled, hide-disabled.disabled,
.hide-disabled input:disabled, .hide-disabled.input:disabled,
.hide-disabled select:disabled, .hide-disabled.select:disabled,
.hide-disabled option:disabled {
    display: none !important;
}

.show-disabled .disabled, show-disabled.disabled,
.show-disabled input:disabled, .show-disabled.input:disabled,
.show-disabled select:disabled, .show-disabled.select:disabled,
.show-disabled option:disabled {
    display: block !important;
}

/*CONFIGURATORE TAB-VERTICAL STEPS*/
#conf_form .nav-tabs {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

#conf_form .nav-tabs-vertical {
    display: block;
}

#conf_form .tab-vertical .nav-link {
    pointer-events: none;
    color: #a9a9a9;
    box-sizing: border-box;
    font-style: normal;
    font-weight: 500;
    padding: 10px 30px;
    margin: 0px;
    margin-left: -0.5px;
    margin-right: -0.5px;
    margin-bottom: 1rem;
    transition: all .5s;
    border-radius: 50px;
    border: 1px solid #a9a9a9;
}

#conf_form .tab-vertical .active,
#conf_form .tab-vertical .done,
#conf_form .tab-vertical .next {
    pointer-events: all;
}

#conf_form .tab-vertical .next {
    border-color: grey;
    color: grey;
}

#conf_form .tab-vertical .nav-link.done {
    border-color: #22c6ab;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2322c6ab' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    color: #22c6ab;
}

#conf_form .nav-tabs .nav-link.active {
    border: 2px solid #4798e8;
    font-weight: 500;
    color: #4798e8;
    font-style: normal;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.141);
}

#conf-form .nav-item .next {
     box-shadow: 0 0 0 .2rem rgba(116,96,238,.5);
}
.nav-tabs-vertical li div i:hover {
    color: var(--success) !important;
}

#root .custom-control-input:disabled ~ .custom-control-label {
    color: #d5d5d5 !important;
}
#root .custom-control-input:disabled ~ .custom-control-label::before {
    background: #d5d5d5 !important;
    border: #d5d5d5 !important;
}
#root .nav-item > .hidden-node {
    display: none;
}

#materiale option:disabled { display: none; }

.omc-table-centered {
    margin-bottom: 0;
}
.omc-table-centered th,
.omc-table-centered td{
    vertical-align: middle;
}

/*CONFIGURATORE RIEPILOGO*/
.riepilogo-2 .card-body {
    columns: 1 !important;
}
.riepilogo-2 .selected-row {
    justify-content: space-between;
}
.riepilogo-2 .selected-row div:nth-child(1) {
    order: 3 !important;
}

.riepilogo-2 .selected-row div:nth-child(2) {
    order: 1 !important;
}

.riepilogo-2 .selected-row div:nth-child(3) {
    order: 2 !important;
}

.riepilogo-2 .remove {
    margin-left: 30px;
}
.riepilogo-2.rule-enabled .remove {
    display: none !important;
}

.rule-enabled .riepilogo-remove,
.rule-enabled .riepilogo-plus,
.rule-enabled .riepilogo-minus {
    display: none !important;
}
.rule-enabled .riepilogo-input {
    pointer-events: none;
    border: none;
    font-weight: bold;
}

.viewer-save {
    position: absolute;
    bottom: 0.65rem;
    right: 1rem;
}
.viewer-save label {
    margin: 0.5rem 0 0 0;
}

/**********************************/

.dropzone .dz-preview .dz-image img {
    width: inherit !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: .875rem;
    line-height: 1.5;
    color: #4f5467;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e9ecef;
    border-radius: 2px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.select2-container {
    width: 100% !important;
    height: calc(1.5em + .75rem + 2px);
}
/************************DASHBOARD WIDGET******************************/
h2.m-b-0.font-light.pre-animation {
    transform: scaleY(0);
    transform-origin: bottom;
}
h2.m-b-0.font-light {
    transition: all 300ms cubic-bezier(0.250, 0.250, 0.530, 1.930);
}
.div-hoverable {
    cursor: pointer !important; 
    transition: background-color 300ms ease;
}
.div-hoverable:hover {
    background-color: rgb(248, 248, 248);
    font-weight: 400;
}

/************************MAIL BOX******************************/
.mailbox input[type=text] {
    color: #333d54;
    font-weight: 400;
}
.mailbox input::placeholder {
    font-weight: lighter;
}
/************************LEFT SIDEBAR********************************/
#sidebarnav .propic{
    height: 120px;
}
.form-control.bg-light-danger.border-light::first-letter {
    text-transform: uppercase;
}
/*******************CUSTOM BOOTSTRAP COLORS*************************/
.bg-light-gray {
    background-color: #f7f7f7;
}
/* Nota intervento */
.badge.squaredate {
    margin-top: 4px;
    width: 62px;
    border-radius: 12px;
    white-space: normal;
    line-height: 2.2em;
    padding: 5px 0 2px 0;
    position: relative;
    z-index: 1;
    border: 2px solid rgb(238, 238, 238);
}
.badge.squaredate::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: 47%;
    right: -1px;
    left: -1px;
    z-index: -1;
    background-color: white;
    border-top: 1px solid rgb(238, 238, 238);
    border-left: 1px solid rgb(238, 238, 238);
    border-right: 1px solid rgb(238, 238, 238);
    border-bottom: 2px solid rgb(212, 212, 212);
    border-radius: 11px 11px 0 0 ;
}
.badge.squaredate span {
    word-wrap: break-word;
    color: rgb(87, 87, 87);
}
.badge.squaredate span:after{
	content:attr(data-text);
	color:rgb(255, 255, 255);
	transform:translateX(-100%);
	position:absolute;
    font-weight: 400;
}
.badge.squaredate-sm {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    white-space: normal;
    line-height: 2em;
    padding: 3px 0 1px 0;
    position: relative;
    z-index: 1;
    border: 2px solid rgb(238, 238, 238);
}
.badge.squaredate-sm::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: 47%;
    right: -1px;
    left: -1px;
    z-index: -1;
    background-color: white;
    border-top: 1px solid rgb(238, 238, 238);
    border-left: 1px solid rgb(238, 238, 238);
    border-right: 1px solid rgb(238, 238, 238);
    border-bottom: 2px solid rgb(212, 212, 212);
    border-radius: 11px 11px 0 0 ;
}
.badge.squaredate-sm span {
    font-size: 15px;
    word-wrap: break-word;
    color: rgb(87, 87, 87);
}
.badge.squaredate-sm span:after{
    font-size: inherit;
	content:attr(data-text);
	color:rgb(255, 255, 255);
	transform:translateX(-100%);
	position:absolute;
    font-weight: 400;
}
/* Update-table */
.r {
    padding-left: 6px;
}
.r:not(.form-control-plaintext) {   
    height: 35px; 
    width: 100%;
    border: 1px solid rgb(235, 235, 235);
}
select.r.form-control-plaintext {
    pointer-events: none;
    cursor: not-allowed;
}
select.r {
    cursor: pointer;
}
/* CONTRATTI */
.edit-label, .confirm-label {
    cursor: pointer;
    margin-right: 7px;
    transition: all 200ms ease-out;
}
.edit-label:hover {
    color: var(--info);
    text-shadow: 1px 1px 1px rgb(206, 206, 206);
}
.confirm-label:hover {
    color: var(--success);
    text-shadow: 1px 1px 1px rgb(206, 206, 206);
}
/* PULSANTE ADD RICHIESTA */
#add-richiesta {
    position: fixed;
    bottom: 30px;
    left: 8px;
    cursor: pointer;
    width: max-content;
    display: grid;
    grid-template-columns: 2.3fr 7fr;
    background-color: var(--success);
    border-radius: 9999px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.199);
    z-index: 100;
    color: #999
}
#add-richiesta-icon {
    margin: 0;
    font-size: 24px;
    color: rgb(88, 88, 88);
    background-color: white;
    border: 4px solid currentColor;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.199);
    border-radius: 50%;
    display: grid;
    place-items: center;
    height: 60px;
    width: 60px;
    z-index: 3;
    transition: all 300ms ease;
}
#add-richiesta-label {
    margin: 0;
    color: white;
    font-weight: bold;
    padding: 6px 26px 6px 8px;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2;
    transition: all 300ms;
    white-space: nowrap;
}
#add-richiesta-label::after {
    position: absolute;
    content: '';
    border-radius: 20px;
    top: 0;
    left: -40px;
    right: 0;
    bottom: 0;
    transform: scaleX(0);
    background-color: var(--info);
    transform-origin: left;
    z-index: -1;
    transition: all 400ms ease;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.199);
}
#add-richiesta:hover #add-richiesta-label::after {
    transform: scaleX(1);
    transform-origin: left;
}
#add-richiesta:hover #add-richiesta-label {
    padding-left: 12px;
}
#add-richiesta:hover #add-richiesta-icon {
    box-shadow: 0 0 0 2px currentColor, 6px 6px 4px rgba(0, 0, 0, 0.199);
}
/* TABELLE */
.table-sm td, .table-sm th {
    padding: 8px 8px;
}
.table-hover tbody tr:hover td {
    background: var(--light-info);
}
/* FILTRI */
.badge-filter {
    padding: 1px 8px;
    font-weight: 500px;
    font-size: 12px;
    border-radius: 9999px;
    margin-right: 3px;
    font-size: 400;
    opacity: 0.9;
}
.badge-filter:hover {
    opacity: 1;
}
.filterDropdown {
    height: 25px;
    border-radius: 1px;
}
.filtersBox .form-group {
    margin-bottom: 5px !important;
}
.filtersBox>div {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    max-width: 70%;
}
.filtersBox>div>div {
    display: block;
}
#filter > div.modal.fade.bs-example-modal-lg.show > div > div > div.modal-body > .omc-multiselect-status > .select2.select2-container {
    display: block;
    height: max-content;
    width: 100%;
}
#filter > div.modal.fade.bs-example-modal-lg.show > div > div > div.modal-body > .omc-multiselect-status > .select2.select2-container > .selection > .select2-selection {
    display: table;
    width: 100%;
}
#filter > div.modal.fade.bs-example-modal-lg.show > div > div > div.modal-body > .form-group {
    -webkit-column-break-inside: avoid;   
    -moz-column-break-inside: avoid;   
    -o-column-break-inside: avoid;   
    -ms-column-break-inside: avoid;
}
/*copio per progetti filtri*/
.omc-multiselect-status > .select2.select2-container {
    display: block;
    height: max-content;
    width: 100%;
}
.omc-multiselect-status > .select2.select2-container > .selection > .select2-selection {
    display: table;
    width: 100%;
}
/* BUTTONS STATI */
.btn-request {
    color: #fff;
    background-color: var(--request);
    border-color: var(--request);
}
.btn-outline-request {
    color: var(--request);
    border-color: var(--request);
}
.btn-outline-request:hover {
    color: #fff;
    background-color: var(--request);
    border-color: var(--request);
}
.btn-request:hover {
    color: #fff;
    background-color: #7632cecb;
    border-color: #7632cecb;
}
.btn-request:not(:disabled):not(.disabled).active,
.btn-outline-request:not(:disabled):not(.disabled):active,
.show > .btn-request.dropdown-toggle {
    color: #fff;
    background-color: var(--request);
}
.btn-request.focus, 
.btn-outline-request:focus,
.btn-request:not(:disabled):not(.disabled).active:focus,
.btn-outline-request:not(:disabled):not(.disabled).active:focus,
.btn-request:not(:disabled):not(.disabled):active:focus,
.btn-outline-request:not(:disabled):not(.disabled):active:focus,
.show > .btn-request.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(190, 49, 255, 0.5);
}

.btn-refused {
    color: #fff;
    background-color: var(--refused);
    border-color: var(--refused);
}
.btn-outline-refused {
    color: var(--refused);
    border-color: var(--refused);
}
.btn-outline-refused:hover {
    color: #fff;
    background-color: var(--refused);
    border-color: var(--refused);
}
.btn-refused:hover {
    color: #fff;
    background-color: #a50e0e;
    border-color: #a50e0e;
}
.btn-refused:not(:disabled):not(.disabled).active,
.btn-outline-refused:not(:disabled):not(.disabled):active,
.show > .btn-refused.dropdown-toggle {
    color: #fff;
    background-color: var(--refused);
}
.btn-refused.focus, 
.btn-outline-refused:focus,
.btn-refused:not(:disabled):not(.disabled).active:focus,
.btn-outline-refused:not(:disabled):not(.disabled).active:focus,
.btn-refused:not(:disabled):not(.disabled):active:focus,
.btn-outline-refused:not(:disabled):not(.disabled):active:focus,
.show > .btn-refused.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(207, 10, 10, 0.5);
}
/* ******* toastr ******** */
.toast-top-half-width {
    top: 0 !important;
    right: 0 !important;
    width: 70% !important;
}
/* dashboard clienti - lista preventivi */
.badge-customer-list {
    position: relative;
    background-color: white;
    height: 50px;
    width: 50px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    padding: 4px;
}
.badge-customer-list > span {
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.2em;
}
a[data-toggle="collapse"] {
    cursor: pointer;
}

/* AGGIUNTA ARTICOLI CONTRATTI */
.add_element *{
    cursor: pointer;
    margin: 0;
}
div.add_element:hover {
    background-color: #f5f5f5;
    user-select: none;
}
div.add_element {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 0 !important;
}
#nestable-articles>div>span, #nestable-articles>tr {
    cursor: grab;
}
#nestable-articles>div>span:active, #nestable-articles>tr:active {
    cursor: grabbing;
}

/* categorie articoli */
.cat-heading {
    padding-left: 8px;
}
.cat-heading:hover {
    background-color: #f5f5f5;
    color: var(--info);
    cursor: pointer;
}
.dropdown-toggle.dropdown-toggle-sm {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 20px !important;
}

/* Visualizzatore modelli lavorazioni */

.model-box .nav-link {
    border: 2px solid var(--bordercolor);
    color: var(--info);
    padding: 8px 0;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    padding-left: 8%;
    text-transform: capitalize; 
    font-weight: 500;
    font-style: normal;
}
.model-box .nav-link.active {
    background-color: var(--info);
    border-color: var(--info);
    color: white;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
.model-box .nav-link.done {
    border: 0;
    background-color: var(--light-success);
    color: var(--success);
}
.model-box .nav-link.vertical-disabled {
    cursor: unset;
    border-width: 1px;
    color: var(--disabled);
}
.model-box .nav-link.active.done {
    background-color: var(--success);
    border-color: var(--success);
    color: white;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
.model-box .card-header {
    text-transform: capitalize;
}
.button-step{
    padding: 10px;
    color: var(--secondary);
}
.button-step.active{
    padding: 10px;
    color: var(--info);
    font-weight: 500;
    border-bottom: 3px inset var(--info) !important;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .07);
}
.button-step.active.valid {
    color: var(--success);
}
.button-step:hover, .button-action:hover{
    background-color: rgba(0, 0, 0, .02);
}
.button-action{
    aspect-ratio: 1;
    box-sizing: border-box;
    width: 43px;
    color: var(--secondary);
    border: 1px solid var(--bordercolor);
    border-radius: 50%;
}
.button-action i {
    vertical-align: bottom;
}

/* Modale altezza fissa */
.modal-fixed-height .modal-dialog,
.modal-fixed-height .modal-content {
    height: 92%;
}
.modal-fixed-height .modal-body {
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}

/* Riepilogo Lavorazioni */
.riepilogo-input {
    border: 0;
    border-bottom:1px solid var(--disabled);
    background-color: transparent;
    margin-left: 10px;
    padding: 0 10px;
}
/* Elenco ordini freccia accordion */
td.arrow-collapse>i {
    transition: transform 400ms ease !important;
}
td.arrow-collapse[aria-expanded=true]>i {
    color: var(--success) !important;
    transform: rotateX(180deg) !important;
}
td.tasks-icon[aria-expanded=true]>span {
    color: var(--success) !important;
}
td.arrow-collapse:hover i, td.tasks-icon:hover span {
    color: var(--info) !important;
}

.arrow-collapse.collapsed>i {
    transform: rotateX(180deg) !important;
}
.arrow-collapse>i {
    transition: transform 400ms ease !important;
}

/* Tabella a righe alternate diversa da quella standard */
.table-striped-light tbody tr:nth-of-type(odd){background-color:rgba(71, 152, 232, 0.05)}

/* Custom border properties */
.border-2 {
    border-width:2px !important;
}
.border-3 {
    border-width:3px !important;
}
.border-4 {
    border-width:4px !important;
}
.border-5 {
    border-width:5px !important;
}

/* Custom modal size  */
@media (min-width:700px) {
    .modal-xxl{ max-width: 650px !important }
}
@media (min-width:900px) {
    .modal-xxl{ max-width: 850px !important }
}
@media (min-width:1100px) {
    .modal-xxl{ max-width: 1050px !important }
}
@media (min-width:1300px) {
    .modal-xxl{ max-width: 1150px !important }
}
@media (min-width:1500px) {
    .modal-xxl{ max-width: 1350px !important }
}
@media (min-width:1700px) {
    .modal-xxl{ max-width: 1450px !important }
}

/* Custom form-control-sm per input più piccoli */
.form-control-sm {
    padding: 6px 8px !important;
    transition: .2s ease-in
}

/*custom horizontal scrollable table*/
.horizontal-scroll {
    overflow-x: auto !important;
}

/* circular button */
.btn-circle {
    aspect-ratio: 1 !important;
    border-radius: 50% !important;
    display: grid;
    place-items: center;
}

/* white button */
.btn-white {
    border: 1px solid var(--bordercolor);
    background-color: white;
}
.btn-white:hover {
    background-color: rgba(0, 0, 0, 0.034);
    border-color: rgba(0, 0, 0, 0.034);
}

/* buttons finali pagine sempre in vista */
/* .form-actions{
    display: flex !important;
    position: fixed !important; 
    bottom: 20px; 
    right: 10px;
    background-color: rgba(0, 0, 0, 0.07);
    padding: 10px;
    border-radius: 2px;
    backdrop-filter: blur(7px);
    border: 1px solid transparent;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
} */

/* Override dropdown menu */
.dropdown-menu {
    position:absolute;
    top:100%;
    right:0;
    z-index:1000;
    display:none;
    float:left;
    min-width:10rem;
    padding: 0;
    margin:.125rem 0 0;
    font-size:.875rem;
    color:#3e5569;
    text-align:left;
    background-color:rgba(255, 255, 255);
    border:1px solid #e9ecef;
    border-radius: 2px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}
.dropdown-menu>* {
    border-bottom: 0.1px solid #e9ecef67;
}
.dropdown-item {
    padding: 6.5px 14px;
}

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

/* vue-select custom */
.vue-select-dropdown-option {
    border-bottom: 0.1px solid #e9ecef67;
    padding: 3px 10px;
}
.vue-select-dropdown-option:hover {
    background-color: #9696961c !important;
}
.vue-select-dropdown {
    position: absolute;
    width: 95%;
    border: 1px solid var(--bordercolor);
    z-index: 100;
    background-color: white;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 35vh;
}
.vue-select-input .vue-select-icon>.reset {
    color: rgba(0, 0, 0, 0.14) !important;
    padding:0;
}
.vue-select-input .vue-select-icon>.search {
    color: rgba(0, 0, 0, 0.14) !important;
    padding: 0;
}
.vue-select-input .vue-select-icon>.reset:hover {
    color: rgba(100, 0, 0, 0.3) !important;
}
.vue-select-input .vue-select-icon {
    background-color: white;
    border: 0 !important;
}

/* Scrollbar */
::-webkit-scrollbar{
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb{
    background: #d4d4d4;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
    background: #C2C2C2;
}
::-webkit-scrollbar-track{
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: inset 7px 10px 12px 0px #F0F0F0;
}

/* Vue v-if transitions*/
.slide-fade-enter-active {
    transition: all 0.4s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateY(-20px);
    opacity: 0;
}

/* Rotate class */
.rotate-180 {
    transform: rotate(180deg);
}

.flex-even {
    flex: 1;
}

.viewer.card-group {
    display: flex !important;
    flex-wrap: wrap !important;
}
.viewer.card-group .card {
    display: inline-flex !important;
    flex: 1 0 30%;
}

/* STEP ORIZZONTALI */
.horizontal-step-container {
    align-items: center;
    flex-grow: 1;
}
.horizontal-step-subcontainer {
    position: relative;
}
.horizontal-step {
    width: 55px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color:  var(--info);
    border: 2px solid var(--bordercolor);
    font-size: 1.8em;
    font-weight: bold;
    margin: 10px 8px 10px 8px;
    cursor: pointer;
    transition: all 300ms;
}
.horizontal-step:hover, .horizontal-step.valid:hover {
    background-color: var(--bordercolor);
    border-color: transparent;
}
.horizontal-step.valid {
    color: var(--success);
    background-color: var(--light-success);
    border: 0;
    
}
.horizontal-step.active {
    color: white;
    border: 0;
    background-color: var(--info);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}
.horizontal-step.valid.active {
    color: white;
    border: 0;
    background-color: var(--success);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}
.horizontal-step.step-disabled {
    cursor: unset;
    color: var(--bordercolor);
    background: none;
    border-width: 1px;
    border-color: var(--bordercolor);
}
.horizontal-step-line {
    display: block;
    background-color: var(--info);
    border-radius: 9999px;
    width: 100%;
    height: 2px;
}
.horizontal-step-label {
    text-transform: capitalize;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    text-wrap: nowrap;
}

/* Classe bootstrap mancante */
.justify-content-evenly {
    justify-content: space-evenly;
}

/* button modalità assistita */
.rules {
    padding: 10px 0;
    position: relative;
    display: block;
    width: 40px;
    border-radius: 9999px;
    height: 14px;
    cursor: pointer;
    overflow: hidden;
    transition: all 150ms;
}
.rules.enabled::before {
    content: "";
    position: absolute;
    border: 1px solid var(--bordercolor);
    background-color: var(--info);
    height: 80%;
    width: 98%;
    transition: all 250ms;
    top: 50%;
    border-radius: 99999px;
    transform: translateY(-50%);
}
.rules.enabled::after {
    content:"";
    background-color: white;
    border: 3px solid var(--bordercolor);
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    aspect-ratio: 1;
    transition: all 150ms;
}
.rules.disabled::before {
    content: "";
    position: absolute;
    border: 1px solid var(--bordercolor);
    background-color: var(--lightgrey);
    height: 80%;
    width: 98%;
    top: 50%;
    border-radius: 99999px;
    transform: translateY(-50%);
}
.rules.disabled::after {
    content:"";
    background-color: white;
    border: 3px solid var(--bordercolor);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    aspect-ratio: 1;
    transition: all 250ms;
}

/* input type number senza freccette per aumentare o diminuire */
/* Chrome, Safari, Edge, Opera */
.number-no-arrows::-webkit-outer-spin-button,
.number-no-arrows::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.number-no-arrows {
  -moz-appearance: textfield;
}

/* LC: RIDUCO LA DIMENSIONE E IL MARGINE DELLE ICONE NEI PICKER DI DATA E ORA
(AVEVANO TROPPO PADDING CHE COPRIVA I DATI QUANDO L'INPUT ERA IN SPAZI PICCOLI O ZOOMANDO) */
input[type="date"]::-webkit-calendar-picker-indicator {
    width: 15px;
    padding: 0;
    margin: auto;
}
input[type="date"] {
    padding-right: 4%;
}
input[type="time"]::-webkit-calendar-picker-indicator {
    width: 15px;
    padding: 0;
    margin: auto;
}
input[type="time"] {
    padding-right: 4%;
}
@media (max-width: 991px) {
    .allegati-row {
        height: 75px !important;
    }
}

/*calendario*/
.vuecal__event {
    padding: 5px;
    background: white !important;
    color: var(--dark);
    border: 1px solid var(--info);
    border-left-width: 7px;
}
.vuecal__event-title {
    font-weight: normal;
}
.business-hours {
    background-color: rgba(255, 255, 0, 0.15);
    border: solid rgba(255, 210, 0, 0.3);
    border-width: 2px 0;
}

/*gantt*/
.gantt {
    --g-red : #fc5b65;
    --g-red-hover : #fc5b65;
    --g-red-progress : #e35059;
    --g-red-progress-hover : #e35059;
    --g-orange: #fd9644;
    --g-orange-hover: #fd9644;
    --g-orange-progress: #ea8a3e;
    --g-orange-progress-hover: #ea8a3e;
    --g-yellow: #ecae30;
    --g-yellow-hover: #e3a72b;
    --g-yellow-progress: #f7b731;
    --g-yellow-progress-hover: #e3a72b;
    --g-green: #25de80;
    --g-green-hover: #22ce77;
    --g-green-progress: #25de80;
    --g-green-progress-hover: #22ce77;
    --g-azure: #44aaf2;
    --g-azure-hover: #3b99db;
    --g-azure-progress: #44aaf2;
    --g-azure-progress-hover: #3b99db;
    --g-indigo: #a55dea;
    --g-indigo-hover: #8f50cc;
    --g-indigo-progress: #a55dea;
    --g-indigo-progress-hover: #8f50cc;
    --g-violet: #e84292;
    --g-violet-hover: #d93e89;
    --g-violet-progress: #e84292;
    --g-violet-progress-hover: #d93e89;
}

.gantt_table td, .gantt_table th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gantt_table td:first-child, .gantt_table th:first-child {

}

.gantt .tick {
    stroke: var(--secondary);
}

.gantt .details-container {
    width: max-content;
}

.grid-header {
    font-weight: bold;
    font-size: 15px;
}
.gantt .grid-row:nth-child(2n) {
    fill: white;
}

.gantt_project .bar-progress, .gantt_project .bar-label,
.gantt_project .handle-group{
    display: none;
}
.gantt_project .bar {
    height: 15px;
    transform: translateY(10px);
}

.gantt_project .handle-group .progress {
    z-index: 9999;
}

.bar-wrapper .bar-group .bar-progress {
    filter: brightness(85%);
}

.gantt_project .bar,
.bar-wrapper:hover.gantt_project .bar,
.gantt .bar-wrapper:active.gantt_project .bar,
.bar-wrapper.gantt_project path {
    fill: var(--primary);
    stroke: var(--primary);
}

.g-red .bar {
    fill: var(--g-red);
}
.gantt .bar-wrapper.g-red.active .bar, .gantt .bar-wrapper:hover.g-red .bar {
    fill: var(--g-red-hover);
}
.g-red .bar-progress {
    fill: var(--g-red-progress);
}
.gantt .bar-wrapper.g-red.active .bar-progress, .gantt .bar-wrapper:hover.g-red .bar-progress {
    fill: var(--g-red-progress-hover);
}
.g-orange .bar {
    fill: var(--g-orange);
}
.gantt .bar-wrapper.g-orange.active .bar, .gantt .bar-wrapper:hover.g-orange .bar {
    fill: var(--g-orange-hover);
}
.g-orange .bar-progress {
    fill: var(--g-orange-progress);
}
.gantt .bar-wrapper.g-orange.active .bar-progress, .gantt .bar-wrapper:hover.g-orange .bar-progress {
    fill: var(--g-orange-progress-hover);
}
.g-yellow .bar {
    fill: var(--g-yellow);
}
.gantt .bar-wrapper.g-yellow.active .bar, .gantt .bar-wrapper:hover.g-yellow .bar {
    fill: var(--g-yellow-hover);
}
.g-yellow .bar-progress {
    fill: var(--g-yellow-progress);
}
.gantt .bar-wrapper.g-yellow.active .bar-progress, .gantt .bar-wrapper:hover.g-yellow .bar-progress {
    fill: var(--g-yellow-progress-hover);
}
.g-green .bar {
    fill: var(--g-green);
}
.gantt .bar-wrapper.g-green.active .bar, .gantt .bar-wrapper:hover.g-green .bar {
    fill: var(--g-green-hover);
}
.g-green .bar-progress {
    fill: var(--g-green-progress);
}
.gantt .bar-wrapper.g-green.active .bar-progress, .gantt .bar-wrapper:hover.g-green .bar-progress {
    fill: var(--g-green-progress-hover);
}
.g-azure .bar {
    fill: var(--g-azure);
}
.gantt .bar-wrapper.g-azure.active .bar, .gantt .bar-wrapper:hover.g-azure .bar {
    fill: var(--g-azure-hover);
}
.g-azure .bar-progress {
    fill: var(--g-azure-progress);
}
.gantt .bar-wrapper.g-azure.active .bar-progress, .gantt .bar-wrapper:hover.g-azure .bar-progress {
    fill: var(--g-azure-progress-hover);
}
.g-indigo .bar {
    fill: var(--g-indigo);
}
.gantt .bar-wrapper.g-indigo.active .bar, .gantt .bar-wrapper:hover.g-indigo .bar {
    fill: var(--g-indigo-hover);
}
.g-indigo .bar-progress {
    fill: var(--g-indigo-progress);
}
.gantt .bar-wrapper.g-indigo.active .bar-progress, .gantt .bar-wrapper:hover.g-indigo .bar-progress {
    fill: var(--g-indigo-progress-hover);
}
.g-violet .bar {
    fill: var(--g-violet);
}
.gantt .bar-wrapper.g-violet.active .bar, .gantt .bar-wrapper:hover.g-violet .bar {
    fill: var(--g-violet-hover);
}
.g-violet .bar-progress {
    fill: var(--g-violet-progress);
}
.gantt .bar-wrapper.g-violet.active .bar-progress, .gantt .bar-wrapper:hover.g-violet .bar-progress {
    fill: var(--g-violet-progress-hover);
}

.gantt {
    --g-new: var(--new);
    --g-new-hover: var(--new);
    --g-new-progress: var(--new);
    --g-new-progress-hover: var(--new);
    --g-cyan: var(--cyan);
    --g-cyan-hover: var(--cyan);
    --g-cyan-progress: var(--cyan);
    --g-cyan-progress-hover: var(--cyan);
    --g-planned: var(--planned);
    --g-planned-hover: var(--planned);
    --g-planned-progress: var(--planned);
    --g-planned-progress-hover: var(--planned);
    --g-info: var(--info);
    --g-info-hover: var(--info);
    --g-info-progress: var(--info);
    --g-info-progress-hover: var(--info);
    --g-orange: var(--orange);
    --g-orange-hover: var(--orange);
    --g-orange-progress: var(--orange);
    --g-orange-progress-hover: var(--orange);
    --g-danger: var(--danger);
    --g-danger-hover: var(--danger);
    --g-danger-progress: var(--danger);
    --g-danger-progress-hover: var(--danger);
    --g-success: var(--success);
    --g-success-hover: var(--success);
    --g-success-progress: var(--success);
    --g-success-progress-hover: var(--success);
}
.g-new .bar {
    fill: var(--g-new);
}
.gantt .bar-wrapper.g-new.active .bar, .gantt .bar-wrapper:hover.g-new .bar {
    fill: var(--g-new-hover);
}
.g-new .bar-progress {
    fill: var(--g-new-progress);
}
.gantt .bar-wrapper.g-new.active .bar-progress, .gantt .bar-wrapper:hover.g-new .bar-progress {
    fill: var(--g-new-progress-hover);
}
.g-cyan .bar {
    fill: var(--g-cyan);
}
.gantt .bar-wrapper.g-cyan.active .bar, .gantt .bar-wrapper:hover.g-cyan .bar {
    fill: var(--g-cyan-hover);
}
.g-cyan .bar-progress {
    fill: var(--g-cyan-progress);
}
.gantt .bar-wrapper.g-cyan.active .bar-progress, .gantt .bar-wrapper:hover.g-cyan .bar-progress {
    fill: var(--g-cyan-progress-hover);
}
.g-planned .bar {
    fill: var(--g-planned);
}
.gantt .bar-wrapper.g-planned.active .bar, .gantt .bar-wrapper:hover.g-planned .bar {
    fill: var(--g-planned-hover);
}
.g-planned .bar-progress {
    fill: var(--g-planned-progress);
}
.gantt .bar-wrapper.g-planned.active .bar-progress, .gantt .bar-wrapper:hover.g-planned .bar-progress {
    fill: var(--g-planned-progress-hover);
}
.g-info .bar {
    fill: var(--g-info);
}
.gantt .bar-wrapper.g-info.active .bar, .gantt .bar-wrapper:hover.g-info .bar {
    fill: var(--g-info-hover);
}
.g-info .bar-progress {
    fill: var(--g-info-progress);
}
.gantt .bar-wrapper.g-info.active .bar-progress, .gantt .bar-wrapper:hover.g-info .bar-progress {
    fill: var(--g-info-progress-hover);
}
.g-orange .bar {
    fill: var(--g-orange);
}
.gantt .bar-wrapper.g-orange.active .bar, .gantt .bar-wrapper:hover.g-orange .bar {
    fill: var(--g-orange-hover);
}
.g-orange .bar-progress {
    fill: var(--g-orange-progress);
}
.gantt .bar-wrapper.g-orange.active .bar-progress, .gantt .bar-wrapper:hover.g-orange .bar-progress {
    fill: var(--g-orange-progress-hover);
}
.g-danger .bar {
    fill: var(--g-danger);
}
.gantt .bar-wrapper.g-danger.active .bar, .gantt .bar-wrapper:hover.g-danger .bar {
    fill: var(--g-danger-hover);
}
.g-danger .bar-progress {
    fill: var(--g-danger-progress);
}
.gantt .bar-wrapper.g-danger.active .bar-progress, .gantt .bar-wrapper:hover.g-danger .bar-progress {
    fill: var(--g-danger-progress-hover);
}
.g-success .bar {
    fill: var(--g-success);
}
.gantt .bar-wrapper.g-success.active .bar, .gantt .bar-wrapper:hover.g-success .bar {
    fill: var(--g-success-hover);
}
.g-success .bar-progress {
    fill: var(--g-success-progress);
}
.gantt .bar-wrapper.g-success.active .bar-progress, .gantt .bar-wrapper:hover.g-success .bar-progress {
    fill: var(--g-success-progress-hover);
}

/*Gantt Timeline*/
.label-stima {
    right: 7px;
    top: -36px;
}
.label-stima::after {
    content: "";
    position: absolute;
    right: -7px;
    width: 7px;
    height: 25px;
    border: dotted var(--dark) 2px;
    border-bottom: none;
    border-left: none;
    top: 9px;
    z-index: -1;
}
.label-stima-left {
    right: unset;
    left: 7px;
}
.label-stima-left::after {
    left: -7px;
    height: 25px;
    border-left: dotted var(--dark) 2px;
    border-right: none;
    top: 9px;
    z-index: 1;
}