/*Single Page View*/
:root {
    --left-column-width: 350px;
    --middle-column-max-width: 800px;
}

#page-alt {
    padding-top: 65px !important;
}

button.ipqs-top-nav-mobile h2,
button.ipqs-top-nav-mobile h3 { /* overwriting main-responsive.css */
    font-size: inherit !important;
    font-weight: inherit !important;
}

.sp-wrapper {
    display: flex;
    flex-wrap: nowrap;
}

.introduction-content input:read-only,
.introduction-editable-content input:read-only,
.section-content input:read-only {
    margin-top: 5px;
    margin-bottom: 5px;
    width:90%;
    max-width: 100%;
    height: 42px;
    background: rgb(248,202,198); /* #efefef */
    border: 1px solid rgb(224,62,45); /* #e9e9eb */
    border-radius: 2px;
    padding: 6px 12px;
    color: rgb(224,62,45); /* #555 */
    font-size: inherit;
    line-height: inherit;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    font-weight: inherit;
}

.sp-content-wrapper {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
}

.sidebar {
    display: none;
}

.main-content {
    margin-left: 0px !important;
}

.main-content-section {
    padding: 0px;
}

.two-column-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.collapse-toggle {
    display: none;
}

.search-container {
    position: relative;
}

.left-column {
    flex: 1;
    box-sizing: border-box;
    min-height: 800px;
    margin: 0 50px 0 0;
}

.right-column {
    flex: 1;
    flex-grow: 1;
}

.middle-column {
    flex-grow: 2 !important;
}

.category-nav-link {
    font-weight: normal;
    font-size: 14px;
    color: #f43a3a;
    display: block;
}

.left-column > a.category-nav-link {
    padding-bottom: 5px;
}

.subtemplate-placeholder-div {
    background-color: #f0f0f0;
    border: 1px solid #a0a0a0;
    text-align: center;
    padding: 20px;
    margin: 15px;
    width: 304px;
}

@media (max-width: 1527px) {
    .documentation_code {
        border-left: none;
        padding: 0 0 15px 0;
        box-shadow: none;
        background-color: inherit;
        transition: none;
    }
}
@media (min-width: 1528px) {
    .documentation_code {
        border-left: 1px solid #ccc;
        padding: 15px 15px 0 15px;
        box-shadow: 0px 6px 20.5px 4.5px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        transition: width 0.3s ease;
    }
}

