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


INDICE: 
  1- PAGINA SPORT
      - Carosello
      - Titolo Colonna Centrale
      - Tabs di navigazione Sport

  2- SERIE A

  3- PAGINA CAMPIONATO

  4- PAGINA "TUTTEQUOTE"

  5- PAGINA LIVE OVERVIEW

  6- PAGINA LIVE EVENT

  7- UTLITY

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


/*---Carosello Sport---*/

.carousel-container {
    position: relative;
    top: 0;
}

#carousel-sport .carousel-item img {
    border-radius: 3px;
}


/*---SEZIONE TITOLI (PAG. SPORT. TUTTE QUOTE)---*/

.head-c {
    background: var(--container-accent);
    color: var(--text-color-hilight);
    font-weight: 500;
    padding: 7px 0 5px 10px;
    font-size: 14px;
}

.flag-serie-container {
    display: flex;
    align-items: center;
}

.flag-circle {
    /* width: 20px; */
    height: 25px;
    border-radius: 25PX;
    overflow: hidden;
    /* margin-left: 50px; */
    margin-right: 30px;
}

.flag-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}


/*--- Tabs di Navigazione Sport---*/

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
    color: var(--text-color-hilight);
    width: 100%;
    background-color: var(--container-background);
    border-radius: 0;
    border: 0.5px solid var(--background);
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
    color: var(--text-color-hilight);
    width: 100%;
    background-color: var(--container-background);
    border-radius: 0;
    border: 0.5px solid var(--background);
}

.nav-pills.nav-item .nav-link :hover {
    background-color: var(--accent);
}

.nav-pills .nav-link:hover,
.nav-pills .show>.nav-link {
    color: var(--text-color-hilight);
    background-color: var(--accent);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--text-color-hilight);
    background-color: var(--accent);
}

.btn-sport {
    text-transform: uppercase;
    height: 40px;
    display: flex;
    justify-content: space-between;
}

.live-button-sport {
    position: relative;
    padding-right: 1.3rem !important;
}

.live-sport-count {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--text-color-on-accent);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    transition: transform 160ms ease, background-color 160ms ease;
}

.live-button-sport.active .live-sport-count {
    background: var(--background);
    color: var(--accent);
}

.live-sport-count.is-changing {
    transform: scale(1.16);
}

.sport-text {
    text-transform: uppercase;
    font-size: 14px;
}


/*---Ricerca---*/

.search {
    width: 100%;
    position: relative;
    display: flex;
}

.searchnav {
    width: 100%;
    position: relative;
    display: flex;
    border-bottom: 1px solid var(--accent);
}

.searchTerm {
    width: 100%;
    border: 3px solid var(--container-background);
    border-right: none;
    padding: 5px;
    height: 40px;
    border-radius: 5px 0 0 5px;
    outline: none;
    background-color: var(--container-background);
    color: var(--text-color-grey);
}

.searchButton {
    display: flex;
    align-items: center;
    width: 40px;
    border: 1px solid var(--container-background);
    background: var(--container-background);
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
}

.searchTerm::placeholder {
    font-size: 12px;
    color: var(--text-color-grey);
}

.search h3 {
    margin: 0;
}

#modalid a:hover {
    color: var(--accent);
}


/*---Betting---*/

.betting {
    background: var(--container-accent);
    font-weight: 300;
    padding: 10px;
    text-align: center;
    color: var(--text-color-hilight);
    font-size: 14px;
}


/*---risult-trend---*/

.custom-p {
    padding-top: 0.8rem!important;
    padding-bottom: 0.8rem!important;
}


/*---Time Button---*/

.btn-time {
    padding: 5px;
    font-size: 11px;
    border-color: var(--text-color-grey);
    min-width: 30px;
    color: var(--text-color-hilight);
}

.btn-time.activated {
    border-color: var(--accent);
    background-color: var(--accent);
    color: var(--text-color-on-accent);
    border-color: var(--text-color-on-accent);
}

.material-icons-time {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 28px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    color: var(--text-color-grey);
    margin-right: 10px;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}


/*---Top Leagues a cascata---*/

#accordionPanelsTopLeagues {
    z-index: 3;
}

.accordion-item {
    border: none;
    background-color: var(--background);
}

.accordion-button {
    color: var(--text-color-hilight);
    background-color: var(--container-background);
    font-size: 14px;
}

.accordion-button:not(.collapsed) {
    color: var(--text-color-hilight);
    background-color: var(--container-accent);
    box-shadow: none;
}

