/* ====================================================== */

/* BASE */

/* ====================================================== */



body {

    padding-bottom: 30px;

}





/* ====================================================== */

/* LAYOUT */

/* ====================================================== */



@media (min-width: 1024.1px) {



    .container-fluid {

        max-width: 90%;

        margin: 0 auto;

    }

}



.page-title-box {

    margin: -23px -.75rem 1.5rem -.75rem;

}



.page-header {

    display: flex;

    align-items: center;

    margin-bottom: 20px;

}



    .page-header a:hover i {

        color: #0d6efd;

        transition: color 0.2s;

    }



.page-title {

    font-size: 1.4rem;

    font-weight: 600;

}



.footer-padding-30 {

    padding-left: 30px;

    padding-right: 30px;

}





/* ====================================================== */

/* CARD */

/* ====================================================== */



.card {

    overflow: hidden;

    padding: 20px;

    border-width: 0;

    border-radius: 24px;

}



    .card .card-header {

        border-top-left-radius: 24px;

        border-top-right-radius: 24px;

    }



    .card .card-footer {

        border-bottom-left-radius: 24px;

        border-bottom-right-radius: 24px;

    }





/* ====================================================== */

/* MODAL */

/* ====================================================== */



.modal .modal-content {

    border: 0 solid;

    border-radius: 24px;

}



.modal-content {

    overflow: hidden;

}



.modal-body {

    position: relative;

}





/* ====================================================== */

/* FORM */

/* ====================================================== */



.input-step,

.form-control,

.form-select,

.btn {

    border-radius: 12px;

    transition: 0.2s;

}



.form-control,

.form-select {

    padding-left: 15px;

    border: 1px solid #dbe1ea;

}



    .form-control:focus,

    .form-select:focus {

        border-color: var(--my-primary);

        -webkit-box-shadow: 0 0 1 .25rem rgba(var(--my-primary-rgb), .25);

        box-shadow: 0 0 1 .25rem rgba(var(--my-primary-rgb), .25);

    }



.form-select {

    cursor: pointer !important;

}



.border-radius-12 {

    border-radius: 12px !important;

}



textarea {

    resize: none;

}





/* ====================================================== */

/* PASSWORD */

/* ====================================================== */



/* Edge / vecchio IE */



input[type="password"]::-ms-reveal,

input[type="password"]::-ms-clear {

    display: none;

}



.password-toggle {

    cursor: pointer;

}





/* ====================================================== */

/* BUTTONS */

/* ====================================================== */



.btn-flat {

    border: 0;

}





/* ====================================================== */

/* SUBMIT LOADER */

/* ====================================================== */



[data-submit="true"] {

    position: relative;

}



    [data-submit="true"].btn-text {

        display: inline-block;

    }



    [data-submit="true"] .btn-spinner {

        display: none;

        width: 1rem;

        height: 1rem;

        margin-left: .5rem;

        border: 2px solid rgba(255,255,255,.4);

        border-top-color: #fff;

        border-radius: 50%;

        animation: spin .6s linear infinite;

    }



    [data-submit="true"].is-loading .btn-text {

        opacity: .7;

    }



    [data-submit="true"].is-loading .btn-spinner {

        display: inline-block;

    }



@keyframes spin {



    to {

        transform: rotate(360deg);

    }

}





/* ====================================================== */

/* LOADER PAGINA */

/* ====================================================== */



.page-loader {

    position: fixed;

    inset: 0;

    z-index: 10001;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: rgba(255,255,255,0.85);

}



body.loader-open {

    overflow: hidden;

}



.modal-loader {

    position: absolute;

    inset: 0;

    z-index: 10001;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: rgba(255,255,255,0.85);

}





/* ====================================================== */

/* NAVS / PILLS */

/* ====================================================== */



.nav-badge {

    padding: 2px 6px;

    font-size: 0.7rem;

    background: rgba(0, 0, 0, 0.1);

    border-radius: 10px;

}



.nav-pills.flex-nowrap {

    flex-wrap: nowrap;

    gap: 8px;

}





/* ====================================================== */

/* TAB SCROLL MOBILE */

/* ====================================================== */



.tab-scroll-wrapper {

    overflow-x: auto;

    -ms-overflow-style: none;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

}



    .tab-scroll-wrapper::-webkit-scrollbar {

        display: none;

    }





/* ====================================================== */

/* FILTERS */

/* ====================================================== */



