.main-document-title {
    margin-bottom: 5px;
}

.oc-link-v2 {
    display: block;
    position: relative !important;
}

.readdocument__icon {
    padding: 4px;
    width: 29px;
    height: 29px;
    background-position: top left;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 5px;
}

.readdocument__icon--comment {
    background-image: url(../images/oc2_comment.png);
}

.readdocument__icon--comment_form {
    background-image: url(../images/oc2_form.png);
}

.readdocument__icon--view {
    background-image: url(../images/oc2_view.png);
}

.readdocument__icon--map {
    background-image: url(../images/oc2_map.png);
}

.oc-link:not(.oc-link-v2) .maplist-btn.dropdown-toggle::after {
    margin-bottom: 0.7rem;
}

body:not(.cke_editable) .custom-tag .oc-link-v2 {
    display: inline-block;
}

.dropdown.maplist-dropdown {
    display: inline-block;
    position: relative;
}

.maplist-dropdown .dropdown-menu {
    max-height: 400px;
    overflow-y: scroll;
    z-index: 1000;
}

/* inline comment/map buttons for instructions page */

.oc-link-v2.instructions-page {
    display: inline-block;
    vertical-align: bottom;
}

.readdocument-no-access__title {
    text-align: center;
}

.readdocument-no-access__message {
    text-align: center;
    color: #888;
}

.readdocument_top {

}

.readdocument__parent {
    list-style: none;
}

.readdocument__child {

}

.readdocument__child__link {

}

.readdocument__child__link--highlight {

}

.readdocument .document-index .standard-plus .level-1 {
    cursor: pointer;
    border-bottom: 1px solid silver;
}

.readdocument .standard-plus .showhidechapterindicator {
    float: right;
    font-size: 1.5rem;
    line-height: 1.2rem;
}

.readdocument__rep-count {
    vertical-align: bottom;
}

.make-rep-frame iframe {
    width: 100%;
    border: 3px solid silver;
    border-radius: 5px;
    /*height: 500px;*/
}
/* default table styles for supporting docs copied from OC1*/
.readdocument_document table {
    border: 1px solid #000;
}

.readdocument_document table td {
    padding: 0.35em;
    border-top: 1px solid #ccc;
}


/* default table styles for docs */
table.indoc {
    border: 1px solid black;
    empty-cells: show;
    border-collapse: collapse;
}

table.indoc thead {
    font-weight: bold;
    border: 1px solid black;
}

table.indoc th {
    font-weight: bold;
    text-align: center;
    border: 1px solid black;
}

table.indoc tr,  table.indoc td {
    border: 1px solid black;
}

table.indoc td {
    padding: 0.5em;
}

/* flattened tables column widths and borders - hope to remove this and replace with the grid method */

.flattened-table-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flattened-table-cell {
    border: 1px solid #000;
    padding: 0.5em;
    margin: 0;
}

.flattened-table-cell-100 {
    width: 100%;
}

.flattened-table-cell-95 {
    width: 95%;
}

.flattened-table-cell-90 {
    width: 90%;
}

.flattened-table-cell-85 {
    width: 85%;
}

.flattened-table-cell-80 {
    width: 80%;
}

.flattened-table-cell-75 {
    width: 75%;
}

.flattened-table-cell-70 {
    width: 70%;
}

.flattened-table-cell-65 {
    width: 65%;
}

.flattened-table-cell-60 {
    width: 60%;
}

.flattened-table-cell-55 {
    width: 55%;
}

.flattened-table-cell-50 {
    width: 50%;
}

.flattened-table-cell-45 {
    width: 45%;
}

.flattened-table-cell-40 {
    width: 40%;
}

.flattened-table-cell-35 {
    width: 35%;
}

.flattened-table-cell-33 {
    width: 33%;
}

.flattened-table-cell-30 {
    width: 30%;
}

.flattened-table-cell-25 {
    width: 25%;
}

.flattened-table-cell-20 {
    width: 20%;
}

.flattened-table-cell-15 {
    width: 15%;
}

.flattened-table-cell-10 {
    width: 10%;
}

.flattened-table-cell-5 {
    width: 5%;
}

/* or use grid for the flattened tables -
   will need an inline style like style="grid-template-columns: 1fr 1fr; or grid-template-columns: 35% 65%;" to use this (add this in in the table flattener code
   - much more flexible) */

