.card{border-radius:5px;width:100%;min-width:300px;box-shadow:0 0 4px #999;background:#fff;summary{display:flex;align-items:center;gap:1rem;padding:.75rem;user-select:none;cursor:pointer}.content{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem;padding-top:0;font-size:.85rem}&:hover{box-shadow:0 0 5px #666}.avatar-container{position:relative;display:flex;height:50px;width:50px;overflow:clip}img.flag{border-radius:100%;height:20px;width:20px;object-fit:cover;object-position:top center;position:absolute;bottom:0;right:0}img.avatar{border-radius:100%;object-fit:cover;object-position:center;height:50px;width:50px;&:before{font-family:Monserrat,sans-serif;content:attr(alt);inset:0;background:var(--primary);color:#fff;display:flex;width:50px;height:50px;border-radius:100%;justify-content:center;align-items:center;font-size:3rem;text-transform:uppercase}}.discipline{display:flex;gap:2px;*{font-size:.7em;padding:1px 5px;border-radius:10px;background:var(--primary);color:#fff}}.table-container{width:100%;max-height:9em;overflow:auto;position:relative;overscroll-behavior:none}table{width:100%;font-size:.8rem;thead{position:sticky;top:0;background:#fff}td{text-align:center;vertical-align:middle}.author{white-space:nowrap;text-align:start;max-width:0;text-overflow:ellipsis;overflow:clip}}}.recording-backdrop{inset:0;position:fixed;backdrop-filter:blur(3px);background:#0003;display:flex;justify-content:center;align-items:center}.recording-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;background:#fff;padding:1em;border-radius:5px;box-shadow:0 0 5px #888;.athlete-name{font-family:Monserrat,sans-serif;font-size:1.5rem;color:var(--primary)}.controls{display:flex;justify-content:space-around;width:100%}button{display:flex;align-items:center;justify-content:center;gap:5px;width:fit-content;padding:5px;background:var(--primary);color:#fff;border-radius:5px;fill:#fff;height:2em;&[disabled]{pointer-events:none;background:#888!important}&.recording-btn,&.stop-btn{flex-direction:column;background:none;height:5rem;>.icon{height:1.5rem;width:1.5rem;padding:.5rem;border-radius:100%;border:solid 2px var(--red)}}&.recording-btn{fill:var(--red);color:var(--red)}&.stop-btn{color:var(--red);>.icon{background:var(--red)}}&.upload-btn{background:var(--green)}&.discard-btn{background:var(--red)}}}.player{display:flex;gap:5px;width:fit-content;margin:auto}button{display:flex;align-items:center;justify-content:center;gap:5px;width:fit-content;padding:5px;background:var(--primary);color:#fff;border-radius:5px;fill:#fff;height:2em;&[disabled]{pointer-events:none;background:#888!important}}#display-name.alert{border:solid 2px var(--red)}#display-name.success{border:solid 2px var(--green)}.rating-container{display:flex;width:fit-content;margin:auto;align-items:baseline;.rating{display:flex;width:1em;height:fit-content;padding:0;background:transparent;fill:var(--primary);.outline{fill:none;stroke:var(--primary);stroke-width:50px}}.n-ratings{padding-left:2px}}.my-rating-container{display:flex;gap:1rem;width:fit-content;margin:auto;button.thumbs{width:1.5rem;height:fit-content;padding:0;background:transparent;fill:var(--primary);opacity:.5;&.active{opacity:1}&.inactive{opacity:1;fill:var(--gold)}}}.delete-btn{background:var(--red);margin:auto}.search-container{display:flex;width:fit-content;align-items:center;position:relative;.icon{width:.8rem;fill:#0005;position:absolute;right:4px;transform:translateY(.07rem)}}.input-container{position:relative;margin:1rem 0}input[type=search]{--webkit-appearance: none;appearance:none;padding-right:1.25rem}label.floating{position:absolute;font-size:.7rem;top:-.6rem;left:.25rem;background:#fff;padding-inline:.125rem}.country-button{display:flex;gap:.25rem;background:#fff;color:#000;border:none;box-shadow:0 0 10px -5px #000;border-radius:5px;padding:.5rem;.flag{width:1rem;height:1rem;border-radius:100%}}#country-filter{display:flex;align-items:center;gap:.5rem;width:120%;justify-content:center;background:#fff;padding:.5rem;margin-bottom:1rem;box-shadow:0 0 5px #888;position:sticky;top:0;z-index:100;button{height:1.3rem;width:1.3rem;border-radius:100%;background:var(--red);fill:#fff;display:flex}}#footer{display:flex;padding:1rem;background:#fff;font-size:.8rem;justify-content:space-between;align-items:center;#copyright-container{display:flex;gap:.5rem;align-items:center}#links{#gh{display:flex;width:2rem;fill:var(--backdrop)}}}#logo{display:flex;height:2rem;width:2.65rem;.cls-1,.cls-2{fill:var(--backdrop)}.cls-1{opacity:.4}.cls-2,.cls-3{opacity:.6}.cls-3{fill:none;stroke:var(--backdrop);stroke-miterlimit:10;stroke-width:2px}}#discipline-filter{display:flex;gap:.5rem;.checkbox-container{display:flex;font-size:.9rem;label{background:#ccc;padding:0 .5rem;border-radius:12px;cursor:pointer;&.active{background:var(--primary);color:#fff}&:has(:focus){outline:solid 2px var(--primary);outline-offset:1px}input[type=checkbox]{position:absolute;height:0;width:0;&:focus{outline:none}}}}}#letter-filter{.wide{display:none}.narrow{display:block;select{appearance:none;font-size:2rem;font-family:inherit;font-weight:lighter;text-align:center;border-radius:100%;border:none;background:var(--primary);color:#fff;width:3rem;height:3rem;cursor:pointer;option{background:#fff;font-size:1rem;border:none;border-radius:0;box-shadow:0 0 5px #ccc;color:#000}}}}@media (min-width: 480px){#letter-filter{position:absolute;top:0;width:100%;.wide{display:flex!important;justify-content:space-between}.narrow{display:none!important}}.letter{width:100%;background:transparent;color:var(--primary);font-weight:400;text-transform:uppercase;position:relative;&.active{background:#fff;box-shadow:0 0 5px #666}&:has(:focus){outline:solid 2px;outline-offset:-2px}label{display:block;width:100%;cursor:pointer;&:hover{background:#00000018}}input{position:absolute;height:0;width:0;overflow:hidden;&:focus{outline:none}}}}#recording-filter{display:flex;min-width:fit-content;padding-block:.5rem;font-size:.9rem;label{background:#ccc;padding:0 .5rem;border-radius:12px;cursor:pointer;&.active{background:var(--primary);color:#fff}&:has(:focus){outline:solid 2px var(--primary);outline-offset:1px}input[type=checkbox]{position:absolute;height:0;width:0;&:focus{outline:none}}}}