.accordion-body {
    background-color: var(--background);
    padding: 0;
}

.accordion-div {
    background-color: var(--container-background);
    margin-top: 5px;
    border-radius: 3px;
}

.accordion-div:hover {
    background-color: var(--accent) !important;
}

.top-leagues-raw:hover .categorynamesport {
    
   
}


.top-leagues-raw:hover .text-right {
    color: var(--text-color-on-accent);
}

.accordion-bottom-div {
    background-color: var(--container-background);
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.left-side-color {
    height: 46px;
    width: 3px;
    position: absolute;
    border-top-left-radius: 3px;
    left: 0;
    background-color: var(--accent);
}


/*Contenuto label Top Leagues*/

.top-leagues-raw {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    width: 100%;
    margin-bottom: 1px;
    padding: 0 0.5rem;
    cursor: pointer;
    color: var(--text-color-grey);
    min-height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.icon-sport-flag {
    float: left;
    width: 20px;
    margin-right: 1.9166666667rem;
}

.categorynamesport {
    float: left;
    color: var(--text-color-hilight);
    width: 70%;
    text-align: left;
    padding-right: 1.5rem;
    font-size: 12px !important;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    TEXT-TRANSFORM: uppercase;
}

.categorynameregion {
    float: left;
    color: var(--text-color-hilight);
    width: 70%;
    text-align: left;
    padding-right: 1.5rem;
    font-size: 12px !important;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    TEXT-TRANSFORM: uppercase;
}

.categorynamecompetition {
    float: left;
    color: var(--text-color-hilight);
    width: 70%;
    text-align: left;
    padding-right: 1.5rem;
    font-size: 12px !important;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    PADDING-LEFT: 1REM;
}

.text-right {
    max-width: 20%;
    text-align: left;
    font-size: 12px !important;
    text-decoration: none;
    color: var(--text-color-hilight);
}


/*---Prematch a cascata---*/

#accordionPanelsPremetch {
    z-index: 3;
}


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


/* ======================SERIE A====================== */


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

.divn {
    z-index: 1;
    background: var(--container-background);
    min-height: 30px;
    margin: 5px 0;
}

#navSlideMercati .active {
    color: var(--text-color-on-accent)!important;
    background-color: var(--accent);
}

#navSlideMercati .slide-navlink {
    margin-top: 0;
    border-right: 1.1px solid var(--background);
    height: 2.3rem;
    width: auto;
}

#navSlideMercati .nav-link:hover {
    cursor: pointer;
    background-color: var(--accent);
    color: var(--text-color-on-accent);
}


/*---Header Table---*/

.container-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 1px;
    position: relative;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    transition: .5s all;
}

.header-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;
    background-color: var(--container-accent);
    margin-bottom: 0.08rem;
    font-size: 12px;
    color: var(--text-color-grey);
}

.header-row {
    text-align: center;
    margin-left: auto;
    margin-right: 0.8rem;
    width: 71%;
    justify-content: center;
}

.header-row ul {
    display: flex;
    width: 100%;
    justify-content: right;
}

.header-row li {
    display: inline;
    width: 3.1rem;
    align-self: center;
}

.header-row span {
    width: calc(100%/13)
}

.event-description {
    display: flex;
    text-transform: uppercase;
}

.event-description-time {
    text-align: center;
    width: 4.9rem!important;
}

