body {
    font-family: 'Roboto', Tahoma, sans-serif;
}

/* Special class that can be added/removed to change the cursor to waiting symbol (desktop browser only) */
body.waiting * {
    cursor: wait;
}

.kbPage {
    margin-top: -20px;
    overflow-y: auto;
    height: calc(100vh - 58px);
}

.flex {
    display: flex;
}


.kbPageAnchor {
    padding-top: 60px;
}

.kbSidebarLinkText {
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

#kbSidebarHeader {
    display: none;
}

#kbSidebarHeaderTitle {
    width: 100%;
    text-align: center;
    font-size: small;
    font-weight: bold;
    color: white;
}

#sbs {
    display: none;
    margin-left: 10px;
    margin-right: 3px;
    width: 40%;
}

#searchBar {
    font-size: large;
    background-color: white;
}

.searchBarButton {
    height: 45px;
    margin-top: -4px;
    margin-right: 5px;
}

/*.adminContainer {
    background-color: transparent;
}


.adminDropdown {
    right: 1px;
    min-width: 225px;
}

/* Override link coloring (visited, etc.) for the admin button dropdown container
.adminDropdown a {
    color: inherit;
}

#adminButton {
    margin: 0px;
}*/

#helpButton {
    /*display: none;*/
    margin-left: 10px;
}

#favoritesButton {
    margin-left: 5px;
}

#addArticleButton {
    /*display: none;*/
    margin-right: 2%;
}

.contentPanel {
    margin-top: 55px;
    margin-left: 34%;
    margin-right: 1%;
}

.contentOnlyHeader {
    font-size: 22px;
    font-weight: bold;
}

.contentOnlyPanel {
    margin-left: 10%;
    margin-right: 5%;
    font-size: 18px;
}

.modalCloseButton {
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 16px;
}

#sidebarToggle {
    display: none;
    margin-left: 2px;
}

#helpButtonText {
    display: inline;
}

#favoritesButtonText {
    display: inline;
}

#addArticleButtonText {
    display: inline;
}

#lastEditText {
    font-weight: bold;
    font-size: 14px;
}

.contentHeader {
    font-size: x-large;
    font-weight: bold;
    padding: 10px;
}

.contentControlButton {
    margin-right: 16px;
}

#contentHeaderFav {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* white-space: Preserves white space characters in the article body while wrapping text appropriately.  I did this to eliminate processing the body 
   to replace CR/LF with <br>, as well as the growing replacement list of elements that was needed to reduce large amounts of white space.
   overflow-wrap: Breaks long strings without spaces in arbitrary place to allow it to wrap on the screen and prevent horizontal scrolling.  Useful on mobile.
*/
.contentBody {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Reduce white space bloat in the displayed articles for headers and paragraphs */
.contentBody h1,
.contentBody h2,
.contentBody h3,
.contentBody h4,
.contentBody h5,
.contentBody h6,
.contentBody p {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* This is a little bit of CSS magic to eliminate spacing between list items that occurs because the contentBody class is using pre-wrap for white space. Each
   list item has it's font size fixed while the parent lists get set to zero. */
.contentBody ul,
.contentBody ol {
    font-size: 0px;
}

.contentBody li {
    font-size: 18px;
}

/* Sizes images in the content body proportionally up to a maximum size of 100% width of the content body - helps make images responsive on PCs and mobile devices */
.contentBody img {
    max-width: 100%;
    height: auto;
}

/* Blockquotes need a little formatting love as the standard look from W3.CSS is a bit ugly */
.contentBody blockquote {
    width: auto;
    background-color: #f1f1f1;
    padding: 4px 8px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-left: 4px solid lightgrey;
    white-space: normal;
}

/* Table formatting adjustments for supporting Showdown pipe tables while preserving most other settings for existing tables in the KB */
.contentBody table {
    font-size: 1em;
}

.contentBody td {
    padding-right: 10px;
}

.contentCategoryChain {
    font-weight: bold;
    font-size: small;
    margin-top: -2px;
}

.searchResultsHeader {
    font-size: x-large;
    font-weight: bold;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: -5px;
}

.searchText {
    display: inline;
    color: #71A235;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.searchResultsCount {
    font-weight: bold;
}

.searchResult {
    font-weight: bold;
    white-space: normal;
}

.kbCategory {
    font-family: 'Roboto', Tahoma, sans-serif, FontAwesome;
    font-weight: bold;
    height: auto;
    overflow: hidden;
    cursor: pointer;
}

.kbSelectedArticle {
    background-color: #8BC24A;
    color: black;
}

.kbArticleLink {
    font-weight: bold;
}

#kbArticleReview {
    margin-bottom: -16px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#kbReviewList {
    margin-top: 16px;
    margin-bottom: -16px;
}

#kbCompleteReviews {
    font-weight: bold;
    margin-top: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.kbHeaderPendReviews {
    margin-top: 10px;
    margin-bottom: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#kbPendAssignReviewList {
    margin-bottom: 30px;
}

#kbPendAddedReviews {
    margin-top: 50px;
}

