/* Generated from topical.live frontend/styles.css by football/ratings/sync-notifications-css.js - do not edit. */
.dmWidget {

    position:fixed;

    right:18px;

    bottom:18px;

    z-index:2000;

    font-family:Arial, Helvetica, sans-serif;
}

.dmWidget.dmWidgetSnapping {

    transition:left .2s ease, top .2s ease;
}

.dmToggle {

    display:flex;

    align-items:center;

    gap:8px;

    box-shadow:0 2px 8px rgba(0,0,0,.18);

    cursor:grab;

    touch-action:none;

    -webkit-user-select:none;

    user-select:none;

    opacity:1;

    transition:opacity .2s ease;
}

.dmToggle.dmToggleScrolling {

    opacity:.4;
}

.dmToggle:active {

    cursor:grabbing;
}

.dmBadge {

    min-width:22px;

    height:22px;

    padding:2px 6px;

    border-radius:999px;

    background:#ffd166;

    color:#12355b;

    font-size:.78rem;

    line-height:18px;

    text-align:center;
}

.dmCategoryMenu {

    position:absolute;

    display:flex;

    flex-direction:column;

    gap:8px;

    width:180px;

    padding:8px;

    background:#ffffff;

    border:1px solid #d5e5e0;

    border-radius:12px;

    box-shadow:0 4px 16px rgba(0,0,0,.22);
}

.dmWidget[data-corner="bottom-right"] .dmCategoryMenu,
.dmWidget[data-corner="bottom-left"] .dmCategoryMenu {
    bottom:54px;
    top:auto;
}

.dmWidget[data-corner="top-right"] .dmCategoryMenu,
.dmWidget[data-corner="top-left"] .dmCategoryMenu {
    top:54px;
    bottom:auto;
}

.dmWidget[data-corner="bottom-right"] .dmCategoryMenu,
.dmWidget[data-corner="top-right"] .dmCategoryMenu {
    right:0;
    left:auto;
}

.dmWidget[data-corner="bottom-left"] .dmCategoryMenu,
.dmWidget[data-corner="top-left"] .dmCategoryMenu {
    left:0;
    right:auto;
}

.dmCategoryButton {

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px 8px 10px;

    border:0;

    border-radius:8px;

    background:#eef4f4;

    color:#124e66;

    font-size:.86rem;

    font-weight:800;

    white-space:nowrap;

    cursor:pointer;
}

.dmCategoryButton:hover {

    background:#e2efee;
}

.dmCategoryBadge {

    margin-left:auto;
}

.dmFullscreen {

    position:fixed;

    inset:0;

    z-index:4500;

    flex-direction:column;

    background:#ffffff;

    overscroll-behavior:contain;
}

.dmFullscreenHeader {

    flex-shrink:0;
}

.dmFullscreenBody {

    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;

    overflow:hidden;
}

.dmMessagesSection.dmMessagesSectionEmbedded {

    display:flex;

    flex-direction:column;

    width:100%;

    height:min(78vh, 760px);

    background:#ffffff;

    border:1px solid #d5e5e0;

    border-radius:12px;

    overflow:hidden;
}

.dmHeader {

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;

    padding:14px;

    background:#12355b;

    color:white;

    flex-shrink:0;
}

.dmHeader small {

    display:block;

    margin-top:3px;

    color:#d7ecf1;

    font-size:.78rem;
}

.dmIconButton {

    width:30px;

    height:30px;

    padding:0;

    border-radius:50%;

    font-size:1.2rem;

    line-height:1;
}

.dmRecipientRow {

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:10px 12px;

    background:#eef8f5;

    color:#124e66;

    font-size:.92rem;

    flex-shrink:0;
}

.dmRecipientRow button {

    padding:5px 9px;

    font-size:.78rem;
}

.dmFriendSearch {

    position:relative;

    padding:10px 12px;

    border-top:1px solid #d5e5e0;

    background:white;

    flex-shrink:0;
}