@media (max-width: 1024px) {
    .mobile {
        display: block !important;
    }

    .desktop {
        display: none !important;
    }
    
    .sp-wrapper {
        flex-flow: row wrap;
        padding: 15px 10px;
    }
    
    .example-code-wrapper {
        margin-left: var(--left-column-width);
    }

    .introduction-content input,
    .introduction-editable-content input,
    .section-content input {
        min-width: revert;
    }

    .section-content .CodeMirror-sizer {
        max-width: revert;
    }

    .section-content .CodeMirror-scroll {
        margin-right: revert;
    }

    .documentation_code {
        width: 100%;
        padding-right: 10px;
    }

    .has_content {
        min-width: 90vw !important;
    }

    .left-column {
        min-height: initial;
        left: 0;
        z-index: 2;
        margin: 0;
        box-shadow: none;
        padding-bottom: 15px;
    }

    .left-column .pgs-category-list {
        display: none;
    }

    .left-column.expanded .pgs-category-list {
        display: block;
        margin-left: 15px;
    }

    .left-column.expanded {
        width: var(--left-column-width);
        min-width: var(--left-column-width);
    }

    .nav-button-container {
        right: 10px;
    }

    .publish-wrapper {
        width: 100%;
    }

    .subcategory-content {
        margin-right: 5px;
    }

    .middle-column,
    .right-column {
        flex: 1;
        padding: 0 10px 10px;
    }

    .page-menu {
        display: none;
    }

    .page-menu-button {
        display: block;
    }

    .publish-row button.btn.btn-tertiary {
        /* border: 1px solid lightgray; */
        padding: 5px 10px !important; /* override bootstrap .btn */
    }
    
    .publish-row .button-group {
        padding: 10px;
        gap: 6px !important;
        justify-content: space-between;
        align-items: center;
    }

    .back-button {
        color: black;
    }

    .page-title {
        font-size: 24px !important;
    }

    .two-column-wrapper {
        flex-direction: column;
    }

    .publish-row .btn {
        padding: 8px 18px !important; /* override bootstrap */
        font-weight: normal;
    }

    .meta-tag-field-container div {
        margin-top: 3px;
        padding-left: 10px;
    }

    .meta-tag-field-container {
        flex-direction: column;
    }

    .meta-tag-field-container textarea,
    .meta-tag-field-container input {
        width: 95%;
        margin: 0 10px;
        margin-top: 10px;
    }
    
    .meta-tag-actions-wrapper {
        width: 100%;
        margin-top: 0;
    }

    .meta-tag-char-count {
        flex: 1 1 79%;
    }

    .meta-tag-icons {
        flex: 1 1 21%;
        padding-right: 5px;
    }

    .meta-tag-fullurl {
        padding-left: 5px;
        padding-bottom: 5px;
        font-size: .85em;
    }

    .pgs-top-level {
        margin: 0 25px;
    }

    .pgs-category-link {
        width: 90%;
    }

    .keywords-caption {
        font-size: .65em;
    }
    
    caption.keywords-caption {
        text-align: center !important; /* override bootstrap */
    }

    .collapse-toggle {
        display: block;
        cursor: pointer;
        padding: 5px 17px 5px 15px;
        border: 1px solid lightgray;
    }

    .fa-arrow-left {

    }

    .search-container {
        margin-bottom: 3px;
    }

    .section-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .section-main {
        margin-right: 0;
        width: 100%;
    }

    .section-code {
        flex-basis: auto;
        max-width: 100%;
        min-width: auto;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    .hide-undo {
        visibility: hidden;
    }

    .show-undo {
        visibility: visible;
    }
}

@media (min-width: 1025px) {
    .mobile {
        display: none !important;
    }

    .desktop {
        display: block !important;
    }

    .page-menu {
        display: block;
    }

    .page-menu-button {
        display: none;
    }
    
    .publish-wrapper {
        padding-right: 10px;
        width: 600px;
    }

    .button-group {
        margin: 0 1px 0 20px;
    }

    .left-column .pgs-category-list {
        display: block;
    }

    .left-column {
        border-right: 1px solid #ccc;
        width: var(--left-column-width);
        max-width: var(--left-column-width);
        min-width: var(--left-column-width);
        padding: 15px 15px 0 15px;
        box-shadow: 0px 6px 20.5px 4.5px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        transition: width 0.3s ease;
    }
    
    .nav-button-container {
        left: 280px;
    }
    
    .pgs-category-link {
        width: 275px;
    }

    .back-button {
        flex: 1;
        width: var(--left-column-width);
    }

    .requirements {
        flex: 2;
    }

    .meta-tag-field-container {
        margin-bottom: 10px;
    }

    .meta-tag-field-container div {
        margin-top: 5px;
    }

    .meta-tag-field-container label {
        flex-basis: 150px;
    }

    .meta-tag-icons {
        margin-top: 10px;
    }

    .meta-tag-fullurl {
        padding-top: 7px;
        margin-left: 0px !important;
    }

    .keywords-caption {
        font-size: 12px;
    }

    .search-container {
        margin-bottom: 10px;
    }

    .introduction-editable-content,
    .introduction-content {
        margin-right: 25px;
    }

    .section-main {
        max-width: calc(100% - 70px); /* account for margin added to .section-left-bar */
    }
}

@media (min-width: 701px) {
    .with-tab {
        display: flex !important;
    }
    .without-tab {
        display: none !important;
    }
}

@media (max-width: 700px) {
    .with-tab {
        display: none !important;
    }
    .without-tab {
        display: flex !important;
    }
}

.meta-tags-section {
    background-color: #f5f5f5;
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 0 10px 10px;
    max-width: var(--middle-column-max-width);
    margin-top: 5px;
}

.meta-tag-fields-wrapper {
    border: 1px solid lightgray;
    margin-top: 10px;
    width: 100%;
    max-width: var(--middle-column-max-width);
    background-color: white;
}

.meta-tag-header {
    background-color: #f5f5f5;
    padding: 5px 10px;
    border-bottom: 1px solid lightgray;
}

.meta-tag-field-container {
    display: flex;
    align-items: center;
    align-items: flex-start;
}

.meta-tag-field-container input {
    flex-grow: 1;
    max-width: 450px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #253341;
  -webkit-text-fill-color: white;
  box-shadow: 0 0 0px 1000px #253341 inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  color: white;
}

.meta-tag-field-container textarea {
    flex-grow: 1;
    max-width: 450px;
}

.meta-tag-header-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
}

