*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    display: block; /* det här är ändå det normala numera, dvs inte att bilder ligger inline i text... gör iaf att man slipper konstiga line-heights här och var */
}

    img.normal { /* dåligt namn.. men det är den klass som min egna markdown genererar nu iaf... */
        width: 100%;
    }

@font-face {
    font-family: San Francisco;
    src: url("/@res/7B9KpGi1GKYkC5GBE7uRMdxln49Oupt5MCNzHHsdJE4") format("opentype");
}

body {
    font-family: San Francisco, Arial;
    font-size: 11pt;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background: #282828;
    color: #ccc;
    overflow-x: hidden;
}

strong {
    color: #eee;
}

.content {
    max-width: 640px;
    position: relative;
    padding: 20px;
    padding-top: 20px;
}

[contenteditable]:focus {
    outline: 0;
}

ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

p {
    white-space: pre-wrap;
    margin: 0;
    padding: 0;
}

    p:first-child {
        margin-top: 0px;
    }

    p:last-child {
        margin-bottom: 0px;
    }

div.carousel {
    position: relative;
    clip: unset;
    width: 100%;
    aspect-ratio: 16/9;
    margin-top: 20px;
    margin-bottom: 20px;
    background: rgba(0,0,0,0.15);
}

    div.carousel > div.carousel-image:first-child {
        display: block;
    }

    div.carousel > input[type=button].carousel-button:first-of-type {
        left: -20px;
    }

    div.carousel > input[type=button].carousel-button:last-of-type {
        right: -20px;
    }

div.carousel-image {
    height: 100%;
    width: 100%;
    position: relative;
    display: none;
}

input[type=button].carousel-button {
    background: rgba(0,0,0,0.15);
    color: #B0B0B0;
    position: absolute;
    top: calc(50% - 50px);
    right: 5px;
    cursor: pointer;
    border: 0px;
    height: 100px;
    z-index: 900;
    visibility: hidden;
    font-size: 20pt;
    width: 20px;
}

    input[type=button].carousel-button:hover {
        background: rgba(0,0,0,0.8);
    }

.overlay {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
}

.closeButton {
    width: 24px;
    height: 24px;
    background-image: url('/@res/kCVqXjvH2us8MYWZRMl6LaYnpCE2-H0R_-EXs32Q9To');
    cursor: pointer;
    opacity: 0.2;
    position: absolute;
    right: 0px;
    top: -34px;
}

    .closeButton:hover {
        opacity: 0.4;
    }

.shortcutImage {
    cursor: pointer;
}

.shortcutImageSelected {
    filter: brightness(110%);
}

/*.shortcutImage:hover {
        filter: brightness(110%);
    }*/

.container {
    z-index: 999;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    padding: 0;
    margin: 0;
    box-shadow: rgb(255,255,255,0.8) 0px 0px 40px;
}

.attachments {
    font-size: 12pt;
    margin-top: 30px;
    border-radius: 5px;
    padding: 10px;
    background: #222;
    box-shadow: rgb(0,0,0,0.3) 0px 0px 10px inset;
}

.dateTime {
    opacity: 0;
}

.paginator-link {
    display: inline-block;
    text-align: center;
    background: #DDEEFF;
    border: 1px solid #6677AA;
    border-radius: 20px;
    font-size: 15pt;
    cursor: pointer;
    margin-right: 5px;
    opacity: 0.7;
    padding: 3px 6px 3px 6px;
}

    .paginator-link:hover {
        opacity: 1;
    }


.paginator-link-current {
    background: #6677AA;
    color: white;
}

.fadedLink {
    color: #B0B0B0;
    line-height: 20px;
    font-size: 10pt;
    text-decoration: none;
}

    .fadedLink:hover {
        color: #808080;
    }

.homelink {
    display: inline-block;
    margin-bottom: 30px;
    font-size: 13pt;
    font-weight: bold;
    color: #D0D0D0;
    text-decoration: none;
}

    .homelink:hover {
        color: #C0C0C0;
    }