.container-val {
    height: 100%;
    float: right;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outcome-val {
    font-size: 0.9rem;
    font-weight: 700;
    /*background-color: var(--container-accent);
                border-radius: 2px;
            */
    color: var(--accent);
}


/*---body-table-ultimo-minuto---*/

.list-league-table {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: var(--background);
}

.list-league {
    padding-left: 0;
    list-style: none;
    font-size: 12px;
    margin-bottom: 0;
}

.list-league-partial {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
}

.list-raw {
    display: flex;
    padding: 0;
    width: 100%;
    height: 3.67rem;
    border-radius: 3px;
    margin-bottom: 0.08rem;
    overflow: visible!important;
    color: var(--text-event-list);
    background-color: var(--container-background);
}

.list-raw-mob {
    display: flex;
    padding: 0;
    width: 100%;
    height: 3.67rem;
    border-radius: 3px;
    margin-bottom: 0.08rem;
    overflow: visible!important;
    color: var(--text-event-list);
    background-color: var(--container-background-mob);
    border-bottom: 2px solid var(--accent);
}

.mob-event-row {
    background-color: var(--container-accent-mob)!important;
}

.container-date {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 4rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container-event {
    flex: 1;
    align-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.container-button {
    display: flex;
    height: 100%;
    height: 100%;
    justify-content: center;
    padding: 0 10px;
    align-self: center;
}

.event-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.button-wrap {
    min-width: 3rem;
    border: none;
    margin: 0;
    background: 0 0;
    box-shadow: none;
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.08rem;
}

.outcome-button {
    font-size: 0.9rem;
    font-weight: 700;
    /*background-color: var(--container-accent);
                border-radius: 2px;
            */
    width: 100%;
    padding: 0.5rem;
    text-align: center;
    color: var(--text-color-hilight);
}

.outcome-button:hover {
    background-color: var(--accent);
    color: var(--text-color-hilight);
}

.outcome-button:active {
    background-color: var(--accent);
    color: var(--text-color-hilight);
}

.outcome-button:focus {
    background-color: var(--accent);
    color: var(--text-color-hilight);
}

.oddsBtn.selected {
    background-color: var(--accent) !important;
    color: var(--text-color-hilight) !important;
}


/*================== LIGHT  MODE =====================*/


/*---lightMode Button---*/

.mode-button {
    display: flex;
    flex-direction: row-reverse;
    opacity: 50%;
    padding: 5px;
}


/*================== Q BET =====================*/


/*---QBET---*/

.inputfield {
    align-items: center;
    justify-content: center;
    display: flex;
    height: auto;
    padding: 10px;
}

.inputfieldbottom {
    align-items: center;
    justify-content: center;
    display: flex;
    height: auto;
    padding: 0 10px 10px 10px;
}

.inputfield span {
    margin-right: 15px;
}

.inputfieldbottom span {
    margin-right: 15px;
}

.inputfield img {
    height: 15px;
    width: 15;
    margin-right: 5px;
}

.headSc span {
    margin: 5px;
}

.searchTermvar {
    height: 90%;
    width: 70%;
    border: 3px solid var(--input-field);
    padding: 5px;
    height: 40px;
    border-radius: 5px;
    background-color: var(--input-field);
    color: var(--text-color-grey);
    margin: 0 0 0 auto;
}

.searchTermvar::placeholder {
    font-size: 12px;
    color: var(--text-color-grey);
}


/*---Codice evento VAR---*/

.accent-light {
    background-color: var(--container-accent-light);
    color: var(--text-color-hilight);
}

.search-cont {
    border-radius: 3px;
}

.searchcode {
    height: 2.5rem;
    width: 100%;
    border: 3px solid var(--input-field-light);
    padding: 5px;
    border-radius: 5px;
    background-color: var(--input-field-light);
    color: var(--input-field-light-text);
    margin: 0 0 0 auto;
}

.searchcode::placeholder {
    font-size: 12px;
    color: var(--input-field-light-text);
}


/*==================== SCHEDINA ============================*/

.comb-sched {
    font-size: 0.95rem;
    font-weight: 300;
}

.icon-schedina {
    font-size: 1.6rem;
    color: var(--text-color-hilight);
}

.icon-schedina-active {
    font-size: 1.6rem;
    color: var(--text-color-on-accent);
}

.head-orangebar {
    position: relative;
    border-radius: 3px;
}

.schedina {
    min-height: 6rem;
    height: auto;
    padding: 10px;
}

.schedina-v {
    min-height: 6rem;
    height: auto;
}

.num-eventi {
    text-align: center;
    margin-left: 2.5rem;
    min-width: 1.7rem;
    color: var(--text-color-grey);
    background-color: var(--container-background);
    padding: 1.5px;
    border-radius: 3px;
}

.cont-punt {
    background-color: var(--container-accent);
    font-size: 0.90rem;
    border-bottom: 1px solid var(--container-background);
}

.cont-punt-v {
    font-size: 0.90rem;
    border-bottom: 1px solid var(--text-color-grey);
}

.quota-middle-v {
    border-top: 0.5px solid var(--text-color-grey);
}

.event-schedina-v {
    color: var(--text-color-hilight);
    font-size: 0.95rem;
    font-weight: 500;
}

.quote-schedina-v {
    color: var(--accent);
}

.quote-schedina-e {
    font-weight: 500;
    color: var(--background);
}

.event-schedina {
    color: var(--text-color-hilight);
}

.quote-schedina {
    color: var(--accent);
    font-weight: 600;
}

.cont-punt-v .material-icons {
    color: var(--text-color-grey);
    font-size: 1.2rem;
}

.cont-punt-v .material-icons:hover {
    color: var(--text-color-hilight);
    cursor: pointer;
}

.cont-punt .material-icons {
    color: var(--text-color-grey);
    font-size: 1.5rem;
}

.cont-punt .material-icons:hover {
    color: var(--text-color-hilight);
    cursor: pointer;
}

.importfield {
    border: 1px solid var(--accent);
    border-radius: 5px;
}

.cont-punt .btn-outline-light {
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #f8f9fa;
    order-radius: var(--bs-btn-border-radius);
}

.schedina .form-check-input {
    --bs-form-check-bg: var(--text-color-grey);
}

.schedina .form-check-input:focus {
    border-color: none;
    outline: 0;
    box-shadow: none;
}

.hilight-combinazioni {
    color: var(--text-color-hilight);
    font-weight: 500;
}

.hilight-combinazioni-accent {
    font-size: 0.95rem;
    color: var(--accent);
    font-weight: 500;
}

.combinazioni-svuota {
    color: var(--text-color-grey);
    font-weight: 400;
}

.combinazioni-svuota:hover {
    cursor: pointer;
    color: var(--text-color-hilight);
    text-decoration: underline;
}

.F-Icon {
    font-size: 0.7rem;
    color: var(--text-color-grey);
    border: 1px solid var(--text-color-grey);
    border-radius: 5px;
}

.F-Icon:hover {
    font-weight: 500;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--text-color-hilight);
    border: 1px solid var(--text-color-hilight);
}

.btn-accent-text {
    --bs-btn-color: var(--text-color-hilight);
}

.dettaglio-combinazioni-top {
    color: var(--text-color-hilight);
    background-color: var(--container-accent);
    font-size: 0.90xrem;
    border-top: 3px solid var(--accent);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-weight: 600;
}

.dettaglio-schedina {
    color: var(--text-color-hilight);
    background-color: var(--container-accent);
    font-size: 0.90xrem;
    font-weight: 400;
    border-bottom: 1.5px solid var(--container-background);
}

.schedina .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--accent);
    background-color: var(--container-accent);
    background-clip: padding-box;
    border: var(--bs-border-width);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.schedina .form-control:focus {
    color: var(--accent);
    background-color: var(--container-accent);
    border-color: var(--accent);
    outline: 0;
    box-shadow: none;
}

.schedina-v .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--accent);
    background-color: var(--container-accent);
    background-clip: padding-box;
    border: var(--bs-border-width);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.schedina-v .form-control:focus {
    color: var(--accent);
    background-color: var(--container-accent);
    border-color: var(--accent);
    outline: 0;
    box-shadow: none;
}

