:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--ease-circ-in:cubic-bezier(.6,.04,.98,.335);--ease-circ-in-out:cubic-bezier(.785,.135,.15,.86);--ease-circ-out:cubic-bezier(.075,.82,.165,1);--ease-cubic-in:cubic-bezier(.55,.055,.675,.19);--ease-cubic-in-out:cubic-bezier(.645,.045,.355,1);--ease-cubic-out:cubic-bezier(.215,.61,.355,1);--ease-expo-in:cubic-bezier(.95,.05,.795,.035);--ease-expo-in-out:cubic-bezier(1,0,0,1);--ease-expo-out:cubic-bezier(.19,1,.22,1);--ease-quad-in:cubic-bezier(.55,.085,.68,.53);--ease-quad-in-out:cubic-bezier(.455,.03,.515,.955);--ease-quad-out:cubic-bezier(.25,.46,.45,.94);--ease-quart-in:cubic-bezier(.895,.03,.685,.22);--ease-quart-in-out:cubic-bezier(.77,0,.175,1);--ease-quart-out:cubic-bezier(.165,.84,.44,1);--ease-quint-in:cubic-bezier(.755,.05,.855,.06);--ease-quint-in-out:cubic-bezier(.86,0,.07,1);--ease-quint-out:cubic-bezier(.23,1,.32,1);--ease-sine-in:cubic-bezier(.47,0,.745,.715);--ease-sine-in-out:cubic-bezier(.445,.05,.55,.95);--ease-sine-out:cubic-bezier(.39,.575,.565,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-space: ;--gradient-1:linear-gradient(to bottom right var(--gradient-space),#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right var(--gradient-space),#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right var(--gradient-space),#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right var(--gradient-space),#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110% var(--gradient-space),#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left var(--gradient-space),#000,#fff);--gradient-7:linear-gradient(to bottom right var(--gradient-space),#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0% var(--gradient-space),#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center var(--gradient-space),#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25% var(--gradient-space),gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left var(--gradient-space),#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10% var(--gradient-space),#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200% var(--gradient-space),#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right var(--gradient-space),lime,cyan);--gradient-15:linear-gradient(to bottom right var(--gradient-space),#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25% var(--gradient-space),blue,#8a2be2);--gradient-18:linear-gradient(0deg var(--gradient-space),rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg var(--gradient-space),rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg var(--gradient-space),rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg var(--gradient-space),rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg var(--gradient-space),rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg var(--gradient-space),rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right var(--gradient-space),#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center var(--gradient-space),orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115% var(--gradient-space),red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right var(--gradient-space),#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right var(--gradient-space),#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0% var(--gradient-space),#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50% var(--gradient-space),#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right var(--gradient-space),#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left var(--gradient-space),#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105% var(--gradient-space),#fff,orchid);--gradient-29:radial-gradient(circle at top right var(--gradient-space),#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right var(--gradient-space),#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left var(--gradient-space),#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}@supports (background:linear-gradient(to right in oklab,#000,#fff)){:where(html){--gradient-space:in oklab}}@-webkit-keyframes fade-in{to{opacity:1}}@keyframes fade-in{to{opacity:1}}@-webkit-keyframes fade-in-bloom{0%{-webkit-filter:brightness(1) blur(20px);filter:brightness(1) blur(20px);opacity:0}10%{-webkit-filter:brightness(2) blur(10px);filter:brightness(2) blur(10px);opacity:1}to{-webkit-filter:brightness(1) blur(0);filter:brightness(1) blur(0);opacity:1}}@keyframes fade-in-bloom{0%{-webkit-filter:brightness(1) blur(20px);filter:brightness(1) blur(20px);opacity:0}10%{-webkit-filter:brightness(2) blur(10px);filter:brightness(2) blur(10px);opacity:1}to{-webkit-filter:brightness(1) blur(0);filter:brightness(1) blur(0);opacity:1}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}@-webkit-keyframes fade-out-bloom{to{-webkit-filter:brightness(1) blur(20px);filter:brightness(1) blur(20px);opacity:0}10%{-webkit-filter:brightness(2) blur(10px);filter:brightness(2) blur(10px);opacity:1}0%{-webkit-filter:brightness(1) blur(0);filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out-bloom{to{-webkit-filter:brightness(1) blur(20px);filter:brightness(1) blur(20px);opacity:0}10%{-webkit-filter:brightness(2) blur(10px);filter:brightness(2) blur(10px);opacity:1}0%{-webkit-filter:brightness(1) blur(0);filter:brightness(1) blur(0);opacity:1}}@-webkit-keyframes scale-up{to{-webkit-transform:scale(1.25);transform:scale(1.25)}}@keyframes scale-up{to{-webkit-transform:scale(1.25);transform:scale(1.25)}}@-webkit-keyframes scale-down{to{-webkit-transform:scale(.75);transform:scale(.75)}}@keyframes scale-down{to{-webkit-transform:scale(.75);transform:scale(.75)}}@-webkit-keyframes slide-out-up{to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slide-out-up{to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes slide-out-down{to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slide-out-down{to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes slide-out-right{to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slide-out-right{to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@-webkit-keyframes slide-out-left{to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slide-out-left{to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@-webkit-keyframes slide-in-up{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slide-in-up{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes slide-in-down{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slide-in-down{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slide-in-right{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slide-in-left{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@-webkit-keyframes shake-x{0%,to{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-transform:translateX(-5%);transform:translateX(-5%)}40%{-webkit-transform:translateX(5%);transform:translateX(5%)}60%{-webkit-transform:translateX(-5%);transform:translateX(-5%)}80%{-webkit-transform:translateX(5%);transform:translateX(5%)}}@keyframes shake-x{0%,to{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-transform:translateX(-5%);transform:translateX(-5%)}40%{-webkit-transform:translateX(5%);transform:translateX(5%)}60%{-webkit-transform:translateX(-5%);transform:translateX(-5%)}80%{-webkit-transform:translateX(5%);transform:translateX(5%)}}@-webkit-keyframes shake-y{0%,to{-webkit-transform:translateY(0);transform:translateY(0)}20%{-webkit-transform:translateY(-5%);transform:translateY(-5%)}40%{-webkit-transform:translateY(5%);transform:translateY(5%)}60%{-webkit-transform:translateY(-5%);transform:translateY(-5%)}80%{-webkit-transform:translateY(5%);transform:translateY(5%)}}@keyframes shake-y{0%,to{-webkit-transform:translateY(0);transform:translateY(0)}20%{-webkit-transform:translateY(-5%);transform:translateY(-5%)}40%{-webkit-transform:translateY(5%);transform:translateY(5%)}60%{-webkit-transform:translateY(-5%);transform:translateY(-5%)}80%{-webkit-transform:translateY(5%);transform:translateY(5%)}}@-webkit-keyframes shake-z{0%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}20%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}40%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}60%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}80%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}@keyframes shake-z{0%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}20%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}40%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}60%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}80%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes ping{90%,to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@keyframes ping{90%,to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@-webkit-keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@-webkit-keyframes float{50%{-webkit-transform:translateY(-25%);transform:translateY(-25%)}}@keyframes float{50%{-webkit-transform:translateY(-25%);transform:translateY(-25%)}}@-webkit-keyframes bounce{25%{-webkit-transform:translateY(-20%);transform:translateY(-20%)}40%{-webkit-transform:translateY(-3%);transform:translateY(-3%)}0%,60%,to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounce{25%{-webkit-transform:translateY(-20%);transform:translateY(-20%)}40%{-webkit-transform:translateY(-3%);transform:translateY(-3%)}0%,60%,to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pulse{50%{-webkit-transform:scale(.9);transform:scale(.9)}}@keyframes pulse{50%{-webkit-transform:scale(.9);transform:scale(.9)}}@media (prefers-color-scheme:dark){@-webkit-keyframes fade-in-bloom{0%{-webkit-filter:brightness(1) blur(20px);filter:brightness(1) blur(20px);opacity:0}10%{-webkit-filter:brightness(.5) blur(10px);filter:brightness(.5) blur(10px);opacity:1}to{-webkit-filter:brightness(1) blur(0);filter:brightness(1) blur(0);opacity:1}}@keyframes fade-in-bloom{0%{-webkit-filter:brightness(1) blur(20px);filter:brightness(1) blur(20px);opacity:0}10%{-webkit-filter:brightness(.5) blur(10px);filter:brightness(.5) blur(10px);opacity:1}to{-webkit-filter:brightness(1) blur(0);filter:brightness(1) blur(0);opacity:1}}}@media (prefers-color-scheme:dark){@-webkit-keyframes fade-out-bloom{to{-webkit-filter:brightness(1) blur(20px);filter:brightness(1) blur(20px);opacity:0}10%{-webkit-filter:brightness(.5) blur(10px);filter:brightness(.5) blur(10px);opacity:1}0%{-webkit-filter:brightness(1) blur(0);filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out-bloom{to{-webkit-filter:brightness(1) blur(20px);filter:brightness(1) blur(20px);opacity:0}10%{-webkit-filter:brightness(.5) blur(10px);filter:brightness(.5) blur(10px);opacity:1}0%{-webkit-filter:brightness(1) blur(0);filter:brightness(1) blur(0);opacity:1}}}/* general functionality */
.c-hide {
  display: none !important;
}

.c-a-l,
th.c-a-l,
td.c-a-l {
  text-align: left;
}
table thead th.c-a-l {
  .sort-wrapper {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.c-a-r,
th.c-a-r,
td.c-a-r {
  text-align: right;
}
table thead th.c-a-r {
  .sort-wrapper {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
.c-a-c,
th.c-a-c,
td.c-a-c {
  text-align: center;
}
table thead th.c-a-c {
  .sort-wrapper {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.c-bold {
  font-family: var(--eventFont-Bold);
}

.c-underline {
  text-decoration: underline;
}

.c-linethrough {
  text-decoration: line-through;
}

.c-not-counted {
  text-decoration: line-through;
  color: var(--gray-6);
}

.c-no-break {
  white-space: nowrap;
}

.c-pointer {
  cursor: pointer;
}

.c-w-s {
  width: 3%;
}
.c-w-m {
  width: 10%;
}
.c-w-l {
  width: 20%;
}
.c-w-3 {
  width: 3%;
}
.c-w-4 {
  width: 4%;
}
.c-w-5 {
  width: 5%;
}
.c-w-6 {
  width: 6%;
}
.c-w-7 {
  width: 7%;
}
.c-w-8 {
  width: 8%;
}
.c-w-9 {
  width: 9%;
}
.c-w-10 {
  width: 10%;
}
.c-w-11 {
  width: 11%;
}
.c-w-12 {
  width: 12%;
}
.c-w-13 {
  width: 13%;
}
.c-w-14 {
  width: 14%;
}
.c-w-15 {
  width: 15%;
}
.c-w-20 {
  width: 20%;
}

/* END general functionality */

.legendContainer,
.mainContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  @media (max-width: 1280px) {
    margin: 0 var(--size-3);
  }
}

.section-headline {
  font-family: var(--eventFontAccent);
  font-size: var(--size-7);
  margin-bottom: var(--size-3);
  line-height: 1;
  display: inline-block;
  margin-top: var(--size-3);

  &:empty {
    display: none;

    ~ .list-elements {
      .scoredev,
      .key-value-list,
      .ResultList,
      > div .WST,
      > .WST {
        margin-top: var(--size-7);
        display: block;
      }
    }
  }

  @media (max-width: 768px) {
    font-size: var(--size-5);
  }
}

/*selector has to be that specific because it overwrites with sailing course maps*/
.ResultList {
  > .course-images {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--size-2);
    margin-bottom: var(--size-3);

    img {
      width: var(--size-10);
      padding: var(--size-2);
      background-color: var(--bgSecondary);
      border-radius: var(--size-2);
      -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
              box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
      position: relative;
      display: block;
    }

    a {
      cursor: pointer;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      position: relative;

      display: inline-flex;
      position: relative;

      &:after {
        content: " ";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        padding: 3px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: absolute;
        background-color: var(--bgSecondary);
        border-radius: var(--size-2);
        opacity: 0.75;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
      }

      &:hover&:after {
        opacity: 0;
      }

      .file-description {
        position: absolute;
        font-size: 0.7rem;
        width: 100%;
        height: 100%;
        z-index: 10;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: center;
        font-family: var(--eventFont-Bold);
      }
    }
  }
}
/*  elements/icons */

.icon {
  position: relative;
  min-width: 26px;
  height: 30px;
  line-height: 30px;
  padding: 0 4px;
  text-indent: 20px;

  &:before {
    position: absolute;
    left: 0;
    top: 0;
    font-family: ST-Info-Icon-Font;
    font-weight: normal;
    font-size: 24px;
    height: 100%;
    width: 20px;
    text-indent: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  &.gold {
    color: var(--gold);
  }

  &.silver {
    color: var(--silver);
  }

  &.bronze {
    color: var(--bronze);
  }
}

.icon--athletelist {
    &:before {
    content: "\f007";
  }
}

.icon--bracket {
  &:before {
    content: "\e901";
    font-size: 14px;
  }
}

.icon--flower-ceremony {
  &:before {
    content: "\e909";
  }
}

.icon--pdf {
  &:before {
    content: "\e90d";
  }
}

.icon--statistic {
  &:before {
    content: "\e900";
  }
}

.icon--teamranking,
.icon--sessionresult {
  &:before {
    content: "\e904";
  }
}

.icon--medal-ceremony {
  &:before {
    content: "\e903";
  }
}

.icon--medal {
  &:before {
    content: "\e903";
  }
}

.icon--podium {
  &:before {
    content: "\e907";
  }
}

.icon--ceremony {
  &:before {
    content: "\e903";
  }
}

.icon--standing {
  &:before {
    content: "\e900";
  }

  &.gold {
    &:before {
      content: "\e906";
    }
  }

  &.silber {
    &:before {
      content: "\e906";
    }
  }

  &.bronze {
    &:before {
      content: "\e906";
    }
  }
}

.icon--schedule {
  &:before {
    content: "\e908";
  }
}

.icon--statistic,
.icon--teamstatistics,
.icon--playbyplay,
.icon--playerstatistics,
.icon--groupsummary {
  &:before {
    content: "\e904";
  }
}

.icon--standing {
  &:before {
    content: "\e900";
  }
}

.icon--resultlist {
  &:before {
    content: "\e904";
  }
}

.icon--medallist {
  &:before {
    content: "\e903";
  }
}

.icon--phasesummary {
  &:before {
    content: "\e906";
  }
}

.icon--startlist {
  &:before {
    content: "\e914";
  }
}

.icon--eventsummary {
  &:before {
    content: "\e906";
  }
}

.icon--teams {
  &:before {
    content: "\e90f";
  }
}

.icon--team-captains-meeting {
  &:before {
    content: "\e90f";
  }
}

.icon--winner {
  width: 20px;
  background: white;
  padding: 0;
  color: black;
  border-radius: 10px;

  &:before {
    content: "\f006";
    font-size: 13px;
    left: 4px;
  }
}

.icon.icon-photofinish,
.icon.icon--photofinish {
  position: relative;
  line-height: 1;
  padding: 0 10px;

  &:before {
    font-family: "FontAwesome-Solid";
    font-size: 1rem;
    content: "\f030";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.icon.icon-photofinish-disabled,
.icon.icon--photofinish-disabled {
  position: relative;
  line-height: 1;
  padding: 0 10px;

  &:before {
    font-family: "FontAwesome-Solid";
    font-size: 1rem;
    content: "\f030";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: gray;
  }
}

/*  modules/tableDetailContent */

div.detailContent {

    td {
        font-weight: normal !important;
    }

    tr:last-child {
        td {
            border-bottom: none;
        }
    }
}

@media (max-width: 1280px) {
  .responsive-table-wrapper {
    position: relative;

    &:after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: var(--size-6);
      height: 100%;
      background: -webkit-gradient(
        linear,
        right top, left top,
        color-stop(10%, rgba(244, 246, 246, 1)),
        color-stop(60%, rgba(255, 255, 255, 0.5)),
        to(rgba(255, 255, 255, 0))
      );
      background: linear-gradient(
        to left,
        rgba(244, 246, 246, 1) 10%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0) 100%
      );
    }

    .responsive-table {
      width: 100%;
      overflow-x: auto;
      position: relative;
    }
  }
}

/*  elements/table */

table {
  width: 100%;
  border-spacing: 0;

  &.sortable {
    th .sort-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    th.athleteName .sort-wrapper {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
    td.c-a-c {
      text-align: center;
    }

    th.c-a-c .sort-wrapper {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }

    /*client side sorting tables*/
    th.sortable span.sortIcon {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 10px;
              flex: 0 0 10px;
      width: 10px;
      height: 15px;
      margin-left: 3px;
    }

    span.sortDown {
      background-image: url(../base/images/sortableArrowsDown.png) !important;
    }

    span.sortUp {
      background-image: url(../base/images/sortableArrowsUp.png) !important;
    }

    span.sortNoSort,
    span.sortIcon {
      background-image: url(../base/images/sortableArrowsNoSort.png);
      background-repeat: no-repeat;
      background-position: 0 0;
    }
  }

  th {
    font-weight: normal;
    padding: var(--size-3) var(--size-1);
    text-align: center;

    &.col-sm {
      width: 60px;
    }

    &.col-md {
      width: 90px;
    }

    &.athleteName {
      min-width: 200px;
      @media all and (max-width: 1100px) {
        min-width: 180px;
      }
      @media all and (max-width: 800px) {
        min-width: 150px;
      }

      @media all and (max-width: 640px) {
        min-width: initial;
      }
    }

    &.colMedal {
      min-width: var(--size-9);
      width: var(--size-9);
      @media all and (max-width: 640px) {
        min-width: initial;
        width: initial;
      }
    }

    &.rankColumn {
      min-width: var(--size-7);
      width: var(--size-7);
      @media all and (max-width: 640px) {
        min-width: initial;
        width: initial;
      }

      &.icon-photofinish:before {
        display: none;
      }
    }

    &.startPosColumn {
      min-width: var(--size-7);
      width: var(--size-7);
      @media all and (max-width: 640px) {
        min-width: initial;
        width: initial;
      }
    }

    &.expandableColumn {
      min-width: var(--size-7);
      width: var(--size-7);
      @media all and (max-width: 640px) {
        min-width: initial;
        width: initial;
      }
    }
    &.intermediate {
      width: 8rem;
      text-align: right;

      .sort-wrapper {
        -webkit-box-pack: right;
            -ms-flex-pack: right;
                justify-content: right;
      }
    }
    &.final-result {
      min-width: var(--size-9);

      @media all and (max-width: 640px) {
        min-width: initial;
        width: initial;
      }
    }

    &.CrossTable_Result {
      min-width: var(--size-9);
      width: var(--size-9);
      @media all and (max-width: 1000px) {
        min-width: var(--size-8);
        width: var(--size-8);
      }
    }

    &.startOrderColumn {
      min-width: 6rem;
      width: 6rem;
      @media all and (max-width: 640px) {
        min-width: initial;
        width: initial;
      }
    }

    &.bibColumn {
      min-width: var(--size-9);
      width: var(--size-9);
      @media all and (max-width: 640px) {
        min-width: initial;
        width: initial;
      }
    }
  }

  td {
    padding: var(--size-3) var(--size-2);
    text-align: center;

    &.CrossTable_Result {
      .c-live {
        background-color: var(--current);
        text-transform: uppercase;
      }

      &:empty,
      .value:empty {
        background-color: #ececec !important;
      }
    }

    &.athleteName {
      .athleteLink-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: var(--size-2);
      }

      .athleteLink {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: var(--size-2);
      }

      &.doubles {
        .athleteLink {
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
        }
      }

      .horses {
        margin-top: var(--size-1);

        span.athleteLink {
          &:before {
            font-family: "FontAwesome-Solid";
            font-size: 0.875rem;
            content: "\f7ab";
            -webkit-transform: rotateY(180deg);
                    transform: rotateY(180deg);
          }
        }
      }
    }

    &.expandableColumn {
      .expandable {
        &:after {
          width: var(--size-4);
          height: var(--size-4);
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          content: "\F067";
          cursor: pointer;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          border-radius: var(--size-1);
          font-family: ST-Info-Icon-Font;
          background-color: var(--textColor);
          color: white;
        }
      }

      &.expanded {
        .expandable:after {
          content: "\F068";
        }
      }
    }

    &.intermediate {
      .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;

        &:has(.top) {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }

        .top,
        .bottom {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          min-height: 20px;
          gap: 3px;
          width: 100%;
          -webkit-box-pack: right;
              -ms-flex-pack: right;
                  justify-content: right;

          .rank {
            text-align: right;
            width: 35px;
            @media all and (max-width: 800px) {
              width: 28px;
            }
          }

          .performance {
            text-align: right;
            width: 50px;
            @media all and (max-width: 800px) {
              width: 45px;
            }
          }
        }

        .top {
          .performance {
            font-family: var(--eventFont-Bold);
          }
        }

        .bottom {
          font-size: 0.75rem;
          min-height: 15px;
        }
      }
    }

    &.final-result {
      font-family: var(--eventFont-Bold);
    }

    &.rankColumn {
      .icon-photofinish {
        cursor: pointer; /* photo finish link */
      }

      &.icon-photofinish:before {
        display: inline-block;
        margin-right: 5px;
      }
    }
  }

  /* Full width Elements rendered inside a table cell */
  .detailContent {
    table.isCompact {
      thead th {
        background-color: var(--eventColor2);
        color: var(--text-over-eventColor2);
        padding: var(--size-3) var(--size-2);
        font-weight: normal;
        font-family: var(--eventFont-Bold);
      }

      tbody tr td {
        &:first-child {
          border-bottom-left-radius: 0;
        }

        &:last-child {
          border-bottom-right-radius: 0;
        }
      }

      thead tr:first-child th {
        &:first-child {
          border-top-left-radius: var(--radius-2);
        }

        &:last-child {
          border-top-right-radius: var(--radius-2);
        }
      }

      tr:last-child {
        td:first-child {
          border-bottom-left-radius: var(--radius-2);
        }

        td:last-child {
          border-bottom-right-radius: var(--radius-2);
        }
      }

      tr:nth-child(even) td {
        background-color: var(--bgTableEven);
      }

      tr:nth-child(odd) td {
        background-color: var(--bgTableOdd);
      }
    }
  }
}

/* Default Table Layout*/

.table-wrapper {
  margin-bottom: var(--size-4);
}

.tableTitle {
  font-family: var(--eventFontAccent);
  font-size: var(--size-7);
  margin-bottom: var(--size-2);
  margin-top: 0;
  line-height: 1;
  display: inline-block;

  @media (max-width: 768px) {
    font-size: var(--size-5);
  }
}

table.default-table {
  font-size: 0.875rem; /* 14px */
  border-collapse: collapse;

  th,
  td {
    &.athleteName {
      text-align: left;
    }

    &.hide {
      background-color: transparent !important;
    }
  }

  > thead th {
    background-color: var(--eventColor2);
    color: var(--text-over-eventColor2);
    padding: var(--size-3) var(--size-2);
    font-weight: normal;
    font-family: var(--eventFont-Bold);

    &.topHeader {
      border-left: 1px solid var(--borderTable);
      border-right: 1px solid var(--borderTable);
      padding-bottom: 0;
    }

    &.firstSubHeader {
      border-left: 1px solid var(--borderTable);
    }

    &.lastSubHeader {
      border-right: 1px solid var(--borderTable);
    }

    div.noc-element,
    a.noc-element,
    span.noc-element {
      img {
        border: 1px solid rgb(255 255 255 / 44%);
      }
    }
  }

  /* todo resolve the odd even mess in all use cases */
  > tbody {
    tr.False,
    tr.odd,
    tr.evenFalse,
    tr.evenTrue {
      td {
        background-color: var(--bgTableEven);
      }
    }

    tr.True,
    tr.even,
    tr.oddFalse,
    tr.oddTrue {
      td {
        background-color: var(--bgTableOdd);
      }
    }

    tr.True.detail {
      .key-value-list {
        .key-value-item {
          background-color: var(--bgTableEven);
        }
      }
    }

    tr.c-live {
      td .schedule_status {
        .textStatus {
          background-color: var(--liveColor);
          color: white;
          border-radius: var(--size-1);
          padding: var(--size-1) var(--size-2);
        }
      }
    }

    &.isCompact,
    &.isDetail {
      tr.detail {
        display: none; /* for accordion feature in tables */
      }
    }

    tr:last-child {
      td:first-child {
        border-bottom-left-radius: var(--radius-2);
      }

      td:last-child {
        border-bottom-right-radius: var(--radius-2);
      }
    }

    td {
      padding: 0.75rem var(--size-2);
    }

    tr.Last td {
      background-color: var(--currentInfoLast);
      border-bottom: 1px solid var(--currentInfoLastHeader);
    }

    tr.Current td,
    tr.CURRENT td {
      background-color: var(--currentInfoCurrent);
      border-bottom: 1px solid var(--currentInfoCurrentHeader);
    }

    tr.Next td {
      background-color: var(--currentInfoNext);
      border-bottom: 1px solid var(--currentInfoNextHeader);
    }

    tr.Waiting td,
    tr.WAITING td {
      background-color: var(--currentInfoWaiting);
      border-bottom: 1px solid var(--currentInfoWaitingHeader);
    }
  }

  th,
  td {
    /* todo: make these column names obsolete except left-align and right-align */
    &.schedule_status,
    &.schedule_results,
    &.reportInfo-td,
    &.schedule_event,
    &.schedule_time,
    &.schedule_location,
    &.startPosColumn {
      text-align: left;

      > .sort-wrapper {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
      }
    }

    &.c-a-r {
      text-align: right;

      > .sort-wrapper {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
      }
    }
  }
}

#headerContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: var(--size-3) 0;
  margin: 0 var(--size-3);
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: var(--size-2);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  @media (max-width: 640px) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

#header {
  display: none;
}

.sponsorTop {
  a {
    width: var(--size-10);
    display: block;
  }

  img {
    width: 100%;
  }
}

#browserNavi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--size-1);

  border-radius: var(--radius-round);
  background-color: var(--text-over-eventColor2);
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
  padding: var(--size-1);

  .printBtn,
  .reloadBtn {
    cursor: pointer;
    border-radius: var(--radius-round);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
    padding: 0.25rem 0.5rem;

    &:before {
      font-family: ST-Info-Icon-Font;
      font-size: 0.75rem;
      color: var(--textColor);
      display: block;
    }

    &:hover {
      background-color: var(--text-over-eventColor2);
      -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
              box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
    }
  }

  .printBtn:before {
    content: "\f02f";
  }

  .reloadBtn:before {
    content: "\f01e";
  }
}

.selectionContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--size-2);
  margin-left: auto;

  @media (max-width: 640px) {
    margin-right: auto;
    margin-top: var(--size-3);
  }
}

.clientTimeSelector {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--size-1);
  border-radius: var(--radius-round);
  background-color: var(--text-over-eventColor2);
  padding: var(--size-1);
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);

  .btn {
    cursor: pointer;
    border-radius: var(--radius-round);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: var(--size-4);
    padding: 0 0.5rem;
    font-size: 0.7rem;
    color: var(--textColor);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    &:hover {
      background-color: var(--text-over-eventColor2);
      -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
              box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
    }

    &.c-selected {
      background-color: var(--eventColor2);
      color: var(--text-over-eventColor2);
    }
  }
}

#navitems_lang {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--size-1);
  border-radius: var(--radius-round);
  background-color: var(--text-over-eventColor2);
  padding: var(--size-1);
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);

  .navitem_lang {
    cursor: pointer;
    border-radius: var(--radius-round);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;

    a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: var(--size-4);
      padding: 0 0.5rem;
      font-size: 0.7rem;
      color: var(--textColor);
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-decoration: none;
    }

    img {
      height: 0.5rem;
      margin-right: var(--size-1);
    }

    &:hover {
      background-color: var(--text-over-eventColor2);
      -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
              box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
    }

    &.c-selected {
      background-color: var(--eventColor2);
      a {
        color: var(--text-over-eventColor2);
      }
    }
  }
}

.pagetitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: var(--size-7);
  margin-bottom: var(--size-5);

  @media (max-width: 640px) {
    margin-top: var(--size-2);
    margin-bottom: var(--size-3);
  }

  h1 {
    font-family: var(--eventFontAccent-Condensed);
    font-size: var(--size-9);
    line-height: 1;
    margin-top: 0;
    margin-bottom: 0;

    @media (max-width: 640px) {
      font-size: var(--size-7);
    }
  }
}

footer {
    text-align: center;
    margin-top: var(--size-3);
    margin-bottom: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--size-2);

    @media (max-width: 1280px) {
        margin-left: var(--size-3);
        margin-right: var(--size-3);
        margin-top: var(--size-3);
    }

    .supporters

{
    z-index: 10;
    text-align: center;
    margin-top: 1rem;
    gap: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    @media (max-width: 1280px) {
        margin: 0 var(--size-3);
    }

    @media (max-width: 640px) {
        gap: 0.5rem;
        margin: var(--size-3) 0;
    }

    .supporterText

{
    font-size: 0.875rem;
    font-family: var(--eventFont-Bold);
}

.supporterImage {
    height: var(--size-10);
    width: auto;
    margin-left: 0.5rem;
    margin-right: 0.5rem;

    @media (max-width: 640px) {
        height: var(--size-8);
    }
}

}

  .footertext {
    font-size: 0.85rem;
  }

  .footertextbold {
    font-family: var(--eventFont-Bold);
  }

a {
    text-decoration: none;
    color: var(--linkColor);
}
}

.footer {
  .footertext {
    margin: var(--size-3) 0;
    font-size: 0.85rem;
  }
}

.toggleSwitch {
  position: relative;
  display: inline-block;

  .slider {
    width: 60px;
    height: 20px;
    padding-left: 46px;
    position: absolute;
    font-size: 0.875rem;

    &:before {
      position: absolute;
      content: "";
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      border-radius: 20px;
      width: 40px;
      height: 20px;
    }

    &:after {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 2px;
      background-color: white;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      border-radius: 50%;
    }
  }

  input {
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;

    &:checked + .slider:before {
      background-color: var(--linkColor);
    }

    &:checked + .slider:after {
      -webkit-transform: translateX(20px);
          -ms-transform: translateX(20px);
              transform: translateX(20px);
    }
  }
}

:root {
  --bgMain: rgb(255, 255, 255);
  --eventColor1: rgb(40, 121, 188);
  --eventColor1Light: rgb(62, 134, 195);
  --eventColor2: rgb(143, 202, 250);
  --eventColor2Light: rgb(154, 207, 251);
  --eventColor2Light2: rgb(188, 223, 252);
  --eventColor3: rgb(123, 199, 215);
  --linkColor: var(--eventColor1);
  --linkColorHover: rgb(6, 4, 4);
  --text-color: rgb(51, 51, 51);
  --text-over-eventColor1: rgb(255, 255, 255);
  --text-over-eventColor2: rgb(6, 4, 4);
  --sportSelectorBG: rgb(249, 249, 249);

  --oddRow: rgb(255, 255, 255);
  --evenRow: rgb(246, 245, 245);
  --highlightCellOdd: rgb(247, 247, 247);
  --highlightCellEven: rgb(238, 242, 244);
  --tableBorder: rgb(237, 237, 237);
  --tableBorderVertical: rgb(243, 241, 241);

  --eventFont: "Roboto-Regular", Arial, sans-serif;
  --eventFontNavigation: "Roboto-Regular", Arial, sans-serif;
  --info-font: "Roboto-Regular", Arial, sans-serif;

  --current: rgb(0, 162, 0);
  --currentBG: rgb(233, 245, 230);
  --selected: rgb(28, 150, 213);
  --bgTableHead: rgb(230, 230, 230);
  --bgElement: rgb(230, 230, 230);
  --bgElementBox: rgba(255, 255, 255, 0.6);
  --bgMedal: rgb(226, 176, 43);
  --bgMedalLight: rgb(253, 248, 229);
  --darkBorder: rgb(217, 217, 217);
  --greyTextDark: rgb(51, 51, 51);
  --greyText: rgb(102, 102, 102);
  --greyTextLight: rgb(166, 166, 166);
  --greyDark: rgb(186, 186, 186);
  --greyLight: rgb(231, 231, 231);
  --gold: rgb(233, 177, 0);
  --silver: rgb(148, 148, 148);
  --bronze: rgb(227, 191, 170);

  --black: rgb(0, 0, 0);
  --blackLight: rgb(228, 228, 228);
  --blackTextOver: rgb(255, 255, 255);
  --blue: rgb(0, 38, 255);
  --blueLight: rgb(229, 239, 247);
  --blueTextOver: rgb(255, 255, 255);
  --brown: rgb(156, 75, 31);
  --brownLight: rgba(156, 75, 31, 0.79);
  --brownTextOver: rgb(255, 255, 255);
  --burgundy: rgb(128, 0, 32);
  --cyan: rgb(0, 246, 255);
  --darkBlue: rgb(0, 0, 139);
  --darkNavy: rgb(0, 0, 128);
  --gold: rgb(255, 215, 0);
  --goldLight: rgb(255, 249, 212);
  --goldTextOver: rgb(0, 0, 0);
  --green: rgb(0, 255, 33);
  --greenLight: rgb(229, 246, 235);
  --greenTextOver: rgb(255, 255, 255);
  --grey: rgb(150, 150, 150);
  --greyLight: rgb(210, 210, 210);
  --greyTextOver: rgb(255, 255, 255);
  --lightBlue: rgb(173, 216, 230);
  --magenta: rgb(255, 0, 222);
  --navy: rgb(35, 57, 93);
  --navyLight: rgb(211, 211, 211);
  --navyTextOver: rgb(255, 255, 255);
  --orange: rgb(234, 106, 30);
  --orangeLight: rgb(249, 216, 21);
  --orangeTextOver: rgb(255, 255, 255);
  --pink: rgb(252, 15, 192);
  --purple: rgb(129, 0, 127);
  --red: rgb(255, 0, 0);
  --redLight: rgb(248, 229, 229);
  --redTextOver: rgb(255, 255, 255);
  --teal: rgb(0, 128, 128);
  --white: rgb(255, 255, 255);
  --whiteLight: rgb(247, 247, 247);
  --whiteTextOver: rgb(0, 0, 0);
  --yellow: rgb(255, 216, 0);
  --yellowLight: rgb(253, 252, 202);
  --yellowTextOver: rgb(0, 0, 0);

  --liveColor: rgb(37, 177, 93);

  --textShadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

  --sliderColor: rgb(142, 142, 142);

  --currentInfoLast: rgb(237, 243, 255);
  --currentInfoLastHeader: rgb(45, 100, 206);
  --currentInfoCurrent: rgb(243, 251, 246);
  --currentInfoCurrentHeader: rgb(37, 177, 93);
  --currentInfoWaiting: rgb(245, 250, 226);
  --currentInfoWaitingHeader: rgb(154, 188, 18);
  --currentInfoNext: rgb(255, 253, 240);
  --currentInfoNextHeader: rgb(199, 180, 39);
  --currentInfoOnTrack: rgb(243, 251, 246);
  --currentInfoOnTrackHeader: rgb(213, 229, 219);
}

/* general queries */
.c-s-4,
.c-s-5,
.c-s-6,
.c-s-7,
.c-s-8,
.c-s-9,
.c-s-10,
.c-s-11,
.c-s-12 {
  display: none;
}

@media all and (max-width: 1200px) {
  .c-h-12 {
    display: none !important;
  }
  .c-s-12 {
    display: initial;
  }
  th,
  td {
    &.c-s-12 {
      display: table-cell;
    }
  }
}
@media all and (max-width: 1100px) {
  .c-h-11 {
    display: none !important;
  }
  .c-s-11 {
    display: initial;
  }
  th,
  td {
    &.c-s-11 {
      display: table-cell;
    }
  }
}
@media all and (max-width: 1000px) {
  .c-h-10 {
    display: none !important;
  }
  .c-s-10 {
    display: initial;
  }
  th,
  td {
    &.c-s-10 {
      display: table-cell;
    }
  }
}
@media all and (max-width: 900px) {
  .c-h-9 {
    display: none !important;
  }

  .c-s-9 {
    display: initial;
  }
  th,
  td {
    &.c-s-9 {
      display: table-cell;
    }
  }
}
@media all and (max-width: 800px) {
  .c-h-8 {
    display: none !important;
  }

  .c-s-8 {
    display: initial;
  }
  th,
  td {
    &.c-s-8 {
      display: table-cell;
    }
  }
}
@media all and (max-width: 700px) {
  .c-h-7 {
    display: none !important;
  }

  .c-s-7 {
    display: initial;
  }
  th,
  td {
    &.c-s-7 {
      display: table-cell;
    }
  }
}
@media all and (max-width: 600px) {
  .c-h-6 {
    display: none !important;
  }

  .c-s-6 {
    display: initial;
  }
  th,
  td {
    &.c-s-6 {
      display: table-cell;
    }
  }
}
@media all and (max-width: 500px) {
  .c-h-5 {
    display: none !important;
  }

  .c-s-5 {
    display: initial;
  }
  th,
  td {
    &.c-s-5 {
      display: table-cell;
    }
  }
}
@media all and (max-width: 400px) {
  .c-h-4 {
    display: none !important;
  }

  .c-s-4 {
    display: initial;
  }
  th,
  td {
    &.c-s-4 {
      display: table-cell;
    }
  }
}
/* end general queries */

