@charset "utf-8";

/* Basic Resets & Typography */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    vertical-align: baseline;
    word-wrap: break-word;
    color: #282a2d; /* Default text color */
    background: #f9f9f9; /* Default background */
    transition: background-color .3s;
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

a {
    color: #282a2d;
    outline: 0 !important;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #f1404b; /* Hover color from original theme */
}

p {
    color: #1d232b; /* Slightly different paragraph color from original */
    margin: 0;
    white-space: normal;
    word-break: break-all;
}

img {
    max-width: 100%;
    height: auto;
}

/* Basic Layout (Container overridden slightly by inline style) */
/* .container-fluid is handled by Bootstrap, but keep if specific overrides are needed */

/* Navbar specific (Mostly handled by Bootstrap, minimal overrides needed) */
/* .navbar, .navbar-light, .bg-light are Bootstrap classes */
/* .nav, .justify-content-end, .nav-item, .nav-link, .active are Bootstrap classes */
/* Keep logo img style if needed, but handled by attributes/Bootstrap */

/* Title and Time */
/* h1 and #time have inline styles, no specific CSS needed unless overriding */

/* Row for News Container */
/* .row is handled by Bootstrap */

/* Columns for Cards */
/* .col-xs-12, .col-md-6, .col-lg-4 are handled by Bootstrap */

/* Card Styling (Based on original theme's overrides/customizations) */
.card {
    background: #fff;
    border-width: 0;
    margin-bottom: 1rem; /* Default Bootstrap margin, keep */
    box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, .2); /* Original theme shadow */
    transition: background-color .3s;
    position: relative; /* Needed for potential absolute positioning inside */
    display: -ms-flexbox; /* Bootstrap flex */
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125); /* Default Bootstrap border */
    border-radius: .25rem; /* Default Bootstrap radius */
}

/* Custom card class */
.hot-card {
    /* Add specific styles for hot-card if different from .card */
    /* Currently seems identical to .card basics */
}

.mb-2 { /* Bootstrap utility, keep if potentially overridden */
    margin-bottom: .5rem !important;
}

.card-header {
    padding: .75rem 1.25rem; /* Bootstrap default */
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03); /* Bootstrap default */
    border-bottom: 1px solid rgba(0, 0, 0, .125); /* Bootstrap default */
    /* Overridden by inline style: background-color:transparent;border-bottom:0 */
}

.widget-header { /* Custom class used with card-header */
    /* Add specific styles if needed */
}

.d-flex { /* Bootstrap utility */
    display: -ms-flexbox !important;
    display: flex !important;
}

.mr-2 { /* Bootstrap utility */
    margin-right: .5rem !important;
}

.ml-auto { /* Bootstrap utility */
    margin-left: auto !important;
}

.d-md-block { /* Bootstrap utility */
    @media (min-width: 768px) {
        display: block !important;
    }
}

.text-xs { /* Font size utility from original theme */
    font-size: .75rem !important;
}

.text-sm { /* Font size utility from original theme */
    font-size: .875rem !important;
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem; /* Bootstrap default */
}

.pb-3 { /* Bootstrap utility */
    padding-bottom: 1rem !important;
}

.pt-0 { /* Bootstrap utility */
    padding-top: 0 !important;
}

.pt-2 { /* Bootstrap utility */
    padding-top: .5rem !important;
}

.mb-n2 { /* Bootstrap utility */
   margin-bottom: -.5rem !important;
}

.overflow-auto { /* Bootstrap utility */
    overflow: auto !important;
}

.hot-card .hot-body { /* Specific height for the scrollable area */
    height: 365px; /* Adjust as needed */
}

/* News Item Styling within Card Body */
.hot-rank {
    width: 18px;
    border-radius: 4px;
    background: rgba(124, 124, 124, 0.3);
    display: inline-block;
    color: inherit; /* Default color unless overridden */
    font-weight: normal; /* Ensure it's not bold */
    line-height: normal; /* Ensure default line height */
    vertical-align: baseline; /* Ensure proper alignment */
}

.text-center { /* Bootstrap utility */
    text-align: center !important;
}

.hot-rank-1 {
    color: #fff;
    background: #f1404b; /* Red for #1 */
}

.hot-rank-2 {
    color: #fff;
    background: #c56831; /* Orange/Brown for #2 */
}

.hot-rank-3 {
    color: #fff;
    background: #b89e2c; /* Gold/Yellow for #3 */
}
/* Styles for hot-rank-4, 5, etc. will inherit .hot-rank default background */

.ml-2 { /* Bootstrap utility */
    margin-left: .5rem !important;
}

.hot-card .hot-heat { /* For the time display on the right */
    white-space: nowrap; /* Prevent time from wrapping */
}

/* Card Footer Section Styles */
.text-muted { /* Bootstrap utility */
    color: #6c757d !important;
}

.text-muted a { /* Make links within muted text also muted */
    color: #6c757d;
}
.text-muted a:hover {
    color: #5c656d; /* Slightly darker hover from original */
}

.flex-fill { /* Bootstrap utility */
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
}

/* Icon styling (using Bootstrap Icons class .bi) */
/* Basic icon styles are provided by the BI stylesheet */
/* Add specific overrides if needed */
.bi {
  display: inline-block;
  vertical-align: -.125em; /* Align icons nicely with text */
}
/* Ensure refresh icon link looks okay */
#hot-lod- { /* Selects all refresh links by partial ID */
    color: #6c757d; /* Muted color */
    text-decoration: none;
}
#hot-lod-:hover {
    color: #5c656d; /* Darker on hover */
}


/* Grey Mode (Only keep if it provides specific overrides for used elements) */
/* The body tag has class="io-grey-mode". */
/* Base body background is already #f9f9f9, which is greyish. */
/* Check if any specific overrides for cards, text etc. were intended */
/* .io-grey-mode body { ... } */ /* Redundant with base body */
/* .io-grey-mode .card { ... } */ /* Check original - doesn't seem to have specific overrides */
/* If no specific overrides for used elements, this class might be for JS or future use. */
/* Keeping the body background rule for clarity, though it might be redundant */
body.io-grey-mode {
    background: #f9f9f9;
}


/* Webkit Scrollbar Styles (Optional Cosmetic) */
@media only screen and (min-device-width: 768px) {
    ::-webkit-scrollbar-thumb {
        background-color: rgba(130, 130, 130, .5);
        -webkit-border-radius: 4px;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: #f1404b; /* Theme color on hover */
        -webkit-border-radius: 4px;
        border-radius: 4px;
    }
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    ::-webkit-scrollbar-thumb:active {
        background-color: #f1404b; /* Theme color when active */
        -webkit-border-radius: 4px;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-corner {
        background: rgba(0, 0, 0, 0);
        border-radius: 0 0 8px 0;
    }
    ::-webkit-scrollbar-button {
        background-color: rgba(0, 0, 0, 0);
        height: 2px;
        width: 2px;
    }
}