.btn-schedina {
    --bs-btn-color: var(--text-color-grey);
    --bs-btn-bg: var(--container-accent);
    --bs-btn-border-color: none;
    --bs-btn-hover-color: var(--text-color-hilight);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--text-color-hilight);
    --bs-btn-active-bg: var(--container-background);
    --bs-btn-active-border-color: none;
    --bs-btn-active-shadow: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.btn-schedina:checked {
    --bs-btn-color: var(--text-color-grey);
    --bs-btn-bg: var(--container-accent);
    --bs-btn-border-color: none;
    --bs-btn-hover-color: var(--text-color-hilight);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--text-color-hilight);
    --bs-btn-active-bg: var(--container-background);
    --bs-btn-active-border-color: none;
    --bs-btn-active-shadow: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}


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


/*====================PAGINA SERIE A============================*/


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


/*--nav Serie A--*/

#datatableCampionato .nav-fill .nav-item,
.nav-fill>.nav-link {
    flex: auto;
}

#datatableCampionato .nav .nav-link {
    --bs-nav-link-padding-x: none;
}

#datatableCampionato-quote .nav .nav-link {
    --bs-nav-link-padding-y: none;
}

#datatableCampionato .btn-sport {
    height: 28px;
    width: 5rem;
}

#datatableCampionato-quote .btn-sport {
    max-width: 7.8rem;
    height: 1.5rem;
}

#datatableCampionato .nav-link {
    padding: 5px;
}

.navseparator {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    margin: 5px 0;
    background-color: var(--accent);
}


/*---Per variazioni---*/

.accent {
    background-color: var(--accent);
}


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


/*====================PAGINA TUTTE QUOTE============================*/


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