.meta-tag-header-container i {
    margin-right: 10px;
}

.meta-tag-field-container label {
    text-align: left;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 5px;
}

.meta-tag-field-container div {
    text-align: left;
    margin-right: 10px;
    margin-left: 5px;
}

.meta-tag-actions-wrapper {
    display: flex;
    align-self: flex-end;
}

.meta-tag-char-count {
    font-size: .65em;
    color: inherit;
    /* padding-top: 5px; */
}

.meta-tag-char-count-error {
    color: red;
}

.pgs-category-list {
    padding-left: 0;
}

.pgs-category-list > li > .pgs-category-list {
    padding-left: 15px;
}

.pgs-category-link {
    color: #262634;
    text-decoration: none;
    display: block;
}

.pgs-top-level > li > .pgs-category-link {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    padding: 6px 0 6px 0;
}

.pgs-category-list:not(.pgs-top-level) .pgs-category-link {
    font-size: 14px;
    padding: 6px 0 6px 0;
}

.pgs-category-list > li {
    position: relative;
}

.pgs-icon-placeholder {
    position: absolute;
    right: 10px;
    top: 12px;
    bottom: 0;
    /*margin: auto 0;*/
    cursor: pointer;
    color: #262634;
}

.pgs-icon-placeholder:hover {
    font-weight: bold;
    color: #f43a3a;
}

.pgs-category-link.active:not(.category-item) {
    font-weight: bold !important;
    color: #f43a3a;
}

.pgs-category-link:hover {
    font-weight: bold;
    color: #f43a3a;
}

.show-children {
    display: block !important;
}

.hide-children {
    display: none !important;
}

.category-header {
    font-family: Poppins;
    font-size: 15px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #262634;
    padding: 6px 75px 6px 0;
}

.category-header:hover {
    background-color: #f0f0f0;
}

.subcategory:hover {
    background-color: #f0f0f0;
}

.category-green {
    background-color: #77DD77;
}

.category-yellow {
    background-color: #FDFD96;
}

.category-red {
    background-color: #FFC0CB;
}

.category-header, .subcategory {
    display: flex;
    align-items: center;
}

.category-header > i {
    margin-left: 10px;
}

.subcategory {
    font-size: 14px;
    padding: 4px 0 4px 0;
    width: calc(100% - 65px);
}

.subcategory-content {
    display: flex;
    cursor: pointer;
}

.category-header a {
    color: #262634 !important;
}

.subcategory-content-active {
    font-weight: bold;
    color: #f43a3a;
}

.subcategory-content-dropzone {
    font-weight: bold;
    width: 100%;
    background-color: #f0f0f0;
}

.subcategory-content-dragging {
    font-weight: normal;
    width: 100%;
    color: #f0f0f0;
    background-color: transparent;
}

.editable-input {
    border: 1px solid #ccc;
    padding: 2px 4px;
    background-color: #fff;
    border-radius: 3px;
    transition: none;
    height: 30px;
    margin-right: 5px;
}

.nav-button-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
}

.nav-button-container > .crud-btn {
    opacity: 0.1;
}

.nav-button-container > .crud-btn:hover {
    visibility: visible;
    opacity: 1;
}