.dmFriendSearch input {

    width:100%;

    min-height:36px;

    margin:0;

    padding:8px 10px;

    border:1px solid #bfd6d0;

    border-radius:6px;

    font-size:.9rem;
}

.dmFriendResults {

    position:absolute;

    left:12px;

    right:12px;

    top:50px;

    z-index:3;

    max-height:190px;

    overflow-y:auto;

    border:1px solid #d5e5e0;

    border-radius:6px;

    background:white;

    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.dmFriendResult {

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    width:100%;

    min-height:auto;

    padding:8px 10px;

    border:0;

    border-radius:0;

    background:white;

    color:#12355b;

    text-align:left;
}

.dmFriendResult:hover {

    background:#eef8f5;
}

.dmFriendResult span,
.dmFriendEmpty {

    color:#5b7480;

    font-size:.78rem;

    font-weight:700;
}

.dmFriendEmpty {

    padding:10px;
}

.dmMessages {

    flex:1;

    min-height:0;

    overflow-y:auto;

    overscroll-behavior:contain;

    padding:12px;

    background:#f8fbfb;
}

.dmSection + .dmSection {

    margin-top:14px;
}

.dmSectionTitle {

    margin-bottom:8px;

    color:#5b7480;

    font-size:.78rem;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.08em;
}

.dmEmpty {

    padding:18px 8px;

    color:#5b7480;

    text-align:center;

    font-weight:700;
}

.dmSectionEmpty {

    padding:8px 0 2px;
}

.dmNotification {

    width:100%;

    min-height:auto;

    margin-bottom:8px;

    padding:10px;

    border:1px solid #d5e5e0;

    border-left:4px solid #b8c4cf;

    border-radius:8px;

    background:#ffffff;

    color:#12355b;

    text-align:left;
}

.dmNotificationUnread {

    border-left-color:#f4a261;

    background:#fff8ef;
}

.dmNotificationMeta {

    display:flex;

    justify-content:space-between;

    gap:8px;

    margin-bottom:6px;

    color:#5b7480;

    font-size:.76rem;

    font-weight:900;
}

.dmNotificationText {

    color:#22313f;

    font-size:.88rem;

    line-height:1.4;
}

.dmNotificationLink {

    display:inline-block;

    margin-top:8px;

    color:#0b7285;

    font-size:.8rem;

    font-weight:900;
}

.dmMessage {

    margin-bottom:10px;

    padding:10px;

    border-radius:8px;

    border:1px solid #d5e5e0;

    background:white;
}

.dmSent {

    border-left:4px solid #2a9d8f;
}

.dmReceived {

    border-left:4px solid #ffd166;
}

.dmMessageMeta {

    display:flex;

    justify-content:space-between;

    gap:8px;

    color:#5b7480;

    font-size:.78rem;

    font-weight:800;

    margin-bottom:6px;
}

.dmUserLink {

    color:#124e66;

    font-weight:900;

    text-decoration:none;
}

.dmUserLink:hover {

    color:#0a9396;

    text-decoration:underline;
}

.dmConversationList {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.dmConversationRow {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:10px;
    border:1px solid #d5e5e0;
    border-left:4px solid #b8c4cf;
    border-radius:8px;
    background:#ffffff;
    text-align:left;
    cursor:pointer;
}

.dmConversationRowUnread {
    border-left-color:#f4a261;
    background:#fff8ef;
}

.dmConversationMain {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
    flex:1;
}

.dmConversationHeader {
    display:flex;
    justify-content:space-between;
    gap:8px;
}

.dmConversationUsername {
    color:#12355b;
    font-weight:900;
}

.dmConversationTime {
    flex:0 0 auto;
    color:#5b7480;
    font-size:.76rem;
    font-weight:800;
}

.dmConversationPreview {
    overflow:hidden;
    color:#5b7480;
    font-size:.86rem;
    font-weight:600;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.dmConversationUnreadDot {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:999px;
    background:#f4a261;
    color:#ffffff;
    font-size:.72rem;
    font-weight:900;
}

.dmThreadHeader {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.dmBackButton {
    padding:5px 10px;
    border:1px solid #d5e5e0;
    border-radius:999px;
    background:#ffffff;
    color:#124e66;
    font-size:.8rem;
    font-weight:900;
    cursor:pointer;
}

.dmThreadUsername {
    color:#12355b;
    font-weight:900;
}

.dmReplyButton {

    margin-top:8px;

    padding:5px 10px;

    font-size:.78rem;
}

.dmMessageText {

    color:#222;

    font-size:.94rem;

    line-height:1.45;

    white-space:pre-wrap;

    overflow-wrap:anywhere;
}

.dmMessageLink {

    color:#0b7285;

    font-weight:800;

    text-decoration:underline;

    text-underline-offset:2px;
}

.dmMessageLink:hover {

    color:#09566a;
}

.dmForm {

    display:flex;

    flex-wrap:wrap;

    align-items:flex-end;

    gap:8px;

    padding:10px 12px;

    border-top:1px solid #d5e5e0;

    background:white;

    flex-shrink:0;
}

.dmForm textarea {

    flex:1 1 0%;

    width:auto;

    min-width:0;

    min-height:40px;

    max-height:100px;

    margin:0;

    resize:vertical;
}

.dmForm button {

    flex-shrink:0;

    align-self:flex-end;

    min-height:40px;

    padding:9px 14px;
}

.dmFormActions {

    display:flex;

    flex-direction:row;

    flex-shrink:0;

    gap:6px;

    align-items:flex-end;
}

.dmImageButton {

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:38px;

    height:38px;

    margin:0;
}

.dmImageButton .cameraIcon {

    width:34px;

    height:34px;
}

.dmImageInput {

    display:none;
}

.dmImagePreview {

    flex:0 0 100%;

    align-items:center;

    gap:8px;

    padding:0;

    background:white;
}

.dmImagePreviewImage {

    width:44px;

    height:44px;

    border-radius:6px;

    object-fit:cover;

    background:#eef8f5;
}

.dmImagePreviewName {

    flex:1;

    color:#124e66;

    font-size:.82rem;

    font-weight:900;
}

.dmRemoveImage {

    width:28px;

    height:28px;

    padding:0;

    border-radius:50%;

    line-height:1;
}

.dmMessageImageLink {

    display:block;

    margin-top:8px;

    padding:0;

    border:none;

    background:none;

    cursor:pointer;
}

.dmMessageImageLink:hover {

    transform:none;
}

.dmImageLightbox {

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.85);

    z-index:6000;
}

.dmImageLightboxImg {

    max-width:92vw;

    max-height:92vh;

    object-fit:contain;

    border-radius:6px;
}

.dmImageLightboxClose {

    position:absolute;

    top:16px;

    right:16px;

    width:44px;

    height:44px;

    border-radius:50%;

    background:rgba(0,0,0,.6);

    color:white;

    font-size:28px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;
}

.dmMessageImage {

    display:block;

    max-width:100%;

    max-height:190px;

    border-radius:6px;

    object-fit:contain;

    background:#eef8f5;
}

.dmStatus {

    min-height:28px;

    padding:0 12px 12px;

    color:#5b7480;

    font-size:.84rem;

    font-weight:700;

    flex-shrink:0;
}

.dmStatusError {

    color:#a12622;
}

.dmProfileButton {

    margin-top:12px;
}

@media (max-width:600px) {
    .dmWidget {

        right:10px;

        bottom:10px;
    }
}

@media(max-width:768px) {
    .dmFullscreen button {
        min-height:0;
        min-width:0;
    }
}

.dmTabCount {

    display:inline-block;

    min-width:18px;

    margin-left:4px;

    padding:1px 5px;

    border-radius:999px;

    background:#f4a261;

    color:#ffffff;

    font-size:.72rem;

    font-weight:900;

    text-align:center;
}

.dmRequestSubTabs {

    display:flex;

    gap:6px;

    margin:0 0 10px;
}

.dmSubTab {

    flex:1;

    padding:6px 8px;

    border:1px solid #d5e5e0;

    border-radius:999px;

    background:#eef4f4;

    color:#5b7480;

    font-size:.76rem;

    font-weight:800;

    cursor:pointer;
}

.dmSubTab.dmSubTabActive {

    background:#124e66;

    border-color:#124e66;

    color:#ffffff;
}

.dmFriendRequestCard {

    border-left:4px solid #7fa6af;
}

.dmUnopened {

    background:#fff8ef;
}

.dmOpenButton {

    width:100%;

    padding:9px 10px;

    border:1px dashed #f4a261;

    border-radius:8px;

    background:#ffffff;

    color:#b45f1d;

    font-size:.84rem;

    font-weight:900;

    cursor:pointer;
}

.dmOpenButton:hover {

    background:#fff3e2;
}

.dmOpenButton:disabled {

    opacity:.6;

    cursor:default;
}

.dmMessageActions {

    display:flex;

    gap:8px;

    align-items:center;
}

.dmReportButton {

    margin-top:8px;

    padding:5px 10px;

    border:1px solid #d5e5e0;

    background:#ffffff;

    color:#a12622;

    font-size:.74rem;

    font-weight:800;

    border-radius:6px;

    cursor:pointer;
}

.dmReportButton:hover {

    border-color:#a12622;
}

.dmReportButton:disabled {

    color:#5b7480;

    border-color:#d5e5e0;

    cursor:default;
}

.dmMessageReportButton {

    margin-left:auto;

    padding:3px 8px;

    font-size:.68rem;
}

#dmMessagesSection,
#dmRepliesSection,
#dmRequestsSection,
#dmGroupSection,
#dmSportsSection {

    display:flex;

    flex-direction:column;

    flex:1;

    min-height:0;
}

#dmGroupContent {

    padding:12px;

    flex:1;

    min-height:0;

    overflow-y:auto;

    overscroll-behavior:contain;
}

.dmGroupListHeader {

    display:flex;

    justify-content:flex-end;

    margin-bottom:10px;
}

.dmNewGroupButton {

    padding:6px 12px;

    border:none;

    border-radius:8px;

    background:#124e66;

    color:#ffffff;

    font-size:.8rem;

    font-weight:800;

    cursor:pointer;
}

.dmNewGroupButton:hover {

    opacity:.9;
}

.dmGroupCreateForm {

    display:flex;

    flex-direction:column;

    gap:10px;
}

.dmGroupFormLabel {

    margin-bottom:-4px;

    color:#33424a;

    font-size:.78rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.03em;
}

#dmGroupNameInput {

    width:100%;

    min-height:36px;

    margin:0;

    padding:8px 10px;

    border:1px solid #bfd6d0;

    border-radius:6px;

    font-size:.9rem;
}