.ttquote-raw-mob {
    display: flex;
    padding: 0;
    width: 100%;
    height: 3rem;
    border-radius: 3px;
    margin-bottom: 0.08rem;
    overflow: visible!important;
    color: var(--text-event-list);
    background-color: var(--container-background-mob);
    border-bottom: 2px solid var(--accent);
}

.divserie {
    background: var(--container-background);
    min-height: 30px;
    margin: 10px 0;
    border-radius: 3px;
    /* outline: 10px solid var(--background); */
}

.modalserie-raw {
    border-top: 2px solid var(--background-nav);
}

.modalfix {
    max-height: 20rem;
}


/*---header nome campionato---*/

.flag-serie-container-mob {
    display: flex;
    align-items: center;
    color: var(--text-color-hilight);
    font-weight: 600;
    font-size: 1.02rem;
}

.flag-circle-mob {
    width: 20px;
    font-size: 20px;
    overflow: hidden;
}

.titolo-quota {
    font-weight: 500;
    font-size: 1rem;
}

#datatableCampionato-quote .btn-sport {
    width: 7.5rem;
}

.tuttequote .divcont {
    background: none;
}

.headercampionato {
    height: 38px;
}

.columnfield {
    align-items: center;
    justify-content: space-between;
    height: auto;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    display: flex;
    flex-wrap: wrap;
}

.columnfield .container-button {
    justify-content: flex-end;
    float: right;
}

    .columnfield span {
        margin-top: 7px;
        margin-bottom: 7px;
        word-wrap: break-word; /* Compatibilità con vecchi browser */
        overflow-wrap: break-word; /* Proprietà moderna */
        word-break: break-all;
    }
    .columnfield .singolaquota {
        margin: 7px;
    }
.container-quote {
    height: 100%;
    float: left;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.columnfield .col {
    padding: 5px 0;
    border-right: 1px solid var(--background);
}

.columnfield .col {
    flex: 1 0 30%; /* Ogni col div occuperà circa un terzo della larghezza */
    padding: 5px; /* Margine tra i div */
    max-width: 50%; /* Imposta la larghezza massima dei div */
    box-sizing: border-box; /* Assicura che padding e border non aumentino la larghezza del div */
}

.columnfield .col_quote_antepost {
    flex: 1 0 100%;
    padding: 5px;
    max-width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid goldenrod;
    width: 100% !important;
    margin-bottom: 0px;
}

.columnfield .list-row {
    padding: 0px;
    border-bottom: 0px;
}

.columnfield .active {
    background-color: var(--accent);
    color: var(--text-color-on-accent);
}

.columnfield .active span {
    background-color: var(--accent);
    color: var(--text-color-on-accent);
}

    .columnfield .active .singolaquota {
        background-color: var(--accent);
        color: var(--text-color-on-accent);
    }


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


/*====================PAGINA LIVE OVERVIEW============================*/


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


/* mobile */

.live-raw-mob {
    display: flex;
    padding: 0;
    border-radius: 3px;
    margin-bottom: 0.08rem;
    overflow: visible!important;
    color: var(--text-event-list);
    background-color: var(--container-background-mob);
    border-bottom: 2px solid var(--accent);
}

.live-flag-circle-mob {
    width: 13px;
    font-size: 13px;
    overflow: hidden;
}

.live-match-title {
    font-size: 12px;
    font-weight: 600;
}

.sfondo-sport-live {
    background-color: var(--background);
}

.live-sport-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
}

.columnfield-live {
    align-items: center;
    display: flex;
    justify-content: space-between;
    height: auto;
}

.columnfield-live .col-6 {
    border-right: 1px solid var(--background);
    height: 100%;
    background-color: var(--container-background-mob);
}
    .columnfield-live .col-7 {
        border-right: 1px solid var(--background);
        height: 100%;
        background-color: var(--container-background-mob);
    }

.columnfield-live .col {
    border-right: 1px solid var(--background);
}

.outcome-val-live {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color-hilight);
    height: 62px;
}

.nome-live {
    font-weight: 600;
}

.nome-live a {
    color: var(--text-color-hilight);
}

.punteggio-live {
    color: var(--accent);
}

.live-pref-icon {
    font-size: 1.4rem;
}

.live-icon {
    font-size: 1.7rem;
    color: var(--accent);
}

.live-pref-icon:hover {
    color: var(--accent);
}

.live-circle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent2);
    margin: auto;
}