.nav-button-container > .icon-save, .nav-button-container > .icon-cancel {
    opacity: 1 !important;
}

.icon-save {
    padding-top: 8px;
    cursor: pointer;
}

.arrow-container {
    width: 16px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
    opacity: 1 !important;
    cursor: pointer;
}

.arrow-right {
    background-image: url('/templates/img/documentation/arrow-right.png');
    background-repeat: no-repeat;
    width: 10px;
    height: 12px;
    object-fit: contain;
}

.arrow-down {
    background-image: url('/templates/img/documentation/arrow-down.png');
    background-repeat: no-repeat;
    width: 13px;
    height: 10px;
    object-fit: contain;
}

.icon-published {
    font-size: 10px !important;
    padding-left: 5px;
    padding-top: 5px;
}

.icon-published-on,
.icon-preview-on {
    color: green;
    text-shadow: 0 0 3px #00ff00;
}

.icon-alert-on {
    color: red;
    text-shadow: 0 0 3px red;
}

.icon-published-off {
    color: #ddd;
}

.icon-published-off-dark {
    color: #a0a0a0;
}

.icon-disabled {
    cursor: not-allowed !important;
    opacity: .1 !important;
}

.icon-active {
    /*margin-right: 5px;*/
    cursor: pointer;
}

.icon-cancel {
    cursor: pointer;
    /*margin-left: 5px;*/
    z-index: 10 !important;
}

.icon-container {
    display: inline-block;
    width: 22px;
    text-align: center;
    min-width: 22px;
}

.icon-placeholder {
    display: inline-block;
    width: 27px;
    min-width: 27px;
    /*height: 16px;*/
    /*border: solid 1px;*/
    cursor: pointer;
}

/* Content section */

.page-title {
    margin-top: 15px;
    font-family: Poppins;
    font-size: 34px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #f43a3a;
    margin-bottom: 15px;
    margin-right: 30px
}

.page-title input {
    width: 100%;
}

.char-count {
    font-size: 12px;
    color: black;
    display: block;
    top: 5px;
    position: relative;
    top: 20px;
}

.title-edit-icon-wrapper {
    margin-left: 80px;
    text-align: right;
}

.title-content {
    flex-grow: 1;
}

.page-title .fa {
    font-size: 18px;
    color: #262634;
}

.page-title .fa.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-title button.btn.btn-tertiary {
    border: 1px solid lightgray;
    padding: 5px 10px !important; /* override bootstrap .btn */
}

.page-title .publish-label {
    font-size: 18px;
    color: #262634;
    margin-right: 10px;
}

.publish-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.status-row {
    display: flex;
    width: 100%;
    height: 20px;
}

.status-cell, .link-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    line-height: 15px;
    margin: 1px;
}

.published {
    background-color: green;
    color: white;
}

.link-cell {
    background-color: #27b7ee;
    text-align: center;
}

.unpublished, .link-inactive {
    background-color: lightgray;
    color: darkgray;
}

.link-active a {
    color: white;
    text-decoration: none; /* Optional: Removes underline from links */
}

.publish-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.top-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-flow: row wrap;
    box-shadow: 0px 0px 5px rgba(0,0,0,.2);
}

.top-menu.edit-mode {
    border-bottom: 1px solid #999;
    background-color: #e9e9eb;
}

.publish-wrapper.edit-mode {
    background-color: #e9e9eb !important;
}

.requirements {
    width: 100%;
    padding: 0 5px;
    text-wrap: nowrap;
}

.requirements > hr {
    border: none;
    height: 1px;
    color: lightgray;
    background-color: lightgray;
    margin: 3px 0 6px 0;
}

.publish-button {
    right: 19px;
    width: 152px;
    margin: 5px;
    top: 19px;
}

.trash-button {
    right: 19px;
    margin: 5px;
    top: 19px;
    height: 36px;
}

.btn[disabled] {
    cursor: default;
}

.publish-warning {
    font-size: 12px;
    line-height: 1;
}

.toggle-group {
    display: flex;
    align-items: center;
}