@media all and (max-width: var(--page-width)) {
  .intermediate {
    div {
      width: auto !important;
      float: none !important;
    }

    br {
      display: none;
    }

    div:nth-child(3),
    div:nth-child(4) {
      display: none;
    }
  }

  &#page {
    width: 100%;
    #breadCrumb {
      width: 90%;
    }
  }

  .DetailedScheduleByDay {
    tr td span.dotCeremony,
    tr td span.dotCeremony.c-current-day {
      background-size: 29px 16px !important;
      background-position-y: 7px;
    }
  }

  table {
    width: 100%;
  }

  .pagetitle {
    width: 100%;
  }

  .sportevents {
    float: none;
    .right {
      white-space: normal;
    }
  }

  .Athletes .tabswitcher {
    position: relative;
  }

  .sportevents.schedule.AS {
    width: 100%;
    height: 40px;
  }

  .participants {
    .athlete {
      height: 180px;

      .photoAthlete {
        width: 137px;
      }
    }
  }

  .List.headline {
    top: 0;
  }

  .groupPanel {
    .group .header .text .SubTitle {
      width: 100%;
    }
  }

  .goalkeeperIH {
    float: none;
    width: 100%;

    table {
      width: 100%;
    }
  }

  .resultBook {
    .pdfSport {
      width: 120px;
    }
  }
}

@media all and (max-width: 900px) {
  &#overlay-image {
    img {
      width: 80vw;
    }
  }
}

@media all and (max-width: 800px) {
  /*.intermediate,*/
  .tabswitcher .Today {
    display: none !important;
  }

  .behind,
  .final-result,
  .All_legend,
  .rankColumn,
  .bibColumn {
    min-width: inherit;
  }
  table {
    .rankColumn {
      width: 40px;
    }
  }
  .medals {
    padding: 0;
  }

  .sportevents {
    float: none;
    .right {
      white-space: normal;
    }
  }

  .detailedByDay {
    .detailSwitch {
      display: none;

      + .DetailedScheduleByDay {
        margin-top: var(--size-7);
      }
    }
  }
}

@media all and (max-width: 700px) {
  .legendContainer,
  .mainContent {
    margin: 0;
  }

  .liveSportSelector {
    .sport-wrapper {
      gap: 0.65rem;
    }
  }

  table {
    &.default-table {
      font-size: 0.775rem;
      thead th {
        padding: var(--size-2) var(--size-1);
        &.expandableColumn {
          min-width: 21px;
          width: 21px;
        }
      }
      td {
        padding: var(--size-2) var(--size-1);
      }
    }

    .noc-element {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
  }
}

@media all and (max-width: 650px) {
  .behind,
  .final-result,
  .All_legend,
  .rankColumn,
  .bibColumn {
    width: inherit;
  }

  /*it makes no sense to show a bracket*/
  /*.relBracket,
  #BracketContainer {
    display: none !important;
  }*/

  .groupPanel {
    .relatedinfo-selector.schedule {
      top: 0;
    }
  }
  .showDetails {
    tr.detail {
      display: table-row !important;
    }
  }

  .related.bottom {
    display: none;
  }

  .offCommunication {
    th.sport,
    td.sport {
      width: auto;
    }
  }

  .teamOfficialsContainer > div {
    width: 98%;

    .tableTitle {
      float: none;
      padding-left: 0;
    }
  }
}

@media all and (max-width: 600px) {
  .mainContent {
    .sportevents {
      margin-left: 0;
      margin-top: var(--size-5);

      &.schedule {
        height: auto !important;
        margin-bottom: 10px !important;
        width: calc(100% - 3rem) !important;
      }
    }
  }

  #tabs.mobile {
    margin-left: 0;
  }

  .downlaodZip {
    position: static !important;
    float: none !important;
    margin-bottom: 10px !important;
  }

  .groupPanel .group td.schedule_event {
    padding-left: 1px;
  }

  .scheduleH2HOneTeam_Flag .noc-element {
    margin: 5px 3px 0px 0px;
  }

  .schedule_event .scheduleH2HOneTeam {
    .scheduleH2HOneTeam_Flag {
      width: 51px;

      .noc-element {
        margin: 5px 3px 0px 0px;
      }
    }

    .color img {
      margin-left: 0;
    }
  }

  th.schedule_sport,
  td.schedule_sport {
    width: auto !important;

    img {
      width: 25px;
    }
  }

  .groupPanel {
    padding: 0;

    .relatedinfo-selector.schedule {
      float: none;
      display: inline-block;
      vertical-align: top;
    }
  }

  &#page.Athletes {
    .personalInformation {
      th {
        width: auto !important;
      }

      .photoAthlete img {
        width: 100px;
        height: auto;
      }
    }
  }

  .athleteSearch {
    margin-left: 0;

    #athleteSearch {
      display: block;
      margin-top: 3px;
    }

    .buttonSmall {
      margin-top: -24px !important;
      margin-left: 219px;
    }
  }

  .PdfList {
    .list .title {
      width: 80px;
      margin-left: 10px;
      margin-bottom: 3px;
    }

    .filters td {
      width: 100% !important;
      display: block;
      text-align: left;
    }
  }

  .participants {
    .athlete {
      margin: 5px 2px;
    }
  }

  .tableTitle {
    float: none;
    display: block;
  }

  .resultBook {
    padding-left: 10px;

    .pdfSport {
      width: 80px;
    }
  }

  .final-result {
    min-width: inherit;
  }

  &#overlay-image {
    img {
      width: 95vw;
    }
  }
}

@media all and (max-width: 500px) {
  .legendContainer,
  .mainContent {
    margin: 0;
  }
  .sticky-content {
    right: 3px;
    left: 3px;
  }
  table {
    &.default-table {
      thead th {
        padding: 5px 1px;
      }
      tbody td {
        padding: 5px 1px;
      }
    }

    .athleteName {
      width: 160px;
    }
  }

  .RelatedInfoItem-description {
    display: none;
  }

  .unitSelector {
    padding-left: 0;

    #unitSelectorContainer {
      width: calc(100% - 75px);
    }

    .rightScroll {
      right: 0;
    }
  }

  .groupPanel {
    .schedule_results {
      width: 46px !important;
    }

    .schedule_location {
      display: none;
    }
  }

  table.participantList {
    .birth {
      display: none;
    }
  }

  .PdfList {
    th.version,
    td.version {
      display: none;
    }

    .pdfTables {
      th.description,
      td.description {
        width: 50%;
      }
    }
  }

  .offCommunication {
    th.number,
    td.number {
      display: none;
    }
  }

  .sponsors {
    img {
      height: auto;
      width: 250px;
    }
  }

  .reportInfo {
    .icon {
      text-indent: 0;
    }

    a.reportFile {
      padding-left: 20px;
      line-height: 15px;
    }
  }
}

@media all and (max-width: 400px) {
  .groupPanel {
    .schedule_status {
      display: none;
    }
  }

  .datepicker {
    .weekday,
    .index {
      display: none;
    }
  }

  th.color,
  td.color,
  .StartList th.color,
  .StartList td.color,
  .ResultList th.color,
  .ResultList td.color {
    width: auto;
  }
}

a,
summary,
button,
input,
select,
.link,
[role="button"],
[role="link"],
[role="tab"],
[role="radio"],
[tabindex] {
  &:focus {
    outline: none !important;
  }

  &:focus-visible {
    outline-style: double !important;
    outline-width: 2px !important;
    outline-offset: 3px !important;
    outline-color: var(--borderTable) !important;
  }
}

.tabswitcher .tabitem a {
  border-radius: var(--radius-round);
  outline-offset: 4px !important;
}

.Athletes {
  .tabswitcher.athletelist {
    div {
      cursor: pointer;
    }
  }

  .participants .List.headline {
    padding-left: 0;
  }

  .headline {
    padding-left: 12px;
  }

  .personalInformation {
    table {
      border-spacing: 0 5px;
    }

    th {
      display: none;
    }

    tr {
      &.False {
        background-color: inherit;
      }

      td {
        border-bottom: none;
        border-right: none;

        &.photoAthlete {
          text-align: right;
        }
      }
    }

    .atheleteEvents {
      list-style-type: disc;
      display: list-item;

      &::marker {
        color: var(--linkColor);
        margin-left: 18px;
      }
    }
  }

  .participants {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--size-3);

    .filters {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: var(--size-3);
    }

    .dropdownFilters {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      background-color: var(--bgSecondary);
      padding: var(--size-4);
      border-radius: var(--radius-3);
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      gap: var(--size-3) var(--size-10);
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }

    .athleteSearch {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: var(--size-2);
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;

      #stringAthlete,
      #stringTeam {
        font-size: 0.875rem;
        font-family: var(--eventFont-Bold);
      }

      .athleteSearchInputBox {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        .searchIcon {
          position: absolute;
          left: 17px;

          &:before {
            font-family: "FontAwesome-Solid";
            font-size: 0.875rem;
            content: "\f002";
            color: var(--borderTable);
          }
        }

        input {
          border: 1px solid #e4e4e4;
          border-radius: var(--size-2);
          padding: 13px 18px;
          padding-left: 43px;
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
        }
      }
    }

    .athleteFilters {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: var(--size-2);

      @media (max-width: 640px) {
        width: 100%;
      }

      .athleteFilterLabel {
        font-size: 0.875rem;
        font-family: var(--eventFont-Bold);
      }

      .athleteFilterBox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: var(--size-4);
        .select-wrapper {
          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;

          @media (max-width: 640px) {
            width: 100%;
          }

          select {
            border: 1px solid #e4e4e4;
            border-radius: var(--size-2);
            padding: 13px 18px;
            padding-right: 43px;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;

            @media (max-width: 640px) {
              width: 100%;
            }

            option {
              font-size: 0.875rem;

              &:first-child {
                font-family: var(--eventFont-Bold);
              }
            }
          }

          &:after {
            font-family: "FontAwesome-Solid";
            font-size: 0.875rem;
            content: "\f078";
            color: var(--borderTable);
            position: absolute;
            right: 17px;
          }
        }
      }
    }

    .letterList {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: var(--size-4);
      background-color: var(--bgSecondary);
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      border-radius: var(--radius-3);
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;

      @media all and (min-width: 1280px) {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }

      .letter {
        cursor: pointer;
        padding: var(--size-1) var(--size-3);
        border-radius: var(--size-3);
        position: relative;

        @media all and (max-width: 640px) {
          padding: var(--size-1) var(--size-2);
        }

        &:before {
          content: "|";
          color: #e4e4e4;
          position: absolute;
          left: -1px;
        }

        &.c-active {
          background-color: var(--eventColor2);
          color: var(--text-over-eventColor2);
          &:before {
            display: none;
          }

          + .letter:before {
            display: none;
          }
        }

        &:first-child {
          &:before {
            display: none;
          }

          margin-left: 0;
        }
      }
    }

    .filterList {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: var(--size-1);

      .filter {
        background-color: var(--eventColor2);
        color: var(--text-over-eventColor2);
        padding: var(--size-1) var(--size-2);
        padding-right: var(--size-6);
        position: relative;
        border-radius: var(--radius-round);
        cursor: pointer;

        &:after {
          font-family: "FontAwesome-Solid";
          font-size: 1rem;
          content: "\f00d";
          position: absolute;
          top: 6px;
          right: 8px;
        }
      }
    }

    .navigation {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      padding: var(--size-3) var(--size-4);
      background-color: var(--bgSecondary);
      border-radius: var(--radius-3);

      @media (max-width: 768px) {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
      }

      .pagination {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: var(--size-2);
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        @media (max-width: 640px) {
          width: 100%;
        }

        @media (max-width: 768px) {
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
        }

        .isTeam {
          display: none;
        }

        &.isTeam {
          .isAthlete {
            display: none;
          }

          .isTeam {
            display: inline;
          }
        }

        .select-wrapper {
          margin-left: auto;
          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;

          @media (max-width: 640px) {
            width: 100%;
          }

          select {
            border: 1px solid #e4e4e4;
            border-radius: var(--size-2);
            padding: 11px 12px;
            padding-right: 43px;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;

            @media (max-width: 640px) {
              width: 100%;
            }

            option {
              font-size: 0.875rem;
            }
          }

          &:after {
            font-family: "FontAwesome-Solid";
            font-size: 0.875rem;
            content: "\f078";
            color: var(--borderTable);
            position: absolute;
            right: 17px;
          }
        }

        .button {
          border: 1px solid #e4e4e4;
          border-radius: var(--size-2);
          padding: 10px 0;
          color: transparent;
          background-color: transparent;
          font-size: 0;
          position: relative;
          width: 37px;
          text-align: center;
          cursor: pointer;

          &:after {
            font-family: "FontAwesome-Solid";
            font-size: 1rem;
            color: var(--borderTable);
          }

          &:hover {
            background-color: var(--eventColor2);
            border: 1px solid var(--eventColor2);

            &:after {
              color: var(--text-over-eventColor2);
            }
          }

          &.first:after {
            content: "\f100";
          }

          &.prev:after {
            content: "\f104";
          }

          &.next:after {
            content: "\f105";
          }

          &.last:after {
            content: "\f101";
          }
        }

        .page {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          padding: 0 var(--size-2);
          gap: var(--size-1);
          font-size: 0.85rem;

          @media (max-width: 640px) {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
          }

          .pageNumber,
          .lastPageNumber,
          .firstItem,
          .lastItem {
            font-family: var(--eventFont-Bold);
          }
        }

        .counts {
          .athletesCount,
          .nationsCount {
            margin-left: var(--size-1);
          }
        }
      }

      .gridSwitcher {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-left: var(--size-4);
        gap: var(--size-2);
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        @media (max-width: 640px) {
          width: 100%;
          margin-top: var(--size-3);
          margin-left: 0;
        }

        .tableView,
        .gridView {
          border: 1px solid #e4e4e4;
          border-radius: var(--size-2);
          padding: 10px 0;
          color: transparent;
          background-color: transparent;
          font-size: 0;
          position: relative;
          width: 37px;
          text-align: center;
          cursor: pointer;

          &:after {
            font-family: "FontAwesome-Solid";
            font-size: 1rem;
            color: var(--borderTable);
          }

          &.c-active {
            background-color: var(--eventColor2);
            border: 1px solid var(--eventColor2);
            &:after {
              color: var(--text-over-eventColor2);
            }
          }
        }

        .tableView {
          &:after {
            content: "\f0ca";
          }
        }

        .gridView {
          &:after {
            content: "\f009";
          }
        }
      }
    }

    > .counts {
      .athletesCount,
      .nationsCount {
        margin-right: var(--size-1);
      }
    }

    .counts {
      font-size: 0.875rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      .isTeam {
        display: none;
      }

      &.isTeam {
        .isAthlete {
          display: none;
        }

        .isTeam {
          display: inline;
        }
      }

      .athletesCount,
      .nationsCount {
        font-family: var(--eventFont-Bold);
      }

      .seperator:after {
        content: "•";
        margin: 0 var(--size-3);
      }
    }

    #athleteListPlaceholder {
      min-height: 120px;

      &.grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;

        @supports (display: grid) {
          display: grid;
          grid-gap: 1.5rem;
          grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));

          .athlete {
            margin: 0;
            @media all and (max-width: 640px) {
              justify-self: center;
              width: 100%;
            }
          }
        }
      }

      &:has(.isTeam) {
        &.grid {
          @supports (display: grid) {
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
          }
        }
      }

      > .contentitem {
        width: 100%;
      }

      .athlete {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        display: inline-block;
        height: 344px;
        -ms-flex-preferred-size: 180px;
            flex-basis: 180px;
        max-width: 180px;
        vertical-align: top;
        position: relative;
        border-radius: var(--size-2);
        -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
                box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);

        .photoAthlete {
          background: white url(../base/images/anonymous.jpg) center top
            no-repeat;
          width: 100%;
          height: 67%;
          background-position: top center;
          background-size: cover;
          border-top-left-radius: var(--size-2);
          border-top-right-radius: var(--size-2);

          &.team {
            background: white;
          }

          img {
            width: 100%;
            height: 100%;
          }
        }

        .person {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start;
          height: 33%;
          background: var(--bgTableEven);
          border-bottom-left-radius: var(--size-2);
          border-bottom-right-radius: var(--size-2);
        }

        .noc-element {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          font-size: 0.7rem;
        }

        .noc-column {
          padding: var(--size-3);
          padding-bottom: var(--size-2);
        }

        .name {
          font-family: var(--eventFont-Bold);
          font-size: 0.875rem;
          text-overflow: ellipsis;
          overflow: hidden;
          padding-left: var(--size-3);
          padding-right: var(--size-3);
          padding-bottom: var(--size-3);
        }

        .sport {
          position: absolute;
          right: 10px;
          bottom: 123px;

          .sporticonwrapper {
            border-radius: var(--size-1);
            background-color: white;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 6px;
          }
        }

        &.isTeam {
          height: 130px;
          max-width: 240px;

          .photoAthlete {
            display: none;
          }

          .person {
            height: 100%;
            border-radius: var(--size-2);
          }

          .sport {
            bottom: 10px;
          }
        }
      }
    }
  }

  /* NOC Profile */
  .countryInfo-selectedNation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background-color: var(--bgSecondary);
    padding: var(--size-4);
    border-radius: var(--radius-3);
    margin-bottom: var(--size-6);

    @media (max-width: 640px) {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: var(--size-3);
    }

    .country-profile {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;

      .flag {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        .noc-element {
          img {
            width: var(--size-8);
          }
        }
      }

      .headline {
        font-family: var(--eventFont-Bold);
        margin: 0;
        font-size: var(--size-5);
      }
    }

    .country-Info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: var(--size-3);
      font-size: 0.875rem;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;

      @media (max-width: 640px) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: var(--size-1);
      }
    }
  }

  .countryInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    .filter {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: var(--size-3);
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-bottom: var(--size-3);

      @media (max-width: 640px) {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }

      .medals,
      .gender {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: var(--size-2);
        background-color: var(--bgSecondary);
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        border-radius: var(--radius-3);
        -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
                box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
        gap: var(--size-2);

        .link {
          cursor: pointer;
          border-radius: var(--size-3);
          -webkit-transition: 300ms ease;
          transition: 300ms ease;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          height: var(--size-5);
          padding: 0 0.75rem;
          font-size: 0.85rem;
          color: var(--textColor);
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          text-indent: initial;

          &:before {
            display: none;
          }

          &.c-selected {
            background-color: var(--eventColor2);
            color: var(--text-over-eventColor2);
          }
        }
      }
    }

    .medalsbyCountry {
      .sportimage {
        margin-top: var(--size-3);
        position: relative;
        top: 5px;
      }

      .headline {
        margin-top: var(--size-3);
      }
    }
  }
}

.participantList {
  .eventList {
    margin-bottom: 5px;

    &:only-child {
      margin-bottom: 0;
    }

    div {
      vertical-align: top;
      display: inline-block;

      &.sportGroup {
        width: 100px;
      }
    }
  }

  td {
    vertical-align: top;
  }

  .name {
    width: 25%;
  }
  .gender {
    width: 51px;
  }

  .noc-element {
    top: 0 !important;
  }

  .birth {
    min-width: 115px;
    text-align: right;

    .sort-wrapper {
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
    }
  }

  .weight,
  .height {
    text-align: center;
    width: 57px;
  }
}

.participants {
  @media (min-width: 750px) and (max-width: var(--page-width)) {
    .athleteSearch,
    select[name="disciplineId"] {
      margin-left: 20px;
    }
  }

  a.athlete {
    color: #000;
  }

  .noAthletes {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
}

/*  modules/brackets */

/* bracket highlighting */
.BracketTables td.Bracket_Athlete.c-selected,
.BracketTables .Bracket_Athlete_Ranking.c-selected,
.brackets .navigation td.c-selected,
.bracketCompetitionContent .Bracket_Athlete.c-selected,
.BracketTablesRepechage td.Bracket_Athlete.c-selected a,
.BracketTablesRepechage .Bracket_Athlete_Ranking.c-selected a,
.BracketTables td.Bracket_Athlete.c-selected a,
.BracketTables .Bracket_Athlete_Ranking.c-selected a,
.brackets .navigation td.c-selected a,
.bracketCompetitionContent .Bracket_Athlete.c-selected a {
  color: #fff;
}

/* BRACKETS */
.Bracket,
div#BracketContainer {
  line-height: 1;

  table {
    position: static;
  }

  .bracketCompetition.c-live
    .bracket_Competition_List
    > .bracket_Competition_Status {
    background-color: var(--liveColor);
    color: white;
    border-radius: var(--size-1);
    padding: var(--size-1) var(--size-2);
    display: inline-block;
    font-family: var(--eventFont);
    font-size: 0.7rem;
    text-transform: uppercase;
  }

  .Bracket_Competition {
    a:has(.c-live) {
      text-decoration: none;
    }

    .c-live {
      background-color: var(--liveColor);
      color: white;
      padding: var(--size-1) var(--size-2);
      border-radius: var(--size-1);
      font-size: 0.7rem;
    }
  }
}

@media (max-width: 480px) {
  .Bracket .ui-tabs-selector .ui-tabs-content {
    padding: 0;
  }
}

.BracketTable {
  table-layout: fixed;

  td {
    border: none;
  }
}

.MainBracket .BracketTable {
  table-layout: auto;

  tbody tr:nth-child(even) {
    background: none;
  }
}

span.Bracket {
  overflow: hidden;
}

#BracketContainer th,
.MainBracket th {
  background: var(--eventColor2);
  color: var(--text-over-eventColor2);
  padding: 2px;
  border-radius: var(--radius-2);
  font-size: 0.875rem;
}

#BracketContainer .lines th,
.MainBracket .lines th {
  background: none;
}

.Bracket .BracketTables .BracketTable td.Bracket_Athlete,
.Bracket .BracketTables .BracketTable td.Bracket_Athlete_Ranking {
  border: 1px solid #9f9f9f;
  height: 28px;
  background-color: var(--evenRow);

  &.c-selected {
    background-color: var(--eventColor2) !important;
    color: var(--text-over-eventColor2) !important;

    a {
      color: var(--text-over-eventColor2);
    }
  }

  &.winner {
    font-weight: bold;
  }
}

.Bracket .BracketTables .BracketTable td.Bracket_Athlete,
.Bracket .BracketTables .BracketTable td.Bracket_Athlete_Ranking {
  @supports (-moz-appearance: none) {
    height: 30px;
  }
}

.Bracket .BracketTables .BracketTable td.Bracket_Athlete_Ranking {
  border: none;
  padding-top: 1px;
  background-color: transparent;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px;
}

.ConBracket .BracketTables .BracketTable {
  td.Bracket_Competition {
    text-align: left;
    height: 36px;
    white-space: nowrap;
    font-size: 0.875rem;

    > a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: var(--size-1);

      .result-code {
        font-size: 0.7rem;
        text-decoration: none;
      }

      > .sport-code {
        margin-left: auto;
        margin-right: 0;
      }

      > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        position: relative;
        top: 1px;
      }
    }

    /*todo: #331857*/
  }

  &.two {
    td.Bracket_Competition {
      > a {
        span:first-child {
          max-width: 600px;
        }
      }
    }
  }

  &.three {
    td.Bracket_Competition {
      > a {
        span:first-child {
          max-width: 391px;
        }
      }
    }
  }

  &.four {
    td.Bracket_Competition {
      > a {
        span:first-child {
          max-width: 293px;
        }
      }
    }
  }
}

.Bracket .BracketTables .BracketTable td.Bracket_Competition {
  @supports (-moz-appearance: none) {
    height: 29px;
    border: 1px solid transparent;
  }
}

.Bracket_Athlete_Flag .noc-element span {
  display: none;
}

.brackets table.brackets {
  border: 0 solid black;
  border-spacing: 0;
}

.brackets table.brackets td {
  height: 30px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 0px;
  empty-cells: show;
}

.brackets table.brackets td.lb {
  border-bottom: 1px solid black;
  vertical-align: bottom;
}

.brackets table.brackets td.lt {
  border-top: 1px solid black;
  vertical-align: top;
}

.brackets table.brackets td.lbl {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  padding-left: 20px;
  vertical-align: bottom;
}

.brackets table.brackets td.ll {
  border-left: 1px solid black;
}

.brackets table.brackets td.tb {
  vertical-align: bottom;
}

.brackets .navigation {
  margin-top: 10pt;
  border: 1px solid silver;
  border-spacing: 0px;
  border-collapse: collapse;
  width: auto;
}

.brackets .navigation td {
  padding: 15px;
  border: 1px solid silver;
  cursor: pointer;
}

.BracketTables td.Bracket_Athlete.c-selected,
.BracketTables .Bracket_Athlete_Ranking.c-selected,
.brackets .navigation td.c-selected {
  background-color: var(--eventColor2);
  color: var(--text-over-eventColor2);
}

.brackets .navigation td:hover {
  background-color: #e1e1e1;
}

.brackets .frame td.next,
.brackets .frame td.previous {
  border: 1px solid silver;
  cursor: pointer;
  width: 1%;
}

.brackets .frame td.next:hover,
.brackets .frame td.previous:hover {
  background-color: #e1e1e1;
}

.brackets th.heattitle {
  background-color: #ededed;
  color: #4b4b4b;
}

table.brackets td {
  padding: 2px;
  margin: 0;
  border: 0;
}

table.brackets tr.match-title td {
  padding-top: 40px;
  padding-bottom: 1px;
  font-weight: bold;
}

table.brackets tr.match-title-small td {
  padding-top: 4px;
  padding-bottom: 1px;
  font-weight: bold;
}

table.brackets tr.tiny {
  height: 1px;
  padding: 0;
}

table.brackets td.line {
  background-color: black;
}

table.brackets tr.tiny td {
  height: 1px;
  padding: 0;
}

table.brackets td.tiny {
  width: 1px;
  padding: 0px;
}

.tableHeadlines {
  font-weight: bold;
  margin-left: 12px;
  margin-top: 4px;
}

.Bracket_Athlete {
  padding: 0 1px 0 1px;
  &.c-linethrough {
    text-decoration: none;

    > span {
      text-decoration: line-through;
      opacity: 0.4;
      &.bracket-irm {
        text-decoration: none;
        opacity: 1;
        .sport-code {
          font-size: 1rem;
        }
      }
    }
  }
}

/* Qualification Bracket */
.bracketQuali {
  margin-left: 10px;
  float: left;
  overflow: hidden;
}

.bracketQuali .bracketThumbContainer {
  position: relative;
  float: left;
  width: 4000px;
}

.bracketRound {
  float: left;
  padding: 0;
  margin: 0;
  border: none 0;
}

.bracketGroup {
  padding: 0;
  margin: 0;
  border: none 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--size-3);
}

.bracketCompetition {
  float: none;
  clear: both;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  border: none 0;
  overflow: hidden;
  text-align: right;
}

.bracketResult {
  width: 271px; /*max-width 3 rounds*/
  overflow: hidden;
}

.bracketResult.two {
  width: 572px; /*max-width 2 rounds*/
  .bracket_Competition_QualiRule {
    max-width: 566px;
  }
}

.IndividualBracket.two .bracketHeader {
  width: 568px;
}

.bracketResult.three {
  width: 395px; /*max-width 3 rounds*/
  .bracket_Competition_QualiRule {
    max-width: 389px;
  }
}

.IndividualBracket.three .bracketHeader {
  width: 391px;
}

.bracketResult.four {
  width: 280px; /*max-width 4 rounds*/
  .bracket_Competition_QualiRule {
    max-width: 274px;
  }
}

.IndividualBracket.four .bracketHeader {
  width: 276px;
}

.bracketCompetition .bracketResult .Bracket_Athlete_Name {
  width: 138px;

  &.winner {
    font-family: var(--eventFont-Bold);
  }
}

.bracketCompetition .bracketResult.two {
  .Bracket_Athlete_Name {
    width: 270px;
  }

  .Bracket_Athlete_Qualification {
    width: 30px;
  }
}

.bracketCompetition .bracketResult.three {
  .Bracket_Athlete_Name {
    width: 240px;
  }

  .Bracket_Athlete_Qualification {
    width: 30px;
  }
}

.bracketCompetition .bracketResult.four {
  .Bracket_Athlete_Name {
    width: 130px;
  }

  .Bracket_Athlete_Qualification {
    width: 30px;
  }
}

.bracketCompetition .bracketResult.three .Bracket_Athlete_Name {
  width: 138px;
}

.bracketCompetition .bracketResult.four .Bracket_Athlete_Name {
  width: 70px;
}

.bracketResultTable {
  width: 100%;
  height: 100%;
  background-color: var(--bgSecondary);
  border-radius: var(--radius-2);

  td {
    padding: 0;
  }
}

.bracketNav {
  float: left;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none 0;
  width: 20px;
}

.bracketNav div {
  height: 50%;
  padding: 0;
  margin: 0;
  border: none 0;
}

.bracketHeader {
  background: var(--eventColor2);
  color: var(--text-over-eventColor2);
  padding: 2px;
  border-radius: var(--radius-2);
  font-size: 0.875rem;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--size-4);

  a {
    display: inline-block;
    width: 100%;
    color: var(--white);

    &:hover {
      color: var(--white);
    }
  }
}

.bracket_Competition_List {
  text-align: left;
  background: var(--eventColor2);
  color: var(--text-over-eventColor2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 36px;
  padding: 0 var(--size-2);
  border-top-left-radius: var(--size-2);
  border-top-right-radius: var(--size-2);
  font-size: 0.875rem;

  a span {
    color: var(--text-over-eventColor2);
  }
}

.bracket_Competition_QualiRule {
  text-align: left;
  font-size: 0.875rem;
  padding: var(--size-2);
  font-family: var(--eventFont-Bold);

  span {
    font-family: var(--eventFont);
  }
}

.bracket_Competition_QualiRule.line {
  border-bottom: solid 1px #9f9f9f;
}

.bracket_Competition_Detail {
  height: 27px;
  width: 18px;
  float: right;
  padding: 2px 5px 0 0;
  cursor: pointer;
}

.bracketCompetitionContent {
  .Bracket_Athlete {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--size-1);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: none;
    white-space: nowrap;
    background-color: var(--oddRow);
    padding: var(--size-2);

    &.c-selected {
      background-color: color-mix(
        in srgb,
        var(--eventColor1) 20%,
        transparent
      ) !important;
      color: var(--textColor) !important;

      a {
        color: var(--linkColor);
      }
    }

    &.winner {
      font-weight: bold;
    }

    &:nth-child(even) {
      background-color: var(--evenRow);
    }
  }

  .bracket-line {
    height: 1px;
    background-color: Gray;
    width: 100%;
  }

  .Bracket_Competition {
    padding: 0 5px;
    height: 30px;
  }

  .Bracket_Athlete_Name {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
  }

  .Bracket_Athlete_Name.winner {
    font-weight: bolder;
  }

  .Bracket_Athlete_Performance {
    text-align: right;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  .Bracket_Athlete_Qualification {
    text-align: right;
    overflow: hidden;
  }

  .Bracket_Athlete_Rank {
    text-align: right;
    width: var(--size-3);
    padding-right: var(--size-2);
  }
}

.bracket_Expander {
  display: none;
  position: absolute;
  border: solid 1px #9f9f9f;
  background-color: #e7e7e7;
}

/* Qualification Bracket */

/* Bracket - Construction */

.ConBracket .BracketTables .BracketTable {
  float: left;
  width: auto;
  border-spacing: 0px;
  margin: 0px;

  tr {
    background-color: var(--oddRow);
  }

  &.lines {
    > tbody {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;

      tr {
        height: 36px;
        max-height: 36px;
        min-height: 36px;
      }

      td {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
      }
    }
  }
}

.ConBracket .BracketTables .BracketTable {
  @supports (-moz-appearance: none) {
    &.lines {
      > tbody {
        display: initial;
        -webkit-box-orient: unset;
        -webkit-box-direction: unset;
        -ms-flex-direction: unset;
        flex-direction: unset;

        tr {
          height: 33px;
          max-height: 33px;
          min-height: 33px;
        }

        td {
          display: table-cell;
          -ms-flex-wrap: unset;
          flex-wrap: unset;
        }
      }
    }
  }
}

.ConBracket .BracketTables .BracketTable td.Bracket_Athlete {
  border: 1px solid transparent;
  height: 27px;
  background-color: var(--bgSecondary);
  border-radius: var(--radius-2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  &.c-selected {
    background-color: var(--eventColor2) !important;
    color: var(--text-over-eventColor2) !important;

    a {
      color: var(--text-over-eventColor2);
    }
  }

  &.winner {
    font-weight: normal;
    font-family: var(--eventFont-Bold);
  }
}

.ui-tabs-selector .ConBracket .BracketTables .BracketTable td.Bracket_Athlete {
  border: 1px solid var(--bgTableOdd);
}

.ConBracket .BracketTables .BracketTable td.Bracket_Athlete {
  @supports (-moz-appearance: none) {
    height: 30px;
  }
}

.ConBracket .BracketTables {
  float: left;
  left: 0;
  position: relative;
  width: 5000px;
}

.ConBracket .BracketTables .BracketTable .Bracket_Athlete_Flag {
  height: 22px;
  margin-right: 6px;
  position: relative;
  top: 2px;
}

.ConBracket .BracketTables .BracketTable .Bracket_Athlete_Flag {
  @supports (-moz-appearance: none) {
    top: 0;
  }
}

.ConBracket .BracketTables .BracketTable .Bracket_Athlete_Name {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  height: 22px;
  line-height: 22px;
  vertical-align: middle;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: var(--size-2);
  text-align: left;
}

.ConBracket {
  float: left;
  overflow: hidden;
  position: relative;
}

.ConBracket .BracketTables .BracketTable.four {
  width: 281px;
  min-width: 281px;
  max-width: 281px;
}

.ConBracket .BracketTables .BracketTable.three {
  width: 381px;
  min-width: 381px;
  max-width: 381px;
}

.ConBracket .BracketTables .BracketTable.two td,
.ConBracket .BracketTables .BracketTable.two {
  width: 576px;
  min-width: 576px;
  max-width: 576px;
}

@media (max-width: 480px) {
  .ConBracket .BracketTables .BracketTable.four,
  .ConBracket .BracketTables .BracketTable.three,
  .ConBracket .BracketTables .BracketTable.two {
    width: 281px;
    min-width: 281px;
    max-width: 281px;
  }
}

.ConBracket hr {
  padding: 0;
  margin: 0;
}

.ConBracket td.Bracket_Competition {
  padding: 0 5px 0 5px;
}

.ConBracket .Bracket_Athlete_Performance {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-align: right;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ConBracket .sport-code,
.ConBracket .seeding-information {
  font-size: 0.7rem;
  margin-right: var(--size-2);
}

.ConBracket .rightLine {
  border-right: solid 1px #9f9f9f;
  position: relative;
  bottom: 1px;
}

.ConBracket .rightLine {
  @supports (-moz-appearance: none) {
    position: initial;
    bottom: 0;
  }
}

.ConBracket .leftLine {
  border-left: solid 1px #9f9f9f;
}

.ConBracket .topLine {
  border-top: solid 1px #9f9f9f;
}

.ConBracket .bottomLine {
  border-bottom: solid 1px #9f9f9f;
}

.ConBracket .Bracket_Athlete_Standing {
  padding-right: 5px;
  width: 25px;
  display: inline-block;
  position: relative;
}

.ConBracket.IE .Bracket_Athlete_Standing img {
  height: 17px;
  width: 17px;
}

.ConBracket .Bracket_Athlete_Standing img {
  height: 18px;
  width: 18px;
  position: relative;
  top: 3px;
}

.BracketTable.lines th {
  background: none;
}

/*FF*/
.ConBracket .BracketTables .BracketTable.lines,
.ConBracket .BracketTables .BracketTable.lines td {
  max-width: 20px;
  min-width: 20px;
  width: 20px;
}

.ConBracket td,
.ConBracket tr {
  height: 33px;
  padding: 0;
}

.ConBracket td.Bracket_Athlete {
  padding: 0 5px 0px 5px;
}

.ConBracket .line {
  height: 1px;
}

.ConBracket td .quarter {
  width: 10px;
  height: 17px;
  float: left;
}

.ConBracket td .quarter.topLine,
.ConBracket td .quarter.bottomLine {
  height: 16px;
}

.ConBracket td .quarter.rightLine,
.ConBracket td .quarter.leftLine {
  width: 8px;
}

.ConBracket td .quarter.rightLine,
.ConBracket td .quarter.leftLine {
  @supports (-moz-appearance: none) {
    width: 9px;
  }
}

.ConBracket.IE .BracketTables .BracketTable.lines,
.ConBracket.IE .BracketTables .BracketTable.lines td {
  height: 36px;
}

.ConBracket.IE td,
.ConBracket.IE tr {
  height: 36px;
}

.ConBracket.IE td,
.ConBracket.IE tr {
  @supports (-moz-appearance: none) {
    height: 32px;
  }
}

.ConBracket.IE td.Bracket_Athlete {
  padding: 1px 5px 1px 8px;
}

.ConBracket.IE .line {
  margin-top: 0px;
  position: relative;
  right: 4px;
}

.ConBracket.IE .line {
  @supports (-moz-appearance: none) {
    margin-top: 3px;
    position: initial;
    right: 0;
  }
}

.ConBracket.IE .BracketTable.lines .line {
  margin-top: 0;
}

.ConBracket.IE td .quarter {
  height: 18px;
}

.ConBracket.IE td .quarter.topLine,
.ConBracket.IE td .quarter.bottomLine {
  height: 17px;
  width: 8px;
}

.ConBracket.IE td .quarter.topLine,
.ConBracket.IE td .quarter.bottomLine {
  @supports (-moz-appearance: none) {
    width: auto;
  }
}

.ConBracket.IE th,
.ConBracket.IE td {
  padding-bottom: 0px;
}

.ConBracket.IE th,
.ConBracket.IE td {
  @supports (-moz-appearance: none) {
    padding-bottom: 3px;
  }
}

.ConBracket.IE .BracketTable.lines td {
  padding-bottom: 0;
}

.ConBracket.IE td.Bracket_Competition {
  padding-bottom: 0px;
  padding-top: 0px;
}

.ConBracket.IE td.Bracket_Competition {
  @supports (-moz-appearance: none) {
    padding-bottom: 1px;
    padding-top: 2px;
  }
}

/* END Bracket - Construction */

/* Bracket Navigaion */
#BracketContainer {
  margin: 10px 0 20px 0;
  width: 100%;
  position: relative;

  .leftScroll,
  .rightScroll {
    height: 100%;
    width: 30px;
    display: block;
    background-color: var(--bgTableOdd);
    position: absolute;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;

    &.inactive {
      opacity: 0.4;
      cursor: auto;
    }
  }

  .rightScroll {
    right: 0;

    &:before {
      position: absolute;
      right: 7px;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      color: var(--linkColor);
      font-family: ST-Info-Icon-Font;
      font-size: 40px;
      content: "\f105";
    }
  }

  .leftScroll {
    &:before {
      position: absolute;
      right: 9px;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      color: var(--linkColor);
      font-family: ST-Info-Icon-Font;
      font-size: 40px;
      content: "\f104";
    }
  }
}
.Bracket {
  /* needed for js bracket scrolling*/
  #thumb_container {
    display: inline-block;
    width: calc(100% - 80px);
    overflow: hidden;
    white-space: nowrap;
    left: 40px;
    position: relative;

    table {
      float: none;
      display: inline-table;
      vertical-align: top;
    }

    .bracketRound {
      float: none;
      display: inline-block;
      vertical-align: top;
    }
  }
}

/* END Bracket Navigaion */

#nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 var(--size-3);
}

