.hero-id-wrapper{align-items:center;gap:1rem;width:15.65rem;padding:.75rem .5rem .5rem 1rem;display:flex}.hero-id-wrapper .hero-image-wrapper{opacity:1;background-color:#e6e6e612;border-radius:.5rem;width:3.5rem;height:3.5rem;transition:opacity .25s ease-in;overflow:hidden}.hero-id-wrapper .hero-image-wrapper--hidden{opacity:0}.hero-id-wrapper .hero-text{flex-direction:column;font-family:Roboto;display:flex}.hero-id-wrapper .hero-text .hero-text-name{color:#dfdfdf;letter-spacing:.75px;font-size:1rem;font-weight:600}.hero-id-wrapper .hero-text .hero-role-section{color:#a8a8a8;opacity:1;align-items:center;gap:.25rem;font-size:.9rem;font-weight:300;transition:opacity .25s ease-in;display:flex}.hero-id-wrapper .hero-text .hero-role-section--hidden{opacity:0}.heroes-stats-header-row{background-color:#141414}.heroes-stats-header-row .heroes-stats-header-cell{text-align:left;letter-spacing:.5px;color:#bfa747;cursor:pointer;padding:.75rem 0;font-family:Rajdhani;font-size:1rem}.heroes-stats-header-row .heroes-stats-header-cell .hero-header-text{align-items:center;gap:.25rem;display:flex}.heroes-stats-header-row .hero-header{padding-left:1rem}.winrate-wrapper{font-weight:400}.high-winrate{color:#fbe9a1;font-weight:500}.low-winrate{color:#fcb7ad;font-weight:500}.highest-winrate{-webkit-text-fill-color:#0000;background-image:linear-gradient(#92400e,#fcdf6a,#b45309);-webkit-background-clip:text;background-clip:text;font-weight:700}.hero-stats-body-row{background-color:#2b2b2b;transition:all .125s ease-in}.hero-stats-body-row:hover{cursor:pointer;background-color:#3c3c3c}table{border-collapse:separate;border-spacing:0;border-radius:.75rem;width:100%;overflow:hidden}
.hero-table-filter-wrapper{gap:2rem;display:flex}@media (max-width:450px){.hero-table-filter-wrapper{flex-direction:column}}.hero-table-filter-wrapper .search-hero-input-section input:focus{border:none;outline:none}.hero-table-filter-wrapper .search-hero-input-section .search-hero-input{color:#fff;letter-spacing:.2px;background-color:#4b4b4b;border-radius:.25rem;width:15rem;padding:.5rem 1rem .5rem 1em;font-family:Roboto;font-size:1rem;transition:border 1s ease-in-out}@media (max-width:1080px){.hero-table-filter-wrapper .search-hero-input-section .search-hero-input{padding:.25rem 0 .25rem .5rem}}
.hero-role-filter-drop{position:relative}.hero-role-filter-drop .hero-role-dropdpown{z-index:1;cursor:pointer;background-color:#484848;border-radius:.25rem;outline:1px solid #ffffff5c;justify-content:center;align-items:center;gap:.25rem;width:15rem;height:2.4rem;font-family:Montserrat;font-size:.9rem;display:flex;position:relative}.hero-role-filter-drop .hero-role-dropdpown:hover{background-color:#545454}.hero-role-filter-drop .hero-role-dropdpown .role-selected{align-items:center;gap:.125rem;display:flex}.hero-role-filter-drop .hero-role-dropdpown .close-button{color:#888;cursor:pointer;border:1px solid #888;border-radius:10rem;padding:.2rem;position:absolute;right:1rem}.hero-role-filter-drop .hero-role-dropdown-list{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;height:0;margin-top:.05rem;transition:height .125s ease-in;position:absolute;left:.25rem;overflow:hidden}.hero-role-filter-drop .hero-role-dropdown-list--show{height:6rem}.hero-role-filter-drop .hero-role-dropdown-list .hero-role-dropdown-item{cursor:pointer;background-color:#555;justify-content:center;align-items:center;width:14.5rem;height:2rem;display:flex}.hero-role-filter-drop .hero-role-dropdown-list .hero-role-dropdown-item:hover{background-color:#9d9d9d}.hero-role-filter-drop .hero-role-dropdown-list .hero-role-dropdown-item .dropdown-text{justify-content:center;gap:.25rem;display:flex}.hero-role-filter-drop .hero-role-dropdown-list .dropdown-selected,.hero-role-filter-drop .hero-role-dropdown-list .dropdown-selected:hover{background-color:#7b7b7b}
.all-toggles-wrapper{position:relative}.all-toggles-wrapper .win-rate-toggle-title{letter-spacing:.25px;color:#fffffff0;gap:.5rem;width:10rem;font-family:Roboto;font-size:.9rem;display:flex;position:absolute;top:-1.75rem;left:-.85rem}
.toggle-button-wrapper{cursor:pointer;border:1px solid #ffffff5c;border-radius:3rem;align-items:center;width:5rem;height:2.25rem;padding-left:.25rem;display:flex}.toggle-button-wrapper .toggle-circle{cursor:pointer;background-color:#fffb;border-radius:100%;width:1.75rem;height:1.75rem;transition:transform .25s ease-in}.toggle-button-wrapper .toggle-circle-on{background-color:#fff;transform:translate(2.6rem);box-shadow:0 0 6px #fff}.toggle-button-switch-on{border:1px solid #ffffff8e;box-shadow:0 0 3px #fff}