body {
    background-color: #fbfbfb;
}

.moderationStatusLabel,
button, input[type="submit"] {
    cursor: pointer;
    margin-left: 0;
    background-color: #2f6ca8;
    color: #fdfdfd;
    border: 0;
    padding-bottom: 3px;
    padding-top: 2px;
    margin-top: 2px;
    display: inline-block;
}

.moderationStatusLabel:hover,
button:hover {
    background-color: #3B5998;
}

button::-moz-focus-inner {
    /* makes buttons  have the same size in chrome and ff */
    border:0;padding:0;margin:0;
}

img, iframe, object {
    border: 0;
    max-width: 90%;    
}

img {
    height: auto !important;
}

main {
    max-width: 50em;
    margin: auto;
}

header.navbar {
    padding: 1rem;
    background:
    white;
    border-bottom: 1px solid
    #eaeaea;
    z-index: 100;
}

#message {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    box-shadow: 0 0 5px black;
    -webkit-animation: message 5000ms linear forwards;
    animation: message 5000ms linear forwards;
}

@keyframes message {
    0% { background-color: #8DCC14; opacity: 1;}
    10% { background-color: #F7F7F7; opacity: 1; }
    90% { background-color: #F7F7F7; opacity: 1; }
    100% { background-color: #F7F7F7;opacity: 0; }
}

@-webkit-keyframes message {
    0% { background-color: #8DCC14; opacity: 1;}
    10% { background-color: #F7F7F7; opacity: 1; }
    90% { background-color: #F7F7F7; opacity: 1; }
    100% { background-color: #F7F7F7;opacity: 0; }
}


article {
    max-width: 50em;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

summary {
    cursor: pointer;
}

#widget {
    float: right;
    position: relative;
    right: 3em;
    padding-top: 0.5em;
}

#widget input {
    max-width: 10em;
    color: #c9c9c9;
}

#widget input[type="email"] {
    background: #3c6899;
    color: white;
    border: 1px solid #4a7c9c;
    padding: 0.3em;
    border-radius: 3px;
}

#title a:visited {
    color: #2f6ca8;
}

#title h1 {
    display: inline;
}

#title .adminAction {
    vertical-align: text-bottom;
}

#title .adminAction button {
    vertical-align: text-bottom;
}

.editor {
    width: 50em;
    max-width: 95%;
    text-align: right;
}

.entryTitleInput {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 100%;
    max-width: 100%;
}
.entryInput {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
}

.editorSubmitButtons {
    display: inline-block;
    vertical-align: bottom;
}

.entryTagInput {
    float: left;
    max-width: 100%;
}

.entryPublish, #previewButton {
    width: 5em;
    display: block;
}

.cancel {
    width: 5em;
    margin-right: 0.5em;
}

#preview {
    border: 1px dashed rgba(0, 0, 0, .3);
    opacity: 0.8;
    margin-top: 1em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    text-align: left;
}

.markupButton {
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-right: 2px;
    display: inline-block;
    font-size: 18px;
    font-family: serif;
    margin-bottom: 0;
}

.boldButton {
    font-weight: bold;
}

.italicButton {
    font-style: italic;
}

.imgButtonInput {
    position: absolute;
    left: -9999em
}

.buttonBar {
    display: block;
    text-align: left;
}

#welcome, #designs {
    font-size: 0.9em;
}

.avatar {
    float: left;
    margin-right: 0.5em;
}

.entryTitle {
    clear: both;
    margin-top: 2em;
    margin-bottom: 0.83em;
}

.entry footer {
    font-style: italic;
    font-size: 0.9em;
    margin-top: 0.83em;
}

.entry footer time {
    margin-right: 1em;
}

.tags {
    float: right;
    padding-right: 1em;
}

#entryModerationToggle {
    margin-top: 1em;
    text-align: center;
}

#entryModerationToggle div {
    display: inline-block;
    background-color: #8496bc;
    border: 2px solid #8496bc;
    padding-left: 0.1em;
}

#entryModerationToggle div span {
    background-color: #EAECF1;
    padding: 0.3em;
}

.moderationStatus {
    display: none;
    visibility: hidden;
    margin: 0;
}

.moderationStatusLabel {
    padding-left: 0.3em;
    padding-right: 0.3em;
    border: 2px solid #8496bc;
}

.moderationStatusLabel:hover {
    border: 2px inset grey;
}

.moderationStatus:checked + .moderationStatusLabel {
    border: 2px inset #8DCC14;
}

#comments {
    padding: 0;
    list-style-type: none;
    margin-top: 3em;
    margin-bottom: 1em;
}

.comment {
    margin-bottom: 1em;
    margin-top: 2em;
}

.comment footer {
    margin-top: 0.3em;
}

#refComment {
    position: absolute;
    background-color: #F7F7F7;
    border: 1px solid #97bc84;
    padding: 4px;
}

#refComment .adminOptions {
    display: none;
    visibility: hidden;
}

.comment_moderate .commentBody, .comment_moderate footer  {
    opacity: 0.7;
}

.commentForm {
    margin-top: 2em;
}

.commentForm > input,
.commentFormMail > input {
    width: 22em;    
}

.commentForm > input {
    display: block;
}

.commentFormTel {
    display: none !important;
    visibility: hidden;
}

.commentInput {
    width: 33em;
    min-height: 8em;
}

.commentFormSubmit {
    margin-left: 28em;
    min-width: 5em;
    margin-bottom: 1em;
}

.cancel + .commentFormSubmit {
    margin-left: 22.5em;
}

