@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');

body{
     background-color: #efefef;
     /*background-color: #282e38;*/
     font-family: 'Roboto' ,sans-serif;
     color: #333;
     /*background: url("/assets/fom.png");*/

}

._container{
    max-width: 1680px;
    margin: 0 auto;
}
p{
    margin-bottom: 0;
}

button:hover{
    background:grey!Important;

}
button{
    border-radius:5px!Important;
}

.points .plotly-customdata{
    opacity:1!Important;
}
.overplot .xy3 .points{

}
/*.points .plotly-customdata:nth-child(1){*/
/*    fill: rgb(225 255 255)!Important;*/
/*    stroke: #646464!Important;*/
/*    stroke-width: 3px!Important;*/
/*}*/


.btn{
    font-size:12px;
    display: inline-block;
    background: #dedede;
    /* color:#e0e0e0; */
    text-align: center;
    padding: 5px 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    border:2px solid #e0e0e0;
}

.btn-active{
    font-size:12px;
    display: inline-block;
    background: #565656;
    color:#fff;
    text-align: center;
    padding: 5px 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    border:2px solid #e0e0e0;
    vertical-align: top;
}


.active{
 background: #565656!Important;
 border:2px solid #bebebe;
 box-shadow:none!Important;
 color:rgb(255, 255, 255);
}

/* hide arrow on barcharts(like hoverinfo) */
.nsewdrag, .drag{
    /*display:none;*/
}


#YearSelector,
#YearSelector-mobile{
    display:flex;
    flex-wrap:nowrap;
    border-radius: 16.8px;
    background-color: #f3f2f2;
}
@media (max-width: 450px) {
    #YearSelector{
        background-color: transparent!important;
    }
}



.dash-filter input[type='text']{
    text-align:left!Important;;
}
#YearSelector input[type='radio'],
#YearSelector-mobile input[type='radio']{
    display:none;
}

.form-check{
    padding-left:0;
    margin-bottom:0;
}
.form-check-inline{
    margin-right:0;
}
#YearSelector label,
#YearSelector-mobile label{
    position:relative;
    padding: 7px 17px 8px 15px;
    border-radius: 16.8px;
    background-color: #f3f2f2;
    min-width:105px;
    font-family: 'Roboto';
    font-size: 10.9px;
    font-weight: 600;
    color: #313844;
    text-align:center;
    user-select:none;
    cursor:pointer;
}


.year__selector-mobile{
    display:none;
}

.indicatorlayer .trace {


}

#ringle{
  width: 767px;
  height: 740px;
  background-color: #cee1f2;
  position:absolute;
  top:-180px;
  left:-240px;
  z-index:-2;
  border-radius:50%;

}
.date-group-labels-checked{
    background-color: #0D4667;
    font-weight:bold;
}

.column-actions{
    margin-right:5px;
}




.xtick text{
    display:inline-flex!Important;
}

.crisp{
 display:inline-flex!Important;
}



@media (max-width: 1000px) {
        #_dash-app-content{
            flex-direction:column;
        }

 }

.app__header h1{
    font-size: 42px;
    font-weight: bold;
    margin: 0 0 0 0;
}

 @media screen and (max-width: 900px) {
  .app__wrapper{
    flex-direction:column;
  }
  #YearSelector label,
  #YearSelector-mobile label{
  min-width: 70px;
  }
  .header__text{
    width:100%!Important;
    font-family: 'Roboto';
  }
  .footer{
    flex-direction:column!Important;
    align-items:center;
    width:100%;
  }
  .footer p{
    margin:10px 0!Important;
    text-align:center;

  }

  .app__label{
      font-size: 16px;
  }

  label{
    min-width:0;
  }

}

.rc-slider-handle{
    border: solid 2px #0D4667;
}

.rc-slider-handle:hover{
    border-color: #0D4667;
}

.rc-slider-dot-active{
    border-color: #0D4667;
}

.rc-slider-track-1{
    background-color: #0D4667;
}

.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{
    border-color: #0D4667;
    box-shadow: 0 0 0 5px #0e6394;
}


.dash-filter--case--sensitive{
    display:none;
}

.square__block{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.square {
    width:150px;
    height:150px;
    display: flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items:center;
    padding: 16px 20px 21px 20px;
    border-radius: 15px;
    background-color: #313844;
    color:#f7f7f7;
}
@media (max-width: 450px) {
    .square {
        width:100px;
        height:100px;
        padding: 10px 12px;

    }
    .square .title{
        margin-bottom: 10px!important;
        font-size: 12px;
        min-height: 30px;
    }
    .indicator{
        font-size: 28px!important;

    }
    #most_killed-mobile .indicator{
        font-size: 18px!important;
    }
}