.filters {

    padding: 20px 30px;

    background: #fff;

    border-bottom: 1px solid #e5e7eb;

}





/* ====================================================== */

/* TABLE / TAVOLI */

/* ====================================================== */



.tavolo {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    cursor: pointer;

    color: #fff;

    font-weight: 700;

    background-color: #28a745;

    border-radius: 50%;

}





/* ====================================================== */

/* WEBUI */

/* ====================================================== */



.webui-popover-title {

    border: 0;

}





/* ====================================================== */

/* DIAMOND */

/* ====================================================== */



.diamond {

    width: 42px;

    height: 42px;

    fill: #00bfff;

}



.diamond-glow {

    animation: glow 2s ease-in-out infinite alternate;

}



@keyframes glow {



    0% {

        filter: drop-shadow(0 0 2px #00bfff);

    }



    50% {

        filter: drop-shadow(0 0 15px #00ffff);

    }



    100% {

        filter: drop-shadow(0 0 2px #00bfff);

    }

}





/* ====================================================== */

/* BADGES / ANIMATIONS */

/* ====================================================== */



.badge-animated {

    animation: pulseSoft 1.8s infinite ease-in-out;

}



@keyframes blinkSoft {



    0% {

        color: #7a4a00;

        background-color: #fff3c4;

        box-shadow: 0 0 0 rgba(255,193,7,0.0);

    }



    50% {

        color: #3a2a00;

        background-color: #ffc107;

        box-shadow: 0 0 10px rgba(255,193,7,0.35);

    }



    100% {

        color: #7a4a00;

        background-color: #fff3c4;

        box-shadow: 0 0 0 rgba(255,193,7,0.0);

    }

}



@keyframes pulseSoft {



    0% {

        opacity: 0.50;

    }



    50% {

        opacity: 1;

    }



    100% {

        opacity: 0.50;

    }

}





/* ====================================================== */

/* FIXES / OVERRIDES */

/* ====================================================== */



#loader-wrapper .loader-section {

    left: 0 !important;

    z-index: 1002;

}





/*

    ICONS

*/



.error-icon {

    width: 70px;

    height: 70px;

    margin: auto;

    border-radius: 12px;

    background: rgba(255, 255, 255, .15);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 35px;

    backdrop-filter: blur(5px);

}



.error-box {

    background: #fff5f5;

    border: 1px solid #ffd6d6;

    border-radius: 16px;

    padding: 20px;

}



.icon-box {

    width: 70px;

    height: 70px;

    margin: auto;

    border-radius: 12px;

    background: rgba(10, 179, 156, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 35px;

    backdrop-filter: blur(5px);

}



.success-icon {

    width: 70px;

    height: 70px;

    margin: auto;

    border-radius: 12px;

    background: rgba(10, 179, 156, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 35px;

    backdrop-filter: blur(5px);

}



.list {

    list-style: none;

    padding: 0;

    margin: 0;

}



#navbarMain .navbar-nav .nav-link.active,

#mobileSidebar .navbar-nav .nav-link.active {

    color: var(--my-primary);

}





input[type=radio],

input[type=checkbox] {

    cursor: pointer;

}



    input[type=radio]:disabled,

    input[type=checkbox]:disabled {

        cursor: default;

    }



.form-check .form-check-input {

    cursor: pointer;

}



.form-check {

    position: relative;

    text-align: left;

    display: block;

    min-height: 1.21875rem;

    padding-left: 1.6em;

    margin-bottom: .125rem;

}



.form-check-label {

    cursor: pointer;

    margin-bottom: 0;

    user-select: none;

}



.form-check-input input[type=radio],

.form-check-input input[type=checkbox] {

    position: absolute;

    top: 4px;

}



.form-check:has(span.aspNetDisabled),

.form-check:has(span.aspNetDisabled) > input[type=radio],

.form-check:has(span.aspNetDisabled) > input[type=checkbox] {

    pointer-events: none;

    cursor: default;

    opacity: .5;

}





.col-12:not(:has(*)),

.col-sm-6:not(:has(*)),

.col-md-3:not(:has(*)),

.col-lg-12:not(:has(*)) {

    margin: 0 !important;

    padding: 0 !important;

}



.legend-item {

    padding: 12px;

    border-radius: 12px;

    background: #f8f9fa;

    margin-bottom: 10px;

}



.legend-title {

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 8px;

}



.legend-text {

    font-size: .9rem;

    color: #555;

    margin-top: 4px;

}