.live-info {
    font-size: 0.9rem;
    color: var(--text-color-grey);
    font-weight: 500;
}

.sub-menu {
    color: var(--text-color-grey)!important;
}

.nav-pills .nav-link li .active,
.nav-pills .show>.nav-link {
    color: var(--text-color-on-accent)!important;
    background-color: var(--accent)!important;
}



.odds_up {
    border-bottom: 2px solid green !important;
}

.odds_down {
    border-bottom: 2px solid red !important;
}

.andamento-positivo {
    background-color: rgb(0, 255, 140); /* Colore verde */
    box-shadow: 0 0 20px rgba(0, 255, 140, 0.8); /* Effetto ombra luminosa verde */
    transition: background-color 1s, box-shadow 1s; /* Durata della transizione: 1 secondo */
}

.andamento-negativo {
    background-color: rgb(255, 0, 0); /* Colore rosso */
    box-shadow: 0 0 20px rgba(0, 255, 140, 0.8); /* Effetto ombra luminosa verde */
    transition: background-color 1s, box-shadow 1s; /* Durata della transizione: 1 secondo */
}


/*---Menu Overview - Eventview ---*/

.live .navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: none;
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

.live-background {
    background-color: var(--background-live-event)!important;
}

.bottom-border {
    border-bottom: 0.3px solid var(--text-color-grey);
}

.live-nav a {
    color: var(--text-color-grey);
    font-weight: 400;
    font-size: medium;
}

.live-nav.active a {
    color: var(--accent);
    font-weight: 500;
    font-size: medium;
}

.live-nav a:hover {
    color: var(--accent);
}

.live-nav a:active {
    font-weight: 500;
    color: var(--accent);
}


/*---Layout evento---*/

.top-eventlive {
    padding: 0.5rem;
    border-radius: 3px;
}

.top-quote-desc {
    font-weight: 600;
    color: var(--background);
}

.livefield {
    align-items: center;
    display: flex;
    justify-content: space-between;
    height: auto;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.head-eventlive {
    display: flex;
    border-bottom: 1.5px solid var(--accent);
    align-items: center;
}

.field-border {
    border-right: 2px solid var(--background);
}

.livefield .punteggi .col {
    padding: 5px 0;
}

.livefield .list-row {
    padding: 0px;
    border-bottom: 0px;
}

.short-col {
    width: 4%;
}

.wide-col {
    width: 71%;
}

.livefield .container-fluid:hover {
    background-color: var(--container-accent);
}

.eventview-link {
    color: var(--text-color-hilight);
}

.eventview-link:hover {
    color: white;
}


/*---Contenuto evento---*/

.match-time {
    color: var(--text-color-grey);
    font-size: 0.7rem;
}

.homeresult {
    color: var(--accent);
    border-left: 2px solid var(--background);
}

.match-quote {
    justify-content: flex-end;
}


/*---Dettagli risultati e quote evento---*/

.col-border {
    border-left: inset;
    border-left: 1px solid var(--accent);
}

.quote-head-row {
    background-color: var(--container-accent);
    color: var(--accent);
    font-weight: 600;
}

.live-event .col-4:hover {
    cursor: pointer;
    /*=background-color: var(--accent);-*/
}

.live-event .col-6:hover {
    cursor: pointer;
    /*=background-color: var(--accent);-*/
}

.outcome-live-button {
    font-size: 0.8rem;
    font-weight: 700;
    background-color: var(--liveview-btn);
    width: 100%;
    padding: 0.5rem;
    border-radius: 2px;
    text-align: center;
    color: var(--text-color-hilight);
}

.outcome-live-button:hover {
    background-color: var(--accent) !important;
    color: var(--text-color-hilight) !important;
}


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


/*====================PAGINA EVENTVIEW============================*/


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


/*---Menu Overview - Eventview ---*/

.eventview .navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: none;
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}


/* dimensione video  */

.tracker-fit {
    width: 100%;
}


/* BOTTONI SELEZIONE TRACKER */

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--text-color-on-accent);
    background-color: var(--background-nav-ter);
    border-bottom: 2px solid var(--accent);
}


/*---Container Imamagine Punteggio---*/

.punt-cont {
    background-image: url(Soccerbg.png);
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    border: 1px solid var(--accent);
}

.punt-cont-info {
    background-color: var(--container-background-trasp);
    border-radius: 3px;
    min-height: 10rem;
}