.button-group {
    display: flex;
    width: 100%;
    justify-content: end;
    gap: 12px;
    align-items: center;
}

.edit-button-group {
    width: var(--left-column-width);
    display: flex;
    gap: 12px;
    padding: 10px 15px;
    align-items: center;
    gap: 15px;
}

.publish-label {
    margin: 0px 10px 0px 10px;
    cursor: pointer;
}

.save-button.disabled {
    background-color: #ccc;
    cursor: default;
}

.section-wrapper {
    display: flex;
    align-items: flex-start;
    margin: 35px 0;
    width: 100%;
}

.section-wrapper.small{
    min-height: 100px;
}

.section-wrapper.medium{
    min-height: 400px;
}

.section-wrapper.large{
    min-height: 600px;
}

.section-wrapper:hover .section-left-bar {
    background-color: #f43a3a;
}

/*.section-wrapper pre {*/
/*    width: 582px;*/
/*    height: 40px;*/
/*    border-radius: 2px;*/
/*    background-color: #efefef;*/
/*}*/

.section-wrapper .ql-syntax {
    width: 582px;
    height: 40px;
    border-radius: 2px !important;
    background-color: #efefef !important;
    color: #333 !important;
}

.section-left-bar {
    background-color: #dadadc;
    width: 4px;
    margin-right: 30px;
    flex-shrink: 0;
    align-self: stretch;
}

.section-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.toggle-editor-button {
    position: relative;
    left: 0px;
}

.edit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.edit-introduction-button {
    margin-top: 25px;
}

.introduction-editable-content,
.introduction-content {
    margin-bottom: 35px;
    word-break: break-word;
}

.introduction-content-edit {
    height: 225px;
}

.introduction-editor-button {
    width: 150px;
    margin-top: 10px;
    position: relative;
    left: 0px;
}

.introduction-save-button {
    width: 150px;
    margin-top: 10px;
}

.introduction-cancel-button {
    width: 150px;
    margin-top: 10px;
}

.section-header a,
.section-header {
    font-family: Poppins;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: left;
    color: #262634;
    margin-bottom: 19px;
}

.section-content {
    font-family: Poppins;
    font-size: normal;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #262634;
    word-break: break-word;
}

.section-content :not(h3) {
    font-size: 16px; /* setting actual font size in p since all text is wrapped in <p> */
}

.introduction-content h3,
.introduction-editable-content h3,
.section-content h3 {
    font-size: revert !important;
    font-weight: revert !important;
}

.section-content > p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0; 
}

.introduction-content table[border]:not([border="0"]):not([style*=border-color]) td,
.introduction-content table[border]:not([border="0"]):not([style*=border-color]) th,
.introduction-editable-content table[border]:not([border="0"]):not([style*=border-color]) td,
.introduction-editable-content table[border]:not([border="0"]):not([style*=border-color]) th,
.section-content table[border]:not([border="0"]):not([style*=border-color]) td,
.section-content table[border]:not([border="0"]):not([style*=border-color]) th {
    border-color: #ccc;
}

.introduction-content table[border]:not([border="0"]):not([style*=border-style]) td,
.introduction-content table[border]:not([border="0"]):not([style*=border-style]) th,
.introduction-editable-content table[border]:not([border="0"]):not([style*=border-style]) td,
.introduction-editable-content table[border]:not([border="0"]):not([style*=border-style]) th,
.section-content table[border]:not([border="0"]):not([style*=border-style]) td,
.section-content table[border]:not([border="0"]):not([style*=border-style]) th {
    border-style: solid;
}

/* if the default border is used, but the border style and border color are set, tinymce adds border: 1px {style} {color} to the table but 
    does not set the border-width on the cells, also resulting in no cell borders
*/
.introduction-content table[border]:not([border="0"]):not([style*=border-width]) td,
.introduction-content table[border]:not([border="0"]):not([style*=border-width]) th,
.introduction-editable-content table[border]:not([border="0"]):not([style*=border-width]) td,
.introduction-editable-content table[border]:not([border="0"]):not([style*=border-width]) th,
.section-content table[border]:not([border="0"]):not([style*=border-width]) td,
.section-content table[border]:not([border="0"]):not([style*=border-width]) th {
    border-width: 1px;
}