.kbReviewLinkButton {
    color: darkblue;
    text-decoration-line: underline;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 1px;
    padding-right: 1px;
}

.kbReviewLink {
    font-weight: bold;
}

.kbReviewDialogSaveButton {
    width: 100%;
    margin-top: 4px;
}

#kbReviewNotes {
    resize: vertical;
    min-height: 10%;
    max-height: 50%;
}

.kbReviewError {
    font-weight: bold;
    color: red;
}

#kbRevisionLogHeader {
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 4px;
}

#kbSidebar a,
#kbSidebar a:link,
#kbSidebar a:visited {
    text-decoration: none;
}

#searchBar a,
#searchBar a:link,
#searchBar a:visited {
    text-decoration: none;
}

/* Search input box*/
#s {
    display: inline;
    margin-right: 5px;
    width: 30%;
}

/* Search language combo */
#slang {
    width: 8%;
}

/* Search language option list */
#slang option {
    font-size: large;
}

#kbAddArticleButton {
    width: 50px;
}

.contentControls a,
.contentControls a:link,
.contentControls a:visited {
    text-decoration: none;
}

/* Helper class for using in an article to give an image standard formatting space */
.kbContentImage {
    margin-top: 12px;
    margin-bottom: 12px;
}

#kbEditorFormButtons a,
#kbEditorFormButtons a:link,
#kbEditorFormButtons a:visited {
    text-decoration: none;
}

.indentL1,
.indentL2,
.indentL3,
.indentL4 {
    margin-left: 20px;
}

.kbEditor {
    font-size: 16px;
    margin-top: -30px;
    overflow-y: auto;
    height: calc(100vh - 52px);
}

.kbEditor label {
    display: block;
    margin-top: 12px;
    margin-bottom: 5px;
}

.kbEditorCat1LangPanel {
    display: inline-block;
    width: 50%;
}

#kbEditorCategory1Label {
    margin-top: 5px;
}

#kbEditorCategory1 {
    width: 80%;
}

#kbEditorLanguageLabel {
    margin-top: 5px;
}

.kbEditor hr {
    margin: 10px;
}

.kbEditor input[type=text] {
    font-size: 14px;
    width: 40%;
}

.kbEditor input[type=file] {
    font-size: 14px;
    width: 50%;
    min-width: 250px;
    max-width: 350px;
    padding: 3px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.kbEditor input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #9e9e9e;
    padding: 8px 16px;
    border-radius: 5px;
    color: black;
    cursor: pointer;
}

.kbEditor input[type=file]::file-selector-button:hover {
    background: #8bc34a !important;
}

.kbEditorHeader {
    font-weight: bold;
    margin-top: 10px;
}

#kbEditorSetHeader {
    margin-top: 0px;
}

#kbEditorFileManageHeader {
    margin-bottom: 5px;
}

#kbManagedDocHeader {
    margin-top: 5px;
}

#ManagedDocRev {
    width: 85%;
}

#ManagedDocRev option {
    font-size: large;
}

    #kbEditorTitle {
        width: 80%;
    }

#kbEditorKeywords {
    width: 80%;
}

#kbEditorFiles {
    margin-top: 5px;
    margin-bottom: 5px;
}

#kbEditorError {
    color: red;
    font-weight: bold;
}

#kbEditorAttached {
    color: green;
    font-size: 14px;
}

#kbEditorFormButtons {
    margin-top: 10px;
}

