.manager-h2h-page {
    width: 100%;
    padding: 18px 20px 28px;
}

.manager-h2h-heading {
    min-height: 58px;
    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    background: #0b1728;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 5px 5px 0 0;
}

.manager-h2h-heading h1 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.manager-h2h-heading span {
    color: var(--ffo-gold);

    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.manager-h2h-content {
    padding: 12px;

    background: #07111f;
    border-radius: 0 0 5px 5px;
}

.manager-h2h-picker {
    padding: 14px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 112px;
    align-items: end;
    gap: 10px;

    background: #0b1728;
    border-top: 3px solid var(--ffo-gold);
    border-radius: 4px;
}

.manager-h2h-picker__field {
    min-width: 0;
}

.manager-h2h-picker__field label {
    display: block;
    margin-bottom: 7px;

    color: var(--ffo-gold);

    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.manager-h2h-picker__field input {
    width: 100%;
    height: 46px;
    padding: 0 13px;

    appearance: none;

    background: #07111f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;

    outline: none;
}

.manager-h2h-picker__field input::placeholder {
    color: #718096;
}

.manager-h2h-picker__field input:focus {
    border-color: rgba(240, 197, 69, 0.7);
}

.manager-h2h-picker__versus {
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #718096;

    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.manager-h2h-button {
    height: 46px;
    padding: 0 16px;

    appearance: none;

    background: #162b6f;
    border: 0;
    border-radius: 3px;

    color: #ffffff;

    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.035em;

    cursor: pointer;
}

.manager-h2h-button:hover,
.manager-h2h-button:focus-visible {
    background: #1c3689;
    outline: none;
}

.manager-h2h-error,
.manager-h2h-empty {
    min-height: 88px;
    margin-top: 10px;
    padding: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #0b1728;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;

    color: #aeb8cc;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
}

.manager-h2h-error {
    background: #3c1d26;
    border-color: rgba(242, 121, 143, 0.3);
    color: #f2798f;
}

.manager-h2h-empty--result {
    min-height: 70px;
}

.manager-h2h-scoreboard {
    min-height: 186px;
    margin-top: 10px;
    padding: 18px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;

    background: #0b1728;
    border-top: 3px solid var(--ffo-gold);
    border-radius: 4px;
}

.manager-h2h-scoreboard__manager,
.manager-h2h-scoreboard__middle {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #101d31;
    border-radius: 4px;

    text-align: center;
}

.manager-h2h-scoreboard__manager {
    padding: 15px;
}

.manager-h2h-scoreboard__manager > span {
    color: #8491a5;

    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.manager-h2h-scoreboard__manager h2 {
    width: 100%;
    margin: 9px 0 12px;

    color: #ffffff;

    font-size: 19px;
    line-height: 1.15;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.manager-h2h-scoreboard__manager > strong {
    color: var(--ffo-gold);

    font-size: 38px;
    line-height: 1;
    font-weight: 900;
}

.manager-h2h-scoreboard__manager > small {
    margin-top: 6px;

    color: #9eabc0;

    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.manager-h2h-scoreboard__middle {
    background: #07111f;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.manager-h2h-scoreboard__middle > strong {
    color: #ffffff;

    font-size: 32px;
    line-height: 1;
    font-weight: 900;
}

.manager-h2h-scoreboard__middle > span {
    margin-top: 7px;

    color: var(--ffo-gold);

    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.manager-h2h-scoreboard__middle > div {
    margin-top: 14px;
    padding-top: 12px;
    width: calc(100% - 28px);

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    color: #9eabc0;

    font-size: 11px;
    line-height: 1;
    font-weight: 800;
}

.manager-h2h-comparison {
    margin-top: 10px;

    background: #0b1728;
    border-radius: 4px;
    overflow: hidden;
}

.manager-h2h-comparison__row {
    min-height: 48px;
    padding: 0 14px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.manager-h2h-comparison__row:last-child {
    border-bottom: 0;
}

.manager-h2h-comparison__row > strong {
    color: #ffffff;

    font-size: 14px;
    line-height: 1.15;
    font-weight: 900;
    text-align: center;
    overflow-wrap: anywhere;
}

.manager-h2h-comparison__row > span {
    color: #9eabc0;

    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.manager-h2h-comparison__row--heading {
    min-height: 56px;

    background: #101d31;
    border-top: 3px solid var(--ffo-gold);
}

.manager-h2h-comparison__row--heading > strong {
    color: var(--ffo-gold);
    font-size: 12px;
}

.manager-h2h-two-column,
.manager-h2h-breakdowns {
    margin-top: 10px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
}

.manager-h2h-panel {
    min-width: 0;

    background: #0b1728;
    border-radius: 4px;
    overflow: hidden;
}

.manager-h2h-panel__heading {
    min-height: 62px;
    padding: 11px 13px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;

    background: #101d31;
    border-top: 3px solid var(--ffo-gold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.manager-h2h-panel__heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 15px;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

.manager-h2h-panel__heading span {
    color: #8491a5;

    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.manager-h2h-club-list {
    padding: 8px;

    display: grid;
    gap: 5px;
}

.manager-h2h-club {
    min-height: 52px;
    padding: 7px 9px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 36px);
    align-items: center;
    gap: 5px;

    background: #0d1a2c;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 3px;
}

.manager-h2h-club__identity {
    min-width: 0;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.manager-h2h-club__identity img {
    width: 34px;
    height: 34px;

    display: block;
    object-fit: contain;
}

.manager-h2h-club__identity div {
    min-width: 0;
}

.manager-h2h-club__identity strong,
.manager-h2h-club__identity span {
    display: block;
}

.manager-h2h-club__identity strong {
    color: #ffffff;

    font-size: 11px;
    line-height: 1.15;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.manager-h2h-club__identity span {
    margin-top: 4px;

    color: #718096;

    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.manager-h2h-club__record {
    text-align: center;
}

.manager-h2h-club__record strong,
.manager-h2h-club__record span {
    display: block;
}

.manager-h2h-club__record strong {
    color: #ffffff;

    font-size: 11px;
    line-height: 1;
    font-weight: 900;
}

.manager-h2h-club__record span {
    margin-top: 4px;

    color: #718096;

    font-size: 8px;
    line-height: 1;
    font-weight: 900;
}

.manager-h2h-table-wrap {
    padding: 8px;
}

.manager-h2h-table {
    width: 100%;

    border-collapse: collapse;
    table-layout: fixed;

    background: #0d1a2c;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.manager-h2h-table th,
.manager-h2h-table td {
    height: 37px;
    padding: 7px 6px;

    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    color: #c6cfdd;

    font-size: 9px;
    line-height: 1.15;
    font-weight: 800;
    text-align: center;
}

.manager-h2h-table th {
    background: #101d31;
    color: var(--ffo-gold);

    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.manager-h2h-table th:first-child,
.manager-h2h-table td:first-child {
    width: 46%;
    padding-left: 10px;

    text-align: left;
    overflow-wrap: anywhere;
}

.manager-h2h-table--season th:first-child,
.manager-h2h-table--season td:first-child {
    width: 42%;
}

.manager-h2h-table th:last-child,
.manager-h2h-table td:last-child {
    border-right: 0;
}

.manager-h2h-table tbody tr:last-child td {
    border-bottom: 0;
}

.manager-h2h-panel--matches {
    margin-top: 10px;
}

.manager-h2h-match-list {
    padding: 8px;

    display: grid;
    gap: 6px;
}

.manager-h2h-match {
    min-height: 74px;
    padding: 8px 10px;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 92px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    background: #0d1a2c;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 3px;

    color: inherit;
    text-decoration: none;
}

a.manager-h2h-match {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.manager-h2h-match:hover,
a.manager-h2h-match:focus-visible {
    background: #14243b;
    border-color: rgba(240, 197, 69, 0.5);
    outline: none;
}

.manager-h2h-match__meta {
    min-width: 0;
}

.manager-h2h-match__meta strong,
.manager-h2h-match__meta span {
    display: block;
}

.manager-h2h-match__meta strong {
    color: var(--ffo-gold);

    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.manager-h2h-match__meta span {
    margin-top: 5px;

    color: #8491a5;

    font-size: 9px;
    line-height: 1.15;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.manager-h2h-match__meta .manager-h2h-match__view {
    color: var(--ffo-gold);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.manager-h2h-match__club {
    min-width: 0;

    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.manager-h2h-match__club--first {
    grid-template-columns: minmax(0, 1fr) 38px;
    text-align: right;
}

.manager-h2h-match__club img {
    width: 38px;
    height: 38px;

    display: block;
    object-fit: contain;
}

.manager-h2h-match__club div {
    min-width: 0;
}

.manager-h2h-match__club strong,
.manager-h2h-match__club span {
    display: block;
}

.manager-h2h-match__club strong {
    color: #ffffff;

    font-size: 11px;
    line-height: 1.15;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.manager-h2h-match__club span {
    margin-top: 4px;

    color: #718096;

    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.manager-h2h-match__score {
    text-align: center;
}

.manager-h2h-match__score > strong {
    display: block;

    color: #ffffff;

    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

.manager-h2h-match__score > strong span {
    color: #718096;
}

.manager-h2h-match__score > small {
    width: 28px;
    height: 20px;
    margin: 7px auto 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 3px;

    font-size: 9px;
    line-height: 1;
    font-weight: 900;
}

.manager-h2h-match__score > small.is-w {
    background: rgba(101, 220, 152, 0.14);
    color: #65dc98;
}

.manager-h2h-match__score > small.is-d {
    background: rgba(240, 197, 69, 0.12);
    color: var(--ffo-gold);
}

.manager-h2h-match__score > small.is-l {
    background: rgba(242, 121, 143, 0.14);
    color: #f2798f;
}