img.expanded {
    cursor: zoom-out;
    object-fit: contain;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgb(0,0,0,0.5);
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
}

.supertag {
}

    .supertag:hover {
    }

    .supertag > span.tag:not(:only-child):first-child {
        margin-right: 0px;
        border-radius: 3px 0px 0px 3px;
    }

    .supertag > span.tag:not(:only-child):last-child {
        border-radius: 0px 3px 3px 0px;
        border-left: 1px solid black;
        background: #248;
    }

span.tag {
    font-size: 10pt;
    padding: 3px 6px 3px 6px;
    border-radius: 3px;
    background: #248;
    opacity: 0.5;
    color: white;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 5px;
}

span.add-tag {
    background: #248;
}

span.tag:hover {
    opacity: 1;
}

.category {
    line-height: 33px;
    font-size: 16px;
    background: #282828;
    padding: 7px 10px 7px 10px;
    white-space: nowrap;
    border-radius: 10px 10px 0px 0px;
}

.category-selected {
    font-weight: bold;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}

.linkIcon {
    cursor: pointer;
    position: absolute;
    opacity: 0.5;
    width: 32px;
    height: 32px;
    right: 10px;
    top: -42px;
    background-image: url('/@res/6F--zR5FRrb3q_noU2nw6ao5Qy5dzOp7WT3-SDJm2Hk');
    background-repeat: no-repeat;
    background-size: contain;
}

    .linkIcon:hover {
        opacity: 1;
    }

.playIcon {
    cursor: pointer;
    position: absolute;
    opacity: 0.5;
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    background-image: url('/@res/lvIIQqYmh-nU89RqyoJ5hMelPLh1eDiVYSIZVKTNoc0');
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 5px rgba(0,0,0,1))
}

    .playIcon:hover {
        opacity: 1;
    }

.title {
    font-size: 22pt;
    font-weight: bold;
    color: #eee;
    text-decoration: none;
}

    .title:hover {
        text-decoration: none;
    }

.title-featured {
    font-size: 28pt;
    font-weight: bold;
    color: #eee;
    text-decoration: none;
}

    .title-featured:hover {
        text-decoration: none;
    }

.postText {
    margin-top: 10px;
    font-size: 12pt;
    color: #eee;
    overflow-y: hidden;
    white-space: pre-wrap;
}

.postTextFaded {
    max-height: 150px;
    -webkit-mask-image: linear-gradient(to bottom, black 130px, transparent 100%);
    mask-image: linear-gradient(to bottom, black 140px, transparent 100%);
}

    .postTextFaded:focus {
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

.postTextFadedUnfeatured {
    max-height: 50px;
    -webkit-mask-image: linear-gradient(to bottom, black 30px, transparent 100%);
    mask-image: linear-gradient(to bottom, black 30px, transparent 100%);
}

    .postTextFadedUnfeatured:focus {
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

.hasChanges {
    background: rgba(255,0,0,0.05);
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
    display: block;
}

.pageCount {
    color: #B0B0B0;
    position: absolute;
    bottom: -20px;
    right: 0px;
    line-height: 20px;
    font-size: 10pt;
}

.item-header {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    font-size: 16pt;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.8);
    padding: 3px 5px 3px 5px;
}

.caption {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    font-size: 10pt;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.8);
    padding: 3px 5px 3px 5px;
}

.published {
    font-size: 10pt;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
    margin-top: 5px;
}

.blogTitle {
    transform: translateX(-100%);
    position: fixed;
    opacity: 0.03;
    font-weight: bold;
    cursor: pointer;
}

    .blogTitle > a {
        display: inline-block;
        text-decoration: none;
        text-align: right;
        transform-origin: right top;
        font-size: 65pt;
        transform: rotate(-90deg);
    }

    .blogTitle:hover {
        opacity: 0.1;
    }

.login_icon {
    opacity: 0.1;
    width: 32px;
    height: 32px;
}

    .login_icon:hover {
        opacity: 0.5;
    }