.dmGroupMemberList {

    display:flex;

    flex-direction:column;

    gap:6px;

    max-height:220px;

    overflow-y:auto;

    padding:6px;

    border:1px solid #d5e5e0;

    border-radius:8px;
}

.dmGroupMemberOption {

    display:flex;

    align-items:center;

    gap:8px;

    padding:4px 2px;

    font-size:.86rem;

    color:#33424a;
}

.dmGroupActions {

    display:flex;

    justify-content:flex-end;
}

.dmGroupMembersRow {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin:8px 0;

    padding:6px 8px;

    border-radius:8px;

    background:#f4f6f8;
}

.dmGroupMembersList {

    color:#5b7480;

    font-size:.78rem;

    font-weight:600;
}

.dmAddMemberButton {

    flex-shrink:0;

    padding:4px 10px;

    border:1px solid #124e66;

    border-radius:999px;

    background:#ffffff;

    color:#124e66;

    font-size:.74rem;

    font-weight:800;

    cursor:pointer;
}

.dmAddMemberButton:hover {

    background:#eef4f4;
}

.dmAddMemberPanel {

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-bottom:8px;
}

.dmStarredLabel {

    color:#b45f1d;

    font-size:1.05rem;

    line-height:1;
}

.dmStarButton {

    margin-top:8px;

    padding:4px 9px;

    border:1px solid #d5e5e0;

    background:#ffffff;

    color:#b45f1d;

    font-size:1.05rem;

    line-height:1;

    border-radius:6px;

    cursor:pointer;
}

