.scroll {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

.information_card {
    opacity: 90%;
    margin: -1px 0;
    background: #ddd;
        border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 1px;
    padding: 20px 0 20px;
    color: #000;
    width: 100%;
    height: 100px;
    position: relative;
    transition: transform .3s , box-shadow .3s;
    cursor: pointer
}

.information_header {
    display: flex
}

.information_date,input[type="datetime-local"] {
    font-size: 15px;
    color: #888;
    margin: 0;
    padding: 0
}

.new-status {
    color: red!important
}

.edit-status {
    background: #095!important
}

.information_status {
    color: #f60!important
}

.important_highlight {
    background: #fed!important
}

.limited_highlight {
    background: #dff!important
}

.information_content,.information_content input[type="text"] {
    font-size: 12px;
    white-space: nowrap;
    margin-top: -100px;
    height: 130px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden
}

.information_content h1 {
    border: none!important
}

.information_tags {
    display: flex;
    align-items: center;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: hidden
}

.information_tag {
    background: #1e90ff;
    color: #fff;
    padding: 4px;
    margin: 0 10px;
    border-radius: 4px;
    font-size: 10px;
    display: flex;
    text-shadow: 1px 1px 5px #000;
    transition: background .3s
}

@media (prefers-color-scheme: dark) {
    body {
        background:#111;
        color: #fff
    }

    .information_card {
        background: #444;
        color: #fff
    }

    .important_highlight {
        background: #654!important
    }

    .limited_highlight {
        background: #465!important
    }

    .info-section {
        background: #444!important
    }

    .info-section article {
        color: #fff!important
    }
}

.infoNull {
    border-left: 4px solid #999
}

.infoNotice {
    border-left: 4px solid #f1a1e3
}

.infoUp {
    border-left: 4px solid #b8b8f8
}

.infoOff {
    border-left: 4px solid #ffe89e
}

.infoBlog {
    border-left: 4px solid #08d6c5
}

.infoDri {
    border-left: 4px solid #ee4caa
}

.infoGam {
    border-left: 4px solid #f55
}

.infoYt {
    border-left: 4px solid #cd201f
}

.infoFre {
    border-left: 4px solid #80eb74
}

.infoAmeb {
    border-left: 4px solid #007950
}

.infoMusic {
    border-left: 4px solid #ebb874
}

.infoSe {
    border-left: 4px solid #56dce3
}

.infoScreen {
    border-left: 4px solid #60e19e
}

#sortOptions {
    margin-bottom: 10px
}

.sort-btn {
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ccc;
background: rgba(240, 240, 240, 0.2);
border: 1px solid rgba(240, 240, 240, 0.3);
    cursor: pointer;
    color: #000;
    border-radius: 20px
}



.sort-btn:hover {
    background-color: #00b4b6;
    color: #fff
}

.info-section {
    word-wrap: break-word;
    white-space: normal;
    width: 100%;
    overflow-y: auto;
    height: 55vh;
    margin: 70px auto;
    background: #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,.1)
}

.info-section article p {
    padding: 10px
}

@media (prefers-color-scheme: dark) {
.sort-btn {
color: #fff !important;
}