/* Copyright 2019, Sciamble Corp. All Rights Reserved. We will take legal action against those who copy our HTML content, CSS style sheets and JavaScript functions. */

td:not(:last-child), th:not(:last-child) {
    padding-right: 40px;
}

#contentbar-container {
    flex-direction: column;
    height: 20px;
    padding-top: 15px;
    padding-bottom: 5px;
    margin-top: 46px;
    margin-bottom: 24px;
}

#contentbar {
    display: flex;
}

#contentbar-ellipsis > * {
    display: flex;
    text-align: left;
    width: 20px;
}

#contentbar-nextarrow1, #contentbar-nextarrow2, #contentbar-nextarrow3 {
    display: flex;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
}

/* 1 refers to current page, 2 the parent page and 3 its grand-parent page */
#contentbar-content1, #contentbar-content2, #contentbar-content3 {
    /*display: flex; Do not set this. Thn text will not have ellipsin when box width is shrunk*/
    text-align: left;
    font-style: italic;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#contentvalue-container {
    display: flex;
    flex-direction: row;
}

#contentvalue-list {
    display: block;
    text-align: left;
    width: 280px;
    min-width: 280px;
    padding-top: 6px; /*Align first element with page title*/
}

.contentvalue-list-element {
    text-align: left;
    border-left: solid;
    border-color: lightgray;
    border-width: 2px;
    margin-left: 0;
    padding: 15px 10px 15px 40px;
    line-height: 20px;
}

#contentvalue-list-element-selected {
    background-color: #E0F0FE;
    border-left: solid;
    border-color: #0067CD;
    border-width: 4px;
    margin-left: -1px;
}

#contentvalue-content {
    display: block;
    float: left;
    text-align: left;
    flex-grow: 1;
    padding-left: 5px;
    max-width: 100%;
}

.contentvalue-content-info {
    display: flex;
    list-style: none;
    color: dimgrey;
}

    .contentvalue-content-info > li { /* prevent text from going to next line when screen is too small. */
        white-space: nowrap;
    }

        .contentvalue-content-info > li:not(:last-of-type):not(:only-of-type):after {
            padding-left: 5px;
            padding-right: 5px;
            content: "•";
        }

.contentvalue-content-info-photo {
    display: flex;
    list-style: none;
}

    .contentvalue-content-info-photo li a img, .contentvalue-content-info-photo li a svg {
        border-radius: 50%;
        height: 16px;
        width: 16px;
        margin-top: 4px;
        padding-right: 3px;
    }

/*do not make it flex. Will not align content during printing.*/
.contentvalue-content-steps {
    padding-left: 0;
    padding-top: 8px;
    margin-left: 30px;
}

    .contentvalue-content-steps li {
        list-style-type: decimal;
        margin-top: -3px;
        margin-bottom: -3px;
    }

        .contentvalue-content-steps li .contentvalue-content-steps li {
            list-style-type: lower-alpha;
        }

            .contentvalue-content-steps li .contentvalue-content-steps li .contentvalue-content-steps li {
                list-style-type: lower-roman;
            }

.contentvalue-content-stepsDecimal li {
    list-style-type: decimal;
    margin-top: -3px;
    margin-bottom: -3px;
}

#contentvalue-content-navigation-left {
    float: left;
    font-style: italic;
    padding-bottom: 12px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#contentvalue-content-navigation-right {
    float: right;
    font-style: italic;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-container, .warning-container, .sharing-container {
    border: solid;
    border-width: 2px;
    /*
        Background color gets ignored during printing. !important makes sure its printed if background color print is enabled. By default its not and hence this does not help still left here.
        This is overcome in chrome by using -webkit-print-color-adjust: exact property in body tag in globalsheet.css
    */
    margin-top: 12px;
    margin-bottom: 12px;
}

.note-header, .warning-header, .sharing-header {
    display: flex;
    border-bottom: solid;
    border-width: 2px;
    padding-left: 10px;
    padding-top: 5px;
    height: 28px;
    line-height: 20px;
}

    .note-header img, .warning-header img, .sharing-header img {
        padding-top: 3px;
        padding-right: 10px;
        height: 16px;
        width: 16px;
    }

.note-header {
    background-color: lightblue;
    border-color: lightblue;
}

.note-container {
    border-color: lightblue !important;
}

.warning-header {
    background-color: lightsalmon;
    border-color: lightsalmon;
}

.warning-container {
    border-color: lightsalmon !important;
}

.sharing-header {
    background-color: lightgray;
    border-color: lightgray;
}

.sharing-container {
    border-color: lightgray !important;
}

.note-content, .warning-content, .sharing-content {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.nowrap {
    white-space: nowrap;
}

@media screen and (max-width: 1000px) {
    #contentvalue-list {
        display: none;
    }

    #contentbar-content1, #contentbar-nextarrow1 {
        display: none;
    }

    /* When in bigger screen content navigation list is shown and a padding was added between that and content. In smaller size, that list is hidden and padding no longer needed. */
    #contentvalue-content {
        padding-left: 0;
    }
}

.code-keyword {
    color: blue;
}

.code-moduleRef {
    color: magenta;
}

.code-comment {
    color: green;
}

pre {
    line-height: 14px;
}

.code-container {
    border: solid;
    border-width: 2px;
    /*
        Background color gets ignored during printing. !important makes sure its printed if background color print is enabled. By default its not and hence this does not help still left here.
        This is overcome in chrome by using -webkit-print-color-adjust: exact property in body tag in globalsheet.css
    */
    border-color: darkseagreen !important;
    margin-top: 12px;
    margin-bottom: 12px;
    overflow: auto;
    white-space: nowrap;
}

.code-header {
    display: flex;
    border-bottom: solid;
    border-width: 2px;
    border-color: darkseagreen;
    background-color: darkseagreen;
    padding-left: 10px;
    padding-top: 5px;
    height: 28px;
    line-height: 20px;
}

.code-content {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

@media print {
    #contentbar-container, #contentvalue-list, #contentvalue-content-navigation-left, #contentvalue-content-navigation-right {
        display: none;
    }

    .note-container {
        page-break-inside: avoid;
        position: relative; /* must be set so for "page-break-inside : avoid" to work */
    }
}