.dmStarButton:hover {

    border-color:#b45f1d;

    background:#fff6ec;
}

.dmStarButton:disabled {

    color:#5b7480;

    border-color:#d5e5e0;

    cursor:default;
}

#dmSportsContent {
    padding:12px;
    flex:1;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.dmSportsTabs {
    display:flex;
    gap:6px;
    padding:10px 12px 0;
}

.dmSportsTab {
    padding:6px 14px;
    border:1px solid #bfd6d0;
    border-radius:999px;
    background:#ffffff;
    color:#124e66;
    font-size:.82rem;
    font-weight:800;
    cursor:pointer;
}

.dmSportsTabActive {
    background:#124e66;
    border-color:#124e66;
    color:#ffffff;
}

.dmLeagueListHeader {
    justify-content:space-between;
    align-items:center;
    margin-top:6px;
}

.dmLeagueRow {
    color:inherit;
    text-decoration:none;
}

.dmLeagueMode {
    padding:2px 8px;
    border-radius:999px;
    background:#e8f3ef;
    color:#124e66;
    font-size:.7rem;
    font-weight:800;
    white-space:nowrap;
}

.dmLeagueInvite {
    cursor:default;
}

.dmLeagueInviteActions {
    display:flex;
    gap:8px;
    margin-top:8px;
}