.flattened-table-div {
    display: grid;
}

.flattened-table-div > * {
    padding: 1em;
    border: 1px solid #000;
    margin: 0;
}


.supporting-document-document-item__file,
.supporting-document-document-item__url {
    margin-bottom: 1rem;
}

.supporting-document-document-item__file__icon img {
    vertical-align: baseline;
    margin-right: 0.5rem;
}

.supporting-docs-help-text {
    margin-bottom: 1rem;
}

.showhideblock {
    border-bottom: #70757A 1px solid;
    margin-bottom: 15px;
}

.showhidetitle {
    background-color: transparent;
    border: none;
    text-align: left;
    width: 100%;
    padding-left: 0;
}

.showhideindicator {
    font-size: 32px;
    float: right;
}

.showhideindicator svg {
    fill: #70757A;
}

.readdocument__child__link--selected {
    font-weight: bold;
}

/* social media links */
.resp-sharing-button__link,
.resp-sharing-button__icon {
    display: inline-block
}

.resp-sharing-button__link, .resp-sharing-button__link:hover {
    text-decoration: none !important;
    color: #fff !important;
    margin: 0.5em
}

.resp-sharing-button {
    border-radius: 5px;
    transition: 25ms ease-out;
    padding: 0.5em 0.75em;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: top
}

.resp-sharing-button--small svg {
    margin: 0;
    vertical-align: middle
}

.resp-sharing-button__name {
    vertical-align: middle;
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
    stroke: #fff;
    fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
    fill: #fff;
    stroke: none
}

.resp-sharing-button--twitter {
    background-color: black;
}

.resp-sharing-button--twitter:hover {
    background-color: #2a2a2a;
}

.resp-sharing-button--facebook {
    background-color: #3b5998;
}

.resp-sharing-button--facebook:hover {
    background-color: #2d4373;
}

.resp-sharing-button--bluesky {
    background-color: #0171E9
}

.resp-sharing-button--bluesky:hover {
    background-color: #015EC1;
}

.resp-sharing-button--mastodon {
    background-color: #5D50E7
}

.resp-sharing-button--mastodon:hover {
    background-color: #5D50D1;
}

.resp-sharing-button--threads {
    background-color: white;
    color: black;
    border: 1px solid black;
}

.resp-sharing-button--threads:hover {
    background-color: #F0F0F0;
}

.resp-sharing-button--facebook {
    background-color: #3b5998;
    border-color: #3b5998;
}

ul.supporters-list {
    columns: 4;
}

.index-burger {
    display:inline-block;
    padding: 0.5em 0.5em 1em 0;
}

.index-burger button {
    background: transparent;
    color: white;
    border: none;
}

.index-burger button {
    font-size: 30px;
    padding: 0;
    line-height: 0;
}

.index-burger img {
    height: 30px;
}

.index-chapters {
    display: none;
    position: absolute;
    background-color: white;
    border: 2px solid silver;
    border-radius: 5px;
    z-index: 1000;
    margin-top: 0.5rem;
    padding: 0 1rem;
}

.index-chapters ul {
    list-style: none;
    padding: 1rem 0 0 0;
}

/* basic layout for guttered buttons */
.oc-link[data-oc-maps][data-oc-buttons="three_count"] .maplist-dropdown,
.oc-link[data-oc-maps][data-oc-buttons="three_count"] .user-map-button,
.oc-link[data-oc-maps][data-oc-buttons="two_count"] .maplist-dropdown,
.oc-link[data-oc-maps][data-oc-buttons="two_count"] .user-map-button {
    margin-left: 3px;
}

.user-make-comment {

}

.oc-link:not(.oc-link-v2) .user-view-comment {
    margin-left: 3px;
}

.oc-link-v2 .user-view-comment img,
.oc-link-v2 .user-map-button img,
.oc-link-v2 .maplist-btn img {
    width: 1.3rem;
    filter: var(--jdi-svg-white);
}

.oc-link[data-oc-maps][data-oc-buttons="two_count"] .user-view-comment {
    margin-left: 0;
}

.oc-link .dropdown-menu {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* focus highlight not showing in Chrome - this fixes it */

.chapter-block-item a {
    display: inline-block;
    width: 100%;
}