@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

body{
     /*background-color: #f1f0f0;*/
     background-color: #282e38;
     font-family: 'Roboto';

}
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;
}

#YearSelector input[type='radio']:checked + label,
#YearSelector-mobile  input[type='radio']:checked + label{
   background-color: #f99746;
   color: #fff;
   z-index:100;
}

.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;
        }

 }

 @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;

  }

  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;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 16px 31px 21px 36px;
    border-radius: 15px;
    background-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: white;
}

.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;

}
.header__title { grid-area: header__title; }
.team_awards { grid-area: team_awards; }
.player_awards { grid-area: player_awards; }
.year_selector { grid-area: year_selector; }
.square__block { grid-area: square__block; }
.game_direction { grid-area: game_direction; }
.heatmap { grid-area: heatmap; }
.compare_teams { grid-area: compare_teams; }
.referee__block { grid-area: referee__block; }
.additional_awards { grid-area: additional_awards; }
.chart_area { grid-area: chart_area; }

.app__wrapper__grid {
  display: grid;
  grid-template-columns: 25% 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 0.2fr 0.5fr 0.5fr 0.6fr 1fr;
  gap: 20px 20px;
  grid-template-areas:
    "header__title year_selector year_selector year_selector year_selector year_selector"
    "header__title square__block square__block square__block square__block square__block"
    "team_awards chart_area chart_area chart_area chart_area chart_area"
    "player_awards chart_area chart_area chart_area chart_area chart_area"
    "additional_awards chart_area chart_area chart_area chart_area chart_area"
    "referee__block chart_area chart_area chart_area chart_area chart_area";
}

.chart_area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0px 0px;
  grid-template-areas:
    "game_direction game_direction game_direction"
    "heatmap heatmap heatmap"
    "tournament_seating tournament_seating tournament_seating"
    "compare_teams compare_teams compare_teams";
    "footer footer footer";
  grid-area: chart_area;
}

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


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

}

.checklist label{
   margin-right: 10px;
    display: inline-flex!important;
    align-items: center;

}

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

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

#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;
}