@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700');
html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 20px;
    color: #808fa0;
    background: linear-gradient(180deg, rgba(46,57,76,1) 0%, rgba(17,17,24,1) 150px, rgba(249,250,255,1) 150px, rgba(249,250,255,1) 100%);
    background-repeat: no-repeat !important;
    background-color: #f9faff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
*, *:focus { outline: none !important; box-sizing: border-box;}

::selection { /* Safari */
    background: #201d53;
    color:#fff;
}
::-moz-selection { /* Firefox */
    background: #201d53;
    color:#fff;
}

/* LINKS **********************************************************/
a:link { color:#c0d6fc; text-decoration:none;}
a:visited { color:#c0d6fc; text-decoration:none;}
a:hover { color:#28466b; text-decoration:none;}
a:active { color:#c0d6fc; text-decoration:none;}

.a1:link { color:#28466b; text-decoration: none;}
.a1:visited { color:#28466b; text-decoration: none;}
.a1:hover { color:#86a2d2; text-decoration: none;}
.a1:active { color:#28466b; text-decoration: none;}

.a2:link { color:#808fa0; text-decoration: none;}
.a2:visited { color:#808fa0; text-decoration: none;}
.a2:hover { color:#28466b; text-decoration: none;}
.a2:active { color:#808fa0; text-decoration: none;}

/* GENERAL ********************************************************/
section {overflow:hidden; padding-left: 30px !important; padding-right: 30px !important; }
hr { border-color:#79818b; margin: 0;}
ul, li { padding:0; margin:0; }
.d-full { width: 100%;}
.shadow-sm {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important; border-radius: 10px;}

/* HEADINGS *******************************************************/
h1, h2, h3, h4, h5 { margin:0 0 20px; font-weight: 500;}
h1 { font-size:20px; line-height:20px;}
h2 { font-size:25px; line-height:30px;}
h3 { font-size:22px; line-height:25px; font-weight: 700;}

/* FONT ***********************************************************/
.f12 { font-size: 12px !important;}
.f13 { font-size: 13px;}
.f14 { font-size: 14px;}
.f16 { font-size: 16px !important;}
.f18 { font-size: 18px;}
.f22 { font-size: 22px;}
.f24 { font-size: 24px;}
.f26 { font-size: 26px;}
.f28 { font-size: 28px;}
.f30 { font-size: 30px;}
.f50 { font-size: 50px;}
.f70 { font-size: 70px;}

.lh-double { line-height: 36px;}

.light { font-weight: 300;}
.regular { font-weight: 400;}
.medium { font-weight: 500;}
.bold { font-weight: 700;}

/* COLORS ********************************************************/
.border { border: solid 1px #bcc3cb !important;}

.text-color { color: #c0d6fc;}
.text-color-dark { color: #86a2d2;}
.text-gray { color: #808fa0;}
.text-blue { color: #112237;}
.text-light-blue { color: #28466b !important;}
.text-success {color:#a5cd39 !important;}
.text-warning {color:#efaa16 !important;}
.text-danger {color:#da2b48 !important;}
.text-orange {color: #f8872c;}

.bg-color { background: #c0d6fc;}
.bg-light-gray { background-color: #ebedf1;}
.bg-gray { background: #a2a4ad;}
.bg-linear {background: linear-gradient(#2E394C, #111118);}
.bg-blue { background: #313c4e;}
.bg-success, .btn-success { background: #50c9ac !important; border: none;}
.bg-warning { background: #f9c241 !important;}

/* BTN ************************************************************/
.btn { font-weight: 500; cursor:pointer; text-transform: uppercase; border-radius: 100px; font-size: 14px;}
.btn.a1 { border: none !important;}
.btn-primary { font-size: 14px; background:#f9faff !important; border:solid 1px #111119 !important;  color:#111119 !important;}
.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:hover:active, .btn-primary:focus:active { border:solid 1px #2e384b !important; background-color:#2e384b !important; color:#fff !important; box-shadow:none;}
.btn-secondary { font-size: 14px; background: #111119; border:none; color:#fff !important;}
.btn-secondary:not([disabled]):not(.disabled).active, .btn-secondary:not([disabled]):not(.disabled):active,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:hover:active, .btn-secondary:focus:active { background: #2e384b !important; color:#fff !important;}
.btn-default, .btn-default path { font-size: 13px; background:transparent; border:solid 1px #2e384b; color:#111119;}
.btn-default:not([disabled]):not(.disabled).active, .btn-default:not([disabled]):not(.disabled):active,
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:hover:active, .btn-default:focus:active, .btn-default:hover path { border:solid 1px #2e384b; color:#fff !important; background-color:#111118; box-shadow:none;}
.btn-color { font-size: 14px; background:#c0d6fc; border:solid 1px #c0d6fc; color:#111119;}
.btn-color:not([disabled]):not(.disabled).active, .btn-color:not([disabled]):not(.disabled):active,
.btn-color:hover, .btn-color:focus, .btn-color:active, .btn-color:hover:active, .btn-color:focus:active { border:solid 1px #28466b; background-color:#28466b; color:#fff; box-shadow:none;}
.btn-outline { background: #fff; border: solid 1px #bcc3cb; color: #111119;}
.btn-outline:hover { background: #111119; border: solid 1px #111119; color: #fff;}
.btn-danger { background: #fff; color: #dc3545;}
.btn-danger:hover { background: #dc3545; color: #fff;}
.btn-success { color: #fff !important;}
.btn-success:hover { background: #319980 !important;}

/* BADGE ********************************************************/
.badge { font-size: 14px; font-weight:500; text-transform: uppercase; padding: 8px 15px;}
.badge-xxs { font-size: 11px; padding: 0px; width: 18px; height: 18px; line-height: 18px; text-align: center;}

/* FORM *********************************************************/
label { font-weight: 500; text-transform: uppercase; font-size: 13px;}
::placeholder { text-transform: capitalize !important; font-style: italic; font-weight: 400; color: #808fa0 !important;}
.form-control, .form-select { border-radius: 100px; border: solid 1px #fff; padding: 8px 13px; font-size: 13px; font-weight: 500;}
.form-select.form-select-blu { background-color: #201d53; --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
.form-select:disabled { border: solid 1px #e9ecef; color: #808fa0;}
.form-control:focus, .form-select:focus { border: solid 1px #c0d6fc; box-shadow: none; }
.form-check-label { margin-top: 4px;}
.form-check-input{ border-color: #bcc3cb; }
.form-check-input:checked{ border-color: #112237; background-color: #112237; }

/* NAVBAR & TABS ******************************************************/
.logo { width: 200px; height: 22px; background-size: 200px 22px; background: url(/img/logo.png); margin:0 40px 0 20px; background-size: cover;}
.logologin {
    width: 200px;                                   /* larghezza desiderata */
    height: 50px;                                   /* altezza a seconda del tuo PNG */
    background: url(/img/logo.png) center/contain no-repeat;
}
.navbar { min-height:50px; font-size:13px; z-index:10; padding: 0; margin-bottom: 0; border-radius: 0; width:100%;}
.navbar-toggler { border: none; color: #111119; font-weight: bold; padding: 14px 15px; border-radius: 0; background: #c0d6fc;}
.navbar-nav { background: #111119; }
.nav-link { text-transform: uppercase; color: #fff !important; line-height: 13px; }
.nav-link:hover,
.nav-link.active:hover,
.nav-link.active,
.nav-link.active:visited,
.nav-link.active:focus { color: #c0d6fc !important;}
/*home*/
.nav-tab-filter > .nav-item { padding-right: 0;}
.nav-item > .nav-filter { color:#fff !important; padding:10px !important; border: none; border-radius: 10px; text-align: left;}
.nav-item > .nav-filter:hover, .nav-item > .nav-filter.active, .nav-item > .nav-filter:focus {color: #fff !important; border: none; padding:10px !important; background: linear-gradient(#2e394c, #414a59) !important; border-radius: 10px; }
/*liste*/
.nav-item > .nav-filter-list { font-weight: 500; color:#111118 !important; padding:10px 15px !important; border: none; border-radius: 100px; text-align: left;}
.nav-item > .nav-filter-list:hover, .nav-item > .nav-filter-list.active { font-weight: 500; color: #111118 !important; border: none; padding:10px 15px !important; background:#c0d6fc !important; border-radius: 100px; }

/* PAGINATION **********************/
.page-link { color: #313c4e !important;}
.active > .page-link, .page-link.active { background-color: #313c4e; color: #fff !important; border-color: rgb(222, 226, 230);}

/* FILE UPLOADER **********************/
.upload {margin-bottom:20px; height: 80px; border: 1.5px dashed #808fa0; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 14px; color: #201d53; }
.uploaded { margin-bottom: 10px; background-color: #fff; border-radius: 10px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.file { display: flex; flex-direction: column; }
.file__name { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; width: 300px; line-height: 0; color: #28466b; font-size: 14px; }
.cancella-file:hover { cursor: pointer; opacity: 0.8; }
.icon-file { padding: 15px; font-size: 30px; color: #28466b; }

/* LOADING *******************************************************/
.loader { width: 25px; --b: 4px; vertical-align: middle; aspect-ratio: 1; border-radius: 50%; background: #c0d6fc;
    -webkit-mask:
        repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
        radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect; animation: l5 1s infinite;}
@keyframes l5 {to{transform: rotate(.5turn)}}

/* SELECT2 *******************************************************/
.select2-container--default .select2-selection--single { border: solid 1px #bcc3cb !important; border-radius: 0 !important; font-size: 14px;}
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 41px !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 41px !important;}
.select2-results__option { font-size: 14px !important;}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #86a2d2 !important; }

/* LOGIN *******************************************************/
.form-login { max-width: 700px; margin-top: 120px;}

/* HOME *******************************************************/
/*layout home*/
.body-big { background: linear-gradient(180deg, rgba(46,57,76,1) 0%, rgba(17,17,24,1) 330px, rgba(249,250,255,1) 330px, rgba(249,250,255,1) 100%);}
.icon-account { border: solid 3px #c0d6fc; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 35px;}
.footer { min-height: 50px; }
.scroll { background: #2E394C; transition:all .2s ease-in;}
/*ticket*/
#tabelle-ticket {margin-top: 30px; }
.table-ticket { border-bottom-left-radius: 10px !important;  border-bottom-right-radius: 10px !important; }
.table-ticket > thead > tr { background: #fff; color: #121219; font-size: 13px; }
.table-ticket > thead > tr > th { padding: 10px;}
.table-ticket > thead > tr > th:first-child { border-top-left-radius: 10px !important;}
.table-ticket > thead > tr > th:last-child { border-top-right-radius: 10px !important; }
.table-ticket > tbody > tr > td { background: #fff; padding: 10px; vertical-align: middle;}
.table-ticket > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 10px !important; }
.table-ticket > tbody > tr:last-child > td:last-child { border-bottom-right-radius: 10px !important; }
.table-ticket > tbody > tr:last-child > td { border: none;  }
.tab-table-home { margin-bottom: 100px;}

/**********************************************************************************/
/*========================   Media queries (breakpoint)   =========================/
/**********************************************************************************/
@media (min-width: 576px) {
    /*GENERAL*/
    .d-full { width: auto;}

    /*NAV & TABS*/
    /*home*/
    .nav-item > .nav-filter, .nav-item > .nav-filter:hover, .nav-item > .nav-filter.active, .nav-item > .nav-filter:focus { padding: 10px 20px !important;}
}
@media (min-width: 768px) {  /*NAV & TABS*/
    /*home*/
    .nav-item > .nav-filter, .nav-item > .nav-filter:hover, .nav-item > .nav-filter.active, .nav-item > .nav-filter:focus { padding: 15px 25px !important;}
}
@media (max-width: 767px) {
    /* TABLE */
    .table-ticket > tbody > tr > td,
    .table-ticket > tbody > tr:hover > td { border:none !important;}
    .table-responsive thead tr {position: absolute; display:none;}
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {display: block;}
    .table-responsive { border:none;}
    .table-responsive > tbody > tr > td {
        /* Per comportarsi come una "riga" della tabella */
        border: none;
        position: relative;
        text-align:left !important;
        padding:5px 10px;
    }
    .table-responsive > tbody > tr { border-bottom: solid 1px #eee;}
    .table-responsive > tbody > tr:last-child { border-bottom:none;}
    .table-ticket { border-radius: 10px;}
    .table-ticket > tbody > tr:first-child,
    .table-ticket > tbody > tr:first-child > td:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px;}
    .table-ticket > tbody > tr:last-child,
    .table-ticket > tbody > tr:last-child > td:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
}
@media (min-width: 992px) {
    /*NAVBAR*/
    .navbar { padding:20px;}
    .navbar-nav { background:transparent; }
    .nav-item {padding-right: 10px; }
    .nav-link.active,
    .nav-link.active:visited,
    .nav-link:focus { padding-right: 15px !important; padding-left: 15px !important;  color: #111118 !important; background: #c0d6fc; border-radius: 30px; }
    /*HOME*/
    #tabelle-ticket {margin-top: -15px; }
    .tab-table-home { margin-bottom: 60px;}
}
@media (min-width: 1200px) {
    /*NAVBAR*/
    .nav-item {padding-right: 20px; }
}
.custom-tab {
    color: #b30021;  /* Personalizza il colore del testo */
    background-color: #e70909;  /* Personalizza il colore di sfondo */
    border-radius: 5px;  /* Aggiunge un bordo arrotondato */
}