.dmLeagueDecline {
    padding:6px 12px;
    border:1px solid #bfd6d0;
    border-radius:8px;
    background:#ffffff;
    color:#33424a;
    font-size:.8rem;
    font-weight:800;
    cursor:pointer;
}

.dmLeagueInput {
    width:100%;
    min-height:36px;
    margin:0;
    padding:8px 10px;
    border:1px solid #bfd6d0;
    border-radius:6px;
    font-size:.9rem;
    font-family:inherit;
    box-sizing:border-box;
}

.dmLeagueModes {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.dmLeagueModeOption {
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:10px;
    border:1px solid #d5e5e0;
    border-radius:8px;
    font-size:.84rem;
    line-height:1.4;
    color:#33424a;
    cursor:pointer;
}

.dmLeagueModeOption strong {
    display:block;
    color:#124e66;
}

.dmLeagueModeOption input {
    margin-top:3px;
}

.dmLeagueNote {
    color:#5b7480;
    font-size:.76rem;
    line-height:1.4;
}

.dmLeaguePicker {
    position:relative;
}

.dmLeagueInviteResults {
    left:0;
    right:0;
    top:calc(100% + 4px);
}

.dmLeagueInvitees {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.dmLeagueInvitees:empty {
    display:none;
}

.dmLeagueInvitee {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 4px 3px 10px;
    border-radius:999px;
    background:#e8f3ef;
    color:#124e66;
    font-size:.8rem;
    font-weight:800;
}

.dmLeagueInvitee button {
    width:20px;
    height:20px;
    min-height:0;
    padding:0;
    border:none;
    border-radius:50%;
    background:transparent;
    color:#124e66;
    font-size:1rem;
    line-height:1;
    cursor:pointer;
}

.dmLeagueSubmit {
    padding:9px 18px;
    font-size:.9rem;
}

.dmSportsSiteLink {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
    padding:10px 14px;
    border-radius:10px;
    background:#124e66;
    color:#ffffff;
    text-decoration:none;
    font-size:1.1rem;
    font-weight:800;
}

.dmSportsSiteLink:hover {
    opacity:.92;
}

.dmSportsSiteLink strong,
.dmSportsSiteLink small {
    display:block;
}

.dmSportsSiteLink strong {
    font-size:.92rem;
}

.dmSportsSiteLink small {
    color:#cfe3e8;
    font-size:.76rem;
    font-weight:700;
}