/* Import del font Outfit da Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    --color-brand: #008B8B;
    --spacing: 0.25rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --border-radius-xs: 0.25rem;
    --border-radius-s: 0.5rem;
    --bg-color: #f2f4f7;
    --main-text-color: #201e43;
    --color-gray-50: #f9fafb;
    --color-gray-200: #e4e7ec;
    --color-gray-300: #d0d5dd;
    --color-gray-400: #98a2b3;
    --color-brand-300: #9cb9ff;
    --color-brand-400: #7592ff;
    --color-brand-500: #465fff;
    --text-sm: 0.875rem;
}

/* Testo base in Outfit Normal */
body, p, span, li, input, button {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    /*letter-spacing: 0.01em;*/
    line-height: 20px;
    color: var(--main-text-color);
}

/* Titoli in Outfit con gerarchia visiva */
h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800; /* molto bold per impatto */
    letter-spacing: -0.02em;
}
h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}
h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600; /* più morbido ma deciso */
}

/* Grassetto inline */
strong, b {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

/* Menù e navigazione */
nav, .menu, .navbar, .menu-item, .nav-link {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.top_stats_wrapper, .panel_s, .panel-body{
    border-radius: 1rem;
    border: 1px solid var(--color-gray-200);
}

#side-menu li {
    border-radius:var(--border-radius-s);
}
.d-none {
    display:none;
}
.sidebar {
    padding-left: 20px;
    padding-right: 20px;
    width: 290px !important;
    font-weight: 500;
    border-right: 1px solid var(--color-gray-200);
}
.sidebar ul.nav li a, .sidebar ul.nav li .sub-menu-text {
    border:none;
    font-size:14px;
}
.sidebar > ul.nav > li:hover a:first-child {
    background-color: var(--bg-color);
    box-shadow: initial;
    border:none;
}
li[class^="sub-menu-item-"]:hover{
    background-color: var(--bg-color);
}
li[class^="sub-menu-item-"] {
    margin-left:36px;
}
.sidebar ul.nav li .nav-second-level li a {
    padding: 5px 15px 5px 12px;
}
.collapse.in {
    margin-top:5px;
}
.sidebar > ul.nav > li.active a:first-child {
    border-radius:var(--border-radius-s);
    box-shadow:initial;
}
.sidebar > ul.nav > li.active a:first-child, li[class^="sub-menu-item-"].active {
    background-color:#ecfdf3;
    border:none;
}
.sidebar > ul.nav > li.active > a:first-of-type > i, 
.sidebar > ul.nav > li.active > a:first-of-type > span.menu-text,
li[class^="sub-menu-item-"].active > a > span {
    color:#008B8B !important;
}
li[class^="sub-menu-item-"], li[class^="menu-item-"] {
    margin-bottom:0.25rem;
    line-height:24px;
}
li[class^="sub-menu-item-"] {
    padding-bottom:5px;
    padding-top:5px;
}
.sidebar > ul.nav > li > a:first-of-type {
    padding-bottom:8px;
    padding-top:8px;
}
.sidebar > ul.nav > li > a:first-of-type > i {
    line-height:24px;
}
#wrapper {
  margin: 0 0 0 290px;
}
.tw-border-neutral-300 {
    border:none;
}
.panel_s {
    box-shadow: initial; 
    border: 1px solid var(--color-gray-200);
}
input.form-control, .dropdown-toggle {
    padding: 10px 16px 10px 16px;
    height: calc(var(--spacing) * 11);
    background-color: #fff;
    border-radius: var(--border-radius-s);
}
.bootstrap-select .btn {
    height: calc(var(--spacing) * 11);
}
.dropdown-toggle.btn-default {
    background-color: #fff !important;
    color: var(--main-text-color) !important;
    border-color: var(--color-gray-300);
    border-width: 1px;
}
.bootstrap-select .btn-default, .btn-default:focus, textarea.form-control, .btn-default:hover  {
    background-color:#fff !important;
    color: var(--main-text-color) !important;
    border-color: var(--color-gray-300);
    border-width: 1px;
}
input.form-control:focus, .open > .dropdown-toggle.btn-default, .btn-default:focus , textarea.form-control:focus {
    border-color: var(--color-brand-300) !important;
    --tw-ring-color: color-mix(in oklab, var(--color-brand-500) 10%, transparent) !important;
}
.bootstrap-select:not(.dropup) .dropdown-toggle[aria-expanded="true"] {
    border-bottom-left-radius: var(--border-radius-s);
    border-bottom-right-radius: var(--border-radius-s);
}
.bootstrap-select:not(.dropup) .dropdown-menu {
    border-top-left-radius: var(--border-radius-s);
    border-top-right-radius: var(--border-radius-s);
}
.btn, textarea.form-control  {
    padding-block: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}
