:root {
      --primary-color: rgb(245, 145, 11); /* rgb(93, 135, 255) */
      --primary-color-2: rgb(245, 136, 11); /* #4f75dd */
      --primary-color-light: rgba(245, 145, 11, .5); /* rgb(145, 173, 255) */
      --dark-color: rgb(42, 53, 72);
      --gradient-1: #8B5CF6DD;
      --gradient-2: #4F46E5DD;
      --gradient-3: #1D4ED8DD;
}

/* Password matching feedback styles */
#password_match_message {
    color: #dc3545 !important;
    font-size: 0.875em;
    margin-top: 5px;
    animation: fadeIn 0.3s ease-in;
}

#password_match_success {
    color: #28a745 !important;
    font-size: 0.875em;
    margin-top: 5px;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Enhanced password field validation styles */
.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-control.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* Password container enhancement */
.password-container {
    position: relative;
}

.password-container .form-control {
    padding-right: 75px; /* Increased to accommodate both icons */
}

.password-container .toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    z-index: 10;
}

.password-container .toggle-password:hover {
    color: var(--primary-color);
}

/* Password match icon styling */
#password_match_icon {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    font-size: 16px;
    z-index: 5;
    animation: fadeIn 0.2s ease-in;
    cursor: help;
}

#password_match_icon i {
    font-size: 18px;
    font-weight: bold;
}
.link-default{color: var(--primary-color); cursor:pointer;}
.link-default:hover{border-bottom: 1px solid var(--primary-color)}
.text-dark {color: var(--dark-color) !important;}
body{color: #645e5e !important;}
.neutral-color{color: #645e5e !important}
.brand-logo-nav{max-width: 80% !important;}
.navbar_logo{max-width: 100%; max-height: 100%;}
.dark-overlay{background-color: #0e0e0e15;}
.light-logo{filter: brightness(0) invert(1);}
.topbar .navbar{max-height:70px !important}
.card-div{border-radius:23px !important}
.card{border-radius: 10px !important;}
.primary-color{color: var(--primary-color);}
.text-primary{color: var(--primary-color) !important;}
.text-separator-menu{color: #8e9baa !important;}
.text-purple{color:#8b5cf6 !important}
.tx-black{color: #000}
.primary-bg{background-color: var(--primary-color)}
.btn{background-color:#f4f9ff; color: #555555; border-radius: 100px; font-weight: 300; border: 1px solid #e7eef3 !important; transition: .2s; }
.btn[disabled],
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: #f0f2f5 !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
}
.list-group-item{padding-left: 0 !important; padding-right: 0 !important;}
.list-group-item-action:hover{background-color:#f4f9ff !important; border-radius: 0px !important;}
.btn-primary:hover{background-color:var(--primary-color) !important; color: #FFF !important;}
.btn-darker{background-color:#eaf2f8 !important;}
.btn-success:hover{background-color:#3fc860 !important; color: #FFF !important; font-weight: 400;}
.btn-danger:hover{background-color:#F36058 !important; color: #FFF; font-weight: 400;}
.btn-success-active{background-color:#3fc860 !important; color: #FFF !important; font-weight: 400;}
.btn-blue:hover{background-color:#5d87ff !important; color: #FFF !important; font-weight: 400;}
.btn-blue-active{background-color:#5d87ff !important; color: #FFF !important; font-weight: 400;}
.btn-danger-active{background-color:#F36058; color: #FFF; font-weight: 400;}
.swal2-confirm{border-radius: 100px !important; background-color:#3fc860 !important; color: #FFF !important; font-weight: 400 !important; padding: 8px 27px;}
.swal2-cancel{border-radius: 100px !important; background-color:#F36058 !important; color: #FFF !important; font-weight: 400 !important; padding: 8px 27px;}
.success-color{color: #3fc860}
.danger-color{color: #F36058}
.ihand{cursor: pointer;}
.gray-color{color:#B1B1B1}
.text-warning{color: rgb(245 158 11) !important;}
.badge-foglio-presenze-gara{background-color:#FF3393; color: #FF3393; border-radius: 100px;}
.color-foglio-presenze-gara{color: #FF3393;}
.badge-foglio-presenze-festivita{background-color:#FF363A; color: #FF363A; border-radius: 100px;}
.color-foglio-presenze-festivita{color: #FF363A;}
.badge-foglio-presenze-ferie{background-color:#7C70D0; color: #7C70D0; border-radius: 100px;}
.color-foglio-presenze-ferie{color: #7C70D0;}
.badge-foglio-presenze-malattia{background-color:#8FD9BD; color: #8FD9BD; border-radius: 100px;}
.color-foglio-presenze-malattia{color: #8FD9BD;}
.badge-foglio-presenze-104{background-color:#623333; color: #623333; border-radius: 100px;}
.color-foglio-presenze-104{color: #623333;}
.badge-foglio-presenze-recuperogara{background-color:#71B9E1; color: #71B9E1; border-radius: 100px;}
.color-foglio-presenze-recuperogara{color: #71B9E1;}
.badge-foglio-presenze-ripososettimanale{background-color:#ffb662; color: #ffb662; border-radius: 100px;}
.color-foglio-presenze-ripososettimanale{color: #ffb662;}
.bg-gray{background-color:#F6F9FB;}
.bg-light-blue{background-color: #F4F9FF !important;}
.bg-white{background-color:#FFF;}
.text-white{color:#FFF !important;}
.bg-black{background-color:#000;}
.inner-radius{border-radius:15px !important;}
.bg-inner-card{background-color: var(--bs-inner-card-bg)}
.bg-inner-ul li{background-color: var(--bs-inner-card-bg)}
.circle-step-disabled{background-color: #f7f7f7bf !important; color: #a7a7a7 !important; border: 1px solid #a7a7a76e; transition:.7s}
.circle-step-active{background-color: #f6f9fb !important; color: #2f2f2f !important; border: 1px solid var(--primary-color-light) !important;}
.circle-step-completed{background-color: #7096ff !important; color: #FFF !important; border: 1px solid #7096ff !important;}
.circle-step-gray{background-color: #e3e3e3 !important; border-color: #dedede !important; color: #c0c0c0 !important;}
.swal2-popup{border-radius: 20px !important;}
.btn-tab{background-color: #f6f9fb !important; color: #2f2f2f !important; border: 1px solid #91adff !important; transition:.2s}
.btn-tab-active{background-color: #7096ff !important; color: #FFF !important; border: 1px solid #7096ff !important;}
.slow-animation-progressbar{animation:10s linear infinite progress-bar-stripes}

.fw-200{font-weight: 200 !important;}
.fw-300{font-weight: 300 !important;}
.fw-400{font-weight: 400 !important;}
.fw-500{font-weight: 500 !important;}
.fw-600{font-weight: 600 !important;}
.fw-700{font-weight: 700 !important;}
.fw-800{font-weight: 800 !important;}
.fw-900{font-weight: 900 !important;}

/* scrollbar */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
/* scrollbar */

.btn-gray{
    background-color: var(--bs-inner-card-bg) !important;
    border: 1px solid var(--bs-inner-card-bg) !important;
    color: var(--bs-heading-color) !important;
    cursor: pointer !important;
}
.btn-gray:hover{
    background-color: var(--bs-inner-card-bg) !important; 
    border: 1px solid var(--primary-color) !important;
    color: var(--bs-heading-color) !important;
}
.btn-gray-active{
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}
.btn-card-gray-active{
    background-color: var(--bs-inner-card-bg) !important; 
    border: 1px solid var(--primary-color) !important;
    color: var(--bs-heading-color) !important;
}

.bg-primary{background-color: var(--primary-color) !important}
.radius-rounded{border-radius: 999px !important;}
.radius-credit-card{border-radius: 12px !important}
.card-scrollbar-425{max-height: 425px; overflow-y: auto;}
.card-scrollbar-475{max-height: 475px !important; overflow-y: auto;}
.div-scrollbar-invisible{

    &::-webkit-scrollbar {
        width: 0.5em;
        height: 0.5em;
    }
    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0px #FFF !important; 
        border-radius: 10px !important;
    }

}
.col-fit{flex: 0 0 auto;width: auto;}
.font-smaller{font-size: smaller}
.text-blue{color:rgb(93, 135, 255);}
.text-electric-blue{color: rgb(29 78 216)}
.text-green{color: #40c15e}
.text-dark-green{color: rgb(5 150 105)}
.text-gold{color: #FFD700}
.text-silver{color: #C0C0C0}
.text-bronze{color: #CD7F32}
.text-sucess{color: #3fc860}
.text-danger{color: #F36058}
.p-card{padding: 1.5rem !important;}

.div-risposta-disponibilita{text-align: center;}

.relative{position: relative !important;}
.chatting-box{height: 85vh;overflow-y: hidden; position:relative}

.body-wrapper{padding-top:5.8rem !important}
.body-wrapper{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}
#sidebarnavh{
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.col-card-online-registrations{
    flex: 0 0 auto;
    width: 380px;
}
.card-online-registrations{
    box-shadow: none;
    border: .5px solid #EDEDED !important;
}
.card-online-registrations:hover{
    border: .5px solid #009efb !important;
}
.selectable-card{
    border: .5px solid transparent !important;
}
.selectable-card:hover{
    border: .5px solid #009efb !important;
    cursor: pointer !important;
}
.list-group-online-registrations li{background-color: #FFF !important;}
.px-lg-4{
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}
.px-lg-0{
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.px-lg-3{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}
@media (max-width: 1000px) {
    .navbar_logo {
        height: 30px !important;
    }
    .padding-ranking-ag-grid{padding-left: 0 !important; padding-right: 0 !important;}
    .page-wrapper .body-wrapper>.container-fluid{padding: 0px 12px !important;}
    .p-card{padding: 1.5rem 1rem !important;}
}
@media (max-width: 991px) {
    .div-risposta-disponibilita{text-align: start; margin-top:18px}
    .no-mobile-overflow{overflow-y: hidden !important;}
    .mobile-auto-height{height: auto !important;}
    .chatting-box{height: 71vh !important;}
    .body-wrapper{
        padding-right: .1rem !important;
        padding-left: .1rem !important;
    }
    #sidebarnavh{
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
    .col-card-online-registrations{
        flex: 0 0 auto;
        width: 100%;
    }
    .px-xs-3{
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
    .px-xs-4{
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
    .px-lg-4{
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .px-lg-0{
        padding-right: auto !important;
        padding-left: auto !important;
    }
    .px-lg-3{
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* non trovo delle classi bootstrap */
.pl-0{padding-left: 0 !important;}
.pr-0{padding-right: 0 !important;}
.mr-1{margin-right: .25rem !important}
.ml-1{margin-left: .25rem !important}
.pr-1{padding-right: .25rem !important}
.pl-1{padding-left: .25rem !important}
.pl-2{padding-left: .5rem !important;}
.pr-2{padding-right: .5rem !important;}
.ml-2{margin-left: .5rem !important;}
.mr-2{margin-right: .5rem !important;}
.pl-3{padding-left: 1rem !important;}
.pr-3{padding-right: 1rem !important;}
.ml-3{margin-left: 1rem !important;}
.mr-3{margin-right: 1rem !important;}
.mr-4{margin-right: 1.5rem !important;}
.mr-5{margin-right: 3rem !important;}
.pl-4{padding-left: 1.5rem !important;}
.pr-5{padding-right: 3rem !important;}
.pr-4{padding-right: 1.5rem !important;}
.pl-5{padding-left: 3rem !important;}

.col_schedule_card{height: calc(100vh - 175px); overflow-y: auto;}
.right-part{background-color: #F4F9FF !important; border-top-right-radius: 20px !important; border-bottom-right-radius: 20px !important;}

.f-medium{font-size: medium !important}


/* Rotazione quando il menu è espanso */
.has-arrow[aria-expanded="true"]::after {
    transform: translateY(50%) rotate(225deg) !important;
}

.navbar-icons{padding: 10px 10px 10px 0 !important;}
a:hover .navbar-icons{color: var(--primary-color) !important}
a:hover div span{color: var(--primary-color) !important}

/* css schedule */
.joivent-schedule{
    clear: both;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.joivent-schedule ul li {
    float: left;
    border: 1px solid #f6f9fb;  
    /*margin-right: 6px;  
    border-radius: 12px;*/
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 105px;
    transition-duration: 0.3s;
}
.joivent-schedule ul li:hover {
    cursor: pointer;
    background-color: var(--primary-color-2) !important;
    border: 1px solid var(--primary-color-2) !important;  
    color: #fff !important;
}
.joivent-schedule ul li:hover i{
    color: #fff !important;
}
.li-schedule-active {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;  
    color: #fff !important;
}
.li-schedule-list {
    background-color: rgb(227, 227, 118);
    color: rgb(0, 0, 0);
}
.li-schedule-default {
    background-color: #F4F9FF;
    border: 1px solid #F4F9FF;  
    color: #2a3547;
}
.close-schedule{border-radius: 100px; padding:1px 2px 2px 2px}
.close-schedule:hover{background-color: #44444477;}

.navbar-submenu-arrow-right{
    position: absolute;
    right: 5px;
}


/* menu */
.dropdown-submenu {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.nested-submenu {
    position: absolute !important;
    left: 100% !important;
    /* Calculate position relative to parent's height */
    top: 80% !important;
    transform: translateY(-50%) !important;
    display: none !important;
    min-width: 250px !important;
    background-color: #fff;
    box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
    border-radius: 0.25rem;
    z-index: 1000;
}

.dropdown-submenu:hover + .nested-submenu,
.nested-submenu:hover {
    display: block !important;
}

.navbar-submenu-arrow-right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
/* fine menu */

.iframe-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    z-index: 1 !important;
    border-radius: 20px !important;
}

.div-main-iframe-background {
    position: relative !important;
    min-height: 500px !important; /* Adjust this value as needed */
    overflow: hidden !important;
}

.card-shop .div-img-shop {
    height: 220px; /* Set fixed height - adjust value as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-shop .card-img-top {
    height: 100%;
    width: auto;
    object-fit: contain;
    max-width: 100%;
}

.shop-active-filter {
    background-color: #f6f9fb;
    color: #d90166 !important;
}
.chat-active-user{
    background-color: #f6f9fb;
}
.chat-active-user div div h6{
    color: #d90166 !important;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 265px; /* adjust as needed */
}

/* NOTIFICHE */
.notify_user{
    position: fixed;
    width: calc(30% - 20px);
    top: calc(22% - 110px);
    right:calc(-30% - 20px);
    opacity: 0px;
    padding:10px;
    z-index: 999999;
    transition-timing-function: ease-out;

    border-radius: 15px;
    background-color: #e5ecf0;
    border: 1px solid #c6cfe2;
    color:#000;
}
.notify_user:hover{
    border: 1px solid #009efb !important;
}
.notify_user_popup{
    border-radius: 15px;
    background-color: #e5ecf0;
    border: 1px solid #c6cfe2;
    color:#000;
}
.notify_user_popup:hover{
    border: 1px solid #009efb !important;
}

.sidebar-item{padding-left: 6px !important;padding-right: 6px !important;}
.sidebar-link:hover{border-radius: 100px !important;}

.container-flex {
    display: flex;
    width: 100%;
}
.div-dinamico {
    flex-shrink: 0; /* non si restringe */
    width: fit-content; /* prende la larghezza del suo contenuto */
}
.div-rimanente {
    flex: 1; /* prende tutto lo spazio rimanente */
}
.larger{font-size: larger;}

.c-input{background-color: #FFF !important;border-radius: 25px !important;}
.c-input:focus{background-color: #FFF !important; border-color:#009efb !important;}
.color-picker{width: 60px !important; height: 40px !important; border-radius: 16px !important; padding: 8px 11px !important;}
.bg-input{background-color: #FFFFFF4F !important; color: #FFF ! IMPORTANT;}
.bg-input::placeholder{color: #FFFFFFAA ! IMPORTANT;}
.bg-input:focus{background-color: #FFFFFF4F !important;}
.opacity-75{opacity: 0.75 !important;}

.choices__inner{min-height: fit-content !important; padding: .35rem 16px !important; cursor:pointer !important;}
.c-choices__inner .choices__list{padding: 0 !important;}
.choices__inner{background-color: #FFF !important;border-radius: 25px !important;}
.choices__inner:focus{background-color: #FFF !important; border-color:#009efb !important;}
.choices__input{margin: 0 !important; line-height: 150% !important; background-color: transparent !important; cursor:pointer !important;}
.choices__list--multiple .choices__item[data-deletable]{background-color: var(--primary-color); border-color: var(--primary-color-2);}

.c-select{min-height: fit-content !important; padding: 8px 16px !important;}
.c-select .choices__list{padding: 0 !important;}
.is-focused .choices__inner, .is-open .choices__inner {
    border-color:#009efb !important;
    /*border-radius: 20px 20px 0 0 !important;*/
}

/* Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 30px;
}

.toggle-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f9f9f9;
    border: 1px solid #d3d8df;
    border-radius: 17px;
    transition: all 0.2s ease;
    overflow: hidden;
    user-select: none;
}

.toggle-slider {
    position: absolute;
    content: "";
    height: 23px;
    width: 23px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 0;
}

.toggle-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 0;
}

.toggle-on {
    position: absolute;
    left: 8px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.toggle-off {
    position: absolute;
    right: 8px;
    color: #666;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Stato Attivo */
.toggle-checkbox:checked + .toggle-label {
    background-color: var(--primary-color);
}
.toggle-checkbox:disabled + .toggle-label {
    background-color: #e0e0e0;
    cursor: not-allowed;
}
.toggle-checkbox:disabled + .toggle-label .toggle-slider {
    background-color: #e9e9e9;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.toggle-checkbox:disabled + .toggle-label .toggle-text .toggle-off {
    color:#afaeae !important;
}
.toggle-checkbox:disabled + .toggle-label .toggle-text .toggle-on {
    color:#afaeae !important;
}

.toggle-checkbox:checked + .toggle-label .toggle-slider {
    transform: translateX(24px);
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.toggle-checkbox:checked + .toggle-label .toggle-on {
    opacity: 1;
}

.toggle-checkbox:checked + .toggle-label .toggle-off {
    opacity: 0;
}

.logo-preview-container img {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.logo-preview-container img:hover {
    transform: scale(1.05);
}

.logo_event {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.logo_event:hover {
    opacity: 0.8;
}

.btn:focus-visible{color:#555555 !important;}

.padding-ranking-ag-grid{padding-left: 0 !important; padding-right: 0 !important;}

.module_form_selections{background-color: #eeeeee; border-radius: 10px;}
.module_form_selected{background-color: #F4F9FF !important;}
.module_form_required{background-color: #f9f4ff !important}
.c-input-custom-label:disabled{background-color: #f4f4f4 !important;}


/* Stili per il menu contestuale */
.context-menu {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 0;
    min-width: 160px;
    z-index: 1000;
    display: none;
}

.context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.context-menu-item:hover {
    background-color: #f0f0f0;
}

.context-menu-item.danger:hover {
    background-color: #fee;
    color: #d00;
}

.context-menu-separator {
    height: 1px;
    background-color: #eee;
    margin: 4px 0;
}

.context-menu-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.left-sidebar{display:none !important;}


/* Stili per schedule items come parallelopipedi */
.joivent-schedule ul li {
    float: left;
    border: 1px solid #f6f9fb;
    padding: 8px 14px 7px 12px;
    min-width: 105px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    
    /* Trasformazione per creare l'effetto parallelopipedo */
    transform: skew(-14deg);
    margin-right: 8px;
    
    /* Effetto gradiente iniziale */
    background: linear-gradient(90deg, 
        #F4F9FF 0%, 
        #F4F9FF 50%, 
        #F4F9FF 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
}

/* Contenuto interno non inclinato */
.joivent-schedule ul li span,
.joivent-schedule ul li i {
    transform: skew(8deg);
    display: inline-block;
}

/* Pseudo-elemento per l'effetto riempimento */
.joivent-schedule ul li::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary-color-2) 20%, 
        var(--primary-color) 50%, 
        var(--primary-color-2) 80%, 
        transparent 100%);
    transition: left 0.6s ease-in-out;
    z-index: -1;
}

/* Hover effect */
.joivent-schedule ul li:hover {
    cursor: pointer;
    border: 1px solid var(--primary-color);
    color: #fff !important;
    background: var(--primary-color);
    transform: skew(-14deg);
    box-shadow: 0 6px 20px rgba(93, 135, 255, 0.3);
}

.joivent-schedule ul li:hover::before {
    left: 100%;
}

.joivent-schedule ul li:hover i {
    color: #fff !important;
}

/* Stato attivo */
.li-schedule-active {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: #fff !important;
    transform: skew(-14deg) !important;
    box-shadow: 0 4px 15px rgba(93, 135, 255, 0.2);
}
/* Animazione shimmer per stato attivo */
@keyframes shimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: -100%; }
}

/* Stato default */
.li-schedule-default {
    background: #F4F9FF;
    border: 1px solid #e1e9f0;
    color: #2a3547;
    transform: skew(-14deg);
}

/* Icona di chiusura */
.close-schedule {
    border-radius: 100px;
    padding: 2px 2px;
    transition: all 0.3s ease;
    transform: skew(14deg);
    opacity: 0.7;
}

.close-schedule:hover {
    background-color: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transform: skew(14deg) scale(1.1);
}

.only-mobile{
    display: none;
}

/* Responsività */
@media (max-width: 768px) {
    .joivent-schedule ul li {
        transform: skew(-8deg);
        min-width: 100px;
        margin-right: 4px;
    }
    
    .joivent-schedule ul li span,
    .joivent-schedule ul li i {
        transform: skew(4deg);
    }
    
    .joivent-schedule ul li:hover {
        transform: skew(-8deg);
    }
    
    .li-schedule-active {
        transform: skew(-8deg) !important;
        width: 80% !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position:relative;
        margin-left: .5rem;
    }
    .li-schedule-active .close-schedule{
        position: absolute;
        right: 15px;
    }
    .li-schedule-active .close-schedule::before{
        content: '\ea19' !important; /* Icona per indicare il sottomenu */
    }

    .li-schedule-default{
        display: none;
    }
    .schedule-dropdown{
        display: block !important;
        max-width: 15% !important;
    }
    .only-mobile{
        display: block !important;
    }
    .hide-mobile{
        display: none !important;
    }
    .div_main_container_online_registrations{padding-top:.5rem !important;}
}

/* Effetto di riempimento alternativo più fluido */
.joivent-schedule ul li.alt-fill {
    background: linear-gradient(90deg, 
        #F4F9FF 0%, 
        #F4F9FF 48%, 
        var(--primary-color) 50%, 
        #F4F9FF 52%, 
        #F4F9FF 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.6s ease-in-out;
}

.joivent-schedule ul li.alt-fill:hover {
    background-position: 0% 0;
}

.container-fluid {padding-top: 0.5rem !important;}

/* Posizionamento dinamico del dropdown */
.schedule-dropdown-content {
    display: none;
    position: fixed; /* CAMBIA DA absolute A fixed */
    background-color: #ffffff;
    min-width: 250px;
    box-shadow: 0px 8px 25px rgba(0,0,0,0.15);
    z-index: 99999;
    border-radius: 8px;
    border: 1px solid #e1e9f0;
    padding: 8px 0;
    /* RIMUOVI top, left, transform - li calcoleremo dinamicamente */
}

.schedule-dropdown-content.show {
    display: block !important;
    animation: dropdownFadeIn 0.3s ease-out;
}

/* Resto del CSS rimane uguale... */
.schedule-dropdown-item {
    color: #2a3547;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid #f6f9fb;
}

.schedule-dropdown-item:last-child {
    border-bottom: none;
}

.schedule-dropdown-item:hover {
    background-color: #f4f9ff;
    color: var(--primary-color);
}

.schedule-dropdown-item i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

/* Sottomenu */
.schedule-submenu {
    position: relative;
}

.schedule-submenu-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0px 8px 25px rgba(0,0,0,0.15);
    border-radius: 8px;
    border: 1px solid #e1e9f0;
    padding: 8px 0;
    z-index: 99999;
}

.schedule-submenu:hover .schedule-submenu-content {
    display: block !important;
    animation: submenuSlideIn 0.3s ease-out;
    visibility: visible !important;
}

.schedule-submenu > .schedule-dropdown-item::after {
    content: '\ea61'; /* Icona per indicare il sottomenu */
    font-family: 'tabler-icons';
    float: right;
    font-size: 12px;
    opacity: 0.6;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes submenuSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    
    .schedule-submenu-content {
        display: none !important; /* Forza nascosto di default su mobile */
        position: relative;
        left: 0;
        top: 0;
        box-shadow: none;
        border: none;
        background-color: #f8f9fa;
        margin-left: 20px;
        animation: none;
    }

    .schedule-submenu-content.mobile-show {
        display: block !important; /* Mostra quando ha la classe mobile-show */
    }
    
    .schedule-submenu > .schedule-dropdown-item {
        position: relative;
    }
    
    .schedule-submenu > .schedule-dropdown-item::after {
        content: '\f107'; /* Freccia giù */
        font-family: 'tabler-icons';
        float: right;
        font-size: 12px;
        opacity: 0.6;
        transition: transform 0.3s ease;
    }
    
    .schedule-submenu.mobile-expanded > .schedule-dropdown-item::after {
        transform: rotate(180deg); /* Ruota la freccia quando espanso */
    }
    
    /* Evidenzia il parent quando il sottomenu è aperto */
    .schedule-submenu.mobile-expanded > .schedule-dropdown-item {
        background-color: #e8f0fe;
        color: #5d87ff;
    }
    
    .schedule-submenu > .schedule-dropdown-item::after {
        content: '\ea5f';
    }
    .left-part{display: none !important;}
    .col_schedule_card{
        height: auto !important; 
        overflow: none; 
        border-radius: 15px !important; 
        padding-bottom: 80px !important;
    }
    
}

/* Bottoni con stile parallelogramma */
.btn {
    background-color: #f4f9ff;
    color: #555555;
    border-radius: 0; /* Rimuovi border-radius per parallelogramma */
    font-weight: 300;
    border: 1px solid #e7eef3 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    
    /* Trasformazione per creare l'effetto parallelopipedo */
    transform: skew(-8deg);
    padding: 8px 20px;
    
    /* Effetto gradiente iniziale */
    background: linear-gradient(90deg, 
        #f4f9ff 0%, 
        #f4f9ff 50%, 
        #f4f9ff 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
}

/* Contenuto interno non inclinato */
.btn span,
.btn i,
.btn .btn-text {
    transform: skew(8deg);
}

/* Se il bottone non ha span, inclina tutto il testo */
.btn:not(:has(span)):not(:has(i)) {
    /* Per browser che non supportano :has() */
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary-color-2) 20%, 
        var(--primary-color) 50%, 
        var(--primary-color-2) 80%, 
        transparent 100%);
    transition: left 0.6s ease-in-out;
    z-index: -1;
}

/* Hover effect */
.btn:hover {
    cursor: pointer;
    border: 1px solid var(--primary-color) !important;
    color: #fff !important;
    background: var(--primary-color) !important;
    transform: skew(-8deg);
    font-weight: 400;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover i {
    color: #fff !important;
}

/* Bottoni con colori specifici */
.btn-primary {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: #fff !important;
    transform: skew(-8deg) !important;
}

.btn-primary::before {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.1) 20%, 
        rgba(255,255,255,0.2) 50%, 
        rgba(255,255,255,0.1) 80%, 
        transparent 100%);
}

.btn-primary:hover {
    background: var(--primary-color-2) !important;
    border: 1px solid var(--primary-color-2) !important;
}

.btn-success {
    background: #f0f8ff !important;
    border: 1px solid #e1f0e1 !important;
    color: #3fc860 !important;
}

.btn-success::before {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #2db854 20%, 
        #3fc860 50%, 
        #2db854 80%, 
        transparent 100%);
}

.btn-success:hover {
    background: #3fc860 !important;
    border: 1px solid #3fc860 !important;
    color: #fff !important;
}

.btn-danger {
    background: #fff0f0 !important;
    border: 1px solid #ffe1e1 !important;
    color: #F36058 !important;
}

.btn-danger::before {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #e54d42 20%, 
        #F36058 50%, 
        #e54d42 80%, 
        transparent 100%);
}

.btn-danger:hover {
    background: #F36058 !important;
    border: 1px solid #F36058 !important;
    color: #fff !important;
}

.btn-blue {
    background: #f0f4ff !important;
    border: 1px solid #e1e9ff !important;
    color: #5d87ff !important;
}

.btn-blue::before {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #4f75dd 20%, 
        #5d87ff 50%, 
        #4f75dd 80%, 
        transparent 100%);
}

.btn-blue:hover {
    background: #5d87ff !important;
    border: 1px solid #5d87ff !important;
    color: #fff !important;
}

/* Bottoni stati attivi */
.btn-primary-active,
.btn-success-active,
.btn-danger-active,
.btn-blue-active {
    transform: skew(-8deg) !important;
}

/* Bottoni disabilitati */
.btn[disabled],
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: #f0f2f5 !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    transform: skew(-8deg);
    box-shadow: none;
}

.btn[disabled]::before,
.btn:disabled::before {
    display: none;
}

.btn[disabled]:hover,
.btn:disabled:hover {
    background: #f0f2f5 !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    transform: skew(-8deg);
    box-shadow: none;
}

/* Bottoni piccoli */
.btn-sm {
    padding: 6px 16px;
    font-size: 0.875rem;
}

/* Bottoni grandi */
.btn-lg {
    padding: 12px 28px;
    font-size: 1.125rem;
}

/* Bottoni rotondi (per casi speciali dove vuoi mantenere il border-radius) */
.btn-rounded {
    border-radius: 100px !important;
    transform: none !important;
}

.btn-rounded span,
.btn-rounded i {
    transform: none !important;
}

.btn-rounded:hover {
    transform: translateY(-1px) !important;
}

/* Focus */
.btn:focus,
.btn:focus-visible {
    color: #555555 !important;
    box-shadow: 0 0 0 3px rgba(93, 135, 255, 0.2);
    outline: none;
}

/* Responsività */
@media (max-width: 768px) {
    .fixed-buttons-schedule{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .btn {
        transform: skew(-4deg);
        padding: 6px 16px;
    }
    
    .btn span,
    .btn i {
        transform: skew(4deg);
    }
    
    .btn:hover {
        transform: skew(-4deg);
    }
    
    .btn-primary,
    .btn-success,
    .btn-danger,
    .btn-blue {
        transform: skew(-4deg) !important;
    }
    
    .btn-primary-active,
    .btn-success-active,
    .btn-danger-active,
    .btn-blue-active {
        transform: skew(-4deg) !important;
    }
}

/* Swal2 bottoni con nuovo stile */
.swal2-confirm {
    border-radius: 0 !important;
    background-color: #3fc860 !important;
    color: #FFF !important;
    font-weight: 400 !important;
    padding: 8px 27px !important;
    transform: skew(-8deg) !important;
    position: relative;
    overflow: hidden;
}

.swal2-confirm::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.1) 20%, 
        rgba(255,255,255,0.2) 50%, 
        rgba(255,255,255,0.1) 80%, 
        transparent 100%);
    transition: left 0.6s ease-in-out;
    z-index: -1;
}

.swal2-confirm:hover::before {
    left: 100%;
}

.swal2-cancel {
    border-radius: 0 !important;
    background-color: #F36058 !important;
    color: #FFF !important;
    font-weight: 400 !important;
    padding: 8px 27px !important;
    transform: skew(-8deg) !important;
    position: relative;
    overflow: hidden;
}

.swal2-cancel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.1) 20%, 
        rgba(255,255,255,0.2) 50%, 
        rgba(255,255,255,0.1) 80%, 
        transparent 100%);
    transition: left 0.6s ease-in-out;
    z-index: -1;
}

.swal2-cancel:hover::before {
    left: 100%;
}

.btn2{background-color:#ffffff !important;}


/* Gradient */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--gradient-3) 0%, var(--gradient-2) 50%, var(--gradient-1) 100%);
}

.bg-gradient-warm {
    background: linear-gradient(135deg, #ff7b54 0%, var(--gradient-1) 50%, #ff6b9d 100%);
}

.bg-gradient-sunset {
    background: linear-gradient(135deg, #ff9a56 0%, #ff6b6b 50%, #845ec2 100%);
}

.bg-gradient-ocean {
    background: linear-gradient(135deg, #667eea 0%, var(--gradient-1) 50%, #764ba2 100%);
}

.bg-gradient-modern {
    background: linear-gradient(135deg, var(--gradient-1) 0%, #ff8a80 50%, #ff7043 100%);
}

/* Gradiente dinamico con animazione */
.bg-gradient-animated {
    background: linear-gradient(135deg, var(--gradient-3), var(--gradient-2), var(--gradient-1), #ff8a80);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Overlay pattern per gradienti più interessanti */
.bg-gradient-with-pattern {
    background: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 0%, transparent 50%),
        linear-gradient(135deg, var(--gradient-3) 0%, var(--gradient-2) 50%, var(--gradient-1) 100%);
}

        .mylink {
            color: var(--primary-color);
            text-decoration: none;
            position: relative;
            display: inline-block;
            transition: color 0.3s ease;
        }

        .mylink::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-color) , var(--primary-color) );
            transition: width 0.3s ease;
        }

        .mylink:hover {
            color:  var(--primary-color) !important;
        }

        .mylink:hover::after {
            width: 100%;
        }

        /* Varianti di colore */
        .link-primary::after {
            background:  var(--primary-color) !important;
        }
        .link-primary:hover {
            color:  var(--primary-color) !important;
        }

        
        /* Variante con sottolineatura più spessa */
        .thick-underline::after {
            height: 2px;
        }

        /* Variante con animazione più lenta */
        .slow-animation,
        .slow-animation::after {
            transition-duration: 0.6s;
        }


        /*FOOTER AG-GRID*/

        /* Soluzione 1: Layout responsive completo per il footer AG Grid */
@media (max-width: 768px) {
  .ag-paging-panel {
    margin-top: 3vh !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px !important;
    justify-content: center !important;
  }

  /* Nascondi il selettore page size su mobile */
  .ag-paging-page-size {
    display: none !important;
  }

  /* Riduci il testo del summary */
  .ag-paging-row-summary-panel {
    font-size: 12px !important;
    order: 3 !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 5px !important;
  }

  /* Centra i controlli di navigazione */
  .ag-paging-page-summary-panel {
    order: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* Riduci la dimensione dei bottoni */
  .ag-paging-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  /* Riduci il testo della descrizione pagina */
  .ag-paging-description {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

/* Soluzione 2: Versione più compatta */
@media (max-width: 480px) {
  .ag-paging-panel {
    padding: 5px !important;
  }

  /* Nascondi alcuni elementi per risparmiare spazio */
  .ag-paging-row-summary-panel #ag-128-to,
  .ag-paging-row-summary-panel #ag-128-of,
  .ag-paging-description #ag-128-start-page,
  .ag-paging-description #ag-128-of-page {
    display: none !important;
  }

  /* Usa simboli più compatti */
  .ag-paging-row-summary-panel::before {
    content: "Righe: " !important;
  }
  
  .ag-paging-description::before {
    content: "Pag: " !important;
  }

  /* Riduci ulteriormente i bottoni */
  .ag-paging-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .ag-paging-description {
    font-size: 11px !important;
  }

  .ag-paging-row-summary-panel {
    font-size: 11px !important;
  }
}

/* Soluzione 3: Per schermi molto piccoli - solo navigazione essenziale */
@media (max-width: 360px) {
  .ag-paging-row-summary-panel {
    display: block !important;
  }

  
  .ag-paging-panel {
    margin-top: 3vh !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  .ag-paging-page-summary-panel {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Nascondi i bottoni first/last per risparmiare spazio */
  .ag-paging-button[aria-label="First Page"],
  .ag-paging-button[aria-label="Last Page"] {
    display: none !important;
  }
}

/* Opzione alternativa: Personalizzazione completa del footer */
.ag-paging-panel-custom-mobile {
  display: none !important;
}

/* Stili per la ricerca atleti simili */
.athletes-search-results {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.athlete-card {
  background: white;
  transition: all 0.3s ease;
  position: relative;
}

.athlete-card:hover {
  background: #f8f9fa !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.athlete-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.athletes-search-popup .swal2-html-container {
  padding: 0 !important;
  margin: 0 !important;
}

.athlete-card h6 {
  color: var(--primary-color);
  font-weight: 600;
}

.athlete-card .badge {
  font-size: 0.75em;
  padding: 0.35em 0.65em;
}

.athlete-card .text-success {
  color: #28a745 !important;
}

.athlete-card .text-warning {
  color: #ffc107 !important;
}

.athlete-card .text-info {
  color: #17a2b8 !important;
}

/* Animazione per il loading della ricerca */
.search-loading {
  text-align: center;
  padding: 2rem;
}

.search-loading .spinner-border {
  color: var(--primary-color);
}

/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
  .athletes-search-popup {
    width: 95% !important;
  }
  
  .athlete-card {
    padding: 10px !important;
  }
  
  .athlete-card .row {
    flex-direction: column;
  }
  
  .athlete-card .col-4 {
    margin-top: 10px;
    text-align: left !important;
  }
}

/* Countdown styles */
.countdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 1rem 0;
}

.countdown-item {
    text-align: center;
    min-width: 80px;
}

.countdown-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: #2a3548 !important;
    transition: 0.3s ease;
    margin-bottom: .35rem;
}

.countdown-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 300;
    color: #2a3548DE !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.countdown-separator {
    font-size: 2rem;
    font-weight: 300;
    color: #2a3548DE !important;
}

.event-status {
    padding: 1rem 2rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.event-status.ongoing {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.3);
}

.event-status.ended {
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.3);
}

@media (max-width: 768px) {
    .countdown-container {
        gap: 1rem;
    }
    
    .countdown-number {
        font-size: 2rem;
    }
    
    .countdown-item {
        min-width: 60px;
    }

    .countdown-label{
        font-size: .7rem;
    }

    .div-event-home-logo{
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 35% !important;
    }
    .div-event-home-logo img{
        height: auto !important; 
        max-height: 110px !important; 
        max-width: 110px !important;
    }
    .div-event-home-name{
        margin: 0 !important;
        padding-right: 0 !important;
        max-width: 65% !important;
    }
    .div-event-home-name h1{
        font-size: 1.5rem !important;
    }
    .div-event-home-name h5{
        font-size: 1rem !important;
    }
}

/* Stili per la ricerca degli atleti */
.athletes-search-results {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 15px;
}

.athlete-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.athlete-card:hover {
    background-color: #f8f9fa;
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.athlete-card h6 {
    margin-bottom: 8px;
    color: #212529;
    font-weight: 600;
}

.athlete-card .text-muted {
    font-size: 0.875rem;
    margin-bottom: 4px;
}

.athlete-card .badge {
    font-size: 0.75rem;
    padding: 4px 8px;
}

/* Stili per la ricerca delle città */
.cities-search-results {
    max-height: 350px;
    overflow-y: auto;
    margin-top: 15px;
}

.city-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.city-card:hover {
    background-color: #f8f9fa;
    border-color: #28a745;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.city-card h6 {
    margin-bottom: 8px;
    color: #212529;
    font-weight: 600;
}

.city-card .text-muted {
    font-size: 0.875rem;
    margin-bottom: 4px;
}

.cities-search-popup {
    --swal-border-radius: 12px;
}

.cities-search-popup .swal2-title {
    color: #28a745;
    font-size: 1.5rem;
}

/* Miglioramenti ai gruppi di input per i campi con pulsante di ricerca */
.input-group .btn {
    border-radius: 0 100px 100px 0;
    border-left: none;
}

.input-group .form-control {
    border-radius: 100px 0 0 100px;
}

.input-group .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(245, 145, 11, 0.25);
}

@media (max-width: 768px) {
    .athletes-search-results,
    .cities-search-results {
        max-height: 300px;
    }
    
    .athlete-card,
    .city-card {
        padding: 12px;
        margin-bottom: 8px;
    }
    
    .athlete-card h6,
    .city-card h6 {
        font-size: 1rem;
    }
}

/* CSS for Communications Popup */
.communications-popup {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.communications-container {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}

.communication-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    position: relative;
}

.communication-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.communication-item.clickable-comm {
    cursor: pointer;
    border-left: 4px solid #667eea;
}

.communication-item.clickable-comm:hover {
    background: #e9ecef !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
    border-left-color: #5a67d8;
}

.communication-item.clickable-comm:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.communication-item h6 {
    color: #333;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.communication-item .text-muted {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 4px;
}

.communication-item .small {
    font-size: 0.8rem;
    line-height: 1.4;
}

.communication-item .text-primary {
    color: #667eea !important;
    font-weight: 500;
}

.status-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.communications-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.communications-empty i {
    font-size: 48px;
    color: #dee2e6;
    margin-bottom: 15px;
    display: block;
}

/* Email Status Icons */
.ti-mail-check, .ti-check {
    color: #28a745;
}

.ti-clock {
    color: #ffc107;
}

.ti-mail-x, .ti-x {
    color: #dc3545;
}

.ti-mail {
    color: #6c757d;
}

.ti-eye {
    color: #667eea;
}

.ti-external-link {
    color: #adb5bd;
}

/* CSS for Email Preview Popup */
.email-preview-popup {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.email-preview-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
}

/* Animazioni per i bottoni */
.communication-item .text-primary {
    transition: all 0.2s ease;
}

.communication-item:hover .text-primary {
    color: #5a67d8 !important;
    transform: translateX(2px);
}

/* Indicatore visivo per elementi cliccabili */
.clickable-comm::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #667eea;
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.clickable-comm:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
}

/* Custom styles for SweetAlert buttons in communications */
.communications-popup .swal2-actions button {
    margin: 0 5px;
    font-size: 0.9rem;
    padding: 10px 20px;
}

/* Responsive adjustments for communications */
@media (max-width: 768px) {
    .communications-container {
        padding: 10px;
    }
    
    .communication-item {
        padding: 12px;
    }
    
    .communications-popup .swal2-html-container {
        padding: 10px;
    }
    
    .clickable-comm::before {
        right: 10px;
    }
}

/* Profile page styles */
.profile-img-container {
    position: relative;
    display: inline-block;
}

.change-photo-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid white;
}

.change-photo-overlay:hover {
    background: var(--primary-color-2);
    transform: scale(1.05);
}

.nav-pills .nav-link {
    border-radius: 0;
    background: transparent;
    color: #6c757d;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
    background: transparent;
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.nav-pills .nav-link:hover {
    background: rgba(93, 135, 255, 0.1);
    color: var(--primary-color);
}

.document-user-item {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.document-user-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(93, 135, 255, 0.1);
}

.document-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.document-icon.pdf { background: #dc3545;}
.document-icon.image { background: #28a745; }
.document-icon.doc { background: #007bff; }
.document-icon.default { background: #a0a8b7; }

.upload-zone {
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-zone:hover {
    border-color: var(--primary-color);
    background: rgba(93, 135, 255, 0.05);
}

.upload-zone.dragover {
    border-color: var(--primary-color);
    background: rgba(93, 135, 255, 0.1);
}
/* Profile page styles */
.profile-img-container {
    position: relative;
    display: inline-block;
}

.change-photo-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid white;
}

.change-photo-overlay:hover {
    background: var(--primary-color-2);
    transform: scale(1.05);
}

.nav-pills .nav-link {
    border-radius: 0;
    background: transparent;
    color: #6c757d;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    padding: 1rem 1.5rem;
}

.nav-pills .nav-link.active {
    background: transparent;
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.nav-pills .nav-link:hover {
    background: rgba(93, 135, 255, 0.1);
    color: var(--primary-color);
}

.upload-zone {
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-zone:hover {
    border-color: var(--primary-color);
    background: rgba(93, 135, 255, 0.05);
}

.upload-zone.dragover {
    border-color: var(--primary-color);
    background: rgba(93, 135, 255, 0.1);
}

.tab-pane{
    display: none;
}
.show{
    display: block;
}

.flashing-red {
  color: #F36058; 
  text-shadow: 0px 0px 2px rgba(255, 0, 0, 0.5); 
  animation: lampeggia 1s infinite;
}

@keyframes lampeggia {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Modal preview document styles */
.preview-modal .modal-dialog {
    max-width: 90vw;
    max-height: 90vh;
    margin: 2rem auto;
}

.preview-modal .modal-content {
    height: 85vh;
    display: flex;
    flex-direction: column;
}

.preview-modal .modal-body {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
}

.document-preview {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
}

.document-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.document-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.preview-error {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

.preview-error i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.loading-preview {
    text-align: center;
    padding: 3rem;
}

.loading-preview .spinner-border {
    width: 3rem;
    height: 3rem;
}

.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input {
    width: 100%;
    padding: 12px 45px 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
    background: #fafafa;
}

.password-input:focus {
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.toggle-password {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    color: #666;
}

.toggle-password:hover {
    background-color: #f0f0f0;
    color: #333;
}

.eye-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.password-strength {
    margin-top: 0.5rem;
    font-size: 14px;
    color: #666;
    padding-left: 2vh;
    padding-right: 2vh;
}

.strength-bar {
    height: 4px;
    background: #e1e5e9;
    border-radius: 2px;
    margin-top: 0.25rem;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.weak { background-color: #ff4757; width: 25%; }
.medium { background-color: #ffa502; width: 50%; }
.good { background-color: #2ed573; width: 75%; }
.strong { background-color: #1e90ff; width: 100%; }
.requirements-list {
    margin-top: 0.5rem;
    font-size: 12px;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.requirement-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
    color: #666;
}

.requirement-item.met {
    color: #2ed573;
}

.requirement-item.not-met {
    color: #dc3545;
}

.requirement-icon {
    width: 12px;
    height: 12px;
    margin-right: 0.5rem;
    fill: currentColor;
}

/* Stili per il popup di ricerca coupon */
.coupon-search-popup .swal2-html-container {
    padding: 0 !important;
    margin: 0 !important;
    max-height: 500px !important;
    overflow: hidden !important;
}

.coupon-search-popup .coupon-row {
    transition: all 0.2s ease;
    cursor: pointer !important;
}

.coupon-search-popup .coupon-row:hover {
    background-color: #f8f9fa !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.coupon-search-popup .select-coupon-btn {
    transition: all 0.2s ease;
    font-size: 12px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    background-color: var(--primary-color) !important;
    border: none !important;
    color: white !important;
}

.coupon-search-popup .select-coupon-btn:hover {
    background-color: var(--primary-color-2) !important;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(245, 145, 11, 0.3);
}

.coupon-search-popup table {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.coupon-search-popup thead th {
    background: linear-gradient(135deg, #fcfffc 0%, #fcfffc 100%) !important;
    color: black !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .coupon-search-popup {
        width: 95vw !important;
    }
    
    .coupon-search-popup table {
        font-size: 12px !important;
    }
    
    .coupon-search-popup th,
    .coupon-search-popup td {
        padding: 8px 4px !important;
    }
    
    .coupon-search-popup .select-coupon-btn {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}