.pearson_team{
    font-size: 12px;
    color: #757575;
    margin-bottom: 0;
}

.pearson_team_add{
    font-size: 14px;
    color: #757575;
    margin-bottom: 0;
    margin-left:10px;
}

.name_team{
    font-size: 14px;
    font-weight:bold;
    color: #f7f7f7;
    margin-bottom: 0;
}

.indicator{
    line-height: 1.1;
    letter-spacing: -0.81px;
    color: #f99746;
    font-family: 'Roboto Slab';
    font-size: 42px;
    font-weight: bold;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}
.title{
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 600;
    color: #f7f7f7;
    text-align: center;
    margin-bottom: 5px;
}
.rectangle{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 16px 31px 21px 36px;
    border-radius: 15px;
    background-color: #313844;
    margin-bottom: 20px;
}
.vrectangle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 10px 10px 10px;
    border-radius: 15px;
    color: #313844;
    margin-bottom: 20px;
}

@media (max-width: 450px) {
    .vrectangle{
       padding: 8px 10px;
    }
    #YearSelector label,
    #YearSelector-mobile label{
        min-width: 55px;
    }
    #spider_layout .spider_plot{
       flex-basis: 100%!important;
    }
    .year__selector-mobile{
        display:block;
    }
    .year__selector-desktop{
        display:none;
    }
}

.relative{
    position: relative;
}


.link{
    font-family: 'Roboto';
    font-size: 12px;
    margin-right: 10px;
    text-decoration: none;
    color: #f24236;

}

.main-svg{
    background:none!Important
}

.bg{
  fill:transparent!Important;
}
.Select-control{
    background-color: transparent!Important;
    border: 1px solid #f7f7f7!Important;
}
.Select--multi  .Select-value-label{
    color: #f7f7f7!Important;
    border: 1px solid #f7f7f7!Important;
}
.Select--multi .Select-value{
    margin-bottom:5px;
    background-color:#757575!Important;
}
.Select--multi .Select-value-icon{
    border: 1px solid #f7f7f7!Important;
    color: #f7f7f7!Important;
}

.Select-value-label{
    color: #f7f7f7!Important;
}

.plotbg path{
    fill:transparent!Important;
}

.radial-grid .xgrid{
    stroke:rgb(117,117,117)!Important;
    stroke-width:2px!Important;
}
.angular-line path{
    stroke:transparent!Important;
}

.angularaxisgrid,
.radial-line line{
    stroke:transparent!Important;
}

.angularaxistick text{
    fill:rgb(117,117,117)!Important;
    font-weight:bold;
}

.gtitle{
    font-weight: bold!Important;
}

.radial-axis .xtick:last-child{
    display:none;
}

#referee-statistic .ytick text,
#player_referee_heatmap .ytick text,
#player_referee_heatmap .xtick text{
    fill:#fff!Important;
}

#TypeRefereeChart input{
    margin-right:5px!Important;
}

.polar .radial-axis{
    display: none;
}
.spider_plot{
    min-width: 250px;
}
@media (max-width:600px){
    .spider_plot{
        width:100%;
        min-width: auto;
    }


}
.Select-menu-outer{
    background-color: #282e38;
    color:#fff;
}

.flex-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
    flex-basis: 33.33%;
}
.input_style{
    background-color:  #282e38;
    color:#fff;
    width: 50px;
    text-align: center;
}

.button_style{
    background: transparent;
    color: #fff;
    border-style: solid;
    padding: 5px 15px;
    width: 200px;
    margin: 10px 0;
}

._container{
    padding: 20px 15%;
}

.generate_button{
    background-color: white;
    border-radius: 6px;
    padding: 5px 20px;
    text-transform: uppercase;
    transition:all ease 0.3ms;
    border-style: none;
    font-weight: 500;
    font-size: 12px;
    margin: 20px 0 10px 0;

}


.app__wrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 2%;
}

.app__content{
    width: 100%;
    min-height: 400px;
    margin-bottom: 10px;
    margin-top: 20px;

}

.app__footer{
    width: 100%;
    border-top:1px solid #dedede;
    margin-top: 10px;
    font-size: 15px;
}

.app__footer .data_links{
    display: flex;
    align-items: center;
    gap: 10px;
}
.app__footer .data_links p{
    white-space: nowrap;
}


.dash-debug-menu__outer, .dash-debug-menu {
    display: none !important;
}


.checklist,
.role-checklist
{
    /*display:flex;*/
    /*align-items: center;*/
    font-size: 14px;
    /*gap: 10px;*/

}

.checklist label,
.role-checklist label{
    margin-right: 10px;
    display: inline-flex!important;
    align-items: center;
    line-height: 1;

}