#nav #navitems {
  text-align: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 0.75rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--font-size-1);
  border-radius: var(--radius-round);
  background: var(--text-over-eventColor1);
  padding: var(--size-2);
  margin: 0 auto;
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);

  .navitem {
    border-radius: var(--radius-round);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;

    a {
      display: block;
      padding: var(--size-2) 0.75rem;
      color: var(--textColor);
      text-decoration: none;
    }

    &:hover {
      background-color: var(--text-over-eventColor2);
      -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
              box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
    }
    &.c-selected {
      padding: var(--size-2) 0.75rem;
      border-radius: var(--radius-round);
      background-color: var(--eventColor2);
      a {
        color: var(--text-over-eventColor2);
        text-decoration: none;
      }
    }
  }
}

#nav #navitemcurrent {
  display: none;
}

#nav.mobile {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: var(--size-3) 0;

  #navitemcurrent {
    display: block;
    padding: var(--size-3) 0.75rem;
    padding-right: 2.5rem;
    border-radius: var(--radius-round);
    background: var(--text-over-eventColor1);
    position: relative;

    &::after {
      content: "";
      background: url("images/dropdown.svg") no-repeat right center;
      background-size: 20px 20px;
      position: absolute;
      right: var(--size-3);
      width: 20px;
      height: 20px;
    }
  }

  #navitems {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    opacity: 0;
    border-radius: var(--radius-2);
    -webkit-box-shadow: none;
            box-shadow: none;
    margin: 0;
    padding: 0;
    -webkit-box-align: normal;
        -ms-flex-align: normal;
            align-items: normal;
    gap: var(--size-1);
    height: 0;

    .navitem {
      padding: var(--size-2) 0.75rem;

      a {
        padding: 0;
      }

      &:hover {
        border-radius: var(--radius-round);
        background-color: var(--eventColor2);
        -webkit-box-shadow: none;
                box-shadow: none;

        a {
          color: var(--text-over-eventColor2);
        }
      }
    }
  }
}

#nav.mobile.isopen {
  #navitemcurrent {
    &::after {
      -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
              transform: rotate(180deg);
    }
  }

  #navitems {
    padding: var(--size-2);
    margin-top: var(--size-1);
    opacity: 1;
    height: auto;
  }
}

.relatedInformations {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: var(--size-2);
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
  padding: 0 var(--size-3);
  background-color: var(--bgSecondary);
  position: relative;
  font-size: 0.9rem;
  margin-bottom: var(--size-4);

  @media all and (max-width: 480px) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }

  a {
    text-decoration: none;
  }

  /* back to schedule */
  > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--size-2);
    background-color: var(--eventColor2);
    color: var(--text-over-eventColor2) !important;
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-round);
    margin-right: var(--size-5);

    @media all and (max-width: 480px) {
      margin-right: 0;
      margin-left: var(--size-5);
    }

    &:before {
      font-family: "FontAwesome-Solid";
      content: "\f053";
      font-size: 0.7rem;
    }

    &:hover {
      background-color: var(--buttonColorHover);
    }
  }

  > .relatedinfo-selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 70px;

    .icon {
      display: none;
    }

    .RelatedInfoItem {
      font-family: var(--eventFont-Bold);
      opacity: 0.65;
      margin: 0 var(--size-3);
      margin-bottom: 3px;
      text-align: center;
      border-bottom: 3px solid transparent;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: 0.875rem;

      a {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        cursor: pointer;
      }
      &.c-selected {
        opacity: 1;
        border-bottom: 3px solid var(--buttonColorHover);
        a {
          color: var(--buttonColorHover);
        }
      }

      &:hover {
        opacity: 1;

        a {
          color: var(--buttonColorHover);
        }
      }
    }
  }

  details {
    position: relative;
    display: inline-block;
    height: 65px;
    padding-bottom: 5px;
    margin-left: auto;

    > a {
      display: none;

      @media all and (max-width: 480px) {
        display: block;
        position: absolute;
        min-width: calc(100vw - 4rem);
        background-color: #fff;
        left: -1rem;
        top: 70px;
        padding: 0.6rem 1rem;
        border: 1px solid #ccc;
        border-radius: var(--size-2);
        border-bottom: 1px solid var(--bgTableOdd);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        -webkit-box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.05);
                box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.05);
        z-index: 1001;
        display: none; /* taste */
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-family: var(--eventFont-Bold);
        font-size: 0.875rem;

        &::before {
          font-family: "FontAwesome-Solid";
          content: "\f053";
          position: absolute;
          right: 1rem;
        }
      }
    }

    > summary {
      cursor: pointer;
      list-style: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      font-family: var(--eventFont-Bold);
      opacity: 0.65;
      font-size: 0.875rem;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: var(--size-1);

      &:hover {
        color: var(--buttonColorHover);
        opacity: 1;
      }

      &::-webkit-details-marker {
        display: none;
      }

      &:after {
        font-family: "FontAwesome-Solid";
        content: "\f078";
        font-size: 0.7rem;
      }
    }

    .icon {
      display: none;
    }

    &[open] {
      > summary {
        &:after {
          -webkit-transform: rotate(180deg);
              -ms-transform: rotate(180deg);
                  transform: rotate(180deg);
        }
      }

      > div {
        position: absolute;
        right: 0;
        background: #fff;
        border: 1px solid #ccc;
        -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
                box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
        border-radius: var(--size-2);
        z-index: 1000;
        top: calc(100% - 20px);
        display: block;
        min-width: 220px;

        @media all and (max-width: 480px) {
          right: initial;
          left: -1rem;
          min-width: calc(100vw - 2rem);
          top: calc(100%);
        }

        .RelatedInfoItem {
          width: 100%;

          @media all and (max-width: 480px) {
            font-size: 0.85rem;
          }

          a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1rem;
            text-decoration: none;
            color: inherit;

            &:hover {
              background-color: var(--buttonColorHover);
              color: var(--text-over-eventColor2);
            }

            @media all and (max-width: 480px) {
              border-bottom: 1px solid var(--bgTableOdd);
            }
          }

          &:first-child a {
            border-top-left-radius: var(--size-2);
            border-top-right-radius: var(--size-2);

            @media all and (max-width: 480px) {
              margin-top: 0.5rem;
              border-top-left-radius: 0;
              border-top-right-radius: 0;
            }
          }

          &:last-child a {
            border-bottom-left-radius: var(--size-2);
            border-bottom-right-radius: var(--size-2);

            @media all and (max-width: 480px) {
              margin-bottom: 0.5rem;
              border-bottom-left-radius: 0;
              border-bottom-right-radius: 0;
              border-bottom: none;
            }
          }

          &.c-selected a {
            div {
              color: var(--buttonColorHover);
              font-family: var(--eventFont-Bold);
            }

            &:hover div {
              color: var(--text-over-eventColor2);
            }
          }
        }
      }
    }
  }

  /* control on what to show when in terms of screen size */

  > .relatedinfo-selector {
    @media all and (max-width: 480px) {
      margin-right: auto;

      .RelatedInfoItem {
        display: none;
        &.c-selected {
          display: block !important;
          opacity: 1;
          text-transform: uppercase;
          border-bottom: none;
          margin: 0;

          a {
            color: var(--textColor);
          }
        }
      }
    }

    .RelatedInfoItem {
      @media all and (max-width: 1100px) {
        &:nth-child(n + 7) {
          display: none;
        }
      }

      @media all and (max-width: 900px) {
        &:nth-child(n + 6) {
          display: none;
        }
      }

      @media all and (max-width: 800px) {
        &:nth-child(n + 5) {
          display: none;
        }
      }

      @media all and (max-width: 700px) {
        &:nth-child(n + 4) {
          display: none;
        }
      }

      @media all and (max-width: 600px) {
        &:nth-child(n + 3) {
          display: none;
        }
      }

      @media all and (max-width: 500px) {
        &:nth-child(n + 2) {
          display: none;
        }
      }
    }

    /* hide the "more" dropdown toggle when not enough items exist to fill it */
    &:not(:has(.RelatedInfoItem:nth-child(7))) {
      @media all and (min-width: 901px) {
        + details {
          display: none;
        }
      }
    }

    &:not(:has(.RelatedInfoItem:nth-child(6))) {
      @media all and (min-width: 801px) {
        + details {
          display: none;
        }
      }
    }

    &:not(:has(.RelatedInfoItem:nth-child(5))) {
      @media all and (min-width: 701px) {
        + details {
          display: none;
        }
      }
    }

    &:not(:has(.RelatedInfoItem:nth-child(4))) {
      @media all and (min-width: 601px) {
        + details {
          display: none;
        }
      }
    }

    &:not(:has(.RelatedInfoItem:nth-child(3))) {
      @media all and (min-width: 501px) {
        + details {
          display: none;
        }
      }
    }

    &:not(:has(.RelatedInfoItem:nth-child(2))) {
      @media all and (max-width: 500px) {
        + details {
          display: none;
        }
      }
    }

    + details {
      @media all and (min-width: 1101px) {
        display: none;
      }

      @media all and (max-width: 480px) {
        padding-bottom: 0;
        margin-left: initial;

        summary {
          color: transparent;
          position: relative;
          opacity: 1;

          &:after {
            color: var(--linkColor);
            font-size: var(--size-5);
            content: "\f0c9";
            -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                    transform: rotate(0deg);
            position: absolute;
            left: 0;
          }
        }

        &[open] summary:after {
          content: "\f00d";
        }
      }

      .relatedinfo-selector .RelatedInfoItem {
        @media all and (min-width: 901px) {
          &:nth-child(-n + 6) {
            display: none;
          }
        }

        @media all and (min-width: 801px) {
          &:nth-child(-n + 5) {
            display: none;
          }
        }

        @media all and (min-width: 701px) {
          &:nth-child(-n + 4) {
            display: none;
          }
        }

        @media all and (min-width: 601px) {
          &:nth-child(-n + 3) {
            display: none;
          }
        }

        @media all and (min-width: 501px) {
          &:nth-child(-n + 2) {
            display: none;
          }
        }

        @media all and (min-width: 500px) {
          &:nth-child(-n + 1) {
            display: none;
          }
        }
      }
    }
  }
}

.sportmessage {
  &:not(:empty) {
    margin-top: var(--size-4);
    font-size: 0.875rem;
    color: #d30c0c;
    background-color: #fff1f1;
    border: 1px solid #f1dbdb;
    padding: var(--size-1) var(--size-2);
    border-radius: var(--size-2);
  }
}

div.noc-element,
a.noc-element,
span.noc-element {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--size-1);
  img {
    position: relative;
    width: var(--size-5);
    border: 1px solid rgba(0, 0, 0, 0.125);
  }
}

th.noc-column {
  width: var(--size-9);

  @media all and (max-width: 700px) {
    width: 35px;
  }
}

td.noc-column {
  width: var(--size-9);
  font-size: 0.775rem;
  text-align: left;

  @media all and (max-width: 700px) {
    width: 35px;
    text-align: center;
  }

  &:has([title="RUS"]) {
    text-align: left;

    @media all and (max-width: 700px) {
      text-align: center;
    }
  }

  a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--size-1);
  }

  img {
    width: var(--size-5);
    border: 1px solid rgba(0, 0, 0, 0.125);
  }
}

/*  modules/boxes */

.widgets,
.boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-2);

  @media (max-width: 1280px) {
    grid-template-columns: 1fr;
    gap: var(--size-3);
  }

  .default-table {
    min-width: 100%;

    tr:nth-child(odd) td {
      background-color: var(--bgTableOdd);
    }

    .gold,
    .silver,
    .bronze {
      text-align: center;
    }

    .rank {
      text-align: left;
    }

    td.noc-column > a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: var(--size-1);
    }

    th.rank {
      width: var(--size-7);
    }
  }

  .boxItem {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    padding: var(--size-3);
    background-color: var(--bgSecondary);
    -webkit-transition: all ease-in-out 0.5s;
    transition: all ease-in-out 0.5s;
    border-radius: var(--radius-3);

    .header {
      font-family: var(--eventFontAccent);
      font-size: var(--size-7);
      line-height: 1;
      margin-bottom: var(--size-2);
    }

.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    .record + .record,
    .offComm + .offComm,
    .medalsToday + .medalsToday,
    .comp + .comp {
        border-top: 2px solid var(--bgMain);
        margin-top: var(--size-3);
        padding-top: var(--size-3);
      }

      .comp {
        > b {
          font-weight: normal;
          font-family: var(--eventFont-Bold);
          margin-bottom: var(--size-2);
        }

        > a,
        > div {
          font-size: 0.875rem;
        }
      }
    }

    &.current,
    &.last {
      border: 1px solid var(--currentInfoCurrentHeader);

      .header {
        color: var(--currentInfoCurrentHeader);
      }

      .content .comp {
        > div:first-of-type:not(.periodInformation) {
          margin-top: var(--size-2);
        }

        > div:first-of-type ~ div:nth-child(even) {
          background-color: var(--bgTableOdd);
        }

        > div {
          padding: var(--size-1);
        }

        > div,
        .part {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          gap: var(--size-2);
        }

        .medal {
          width: var(--size-3);
          height: var(--size-3);
        }

        .part {
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;

          .rank {
            width: var(--size-3);
          }

          > a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
          }
        }

        .periodInformation {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: end;
              -ms-flex-pack: end;
                  justify-content: flex-end;
          font-family: var(--eventFontAccent);
          font-size: var(--size-3);
        }

        .result {
          text-align: right;
        }

        .clear {
          display: none;
        }
      }
    }

    &.last {
      border: 1px solid var(--currentInfoLastHeader);

      .header {
        color: var(--currentInfoLastHeader);
      }
    }

    &.next {
      border: 1px solid var(--currentInfoNextHeader);

      .header {
        color: var(--currentInfoNextHeader);
      }

      .startTime {
        margin-top: 0.5rem;
        font-family: var(--eventFont-Bold);
        text-align: right;
      }
    }

    &:empty {
      display: none;
    }

    &.medallist {
      .header {
        font-size: 0.875rem;
        font-family: var(--eventFont-Bold);
        margin-bottom: var(--size-2);
      }
    }

    .medalsToday {
      img.medal {
        width: var(--size-3);
      }
    }
  }
}

.datepicker {
  background-color: var(--bgSecondary);
  border-radius: var(--radius-3);

  @media (max-width: 1280px) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
  }

  table.detailed {
    width: initial;
    padding: var(--size-3) var(--size-5);
  }

  th.month {
    text-align: left;
    padding: 0 var(--size-2) var(--size-2);
  }

  th.dayHead_ALL {
    font-family: var(--eventFontAccent);
    font-size: var(--size-5);
    padding: var(--size-2);
    vertical-align: bottom;

  }

  th.dayHead,
  th.dayHead_Medal {
    font-family: var(--eventFontAccent);
    font-size: var(--size-5);
    padding: 0 var(--size-2);
    width: 2.5rem;
    min-width: 2.5rem;

    a {
      text-decoration: none;
    }

.dotDate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: var(--size-5);
    height: var(--size-5);
    padding: var(--size-2);
    border-radius: var(--radius-round);
    border: 1px solid var(--bgSecondary);
}

&.c-selected .dotDate,
&:hover .dotDate {
    border-color: var(--textColor);
}
  }

.c-current-day {
    .dotDate

{
    background-color: color-mix( in srgb, var(--eventColor1Light) 30%, transparent );
}

}

  th.dayHead_None {
    font-family: var(--eventFontAccent);
    font-size: var(--size-5);
    padding: 0 var(--size-2);
    opacity: 0.25;
    cursor: default;
    width: 2.5rem;
    min-width: 2.5rem;

    .dotDate {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: var(--size-5);
      height: var(--size-5);
      padding: var(--size-2);
      border-radius: var(--radius-round);
      border: 1px solid var(--bgSecondary);
    }
  }

  th.dayHead_Medal {
    .dotDate {
      position: relative;
      padding-left: 0.7rem;
      padding-right: 0.3rem;
    }

    .dotDate:before {
      position: absolute;
      left: 5px;
      content: "";
      width: var(--size-2);
      height: var(--size-2);
      display: block;
      background-image: url(images/medals/Gold.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
}

.gameProgress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: var(--size-5);

  /* left */
  .competitors {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    .competitor {
      border-top-left-radius: var(--size-2);
      border-bottom-left-radius: var(--size-2);
      -webkit-box-flex: 0;
          -ms-flex: 0 0 var(--size-7);
              flex: 0 0 var(--size-7);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      padding: 0 var(--size-5);

      &.timeline {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 var(--size-5);
                flex: 0 0 var(--size-5);
      }
    }

    .timeline {
      background-color: transparent;
    }

    .athlete_name {
      font-weight: bold;
    }

    .noc-element {
      margin-right: 0.4em;
      line-height: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      span {
        font-size: 0.75rem;
      }
    }
  }

  /* right */
  .timelines {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    .first {
      border-top-right-radius: var(--size-2);
      border-bottom: 1px solid var(--borderTable);
    }

    .second {
      border-bottom-right-radius: var(--size-2);
      border-top: 1px solid var(--borderTable);
    }

    .timeline {
      .period {
        border-top: 2px solid var(--bgMain);
        border-bottom: 2px solid var(--bgMain);
      }
    }

    .first,
    .second,
    .timeline {
      .period {
        position: relative;
        overflow: visible;
      }
    }

    .competitor {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 var(--size-7);
              flex: 0 0 var(--size-7);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      &.timeline {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 var(--size-5);
                flex: 0 0 var(--size-5);
        position: relative;

        &:before {
          content: " ";
          width: 100%;
          height: 1px;
          border-top: 1px solid #e1e1e1;
          position: absolute;
          top: 50%;
          left: 0;
        }

        .period {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          font-size: 0.7rem;
          color: var(--borderTable);
          text-transform: uppercase;
          border-left: 5px solid var(--bgMain);
          border-right: 5px solid var(--bgMain);

          &:first-child {
            border-left: none;
          }

          &:last-child {
            border-right: none;
          }

          .name,
          .endTime {
            background-color: var(--bgMain);
            padding: 0 5px;
          }

          .endTime {
            text-wrap : nowrap;
          }

          .name {
            padding-right: 0;
          }
        }
      }

      &.first {
        .action {
          &:after {
            content: "";
            width: 2px;
            height: 7px;
            background-color: var(--borderTable);
            position: absolute;
            left: -1px;
            bottom: -8px;
          }

          &.OG {
            bottom: -28px;

            &:after {
              top: -8px;
              bottom: initial;
            }
          }
        }
      }

      &.second {
        .action {
          &:after {
            content: "";
            width: 2px;
            height: 7px;
            background-color: var(--borderTable);
            position: absolute;
            left: -1px;
            top: -8px;
          }

          &.OG {
            top: -28px;

            &:after {
              top: initial;
              bottom: -8px;
            }
          }
        }
      }
    }

    .period {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      position: relative;
    }
  }

  .action {
    position: absolute;
    cursor: pointer;
    overflow: visible;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;

    &:before {
      background: none;
      position: absolute;
      left: -0.5em;
      top: 2px;
      display: block;
      width: 1em;
      height: 1em;
      background-color: var(--linkColor);
      border-radius: var(--radius-round);
      border: 1px solid var(--bgSecondary);
      content: "";
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      -webkit-transform-origin: center;
          -ms-transform-origin: center;
              transform-origin: center;
      z-index: 10;
    }

    &:hover {
      &:before {
        -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
                transform: scale(1.5);
      }

      .details {
        display: block;
      }
    }

    .details {
      display: none;
      position: absolute;
      top: 2em;
      right: -2em;
      min-width: 12em;
      z-index: 20;
      -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;
              box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;

      .top {
        padding: var(--size-2);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        background-color: var(--eventColor2);
        color: var(--text-over-eventColor2);
        font-family: var(--eventFontAccent);
        text-align: left;
        border-top-left-radius: var(--radius-2);
        border-top-right-radius: var(--radius-2);
      }

      .middle {
        background-color: var(--bgSecondary);
        padding: var(--size-2);
        padding-bottom: 0;
        font-size: 0.875rem;
      }

      .bottom {
        background-color: var(--bgSecondary);
        padding: var(--size-2);
        padding-top: 0;
        border-bottom-left-radius: var(--radius-2);
        border-bottom-right-radius: var(--radius-2);
        font-size: 0.875rem;
        font-family: var(--eventFont-Bold);
      }

      .bib {
        margin-right: var(--size-1);
        font-family: var(--eventFont-Bold);
      }
    }

    &.penalty {
      &:before {
        top: -0.3em;
        width: 2em;
        height: 2em;
        background: none;
        background-image: url("../base/images/sports/whistle.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-transform-origin: center;
            -ms-transform-origin: center;
                transform-origin: center;
      }
    }
  }

  .period {
    &:first-child {
      .action {
        .details {
          right: initial;
          left: -2em;
        }
      }
    }
  }
}

.h2h-comparison {
  width: 100%;
  overflow-x: auto;
  position: relative;

  .h2h-header.custom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--size-1);
    background-color: var(--eventColor2);
    color: var(--text-over-eventColor2);
    border-top-left-radius: var(--radius-3);
    border-top-right-radius: var(--radius-3);
    padding: var(--size-2) 0;

    .competitor {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;

      > div {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        text-align: center;
      }
    }

    .description {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 var(--size-13);
              flex: 0 0 var(--size-13);
      @media all and (max-width: 640px) {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 var(--size-12);
                flex: 0 0 var(--size-12);
      }
    }
  }

  .h2h-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2px;
  }

  .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--size-1);
    background-color: var(--bgSecondary);
    padding: var(--size-2);

    &.first {
      border-top-left-radius: var(--size-2);
      border-top-right-radius: var(--size-2);
    }

    &.second {
      border-bottom-left-radius: var(--size-2);
      border-bottom-right-radius: var(--size-2);
    }

    .competitor {
      font-family: var(--eventFontAccent);
      font-size: var(--size-5);
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      @media all and (max-width: 640px) {
        font-size: var(--font-size-2);
      }

      > div {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        text-align: center;
      }

      &.first {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;

        @media all and (max-width: 640px) {
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: flex-start;
        }
      }

      &.second {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;

        @media all and (max-width: 640px) {
          -webkit-box-pack: end;
              -ms-flex-pack: end;
                  justify-content: flex-end;
        }
      }
    }

    .description {
      text-align: center;
      font-size: 0.875rem;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 var(--size-13);
              flex: 0 0 var(--size-13);

      @media all and (max-width: 640px) {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 var(--size-12);
                flex: 0 0 var(--size-12);
      }
    }
  }

  &.mobile-support {

    .ui-tabs-selector,
    .description.twice {
      display: none;
    }
    &.h2h-c-h-12 {
      @media all and (max-width: 1200px) {
        .ui-tabs-selector,
        .description.twice {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .description:not(.twice),
        .competitor.second {
          display: none;
        }
      }
      @media all and (min-width: 1200px) {
        .competitor {
          display: -webkit-box !important;
          display: -ms-flexbox !important;
          display: flex !important;
        }
      }
    }
    &.h2h-c-h-11 {
      @media all and (max-width: 1100px) {
        .ui-tabs-selector,
        .description.twice {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .description:not(.twice),
        .competitor.second {
          display: none;
        }
      }
      @media all and (min-width: 1100px) {
        .competitor {
          display: -webkit-box !important;
          display: -ms-flexbox !important;
          display: flex !important;
        }
      }
    }
    &.h2h-c-h-10 {
      @media all and (max-width: 1000px) {
        .ui-tabs-selector,
        .description.twice {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .description:not(.twice),
        .competitor.second {
          display: none;
        }
      }
      @media all and (min-width: 1000px) {
        .competitor {
          display: -webkit-box !important;
          display: -ms-flexbox !important;
          display: flex !important;
        }
      }
    }
    &.h2h-c-h-9 {
      @media all and (max-width: 900px) {
        .ui-tabs-selector,
        .description.twice {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .description:not(.twice),
        .competitor.second {
          display: none;
        }
      }
      @media all and (min-width: 900px) {
        .competitor {
          display: -webkit-box !important;
          display: -ms-flexbox !important;
          display: flex !important;
        }
      }
    }
    &.h2h-c-h-8 {
      @media all and (max-width: 800px) {
        .ui-tabs-selector,
        .description.twice {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .description:not(.twice),
        .competitor.second {
          display: none;
        }
      }
      @media all and (min-width: 800px) {
        .competitor {
          display: -webkit-box !important;
          display: -ms-flexbox !important;
          display: flex !important;
        }
      }
    }
    &.h2h-c-h-7 {
      @media all and (max-width: 700px) {
        .ui-tabs-selector,
        .description.twice {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .description:not(.twice),
        .competitor.second {
          display: none;
        }
      }
      @media all and (min-width: 700px) {
        .competitor {
          display: -webkit-box !important;
          display: -ms-flexbox !important;
          display: flex !important;
        }
      }
    }
    &.h2h-c-h-6 {
      @media all and (max-width: 600px) {
        .ui-tabs-selector,
        .description.twice {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .description:not(.twice),
        .competitor.second {
          display: none;
        }
      }
      @media all and (min-width: 600px) {
        .competitor {
          display: -webkit-box !important;
          display: -ms-flexbox !important;
          display: flex !important;
        }
      }
    }
    &.h2h-c-h-5 {
      @media all and (max-width: 500px) {
        .ui-tabs-selector,
        .description.twice {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .description:not(.twice),
        .competitor.second {
          display: none;
        }
      }
      @media all and (min-width: 500px) {
        .competitor {
          display: -webkit-box !important;
          display: -ms-flexbox !important;
          display: flex !important;
        }
      }
    }
  }
}

.scoredevInner + .h2h-comparison {
  margin-top: var(--size-3);
}

/* modules/intermediateTab */

.intermediateTabContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;

  .toggleSwitch {
    margin-top: var(--size-4);
    margin-bottom: var(--size-2);

    .slider {
      right: 0;
      width: auto;
      white-space: nowrap;

      &:after {
        opacity: 1;
      }
    }

    input {
      &:checked + .slider:before {
        width: auto;
        background-color: var(--liveColor);
        z-index: -1;
      }

      &:checked + .slider:after {
        opacity: 0;
      }

      &:checked + .slider {
        padding-left: 0;
        text-align: center;
        width: auto;
        white-space: nowrap;
        color: white;
        padding: 0 10px;
        font-size: 0.65rem;
        line-height: 20px;
        text-transform: uppercase;
      }
    }
  }

  br {
    display: none;
  }
}

.intermediateTabSection {
    width: 100%;
    position: relative;
    background-color: lightgray;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    overflow: hidden;
    border-radius: var(--radius-round);
    background: var(--text-over-eventColor1);
    margin: 0 auto;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
    padding: var(--size-3) 0;

    @media all and (max-width: 800px) {
        padding: var(--size-2) 0;
    }
}

.intermediateTabStrip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  min-width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  z-index: 2;
}

.intermediateTab {
    color: rgba(0, 0, 0, 0.75);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    place-items: center;
    cursor: pointer;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(100% / var(--totalCards));
            flex: 0 0 calc(100% / var(--totalCards));
    border-radius: 12px;
    position: relative;
    z-index: 2;
    font-size: 0.875rem;
    font-family: var(--eventFont-Bold);
    &.c-live {
    color: var(--liveColor);
  }

  .center div {
    &:last-child {
      font-family: var(--eventFont);
      font-size: 0.75rem;
    }
  }
}

.intermediateTab:hover {
  text-decoration: underline;
}

.scrollerDesign {
  position: absolute;
  left: calc(100% / var(--totalCards) * var(--x-value) + 0.4rem);
  height: calc(100% - var(--size-3));
  width: calc(100% / var(--totalCards) * var(--range) - 0.9rem);
  background: linear-gradient(135deg, #def6f8 0%, #e3f0f1 35%, #def6f8 100%);
  border-radius: var(--radius-round);
  z-index: 1;
  -webkit-transition: left 0.3s ease;
  transition: left 0.3s ease;
  pointer-events: auto;
  border: 1px solid #dfebeb;

  -webkit-box-shadow: inset 6px 5px 8px rgba(255, 255, 255, 0.5);

          box-shadow: inset 6px 5px 8px rgba(255, 255, 255, 0.5);

  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
            box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
    -webkit-filter: blur(10px);
            filter: blur(10px);
  }
}

.intermediateTabScroller {
  background: rgb(1, 1, 1, 0);
  z-index: 3;
  border: none;
  position: absolute;
  left: calc(100% / var(--totalCards) * var(--x-value));
  height: 100%;
  width: calc(100% / var(--totalCards) * var(--range));
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-transition: left 0.3s ease;
  transition: left 0.3s ease;
}

.intermediateTabScroller.it-dragging {
  -webkit-transition: none;
  transition: none;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.intermediateTabSection.has-overflow-left::before,
.intermediateTabSection.has-overflow-right::after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 4;
  /*  font-size: 0.75rem;*/
  font-size: 2.3rem;
  color: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.intermediateTabSection.has-overflow-left::before {
  /*  content: "\25C0";*/
  /*  content: "\00AB";*/
  /*  content: "\1F894";*/
  /*  content: "\FF5F";*/
  /*  content: "\2E28";*/
  /*  content: "\2B98";*/
  /*  content: "\2B9C";*/
  /*  content: "\3008";*/
  /*  content: "\300A";*/
  content: "(";
  left: 0.3rem;
}

.intermediateTabSection.has-overflow-right::after {
  content: ")";
  right: 0.3rem;
}

/* modules/timeLine */

.timeLine {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 120px;
  gap: 2%;
  .noc-info {
    .noc-empty {
      height: 25px;
    }
  }
  .period-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    gap: 2%;
    .period-item {
      width: 48%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      .period-title {
        text-align: center;
        height: 40px;
      }
      .period-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 20px;
        .period-actions {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          position: relative;
          &:before {
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 1px;
            background: #000;
            z-index: -1;
          }
          .action-team-first {
            position: absolute;
            top: -17px;
          }
          .action-team-second {
            position: absolute;
            top: 17px;
          }
        }
      }
    }
  }
}

.groupPanel {
    &.static {
        .header {
            cursor: inherit;
        }
    }
  .header {
    border-top-left-radius: var(--size-2);
    border-top-right-radius: var(--size-2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: var(--eventColor2);
    padding: var(--size-3);
    color: var(--text-over-eventColor2);
    cursor: pointer;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    a {
      color: var(--text-over-eventColor1);

      &:hover {
        color: var(--text-over-eventColor1);
      }
    }

    .text {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;

      .Title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: var(--size-2);

        .Image {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          background-color: var(--text-over-eventColor1);
        }
      }

      .SubTitle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: var(--size-2);
        .relatedinfo-selector.schedule {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }
      }
    }

    .arrow {
      position: relative;
      margin-right: var(--size-2);
      width: var(--size-3);
      height: var(--size-3);

      &:before {
        position: absolute;
        right: var(--size-3);
        font-family: ST-Info-Icon-Font;
        font-size: var(--size-3);
        content: "\f0da";
        -webkit-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
                transform: rotate(270deg);
        right: 0;
        top: 0;
      }
    }
  }

  .content {
    padding: var(--size-3);
    border: 1px solid var(--eventColor2);
    border-top: none;
    border-bottom-left-radius: var(--size-2);
    border-bottom-right-radius: var(--size-2);
  }

  .group {
    margin-bottom: var(--size-2);
    background-color: var(--bgSecondary);
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
    border-radius: var(--size-2);

    .scheduleItem {
      border: 1px solid var(--bgTableOdd);
    }

    > .header {
      padding: var(--size-3);
      border-top-left-radius: var(--size-2);
      border-top-right-radius: var(--size-2);
      border: 1px solid var(--bgTableOdd);
      background-color: var(--bgSecondary);
      color: var(--textColor);
      font-family: var(--eventFont-Bold);
    }

    > .content {
      padding: var(--size-3);
      border: 1px solid var(--bgTableOdd);
      border-top: none;
    }

    &.collapsed {
      .arrow:before {
        -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
                transform: rotate(90deg);
      }

      .header {
        border-radius: var(--size-2);
      }

      .content {
        visibility: collapse;
      }
    }

    .group {
      padding: 0;
      -webkit-box-shadow: none;
              box-shadow: none;

      > .header {
        background-color: lightgray;
        color: var(--textColor);
        border: none;
      }

      > .content {
        border: 1px solid lightgray;
        border-top: none;
      }
    }
  }
}

.ResultList {
  .playByPlay {
    position: relative;

    .groupPanel {
      clear: both;
    }

    .pbpName {
      min-width: auto;
      padding-left: 10px;
      text-align: left;
      width: 31%;

      > .athleteLink {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 24px;

        ~ .athleteLink {
          margin-top: 5px;
        }
      }

      .assistsPlayer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        .bibColoredJersey {
          margin-right: 2px;
        }

        .assist-link {
          margin: 0 2px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
      }
    }

    .pbpResult {
      min-width: 40px;
      width: 40px;

      .LeftFloat {
        width: 20px !important;
      }

      .c-a-c {
        width: 5px !important;

        + .LeftFloat {
          text-align: left !important;
          padding-left: 2px;
        }
      }

      .result {
        text-align: right;
        display: inline-block;
        width: calc(50% - 4px);
        padding-right: 2px;

        @media all and (max-width: 750px) {
          font-size: 80%;
          width: calc(50% - 3px);
          padding-right: 2px;

          &.left {
            padding-right: 2px;
          }
        }
      }

      .middle.separator {
        width: 2px !important;
        display: inline-block;
      }

      @media all and (max-width: 750px) {
        min-width: initial;
      }
    }

    @media all and (max-width: 400px) {
      font-size: 80%;
    }
  }

  th.result_OneTeam {
    text-align: left;
  }

  .result_OneTeam {
    width: 35%;

    .athleteLink .noc-element {
      margin-right: 3px;
      top: 1px;
    }
  }

  .pbpJersey {
    width: 35px;
  }

  td.pbpJersey {
    position: relative;

    .bibColoredJersey {
      height: 24px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;

      ~ .bibColoredJersey {
        margin-top: 5px;
      }
    }
  }

  .pbpTime {
    width: 47px;
    text-align: right;
    padding: 5px;
  }

  .pbpDiff {
    width: 40px;
  }

  th.pbpResult,
  th.pbpDiff,
  th.pbpScoreType {
    text-align: center !important;
  }
}

.playByPlay {
  /*Default Play by Play*/
  .content:has(> .pbp-default) {
    padding: 0;
  }

  .pbp-default {
    position: relative;

    a.athleteLink {
      text-decoration: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      gap: var(--size-2);
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-family: var(--eventFontAccent);
      font-size: var(--size-6);
    }

    @media all and (max-width: 1000px) {
      a.athleteLink {
        font-size: var(--font-size-4);
      }
    }

    @media all and (max-width: 700px) {
      a.athleteLink {
        font-size: var(--font-size-3);
      }
    }
    .second {
      a.athleteLink {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
      }
    }

    .pbpName {
      text-align: left;
      padding: var(--size-3) var(--size-1);

      @media all and (max-width: 600px) {
        padding: var(--size-1);
      }

      > .athleteLink {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        .athleteLink {
          font-size: 0.9rem;
          font-family: var(--eventFont-Bold);
          @media all and (max-width: 600px) {
            font-size: 0.8rem;
          }
        }

        &.IN {
          .athleteLink {
            font-family: var(--eventFont);
            font-size: 0.8rem;
            color: green;
            background-color: white;
            border-radius: var(--size-1);
            padding: var(--size-1) var(--size-2);
            border: 1px solid lightgrey;

            &:before {
              font-family: "FontAwesome-Solid";
              font-size: 0.875rem;
              content: "\f062";
              top: 1px;
              position: relative;
            }
          }
        }

        &.OUT {
          .athleteLink {
            font-family: var(--eventFont);
            font-size: 0.8rem;
            color: red;
            background-color: white;
            border-radius: var(--size-1);
            padding: var(--size-1) var(--size-2);
            border: 1px solid lightgrey;

            &:before {
              font-family: "FontAwesome-Solid";
              font-size: 0.875rem;
              content: "\f063";
              top: 1px;
              position: relative;
            }
          }
        }

        &.ASSIST {
          .athleteLink {
            font-family: var(--eventFont);
            font-size: 0.8rem;
            background-color: white;
            border-radius: var(--size-1);
            padding: var(--size-1) var(--size-2);
            border: 1px solid lightgrey;

            &:before {
              font-family: "FontAwesome-Solid";
              font-size: 0.875rem;
              content: "\f35b";
              top: 1px;
              position: relative;
            }
          }
        }
      }
    }

    .pbpJersey {
      .bibColoredJersey {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        .jersey {
          width: 30px;
          height: 30px;
          @media all and (max-width: 600px) {
            width: 25px;
            height: 25px;
          }
          svg {
            width: 100%;
            height: 100%;
          }

          .number {
            margin-top: 5px;
            @media all and (max-width: 600px) {
              margin-top: 1px;
            }
          }
        }
      }
    }

    .pbpJersey > .bibColoredJersey,
    .pbpName > .athleteLink {
      min-height: var(--size-7);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;

      + .athleteLink,
      + .bibColoredJersey {
        margin-top: 5px;
      }
    }

    th.result_OneTeam {
      width: 36%;
    }

    th.pbpJersey {
      width: 4%;
    }

    th.pbpJersey,
    th.pbpName {
      font-family: var(--eventFont-Bold);
    }

    tbody tr {
      &:nth-child(odd) {
        background-color: var(--bgTableOdd);
      }
    }

    td {
      padding: var(--size-1);
      border-top: 1px solid var(--textColor);
    }

    .time-result-action {
      text-align: center;

      .time {
        font-size: 0.875rem;
        margin-top: var(--size-1);
        @media all and (max-width: 600px) {
          font-size: 0.8rem;
        }
      }

      > .result {
        font-family: var(--eventFontAccent);
        font-size: var(--size-7);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: var(--size-2);

        @media all and (max-width: 900px) {
          font-size: var(--size-6);
        }
        @media all and (max-width: 700px) {
          font-size: var(--size-5);
        }

        .result {
          &.left,
          &.right {
            min-width: var(--size-8);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
          }

          &.left {
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
          }

          &.right {
            -webkit-box-pack: start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
          }
        }
      }

      .action {
        font-size: 0.875rem;
        font-family: var(--eventFont-Bold);
        margin-bottom: var(--size-1);

        @media all and (max-width: 600px) {
          font-size: 0.825rem;
        }
      }
    }
  }

  /*Simple Play by Play*/
  .content:has(> .pbp-simple) {
    padding: 0;
  }

  .pbp-simple {
    border-bottom-left-radius: var(--radius-2);
    border-bottom-right-radius: var(--radius-2);

    a.athleteLink {
      text-decoration: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      gap: var(--size-2);
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-family: var(--eventFontAccent);
      font-size: var(--size-6);

      @media all and (max-width: 640px) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }
    }
    @media all and (max-width: 1000px) {
      a.athleteLink {
        font-size: var(--font-size-4);
      }
    }
    @media all and (max-width: 700px) {
      a.athleteLink {
        font-size: var(--font-size-3);
      }
    }

    @media all and (max-width: 640px) {
      a.athleteLink {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }
    }

    .second {
      a.athleteLink {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        @media all and (max-width: 640px) {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
        }
      }
    }

    tr {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

    tbody tr {
      &:nth-child(odd) {
        background-color: var(--bgTableOdd);
      }

      td:first-child {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-family: var(--eventFont-Bold);
      }

      td:last-child {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-family: var(--eventFont-Bold);
      }
    }

    td,
    th {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }

    td {
      padding: var(--size-1);
      border-top: 1px solid var(--textColor);
    }

    .time-action {
      text-align: center;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 250px;
              flex: 0 0 250px;

      .time {
        font-size: 0.875rem;
        margin-top: var(--size-1);
      }

      .action {
        font-family: var(--eventFontAccent);
        font-size: var(--size-7);
        @media all and (max-width: 900px) {
          font-size: var(--size-6);
        }
        @media all and (max-width: 700px) {
          font-size: var(--size-5);
          -webkit-box-flex: 0;
              -ms-flex: 0 0 200px;
                  flex: 0 0 200px;
        }
      }
      @media all and (max-width: 700px) {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 200px;
                flex: 0 0 200px;
      }
      @media all and (max-width: 600px) {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 130px;
                flex: 0 0 130px;
      }
    }
  }
}

.tabswitcher {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 0.75rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: var(--font-size-1);
  padding: var(--size-2);
  border-radius: var(--radius-round);
  background: var(--text-over-eventColor2);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  overflow: auto;
  margin: 0 auto;
  margin-bottom: var(--size-6);
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
  position: relative;

  @media (max-width: 480px) {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-right: 0;
  }

  .tabitem {
    border-radius: var(--radius-round);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
    padding: var(--size-2) 0.75rem;
    color: var(--textColor);
    cursor: pointer;
    white-space: nowrap;

    @media (max-width: 640px) {
      font-size: 0.75rem;
    }

    a {
      text-decoration: none;
    }

    &:hover {
      background-color: var(--text-over-eventColor2);
      -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
              box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
    }

    &.c-selected {
      padding: var(--size-2) 0.75rem;
      border-radius: var(--radius-round);
      background-color: var(--eventColor2);
      color: var(--text-over-eventColor2);
      a {
        color: var(--text-over-eventColor2);
      }
    }
  }
}

.detailSwitch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--size-3);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: var(--size-7) var(--size-3);

  .tabitem {
    padding: var(--size-1) var(--size-2);
    border-bottom: 1px solid transparent;
    &.c-selected {
      border-color: var(--textColor);
      font-family: var(--eventFont-Bold);
    }
  }

  a {
    text-decoration: none;
  }
}

#tabitemcurrent {
  display: none;
}

#tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.element-multimedalwinners .medalsSwitch {
  .detailSwitch {
    @media all and (max-width: 550px) {
      display: none;
    }
  }
}

.element-medals .medalsSwitch {
  .detailSwitch {
    @media all and (max-width: 980px) {
      display: none;
    }
  }
}

.ui-tabs-selector {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  .ui-tabs {
    text-align: center;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: var(--size-2);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: var(--font-size-1);
    border-top-left-radius: var(--size-2);
    border-top-right-radius: var(--size-2);
    background: var(--text-over-eventColor1);
    padding: var(--size-2);
    margin-right: auto;
    top: 1px;
    position: relative;

    border: 1px solid var(--bgTableOdd);
    border-bottom: none;

    .ui-tab
{
    border-radius: var(--size-1);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
    display: block;
    padding: var(--size-2) 0.75rem;
    color: var(--textColor);
    cursor: pointer;
    &.c-selected, &:hover {
        background-color: var(--eventColor2);
        color: var(--text-over-eventColor2);
      }
    }
  }
  .ui-tabs-content {
    padding: var(--size-2);
    background: var(--text-over-eventColor1);
    border: 1px solid var(--bgTableOdd);
    border-bottom-left-radius: var(--size-2);
    border-bottom-right-radius: var(--size-2);

    .ui-tab-content
{
    display: none;
    &.c-selected {
        display: block;
      }
    }
  }
}

.unitSelector {
    margin-bottom: 20px;
    width: 100%;
    position: relative;

    .noc_athlete {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

  .leftScroll,
  .rightScroll {
    height: calc(100% - 5px);
    width: var(--size-7);
    display: inline-block;
    position: absolute;
    border-radius: var(--size-2);
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;

    &.inactive {
      opacity: 0.2;
      cursor: auto;
    }
  }

  .rightScroll {
    right: 0;

    &:before {
      position: absolute;
      right: 0;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      color: var(--linkColor);
      font-family: ST-Info-Icon-Font;
      font-size: var(--size-8);
      content: "\f105";
      opacity: 0.6;
    }

    &:hover {
      &:before {
        color: var(--buttonColorHover);
        opacity: 1;
      }
    }
  }

  .leftScroll {
    &:before {
      position: absolute;
      right: 15px;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      color: var(--linkColor);
      font-family: ST-Info-Icon-Font;
      font-size: var(--size-8);
      -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
              transform: rotate(180deg);
      content: "\f105";
      opacity: 0.6;
    }

    &:hover {
      &:before {
        color: var(--buttonColorHover);
        opacity: 1;
      }
    }
  }

  #unitSelectorContainer {
    display: inline-block;
    width: calc(100% - 66px);
    left: 32px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }

  .has-h2h {
    .unit {
      min-height: 165px;
    }
  }

  .unit {
    display: inline-block;
    width: 241px;
    margin: 5px var(--size-1);
    vertical-align: top;
    background-color: var(--bgSecondary);
    border: 1px solid var(--bgSecondary);
    border-radius: var(--size-2);
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);

    &.current {
      border: 1px solid var(--eventColor2);

      .names {
        background-color: var(--eventColor2);
        color: var(--text-over-eventColor2);
      }

      &:hover {
        .names {
          background-color: var(--eventColor2);
          color: var(--text-over-eventColor2);
        }
      }
    }

    &:hover {
      border: 1px solid var(--eventColor2);

      .names {
        background-color: var(--eventColor2);
        color: var(--text-over-eventColor2);

        a {
          text-decoration: none;
        }
      }

      .inactive {
        .names {
          background: none;
          color: inherit;
        }
      }
    }
  }

  .inactive {
    opacity: 0.6;

    .unitRelated {
      color: var(--eventColor1);
      background-color: #f3f3f3;
    }
  }

  .noc-element {
    img {
      width: var(--size-4);
    }
    span {
      font-size: 0.875rem;
    }
  }

  a {
    text-decoration: none;
    color: #333333;
  }

  .names {
    border-top-left-radius: var(--size-1);
    border-top-right-radius: var(--size-1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    white-space: normal;
    background-color: var(--bgSecondary);
    padding: var(--size-2);
    line-height: 1;
    font-family: var(--eventFont-Bold);
    font-size: 0.875rem;
    text-transform: uppercase;
    /* Give the top section a fixed height for three lines. That way, the line will always stay in the same position. */
    min-height: 42px;
  }

  .unitRelated {
    padding: var(--size-2);

    .status {
      text-align: center;
      text-transform: uppercase;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: 0.7rem;
      gap: var(--size-2);
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;

      .textStatus {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        opacity: 0.6;
        font-family: var(--eventFont-Bold);
      }

      .periodInformation {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
      }

      &.c-live {
        .textStatus {
          color: var(--liveColor);
          opacity: 1;
        }
      }

      .periodInformation:empty {
        display: none;
        text-align: left;

        + .textStatus {
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
        }
      }
    }

    .date {
      width: 50%;
      display: inline-block;
      text-align: left;
      font-size: 0.75rem;
    }

    .time {
      width: 50%;
      display: inline-block;
      text-align: right;
      font-size: 0.75rem;
    }

    .participants {
      padding-bottom: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: var(--size-1);
      margin-top: var(--size-2);
      padding-top: var(--size-2);
      border-top: 2px solid var(--bgMain);

      .oneTeam {
        display: inline-block;
        width: 50%;
      }

      &.results {
        margin-top: var(--size-2);

        .oneTeam {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          width: auto;
          gap: var(--size-2);

          > div:first-child {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
          }

          &.winner {
            font-family: var(--eventFont-Bold);
          }

          .result {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            font-size: 0.875rem;
            gap: var(--size-2);

            > .sport-code {
              font-size: 0.7rem;
              font-family: var(--eventFont);
            }
          }

          .sport-code {
            font-size: 0.7rem;
            font-family: var(--eventFont);
          }

          .noc-element {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
          }

          .result {
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
          }
        }
      }
    }
  }
}

/* base/modules/offline */

.offline {
  text-align: center;
  font-size: 1.3em;
  margin: 50px 0 10px;

  .offlineHeader {
    background: url("images/event/logo_mobile.png") no-repeat center;
    background-size: auto 100%;
    height: 80px;
    width: 100%;
    margin-top: 20px;
  }

  .title {
    font-weight: bold;
    margin: 10px 0;
    font-size: 1.1em;
    text-transform: uppercase;
  }

  .text {
    margin: 40px 10px 0;
  }

  .counter {
    font-size: 1.3em;
    font-weight: bold;
    text-transform: uppercase;
    margin: 20px 0;
    color: var(--eventColor2);
  }

  .NextGameDate {
    margin-right: 20px;
  }
}

.contentitem.medals {
  margin-bottom: 0;
  width: auto;
  padding: 0 50px;

  @media (max-width: 700px) {
    padding: 0;
  }

  .contentitem.medals .medalPodium {
    background-color: #f3f3f3;
    background-image: url("../base/images/bg_scoredev.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    border: 1px solid #c9c9c9;
    padding: 10px;
  }
}

.competitionMedals {
  margin-bottom: var(--size-7);
  margin-top: var(--size-7);

  background: linear-gradient(
    to bottom,
    #a5d0e6 0%,
    #a5d0e6 35%,
    var(--bgMain) 100%
  );

  @media (max-width: 640px) {
    display: none;
  }

  &:empty {
    display: none;
  }

  .plain {
    background-color: var(--bgMain);
    font-size: 0.875rem;
  }

  tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  td {
    text-align: center;
    padding: 0 0 0 0;
    line-height: 1;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: var(--size-1);
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .place {
    font-family: var(--eventFontAccent);
    font-size: var(--size-7);
    padding-top: var(--size-2);
  }

  .last {
    padding-bottom: var(--size-2);
    border-bottom: solid 1px #85a6c3;
  }

  .leftBorder {
    border-left: solid 1px #85a6c3;
  }

  .rightBorder {
    border-right: solid 1px #85a6c3;
  }

  .medal {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: var(--size-3);
    background-position: center center;

    &.gold {
      background-image: url(images/medals/Gold.png);
    }

    &.silver {
      background-image: url(images/medals/Silver.png);
    }

    &.bronze {
      background-image: url(images/medals/Bronze.png);
    }

    &:before {
      content: "";
    }
  }
}

.photoFinishList {
  position: relative;

  .discipline + .discipline {
    margin-top: var(--size-5);
  }

  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    .sporticonwrapper img {
      position: relative;
      top: 2px;
      margin-right: var(--size-2);
    }

    h2 {
      font-family: var(--eventFontAccent);
      font-size: var(--size-7);
      margin-bottom: var(--size-3);
      line-height: 1;
      display: inline-block;
      margin-top: var(--size-3);
    }
  }

  .discipline_content {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    .wd {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 100% !important;
      height: 235px !important;
      font-size: 0.875rem;
      border-radius: var(--size-2);
      background: var(--bgTableEven);
      -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
              box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
    }

    .image {
      position: relative;
      width: 100%;
      height: 100px;
      background-size: cover;
      border-top-left-radius: var(--size-2);
      border-top-right-radius: var(--size-2);
      background-repeat: no-repeat;
      cursor: pointer;

      .imageLink {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }

    .competition {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      padding: var(--size-3);

      .date,
      .time {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
                flex: 0 0 50%;
      }

      .time {
        text-align: right;
      }

      .name {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        font-family: var(--eventFont-Bold);
        margin-top: var(--size-2);
      }
    }

    .download {
      padding: var(--size-3);
      padding-top: 0;
      margin-top: auto;

      a:before {
        font-family: "FontAwesome-Solid";
        content: "\f019";
        margin-right: var(--size-2);
      }
    }
  }
}

.competitionPhotofinishs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--size-2);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

  .competitionPhotoFinish {
    .imageWrapper {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      position: relative;

      &:after {
        content: " ";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        padding: 3px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: absolute;
        background-color: var(--bgSecondary);
        border-radius: var(--size-2);
        opacity: 0.75;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
      }
    }

    img {
      width: var(--size-10);
      padding: var(--size-2);
      background-color: var(--bgSecondary);
      border-radius: var(--size-2);
      -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
              box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
      position: relative;
      display: block;
    }

    a {
      cursor: pointer;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      position: relative;

      &:after {
        font-family: "FontAwesome-Solid";
        font-size: 1rem;
        content: "\f030";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 100%;
        height: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: absolute;
        opacity: 1;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
      }

      &:hover {
        &:after {
          opacity: 0;
        }

        .imageWrapper {
          &:after {
            opacity: 0;
          }
        }
      }
    }
  }
}

.navigation-related {
  .reportInfo {
    position: relative;

    .reportContainer {
      display: none;
      opacity: 0;
    }

    &.c-active .reportContainer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      opacity: 1;
    }

    .reportContainer {
      position: absolute;
      background-color: var(--bgSecondary);
      right: 0;
      padding: var(--size-2);
      border: 1px solid var(--text-color);
      border-radius: var(--size-1);
      z-index: 20;
      top: 30px;
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
      gap: var(--size-2);

      @media all and (max-width: 768px) {
        gap: var(--size-3);
      }

      @media (max-width: 640px) {
        width: 320px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }
    }

    .reportGroup {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;

      @media all and (max-width: 768px) {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
      }
    }

    .reportGroupTitle {
      font-family: var(--eventFontAccent);
      width: 100%;
    }

    .reportFile {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: 0.75rem;
      padding: 0;

      &:before {
        width: auto;
        height: auto;
        font-size: var(--size-3);
      }
    }
  }
}

.related.reports {
  margin-bottom: var(--size-4);

  .reportContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    @media all and (max-width: 768px) {
      gap: var(--size-3);
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
  }

  .reportGroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  .reportGroupTitle {
    font-family: var(--eventFontAccent);
    width: 100%;
    margin-bottom: var(--size-3);
  }

  .reportFile {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    text-indent: initial;
    font-size: 0.875rem;
    padding: 0;
    gap: 5px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;

    &:before {
      position: relative;
      width: auto;
      height: auto;
      font-size: var(--size-3);
    }
  }
}

.countrySelector {
  display: none; /* temp */
  position: relative;
  margin-bottom: var(--size-6);

  &:first-child {
    margin-left: auto !important;
  }

  &.x--open {
    .countryItems {
      display: block;
    }
  }

  .countrySelectorItemCurrent {
    max-width: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 32px;
    cursor: pointer;
    padding-right: 40px;
    background-color: var(--text-over-eventColor2);
    border-radius: var(--radius-round);
    font-size: 0.75rem;
    padding: var(--size-2) var(--size-3);

    .noc-element {
      margin-right: 5px;
    }

    &:after {
      position: absolute;
      right: 13px;
      font-family: ST-Info-Icon-Font;
      font-weight: normal;
      font-size: 20px;
      height: 100%;
      width: 19px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      content: "\f0d7";
    }
  }

  .countryItems {
    display: none;
    position: absolute;
    top: 35px;
    width: 825px;
    right: 0;
    padding: 5px;
    margin-bottom: 40px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.95);
    -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);
    z-index: 201;
    padding-right: 0;

    @media (max-width: 768px) {
      width: 100vw;
      width: calc(100vw - 20px);
    }
  }

  .closeCountry,
  .resetCountry {
    position: relative;
    color: var(--eventColor1);
    display: inline-block;
    vertical-align: top;
    padding: 5px 23px 5px 5px;
    margin-bottom: 4px !important;

    &:after {
      position: absolute;
      right: 0;
      top: 0;
      font-family: ST-Info-Icon-Font;
      font-weight: normal;
      font-size: 15px;
      height: 100%;
      width: 19px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      content: "\f00d";
    }

    &:hover {
      color: var(--text-over-eventColor1);
      background: var(--eventColor1);
    }
  }

  .selectedCountry {
    display: inline-block;
    margin: 7px 0 0 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--eventColor1);

    img {
      margin-right: 5px;
      display: inline-block;
      vertical-align: bottom;
    }
  }

  .countries {
    display: none;
    position: absolute;
    top: 35px;
    right: 0;
    left: auto;
    width: 768px;
    padding: 30px 0 10px 0;
    background: #fff;
    z-index: 201;

    &.x--open {
      display: block;
    }

    @media (max-width: 768px) {
      width: 100vw;
      padding-left: 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  }

.country {
    display: inline-block;
    margin: 2px 2px 0 0;
    padding: 8px;
    width: 185px;
    background: var(--sportSelectorBG);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--linkColor);
    &.c-selected {
      outline: 1px solid var(--eventColor1);
      background: var(--sportSelectorBG);
    }

    &:hover {
      color: var(--text-over-eventColor1);
      background: var(--eventColor1);
    }

    .noc-element {
      vertical-align: middle;
      margin-right: 5px;
    }

    @media (max-width: 768px) {
      width: calc(100% / 3 - 14px);
    }

    @media (max-width: 500px) {
      width: calc(100% / 2 - 14px);
    }
  }
}

.key-value-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.875rem;
  gap: var(--size-1);
  margin-top: var(--size-1);
  margin-bottom: var(--size-2);

  &.column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  .title {
    width: 100%;

    &:empty {
      display: none;
    }
  }

  .key-value-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--size-1);
    padding: var(--size-1) var(--size-2);
    background-color: var(--bgTableOdd);
    border-radius: var(--size-1);

    .noc-element {
      gap: 0.125rem;

      img {
        width: var(--size-3);
      }

      span {
        font-size: 0.625rem;
      }
    }

&.c-live {
    background-color: var(--liveColor);
    color: white;
}
  }

  .key {
    font-family: var(--eventFont-Bold);
  }

  .value {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--size-1);
  }
}

/* modules/live-sport-selector */

.liveSportSelector {
  --live-sport-selector-height: var(--size-7);

  font-size: var(--size-3);

  .sport-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 0.75rem;
    background-color: var(--bgSecondary);
    -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;
    padding: 0.75rem;
    border-radius: var(--radius-2);

    &:not(:has(.sport)) {
      display: none;
    }
  }

  &:empty {
    display: none;
  }

  .sport {
    position: relative;
    height: var(--live-sport-selector-height);
    &.c-selected {
      .competitionItems {
        display: block;
      }
    }

    .sporticon {
      width: 32px;
    }
  }

  .discipline {
    text-transform: uppercase;
    background-color: var(--eventColor2);
    color: var(--text-over-eventColor2);
    display: block;
    font-family: var(--eventFontAccent);
    text-align: left;
    border-top-left-radius: var(--radius-2);
    border-top-right-radius: var(--radius-2);
    padding: var(--size-2);
  }

  .competitionItems {
    display: none;
    position: absolute;
    background-color: var(--bgSecondary);
    width: 225px;
    right: 0;
    bottom: calc(var(--live-sport-selector-height) + 5px);
    -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;
    border-radius: var(--radius-2);
    z-index: 300;
  }

  .competition {
    text-align: left;
    padding: var(--size-2);

    a {
      text-decoration: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }

    + .competition {
      border-top: 2px solid var(--bgMain);
    }

    .name {
      font-family: var(--eventFont-Bold);
      text-decoration: underline;
      margin-bottom: var(--size-2);
      width: 100%;
      font-size: 0.875rem;
    }

    .status,
    .startTime {
      font-size: 0.75rem;
      line-height: 1;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }
  }

  @media (max-width: 700px) {
    &.x--sport-count-1,
    &.x--sport-count-2,
    &.x--sport-count-3,
    &.x--sport-count-4 {
      .competitionItems {
        left: 0;
        right: auto;
      }

      .sport:nth-child(n + 5) {
        .competitionItems {
          left: auto;
          right: 0;
        }
      }
    }
  }
}

.currentInfoPanel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--size-3);
  margin-bottom: var(--size-5);

  @media (max-width: 768px) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .singleCompetitor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--size-2);
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    max-width: 49%;

    /* For edge cases when there are multiple participants for each section*/

    &:has(> .participant:nth-child(2)) {
      max-width: 100%;
      width: 100%;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-flex: initial;
          -ms-flex: initial;
              flex: initial;

      .participant {
        width: 32%;

        @media (max-width: 768px) {
          width: 100%;
        }
      }
    }

    @media (max-width: 768px) {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      max-width: 100%;
    }

    .participant {
      border-radius: var(--size-2);
      -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
              box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
      width: 100%;

      > .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: var(--size-3);
        gap: var(--size-3);
        border-bottom-left-radius: var(--size-2);
        border-bottom-right-radius: var(--size-2);
      }
    }

    .header {
      background-color: var(--bgSecondary);
      font-family: var(--eventFontAccent);
      font-size: var(--size-6);
      padding: var(--size-2);
      border-top-left-radius: var(--size-2);
      border-top-right-radius: var(--size-2);

      @media (max-width: 768px) {
        font-size: var(--size-5);
      }

      &:before {
        margin-right: var(--size-1);
        font-family: "FontAwesome-Solid";
        font-size: 0.875rem;
      }
    }

    .left {
      .athletePhoto {
        display: block;

        img {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          height: 115px;
          border-radius: var(--size-2);
          border: 1px solid rgba(0, 0, 0, 0.05);
        }
      }

      &:not(:has(.photo)) {
        display: none;

        + .right {
          padding: 0;
        }
      }
    }

    .right {
      padding: var(--size-2);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      gap: var(--size-2);
      width: 100%;

      .athleteLink {
        font-family: var(--eventFont-Bold);
        font-size: 1.2rem;

        @media all and (max-width: 700px) {
          font-size: 1rem;
        }
      }
    }

    .bottom {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      gap: var(--size-2);
      margin-top: var(--size-2);
    }

    .name {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: var(--size-2);

      > div:first-child {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }
    }

    .attempt,
    .result,
    .rank,
    .best,
    .behind {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      background-color: var(--bgSecondary);
      padding: var(--size-2);
      border-radius: var(--size-2);
      gap: var(--size-1);

      .description {
        font-size: 0.875rem;
      }

      .value {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: var(--size-2);
        font-family: var(--eventFont-Bold);

        > div + div {
          font-family: var(--eventFont);
        }
      }
    }

    .best {
      padding: 0;
      border-radius: 0;
    }

    .noc-element {
      span {
        font-family: var(--eventFont-Bold);
        font-size: 0.775rem;
      }
    }
  }

  &:has(> :nth-child(4)) {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    .singleCompetitor {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 32%;
              flex: 0 0 32%;

      @media (max-width: 768px) {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
      }
    }
  }

  &:empty {
    display: none;
  }

  /* Colors */

  .singleCompetitor.Last {
    .participant {
      background-color: var(--currentInfoLast);
    }

    .header {
      color: var(--currentInfoLastHeader);
    }
  }

  .singleCompetitor.Waiting {
    .participant {
      background-color: var(--currentInfoWaiting);
    }

    .header {
      color: var(--currentInfoWaitingHeader);
    }
  }

  .singleCompetitor.Current {
    .participant {
      background-color: var(--currentInfoCurrent);
    }

    .header {
      color: var(--currentInfoCurrentHeader);
    }
  }

  .singleCompetitor.Next {
    .participant {
      background-color: var(--currentInfoNext);
      border-radius: var(--size-2);
      -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
              box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
    }

    .header {
      color: var(--currentInfoNextHeader);
    }
  }
}

.raquet-games-table {
  .game {
    margin-bottom: var(--size-5);
  }

  .tableTitle {
    height: var(--size-6);
    margin: 0;
    margin-bottom: var(--size-2);
    font-size: var(--size-5);
    position: sticky;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--size-2);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    .status {
      color: var(--liveColor);
      margin-left: var(--size-3);
      font-size: 0.875rem;
    }
  }

  .games-content {
    background-color: var(--bgSecondary);
    padding: var(--size-3);
    border-radius: var(--size-3);

    > span {
      display: block;
      overflow-x: auto;
    }
  }

  .team {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-family: var(--eventFont-Bold);
    padding-left: 0;
    width: 100%;

    .participant {
      padding: var(--size-3);
      position: sticky;
      left: 0;
      background-color: var(--bgSecondary);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      min-width: var(--size-13);
      width: var(--size-13);

      .colIsWinner {
        display: none;
      }

      .colIsWinner:has(.icon--winner) + .athleteName {
        &:after {
          content: "Winner";
          text-transform: uppercase;
          font-family: var(--eventFontAccent);
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          padding: var(--size-1);
          background-color: var(--bgTableOdd);
          font-size: 0.875rem;
          letter-spacing: 0.025rem;
          bottom: -1.125rem;
          border-radius: var(--size-1);
          margin-left: var(--size-1);
        }
      }

      .colIsWinner:has(.icon--winner) {
        .icon {
          display: none;
        }
      }
    }

    &:last-child {
      .participant {
        border-top: 1px solid var(--textColor);
      }

      .scores {
        border-top: 1px solid var(--textColor);
      }
    }
  }

  .scores-wrapper {
    margin-top: var(--size-6);
  }

  .scores {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    &:nth-child(odd) {
      background-color: var(--evenRow);
    }
  }

  .score {
    min-width: var(--size-4);
    padding: var(--size-3);
    border-left: 2px solid var(--bgMain);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .athleteName {
    width: var(--size-12);

    a.athleteLink {
      > span.athlThumbN {
        display: none !important;
      }
    }
  }

  .noc-column > span > a {
    font-size: 0.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--size-1);
  }
}

.goalKeeperTables {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  
  .goalKeeperTable {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 49%;
            flex: 0 0 49%;
    margin-bottom: var(--size-5);
  }
}

@media all and (max-width: 700px) {
  .goalKeeperTables {
    display: block;
  }
}

.resultBook {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

  .pdfSport {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: calc(100% - 2rem);
    font-size: 0.875rem;
    border-radius: var(--size-2);
    background: var(--bgTableEven);
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
    padding: var(--size-3);

    .title {
      font-family: var(--eventFontAccent-Condensed);
      font-size: var(--size-6);
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2;
    }

    .image {
      cursor: pointer;
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1;

      img {
        height: 34px;
      }
    }

    .zipLink {
      -webkit-box-ordinal-group: 4;
          -ms-flex-order: 3;
              order: 3;
      margin-top: var(--size-4);

      a:before {
        font-family: "FontAwesome-Solid";
        content: "\f019";
        margin-right: var(--size-2);
      }
    }
  }
}

.reports {
  .filters {
    background-color: var(--bgSecondary);
    padding: var(--size-4);
    border-radius: var(--radius-3);
    gap: var(--size-10);
    margin-top: var(--size-7) !important;
    margin-bottom: var(--size-4);

    > div:first-child {
      font-size: 0.875rem;
      font-family: var(--eventFont-Bold);
      margin-bottom: var(--size-2);
    }

    > table {
      display: block;

      tbody {
        display: block;
      }

      tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: var(--size-4);
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;

        td {
          display: block;
          padding: 0;

          @media all and (max-width: 640px) {
            width: 100%;
          }
        }
      }
    }

    .list {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;

      &:after {
        font-family: "FontAwesome-Solid";
        font-size: 0.875rem;
        content: "\f078";
        color: var(--borderTable);
        position: absolute;
        right: 17px;
      }

      .title {
        display: none !important;
      }

      select {
        border: 1px solid #e4e4e4;
        border-radius: var(--size-2);
        padding: 13px 18px;
        padding-right: 43px;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;

        @media all and (max-width: 640px) {
          width: 100%;
        }
      }
    }
  }

  table th.description .sort-wrapper > span:has(.icon) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--size-2);

    .icon {
      height: 20px;
      line-height: 20px;

      &:before {
        font-size: 20px;
      }
    }
  }
}

.Schedule {
  .responsive-table-wrapper {
    @media (max-width: 1280px) {
      margin-left: -1rem;
      margin-right: -1rem;
    }
  }
}

table.mainSchedule {
  color: var(--textColor);
  min-width: 1264px;

  .insteadLink {
    display: none;
  }

  th,
  tr {
    background-color: transparent;
  }

  td {
    border-top: 1px solid var(--textColor);

    &:nth-child(even) {
      background-color: var(--evenRow);
    }
  }

  a,
  a:hover {
    text-decoration: none;
    cursor: pointer;
  }

  tr.Spacer {
    display: none;

    @media (max-width: 640px) {
      + tr {
        display: none;
      }
    }
  }

  tr:last-child {
    font-family: var(--eventFont-Bold);

    td:first-child {
      span {
        display: none;
      }
    }

    td .c-h-6 + span {
      border-radius: var(--radius-round);
      padding: 0.1rem 0.5rem;
      background-color: var(--eventColor1);
      color: var(--text-over-eventColor1);
      white-space: nowrap;
      margin: 0.2rem 0;
      display: inline-block;
    }
  }

  /* style of specific columns */
  th.month {
    text-align: left;
    padding: var(--size-1) var(--size-3);
  }

  th.dayHead {
    width: 3.75rem;
    min-width: 3.75rem;
    font-family: var(--eventFontAccent);
    font-size: var(--size-4);
    padding: var(--size-2) var(--size-1);
  }

  th.MainScheduleMedal {
    width: var(--size-9);
    min-width: var(--size-9);
    padding: var(--size-2) var(--size-1);
    vertical-align: bottom;

    .medal-icon {
      justify-self: center;
    }
  }

  th.sport {
    min-width: 9rem;
    padding: var(--size-2) var(--size-1);
    font-family: var(--eventFont-Bold);
    text-align: left;
    vertical-align: bottom;

    @media (max-width: 640px) {
      width: 3rem;
      min-width: 3rem;

      > span {
        display: none;
      }
    }
  }

  th.MainScheduleMedal {
    img {
      width: var(--size-4);
      height: var(--size-4);
    }
  }

  td.dotSportTd {
    font-family: var(--eventFontAccent);

    > a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-align: left;

      &:hover {
        text-decoration: underline;
      }
    }

    img {
      width: var(--size-7);
      height: var(--size-7);
      margin-right: var(--size-2);

      &.img_oc {
        display: none; /* because text is to long */
      }
    }
  }

  td.goldMedalCount {
    text-align: center;
  }

  td.dotMedal {
    text-align: center;
    font-size: 0.85rem;
    padding: var(--size-3) var(--size-1);

    a {
      border-radius: var(--radius-round);
      padding: 0.2rem 0.75rem;
      background-color: var(--eventColor1);
      color: var(--text-over-eventColor1);
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;

      &:hover {
        color: var(--text-over-eventColor1);
      }
    }

    &.c-live {
      a {
        padding: 0.2rem 0.4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 0.3rem;
        position: relative;
        padding-left: calc(17px + 0.2rem);
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;

        &:before {
          content: "";
          position: absolute;
          width: 11px;
          height: 11px;
          left: 6px;
          top: 50%;
          -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
                  transform: translateY(-50%);
          background-color: var(--liveColor);
          border-radius: 50%;
          z-index: 1;
        }

        &:after {
          content: "";
          position: absolute;
          width: 11px;
          height: 11px;
          left: 3px;
          top: 50%;
          -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
                  transform: translateY(-50%);
          border: 3px solid var(--liveColor);
          border-radius: 50%;
          -webkit-animation: pulsate 2s ease-out infinite;
                  animation: pulsate 2s ease-out infinite;
          z-index: 1;
        }
      }
    }
  }

  td.dotCompetition {
    text-align: center;

    a {
      height: 8px;
      width: 8px;
      display: inline-block;
      border-radius: var(--radius-round);
      padding: var(--size-1);
      background-color: var(--textColor);

      &:hover {
        color: var(--text-over-eventColor1);
      }
    }

    &.c-live {
      a {
        position: relative;
        background-color: var(--liveColor);

        &:after {
          content: "";
          position: absolute;
          width: 16px;
          height: 16px;
          left: -3px;
          top: 50%;
          -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
                  transform: translateY(-50%);
          border: 3px solid var(--liveColor);
          border-radius: 50%;
          -webkit-animation: pulsate 2s ease-out infinite;
                  animation: pulsate 2s ease-out infinite;
          z-index: 1;
        }
      }
    }
  }

  /* Tooltips for columns in Main Schedule */
  .dotMedal,
  .dotCompetition,
  .dotCeremony {
    &:has(a):hover {
      background-color: color-mix(in srgb, var(--eventColor1) 20%, transparent);
    }

    a {
      position: relative;
    }

    .tip {
      display: none;
    }

    a:hover {
      .tip {
        display: block;
        position: absolute;
        left: 0;
        width: auto;
        z-index: 1000;
        background: transparent;
        text-align: center;
        top: calc(100% + 3px);

        .tipArrow {
          display: none;
        }

        .tipContent {
          white-space: nowrap;
          border-radius: var(--radius-2);
          padding: var(--size-1);
          background: white;
          border: 1px solid black;
          color: var(--textColor);
          font-size: 0.75rem;
          line-height: 1;
          -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

          a {
            color: var(--textColor);
          }
        }
      }
    }
  }

  /*make first column sticky when the table has overflow*/
  @media (max-width: 1280px) {
    th.sport,
    td.dotSportTd {
      position: sticky;
      left: 0;
      background: white;
      z-index: 2;
      padding-left: var(--size-3);
      -webkit-box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.15);
              box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.15);
    }

    th.sport {
      border-top-right-radius: var(--radius-3);
    }
  }

  @media (max-width: 640px) {
    min-width: initial;

    th.dayHead {
      width: 1.5rem;
      min-width: 1.5rem;
    }

    td {
      padding: var(--size-1) var(--size-3);
    }

    td.dotCompetition.c-live a {
      top: 3px;

      &:after {
        left: -2px;
      }
    }

    td.dotMedal.c-live a {
      width: 32px;
      color: transparent;
      justify-self: center;
      padding: 10px 0;
      font-size: 0;
      position: relative;
      top: 0px;

      &:before {
        left: 10px;
      }

      &:after {
        left: 7px;
      }
    }

    td.dotMedal {
      padding: 0;

      a {
        color: transparent;
        font-size: 0;
        padding: 9px;
        position: relative;
        bottom: 3px;
      }
    }

    td.dotCompetition a {
      height: 10px;
      width: 10px;
      position: relative;
      top: 2px;
    }
  }
}