.introduction-content table:not([cellpadding]) td,
.introduction-content table:not([cellpadding]) th,
.introduction-editable-content table:not([cellpadding]) td,
.introduction-editable-content table:not([cellpadding]) th,
.section-content table:not([cellpadding]) td,
.section-content table:not([cellpadding]) th {
    padding: .4rem;
}

/* by default tinymce sets border-width to 1px on the table but does not put it in the cells (td/th), resulting in no cell borders
*/
.introduction-content table[style*="border-width:1px"] th,
.introduction-content table[style*="border-width:1px"] td,
.introduction-editable-content table[style*="border-width:1px"] th,
.introduction-editable-content table[style*="border-width:1px"] td,
.section-content table[style*="border-width:1px"] th,
.section-content table[style*="border-width:1px"] td {
    border-width: 1px;
}

table:not([cellpadding]) td,
table:not([cellpadding]) th {
    padding: .4rem;
}

table {
    max-width: 100% !important; /* tinymce allows width > 100% */
}

.introduction-content ul,
.introduction-editable-content ul,
.section-content ul,
.introduction-content ol,
.introduction-editable-content ol,
.section-content ol {
    padding: revert;
    margin: revert;
}

.introduction-content ul:not([style]),
.introduction-editable-content ul:not([style]),
.section-content ul:not([style]) {
    list-style-type: disc;

}

.introduction-content ol:not([style]),
.introduction-editable-content ol:not([style]),
.section-content ol:not([style]) {
    list-style-type: decimal;

}

.section-content-edit {
    height: 225px;
}

.ql-container {
    height: 200px !important;
}

.introduction-content a,
.introduction-editable-content a,
.section-content a {
    color: #279ae2;
}

.section-red {
    color: #f43a3a;
}

.section-gray {
    color: #9f9fab;
}

.section-code-inline {
    border-radius: 2px;
    /*background-color: #efefef;*/
}

.section-code {
    /*background-color: #efefef;*/
    flex-basis: 582px;
    flex-shrink: 0;
    min-height: 100px;
    max-width: 582px;
    min-width: 582px;
}

.full-height {
    height: 100%;
}

.full-height-internal {
    height: calc(100% - 45px); /* account for banner height */
}

.documentation_code.has_content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 15px;
}

.has_content {
    font-size:12px;
    width:600px;
    max-width:600px;
    min-width:600px;
}

.example-code-container {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
}

.example-code-header {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: #f43a3a;
    padding-bottom: 10px;
}

.section-code-icons,
.example-code-icons {
    font-family: Poppins;
    font-size: 18px;
    line-height: 1.33;
    padding-bottom: 10px;
}

.nav.nav-tabs.code-tabs {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
    overflow-y: hidden;
    overflow-x: hidden;
    border-bottom: none !important; /* override bootstrap */
}