#TypeRefereeChart input,
.checklist label input{
     width: 22px;
     height:22px;
     margin-right: 10px;
}

#TypeRefereeChart input[type="checkbox"]:checked,
.checklist input[type="checkbox"]:checked {
    accent-color: #f24236;
}

#TypeRefereeChart{

}

.checklist_label span:first-of-type{
    font-size: 9px;
    opacity: 0.5;
    margin-bottom: -5px;
}

#TypeRefereeChart label{
    display: flex;
    align-items: center;
}

.checklist_label{
    display: flex;
    align-items: center;
    flex-direction: column;
}

 .players_list,
 .timeline_list{
     justify-content: center;
 }

.players_list{
     min-width: 1200px;
}



/*############ KC ###############*/
.app__tile{
    padding: 10px 12px;
    border: 2px solid #dedede;
    height: auto;
}

.tile__title{
    font-size: 16px;
    opacity: 0.7;

}

.tile__value{
    font-size: 34px;
    font-weight: 600;
}

/*========= WINRATE ==========*/

.container{
    width: 100%;
    padding-left: 0;

}
.progress-container{
    position: relative;
    height: 22px;
    background-color: #e5e7eb;
    border-radius: 24px;
    overflow: hidden;
}
.progress-bar{
    position: absolute;
    height: 100%;
    background-color: #ef4444;
    /*border-radius: 24px;*/
    transition: width 0.5s ease-out;
}
.labels{
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
}

.legend {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

#shooting_target .plot-container,
#circular-layout .plot-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.checklist label input{
     width: 22px;
     height:22px;
     margin-right: 10px;
}

.role-checklist label input{
     width: 14px;
     height:14px;
     margin-right: 5px;
}

.checklist input[type="checkbox"]:checked {
    accent-color: #f24236;;
}

.role-checklist label:nth-of-type(1) input[type="checkbox"]:checked {
    accent-color: #f24236;
}

.role-checklist label:nth-of-type(2) input[type="checkbox"]:checked {
    accent-color: #295883;
}

.role-checklist label:nth-of-type(3) input[type="checkbox"]:checked {
    accent-color: #efbf00;
}

.role-checklist label:nth-of-type(4) input[type="checkbox"]:checked {
    accent-color: #cbe5f3;
}

.tooltip-timeline {
    /*max-width: 300px !important;*/
    /*background-color: #ffffff !important;*/
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    --bs-tooltip-bg: #f3f6f4;
    --bs-tooltip-color: #1C2321;
    --bs-tooltip-max-width: 270px;
    --bs-tooltip-opacity:1;
    --bs-tooltip-font-size: 0.75rem;
    --bs-tooltip-padding-x: 1rem;
    --bs-tooltip-padding-y: 1rem;
}

.tooltip_row{
    display: flex;
    align-items: center;
    justify-content: flex-start ;
}

.tooltip_rect_color{
    width: 12px;
    height: 12px;
    margin: 5px;
    border-radius: 50%;

}
.only_mobile{
    display: none;
}


.app__tile {
    background: white;
    border-radius: 8px;
    padding: 15px 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Убираем margin у последнего элемента в колонке */
.app__tile:last-child {
    margin-bottom: 0 !important;
}

/* Для контейнера Row */
.g-3.h-100 {
    min-height: 100%;
    margin: 0;
}

/* Для колонок */
.col-md-4 {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .mb-3 {
        margin-bottom: 1rem !important;
    }
}

.shooting_target{
    min-height: 300px;
}
.circular-tile{
    min-width: 375px;
}
.quadrant_tile{
   min-width: 180px;
}

.tab{
    border:none !important;
    padding: 10px 15px!important;
    white-space: nowrap;
}

.tab_style{
    background-color: #e5e5e5 !important;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    color: #7f7f7f;
    transition: all 0.1s, color 0.1s;
    white-space: nowrap;
    /*border-top-left-radius: 8px!important;*/

}

.tab-container{
    flex-direction: row!important;
}
.tab_style:hover{
    opacity: 0.8;
}

.active_tab{
     background-color: #fff!important;
     color: #000;
     /*border-top-left-radius: 5px!important;*/

}

#tabs-with-props .tab_style:nth-child(1){
    border-top-left-radius: 5px!important;
}
#tabs-with-props .tab_style:nth-child(2){
      border-top-right-radius: 5px!important;
}

#heatmap-role-selector label{
    margin-right:10px;
}

#heatmap-role-selector label input{
    margin-right:10px;
}

#heatmap-role-selector label input {
    margin-right:10px;
}

#heatmap-role-selector label input[type="radio"]:checked {
    accent-color: #f24236;
}