#subscribe {
    display: inline;
    margin-left: 1em;
}

#subscribe span {
    font-size: 90%;
}

#subscribe span,
#subscribe input {
    vertical-align: text-bottom;
} 

#browser {
    margin-top: 1em;
}

#browseNext {
    float: right;
}

@-webkit-keyframes fadeOut {
  0% { opacity: 1;}
  100% { opacity: 0; }
}
@keyframes fadeOut {
    0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1; }
    100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0; }
}

.fadeout {
    animation: fadeOut 300ms linear forwards;
    -webkit-animation: fadeOut 300ms linear forwards;
}


@-webkit-keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1; }
}

@keyframes fadeIn {
    0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0; }
    100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1; }
}

.fadein {
    animation: fadeIn 300ms linear forwards;
    -webkit-animation: fadeIn 300ms linear forwards;
}

.adminOptions form {
    display: inline-block;
}

footer #search {
    margin-top: 3em;
}

#search {
    display: inline-block;
}

#search input {
    margin-right: 0;
    border-right: 0;
    
}

#search button {
    box-sizing: boder-box;
    padding-bottom: 3px;
    padding-top: 2px;
    position: relative;
    right: 5px;
    bottom: 1px;
}

.highlight {
    animation: highlightBox 500ms ease-out forwards;
    -webkit-animation: highlightBox 500ms ease-out forwards;
    background-color: #8DCC14;
}

@-webkit-keyframes highlightBox {
  0% { background-color: #8DCC14;}
  100% { background-color: #F7F7F7; }
}

@keyframes highlightBox {
    0% { background-color: #8DCC14; }
    100% { background-color: #F7F7F7; }
}

.pace .pace-progress {
    background: #ff7200;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    height: 2px;

    -webkit-transition: width 1s;
    transition: width 1s;
}

.pace-inactive {
    display: none;
}

#logout {
    display: inline-block;
}


#logonav img {
    vertical-align: middle;
}

tbody tr:nth-last-child(2) {
    background: #2f6ca8;
    color: white;
}

tbody tr:last-child {
   background: #e3e3e3;
}

#benchmarkCompareList {
    margin-bottom: 2rem;
}

#browser {
	margin-top: 1em;
}

.btn-link.current {
    color: #0075de;
}

#frontpage main {
    display: grid;
    grid-column-gap: 10%;
    grid-template-columns: 40% 40%;
}

#frontpage h1 {
    font-size: 1rem;
}

#frontpage img {
    display: block;
    max-width: 100%;
    margin: auto;
    margin-bottom: 0.5rem;
}

#frontpage main article:first-of-type {
    grid-column: 1 / span 2;
}

#frontpage #browser {
    grid-column: 1 / span 2;
}

#searchresults {
    padding: 1em;
}

#searchresults ol {
    list-style-type: none;
    margin-left: 0;
}

#searchresults li {
    margin-top: 2rem;
}

@media (prefers-color-scheme: dark) {
    body, header, header.navbar {
        color: #dcdfe5;
        background-color: #37383a;
    }

    header.navbar {
        border-bottom: 1px solid #B5BAC1;
    }

    header a.btn, header a.btn:visited {
        color: #7a99d8
    }
     

    a, a:visited, .btn.btn-link {
        color: #7a99d8;
    }

    a:hover, a:active, a:focus, .btn.btn-link.active, .btn.btn-link:active, .btn.btn-link:focus, .btn.btn-link:hover {
        color: #99AFDD;
    }

    .mainhero {
        background: linear-gradient(0deg, rgb(32, 52, 66) 0%, rgb(66, 82, 114) 100%);
    }

    .card, .note, .note::before {
        background: #06062a;
    }
    .note::before {
        color: #6D8ED2;
    }

    img {
        opacity: .75;
        transition: opacity .5s ease-in-out;
    }

    img:hover {
        opacity: 1;
    }

    .navbar-brand img {
        filter:  invert();
        opacity: 1;
    }

    #hardware li:nth-child(2n+1), .table.table-striped tbody tr:nth-of-type(2n+1) {
        background: #514E5A;
    }

    .btn, .btn:visited {
        background: #d2d4df;
        box-shadow: none;
        color: #4c70ba
    }
    .btn.unavailable {
        color: darkgrey;
    }

    .btn-link {
        box-shadow: none;
    }

    .btn.btn-primary {
        background: #3b5998;
        border-color: #37538d;
        color: #fff;
    }
    
    .card, .mainhero .card {
        box-shadow: 5px 5px 11px #75819a, -5px -5px 11px #75819a;
        border: .05rem solid #B5BAC1;
    }

    .form-input, input, textarea {
        border: .05rem solid #5e6b80;
    }

    .form-input, .input-group .input-group-addon, input, textarea {
        background: #21325a;
        color: #b7becb;
    }

    .form-input:focus, .form-input:not(:placeholder-shown):invalid:focus {
        background: #0F1930;
    }

    .form-select:not([multiple]):not([size]) {
        background: #21325a url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem
    }

    input[type=number] { 
        -moz-appearance: textfield;
        appearance: textfield;
        margin: 0; 
    }

    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    #countryChanger a {
        opacity: 0.3;
    }
    #countryChanger .active {
        opacity: 0.7;
    }

    .apexcharts-canvas {
        filter: invert();
    }

    #priceDetails img, #recommendation img:not([src=""]) {
        padding: 0.2em;
        background: white;
        border: 2px solid black;
    }
    tbody tr:last-child {
        background: #585858;
    }
}
}