.punt-cont-info-head {
    background-color: var(--container-accent);
    color: var(--text-color-hilight);
    font-weight: 500;
    border-radius: 3px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    opacity: 1;
}

.hotbet-cont img {
    width: 20%;
}

.container-event-punteggio {
    background: var(--accent);
    color: var(--background);
    border-radius: 5px;
    font-size: 2.2rem;
    font-weight: 550;
}

.container-minuti {
    color: var(--text-color-hilight);
    border-radius: 3px;
    border: 1px solid var(--accent);
    font-weight: 500;
    font-size: 1.1rem;
}


/*---EventView Cascata---*/

#accordionPanelsSoccer {
    z-index: 3;
}

.accordion-item {
    border: none;
    background-color: var(--background);
}

.event-accordition {
    color: var(--text-color-grey);
    background-color: var(--container-background);
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.event-accordition:not(.collapsed) {
    color: var(--text-color-hilight);
    background-color: var(--container-background);
    box-shadow: none;
}

.event-accordition:focus {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.accordion-event-div {
    background-color: var(--container-accent);
    margin-top: 5px;
    border-radius: 3px;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}


/*Contenuto Eventview label */

.cont-flex {
    display: flex;
}

.event-raw-btn {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    margin-bottom: 1px;
    cursor: pointer;
    color: var(--text-color-grey);
}

.event-raw {
    color: var(--text-color-grey);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1px;
    cursor: pointer;
    min-height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 1.4166666667rem;
}

.active-event {
    background-color: var(--accent);
}

.icon-sport-flag {
    float: left;
    width: 20px;
    margin-right: 0.3rem;
}

.eventnamelable-accent {
    color: var(--text-color-hilight);
}

.eventnamelabel {
    float: left;
    ;
    text-align: left;
    font-size: 12px !important;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.punteggio {
    border-radius: 3px;
    border: 0.5px solid var(--text-color-grey);
}

.hilight {
    color: var(--text-color-hilight);
}

.unactive {
    color: var(--container-background);
}

.unactive:hover {
    color: var(--text-color-hilight);
}

.unactive:active {
    color: var(--text-color-hilight);
}

.accordion-event-div .active {
    background-color: var(--accent)!important;
}


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


/*==========================PAGINA CASINO============================*/


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


/*---carosello---*/

#carouselCasino .carousel-item {
    max-height: 250px;
    border-radius: 5px;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 20px;
    height: 5px;
    padding: 0;
    margin-right: 7px;
    margin-left: 7px;
    text-indent: -999px;
    cursor: pointer;
    background-color: var(--accent);
    background-clip: padding-box;
    border-radius: 3px;
    opacity: .5;
    transition: opacity .6s ease;
}

.carousel-indicators .active {
    opacity: 1;
}


/*---jackpot row---*/

.jackpot-card-bronze {
    height: 7rem;
    position: relative;
    background: center/80% url(../za_Assets/Images/jackpot00_bronze.png) no-repeat !important;
}

.jackpot-card-silver {
    height: 7rem;
    position: relative;
    background: center/80% url(../za_Assets/Images/jackpot01_silver.png) no-repeat !important;
}

.jackpot-card-gold {
    height: 7rem;
    position: relative;
    background: center/80% url(../za_Assets/Images/jackpot02_gold.png) no-repeat !important;
}

.jackpot-card-platinum {
    height: 7rem;
    position: relative;
    background: center/80% url(../za_Assets/Images/jackpot03_platinum.png) no-repeat !important;
}

.jackpot-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color-hilight);
    font-family: 'Gloock', serif;
    text-shadow: #FC0 1px 0 10px;
}


/*---navbar-casino---*/

.nav-slide {
    border-radius: 3px;
    background-color: var(--container-accent);
    /*--border-bottom: 3px solid var(--accent);--*/
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.nav-slide .nav-link {
    font-weight: 420;
    font-size: 1.1rem;
    color: var(--text-color-grey);
    white-space: nowrap;
}

.nav-slide .nav-link:hover {
    cursor: pointer;
}

.nav-slide .active {
    color: var(--accent)!important;
}

.slide-icon {
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
}

.slide-navlink {
    margin-top: 3px;
    border-right: 1.1px solid var(--background);
    height: 1.8rem;
}

.nav-slide .nav::-webkit-scrollbar-track {
    display: none;
    background-color: var(--background);
}

.nav-slide .nav::-webkit-scrollbar {
    height: 3px;
    width: 3px;
    background-color: var(--container-accent);
}

.nav-slide .nav::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    width: 3px;
    height: 3px;
    border-radius: 10px;
    box-shadow: inset 0 0 3px gray;
}