.nav-link-code {
    border: none;
    padding: 10px 31px 28px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #b9bdc0;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.06;
    letter-spacing: normal;
    text-align: center;
    color: #262634;
    padding: 10px 15px;
    margin: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-link-select.active,
.nav-link-code.active {
    color: #fff;
    background-color: #262634;
}

.nav-link-select {
    border: none;
    background-color: #b9bdc0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

li.nav-link-code > i.fa-caret-down {
    padding-left: 5px;
}
/* Additional styles for readability and appearance */
/*.CodeMirror-lines {*/
/*    padding: 10px;*/
/*}*/
/*.CodeMirror-gutters {*/
/*    background-color: var(--color-background);*/
/*}*/

/*!* Style for matching brackets *!*/
/*.CodeMirror-matchingbracket {*/
/*    color: #0f0; !* Green color for matching brackets *!*/
/*    font-weight: bold;*/
/*}*/

/*!* Style for active line *!*/
/*.CodeMirror-activeline-background {*/
/*    background-color: rgba(255, 255, 255, 0.1);*/
/*}*/

/*.CodeMirror {*/
/*    border-radius: 24px;*/
/*    box-shadow: 0px 6px 20.5px 4.5px rgba(0, 0, 0, 0.1);*/
/*    background-color: #262634;*/
/*    color: white;*/
/*    height: auto;*/
/*}*/

.section-content .CodeMirror {
    height: auto !important;
}

.language-code {
    width: 100%;
    min-height: 200px;
    font-family: monospace;
    display: none;
    margin-top: 10px;
}

.code-editor > .CodeMirror {
    height: 100%;
    min-height: 300px;
}

.code-editor > .language-code.active {
    display: block;
}

.section-content .CodeMirror,
.code-editor .CodeMirror  {         /* customer-facing */
    border-radius: 24px;
    box-shadow: 0px 6px 20.5px 4.5px rgba(0, 0, 0, 0.1);
    background-color: #262634;
}

.code-editor.small .CodeMirror{
    height: 200px;
}

.code-editor.medium .CodeMirror{
    height: 400px;
}

.code-editor.large .CodeMirror{
    height: 600px;
}

.code-editor .CodeMirror-gutters {
    background-color: #262634;
    color: white;
}

.code-editor .CodeMirror .CodeMirror-linenumber {
    color: white;
}

.CodeMirror-scroll {
    /*scrollbar-width: thin; !* For Firefox *!*/
    scrollbar-color: #abcdef #13131c; /* For Firefox: thumb and track */
}

.CodeMirror-scroll::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
    background-color: #13131c; /* Background color of the scrollbar track */
}

/* Custom scrollbar thumb styles */
.CodeMirror-scroll::-webkit-scrollbar-thumb {
    background-color: #abcdef; /* Background color of the scrollbar thumb */
    border-radius: 1px;
    border: 4px solid #13131c;
}

/* Additional padding to prevent scrollbar overlap */
.CodeMirror {
    padding-left: 20px; /* Adjust as necessary */
}

.cm-editor .cm-content {
    background-color: #262634 !important;
}

.tab-content {
    border-radius: 24px;
    box-shadow: 0px 6px 20.5px 4.5px rgba(0, 0, 0, 0.1);
    background-color: #262634;
}

.code-content-edit pre {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.code-content-edit-form-layout > * {
    display: block;
    margin-bottom: 10px;
}

.buttons-container {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 15px;
    position: relative;
}

.section-save-button,
.section-cancel-button {
    width: 150px;
    margin-top: 10px;
}

.section-delete-button {
    margin-top: 10px;
    margin-left: auto;
}

.section-add-button {
    margin: 50px 0; /* matching the spacing b/w sections */
}

.saved-success {
    color: green;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

.fa-lg-btn {
    font-size: 18px !important; /* not sure why fa-lg, fa-xl, etc aren't working */
    cursor: pointer;
}

.introduction-content > details[open] > summary:first-of-type,
.introduction-editable-content details[open] > summary:first-of-type,
.section-content > details[open] > summary:first-of-type {
    list-style-type: disclosure-open;
}

.introduction-content > details > summary:first-of-type,
.introduction-editable-content details > summary:first-of-type,
.section-content > details > summary:first-of-type {
    display: list-item;
    counter-increment: list-item 0;
    list-style: inside disclosure-closed;
    cursor: pointer;
}

.fas[disabled=true],
.fa.disabled {
    cursor: default;
    opacity: .5;
}

.hideRevealBtn {
    cursor: pointer;
    transition: transform 0.3s ease; 
}

.hideRevealBtn:hover {
    transform: scale(1.1);
}
  
.blur {
    color: transparent; 
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
  
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.inline-code {
    font-weight: 700;
    background: rgb(229 231 235);
    font-family: "Space Mono", monospace;
    padding: 4px;
}

.introduction-content p,
.introduction-editable-content p,
.section-content p {
    margin: revert;
}

iframe {
    border: 1px solid black;
}