.DetailedScheduleByDay {
  > table {
    color: var(--textColor);
    min-width: 1280px;
  }

  th,
  tr {
    background-color: transparent;
  }

  td {
    border-top: 1px solid var(--textColor);
    border-right: none;
    padding: var(--size-2) 0;

    &:nth-child(even) {
      background-color: var(--evenRow);
    }
  }

  a,
  a:hover {
    text-decoration: none;
    cursor: pointer;
  }

  /* style of specific columns */
  th {
    width: 3.25rem;
    min-width: 3.25rem;
    font-family: var(--eventFontAccent);
    font-size: var(--size-4);
    padding: var(--size-2) var(--size-1);
  }

  th.sport {
    font-size: var(--size-3);
    width: initial;
    min-width: var(--size-11);
    font-family: var(--eventFont-Bold);
    text-align: left;
    vertical-align: bottom;
  }

  td.dotSportTd {
    font-family: var(--eventFontAccent);
    padding: var(--size-2) var(--size-1);

    > a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-align: left;
    }

    img {
      width: var(--size-7);
      height: var(--size-7);
      margin-right: var(--size-2);

      &.img_oc {
        display: none; /* because text is to long */
      }
    }
  }

  td.dotSportTdLeft {
    padding: var(--size-1);
    font-size: 0.75rem;

    .dotSportDetailVenue {
      max-width: var(--size-13);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  td.dotCompetition,
  td.dotMedal,
  td.dotSportTdLeft {
    .competition {
      display: block;

      a {
        height: 20px;
        line-height: 20px;
        display: block;
        position: relative;
      }
    }
  }

  td.dotCompetition .competition > a {
    background: var(--textColor);
  }

  td.dotMedal .competition > a {
    background: var(--eventColor1);
  }

  .DetailedDayScheduleDet .dotCompetition {
    border-right: 1px solid transparent;

    > a {
      background: var(--textColor);
    }
  }

  .DetailedDayScheduleDet .dotMedal {
    border-right: 1px solid transparent;
    > a {
      background: var(--eventColor1);
    }
  }

  .DetailedDayScheduleDet {
    .dotCompetition > a,
    .dotMedal > a,
    .dotCeremony > a {
      height: 20px;
      line-height: 20px;
      display: block;
      position: relative;
    }

    .noc-element {
      position: relative;
      top: 2px;
      margin-right: 4px;
    }
  }

  /* Tooltips for columns in Main Schedule */
  .dotCompetition,
  .dotMedal,
  .dotCeremony {
    a {
      position: relative;
    }

    .tip {
      display: none;
    }

    a:hover {
      .tip {
        display: block;
        position: absolute;
        left: 0;
        width: auto;
        z-index: 1000;
        background: transparent;
        text-align: center;
        top: calc(100% + 1px);

        .tipArrow {
          display: none;
        }

        .tipContent {
          white-space: nowrap;
          border-radius: var(--radius-2);
          padding: var(--size-1);
          background: white;
          border: 1px solid black;
          color: var(--textColor);
          font-size: 0.75rem;
          line-height: 1;
          -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

          > .timespan,
          > .time-value,
          > .EventPhaseUnit {
            font-family: var(--eventFontAccent-Condensed);
            padding: var(--size-1) var(--size-2);
            font-size: var(--size-4);
            display: inline-block;
          }

          a {
            color: var(--textColor);
          }
        }

        table tr {
          td {
            border-top: none;
            border-right: none;
            padding: var(--size-1) var(--size-2);
            text-align: left;
          }

          &:nth-child(even) td {
            background-color: var(--evenRow);
          }

          &:nth-child(odd) td {
            background-color: var(--oddRow);
          }

          a {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .dotCeremony {
    &:hover {
      cursor: pointer;

      .tip {
        display: block;
        position: absolute;
        left: 0;
        width: auto;
        z-index: 1000;
        background: transparent;
        text-align: center;
        top: calc(100% + 1px);

        .tipArrow {
          display: none;
        }

        .tipContent {
          white-space: nowrap;
          border-radius: var(--radius-2);
          padding: var(--size-1);
          background: white;
          border: 1px solid black;
          color: var(--textColor);
          font-size: 0.75rem;
          line-height: 1;
          -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
          font-family: var(--eventFontAccent-Condensed);
          font-size: var(--size-4);

          > .time-value {
            font-family: var(--eventFontAccent-Condensed);
            padding: var(--size-1) var(--size-2);
            font-size: var(--size-4);
            display: inline-block;
          }
        }
      }
    }
  }

  /*make first column sticky when the table has overflow*/
  @media (max-width: 1280px) {
    th.sport,
    td.dotSportTd,
    td.dotSportTdLeft {
      position: sticky;
      left: 0;
      background: white;
      z-index: 2;
      padding-left: var(--size-3);
      -webkit-box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.15);
              box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.15);
    }

    th.sport {
      border-top-right-radius: var(--radius-3);
    }
  }
}

.schedule-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--size-4);

    .scheduleItem {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: 2px;
        border-radius: var(--size-2);
        border: 1px solid var(--bgTableOdd);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
                box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);

        @media (max-width: 960px) {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }

        &.c-live {
            .header-content {
                .status-remarks {
                    .textStatus {
                        background-color: var(--liveColor);
                        color: white;
                    }
                }
            }
        }
    }

    .header-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: var(--size-5);
        border-top-left-radius: var(--size-2);
        border-bottom-left-radius: var(--size-2);
        background-color: var(--bgSecondary);
        width: var(--size-11);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        position: relative;

        @media (max-width: 768px) {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            width: auto;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            gap: var(--size-3);
            padding: var(--size-3);
            border-bottom-right-radius: 0;
            border-top-right-radius: var(--size-2);
            border-bottom-left-radius: 0;
            border-top-left-radius: var(--size-2);
        }

        .date-time {
            font-family: var(--eventFontAccent);
            font-size: var(--size-7);
            line-height: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            position: relative;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;

            @media (max-width: 768px) {
                font-size: var(--size-5);
            }

            .time {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;

                &.inline {
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: row;
                            flex-direction: row;
                }
            }

            .date {
                font-size: var(--size-3);
                font-family: var(--eventFont-Bold);
            }

            .time-note {
                font-size: 0.875rem;
                line-height: 1;
                font-family: var(--eventFont-Bold);
                margin-bottom: var(--size-2);
                position: relative;
                top: 3px;

                @media (max-width: 768px) {
                    margin-bottom: 0;
                }
            }
        }

        @media (min-width: 768px) {
            .medal-icon {
                position: absolute;
                top: 26px;
                right: 0;
            }
        }

        .status-remarks {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            margin-top: var(--size-3);
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;

            @media (max-width: 768px) {
                margin-top: 0;

                .status {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: end;
                        -ms-flex-pack: end;
                            justify-content: flex-end;
                }
            }

            .textStatus {
                font-size: 0.875rem;
                padding: var(--size-1) var(--size-2);
                background-color: var(--bgTableOdd);
                border-radius: var(--radius-round);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 140px;
                position: relative;
                display: inline-block;
            }
        }
    }

    .unit-content {
        padding: var(--size-5);
        background-color: var(--bgSecondary);
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: var(--size-2);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;

        @media (max-width: 768px) {
            padding: var(--size-3);
            border-top-right-radius: 0;
            border-bottom-right-radius: var(--size-2);
            border-top-left-radius: 0;
            border-bottom-left-radius: var(--size-2);
        }

        .unit-related {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
        }

        .unit-name {
            font-family: var(--eventFontAccent);
            font-size: var(--size-7);
            line-height: 1;

            .discipline-name {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                gap: var(--size-2);

                .sportimage img {
                    height: 2rem;
                    background-color: var(--bgSecondary);
                }
            }

            @media (max-width: 768px) {
                font-size: var(--size-5);
            }
        }

        .unit-details {
            margin-top: var(--size-2);
            padding: 0;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            width: calc(100% - var(--size-7));

            @media (max-width: 768px) {
                width: 100%;
            }

            .competitor {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                gap: var(--size-2);
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;

                + .competitor {
                    margin-top: var(--size-1);
                    padding-top: var(--size-1);
                }

                .rank {
                    width: var(--size-7);
                    font-size: 0.875rem;
                }

                .noc {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                    font-size: 0.75rem;
                    width: var(--size-9);
                }

                .name {
                    -webkit-box-flex: 1;
                        -ms-flex: 1;
                            flex: 1;
                }

                .result {
                    min-width: var(--size-7);
                    font-family: var(--eventFont-Bold);
                    font-size: 0.875rem;
                }
            }
        }

        .scoredev {
            margin-bottom: 0;

            .scoredevInner {
                background-color: transparent;
                border: 1px solid rgb(225 225 225);
                border-radius: var(--size-2);

                @media (max-width: 768px) {
                    gap: 0;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                            flex-direction: column;
                }

                .scoredevLeft,
                .scoredevRight {
                    background-color: transparent;

                    @media (max-width: 768px) {
                        -webkit-box-flex: 1;
                            -ms-flex: 1;
                                flex: 1;
                    }
                }

                .score {
                    font-size: var(--size-6);
                    min-width: var(--size-8);
                }

                .separator-score-card {
                    padding: 0 var(--size-3);
                    font-size: var(--size-3);
                }

                .team {
                    gap: var(--size-2);

                    .sortValue + .lastName,
                    .seeding-information {
                        font-family: var(--eventFont);
                    }

                    .noc-element {
                        img {
                            height: var(--size-4);
                        }
                    }
                }

                .result-information {
                    .result-value {
                        .winner-indicator {
                            bottom: -1.35rem;
                            font-size: 0.875rem;

                            &:first-child {
                                position: relative;
                                bottom: -0.1rem;
                            }
                        }
                    }
                }
            }
        }

        .ScoreCardResults.decision {
            text-align: center;
            font-family: var(--eventFont-Bold);
        }
    }

    .additional-information {
        border-top-right-radius: var(--size-2);
        border-bottom-right-radius: var(--size-2);
        border: 1px solid var(--bgSecondary);
        background-color: var(--bgSecondary);
        padding: var(--size-5);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--size-3);
        min-width: var(--size-12);

        @media (max-width: 960px) {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            padding: var(--size-3);
            border-top-right-radius: 0;
            border-bottom-right-radius: var(--size-2);
            border-top-left-radius: 0;
            border-bottom-left-radius: var(--size-2);
        }

        .venue-location {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            text-align: right;

            @media (max-width: 960px) {
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
                text-align: left;
                gap: var(--size-2);
            }

            .venue {
                font-family: var(--eventFont-Bold);
            }

            .location {
                font-size: 0.675rem;
                margin-top: var(--size-1);
                margin-left: 1px;
            }
        }

        .navigation-related {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            gap: var(--size-2);
            -webkit-box-align: end;
                -ms-flex-align: end;
                    align-items: flex-end;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;

            @media (max-width: 960px) {
                display: none;
            }

            .resultLink {
                display: none; /* remove when removed from dom */
            }

            a.resultLink {
                font-size: 0.875rem;
                text-decoration: none;
                padding: var(--size-1) var(--size-3);
                border-radius: var(--radius-round);
                background-color: var(--eventColor2);
                color: var(--text-over-eventColor2);

                &:hover {
                    background-color: var(--buttonColorHover);
                }

                &:active {
                    background-color: var(--buttonColorActive);
                }
            }

            .reportInfo {
                .x--reportIcon {
                    margin: 0;
                    text-decoration: none;
                    padding: var(--size-1) var(--size-3);
                    border-radius: var(--radius-round);
                    background-color: var(--eventColor2);
                    color: var(--text-over-eventColor2);
                    height: var(--size-4);
                    line-height: var(--size-4);
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    text-indent: initial;
                    gap: var(--size-2);

                    &:before {
                        position: relative;
                        font-size: 0.875rem;
                        width: initial;
                        content: "Reports";
                        font-family: var(--eventFont);
                    }

                    &:after {
                        font-size: 0.875rem;
                        font-family: ST-Info-Icon-Font;
                        font-weight: normal;
                        content: "\f107";
                    }

                    &:hover {
                        background-color: #012980;
                    }

                    &:active {
                        background-color: #01294e;
                    }
                }
            }
        }
    }

    .medal-content {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background-color: var(--bgSecondary);
        border-radius: var(--size-2);
        padding: var(--size-3) 0;
        gap: var(--size-5) 0;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;

        &:not(:has(div)) {
            display: none;
        }

        .competitor {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
            gap: var(--size-2);
            margin: 0 var(--size-5);

            .noc {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;

                .noc-element span {
                    font-size: 0.75rem;
                }
            }

            .medal-icon {
                min-width: initial;
                line-height: initial;
                padding: 0;
                text-indent: 0;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;

                &.gold {
                    content: "";
                    width: var(--size-3);
                    height: var(--size-3);
                    display: block;
                    background-image: url(images/medals/Gold.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                }

                &.silver {
                    content: "";
                    width: var(--size-3);
                    height: var(--size-3);
                    display: block;
                    background-image: url(images/medals/Silver.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                }

                &.bronze {
                    content: "";
                    width: var(--size-3);
                    height: var(--size-3);
                    display: block;
                    background-image: url(images/medals/Bronze.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                }
            }
        }
    }

    .scheduleItem:has(.link-wrapper:hover):has(a) {
        border: 1px solid var(--eventColor2);
    }

    .link-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;

        @media (max-width: 768px) {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }

        > a {
            text-decoration: none;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            border-top-left-radius: var(--size-2);
            border-bottom-left-radius: var(--size-2);

            @media (max-width: 768px) {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                width: 100%;
            }

            &:hover {
                background-color: var(--eventColor2);

                .header-content {
                    background-color: var(--eventColor2);

                    .date-time {
                        color: var(--text-over-eventColor2);
                    }
                }

                .unit-content {
                    color: var(--text-over-eventColor2);
                    background-color: var(--eventColor2);

                    .scoredevInner {
                        border-color: rgb(45 45 45);
                    }

                        .scoredevInner img {
                            border: 1px solid rgb(45 45 45);
                        }
                }
            }
        }
    }

    .sportmessage {
        margin: 2px;
        width: calc(100% - var(--size-5));
    }

    &.byVenue,
    &.byToday {
        .scheduleItem:not(:first-child) {
            margin-top: var(--size-4);
        }
    }

    &.byDate {
        .groupPanel {
            .content {
                .scheduleItem {
                    margin-bottom: var(--size-2);
                    border: 1px solid var(--bgTableOdd);
                }
            }
        }
    }
    /* Special uses */
    &.byAthlete {
        .content {
            .event-item {
                margin-bottom: var(--size-2);

                > div.event-info {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: justify;
                        -ms-flex-pack: justify;
                            justify-content: space-between;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                    font-family: var(--eventFontAccent);
                    font-size: var(--size-7);
                    line-height: 1;
                    text-decoration: none;

                    /*.event-name {
                        text-decoration: underline;
                    }*/

                    .event-rank {
                        font-size: var(--size-5);
                    }
                }

                &:not(:first-child) {
                    > div.event-info {
                        margin-top: var(--size-3);
                    }
                }
            }

            .scheduleItem {
                margin-left: var(--size-4);
            }

                .scheduleItem + .scheduleItem {
                    margin-top: var(--size-2);
                }
        }
    }
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: translateY(-50%) scale(0.1);
            transform: translateY(-50%) scale(0.1);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(-50%) scale(1.4);
            transform: translateY(-50%) scale(1.4);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(-50%) scale(1.4);
            transform: translateY(-50%) scale(1.4);
    opacity: 0;
  }
}

@keyframes pulsate {
  0% {
    -webkit-transform: translateY(-50%) scale(0.1);
            transform: translateY(-50%) scale(0.1);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(-50%) scale(1.4);
            transform: translateY(-50%) scale(1.4);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(-50%) scale(1.4);
            transform: translateY(-50%) scale(1.4);
    opacity: 0;
  }
}

.scoredev {
  margin-bottom: var(--size-5);

  .scoredevInner {
    background-color: var(--bgSecondary);
    padding: var(--size-5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: var(--size-2);
    position: relative;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);

    .scoredevLeft,
    .scoredevRight {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .scoredevLeft {
      .team {
        .sortValue + .lastName,
        .seeding-information {
          margin-right: var(--size-1);
          font-size: 0.85rem;
        }

        .sortValue:not(:empty) {
          margin-right: var(--size-1);
        }

        .athlete-color {
          left: 0;
          border-top-left-radius: var(--size-3);
          border-bottom-left-radius: var(--size-3);
        }
      }
    }

    .scoredevRight {
      .team {
        .sortValue + .lastName,
        .seeding-information {
          margin-left: var(--size-1);
          font-size: 0.85rem;
        }

        .sortValue:not(:empty) {
          margin-left: var(--size-1);
        }

        .athlete-color {
          right: 0;
          border-top-right-radius: var(--size-3);
          border-bottom-right-radius: var(--size-3);
        }
      }
    }

    .separator-score-card {
      padding: 0 var(--size-9);
      font-size: var(--size-4);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;

      .separator-text {
        font-family: var(--eventFont-Bold);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }

      .last-action {
        font-size: 0.875rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        max-width: var(--size-12);
        text-align: center;
      }
    }

    .athleteLink_SC {
      max-width: 220px;
      display: inline-block;

      @media (max-width: 640px) {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
      }
    }

    .result-information {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: var(--size-5);

      .result-status {
        font-size: 0.75rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 0.125rem;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }

      .result-value {
        position: relative;

        .winner-indicator {
          font-family: var(--eventFontAccent);
          padding: 0.1rem var(--size-1);
          background-color: var(--bgTableOdd);
          border-radius: var(--size-1);
          color: var(--textColor);
          padding-bottom: 0.05rem;
          position: absolute;
          bottom: -1.2rem;
          font-size: 0.95rem;

          &:first-child {
            position: relative;
            bottom: -0.1rem;
          }
        }
      }
    }

    .scoredevRight {
      .result-information {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        @media (max-width: 1080px) {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
        }
      }
    }

    .team {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      gap: var(--size-3);

      .noc-element {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        img {
          height: var(--size-7);
          width: auto;
        }
      }

      .athlete-color {
        width: var(--size-2);
        height: 100%;
        position: absolute;

        &.BLUE {
          background-color: var(--blue);
        }

        &.BLACK {
          background-color: var(--black);
        }

        &.BROWN {
          background-color: var(--brown);
        }

        &.BURGUNDY {
          background-color: var(--burgundy);
        }

        &.CYAN {
          background-color: var(--cyan);
        }

        &.DARK.BLUE {
          background-color: var(--darkBlue);
        }

        &.DARK.NAVY {
          background-color: var(--darkNavy);
        }

        &.GOLD {
          background-color: var(--gold);
        }

        &.GREEN {
          background-color: var(--green);
        }

        &.GREY {
          background-color: var(--grey);
        }

        &.LIGHT.BLUE {
          background-color: var(--lightBlue);
        }

        &.MAGENTA {
          background-color: var(--magenta);
        }

        &.NAVY {
          background-color: var(--navy);
        }

        &.ORANGE {
          background-color: var(--orange);
        }

        &.PINK {
          background-color: var(--pink);
        }

        &.PURPLE {
          background-color: var(--purple);
        }

        &.RED {
          background-color: var(--red);
        }

        &.TEAL {
          background-color: var(--teal);
        }

        &.WHITE {
          background-color: var(--white);
          border: 1px solid darkgrey;
          width: calc(var(--size-2) - 2px);
        }

        &.YELLOW {
          background-color: var(--yellow);
        }

        &.LIGHT {
          background-color: lightgray;
        }

        &.DARK {
          background-color: grey;
        }
      }

      .lastName {
        font-family: var(--eventFont-Bold);
      }
    }

    .score {
      font-family: var(--eventFontAccent);
      font-size: var(--size-8);
      line-height: 1;
      text-align: center;
      min-width: var(--size-8);
      position: relative;
    }

    .scoredevRight {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;

      .team {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;

        .team-name {
          text-align: right;

          > span {
            display: inline-block;
          }
        }
      }

      &:has(.emptyTeam) {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
      }
    }
  }

  .competition-result-code {
    font-size: 0.8rem;
    margin-top: var(--size-2);
    text-align: center;
    font-family: var(--eventFont-Bold);
  }

  @media (max-width: 1080px) {
    .scoredevInner {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: 2px;
      background-color: transparent;
      padding: 0;

      .score {
        text-align: right;
      }

      .scoredevLeft,
      .scoredevRight {
        padding: var(--size-3);
        background-color: var(--bgSecondary);
        position: relative;

        &.isWinner {
          padding-bottom: var(--size-5);
        }

        .team {
          .athlete-color {
            right: 0;
            left: initial;
            border-top-right-radius: var(--size-3);
            border-bottom-right-radius: var(--size-3);
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }

          .team-name {
            text-align: left;
          }
        }
      }

      .scoredevLeft {
        border-top-left-radius: var(--size-3);
        border-top-right-radius: var(--size-3);

        .team {
          .athlete-color {
            border-top-right-radius: var(--size-3);
            border-bottom-right-radius: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }
      }

      .scoredevRight {
        border-bottom-left-radius: var(--size-3);
        border-bottom-right-radius: var(--size-3);

        .team {
          .athlete-color {
            border-top-right-radius: 0;
            border-bottom-right-radius: var(--size-3);
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }
      }

      .separator-score-card {
        display: none;
      }

      .scoredevRight {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;

        .team {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;

          .sortValue + .lastName,
          .seeding-information {
            margin-right: var(--size-1);
            margin-left: 0;
          }

          .sortValue:not(:empty) {
            margin-right: var(--size-1);
            margin-left: 0;
          }
        }

        .team-name {
          > span {
            text-align: left;
          }
        }
      }

      .team-name {
        display: inline;
      }
    }
  }

  @media (max-width: 640px) {
    .scoredevInner .team .sortValue + .lastName {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 150px;
    }
  }

  .ScoreCardResults.period-list {
    margin-top: var(--size-5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: var(--bgSecondary);
    border-radius: var(--radius-2);

    .PeriodDescription {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 var(--size-12);
              flex: 0 0 var(--size-12);

      > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: var(--size-7);
        border-bottom: 2px solid var(--bgMain);
        padding: var(--size-2);
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
    }

    .ScoresOneTeam {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      font-family: var(--eventFontAccent);
      font-size: var(--size-5);

      > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: var(--size-7);
        border-bottom: 2px solid var(--bgMain);
        padding: var(--size-2);
      }

      &:first-child {
        > div {
          -webkit-box-pack: end;
              -ms-flex-pack: end;
                  justify-content: flex-end;
        }
      }

      &:last-child {
        > div {
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: flex-start;
        }
      }
    }
  }

  .ScoreCardResults.decision {
    font-size: 0.875rem;
    text-align: center;
    font-family: var(--eventFont-Bold);
    text-transform: uppercase;

    .resultText {
      font-size: 0.875rem;
    }
  }
}

.sticky-content {
  position: fixed;
  z-index: 22;
  bottom: var(--size-3);
  right: var(--size-3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;

  .topArrow {
    display: none;
    border-radius: var(--radius-round);
    color: var(--textColor);
    border: 1px solid var(--textColor);
    font-family: ST-Info-Icon-Font;
    font-size: var(--size-5);
    line-height: var(--size-7);
    position: relative;
    cursor: pointer;
    width: var(--size-7);
    height: var(--size-7);
    /*becuase of weird behaviour in iframe where height is not recognized*/
    -ms-flex-negative: 0;
        flex-shrink: 0;
    text-align: center;
    background-color: var(--bgSecondary);
    bottom: var(--size-2);

    &:hover {
      color: var(--bgSecondary);
      background-color: var(--textColor);
    }

    &:before {
      content: "\f062";
      position: absolute;
      top: -1px;
      left: 0;
      bottom: 0;
      right: 0;
      font-size: var(--size-4);
    }
  }
}

.sportevents {
  margin-top: var(--size-7);
  margin-bottom: var(--size-5);
  gap: var(--size-3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;

  h1 {
    display: block;
    font-family: var(--eventFontAccent);
    font-size: var(--size-6);
    line-height: 1;
    margin-top: 0;
    margin-bottom: var(--size-3);
  }

  &:not(&.schedule) {
    margin-bottom: var(--size-6);

    h1 {
      margin-bottom: 0;
    }

    .sporticon {
      width: 3rem;
      height: 3rem;
    }
  }

  .SublineInfos {
    font-size: 0.875rem;

    .Title {
      font-family: var(--eventFont-Bold);
    }
  }

  .right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: var(--size-1);
    padding-top: var(--size-2);

    @media all and (max-width: 640px) {
      padding-top: 0;
    }

    h1 {
      width: 100%;
    }

    .key-value-list {
      font-size: 0.75rem;
    }
  }

  .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: var(--size-2);
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
    padding: var(--size-3);
    background-color: var(--bgSecondary);

    > a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

    @media all and (max-width: 640px) {
      display: none;
    }
  }

  .sporticon {
    width: var(--size-8);
    height: var(--size-8);
  }
}

.sportevents.schedule {
  padding: var(--size-3) var(--size-5);
  background-color: var(--bgSecondary);
  border-radius: var(--radius-3);
  margin-top: 0;
  margin-bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--size-1);
  -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;
          box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;

  h2 {
    font-family: var(--eventFontAccent);
    font-size: var(--size-7);
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1;
  }

  .SublineInfos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--size-1);
    margin-top: var(--size-1);
  }
}

.sportevents-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  margin-bottom: var(--size-6);

  .sportevents:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
  }

  .datepicker {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);

    @media (max-width: 1280px) {
      margin: 0;
    }
  }

  @media (max-width: 768px) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    .sportevents:not(:last-child) {
      border-radius: var(--radius-3);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .datepicker {
      border-radius: var(--radius-3);
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }
}

.sportSelectorMenue {
  position: relative;
  margin-bottom: var(--size-4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  &.x--open {
    .sportItems {
      display: block;
      -webkit-columns: 4;
         -moz-columns: 4;
              columns: 4;
      -webkit-column-width: 150px;
         -moz-column-width: 150px;
              column-width: 150px;
      width: calc(100% - var(--size-7) - 2px);
    }
  }

  .sportItemCurrent {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    cursor: pointer;
    background: var(--bgSecondary);
    font-size: 0.75rem;
    padding: var(--size-3) var(--size-5);
    border-radius: var(--radius-round);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--size-2);
    padding-right: var(--size-8);
    -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 1px;

    &:after {
      position: absolute;
      right: var(--size-3);
      font-family: ST-Info-Icon-Font;
      font-weight: normal;
      font-size: var(--size-3);
      width: var(--size-3);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      content: "\f0d7";
    }

    .sporticon {
      display: inline-block;
      vertical-align: top;
      width: var(--size-5);
    }
  }

  .sportItems {
    display: none;
    position: absolute;
    top: var(--size-9);
    left: 0;
    padding: var(--size-3);
    -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-3);
    z-index: 201;
    gap: var(--size-3);
    background-color: var(--bgSecondary);
  }

  .sportItem {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    line-height: 1;
    border: 1px solid transparent;
    padding: var(--size-2);
    gap: var(--size-2);
    width: 100%;

    &:hover {
      border-color: var(--textColor);
      cursor: pointer;

      a {
        text-decoration: none;
      }
    }

    a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-decoration: none;
      gap: var(--size-2);
      width: 100%;
    }

    .sporticon {
      height: var(--font-size-4);
      width: auto;
    }

    .sportCode {
      font-family: var(--eventFontAccent);
    }
  }
}

.reports .sportSelectorMenue {
  .sportItem:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-span: all;
       -moz-column-span: all;
            column-span: all;
    border: none;
    margin-top: var(--size-3);
    width: auto;

    a {
      border-top: 1px solid rgb(225 225 225);
      padding-top: var(--size-3);
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;

      &:after {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-family: ST-Info-Icon-Font;
        font-size: 0.875rem;
        content: "\f105";
        opacity: 0.8;
      }

      &:hover {
        .sportCode {
          text-decoration: underline;
        }
      }
    }

    .sportCode {
      font-family: var(--eventFont-Bold);
      opacity: 0.8;
      font-size: 0.875rem;
    }
  }
}

/*   .target-wrapper  contains two target-viewer component*/
.target-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: var(--size-7);
    padding: 1rem 12%;

    @media (max-width: 768px) {
        padding: 1rem 6%;
    }
}

/*    target-viewer is a component*/
.target-viewer {
  width: 200px;
  height: 200px;
  border-radius: 200px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-image: url(../base/images/sports/arc/archery_target.png);

  @media (max-width: 768px) {
    width: 150px;
    height: 150px;
    border-radius: 150px;
  }
  .arrow {
    position: absolute;
    background-color: black;
    width: 7px;
    height: 7px;
    border-radius: 7px;

    @media (max-width: 768px) {
      width: 5px;
      height: 5px;
      border-radius: 5px;
    }
  }
}
/* Official Communication */
.communicationSelection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.offCommunication {
  padding-top: var(--size-2);

  .communicationHeader {
    .downlaodZip {
      margin-bottom: var(--size-2);
    }
  }

  .downlaodZip {
    text-align: right;

    &.schedule {
      padding-top: var(--size-3);
    }
  }

  .sportGroupHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    > div {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }
  }

  .sportGroup {
    margin-bottom: var(--size-4);
  }

  .sportName {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: var(--size-2);

    img {
      margin-right: var(--size-2);
    }

    .headline {
      margin: 0;

      h2 {
        margin-top: 0;
        margin-bottom: 0;
        font-family: var(--eventFontAccent);
        font-size: var(--size-7);
        line-height: 1;
      }
    }
  }

  .name {
    text-align: left;
    .sort-wrapper {
      -webkit-box-pack: left;
          -ms-flex-pack: left;
              justify-content: left;
    }

    .icon--pdf {
      display: inline-block;
      top: 1px;
    }
  }

  .number {
    text-align: right;
    width: 80px;
  }

  .sport {
    width: 200px;
  }

  .noCommunication {
    font-size: 0.875rem;
  }
}

@media all and (max-width: 600px) {
  .offCommunication {
    div.downlaodZip {
      text-align: left;

      &.schedule {
        padding-top: 0;
      }
    }

    div.sportGroupHeader {
      display: initial;
    }
  }
}

@media all and (max-width: 700px) {
  div.communicationSelection {
    display: initial;
  }
}

.Schedule .legend .headline {
  display: none;
}

.legend {
  margin: 0.4rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--size-5);

  @media (max-width: 1280px) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--size-2);
  }

  .headline {
    display: none;
  }

  .competition,
  .medal,
  .ceremony,
  .current {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--size-2);
  }

  .ceremony:before {
    content: "";
    height: var(--size-3);
    width: var(--size-3);
    display: inline-block;
    background-image: url("images/event/ceremony.svg");
    background-size: cover;
  }

  .competition:before {
    content: "";
    height: var(--size-3);
    width: var(--size-3);
    display: inline-block;
    border-radius: var(--radius-round);
    background-color: var(--textColor);
  }

  .medal:before {
    content: "";
    height: var(--size-3);
    width: var(--size-3);
    display: inline-block;
    border-radius: var(--radius-round);
    padding: 0 var(--size-2);
    background-color: var(--eventColor1);
  }

  .current:before {
    content: "";
    height: var(--size-3);
    width: var(--size-3);
    display: inline-block;
    border-radius: var(--radius-round);
    background-color: var(--liveColor);
  }
}

.legendContainer {
  > .table-wrapper {
    padding: var(--size-3) var(--size-3);
    background-color: var(--bgTableOdd);
    border-radius: var(--size-1);
  }

  /* make a table not look like a table because #341231*/
  table,
  thead,
  tbody,
  tr,
  th,
  td,
  tfoot {
    display: block;
    padding: 0;
  }

  table tbody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-1);
    list-style: none;
    padding: 0;

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
    }
  }

  table tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    td:first-child {
      font-family: var(--eventFont-Bold);
      width: 5.5rem;
      min-width: 5.5rem;
    }

    &:has(.c-s-12),
    &:has(.c-s-11),
    &:has(.c-s-10),
    &:has(.c-s-9),
    &:has(.c-s-8),
    &:has(.c-s-7),
    &:has(.c-s-6),
    &:has(.c-s-5),
    &:has(.c-s-4) {
      display: none !important;
    }

    @media all and (max-width: 1200px) {
      &:has(.c-s-12) {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
      }
    }

    @media all and (max-width: 1100px) {
      &:has(.c-s-11) {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
      }
    }

    @media all and (max-width: 1000px) {
      &:has(.c-s-10) {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
      }
    }

    @media all and (max-width: 900px) {
      &:has(.c-s-9) {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
      }
    }

    @media all and (max-width: 800px) {
      &:has(.c-s-8) {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
      }
    }

    @media all and (max-width: 700px) {
      &:has(.c-s-7) {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
      }
    }

    @media all and (max-width: 600px) {
      &:has(.c-s-6) {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
      }
    }

    @media all and (max-width: 500px) {
      &:has(.c-s-5) {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
      }
    }

    @media all and (max-width: 400px) {
      &:has(.c-s-4) {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
      }
    }
  }

  table td {
    text-align: left;
  }

  thead {
    display: none;
  }

  table {
    font-size: 0.875rem; /* 14px */
    width: 100%;

    /* sport specific icons */
    /* TODO: this should be in the sportspecific css */
    td {
      &.protested {
        &:first-child {
          color: transparent;

          &:before {
            content: " ";
            display: inline-block;
            width: 0.8rem;
            height: 0.9rem;
            background: linear-gradient(225deg, white 50%, red 50%);
          }
        }
      }

      &.action.RU7:first-child {
        position: relative;
        color: transparent;

        &:before {
          content: "";
          position: absolute;
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          background-image: url(../base/images/sports/ru7_try.png);
          background-repeat: no-repeat;
          width: var(--size-3);
          height: var(--size-3);
          background-size: var(--size-3);
        }
      }

      &.Judge_PREFERRED:first-child {
        position: relative;
        color: transparent;
        &:before {
          content: "\f621";
          font-family: "FontAwesome-Solid";
          font-size: 0.6rem;
          display: inline-block;
          color: var(--textColor);
        }
      }

      &.estimated-icon:first-child {
        position: relative;
        color: transparent;

        &:before {
          content: "*";
          color: var(--textColor);
        }
      }

      &.icon--winner:first-child {
        display: none;
      }

      &.move.down.up {
        &:first-child {
          position: relative;
          color: transparent;
          &:before {
            content: "\f063\00a0\f062";
            font-family: "FontAwesome-Solid";
            font-size: 0.8rem;
            display: inline-block;
            color: var(--textColor);
          }
        }
      }

      &.cards.yc {
        margin-left: 0;
        position: relative;

        &:first-child {
          color: transparent;

          &::before {
            content: "";
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: 0.75rem;
            height: var(--size-3);
            border-radius: var(--radius-2);
            background-color: var(--yellow);
            position: absolute;
            left: 0;
            top: 0;
          }
        }

        &:last-child {
          display: table-cell;
          width: initial;
          height: initial;

          &:before {
            display: none;
          }
        }
      }

      &.cards.Y {
        /*.cards.Y selectors because Judo does it different*/

        margin-left: 0;
        position: relative;

        &:first-child {
          color: transparent;

          &::before {
            content: "";
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: 1rem;
            height: var(--size-4);
            border-radius: var(--radius-2);
            background-color: var(--yellow);
            position: absolute;
            left: 0;
            top: 0;
          }
        }

        &:last-child {
          display: table-cell;
          width: initial;
          height: initial;

          &:before {
            display: none;
          }
        }
      }

      &.cards.Y2 {
        margin-left: 0;

        &:first-child {
          color: transparent;

          &::before {
            content: "2";
            color: var(--textColor);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: 1rem;
            height: var(--size-4);
            border-radius: var(--radius-2);
            background-color: var(--yellow);
            position: absolute;
            left: 0;
            top: 0;
            font-family: var(--eventFont);
            font-size: 0.75rem;
          }
        }

        &:last-child {
          display: table-cell;
          width: initial;
          height: initial;

          &:before {
            display: none;
          }
        }
      }

      &.cards.RH {
        margin-left: 0;

        &:first-child {
          color: transparent;

          &::before {
            content: "H";
            color: white;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: 1rem;
            height: var(--size-4);
            border-radius: var(--radius-2);
            background-color: var(--red);
            position: absolute;
            left: 0;
            top: 0;
            font-family: var(--eventFont);
            font-size: 0.75rem;
          }
        }

        &:last-child {
          display: table-cell;
          width: initial;
          height: initial;

          &:before {
            display: none;
          }
        }
      }

      &.cards.RX {
        margin-left: 0;

        &:first-child {
          color: transparent;

          &::before {
            content: "X";
            color: white;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: 1rem;
            height: var(--size-4);
            border-radius: var(--radius-2);
            background-color: var(--red);
            position: absolute;
            left: 0;
            top: 0;
            font-family: var(--eventFont);
            font-size: 0.75rem;
          }
        }

        &:last-child {
          display: table-cell;
          width: initial;
          height: initial;

          &:before {
            display: none;
          }
        }
      }

      &.cards.rc {
        margin-left: 0;
        position: relative;

        &:first-child {
          color: transparent;

          &::before {
            content: "";
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: 0.75rem;
            height: var(--size-3);
            border-radius: var(--radius-2);
            background-color: var(--red);
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }

      &.cards.yrc {
        margin-left: 0;
        position: relative;

        &:first-child {
          color: transparent;

          &::before {
            content: "";
            display: inline-block;
            width: 0.75rem;
            height: var(--size-3);
            border-radius: var(--radius-2);
            background-color: var(--yellow);
            position: absolute;
            left: 0;
            top: 0;
          }

          &::after {
            content: "";
            color: var(--white);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: 0.75rem;
            height: var(--size-3);
            border-radius: var(--radius-2);
            background-color: var(--red);
            position: absolute;
            left: var(--size-1);
            top: var(--size-1);
          }
        }
      }

      &:first-child {
        &.icon-photofinish {
          color: transparent;
          padding: 0;
          line-height: 30px;

          &:before {
            color: var(--textColor);
          }
        }
      }

      &:last-child {
        &.icon-photofinish {
          text-indent: 0;
          padding: 0;
          line-height: 30px;

          &:before {
            display: none;
          }
        }
      }

      &:first-child {
        &.icon-photofinish-disabled {
          color: transparent;

          &:before {
            left: 7px;
          }
        }
      }

      &:last-child {
        &.icon-photofinish-disabled {
          text-indent: 0;

          &:before {
            display: none;
          }
        }
      }
    }
  }
}

/* modules/intermediateGrid */

.intermediateGrid {
  padding: 5px;
  background-color: #efefef;
  border-radius: 5px;
  margin: 0;

  &:empty {
    display: none;
  }

  &.withWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    gap: var(--size-2);
  }

  &.row .intermediateWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }

  &.column .intermediateWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .intermediateWrapper {
    border: 1px solid #cdcdcd;
    border-radius: 5px;

    &.withHeader {
      .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 60%;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
      }

      .name {
        width: 40%;
      }

      .bottom,
      .top {
        width: 50%;
      }

      .performance,
      .rank {
        width: 50%;
      }
    }
  }

  .intermediateWrapper.column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: transparent;
    border: none;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: var(--size-2);

    .interm {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      background-color: unset;
      border: 1px solid #cdcdcd;
      border-radius: var(--size-2);
    }
    .name {
      text-align: left;
      font-weight: bold;
    }
  }

  .interm,
  .top,
  .bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row;
            flex-flow: row;
  }

  .interm {
    border-bottom: 1px solid #cdcdcd;
    padding: var(--size-2) var(--size-3);

    &.two-lines {
      height: 33px;
    }
  }

  .interm:last-child {
    border-bottom: none;
  }

  .name {
    width: calc(100% - 90px);
  }

  .content {
    text-align: right;
    width: 90px;
    padding-right: 2px;
  }

  .performance {
    width: 56px;
  }

  .rank {
    width: 34px;
  }

  @media all and (max-width: 800px) {
    font-size: 90%;

    .intermediateWrapper {
      margin: 2px;

      .interm {
        padding: 3px 5px;
      }
    }
  }
}