.nav-slide .nav::-webkit-scrollbar-track {
    display: none;
}


/*---sidebar---*/

.casino-sidebar {
    color: var(--text-color-hilight);
    MAX-height: 500px;
    border-radius: 3px;
    overflow-y: scroll;
    text-overflow: ellipsis;
}

.container-games {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: var(--container-accent);
    overflow-y: scroll;
    max-height: 300px;
    border-radius: 5px;
}

.container-games ul {
    margin-bottom: 17px;
}

.container-games li:hover {
    cursor: pointer;
    color: var(--accent);
}

.casino-sidebar ul::-webkit-scrollbar-track {
    display: none;
}

.casino-sidebar ul::-webkit-scrollbar {
    height: 3px;
    width: 3px;
    background-color: transparent;
}

.casino-sidebar ul::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    width: 3px;
    height: 3px;
    border-radius: 10px;
    box-shadow: inset 0 0 3px gray;
}

.casino-sidebar ul::-webkit-scrollbar-track {
    display: none;
}


/*---card-c-c---*/

.card-c {
    aspect-ratio: 1/1;
    position: relative;
    width: 100%;
    /* Altezza pari al doppio della larghezza */
    overflow: visible;
    transition: all 0.5s ease;
}

.card-c:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.card-c img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.25s ease;
    z-index: 0;
    /* Livello inferiore rispetto al contenuto */
}

.card-c-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Aggiunta di questa proprietà */
}

.card-c-content {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 85%, rgba(0, 0, 0, 0.47524947478991597) 100%);
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    /* Sfondo trasparente */
    transition: all 0.5s ease;
    z-index: 1;
    margin-top: 10px;
}

.card-c:hover .card-c-content {
    background-color: rgba(30, 30, 30, 0.8);
}

.card-c-content h3 {
    margin-top: 0;
}

.card-c-content p {
    z-index: 4;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: var(--accent);
    color: var(--text-color-hilight);
    cursor: pointer;
    transition: all 0.5s ease;
    z-index: 2;
    border-radius: 5px;
    font-weight: 500;
}

.card-c:hover .button {
    display: block;
}

.card-c:hover img {}

.card-badge {
    border-radius: 0px;
    position: absolute;
    top: 10px;
    left: -5px;
    padding: 0 5px;
    background-color: var(--accent);
    color: var(--text-color-on-accent)!important;
    color: white;
    z-index: 4;
    /* Livello superiore rispetto all'immagine */
}

.min-max-cont {
    background-color: var(--container-accent);
    color: var(--text-color-hilight);
    font-weight: 500;
    border-radius: 0px;
}

.like {
    color: var(--text-color-hilight);
    font-weight: 500;
    font-size: 1.1rem;
}

.like-icon {
    font-size: 1.2rem;
}

.like-icon:hover {
    color: var(--accent);
    cursor: pointer;
}


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


/*==========================UTILITY============================*/


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

.text-on-accent {
    color: var(--text-color-on-accent)!important;
}


.text-on-accent-chiaro {
    color: var(--text-color-hilight) !important;
}



.table-main {
    color: var(--text-color-hilight) !important;
    --bs-table-striped-color: var(--text-color-hilight) !important;
}


.sport-icon {
    filter: var(--icon-color) drop-shadow(0 0 2px rgba(255,255,255,0.2));
    transition: filter 0.3s ease;
    width: 22px;
    height: 22px;
}

.sport-icon-contrast {
    filter: var(--icon-color-contrast) drop-shadow(0 0 2px rgba(255,255,255,0.2));
    transition: filter 0.3s ease;
    width: 22px;
    height: 22px;
}
.golf-live-row {
    flex-wrap: wrap;
}

.golf-live-row > .col-6,
.golf-live-row > .columnfield {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.golf-live-row > .col-6 {
    border-right: 0;
}

.golf-live-odds {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 0.45rem;
}

.golf-live-odds-label {
    margin-bottom: 0.25rem;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.golf-live-odds-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.25rem;
    gap: 0.25rem;
    width: 100%;
}

.golf-odds-select {
    min-width: 0;
    font-size: 0.78rem;
}

.golf-odds-bet-button {
    min-width: 4.25rem;
    padding: 0.35rem;
}

.golf-odds-bet-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}