---
---

/*
 * Survey Banner Styles
 *
 * This stylesheet contains all styling for the user engagement survey banner
 * that appears at the top of all pages.
 */
body {
    padding-top: 50px !important;
}

body.banner-closed {
    padding-top: 0 !important;
}

#survey-banner {
    background-color: #2c3e50;
    color: white;
    padding: 12px 20px;
    text-align: center;
    font-size: 13px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    border-bottom: 2px solid #34495e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#survey-banner p {
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

#survey-banner a {
    color: #3498db;
    text-decoration: underline;
}

#survey-banner a:hover {
    color: #5dade2;
}

#close-banner {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

#close-banner:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#close-banner:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

#main-content p {
    text-align: justify;
}

/* Site logo */
.title-logo {
    width: 220px;
}

/* Color highlighting for msf console text */
.language-mermaid .label {
    text-transform: inherit;
}

.language-msf .zp {
    text-decoration: underline;
}

.language-msf .ze {
    color: #960050;
}

.language-msf .zg {
    color: #859900;
}

.language-msf .zs {
    color: #268bd2;
}

.language-msf .zw {
    color: orange;
}

/* Module overview styles */

.module-structure li::before {
    content: ' ' !important;
}

.module-structure a {
    height: 100%;
    padding: 0.2rem;
    background-image: none;
    overflow: initial;
    display: inline-block;
    width: 90%;
}

.module-controls {
    line-height: 0;
    border-bottom: 1px solid #ddd;
}

.module-controls a {
    line-height: 1;
    padding: 0.5rem;
    display: inline-block;
}

.module-controls span {
    display: inline-block;
}

.module-structure a, .module-structure a:hover {
    background-image: none;
}

.module-structure a .target {
    pointer-events: none;
    display: inline-block;
    text-decoration: none;
}

.module-structure a:hover .target {
    background-image: linear-gradient(rgba(114, 83, 237, 0.45) 0%, rgba(114, 83, 237, 0.45) 100%);
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 1px 1px;
}

.module-structure {
    line-height: 2rem;
}

/* visual indentation lines */
.module-structure ul {
    margin-left: 7px !important;
    padding-left: 20px !important;
    border-left: 1px dashed #d1d7de;
}

/* Never allow the top-most files/folders to be collapsed */
.module-structure > li.folder > ul {
    display: block;
}

.module-structure li p {
    margin: 0;
}

.module-structure li {
    margin: 0;
    list-style: none;
}

.module-structure ul {
    display: none;
    margin: 0;
}

.module-structure ul.open {
    display: block;
}

/* Default li style - files */
.module-structure li::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%234158bf' viewBox='0 0 512 512'><path d='M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z'/></svg>");
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    background-position: center top;
    background-size: 90% auto;
    margin-top: 0;
    vertical-align: middle;
    margin-left: initial !important;
    margin-right: 0.5rem !important;
    display: inline-block !important;
    position: initial !important;
}

/* li style - folders */
.module-structure li.folder::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%234158bf' viewBox='0 0 512 512'><path d='M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z'/></svg>");
}