/*  modules/logon */

.logOn {
  margin-left: auto;
  margin-right: auto;

  input[type="submit"] {
    font-weight: bold;
    background: var(--eventColor1);
    border-bottom: 0 solid transparent;
    color: #ffffff;
    text-transform: uppercase;
    height: 30px;
    margin-left: 5px;
    line-height: 30px;
    padding: 0 8px;
    white-space: nowrap;
    cursor: pointer;

    a {
      color: inherit;

      &:hover {
        text-decoration: none;
      }
    }

    &:hover {
      background: var(--eventColor1Light);
    }

    margin-left: 0;
    margin-top: 15px;
  }

  .editor-label {
    margin-top: 5px;
    font-size: 12px;
  }
}

.MedalsInfo.subline {
  text-align: center;
  margin-bottom: var(--size-4);
  font-size: 0.875rem;
}

.medalsbyDate {
  margin-top: var(--size-7);

  .table-wrapper
    {
        margin-top: 0;
    }

  > img {
    position: relative;
    top: 4px;
    margin-right: var(--size-1);
  }

  .sport-headline {
    display: inline-block;
  }
}

.athlete-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--size-3);

  .athlete-profile,
  .athlete-informations {
    padding: var(--size-4);
    background-color: var(--bgSecondary);
    border-radius: var(--size-2);
  }

  .athlete-profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--size-4);

    @media all and (max-width: 900px) {
      display: grid;
      grid-template-columns: auto 1fr;

      > :first-child {
        grid-column: 1;
        grid-row: span 3;
      }

      > :not(:first-child) {
        grid-column: 2;
      }
    }
  }

  .name-information {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: var(--size-7);

    @media all and (max-width: 900px) {
      margin-top: initial;
    }

    .athlete-name {
      font-family: var(--eventFont-Bold);
      font-size: var(--size-5);
    }

    .athlete-nationality {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: var(--size-2);

      .noc-element {
        font-size: 0.875rem;
      }
    }
  }

  .person-information {
    font-size: 0.875rem;
    margin-left: auto;
    margin-top: var(--size-7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--size-2);

    @media all and (max-width: 900px) {
      margin-left: initial;
      margin-top: initial;
    }

    > div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

    .key {
      font-family: var(--eventFont-Bold);
      min-width: 6rem;

      &:after {
        content: ":";
        font-family: var(--eventFont-Bold);
        position: relative;
        right: 2px;
      }
    }
  }

  .event-information {
    font-size: 0.875rem;
    margin-top: var(--size-7);
    margin-left: var(--size-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--size-2);

    @media all and (max-width: 900px) {
      margin-left: initial;
      margin-top: initial;
    }

    .athelete-events {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
  }

  .athlete-informations {
    display: block;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;

    @media all and (max-width: 900px) {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }

    &:not(:has(.athlete-information-item)) {
      display: none;
    }

    .athlete-information-item {
      display: grid;
      grid-template-columns: 160px minmax(0, 1fr);
      font-size: 0.875rem;
      margin-bottom: var(--size-2);

      .key {
        font-family: var(--eventFont-Bold);
        min-width: 0;
        overflow-wrap: anywhere;

        &:after {
          content: ":";
          font-family: var(--eventFont-Bold);
          position: relative;
          right: 2px;
        }
      }
    }
  }

  .image-information {
    width: var(--size-11);
    height: var(--size-11);
    border-radius: 50%;
    overflow: hidden;
    -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
    margin-right: var(--size-3);

    &:not(:has(.athlete-image)) {
      display: none;

      ~ .name-information,
      ~ .person-information,
      ~ .event-information {
        margin-top: 0;
      }
    }

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

  &.animal {
    .event-information {
      margin-left: var(--size-8);

      @media all and (max-width: 900px) {
        margin-left: initial;
      }

      > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }

      .key {
        font-family: var(--eventFont-Bold);
        min-width: 4rem;

        @media all and (max-width: 900px) {
          min-width: 6rem;
        }

        &:after {
          content: ":";
          font-family: var(--eventFont-Bold);
          position: relative;
          right: 2px;
        }
      }

      .value {
        max-width: var(--size-12);
      }
    }

    .image-information {
      background-image: url("images/horse_profile.jpg");
      background-size: cover;
      -webkit-box-shadow: none;
              box-shadow: none;

      &:not(:has(.athlete-image)) {
        display: block;

        ~ .name-information,
        ~ .person-information,
        ~ .event-information {
          margin-top: var(--size-7);
        }
      }
    }
  }

  &.team {
    .image-information {
      display: none;
    }

    .team-members {
      margin-top: var(--size-4);
      color: transparent;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      line-height: 0;

      .athleteLink {
        color: var(--linkColor);
        line-height: 1.5;
      }
    }

    .event-information {
      margin-left: auto;
      margin-top: initial;

      @media all and (max-width: 900px) {
        margin-left: initial;
        margin-right: auto;
        margin-top: var(--size-3);
      }
    }

    .name-information {
      margin-top: initial;
    }

    .athlete-profile {
      @media all and (max-width: 900px) {
        gap: initial;
      }
    }

    .athlete-nationality {
      margin-top: var(--size-3);
    }
  }

  .participantResults .group .header .text img {
    border-radius: var(--size-1);
    background-color: white;
    padding: var(--size-2);
    width: var(--size-5);
  }

  .recordsTable {
    .sportTitle {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: var(--size-2);
      padding-bottom: var(--size-2);
      padding-top: var(--size-3);

      .headline,
      .sportimage {
        margin: 0;
        padding: 0;
      }
    }
  }
}

table.medalTally,
.medalsbyDate {
  th.name,
  th.country,
  th.athlete {
    text-align: left;

    .sort-wrapper {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
  }

  td.athlete {
    text-align: left;

    > .athleteLink {
      font-family: var(--eventFont-Bold);
    }
  }

  a.athleteLink {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  td.name,
  td.country {
    text-align: left;

    a {
      gap: var(--size-1);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .noc-element {
      gap: 0.125rem;
      min-width: var(--size-8);

      img {
        width: var(--size-3);
      }

      span {
        font-size: 0.625rem;
      }
    }
  }
}

.athlete-medals {
    .medal-count
    {
        vertical-align: top;
    }
}

.cards {
  margin-left: 3px;
  position: relative;
}

.cards.Y,
.cards.Y1,
.cards.Y2,
.cards.Y3,
.cards.Y4,
.cards.Y5,
.cards.Y6,
.cards.Y7,
.cards.Y8,
.cards.Y9 {
  display: inline-block;
  width: var(--size-3);
  height: var(--size-5);
  border-radius: var(--radius-2);

  &::before {
    content: "";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);
    background-color: var(--yellow);
    position: absolute;
    left: 0;
    top: 0;
  }
}

.cards.R,
.cards.R1,
.cards.R2,
.cards.R3,
.cards.R4,
.cards.R5,
.cards.R6,
.cards.R7,
.cards.R8,
.cards.R9 {
  display: inline-block;
  width: var(--size-3);
  height: var(--size-5);
  border-radius: var(--radius-2);

  &::before {
    content: "";
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);
    background-color: var(--red);
    position: absolute;
    left: 0;
    top: 0;
  }
}

.cards.YR,
.cards.YR1,
.cards.YR1,
.cards.YR2,
.cards.YR3,
.cards.YR4,
.cards.YR5,
.cards.YR6,
.cards.YR7,
.cards.YR8,
.cards.YR9 {
  display: inline-block;
  width: var(--size-3);
  height: var(--size-5);
  margin-right: var(--size-2);

  &::before {
    content: "";
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);
    background-color: var(--yellow);
    position: absolute;
    left: 0;
    top: 0;
  }

  &::after {
    content: "";
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);
    background-color: var(--red);
    position: absolute;
    left: var(--size-1);
    top: var(--size-1);
  }
}

.cards.YR1:after,
.cards.Y1:before,
.cards.R1:before {
  content: "1";
}
.cards.YR2:after,
.cards.Y2:before,
.cards.R2:before {
  content: "2";
}
.cards.YR3:after,
.cards.Y3:before,
.cards.R3:before {
  content: "3";
}
.cards.YR4:after,
.cards.Y4:before,
.cards.R4:before {
  content: "4";
}
.cards.YR5:after,
.cards.Y5:before,
.cards.R5:before {
  content: "5";
}
.cards.YR6:after,
.cards.Y6:before,
.cards.R6:before {
  content: "6";
}
.cards.YR7:after,
.cards.Y7:before,
.cards.R7:before {
  content: "7";
}
.cards.YR8:after,
.cards.Y8:before,
.cards.R8:before {
  content: "8";
}
.cards.YR9:after,
.cards.Y9:before,
.cards.R9:before {
  content: "9";
}

/* Usage in Brackets */
.Bracket {
  .cards {
    margin-right: 6px;
    font-size: 0.7rem;

    &[class*=" R"] {
      &:before {
        color: var(--white) !important;
      }
    }

    &[class*=" Y"] {
      &:before {
        color: var(--black) !important;
      }
    }

    &[class*=" YR"] {
      margin-right: 12px;
      position: relative;
      bottom: 2px;

      &:after {
        color: var(--white) !important;
      }
    }
  }

  .cards,
  .cards:before,
  .cards:after {
    width: 10px;
    height: 16px;
    border-radius: 2px;
  }
}
@font-face {
  font-family: "Roboto";
  src:
    url("../base/fonts/Roboto-Regular-webfont.woff") format("woff"),
    url("../base/fonts/Roboto-Regular-webfont.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src:
    url("../base/fonts/Roboto-Bold-webfont.woff") format("woff"),
    url("../base/fonts/Roboto-Bold-webfont.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "ST-Info-Icon-Font";
  src:
    url("../base/fonts/st-info-icon-font.woff") format("woff"),
    url("../base/fonts/st-info-icon-font.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FontAwesome-Regular";
  src: url("../base/fonts/fa-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FontAwesome-Brand";
  src: url("../base/fonts/fa-brands.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FontAwesome-Solid";
  src: url("../base/fonts/fa-solid.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--eventFont);
}

.test-environment {
  width: 100%;
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  color: red;
  font-size: 60px;
  padding-top: 70px;
}

main,
footer {
  max-width: var(--page-width);
  margin: 0 auto;
}

.st-info {
    a,
    .link {
        color: var(--linkColor);

        &:hover {
            color: var(--linkcolorHover);
        }

        &:focus {
            outline: 2px solid var(--linkcolorHover);
            outline-offset: 2px;
        }

        &:focus-visible {
            outline: 2px solid var(--linkcolorHover);
        }
    }

    area {
        outline: none;
    }

    #page {
        position: relative;
        font-family: var(--eventFont);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-bottom: 30px;
        min-height: 450px;
    }

    #loader {
        border-radius: 50%;
        width: 24px;
        height: 24px;
        border: 0.25rem solid var(--eventColor2Light2);
        border-top-color: var(--eventColor2);
        -webkit-animation: spin 1s infinite linear;
        animation: spin 1s infinite linear;
        z-index: 1000;
        background-color: white;
        outline: 10px solid white;
        position: fixed;
        left: calc(50% - 24px);
        right: 0;
        top: calc(50% - 24px);
        bottom: 0;
    }

    .print,
    .c-hide.sortValue {
        display: none;
    }

    img {
        border: none;
    }

    .clear {
        clear: both;
    }

    a {
        color: var(--linkColor);

        &:hover {
            color: var(--buttonColorHover);
        }
    }

    .link {
        color: var(--linkColor);
        cursor: pointer;
    }

        .link:hover {
            text-decoration: underline;
        }

    .athleteLink {
        position: relative;
    }

    .athleteName {
        .starting-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;

            .starting {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                padding-left: 5px;
            }
        }
    }

    .athlThumbN {
        display: block;
        position: absolute;
        z-index: 1001;
        bottom: -110px;
        left: 0;
        background-color: white;
        border: 4px solid white;
        outline: 1px solid #ededed;
        border-radius: 4px;

        img {
            border-radius: 4px;
            display: block;
        }
    }

    .width3Percent {
        width: 3%;
    }

    .width4Percent {
        width: 4%;
    }

    .width5Percent {
        width: 5%;
    }

    .c-w-6 {
        width: 6%;
    }

    .width7Percent {
        width: 7%;
    }

    .width8Percent {
        width: 8%;
    }

    .c-w-10 {
        width: 10%;
    }

    .width20Percent {
        width: 20%;
    }
    /*#header .information { background-repeat: no-repeat; width: 100%; height: 23px; position: absolute; bottom: 0px; left: 0px; color: #000; font-size: 14px; font-weight: bold; line-height: 23px; padding-left: 8px; text-align: left; vertical-align: middle; text-transform: uppercase; display:none; }*/
    #header .information {
        background-repeat: no-repeat;
        bottom: 0;
        color: #0c4da4;
        font-size: 14px;
        font-weight: bold;
        height: 23px;
        line-height: 23px;
        padding-left: 8px;
        position: absolute;
        right: 11px;
        text-align: left;
        text-transform: uppercase;
        top: 125px;
        vertical-align: middle;
        display: none;
    }

    #header .event-information {
        display: none;
    }

    #header a {
        text-decoration: none;
    }

    #header img {
        vertical-align: middle;
    }

    .schedule_location {
        text-align: center;
        width: 50px;
    }
    /* Content*/
    /* breadcrumb */
    #breadCrumb {
        background-image: none;
        background-repeat: repeat-x;
        border-top: none;
        border-left: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        font-size: 0.9em;
        margin-top: 3px;
        margin-bottom: 0;
        padding: 6px 5px 6px 14px;
        width: 623px;
        float: left;

        a {
            color: #a0a0a0;
            text-decoration: underline;
        }
    }
    /* content header area */
    #contentHeader {
        height: 120px;
        margin-top: 15px;
        margin-left: 10px;
    }
    /* headlines */
    .empty-table {
        padding: 10px 0;
    }

    .related.medals .tableTitle {
        float: none;
    }

    h2,
    h3 {
        font-family: var(--eventFontAccent);
        font-size: var(--size-7);
        margin-top: 0;
        margin-bottom: var(--size-3);
        line-height: 1;
        display: inline-block;

        @media (max-width: 768px) {
            font-size: var(--size-5);
        }
    }

    h3 {
        margin-bottom: var(--size-2);
        font-size: var(--size-6);
    }

    .headlineAppendix {
        font-size: 16px;
        font-style: normal;
        font-weight: bold;
        color: #333333;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    #contentHeader .subline {
        color: #ee1f27;
        margin-bottom: 10px;
    }

    .related.medals {
        overflow: hidden;
        width: 375px;
        margin: 10px;
        clear: none;
        top: -40px;
    }

        .related.medals .title {
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
        }

    .related .medalwinner {
        /*float:left;*/
        margin: 10px 5px 5px 0px;
        height: 22px;
        line-height: 22px;
    }

        .related .medalwinner img {
            border: 0;
            right: 0;
            top: 0;
            vertical-align: middle;
            margin-right: 6px;
        }

    .related .noc-element img {
        border: none;
    }

    .related .medalwinner .medal {
        vertical-align: middle;
        margin-right: 7px;
    }

    img.countryflag {
        width: 130px;
        float: right;
        padding: 7px;
    }

    .related.medals tr.False td,
    .related.medals tr.True td {
        padding-left: 5px;
        height: 30px;
    }

    .MedalList {
        .icon--medal {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;

            &.gold {
                background-image: url(images/medals/Gold.png);
            }

            &.silver {
                background-image: url(images/medals/Silver.png);
            }

            &.bronze {
                background-image: url(images/medals/Bronze.png);
            }

            &:before {
                content: "";
            }
        }
    }

    div.box img {
        border: 0 none;
    }

    div.box .sportpic {
        float: left;
    }

    div.box .headline {
        float: left;
        vertical-align: middle;
        width: 112px;
        padding-left: 5px;
        padding-top: 6px;
        line-height: 12px;
        font-size: 12px;
        color: #ffffff;
        text-shadow: 0 1px 0 #084471;
    }

    .dotCeremony,
    .dotDate {
        position: relative;
    }

    .dotCeremony {
        background-image: url("images/event/ceremony.svg");
        background-position: center;
        background-repeat: no-repeat;
        height: 32px;
        background-size: 24px 24px;
        display: block;
    }

    td.dotCeremony {
        display: table-cell;
    }

    .DetailedDayScheduleDet {
        margin-bottom: 1px;
    }

        .DetailedDayScheduleDet div {
            border-radius: 5px;
        }

    .scheduleContainer {
        .icon--medal {
            background-repeat: no-repeat;
            background-size: contain;

            &.gold {
                background-image: url(images/medals/Gold.png);
            }

            &.bronze {
                background-image: url(images/medals/Bronze.png);
            }

            &:before {
                content: "";
            }
        }
    }

    td.athletePhoto {
        width: 50px;
        text-align: center;
        padding: 0;
    }

    td.bib {
        width: 45px;
        text-align: center;
    }

    .behind {
        min-width: 65px;
        text-align: right;
    }

    .heatColumn {
        width: 46px;
    }

    .All_gap {
        min-width: 65px;
        text-align: right;
    }

    .All_legend {
        min-width: 56px;
    }

    .All_bib {
        width: 30px;
    }

    .StartList .All_bib {
        width: 50px;
    }

    .All_rank {
        width: 40px;
    }

    .All_gap {
        min-width: 65px;
    }

    .sportbackground_item {
        padding: 7px;
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .newsOverView .sportbackground_item {
        padding: 7px;
        padding-left: 30px;
        padding-top: 5px;
        padding-bottom: 5px;
        float: left;
        width: 45%;
        height: 120px;
    }

    .sportbackground_item .c-a-r {
        float: left;
        width: 850px;
    }

    .sportbackground_item .c-a-l {
        float: left;
        margin-right: 7px;
    }

    .newsBorderLeft {
        border-left: 1px dashed #888888;
    }

    .newsBorderBottom {
        border-bottom: 1px dashed #888888;
    }

    .select.newscategory table {
        margin-bottom: 0;
    }
    /* PAGING */
    /*
    .paging { padding: 5px; }
    .paging a,
    .paging span { font-size: 1.2em; font-weight: bold; padding-right: 3px; }
    .paging span { color: #329BEC; }
    .select.newscategory .paging { padding: 0;}
    */
    .paging {
        position: relative;
        top: 10px;
    }

        .paging * {
            background-repeat: no-repeat;
            display: block;
            float: left;
            font-size: 14px;
            font-weight: bold;
            height: 20px;
            line-height: 20px;
            margin-right: 5px;
            text-align: center;
            width: 20px;
        }

        .paging .clear {
            clear: both;
            float: none !important;
        }

        .paging a,
        .paging a:hover {
            cursor: pointer;
        }

        .paging .first {
            background-image: url("../base/images/news_paging/paging_firstpage.jpg");
        }

        .paging .previous {
            background-image: url("../base/images/news_paging/paging_previouspage.jpg");
        }

        .paging .pages {
            background-image: url("../base/images/news_paging/paging_default.jpg");
            color: #575757;
        }

        .paging .selectedPage {
            background-image: url("../base/images/news_paging/paging_selected.jpg");
            color: #ffffff;
        }

        .paging .next {
            background-image: url("../base/images/news_paging/paging_nextpage.jpg");
        }

        .paging .last {
            background-image: url("../base/images/news_paging/paging_lastpage.jpg");
        }

        .paging .disable {
            opacity: 0.5;
        }

    .sportbackground_item .image {
        float: left;
        width: 80px;
        text-align: center;
    }

        .sportbackground_item .image img {
            width: 80px;
        }

    .sportbackground_item .wrapper {
        float: left;
        width: 310px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .sportbackground_item .c-a-l img {
        width: 75px;
        border: 1px solid #e5e5e5;
    }

    .sportbackground_item .title {
        font-size: 16px;
        font-weight: bold;
        color: #0473c4;
        padding-top: 8px;
        word-wrap: break-word;
    }

    .sportbackground_item .teasertext {
        margin-top: 5px;
    }

    .newsCategory {
        font-size: 20px;
        font-weight: bold;
        margin: 15px 10px 15px 0;
        padding-left: 0.2em;
    }

    .newsTable {
        td {
            padding-top: 5px;
        }

        .title {
            font-weight: bold;
            vertical-align: top;
            width: 150px;
        }

        .text {
            & > p {
                margin-top: 0;
                padding-top: 0;
            }

            & > h3 {
                font-size: 1em;
                margin-top: 0;
                padding-top: 0;
            }
        }
    }

    .sportbackground_item .teasertext a {
        text-decoration: underline;
    }

    .newsitemHeadline {
        padding-left: 7px;
        padding-right: 7px;
        color: #333333;
        font-size: 16px;
        font-style: normal;
        font-weight: bold;
        padding-bottom: 4px;
        padding-top: 4px;
        text-transform: uppercase;
    }

    .sportbackground_item ul {
        padding-left: 0px;
        margin: 0px;
        margin-left: 15px;
    }

        .sportbackground_item ul li a {
            padding-right: 15px;
            background-repeat: no-repeat;
            background-position: right center;
            text-decoration: none;
            color: #0374c4;
        }

        .sportbackground_item ul li {
            margin-top: 5px;
        }

            .sportbackground_item ul li a:hover {
                text-decoration: underline;
            }

    .teasertext {
        padding-left: 7px;
        padding-right: 7px;
        padding-bottom: 4px;
        padding-top: 4px;
    }

    table th.dayHead_None {
        text-shadow: none;
    }

    table th.topHeader {
        background-position: center;
    }

    .medalsbyCountry-selectedNation {
        padding-left: 10px;

        a {
            float: left;
            display: block;

            img {
                border: 1px solid #cdcdcd;
            }

            .headline {
                padding-top: 25px;
                padding-left: 10px;
            }

            .headlineAppendix {
                padding-top: 25px;
                padding-left: 10px;
            }
        }

            a.img {
                margin-left: 10px;
                margin-top: 10px;
                margin-bottom: 10px;
            }
    }

    .topLink {
        display: block;
        text-align: right;
        margin-right: 30px;
    }

    table.related {
        margin-bottom: 0;
        margin-left: 4px;
        margin-top: 0;
    }

    .recordsTable {
        margin-bottom: 20px;

        .headline {
            padding-left: 10px;
            padding-top: 12px;
            float: left;
        }

        img.sportimage {
            padding-top: 6px;
            padding-left: 0;
            float: left;
            margin-bottom: 5px;
        }

        table.records {
            margin-bottom: 20px;

            .eventType {
                text-align: left;
                width: 20%;
            }

            .type {
                width: 65px;
            }

            .value {
                width: 75px;
            }

            .date {
                width: 110px;
            }

            .location {
                text-align: left;
                width: 200px;
            }

            .athlete {
                text-align: left;
            }
        }
    }
    /* Font fuer Scoreboard einbinden */
    .posInfo {
        width: 100px;
    }

    table.records tr.True td,
    table.records tr.False td {
        height: auto;
    }

    tr.subtitle {
        font-weight: bold;
        background-color: #ddd;
        height: 34px;
    }

    a.generateTranslation {
        background-color: red;
        color: white;
        padding: 3px;
    }

    .intermediateResult {
        /*should be treated like a span*/
        display: inline;
        font-weight: bold;
    }

    td.preresult {
        font-size: 12px;
        text-align: center;
        padding: 1px;
    }

    .color img {
        border: 1px solid #cdcdcd;
        margin-left: 3px;
        margin-right: 3px;
        position: relative;
        top: 2px;
    }

    .noWrap {
        display: block;
        white-space: nowrap;
    }

    .width-rounds {
        width: 25px;
    }

    a.ViewPdfBack {
        font-size: 20pt;
        font-weight: bold;
        margin-top: 10px;
        background: white;
        color: Black;
        text-decoration: underline;
    }

    body.HeaderPDF {
        background-image: none;
        background-color: White;
    }

    .personalInformation {
        margin-bottom: 20px;

        .noc-element img {
            top: 0;
        }
    }

    .emptyRow {
        background-color: Gray;
    }
    /*for Schedule - SportsList */
    .sportList {
        margin: 0 0 40px 10px;
    }

    DetailedScheduleByDay .toolTip:hover span.toolInfo {
        display: block;
        position: absolute;
        right: -15px;
        width: auto;
        z-index: 1000;
        background: transparent;
        margin-top: -12px;
        margin-left: -15px;
        text-align: center;

        .tipArrow {
            position: absolute;
            width: 17px;
            height: 10px;
            right: 25px;

            &:before {
                position: absolute;
                left: 0;
                top: 0;
                content: "";
                border-bottom: 10px solid var(--eventColor1);
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
            }

            &:after {
                position: absolute;
                left: 0;
                top: 2px;
                content: "";
                border-bottom: 10px solid var(--white);
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
            }
        }

        .tipContent {
            margin-top: 10px;
            min-width: 57px;
            border-radius: 3px;
            padding: 5px 5px;
            background: var(--white);
            border: 1px solid var(--eventColor1);
            color: var(--greyTextDark);
            font-size: 12px;
            line-height: 12px;
            -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
            font-weight: bold;

            a {
                color: var(--eventColor1);
            }

            table {
                font-weight: normal;
                margin-top: 0.5em;

                td {
                    border: none;
                    padding: 0.3em;
                }

                a {
                    display: inline-block;
                    min-width: 50px;
                }
            }
        }
    }

    .athleteSearch .toolTip:hover span.toolInfo {
        display: block;
        position: absolute;
        right: -15px;
        width: auto;
        z-index: 1000;
        background: transparent;
        margin-top: -12px;
        margin-left: -15px;
        text-align: center;

        .tipArrow {
            position: absolute;
            width: 17px;
            height: 10px;
            right: 25px;

            &:before {
                position: absolute;
                left: 0;
                top: 0;
                content: "";
                border-bottom: 10px solid var(--eventColor1);
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
            }

            &:after {
                position: absolute;
                left: 0;
                top: 2px;
                content: "";
                border-bottom: 10px solid var(--white);
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
            }
        }

        .tipContent {
            margin-top: 10px;
            min-width: 57px;
            border-radius: 3px;
            padding: 5px 5px;
            background: var(--white);
            border: 1px solid var(--eventColor1);
            color: var(--greyTextDark);
            font-size: 12px;
            line-height: 12px;
            -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
            font-weight: bold;

            a {
                color: var(--eventColor1);
            }

            table {
                font-weight: normal;
                margin-top: 0.5em;

                td {
                    border: none;
                    padding: 0.3em;
                }

                a {
                    display: inline-block;
                    min-width: 50px;
                }
            }
        }
    }

    .sporticon {
        border: none 0;
    }

    .sportList_Closer div:first-child {
        margin-left: 11px;
    }

    .schedule_event {
        position: relative;

        .scheduleH2HOneTeam {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;

            + .scheduleH2HOneTeam {
                margin-top: var(--size-1);
            }

            + .scheduleH2HOneTeam {
                margin-top: var(--size-1);
            }

            &.winner {
                font-weight: bold;
            }

            .scheduleH2HOneTeam_Flag {
                width: 58px;

                a {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                }

                &.teamMember {
                    width: 120px;

                    a {
                        width: 60px;
                    }
                }
            }

            .scheduleH2HOneTeam_Name {
                position: relative;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                gap: var(--size-1);
                margin-left: var(--size-1);
            }
        }

        .scheduleH2HOneTeam_Flag {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-right: var(--size-1);
        }

        .ScheduleH2HSeperator {
            position: relative;
        }

        .icon--medal {
            background-repeat: no-repeat;
            background-position: right 0;
            position: absolute;
            right: -5px;
            top: -1px;
            height: 25px;
            width: 25px;

            &.gold {
                background-image: url("images/medals/gold_part.png");
            }

            &.bronze {
                background-image: url("images/medals/bronze_part.png");
            }

            &:before {
                display: none;
            }
        }
    }

    .h2h_result {
        height: 19px;
        position: relative;
        top: 3px;
    }

    .Records .pagetitle .subtext {
        display: none;
    }
    /*records - record classes*/
    .filters {
        tbody {
            td {
                border: none;
            }

            tr:hover {
                td {
                    background: none;
                }
            }
        }
    }

    .recordsPage {
        .tabswitcher {
            margin: 0;
        }

        .filters {
            margin-bottom: 20px;
            padding-top: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            position: relative;

            .recordClasses {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                position: relative;

                div {
                    background-color: var(--eventColor1);
                    cursor: pointer;
                    text-decoration: none;
                    margin: 3px 5px;
                    line-height: 20px;
                    padding: 3px;

                    .icon {
                        background-position: center center;

                        &:before {
                            font-size: inherit;
                            font-family: inherit;
                        }
                    }

                    a {
                        color: #fff;
                    }

                    &.c-selected,
                    &.c-selected:hover {
                        background-color: var(--eventColor2);

                        a {
                            color: var(--text-over-eventColor2);

                            .icon {
                                color: #fff;
                            }
                        }
                    }

                    &:hover {
                        background-color: var(--eventColor1Light);
                    }

                    &.all {
                        .icon {
                            background-image: url(../base/images/recordClasses/all.png);
                        }
                    }

                    &.UR {
                        .icon {
                            &:before {
                                content: "UR";
                            }
                        }
                    }

                    &.WG {
                        .icon {
                            padding-left: 28px;

                            &:before {
                                content: "WG";
                            }
                        }
                    }

                    &.WR {
                        .icon {
                            padding-left: 28px;

                            &:before {
                                content: "WR";
                            }
                        }
                    }
                }
            }
        }
    }

    .filters form {
        text-align: right;
        margin: 0px;
        padding: 0px;
        margin-right: 5px;
    }

    .buttonSmall {
        background: var(--eventColor1);
        display: inline-block;
        width: 22px;
        height: 22px;
        padding: 2px;
        vertical-align: text-top;
        cursor: pointer;
        margin-top: -4px;

        &:hover {
            background: var(--eventColor1Light);
        }
    }

    .ac_results {
        z-index: 150;
        width: 300px !important;
        height: 18px;
        padding: 0;
        font-family: var(--eventFont);
        font-size: 0.875rem;

        &:focus {
            -webkit-box-shadow: none;
                    box-shadow: none;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            border: solid 1px #ccc;

            li {
                text-align: left;
                margin: 0px;
                padding: var(--size-2) var(--size-3);
                cursor: pointer;
                background-color: White;

                strong {
                    font-weight: normal;
                    font-family: var(--eventFont-Bold);
                }

                &:nth-child(even) {
                    background: var(--bgTableEven);
                }

                .noc-element {
                    position: relative;
                    top: 4px;
                    left: 4px;
                }
            }

                li.ac_over {
                    background-color: var(--eventColor2);
                    color: var(--text-over-eventColor2);
                }
        }
    }

    .Medals {
        .tabswitcher.medals .tabitem:first-child {
            margin-left: 0;
        }
    }

    .MedalsInfo.tableTitle {
        float: none;
    }

    td.noc-column.teamMember {
        width: 130px;
        text-align: left;

        a {
            width: 56px;
            margin-right: 5px;
            display: inline-block;

            img {
                float: none;
                display: inline-block;
                top: 1px;
            }
        }
    }

    .participants,
    .GroupSummary .contentitem,
    .EventSummary .contentitem,
    .Standing .contentitem,
    .StartList .contentitem,
    .personalInformation,
    .ParticipantResults,
    .DetailedScheduleByDay,
    .recordsTable,
    .records,
    .ResultList .contentitem {
        z-index: 20;
    }

    .ParticipantResults {
        .groupPanel {
            .group {
                -webkit-box-shadow: unset;
                box-shadow: unset;
            }

            .header {
                background-color: initial;
                color: initial;

                img {
                    width: 30px;
                    height: 30px;
                }
            }

            .content {
                border: none;

                .schedule_date,
                .schedule_time {
                    width: 75px;
                }

                td.schedule_results {
                    background-color: initial;
                    width: 100px;
                }
            }
        }

        th {
            &.schedule_event {
                text-align: left;
            }
        }

        tr {
            font-weight: bold;

            &.detail {
                font-weight: inherit;
            }
        }
    }

    .Competitionheader {
        z-index: 101;

        @media (max-width: 800px) {
            .sporticon {
                height: 50px;
                width: auto;
            }
        }

        .image {
            /*padding-right: 10px;*/
            height: 200px;
            position: relative;
            top: -70px;
            pointer-events: none;

            #rotator .index {
                right: 129px;
                position: absolute;
                top: 7px;
            }

            @media (max-width: 800px) {
                top: -10px;
                margin-bottom: 15px;
                height: 240px;
            }

            @media (max-width: 400px) {
                padding: 0;
            }
        }
    }

    .nextComp {
        text-align: right;
        position: relative;
        left: -12px;
        top: 12px;
        z-index: 103;
        height: 0px;
    }

    #overlay-image {
        z-index: 1015;
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #00000087;

        img {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-self: center;
            margin-top: 80px;
            border: 5px solid white;
            height: 60vh;
            margin-left: auto;
            margin-right: auto;

            @media all and (max-width: 1200px) {
                height: auto;
                width: 80vw;
            }
        }

        .title {
            background: url("../base/images/colors/white_pixel_60Percent.png") repeat scroll 0 0 transparent;
            color: #ffffff;
            font-size: 12px;
            padding: 5px;
            width: 100%;
            text-align: left;
            overflow: hidden;
            position: relative;
            bottom: 30px;
            width: 60vw;
            height: 20px;
            padding: 5px;
            margin: 0 auto;
        }

        .close {
            position: absolute;
            top: 30px;
            right: 30px;

            &:after {
                font-family: ST-Info-Icon-Font;
                color: #00000096;
                background-color: white;
                content: "\f00d";
                font-size: 30px;
                padding: 5px 8px;
                cursor: pointer;
                border-radius: 30px;
            }
        }
    }
    /* PDF - List*/
    .PdfList {
        .filters {
            margin-top: 15px;
        }

            .filters td {
                text-align: center;
            }

        .list .title {
            display: inline-block;
        }

        .filterDDl {
            width: 200px;
        }

        .pdfTables th,
        .pdfTables td {
            text-align: left;

            .icon.icon--pdf {
                display: inline-block;
            }
        }

        .pdfTables {
            .filename {
                width: 350px;
            }

            .version {
                width: 55px;
                text-align: right;
            }

            .description {
                width: 45%;
            }
        }

        .downlaodZip.all {
            float: right;
            top: 0;
        }

        .downlaodZip {
            float: right;
            margin-right: 2px;
            position: relative;
            top: 11px;
        }

        table.pdfCompetition tr {
            &.False {
                background-color: #00198720;
            }

            &.Event {
                .competition {
                    font-family: var(--eventFont-Bold);
                    font-size: 1.5rem;
                }
            }

            &.Phase {
                .competition {
                    font-family: var(--eventFont-Bold);
                    font-size: 1rem;
                    text-transform: uppercase;
                }
            }
        }
    }

    .downlaodZip {
        a:before {
            font-family: ST-Info-Icon-Font;
            font-size: 14px;
            text-indent: 0;
            content: "\f019";
            display: inline-block;
        }
    }
    /* Venue / Location */
    .Venue {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 25px;
        display: inline-block;
        width: 98%;
    }

        .Venue .header {
            padding-bottom: 20px;
        }

            .Venue .header .select {
                width: 33%;
                float: left;
            }

                .Venue .header .select select {
                    width: 130px;
                }

        .Venue .headline {
            padding-bottom: 20px;
        }

        .Venue .images {
            float: right;
            margin-left: 15px;
        }

            .Venue .images img {
                width: 400px;
                float: none;
                margin-bottom: 15px;
            }

        .Venue .tableTitle {
            padding-left: 0;
            padding-bottom: 10px;
        }
    /* Historical Medals */
    .histMedals {
        .noc-element img {
            top: 2px;
        }

        .eventSelection {
            float: right;
            margin-right: 0;

            .title {
                float: left;
                margin: 10px 5px 10px 0px;
            }

            .select {
                float: right;
                margin: 5px 1px 10px 5px;
            }

            select {
                margin: 0;
                width: auto;
            }
        }
    }
    /* Related Competitions in TeamRanking */
    .relatedCompetitions {
        margin-left: 10px;
        margin-top: 3px;
    }

    .Ceremony {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        .noPresenters {
            margin-bottom: 30px;
            display: inline-block;
            font-size: 14px;
        }

        .medalPresenters {
            display: block;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            max-width: 50%;

            &:nth-child(2) {
                text-align: right;

                .ceremonyDates {
                    .time {
                        padding-right: 0;
                    }

                    .location {
                        padding-left: calc(6%);
                    }
                }
            }

            .ceremonyDates {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                top: 10px;
                position: relative;

                > div {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                }

                .time {
                    text-align: right;
                    padding-right: calc(6%);

                    .date {
                        white-space: nowrap;
                    }
                }

                .location {
                    text-align: left;
                }
            }

            .presenterGroup {
                display: -webkit-inline-box;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                padding: 40px 10px 10px 10px;
                background-color: var(--bgElement);
                margin: 15px 0;
                font-weight: bold;
                position: relative;
                width: 90%;

                &:empty {
                    display: none;
                }

                .presenterGroupName {
                    position: absolute;
                    top: 15px;
                    left: 15px;
                }

                .medal-icon {
                    right: 0;
                    top: 0;
                    position: absolute;
                    width: 38px;
                    height: 49px;
                    background-repeat: no-repeat;

                    &.gold {
                        background-image: url(images/medals/gold_part.png);
                    }

                    &.silver {
                        background-image: url(images/medals/silver_part.png);
                    }

                    &.bronze {
                        background-image: url(images/medals/bronze_part.png);
                    }
                }

                .presenterGroupItem {
                    display: inline-block;
                    padding: 5px;
                    margin: 0 5px 5px 5px;
                    background: var(--bgElementBox);
                    font-weight: normal;
                    text-align: left;
                    width: 100%;

                    .type {
                        margin-bottom: 10px;
                    }

                    .presenter {
                        > div {
                            margin-bottom: 5px;
                        }
                    }
                }

                .noc-element {
                    top: 1px;
                    position: relative;
                }
            }
        }
    }

    @media all and (max-width: 700px) {
        .Ceremony {
            display: block;

            .medalPresenters {
                max-width: unset;

                .presenterGroup {
                    width: 97%;
                }

                &:nth-child(2) {
                    text-align: left;
                    margin-top: 30px;

                    .ceremonyDates {
                        .location {
                            padding-left: 0;
                        }
                    }
                }

                .ceremonyDates {
                    .time {
                        padding-right: 0;
                    }
                }
            }
        }
    }

    .teamOfficialsContainer {
        margin-bottom: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: var(--size-2);

        .table-wrapper {
            margin-top: var(--size-1);
        }

        h3 {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin: 0;

            .noc-element {
                margin-right: 3px;
            }
        }

        > div {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(50% - var(--size-2));
                    flex: 0 0 calc(50% - var(--size-2));
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            display: inline-block;
            position: relative;
            top: 0;
            vertical-align: top;

            @media all and (max-width: 800px) {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 calc(100% - var(--size-2));
                        flex: 0 0 calc(100% - var(--size-2));
            }

            table {
                width: 100%;
                min-width: initial;

                .name {
                    text-align: left;
                }
            }
        }

        .function {
            width: 20%;
            text-align: left;
        }

        .All_legend {
            width: 15%;
        }
    }