#kbEditorPrevPanel {
    font-size: 18px;
    margin-top: -30px;
    overflow-y: auto;
    height: calc(100vh - 52px);
}

#ManagedDocID {
    display: inline-block;
    width: 7%;
}

.CodeMirror {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

.CodeMirror-focused .cm-matchhighlight {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
    background-position: bottom;
    background-repeat: repeat-x;
}

.cm-matchhighlight {
    background-color: lightblue;
}

.CodeMirror-selection-highlight-scrollbar {
    background-color: lightblue;
}

/***** Media Queries that provide style overrides based on screen size and/or platform features *****/

@media print {
    .kbPage {
        width: 100%;
        height: 100%;
        overflow: visible;
    }
    #tbMenuBar { display: none; }
    #kbSidebar { display: none; }
    #searchBar { display: none; }
    #contentHeaderCustFace { display: none; }
    #kbArticleReview { display: none; }
    #lastEditText { font-size: 10px; }
    .contentControls { display: none; }
    .contentHeader { margin: 0; }
    .contentPanel { margin: 0; }
    #kbCompleteReviews { display: none; }
    #kbRevisionLog { display: none; }
}

/* On a screen with a minimum width of 890 pixels or higher */
@media screen and (min-width: 890px) {
    body {
        font-size: 14px;
    }

    .kbSidebar {
        width: 33%;
        height: calc(100vh - 58px);
        display: block;
    }

    #searchBar {
        position: fixed;
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: 9999;
        margin-left: 33%;
        width: calc(67% - 20px);
    }

    .contentPanel {
        font-size: 18px;
    }
}

/* On a screen with a maximum width of 1430 pixels or lower */
@media screen and (max-width: 1430px) {
    #helpButtonText {
        display: none;
    }

    #favoritesButtonText {
        display: none;
    }

    #addArticleButtonText {
        display: none;
    }

    /* Search language combo */
    #slang {
        width: 11%;
    }

    /* Search language option list */
    #slang option {
        font-size: medium;
    }
}

/* On a screen with a maximum width of 890 pixels or lower, or coarse pointer or no hover (both used for detecting mobile devices) */
@media screen and (max-width: 890px), (pointer: coarse), (hover: none) {
    .kbPage {
        margin-top: 0px;
    }

    #sidebarToggle {
        display: inline;
    }

    #sbs {
        display: inline;
    }

    #sbslang {
        width: 15%;
    }

    /* Search language option list */
    #slang option {
        font-size: small;
    }

    #helpButton {
        display: inline;
        margin-left: 2px;
    }

    .kbSidebar {
        width: 100%;
        display: block;
        height: 100%;
        z-index: 9999;
    }

    #kbSidebarHeader {
        display: block;
        font-weight: bold;
        font-size: large;
        margin-top: 2px;
        margin-bottom: 2px;
        margin-right: 2px;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-right: 2px;
    }

    #searchBar {
        position: static;
        display: none;
        margin-left: 2%;
        width: 98%;
    }

    #kbStats {
        display: none;
    }

    .contentPanel {
        margin-top: 0px;
        margin-left: 2%;
    }

    .contentHeader {
        font-size: x-large;
        font-weight: bold;
        margin-top: 1%;
        padding: 2px;
    }
}

/* On a screen with either a coarse pointer or no hover (both used for detecting mobile devices) */
@media screen and (pointer: coarse), screen and (hover: none) {
    #searchBar {
        margin-top: 1%;
        font-size: x-small;
    }

    /* Search language option list */
    #slang option {
        font-size: small;
    }

    .searchBarButton {
        margin-right: 2px;
    }

    #helpButton {
        display: inline;
        margin-left: 2px;
    }

    #favoritesButton {
        margin-left: 2px;
    }

    #addArticleButton {
        display: inline;
        margin-right: 5px;
    }

    #kbStats {
        display: none;
    }

    .contentControls {
        font-size: x-small;
    }

    .contentControlButton {
        margin-right: 2px;
    }

    .searchResultsHeader {
        font-size: large;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    .searchText {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 5px;
        padding-right: 0px;
    }

    .contentCategoryChain {
        font-weight: normal;
        font-size: smaller;
    }

    .searchResultsCount {
        padding-left: 0px;
    }
}