input[type="file"] {
    &::file-selector-button {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        padding-left: calc(var(--spacing) * 3.5);
        padding-right: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 3);
        background-color: var(--color-gray-50);
        border-color: var(--color-gray-200);
        border-top-left-radius: var(--border-radius-s);
        border-bottom-left-radius: var(--border-radius-s);
        margin-right: calc(var(--spacing) * 5);
        border-right-width: 1px;
        appearance: button;
        margin-left: -18px;
        margin-top: -12px;
        --tw-border-style: solid;
        border-style: solid;
    }
}
textarea#address {
    height:initial !important;
}
.btn-default {
    --tw-shadow: initial;
    --tw-shadow-colored: initial;
    box-shadow: initial; 
}
.input-group:not(:has(.input-group-btn)) .dropdown-toggle {
  border: none;
}
.input-group.input-group-select {
    border: 1px solid #ccc;
    border-radius: var(--border-radius-s);
}
.input-group .dropdown-toggle {
    border:none;
}
table.dataTable thead > tr > th, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after {
    background-color:#fff !important;
}
.progress-bar-mini{
    height: calc(var(--spacing) * 2);
}
.progress-bar {
    background: var(--color-brand);
}
.btn-danger > .btn-with-tooltip {
    color: #fff;
}
.modal-backdrop {
--tw-backdrop-blur: blur(32px);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    background-color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
}
.modal-dialog {
    width:initial;
    max-width:700px;
}
.modal-content {
    padding: calc(var(--spacing) * 8);
}
#calendar .fc-icon {
    color:#fff !important;
}
.stepper-wrapper {
    position: relative;
    padding-top: 20px;
}
.stepper-line {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    height: 2px;
    background: #dcdcdc;
    z-index: 1;
}
.stepper-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
.step {
    text-align: center;
    position: relative;
    flex: 0 0 auto; /* equidistanti */
}
.step-dot {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #bdbdbd;
    position: relative;
    z-index: 2;
}
.step.active .step-dot {
    border-color: #00a3a3;
}
.step.active .step-dot::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #00a3a3;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.step p {
    margin-top: 8px;
    font-size: 12px;
    color: #777;
}
.step.active p {
    color: var(--color-brand);
    font-weight: 600;
}
/* Allineamento preciso del primo e ultimo step */
.step:first-child {
    text-align: left;
}
.step:last-child {
    text-align: right;
}
.toggle-container {
    /*width: 100%; 
    height: 100%; */
    position: relative;
    margin-right: 100px;
    display: inline;
}
.toggle {
    width: 60px; 
    height: 32px; 
    left: 0px; 
    top: -10px; 
    position: absolute; 
    border-radius: 30px;
    transition: background 0.3s ease;
}
.toggle-on {
    background: #212B36; 
}
.toggle-position-on {
    width: 24px; 
    height: 24px; 
    left: 32px; 
    top: -6px; 
    position: absolute; 
    background: white; 
    border-radius: 9999px;
    transition: left 0.3s ease;
}
.toggle-off {
    background: #CCCCCE; 
}
.toggle-position-off {
    width: 24px; 
    height: 24px; 
    left: 4px; 
    top: -6px; 
    position: absolute; 
    background: white; 
    border-radius: 9999px;
    transition: left 0.3s ease;
}
.select-col .form-group {
    margin-bottom: 0;
}
.toggle-col {
    padding-top: 26px; /* altezza reale label Perfex */
}
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cod-input {
    width: 120px;       /* o quello che vuoi */
    position: absolute;
    top: 25px;
    right: 30px;
}
.row-equal {
    display: flex;
    align-items: stretch; /* tutte le colonne stessa altezza */
}
.btn-col {
    display: flex;
    align-items: flex-end;
}
.btn-primary {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}
.btn-primary:hover {
    background-color: #005959;
    color: #fff;
    border-color: #005959;
}
.signal-bars {
    display: inline-block;
    width: 100%;
}
.signal-bars .bar {
    /*width: 14%;
    min-height: 20%;*/
    width: 9px;
    height: 22px;
    border-radius: 8px;
    margin-left: 1%;
    display: inline-block;
}
/*.signal-bars .bar.first-bar {
    height: 20%;
}
.signal-bars .bar.second-bar {
    height: 40%;
}
.signal-bars .bar.third-bar {
    height: 60%;
}
.signal-bars .bar.fourth-bar {
    height: 80%;
}
.signal-bars .bar.fifth-bar {
    height: 99%;
}*/
.good .bar {
    background-color: #16a085;
    /*border: thin solid #12816b;*/
}
.bad .bar {
    background-color: #e74c3c;
    /*border: thin solid #a82315;*/
}
.ok .bar {
    background-color: #f1c40f;
    /*border: thin solid #d0a90c;*/
}
.four-bars .bar.fifth-bar,
.three-bars .bar.fifth-bar,
.three-bars .bar.fourth-bar,
.one-bar .bar:not(.first-bar),
.two-bars .bar:not(.first-bar):not(.second-bar) {
    background-color: #F9FAFB;
    border: thin solid #f3f3f3;
}

.rating-bar-container {
    background: #f0f0f0;
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}
@media (min-width: 901px) {
    .c-rate-calculator-courier-row__delivery-bar {
        display: block;
        height: 16px;
        margin-bottom: 5px;
    }
}
.rating-bar-progress.success {
    background: var(--f7-theme-color-primary);
}
.rating-bar-progress {
    border-radius: 9999px;
    height: 100%;
    min-width: 10px;
    position: absolute;
}
#tabella_corrieri td {
    vertical-align: middle;
}
.bootstrap-select.has-error > button {
    border-color: #dc3545;
}
input[data-readonly] {
    pointer-events: none;
}
.carrier_logo {
    height: 60px;
    width: 60px;
}
.fa-lg {
    font-size: 24px;
    margin-right: 8px;
}