.datepicker {
    .c-current-day
{
    background-color: initial;
}
}


.c-current-day {
    background-color: color-mix( in srgb, var(--eventColor1Light) 30%, transparent );
}
    /* Highlighting Spalte aktuelle Stunde Schedule by Day */
    .DetailedScheduleByDay .c-current-day {
        background-color: color-mix( in srgb, var(--eventColor1Light) 30%, transparent );
    }

    .DetailedScheduleByDay .c-a-l.c-current-day {
        background-color: color-mix( in srgb, var(--eventColor1Light) 30%, transparent );
    }

    .headerTitle {
        display: none;
        background-color: #f7f7f7;
        /*height: 37px;*/
        text-align: center;

        h1 {
            font-family: "Ububntu", Arial, Helvetica, sans-serif;
            color: #cbcbcb;
            font-size: 26px;
            font-weight: normal;
            line-height: 26px;
            padding: 10px 0;
        }
    }

    .resultTableBX {
        th {
            background: var(--bgTableHead);
            color: var(--greyText);
            font-weight: normal;
            text-transform: uppercase;
            font-size: 11px;

            a {
                color: var(--greyText);
            }
        }

        td {
            color: var(--greyText);

            &.round {
                text-transform: uppercase;
                font-size: 11px;
            }
        }
    }
    /* Invitational Medals - Selector*/
    .medalKind {
        height: 38px;
        margin: 10px 0 5px auto;
    }

    .selectedCell {
        background-color: #cbcbcb;
        height: 46px;
    }
    /* Related Information */
    /* allgemein */
    .RelatedInfoSelectorSchedule a {
        position: relative;
    }

    .relatedinfo-selector.schedule a:hover .tip {
        background: #f1f1f1 none repeat scroll 0 0;
        border: 1px solid #cccccc;
        color: #424242;
        display: block;
        left: 0;
        padding: 5px 5px;
        position: absolute;
        top: 25px;
        z-index: 10;
        font-size: 12px;
        line-height: 12px;
        font-weight: normal;
        width: 50px;
    }

    .numberAthletes {
        float: right;
        font-size: 12px;
        padding-right: 14px;
        position: relative;
        top: 5px;
    }

    .related {
        .text {
            margin: 10px 0 0 10px;
            float: left;
        }
    }

        .related select {
            margin: 5px 10px 8px;
        }

    .LeftFloat {
        float: left;
    }

    .top.related a {
        text-shadow: none;
    }

    .top.related .headline {
        display: none;
        margin: 0px 7px 7px 10px;
    }

    .bottom.top.related .headline {
        margin: 0px 7px 7px 10px;
    }

    #breadCrumb {
        a {
            color: var(--eventColor1);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        .separatorBC {
            display: inline-block;
            padding: 2px 5px;
            line-height: 14px;
            margin-top: -3px;
            vertical-align: text-top;
            color: var(--greyTextLight);

            &:after {
                content: "/";
            }
        }
    }

    .error {
        padding: 15px 0;
    }

    .schedule_location div {
        width: 120px;
    }

    span.EventSummary {
        overflow: hidden;
    }

    td.medal {
        img {
            height: 22px;
            width: auto;
        }
    }

    @media all and (min-width: 1000px) {
        html {
            overflow-x: hidden;
        }
    }

    .checkFlags {
        .country {
            border: 1px solid black;
            margin-bottom: 10px;

            img {
                border: 0.5px solid grey;
                height: 70px;
            }
        }

        .names {
            display: inline-block;

            label {
                width: 100px;
                display: inline-block;
            }

            div {
                width: 300px;

                &.False {
                    background-color: rgba(129, 255, 205, 0.27);
                }

                &.True {
                    background-color: rgba(254, 163, 163, 0.37);
                }
            }
        }

        .flags {
            display: inline-block;

            div {
                display: inline-block;
            }

            .large {
                width: 350px;
            }

            .medium {
                width: 100px;
            }

            .small {
                width: 50px;
            }
        }
    }

    .qualiRule {
        margin: 10px 0;

        .header {
            background-color: var(--greyText);
            color: var(--white);
        }
    }

    .noSelect {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    td.bibColored {
        text-align: center;
        font-size: smaller;
        position: relative;
        width: 55px;

        span {
            white-space: nowrap;
        }
    }

    .bibColoredJersey {
        .number {
            position: absolute;
            top: 4px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            font-weight: bold;
            margin: 0 auto;
            padding: 0;
            line-height: 12px;
            width: 24px;
            left: -1px;
            right: 0;

            span {
                width: auto;
                padding: 0 1px;
                margin: 0;
                font-size: 0.8em;
            }

            &.Blue,
            &.BLUE {
                span {
                    background-color: var(--blue);
                }
            }

            &.Black,
            &.BLACK {
                span {
                    background-color: var(--black);
                }
            }

            &.Brown,
            &.BROWN {
                span {
                    background-color: var(--brown);
                }
            }

            &.Burgundy,
            &.BURGUNDY {
                span {
                    background-color: var(--burgundy);
                }
            }

            &.Cyan,
            &.CYAN {
                span {
                    background-color: var(--cyan);
                }
            }

            &.DarkBlue,
            &.Dark.Blue,
            &.DARK.BLUE {
                span {
                    background-color: var(--darkBlue);
                }
            }

            &.DarkNavy,
            &.Dark.Navy,
            &.DARK.NAVY {
                span {
                    background-color: var(--darkNavy);
                }
            }

            &.Gold,
            &.GOLD {
                span {
                    background-color: var(--gold);
                }
            }

            &.Green,
            &.GREEN {
                span {
                    background-color: var(--green);
                }
            }

            &.Grey,
            &.GREY {
                span {
                    background-color: var(--grey);
                }
            }

            &.lightblue,
            &.Light.Blue,
            &.LIGHT.BLUE {
                span {
                    background-color: var(--lightBlue);
                }
            }

            &.Magenta,
            &.MAGENTA {
                span {
                    background-color: var(--magenta);
                }
            }

            &.Navy,
            &.NAVY {
                span {
                    background-color: var(--navy);
                }
            }

            &.Orange,
            &.ORANGE {
                span {
                    background-color: var(--orange);
                }
            }

            &.Pink,
            &.PINK {
                span {
                    background-color: var(--pink);
                }
            }

            &.Purple,
            &.PURPLE {
                span {
                    background-color: var(--purple);
                }
            }

            &.Red,
            &.RED {
                span {
                    background-color: var(--red);
                }
            }

            &.Teal,
            &.TEAL {
                span {
                    background-color: var(--teal);
                }
            }

            &.White,
            &.WHITE {
                span {
                    background-color: var(--white);
                }
            }

            &.Yellow,
            &.YELLOW {
                span {
                    background-color: var(--yellow);
                }
            }

            &:empty {
                display: none;
            }
        }

        .jersey {
            background-repeat: no-repeat;
            background-position: center center;
            width: 24px;
            position: relative;
            margin: 0 auto;
            height: 18px;
            text-align: center;

            &.Black,
            &.BLACK {
                polygon {
                    fill: var(--black);
                }

                .number {
                    color: #fff;
                }
            }

            &.Blue,
            &.BLUE {
                polygon {
                    fill: var(--blue);
                }

                .number {
                    color: #fff;
                }
            }

            &.Brown,
            &.BROWN {
                polygon {
                    fill: var(--brown);
                }

                .number {
                    color: #fff;
                }
            }

            &.Burgundy,
            &.BURGUNDY {
                polygon {
                    fill: var(--burgundy);
                }

                .number {
                    color: #fff;
                }
            }

            &.Cyan,
            &.CYAN {
                polygon {
                    fill: var(--cyan);
                }

                .number {
                    color: #fff;
                }
            }

            &.Dark.Blue,
            &.DARK.BLUE {
                polygon {
                    fill: var(--darkBlue);
                }

                .number {
                    color: #fff;
                }
            }

            &.DarkNavy,
            &.Dark.Navy,
            &.DARK.NAVY {
                polygon {
                    fill: var(--darkNavy);
                }

                .number {
                    color: #fff;
                }
            }

            &.Gold,
            &.GOLD {
                polygon {
                    fill: var(--gold);
                }

                .number {
                    color: #fff;
                }
            }

            &.Green,
            &.GREEN {
                polygon {
                    fill: var(--green);
                }
            }

            &.Grey,
            &.GREY {
                polygon {
                    fill: var(--grey);
                }

                .number {
                    color: #fff;
                }
            }

            &.lightblue,
            &.Light.Blue,
            &.LIGHT.BLUE {
                polygon {
                    fill: var(--lightBlue);
                }

                .number {
                    color: #fff;
                }
            }

            &.Magenta,
            &.MAGENTA {
                polygon {
                    fill: var(--magenta);
                }

                .number {
                    color: #fff;
                }
            }

            &.Navy,
            &.NAVY {
                polygon {
                    fill: var(--navy);
                }

                .number {
                    color: #fff;
                }
            }

            &.Orange,
            &.ORANGE {
                polygon {
                    fill: var(--orange);
                }

                .number {
                    color: #fff;
                }
            }

            &.Pink,
            &.PINK {
                polygon {
                    fill: var(--pink);
                }

                .number {
                    color: #fff;
                }
            }

            &.Purple,
            &.PURPLE {
                polygon {
                    fill: var(--purple);
                }

                .number {
                    color: #fff;
                }
            }

            &.Red,
            &.RED {
                polygon {
                    fill: var(--red);
                }

                .number {
                    color: #fff;
                }
            }

            &.Teal,
            &.TEAL {
                polygon {
                    fill: var(--teal);
                }

                .number {
                    color: #fff;
                }
            }

            &.White,
            &.WHITE {
                polygon {
                    fill: var(--white);
                }
            }

            &.Yellow,
            &.YELLOW {
                polygon {
                    fill: var(--yellow);
                }
            }
        }
    }

    .courseData {
        margin: 15px 0;
        padding: 10px;
        display: block;
        background-color: var(--bgElement);

        .tableTitle {
            display: block;
            float: none;
            padding: 0;
        }

        .values div {
            display: inline-block;
            padding: 5px;
            margin: 5px 5px 5px 0;
            background: rgba(255, 255, 255, 0.6);
        }

        .key {
            font-weight: bold;
            margin-right: 5px;
        }
    }

    .Statistic {
        th {
            .athleteName {
                width: 20%;
            }
        }
    }
}

/* Olympic Sans */
@font-face {
  font-family: "OlympicSans-Regular";
  src: url("fonts/OlympicSans-Regular.woff") format("woff");
  font-weight: normal;
}

@font-face {
  font-family: "OlympicSans-Bold";
  src: url("fonts/OlympicSans-Bold.woff") format("woff");
  font-weight: normal;
}

/* Olympic Headline */
@font-face {
  font-family: "OlympicHeadline-Regular";
  src: url("fonts/OlympicHeadline-Regular.woff") format("woff");
  font-weight: normal;
}

@font-face {
  font-family: "OlympicHeadline-Condensed";
  src: url("fonts/OlympicHeadline-Condensed.woff") format("woff");
  font-weight: normal;
}

.ARC {
  &.ResultList table.default-table {
    tbody td {
      &[colspan="18"],
      &[colspan="19"],
      &[colspan="20"] {
        background-color: transparent;
      }
    }

    .detailContent {
      margin-left: 25px; /*is for the expandable column */
    }

    .shooter1,
    .shooter2,
    .shooter3 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: var(--size-1);
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;

      &:before {
        content: "";
        display: inline-block;
        width: 0.6rem;
        height: 0.6rem;
        min-width: 0.6rem;
        min-height: 0.6rem;
        background: var(--textColor);
      }
    }

    .shooter2:before {
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

    .shooter3:before {
      border-radius: 50%;
    }
  }

&.ResultList {
    .end-points, .end-number
    {
        width: 50px;
    }

    .h2h-comparison {
      overflow-x: initial;

      .h2h-content {
        min-width: initial;
      }

      .item {
        padding-left: var(--size-5);
        padding-right: var(--size-5);
        gap: var(--size-5);

        .description {
          display: none;
        }

        .competitor {
          font-family: var(--eventFont);
          font-size: var(--size-3);

          &:first-child {
            > div {
              text-align: left;
            }
          }

          &:last-child {
            > div {
              text-align: right;
            }

            @media (max-width: 640px) {
              padding-right: 0;
            }

            .athlete1,
            .athlete2,
            .athlete3 {
              -webkit-box-orient: horizontal;
              -webkit-box-direction: reverse;
                  -ms-flex-direction: row-reverse;
                      flex-direction: row-reverse;
            }
          }

          .athlete1,
          .athlete2,
          .athlete3 {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            gap: var(--size-2);

            &:before {
              content: "";
              display: inline-block;
              width: 0.6rem;
              height: 0.6rem;
              min-width: 0.6rem;
              min-height: 0.6rem;
              background: var(--textColor);
            }
          }

          .athlete2:before {
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          }

          .athlete3:before {
            border-radius: 50%;
          }
        }
      }
    }

    .detail {
      display: none;
    }

    .detailContent.QAUL {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: var(--size-2);

      > div {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
      }

      @media (max-width: 768px) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }

      .tableTitle {
        text-align: left;
        display: block;
        margin-top: 0;
      }

      .default-table {
        min-width: initial;
      }
    }
  }

    &.StartList {
        @media all and (max-width: 700px) {
            .startTime {
                width: 80px;
            }
        }
    }
}

.ATH {
  /* Card Types */

  .protested {
    margin-left: 3px;
    position: relative;
    display: inline-block;
    width: 0.8rem;
    height: 0.9rem;
    border: 1px solid var(--bgTableOdd);

    &::before {
      content: "";
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: 0.8rem;
      height: 0.9rem;
      background: linear-gradient(225deg, white 50%, red 50%);
      position: absolute;
      left: 0;
      top: 0;
    }

    .protested {
      display: none;
    }
  }

  .cards.yc {
    display: inline-block;
    width: 0.75rem;
    height: var(--size-4);
    border-radius: var(--radius-2);
    background-color: var(--yellow);
  }

  .cards.yrc {
    display: inline-block;
    width: 0.75rem;
    height: var(--size-4);
    margin-right: var(--size-2);
    position: relative;

    &::before {
      content: "";
      display: inline-block;
      width: 0.75rem;
      height: var(--size-4);
      border-radius: var(--radius-2);
      background-color: var(--yellow);
      position: absolute;
      left: 0;
      top: 0;
    }

    &::after {
      content: "";
      color: var(--white);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: 0.75rem;
      height: var(--size-4);
      border-radius: var(--radius-2);
      background-color: var(--red);
      position: absolute;
      left: var(--size-1);
      top: var(--size-1);
    }
  }

  .cards.rc {
    display: inline-block;
    width: 0.75rem;
    height: var(--size-4);
    border-radius: var(--radius-2);
    background-color: var(--red);
  }

  &.ResultList {
    .move.down,
    .move.up,
    .move.equal {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      min-width: 2rem;

      &:before {
        font-family: "FontAwesome-Solid";
        font-size: 0.875rem;
        display: inline-block;
        margin-right: auto;
      }
    }

    .move.equal {
      color: transparent;

      &:before {
        content: "f068";
        color: var(--textColor);
      }
    }

    .move.down {
      &:before {
        content: "\f063";
        color: var(--red-8);
      }
    }

    .move.up {
      &:before {
        content: "\f062";
        color: var(--green-8);
      }
    }

    .move.up.down {
      display: none;
    }

    .vertical-jump,
    .horizonal-jump,
    .throw-events {
      .detailSwitch,
      .expandableColumn {
        display: none;
      }

      .intermediateWrapper {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;

        .header {
          font-family: var(--eventFont-Bold);
        }
        .c-not-counted {
          color: initial;
          text-decoration: none;
          font-family: var(--eventFont-Bold);
        }
      }
    }

    @media all and (max-width: 1000px) {
      .throw-events,
      .horizonal-jump,
      .vertical-jump {
        .bibColumn {
          display: none;
        }
      }
    }

    @media all and (min-width: 800px) {
      tr.detail {
        display: none !important;
      }
    }

    @media all and (max-width: 800px) {
      .intermediate,
      .intermediateTabContainer {
        display: none !important;
      }

      .start-order {
        display: none;
      }
      .vertical-jump,
      .horizonal-jump,
      .throw-events {
        .detailSwitch {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .expandableColumn {
          display: initial;
        }

        th,
        td {
          &.expandableColumn {
            display: table-cell;
          }
        }
      }
    }

    @media all and (max-width: 600px) {
      .bibColumn {
        display: none;
      }
    }
  }

  &.StartList {
    @media all and (max-width: 700px) {
      .bibColumn {
        display: none;
      }
    }
  }

  &.PhaseSummary {
    @media all and (max-width: 900px) {
      .bibColumn {
        display: none;
      }
    }
    @media all and (max-width: 800px) {
      .position-column,
      .heat-column {
        display: none;
      }
    }
  }

  .currentInfoPanel .singleCompetitor .right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;

    > div:first-child {
      font-size: 0.775rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-family: var(--eventFont-Bold);
    }
  }
}

.BDM {
  /*Score Card*/
  .team-name {
    .athleteLink_SC {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
          -ms-flex-direction: column-reverse;
              flex-direction: column-reverse;

      > span:not(.lastName) {
        font-size: 0.8rem;
      }
    }
  }

  .scoredev {
    .serving.serve {
      display: inline-block;
      background-image: url(../base/images/sports/bdm.png);
      background-repeat: no-repeat;
      width: var(--size-3);
      height: var(--size-3);
      background-size: var(--size-3);
    }
  }

  /*Head to Head Comparison*/
  .h2h-comparison {
    .h2h-content {
      .competitor {
        .cards-wrapper {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;

          .cards + .scores {
            margin-left: var(--size-1);
          }
        }

        /* Card Types */

        .cards.YC {
          display: inline-block;
          width: var(--size-3);
          height: var(--size-5);
          border-radius: var(--radius-2);
          background-color: var(--yellow);
        }

        .cards.BC {
          display: inline-block;
          width: var(--size-3);
          height: var(--size-5);
          border-radius: var(--radius-2);
          background-color: var(--black);
        }

        .cards.RC {
          display: inline-block;
          width: var(--size-3);
          height: var(--size-5);
          border-radius: var(--radius-2);
          background-color: var(--red);
        }
      }
    }
  }

  &.ResultList {
    .default-table {
      th.match-indicators {
        width: var(--size-11);
      }
    }

    .match-indicators {
      > div {
        margin-right: var(--size-1);
        display: none;
        position: relative;
      }

      .serving {
        display: inline-block;
        background-image: url(../base/images/sports/bdm.png);
        background-repeat: no-repeat;
        width: var(--size-3);
        height: var(--size-3);
        background-size: var(--size-3);
        position: relative;
        top: var(--size-1);
        margin-right: var(--size-2);
      }

      .timeout.received {
        display: inline-block;
        position: relative;

        &:after {
          content: "Timeout";
          text-transform: uppercase;
          font-family: var(--eventFontAccent);
          display: block;
          padding: var(--size-1);
          background-color: var(--bgTableOdd);
          font-size: 0.875rem;
          letter-spacing: 0.025rem;
        }
      }

      /* Card Types */

      .cards.Y,
      .cards.Y1,
      .cards.Y2,
      .cards.Y3,
      .cards.Y4,
      .cards.Y5,
      .cards.Y6,
      .cards.Y7,
      .cards.Y8,
      .cards.Y9 {
        display: inline-block;
        width: var(--size-3);
        height: var(--size-5);
        border-radius: var(--radius-2);

        &::before {
          content: "";
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          width: var(--size-3);
          height: var(--size-5);
          border-radius: var(--radius-2);
          background-color: var(--yellow);
          position: absolute;
          left: 0;
          top: 0;
        }
      }

      .cards.R,
      .cards.R1,
      .cards.R2,
      .cards.R3,
      .cards.R4,
      .cards.R5,
      .cards.R6,
      .cards.R7,
      .cards.R8,
      .cards.R9 {
        display: inline-block;
        width: var(--size-3);
        height: var(--size-5);
        border-radius: var(--radius-2);

        &::before {
          content: "";
          color: var(--white);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          width: var(--size-3);
          height: var(--size-5);
          border-radius: var(--radius-2);
          background-color: var(--red);
          position: absolute;
          left: 0;
          top: 0;
        }
      }

      .cards.YR,
      .cards.YR1,
      .cards.YR1,
      .cards.YR2,
      .cards.YR3,
      .cards.YR4,
      .cards.YR5,
      .cards.YR6,
      .cards.YR7,
      .cards.YR8,
      .cards.YR9 {
        display: inline-block;
        width: var(--size-3);
        height: var(--size-5);
        margin-right: var(--size-2);

        &::before {
          content: "";
          display: inline-block;
          width: var(--size-3);
          height: var(--size-5);
          border-radius: var(--radius-2);
          background-color: var(--yellow);
          position: absolute;
          left: 0;
          top: 0;
        }

        &::after {
          content: "";
          color: var(--white);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          width: var(--size-3);
          height: var(--size-5);
          border-radius: var(--radius-2);
          background-color: var(--red);
          position: absolute;
          left: var(--size-1);
          top: var(--size-1);
        }
      }

      .cards.YR1:after,
      .cards.Y1:before,
      .cards.R1:before {
        content: "1";
      }
      .cards.YR2:after,
      .cards.Y2:before,
      .cards.R2:before {
        content: "2";
      }
      .cards.YR3:after,
      .cards.Y3:before,
      .cards.R3:before {
        content: "3";
      }
      .cards.YR4:after,
      .cards.Y4:before,
      .cards.R4:before {
        content: "4";
      }
      .cards.YR5:after,
      .cards.Y5:before,
      .cards.R5:before {
        content: "5";
      }
      .cards.YR6:after,
      .cards.Y6:before,
      .cards.R6:before {
        content: "6";
      }
      .cards.YR7:after,
      .cards.Y7:before,
      .cards.R7:before {
        content: "7";
      }
      .cards.YR8:after,
      .cards.Y8:before,
      .cards.R8:before {
        content: "8";
      }
      .cards.YR9:after,
      .cards.Y9:before,
      .cards.R9:before {
        content: "9";
      }
    }
  }

  @media all and (max-width: 1200px) {
    th.CrossTable_Result {
      min-width: var(--size-8);
      width: var(--size-8);
    }
  }
  @media all and (max-width: 800px) {
    .CrossTable_Result {
      display: none;
    }
  }

  @media all and (max-width: 600px) {
    .played,
    .wins,
    .losses {
      min-width: 30px;
      width: 30px;
    }
  }
}

.BK3 {
  &.ResultList {
    table tr td {
      border-top: 1px solid var(--bgMain);
    }
  }

  .gameProgress .timelines {
    .action:before {
      background-color: transparent;
      border: none;
      border-radius: 0;
    }

    .action:before {
      background-image: url(../base/images/sports/bk3.png);
    }
  }
  @media all and (max-width: 800px) {
    .CrossTable_Result {
      display: none;
    }
  }
}

.BKG {
  .start-order {
    min-width: 100px;
  }
  .detailContent {
    tr {
      td {
        border-bottom: 1px solid var(--borderTable);
        font-size: 0.7rem;
      }
    }
  }
  div.color {
    width: 100%;
    display: block;
    margin-right: var(--size-1);

    &:after {
      width: 15px;
      height: 15px;
      border-radius: 15px;
      content: " ";
      display: inline-block;
    }

    &.RED:after {
      background-color: red;
    }
    &.BLUE:after {
      background-color: blue;
    }
  }

  th div.color {
    margin-right: 0;
  }

  th div.color:after {
    border: 1px solid var(--borderTable);
  }

  table {
    th {
      &.CrossTable_Result {
        @media all and (max-width: 800px) {
          min-width: var(--size-8);
          width: var(--size-8);
        }
        @media all and (max-width: 750px) {
          min-width: var(--size-7);
          width: var(--size-7);
        }
        @media all and (max-width: 600px) {
          display: none;
        }
      }
    }

    td.CrossTable_Result {
      @media all and (max-width: 600px) {
        display: none;
      }
    }

    .judge-number {
      margin-right: var(--size-2);
      position: relative;
      bottom: 5px;
    }
  }
}

.BOX.ResultList {
  position: relative;

  table {
    th {
      padding-top: 0;
      padding-bottom: 0;

      &.total_column,
      &.topHeader,
      &.round {
        border-left: 1px solid var(--borderTable);
      }

      &.round,
      &.total_column {
        width: 15%;
      }

      &.total_column {
        padding-left: 0;
        padding-right: 0;
        vertical-align: bottom;

        .header {
          margin: var(--size-1);
        }
      }

      &.round {
        padding: 0;

        + .round {
          border-left: 1px solid var(--borderTable);
        }
      }

      .roundnumber {
        margin: var(--size-1);

        &.in-progress {
          background-color: var(--liveColor);

          border-radius: var(--size-1);
        }
      }

      .colors {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 30px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        > div {
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          height: 100%;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          border-top: 1px solid var(--borderTable);

          + div {
            border-left: 1px solid var(--borderTable);
          }
        }

        .RED:after {
          content: " ";
          width: 15px;
          height: 15px;
          background-color: red;
          border: 1px solid var(--borderTable);
          border-radius: 15px;
        }

        .BLUE:after {
          content: " ";
          width: 15px;
          height: 15px;
          background-color: blue;
          border: 1px solid var(--borderTable);
          border-radius: 15px;
        }
      }
    }

    tr {
      height: 45px;
    }

    td {
      &.total_column,
      &.round {
        border-left: 1px solid var(--borderTable);
        height: 45px;
      }

      &.round,
      &.total_column {
        padding: 0;

        .score {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          height: 100%;

          > div {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;

            + div {
              border-left: 1px solid var(--borderTable);
            }
          }
        }
      }

      &.total_column {
        .Y > span {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          position: relative;

          &:before {
            content: "\f621";
            font-family: "FontAwesome-Solid";
            font-size: 0.4rem;
            display: inline-block;
            margin-right: auto;
            position: absolute;
            left: -0.6rem;
            @media all and (max-width: 600px) {
              left: -0.4rem;
            }
          }
        }
      }
    }

    td:first-child {
      text-align: left;
    }
  }
}

.BS5 {
  &.ResultList {
    .field-outs {
      margin-top: 0;

      .key-value-item {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background-color: transparent;
      }

      .field-icon {
        --size: 6px;
        --gap: 2px;
        --color: #dca22b;
        --border: #b1801f;

        position: relative;
        bottom: 2px;
        margin: 10px 14px;
        width: var(--size);
        height: var(--size);
        background-color: white;
        border: 1px solid var(--borderTable);
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);

        &:before {
          content: "";
          position: absolute;
          width: var(--size);
          height: var(--size);
          background-color: white;
          border: 1px solid var(--borderTable);
          left: -1px;
          top: calc((var(--size) + var(--gap)) * 1 + 1px);
        }

        &:after {
          content: "";
          position: absolute;
          width: var(--size);
          height: var(--size);
          background-color: white;
          border: 1px solid var(--borderTable);
          left: calc((var(--size) + var(--gap)) * 1 + 1px);
          top: -1px;
        }

        &[field="1"] {
          &:after {
            background-color: var(--color);
            border-color: var(--border);
          }
        }

        &[field="2"] {
          background-color: var(--color);
          border-color: var(--border);
        }

        &[field="3"] {
          &:before {
            background-color: var(--color);
            border-color: var(--border);
          }
        }

        &[field="12"] {
          background-color: var(--color);
          border-color: var(--border);

          &:after {
            background-color: var(--color);
            border-color: var(--border);
          }
        }

        &[field="13"] {
          &:before {
            background-color: var(--color);
            border-color: var(--border);
          }

          &:after {
            background-color: var(--color);
            border-color: var(--border);
          }
        }

        &[field="23"] {
            background-color: var(--color);
            border-color: var(--border);
            &:before
            {
                background-color: var(--color);
                border-color: var(--border);
            }
        }

        &[field="123"] {
          background-color: var(--color);
          border-color: var(--border);

          &:before {
            background-color: var(--color);
            border-color: var(--border);
          }

          &:after {
            background-color: var(--color);
            border-color: var(--border);
          }
        }
      }

      .outs-icon {
        --size: 8px;
        --gap: 15px;
        --color: #d84b2a;

        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
        width: 38px;
        height: calc(var(--size) + 2px);

        &:after {
          content: "";
          width: var(--size);
          height: var(--size);
          left: var(--gap);

          border: 1px solid var(--color);
          border-radius: 50%;
          background-color: transparent;
        }

        &:before {
          content: "";
          width: var(--size);
          height: var(--size);

          border: 1px solid var(--color);
          border-radius: 50%;
        }

        &[outs="1"]:before {
          background-color: var(--color);
        }

        &[outs="2"] {
          &:before {
            background-color: var(--color);
          }

          &:after {
            background-color: var(--color);
          }
        }
      }
    }
    .groupPanel {
      .content {
        > div:first-child {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          gap: var(--size-1);
          margin-bottom: var(--size-3);

          > .table-wrapper {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
          }
        }
      }

      .c-live {
        .header .text {
          position: relative;

          &::before {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            right: 12px;
            top: 6px;
            background-color: var(--liveColor);
          }

          &:after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            right: 5px;
            top: 10px;
            -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
            border: 3px solid var(--liveColor);
            border-radius: 50%;
            -webkit-animation: pulsate 2s ease-out infinite;
                    animation: pulsate 2s ease-out infinite;
            z-index: 1;
          }
        }
      }
    }
  }
  @media all and (max-width: 900px) {
    th.CrossTable_Result {
      min-width: var(--size-7);
      width: var(--size-7);
    }
  }
  @media all and (max-width: 800px) {
    .CrossTable_Result {
      display: none;
    }
  }
  @media all and (max-width: 600px) {
    .field-outs {
      display: none;
    }
  }
}