.footer {
    margin-top: 50px;
    opacity: 0.6;
    font-size: 9pt;
}

.agenda-header:only-child {
    display: none;
}

a {
    color: #eee;
    text-decoration: none;
}

    a:hover {
        color: #eee;
        text-decoration: underline;
    }

.body a {
    text-decoration: underline;
}

.preamble {
    color: #ccc;
    font-size: 12pt;
}

.preamble a {
    text-decoration: none;
}

.preamble[contenteditable="False"] a:hover {
    cursor: pointer;
    text-decoration: underline;
}

.preamble[contenteditable="True"]:focus a {
    text-decoration: none;
    color: #57A;
}

.post {
    position: relative;
    border-bottom: 1.5px solid rgba(0,0,0,0.2);
    border-top: 1.5px solid rgba(255,255,255,0.05);
    padding-top: 20px;
    padding-bottom: 20px;
    /*overflow: hidden; införde det här för att få bakgrundsbilder att klippa till en post-container men det gjorde att även knappar och annat klipptes bort */
}

img.poster {
    z-index: -100;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
    max-width: 100%;
}

img.background {
    z-index: -100;
    opacity: 0.3;
    position: absolute;
    right: -50px;
    top: 0px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}

img.thumbnail {
    width: 250px;
    height: 250px;
    float: left;
    margin-top: 3px;
    margin-right: 15px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
    border-radius: 3px;
    object-fit: cover;
    cursor: zoom-in;
}

.soundCloudPoster {
    position: relative;
    max-width: 300px;
    aspect-ratio: 1;
    margin-top: 20px;
    box-shadow: rgba(0,0,0,0.8) 0px 0px 10px;
}

.soundCloudWidget {
    width: 100%;
    aspect-ratio: 1;
    margin-top: 20px;
    box-shadow: rgba(0,0,0,0.8) 0px 0px 10px;
}

.soundCloudWidgetSmall {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.youTubeWidget {
    width: 100%;
    aspect-ratio: 16/9;
    margin-top: 20px;
    box-shadow: rgba(0,0,0,0.8) 0px 0px 10px;
}

.rating {
    display: inline-block;
    font-size: 16pt;
    color: #EEAA22;
    cursor: default;
}

    .rating:hover {
        opacity: 1;
    }

@media only screen and (max-width: 480px) {
    .title {
        font-size: 16pt;
    }

    .title-featured {
        font-size: 20pt;
    }

    .footer {
        font-size: 8pt;
    }

    img.thumbnail {
        max-width: 170px;
        max-height: 110px;
        filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
    }

    .rating {
        font-size: 12pt;
    }

    span.tag {
        font-size: 8pt;
    }

    .published {
        font-size: 8pt;
    }
}
/*@keyframes expand {
    from {
        background-color: red;
    }

    to {
        background-color: yellow;
    }
}*/

.sidepanel {
    display: none;
}

@media only screen and (min-width: 1280px) {
    .sidepanel {
        display: block;
    }
}

figure > img {
    width: 100%;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
}

/*div.external-link {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEzIiBmaWxsPSIjMWE3M2U4Ij48cGF0aCBkPSJNMTkgMTlINVY1aDdWM0g1YTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGMxLjEgMCAyLS45IDItMnYtN2gtMnY3ek0xNCAzdjJoMy41OWwtOS44MyA5LjgzIDEuNDEgMS40MUwxOSA2LjQxVjEwaDJWM2gtN3oiLz48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDBWMHoiLz48L3N2Zz4=);
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}*/

pre {
    border-radius: 10px;
}

.scrollbar {
    cursor: auto;
}

.scrollbar-secondary::-webkit-scrollbar-track {
    background-color: #2E2E2E;
    border-radius: 10px;
}

.scrollbar-secondary::-webkit-scrollbar {
    width: 12px;
    background-color: #2E2E2E;
}

.scrollbar-secondary::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #555;
}