.CRD {
  &.PlayerStatistics {
    @media (max-width: 600px) {
      .intermediateTabContainer {
        display: none;
      }
    }

@media all and (min-width: 700px) {
      tr.detail {
        display: none !important;
      }
      .detailSwitch {
        display: none;
      }
      .expandableColumn {
        display: none;
      }
    }

    @media all and (max-width: 700px) {
      .intermediateColumn,
      .intermediateTabContainer {
        display: none !important;
      }
      .detailSwitch {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      .expandableColumn {
        display: initial;
      }

      th,
      td {
        &.expandableColumn {
          display: table-cell;
        }
      }
    }

  }
  .time-crd {
    text-align: right;

    .sort-wrapper {
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
    }
    .time-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
  }

  .bibColumn {
    min-width: 75px;
    @media (max-width: 800px) {
      min-width: inherit;
    }
  }
  table {
    .avg-crd {
      @media (max-width: 720px) {
        display: none;
      }
    }
    & td {
      &.intermediate {
        & .content {
          & .top,
          & .bottom {
            .rank {
              @media (max-width: 850px) {
                width: 27px;
              }
            }
          }
        }
      }
    }
  }
}

.EQU {
  &.ResultList {
    @media all and (min-width: 800px) {
      .expandableColumn,
      .detailSwitch {
        display: none;
      }
    }

    .detailContent {
      .key-value-list {
        .title {
          text-align: left;
          font-weight: bold;
          padding-left: 8px;
        }
        .empty-hint {
          padding-left: 8px;
        }
      }
    }
  }
}

.FBS {
  &.ResultList {
    /* Card Types */

    .cards {
      display: inline-block;
      width: 0.75rem;
      height: var(--size-4);
      position: relative;
      @media all and (max-width: 600px) {
        width: 0.5rem;
        height: var(--size-3);
      }
    }

    .cards.yc {
      border-radius: var(--radius-2);
      background-color: var(--yellow);
      top: 2px;

      &::before {
        content: attr(card-count);
      }
    }

    .cards.rc {
      border-radius: var(--radius-2);
      background-color: var(--red);
      top: 2px;

      &::before {
        content: attr(card-count);
      }
    }

    .cards.yrc {
      margin-right: var(--size-2);

      &::before {
        content: "";
        display: inline-block;
        width: 0.75rem;
        height: var(--size-4);
        border-radius: var(--radius-2);
        background-color: var(--yellow);
        position: absolute;
        left: 0;
        top: 0;
      }

      &::after {
        content: attr(card-count);
        color: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 0.75rem;
        height: var(--size-4);
        border-radius: var(--radius-2);
        background-color: var(--red);
        position: absolute;
        left: var(--size-1);
        top: var(--size-1);
      }
    }
  }

  .gameProgress .timelines {
    .action:before {
      background-color: transparent;
      border: none;
      border-radius: 0;
    }

    .action:before {
      background-image: url(../base/images/sports/fbs.png);
    }
  }
}

.FEN {
  &.Bracket {
    .Bracket_Competition {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .piste {
      display: inline-block;
      margin-left: auto;
      width: 10px;
      height: 10px;
      border-radius: var(--size-1);
      border: 1px solid #9f9f9f;

      &.FEB {
        background-color: blue;
      }

      &.FEG {
        background-color: green;
      }

      &.FER {
        background-color: red;
      }

      &.FEY {
        background-color: yellow;
      }
    }
  }

  &.ResultList {
    @media all and (min-width: 900px) {
      .expandableColumn,
      .detailSwitch {
        display: none;
      }
    }

    .detailContent {
      .key-value-list {
        .title {
          text-align: left;
          font-weight: bold;
          padding-left: 8px;
        }
        .empty-hint {
          padding-left: 8px;
        }
      }
    }
  }

  @media all and (max-width: 1250px) {
    th.CrossTable_Result {
      min-width: var(--size-8);
      width: var(--size-8);
    }
  }
  @media all and (max-width: 1150px) {
    th.CrossTable_Result {
      min-width: var(--size-7);
      width: var(--size-7);
    }
  }
  @media all and (max-width: 950px) {
    .CrossTable_Result {
      display: none;
    }
  }

  .pbp-simple {
    .action-value {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: var(--size-2);
    }

    .second .action-value {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
    }
  }

  /* Card Types */

  .cards.YC {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);
    background-color: var(--yellow);
  }

  .cards.RC {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);
    background-color: var(--red);
  }

  .cards.BC {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);
    background-color: var(--black);
  }

  .cards.P-y {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    position: relative;

    &::after {
      content: "p";
      font-size: 0.875rem;
      color: var(--black);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);
      background-color: var(--yellow);
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .cards.P-r {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    position: relative;

    &::after {
      content: "p";
      font-size: 0.875rem;
      color: var(--white);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);
      background-color: var(--red);
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .cards.P-b {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    position: relative;

    &::after {
      content: "p";
      font-size: 0.875rem;
      color: var(--white);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);
      background-color: var(--black);
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}

.GAR {
  img.apparatus {
    height: var(--size-6);
    margin-right: var(--size-2);
    position: relative;
    top: 2px;
  }

  table {
    th.intermediate,
    td.intermediate {
      text-align: center;
      .sort-wrapper {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
    }
  }

  .ui-tabs-selector {
    .ui-tabs {
      @media all and (max-width: 500px) {
        margin: 0;
      }
    }
    .ui-tab {
      @media all and (max-width: 700px) {
        font-size: 0.75rem;
      }
      @media all and (max-width: 600px) {
        padding: 0.5rem 0.5rem;
      }
      @media all and (max-width: 490px) {
        padding: 0.3rem;
      }
    }
  }

  &.StartList,
  &.ResultList {
    .detailSwitch {
      margin-top: 0;
      margin-bottom: var(--size-2);
    }
    .tableTitle {
      margin-top: 0;
    }
  }

  &.PhaseSummary,
  &.TeamStatistics .TEAM---- {
    @media all and (min-width: 1150px) {
      /* tr.detail {
        display: none !important;
      } */
      /* .detailSwitch {
        display: none;
      } */
      .detail-content-row {
        display: none !important;
      }
      /*.expandableColumn {
        display: none;
      }*/
    }

    @media all and (max-width: 1150px) {
      .topHeader,
      .intermediateColumn,
      .intermediateTabContainer {
        display: none !important;
      }
      /* .detailSwitch {
        display: flex;
      } */
      .expandableColumn {
        display: initial;
      }

      th,
      td {
        &.expandableColumn {
          display: table-cell;
        }
      }
    }
  }

  &.TeamRanking {
    @media all and (min-width: 1150px) {
      .detail-content-row {
        display: none !important;
      }
      .expandableColumn {
        display: none;
      }
    }

    @media all and (max-width: 1150px) {
      tr.detail:not(.detail-content-row),
      .topHeader,
      .intermediateColumn {
        display: none !important;
      }
      .expandableColumn {
        display: initial;
      }

      th,
      td {
        &.expandableColumn {
          display: table-cell;
        }
      }
    }

    .detailContent {
      .interm {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }

      .name {
        width: 100%;
      }

      .performance {
        text-align: right;
        width: 100%;
      }

      .apparatus-details {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        > div {
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
        }

        abbr {
          font-weight: bold;
        }
      }
    }
  }
}

.HBB {
    .goalKeeperTables
    {
        display: block;
    }
  /*@media all and (max-width: 1000px) {
    .goalKeeperTables {
      display: block;
    }
  }*/

  table {
    th {
      &.CrossTable_Result {
        @media all and (max-width: 1250px) {
          min-width: var(--size-8);
          width: var(--size-8);
        }
        @media all and (max-width: 1150px) {
          min-width: var(--size-7);
          width: var(--size-7);
        }
        @media all and (max-width: 1070px) {
          display: none;
        }
      }
    }
    td.CrossTable_Result {
      @media all and (max-width: 1070px) {
        display: none;
      }
    }
  }

  .gameProgress .timelines {
    .action:before {
      background-color: transparent;
      border: none;
      border-radius: 0;
    }

    .action:before {
      background-image: url(../base/images/sports/hbb.png);
    }
  }
}

.JUD {
  /* Card Types */
  .cards.RH {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);

    &::before {
      content: "H";
      color: var(--white);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);
      background-color: var(--red);
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .cards.RX {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);

    &::before {
      content: "X";
      color: var(--white);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);
      background-color: var(--red);
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  /* Usage in Brackets */
  &.Bracket {
    .cards {
      margin-right: 6px;
      font-size: 0.7rem;
    }

    .cards,
    .cards:before {
      width: 10px;
      height: 16px;
      border-radius: 2px;
    }
  }
}

.RCB {
  &.ResultList {
    .qualificationRule {
      font-family: var(--eventFont-Bold);
    }

    .prelim-mixed-phase {
      @media all and (min-width: 900px) {
        tr.detail-content-row {
          display: none !important;
        }

        .expandableColumn {
          display: none;
        }
      }

      @media all and (max-width: 900px) {
        .expandableColumn {
          display: initial;
        }

        th,
        td {
          &.expandableColumn {
            display: table-cell;
          }
        }
      }
    }

    .prelim-phase,
    .ko-phase {
      @media all and (min-width: 900px) {
        tr.detail {
          display: none !important;
        }
        .detailSwitch {
          display: none;
        }
        .expandableColumn {
          display: none;
        }
      }

      @media all and (max-width: 900px) {
        .detailSwitch {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
        .expandableColumn {
          display: initial;
        }

        th,
        td {
          &.expandableColumn {
            display: table-cell;
          }
        }
      }
    }
  }
}

.RU7 {
  &.Statistic {
    tfoot {
      td {
        padding: 0;

        &:first-child div {
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: flex-start;
          font-family: var(--eventFont-Bold);
        }

        div {
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          height: var(--size-5);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          padding: 0.75rem var(--size-2);

          + div {
            border-top: 1px solid var(--eventColor2);
          }
        }
      }
    }
  }

  .gameProgress {
    .timelines {
      .action:before {
        background-color: transparent;
        border: none;
        border-radius: 0;
      }

      .action.kick:before {
        background-image: url(../base/images/sports/ru7_kick.png);
      }

      .action.try:before {
        background-image: url(../base/images/sports/ru7_try.png);
      }
    }

    /* THIS TIMELINE RELATED RULES NEED TO BE REMOVED WHEN THERE IS A SOLUTION TO SHOW MULTIPLE ACTIONS AT THE SAME TIME*/
    .timelines {
      .competitor {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 var(--size-8);
                flex: 0 0 var(--size-8);

        &.first {
          .action {
            &:after {
              bottom: -14px;
            }

            &.kick:before {
              top: -22px;
            }
          }
        }

        &.second {
          .action {
            &:after {
              top: -14px;
            }

            &.kick:before {
              top: 22px;
            }
          }
        }
      }
    }
    /* THIS TIMELINE RELATED RULES NEED TO BE REMOVED WHEN THERE IS A SOLUTION TO SHOW MULTIPLE ACTIONS AT THE SAME TIME*/

    .competitors {
      .competitor {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 var(--size-8);
                flex: 0 0 var(--size-8);
      }
    }
  }
  .teamOfficialsContainer {
    .function {
      width: 25%;
    }
  }

  &.GroupSummary {
    table {
      & th {
        &.athleteName {
          min-width: 100px;
        }
      }
      .points {
        @media (max-width: 750px) {
          .c-h-7 {
            display: none !important;
          }
          .c-s-7 {
            display: initial;
          }
        }
      }
    }
  }

  table {
    th {
      &.CrossTable_Result {
        min-width: var(--size-8);
        width: var(--size-8);
        @media all and (max-width: 1150px) {
          display: none;
        }
      }
    }
    td.CrossTable_Result {
      @media all and (max-width: 1250px) {
        padding: 0.75rem var(--size-1);
      }
      @media all and (max-width: 1150px) {
        display: none;
      }
    }
  }
}

.SAL {
  &.ResultList
{
    .move.down, .move.up, .move.equal

{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-width: 2rem;
    &:before

{
    font-family: "FontAwesome-Solid";
    font-size: 0.875rem;
    display: inline-block;
    margin-right: auto;
}

}

.move.equal {
    color: transparent;
    &:before

{
    content: "f068";
    color: var(--textColor);
}

}

.move.down {
    &:before

{
    content: "\f063";
    color: var(--red-8);
}

}

.move.up {
    &:before

{
    content: "\f062";
    color: var(--green-8);
}

}

.move.up.down {
    display: none;
}
    .course-info {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      @media (min-width: 1100px) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;

        .info-elements,
        .info-marks {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 calc(50% - var(--size-2));
                  flex: 0 0 calc(50% - var(--size-2));
          padding-bottom: unset;
        }
      }
      @media (max-width: 1100px) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
      }
    }

    @media all and (min-width: 900px) {
      tr.detail {
        display: none !important;
      }
      .detailSwitch {
        display: none;
      }
      .expandableColumn {
        display: none;
      }
    }

    @media all and (max-width: 900px) {
      .intermediateTabContainer {
        display: none !important;
      }
      .detailSwitch {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      .expandableColumn {
        display: initial;
      }

      th,
      td {
        &.expandableColumn {
          display: table-cell;
        }
      }
    }
  }

  &.GroupSummary {
    @media all and (max-width: 700px) {
      .intermediateColumn,
      .intermediateTabContainer {
        display: none !important;
      }
    }
  }

  .current-leaders {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    > .tableTitle {
      width: 100%;
    }

    > .table-wrapper {
      width: 80%;
    }

    > .key-value-list {
      width: calc(20% - 1rem);
      margin-top: 0;
      margin-left: auto;

      .title {
        display: none;
      }

      .key-value-item {
        width: calc(100% - var(--size-3));
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        .value {
          font-size: 0.75rem;
        }
      }
    }
  }

  .info-elements {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--size-3);
    padding-bottom: var(--size-3);

    @media all and (max-width: 480px) {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: unset;
      padding-bottom: var(--size-1);

      .course-images,
      .key-value-list {
        margin-bottom: var(--size-1);
      }
    }

    > .key-value-list {
      margin-top: 0;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;

      .key-value-item {
        width: calc(100% - var(--size-3));
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        .value {
          font-size: 0.75rem;
        }
      }
    }

    .course-images {
      background-color: var(--bgTableEven);
      border-radius: var(--size-1);
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      display: none;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;

      &:has(img) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }

      img {
        max-width: 200px;
        cursor: pointer;
        border: 1px solid transparent;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        border-radius: var(--size-2);

        &:hover {
          border: 1px solid var(--eventColor2);
        }
      }
    }
  }
}

.SKB {
  &.ResultList {
    .repeated-trick-ind {
      vertical-align: super;
      font-size: 0.7em;
      margin-left: 3px;

      &:empty {
        display: none;
      }
    }

    .singleCompetitor {
      &:has(> .participant:nth-child(2)) {
        .participant {
          width: 49%;

          @media (max-width: 768px) {
            width: 100%;
          }
        }
      }
    }

    .currentInfoPanel {
      margin-top: var(--size-4);
      margin-bottom: var(--size-4);

      .participant {
        .left {
          display: none;
        }

        .right {
          padding: unset;
        }
      }

      .current-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        gap: var(--size-2);

        @media all and (max-width: 700px) {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          gap: 0;
        }

        .current-run {
          -webkit-box-flex: 1;
              -ms-flex: 1 1 auto;
                  flex: 1 1 auto;
          min-width: 0;

          @media all and (max-width: 700px) {
            padding: var(--size-2);
          }
        }

        .current-athlete {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start;
          gap: var(--size-3);
          margin-bottom: var(--size-2);
        }

        .athlete-wrapper {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          gap: var(--size-1);
          min-width: 0;
        }

        .current-name {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          gap: 0 var(--size-2);
          font-family: var(--eventFont-Bold);
          font-size: 1.2rem;

          @media all and (max-width: 700px) {
            font-size: 1rem;
          }
        }

        /* stat pills for the athlete's key figures */
        .athlete-wrapper .key-value-list {
          gap: var(--size-2);
          margin-top: var(--size-1);

          .key-value-item {
            -webkit-box-align: baseline;
                -ms-flex-align: baseline;
                    align-items: baseline;
            gap: var(--size-1);
            padding: 2px 0;
            border-radius: var(--size-4);
            font-size: 0.85rem;
          }

          .key {
            font-size: 0.7rem;
            text-transform: uppercase;
          }
        }

        .image-wrapper {
          -ms-flex-negative: 0;
              flex-shrink: 0;

          .athletePhoto {
            display: block;
            height: 56px;
            width: 56px;
            margin: 0;
            border-radius: var(--size-2);
            overflow: hidden;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
          }

          img {
            display: block;
            height: 100%;
            width: 100%;
            -o-object-fit: cover;
               object-fit: cover;
          }
        }

        /* preresult figures (e.g. Trick/Run scores) as a compact stat grid */
        .current-result .key-value-list {
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: -webkit-max-content;
          grid-auto-columns: max-content;
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: start;
          gap: var(--size-2);
          margin-top: 0;

          .key-value-item {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: var(--size-1);
            background-color: var(--bgSecondary);
            padding: var(--size-2);
            border-radius: var(--size-2);
          }

          .key {
            font-size: 0.7rem;
            font-family: var(--eventFont);
          }

          .value {
            font-family: var(--eventFont-Bold);
            font-size: 1rem;
          }
        }

        .score-needed {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 38%;
                  flex: 0 0 38%;

          @media all and (max-width: 700px) {
            -ms-flex-preferred-size: auto;
                flex-basis: auto;
            padding: var(--size-2);
            border-left: none;
          }

          .score-needed-title {
            font-size: 0.85rem;
            text-transform: uppercase;
            font-family: var(--eventFont-Bold);
            margin-bottom: var(--size-2);
          }

          .key-value-list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            gap: var(--size-5);
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
            margin-top: var(--size-1);
          }

          .key-value-item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            padding: 0;
            margin-bottom: var(--size-3);
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;

            &:last-child {
              border-bottom: none;
            }
          }

          .key {
            font-family: var(--eventFont);
            font-size: 0.7rem;
          }

          .value {
            font-family: var(--eventFont-Bold);
            font-size: 1rem;
          }
        }
      }

      .key-value-item {
        background: none;
      }

      .Last .score-needed {
        display: none;
      }

      .Next {
        display: none;
      }
    }

    /* Because SKB should not show next */
    table.default-table {
      tbody {
        tr.Next td {
          border-bottom: none;
        }

        tr.False.Next,
        tr.odd.Next,
        tr.evenFalse.Next,
        tr.evenTrue.Next {
          td {
            background-color: var(--bgTableEven);
          }
        }

        tr.True.Next,
        tr.even.Next,
        tr.oddFalse.Next,
        tr.oddTrue.Next {
          td {
            background-color: var(--bgTableOdd);
          }
        }
      }
    }

    table.default-table th.hide {
      display: none;
    }

    table.default-table td.hide {
      span {
        display: block;
      }
    }

    table.default-table {
      tr.False,
      tr.odd,
      tr.evenFalse,
      tr.evenTrue {
        td.hide {
          background-color: var(--bgTableEven) !important;
        }
      }

      tr.True,
      tr.even,
      tr.oddFalse,
      tr.oddTrue {
        td.hide {
          background-color: var(--bgTableOdd) !important;
        }
      }
    }

    .intermediateGrid {
      .intermediateWrapper.column {
        .interm {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 100px;
                  flex: 0 0 100px;
        }
      }
      .name {
        width: unset;
        min-width: 45px;
      }
      .content {
        width: 100%;
        padding-right: unset;
      }
      .performance {
        width: 100%;
      }
      .rank {
        display: none;
      }
    }

    @media all and (min-width: 1000px) {
      tr.detail {
        display: none !important;
      }
      .detailSwitch {
        display: none;
      }
      .expandableColumn {
        display: none;
      }
    }

    @media all and (max-width: 1000px) {
      .intermediateColumn,
      .intermediateTabContainer {
        display: none !important;
      }
      .detailSwitch {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      .expandableColumn {
        display: initial;
      }

      th,
      td {
        &.expandableColumn {
          display: table-cell;
        }
      }
    }
  }
}

.SWM {
  &.ResultList {
    table {
      td.intermediate {
        .content {
          .top,
          .bottom {
            .rank {
              @media (max-width: 950px) {
                width: 27px;
              }
            }
          }
        }
      }
      @media (max-width: 920px) {
        &.default-table {
          tbody {
            td {
              padding: 0.6rem var(--size-1);
            }
          }
        }
      }
    }
    
    @media all and (min-width: 850px) {
      tr.detail {
        display: none !important;
      }
      .detailSwitch {
        display: none;
      }
      .expandableColumn {
        display: none;
      }
    }

    @media all and (max-width: 850px) {
      .intermediateColumn,
      .intermediateTabContainer {
        display: none !important;
      }
      .detailSwitch {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      .expandableColumn {
        display: initial;
      }

      th,
      td {
        &.expandableColumn {
          display: table-cell;
        }
      }
    }
  }
}

.TRI {
  /* Card Types */

  .cards {
    margin-left: 3px;
    position: relative;
  }

  .cards.Y,
  .cards.Y1,
  .cards.Y2,
  .cards.Y3,
  .cards.Y4,
  .cards.Y5,
  .cards.Y6,
  .cards.Y7,
  .cards.Y8,
  .cards.Y9 {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);

    &::before {
      content: "";
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);
      background-color: var(--yellow);
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .cards.R,
  .cards.R1,
  .cards.R2,
  .cards.R3,
  .cards.R4,
  .cards.R5,
  .cards.R6,
  .cards.R7,
  .cards.R8,
  .cards.R9 {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    border-radius: var(--radius-2);

    &::before {
      content: "";
      color: var(--white);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);
      background-color: var(--red);
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .cards.YR,
  .cards.YR1,
  .cards.YR1,
  .cards.YR2,
  .cards.YR3,
  .cards.YR4,
  .cards.YR5,
  .cards.YR6,
  .cards.YR7,
  .cards.YR8,
  .cards.YR9 {
    display: inline-block;
    width: var(--size-3);
    height: var(--size-5);
    margin-right: var(--size-2);

    &::before {
      content: "";
      display: inline-block;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);
      background-color: var(--yellow);
      position: absolute;
      left: 0;
      top: 0;
    }

    &::after {
      content: "";
      color: var(--white);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);
      background-color: var(--red);
      position: absolute;
      left: var(--size-1);
      top: var(--size-1);
    }
  }

  .cards.YR1:after,
  .cards.Y1:before,
  .cards.R1:before {
    content: "1";
  }
  .cards.YR2:after,
  .cards.Y2:before,
  .cards.R2:before {
    content: "2";
  }
  .cards.YR3:after,
  .cards.Y3:before,
  .cards.R3:before {
    content: "3";
  }
  .cards.YR4:after,
  .cards.Y4:before,
  .cards.R4:before {
    content: "4";
  }
  .cards.YR5:after,
  .cards.Y5:before,
  .cards.R5:before {
    content: "5";
  }
  .cards.YR6:after,
  .cards.Y6:before,
  .cards.R6:before {
    content: "6";
  }
  .cards.YR7:after,
  .cards.Y7:before,
  .cards.R7:before {
    content: "7";
  }
  .cards.YR8:after,
  .cards.Y8:before,
  .cards.R8:before {
    content: "8";
  }
  .cards.YR9:after,
  .cards.Y9:before,
  .cards.R9:before {
    content: "9";
  }

  &.PlayerStatistics {
    .move.down,
    .move.up,
    .move.equal {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;

      &:after {
        font-family: "FontAwesome-Solid";
        font-size: 0.55rem;
        display: inline-block;
        margin-left: 3px;
      }
    }

    .move.equal {
      color: transparent;

      &:after {
        content: "\f45c";
        color: grey;
        font-size: 0.4rem;
      }
    }

    .move.down {
      &:after {
        content: "\f063";
        color: var(--red-8);
      }
    }

    .move.up {
      &:after {
        content: "\f062";
        color: var(--green-8);
      }
    }

    .move.up.down {
      display: none;
    }
  }

  &.ResultList {
    table {
      td.intermediate {
        .content {
          .top,
          .bottom {
            .rank {
              @media (max-width: 950px) {
                width: 27px;
              }
            }
          }
        }
      }
      @media (max-width: 920px) {
        &.default-table {
          tbody {
            td {
              padding: 0.6rem var(--size-1);
            }
          }
        }
      }
    }
    
    @media all and (min-width: 850px) {
      tr.detail {
        display: none !important;
      }
      .detailSwitch {
        display: none;
      }
      .expandableColumn {
        display: none;
      }
    }

    @media all and (max-width: 850px) {
      .intermediateColumn,
      .intermediateTabContainer {
        display: none !important;
      }
      .detailSwitch {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      .expandableColumn {
        display: initial;
      }

      th,
      td {
        &.expandableColumn {
          display: table-cell;
        }
      }
    }
  }

  &.PlayerStatistics {
    
    @media all and (min-width: 1100px) {
      tr.detail {
        display: none !important;
      }
      .detailSwitch {
        display: none;
      }
      .expandableColumn {
        display: none;
      }
    }

    @media all and (max-width: 1100px) {
      .intermediateColumn,
      .intermediateTabContainer {
        display: none !important;
      }
      .detailSwitch {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      .expandableColumn {
        display: initial;
      }

      th,
      td {
        &.expandableColumn {
          display: table-cell;
        }
      }
    }
  }
}

.TTE {
  .scoredev {
    .team-name {
      .athleteLink_SC {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        > span:not(.lastName) {
          font-size: 0.8rem;
        }
      }
    }

    .scoredevRight {
      .team-name {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
      }
    }

    @media (min-width: 769px) {
      .scoredevRight {
        .team-name {
          text-align: right;
        }
      }
    }

    .scoredevInner {
      .team.photo .team-flag .noc-element img {
        height: var(--size-4);
      }
    }
  }

  &.PlayerStatistics {
    @media all and (max-width: 640px) {
      .h2h-comparison {
        & .item {
          & .competitor {
            @media (max-width: 500px) {
              font-size: 0.9rem;
            }
          }
        }
      }
    }
  }

  &.GroupSummary {
    @media (max-width: 760px) {
      table {
        &.default-table {
          thead th {
            padding: var(--size-2) var(--size-1);
          }
        }
      }
    }
  }
}

.ResultList.TTE {
  position: relative;

  .default-table {
    margin: var(--size-5) 0;
    min-width: initial;

    th,
    td {
      text-align: left;

      /* TODO: Andre, I removed this class */
      &.rightPadding {
        padding: var(--size-3);
      }

      &.in-progress {
        color: var(--liveColor);
      }
    }

    th:not(.athleteName, .noc-column, .match-indicators),
    td:not(.athleteName, .noc-column, .match-indicators) {
      text-align: center;
    }

    th:not(.athleteName, .noc-column, .match-indicators) {
      width: var(--size-8);
    }

    th.match-indicators {
      width: var(--size-11);
    }

    tfoot td {
      text-align: left !important;
      padding: var(--size-3);
    }
  }

  .match-indicators {
    > div {
      margin-right: var(--size-1);
      display: none;
      position: relative;
    }

    .serving {
      display: inline-block;
      background-image: url(../base/images/sports/tabletennis.png);
      background-repeat: no-repeat;
      width: var(--size-3);
      height: var(--size-3);
      background-size: var(--size-3);
      position: relative;
      top: var(--size-1);
      margin-right: var(--size-2);

      &.serve {
        background-image: url(../base/images/sports/tabletennis_serve.png);
        width: var(--size-7);
        height: var(--size-7);
        background-size: contain;
      }

      &.receive {
        background-image: url(../base/images/sports/tabletennis_receive.png);
        width: var(--size-7);
        height: var(--size-7);
        background-size: contain;
      }
    }

    .timeout.received {
      display: inline-block;
      position: relative;

      &:after {
        content: "Timeout";
        text-transform: uppercase;
        font-family: var(--eventFontAccent);
        display: block;
        padding: var(--size-1);
        background-color: var(--bgTableOdd);
        font-size: 0.875rem;
        letter-spacing: 0.025rem;
      }
    }

    /* Card Types */

    .cards.Y,
    .cards.Y1,
    .cards.Y2,
    .cards.Y3,
    .cards.Y4,
    .cards.Y5,
    .cards.Y6,
    .cards.Y7,
    .cards.Y8,
    .cards.Y9 {
      display: inline-block;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);

      &::before {
        content: "";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: var(--size-3);
        height: var(--size-5);
        border-radius: var(--radius-2);
        background-color: var(--yellow);
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    .cards.R,
    .cards.R1,
    .cards.R2,
    .cards.R3,
    .cards.R4,
    .cards.R5,
    .cards.R6,
    .cards.R7,
    .cards.R8,
    .cards.R9 {
      display: inline-block;
      width: var(--size-3);
      height: var(--size-5);
      border-radius: var(--radius-2);

      &::before {
        content: "";
        color: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: var(--size-3);
        height: var(--size-5);
        border-radius: var(--radius-2);
        background-color: var(--red);
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    .cards.YR,
    .cards.YR1,
    .cards.YR1,
    .cards.YR2,
    .cards.YR3,
    .cards.YR4,
    .cards.YR5,
    .cards.YR6,
    .cards.YR7,
    .cards.YR8,
    .cards.YR9 {
      display: inline-block;
      width: var(--size-3);
      height: var(--size-5);
      margin-right: var(--size-2);

      &::before {
        content: "";
        display: inline-block;
        width: var(--size-3);
        height: var(--size-5);
        border-radius: var(--radius-2);
        background-color: var(--yellow);
        position: absolute;
        left: 0;
        top: 0;
      }

      &::after {
        content: "";
        color: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: var(--size-3);
        height: var(--size-5);
        border-radius: var(--radius-2);
        background-color: var(--red);
        position: absolute;
        left: var(--size-1);
        top: var(--size-1);
      }
    }

    .cards.YR1:after,
    .cards.Y1:before,
    .cards.R1:before {
      content: "1";
    }
    .cards.YR2:after,
    .cards.Y2:before,
    .cards.R2:before {
      content: "2";
    }
    .cards.YR3:after,
    .cards.Y3:before,
    .cards.R3:before {
      content: "3";
    }
    .cards.YR4:after,
    .cards.Y4:before,
    .cards.R4:before {
      content: "4";
    }
    .cards.YR5:after,
    .cards.Y5:before,
    .cards.R5:before {
      content: "5";
    }
    .cards.YR6:after,
    .cards.Y6:before,
    .cards.R6:before {
      content: "6";
    }
    .cards.YR7:after,
    .cards.Y7:before,
    .cards.R7:before {
      content: "7";
    }
    .cards.YR8:after,
    .cards.Y8:before,
    .cards.R8:before {
      content: "8";
    }
    .cards.YR9:after,
    .cards.Y9:before,
    .cards.R9:before {
      content: "9";
    }
  }

  .athleteName {
    .serving {
      display: inline-block;
      background-image: url(../base/images/sports/tabletennis.png);
      background-repeat: no-repeat;
      width: var(--size-3);
      height: var(--size-3);
      background-size: var(--size-3);
      position: relative;
      margin-right: var(--size-2);
      margin-left: var(--size-3);

      &.receive {
        background-image: url(../base/images/sports/tabletennis2.png);
      }
    }
  }

  @media (max-width: 720px) {
    tfoot {
      display: none;
    }
  }

  @media all and (min-width: 600px) {
    tr.detail {
      display: none !important;
    }
    .detailSwitch {
      display: none;
    }
    .expandableColumn {
      display: none;
    }
  }

  @media all and (max-width: 600px) {
    .intermediateColumn,
    .intermediateTabContainer {
      display: none !important;
    }
    .detailSwitch {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .expandableColumn {
      display: initial;
    }

    th,
    td {
      &.expandableColumn {
        display: table-cell;
      }
    }
  }

  .athleteName.doubles {
    @media all and (max-width: 800px) {
      a.athleteLink {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }
      span.single-athlete {
        width: 100%;
      }
      .separator {
        display: none;
      }
    }
  }
}

.VBV {
  .gameProgress .timelines {
    .action:before {
      background-color: transparent;
      border: none;
      border-radius: 0;
    }

    .action:before {
      background-image: url(../base/images/sports/vbv.png);
    }
  }

  table {
    th {
      &.CrossTable_Result {
        min-width: var(--size-7);
        width: var(--size-7);
        @media all and (max-width: 1200px) {
          display: none;
        }
      }
    }
    td.CrossTable_Result {
      @media all and (max-width: 1200px) {
        display: none;
      }
    }
  }

  &.ResultList {
    tfoot {
      td {
        &:first-child {
          text-align: left;
        }
      }
    }
  }

  .athleteName {
    .serving {
      display: inline-block;
      background-image: url(../base/images/sports/vbv.png);
      background-repeat: no-repeat;
      width: var(--size-3);
      height: var(--size-3);
      background-size: var(--size-3);
      position: relative;
      margin-right: var(--size-2);
      margin-left: var(--size-3);
    }
  }
}

.WRB {
  &.ResultList {
    table.default-table th.hide {
      display: none;
    }

    table.default-table {
      tr.False,
      tr.odd,
      tr.evenFalse,
      tr.evenTrue {
        td.hide {
          background-color: var(--bgTableEven) !important;
        }
      }

      tr.True,
      tr.even,
      tr.oddFalse,
      tr.oddTrue {
        td.hide {
          background-color: var(--bgTableOdd) !important;
        }
      }
    }
  }

  table {
    th {
      &.CrossTable_Result {
        @media all and (max-width: 1200px) {
          min-width: var(--size-8);
          width: var(--size-8);
        }
        @media all and (max-width: 1100px) {
          min-width: var(--size-7);
          width: var(--size-7);
        }
        @media all and (max-width: 900px) {
            display: none;
        }
      }
    }
    td.CrossTable_Result {
      @media all and (max-width: 900px) {
        display: none;
      }
    }
  }
}

.WST {
    .currentInfoPanel
{
    .bottom
{
                     .value.parent
{
    border-bottom: 1px solid black;
}
}
}
}

:root {
  --bgMain: rgb(244, 246, 245);
  --bgSecondary: rgb(255, 255, 255);
  --bgTableEven: rgb(255, 255, 255);
  --bgTableOdd: rgb(227, 240, 241);
  --borderTable: rgb(96, 96, 96);
  --eventColor1: rgb(0, 120, 208);
  --eventColor1Light: rgb(50, 124, 199);
  --eventColor2: rgb(0, 0, 0);
  --eventColor2Light: rgb(26, 26, 26);
  --linkColor: rgb(0, 0, 0);
  --eventColor3: rgb(0, 0, 0);
  --linkcolorHover: rgb(0, 0, 0);
  --buttonColorHover: rgb(1, 41, 128);
  --buttonColorActive: rgb(1, 41, 78);
  --textColor: rgb(26, 25, 25);
  --text-over-eventColor1: rgb(255, 255, 255);
  --text-over-eventColor2: rgb(255, 255, 255);
  --text-over-eventColor2-60: rgba(255, 255, 255, 0.6);
  --liveColor: rgb(220, 44, 45);
  --warningColorText: rgb(234, 88, 12);
  --current: rgb(220, 44, 45);
  --gold: rgb(222, 182, 69);
  --silver: rgb(191, 189, 193);
  --bronze: rgb(173, 122, 84);
  --AS: rgb(236, 27, 35);
  --BS: rgb(0, 166, 81);
  --MA: rgb(0, 150, 218);
  --PS: rgb(235, 0, 140);
  --SS: rgb(239, 91, 36);
  --TS: rgb(184, 134, 11);
  --oddRow: transparent;
  --evenRow: #e3f0f1;
  --highlightCellOdd: #f7f7f7;
  --highlightCellEven: #eef2f4;
  --eventFont: "OlympicSans-Regular";
  --eventFont-Bold: "OlympicSans-Bold";
  --eventFontAccent: "OlympicHeadline-Regular";
  --eventFontAccent-Condensed: "OlympicHeadline-Condensed";
  --page-width: 1264px;
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --currentInfoLast: rgb(222, 233, 255);
  --currentInfoCurrent: rgb(217, 245, 228);
  --currentInfoNext: rgb(239, 236, 217);
  --currentInfoNextHeader: rgb(218, 145, 0);
}

.medal-icon {
  width: 24px;
  height: 24px;
  position: relative;

  img {
    /*important is needed for bracket occurence*/
    width: 24px !important;
    height: 24px !important;
    top: 0 !important;
  }

  abbr {
    text-decoration: none;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 24px;
    height: 24px;
    top: 0;
    left: 0;
    font-size: 16px;
    font-family: var(--eventFont);
    cursor: default;
    color: var(--textColor);
  }

  .sortValue {
    font-size: 16px;
    font-family: var(--eventFont);
    margin-left: 2px;
  }
}
th > .medal-icon,
td > .medal-icon {
  display: inline-block;
}

/* Scrollbar */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/* custom background pattern */
html {
  background-color: transparent;
}

/* "Intern" for not iframe usage, "Dev", "Uat", or "Web" for prod*/
html:has(body[instance~="Dev"]),
html:has(body[instance~="Local"]),
html:has(body[instance~="Intern"]) {
  background-color: var(--bgMain);
}

body {
  font-size: 16px;
  font-family: var(--eventFont);
}

/* disabled features */
#browserNavi {
  display: none;
}

table tr.rot td:not(.detail),
table tr.rot td:not(.detail) a {
  color: red !important;
}

.st-info {
  /*@import "../base/skin_print.css";*/
  @import "skin_sports.css";
  &.stickyHeader {
    &#page {
      z-index: 21;
    }
  }

  &#page {
    z-index: 21;
    background-color: transparent;
  }

  .scheduleContainer {
    .schedule_event {
      .icon--medal {
        background-position-x: 8px;
        background-position-y: 4px;
        background-size: 60%;
        &.gold {
          background-image: url("images/medals/gold.png");
        }

        &.silver {
          background-image: url("images/medals/silver.png");
        }

        &.bronze {
          background-image: url("images/medals/bronze.png");
        }
      }
    }
  }

  .factAthlete {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5px;

    .competitor-bib {
      width: 20px;
      text-align: right;
    }

    > a {
      width: 60px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .fact-participant {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      gap: var(--size-1);

      @media (max-width: 700px) {
        .noc-element {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
        }
      }
    }

    .noc-element {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

    @media all and (max-width: 600px) {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;

      .athleteLink {
        min-width: 80px;
      }
    }
  }

  &.mobile {
    .sponsorTop {
      position: relative;
      top: 0px !important;
      img {
        padding-top: 0;
      }
    }
  }

  &#page {
    .detailSwitch {
      .tabitem {
        text-transform: initial;
        font-weight: normal;
      }
    }
  }

  .legend {
    .training {
      border-left-color: var(--eventColor2Light2);
    }
  }

  .countryInfo {
    .filter {
      .medals {
        .icon--medal {
          background-position: -25px 0;

          @media (max-width: 800px) {
            background-position: 15px 0;
          }
        }
      }
    }
  }

  &.Medals {
    table .sortable {
      th .sortable:has(img) {
        text-align: center !important;
      }
    }
  }

  &.isApp {
    .download,
    .zipLink,
    .downlaodZip {
      display: none;
    }

    #headerContainer {
      .printBtn {
        display: none;
      }
    }
  }
}

.resultBook {
  .category-container {
    &.AS {
      border-color: var(--AS);
      .category {
        color: var(--AS);
      }
    }

    &.BS {
      border-color: var(--BS);
      .category {
        color: var(--BS);
      }
    }

    &.MA {
      border-color: var(--MA);
      .category {
        color: var(--MA);
      }
    }

    &.PS {
      border-color: var(--PS);
      .category {
        color: var(--PS);
      }
    }

    &.SS {
      border-color: var(--SS);
      .category {
        color: var(--SS);
      }
    }

    &.TS {
      border-color: var(--TS);
      .category {
        color: var(--TS);
      }
    }
  }
}

.groupedSchedule {
  &.isApp {
    .download,
    .zipLink,
    .downlaodZip {
      display: none;
    }
  }
}

.clientTimeSelector {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
}

.bracket-ranking-header {
    display: none;
}
/*# sourceMappingURL=theme.css.map */