/*
 MOCS Guides CSS - Streamlined Version
 For styles on pdf guides to page conversions
 2023-03-27

 Blue #0a5796
 Plum #9f2882
*/

/* ===== Screenshot images container */
.guide figure {
    padding:1%;
    border:1px solid rgb(114, 114, 114);
    border-radius:5px;
    width:fit-content;
    margin:1rem auto;
    display:block;
}

.guide img {
  margin-bottom:1rem;
}

/* ===== Screen reader only */

/* ===== Set wrappers so help feedback can be position:sticky */
#outer-wrap,
.ls-canvas .ls-col,
.ls-canvas .ls-col-body,
.ls-canvas .ls-area,
.ls-canvas .ls-area-body {overflow:visible;}
article.guide {position:relative;}
#sticky-yn {
    position:sticky;
    background-color:#ffffff;
    z-index:100
}
#toc-side {list-style:"\25B6";}
#toc-side ol {list-style:"\25B7";}
#toc-side li {
    margin-bottom:0.2rem;
    padding-left:0.6rem;
}
@media screen and (max-width:1590px) {
    #sticky-yn {top:0px;}
}
@media screen and (min-width:1590px) {
    #sticky-yn {
        top:20%;
        width:50%;
        margin-left:-53%;
        float:left;
    }
    #toc-side {
        position:sticky;
        z-index:101;
        float:right;
        margin-right:-38%;
        width:34%;
        top:6%;
    }
}

/* ===== end sticky specific styles */

/* ===== Guide titles, text, and overview */
.about-description article a:not([class*=Btn]) {font-weight:bold;}
article a:hover {text-decoration:none;}
.g-overview {
    font-size:1.2em;
    margin-top:1rem;
}
.guide h1 span {
    text-transform:uppercase;
    margin-top:0;
    margin-bottom:0.1em;
    display:block;
    font-size:0.6em;
}
.note-sm {
    font-size:0.85em;
    color:#001688;
}
.g-overview ol { list-style-type:none; }
.g-overview ol li {margin:0.6em 0;}
.g-overview ol li li {margin-left:1em;}

/* ===== Guide preq */
.g-preq {
    border:1px solid #0a5796;
    border-radius:5px;
    padding:0 1rem 0.8rem;
}

/* ===== Guide sections */
.guide section {
    /*border:1px solid #0a5796;
    border-left:none;
    border-bottom:none;*/
    margin-top:4rem;
}

.g-section li {
    margin-top: 10px;
}

.disc-list { list-style-type: disc; }
.cir-list { list-style-type: circle; }

/* ===== Guide step */
.g-step {
    margin-bottom:4em;
}
p.g-count {
    padding:0.2rem;
    overflow:hidden;
    font-weight:bold;
    font-size:1.2em;
    margin-top:1em;
}
p.g-count::after {
    content:"";
    vertical-align:middle;
    display:inline-block;
    height:2px;
    background-color:#0a5796;
    position:relative;
    left:0.5rem;
    margin-right:-50%;
    width:100%;
}
.g-step p, .g-step li {margin-bottom:1rem;}

/* ===== Back to top */
p.g-go {
    text-align:right;
    padding-right:0.5em;
}

/* ===== Highlighted words */
.g-term-em {
    font-weight:bold;
    color:#1771b7;
}
.bold, a.bold {font-weight:bold;}

/* ===== Callout boxes */
.g-box-tip::before, .g-box-alert::before, .g-box-warning::before, .g-box-note::before {
    display:block;
    font-weight:bold;
    margin-bottom:0.7rem;
}
.g-box-tip, .g-box-alert, .g-box-warning, .g-box-note {
    border-left-width:5px;
    border-left-style:solid;
    border-radius:3px;
    padding:0.5rem;
    margin-bottom:1rem;
}
.g-box-tip::before {
    content:"Tip";
    color:rgb(43, 146, 136);
}
.g-box-tip {
    background-color:rgb(189, 255, 205);
    border-color:rgb(43,146,136);
}
.g-box-alert::before {
    content:"Alert";
    color:rgb(149, 149, 0);
}
.g-box-alert {
    background-color:rgb(252, 252, 176);
    border-color:rgb(149, 149, 0);
}
.g-box-warning::before {
    content:"Warning";
    color:red;
}
.g-box-warning {
    background-color:rgb(252, 217, 217);
    border-color:red;
}
.g-box-note::before {
    content:"Note";
    color:rgb(35, 109, 138);
}
.g-box-note {
    background-color:rgb(189, 236, 255);
    border-color:rgb(35, 109, 138);
}

/* ===== Simulated notifications */
div.p-ntf {
    margin:1rem;
    padding:0.5rem 1rem;
    background-color:rgb(247,255,255);
    border:solid 1px rgb(206,234,238);
    color:rgb(19,109,132);
    border-radius:3px;
}
div.p-ntf p {margin:3px 0;}
div.p-ntf p::before {line-height:1.8rem;}

/* ===== Help feedback buttons */
.help-q-ctr {
    display:flex;
    align-items:center;
    border:2px solid #9f2882;
    border-left:none;
    border-right:none;
}
.help-q {
    order:1;
    margin:1.3rem;
}
.help-q-ctr :checked ~ .help-q {display:none;}
.help-q-ctr label {
    display:inline-block;
    order:2;
}
.help-q-ctr button, .help-q-ctr > label {
    padding:0.6em 1.1em;
    margin-right:0.6em;
    border:none;
    border-radius:15px;
    background-color:#0a5796;
    color:white;
    line-height:initial;
}
.help-q-ctr button:hover, .help-q-ctr > label:hover {background-color:#9f2882;}
.help-q-ctr input[type="checkbox"] {display:none;}
.help-q-ctr .help-res-msg {
    display:none;
    margin:1.3rem;
}
.help-q-ctr input#h-pos:checked ~ #help-pos-a {display:block;}
.help-q-ctr :checked ~ label {display:none;}

/* Subsection after negative click */
.help-q-ctr input#h-neg:checked ~ #help-neg-a {
    display:flex; /* The only reason this is flex is because the question has to be ordered at the top */
    flex-wrap:wrap;
}
.help-q-ctr #help-neg-a label {
    flex-basis:100%;
    display:block;
    background-color:#0a5796;
    color:#ffffff;
    margin-bottom:0.8rem;
    font-weight:normal;
    padding:0.3rem 1.5rem;
    border-radius:10px;
}
.help-q-ctr #help-neg-a label:hover {background-color:#9f2882;}
.help-q-ctr #help-neg-a input:checked ~ label,
.help-q-ctr #help-neg-a input:checked ~ .help-q {display:none;} /* Hide responses and question once 1 option is selected */
.help-q-ctr #help-neg-a input:checked ~ .help-res-msg {display:block;}


/* ===== Related articles/items */
.g-after div {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:stretch;
}
.g-after div p {
    flex-basis:100%;
    margin-bottom:0.9rem;
    font-size:1.3rem;
    line-height:1.6rem;
    position:relative;
}
@media (min-width:700px) {
    .g-after div p {
        flex-basis:49%;
    }
}
.g-after div p a {
    /*background:linear-gradient(315deg, #9f2882 -50%, #ffffff 24%);
    background-color:#999999;
    color:#ffffff;*/
    background-color:#ffffff;
    box-sizing:border-box;
    text-align:left;
    width:100%;
    height:100%;
    padding:1rem 1.7rem;
}
.g-after div p a:hover {background-color:#ffffff;}
.g-after a span {
    display:block;
    margin:0.4em 0;
    line-height:1.4em;
    font-size:0.9rem;
    font-weight:normal;
}
.g-after div .g-next, .g-after div .g-prev {flex-basis:49%;}
.g-after div .g-next a, .g-after div p a {padding-right:5rem;}
.g-after div .g-next a::after, .g-after div .g-prev a::before, .g-after div p a::after {
    font-size:2.1rem;
    position:absolute;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.g-after div .g-next a::after, .g-after div p a::after {
    content:'\276f';
    right:1.6rem;
}
.g-after div .g-next a::before {
    content:'\Next';
    display:block;
    position:absolute;
    top:0.7rem;
}
.g-after div .g-next a {padding-top:2.4rem;}
.g-after div .g-prev a {
    padding:2.4rem 1.7rem 1rem 5rem;
    text-align:right;
}
.g-after div .g-prev a::after {
    content:'\Previous';
    top:1.5rem;
}
.g-after div .g-prev a::after, .g-after div .g-next a::before {
    font-size:1rem;
    font-weight:normal;
}
.g-after div .g-prev a::before {
    content:'\276e';
    left:1.6rem;
}
.g-after div .g-prev a span, .g-after div .g-next a span {display:none;}

/* ===== Survey callout */
.g-survey {
    text-align:center;
    line-height:1.5em;
    margin:1rem 0;
}

/* ===== Overview list */
ol.step-order li {
    margin-top:1rem;
    background-color:rgba(10,87,150,0.1);
    padding:0.5rem 1rem;
    line-height:1.8rem;
}

/***********************************************/
/* Informative article styles */

/* ===== For PASSPort Key Terms */
.topics:hover a {color:#ffffff;}
/* ===== end PASSPort Key Terms */

/* ===== For Add Users and Assign Roles */
.t-style {
    text-align: center;
    color:#ffffff;
    background-color: #9f2882;
    font-weight: bold;
}

.t-head {
    padding: 5px;
}

.t-row1{
    padding: 5px;
}
/* ===== end Add Users and Assign Roles */

/* ==== For Prime Vendors */
.workflow-container {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    position: relative; 
} 
.list-item {
    background-color: #9f2882;
    padding: 10px;
    border-radius: 5px;
    color: white;
    text-align: center;
}
/* ==== end For Prime Vendors */


/* ==== styling checklist guides */

.checklist {
    list-style-type: none;
    padding: 0;
    margin-left: 0;
}
.inner-list {
    padding-left: 20px;
}

.flex-list {
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 1em;
}
.checkbox {
    margin-right: 0.5em;
}
/* ===== end For Subcontractors */


/* ===== For User Roles */
.task {
    padding:0.5rem 0.8rem;
    border-radius:5px;
    margin-bottom:1rem;
}
.task h4 {
    color:#ffffff;
    margin:0.3rem 0 0.5rem;
    font-size:1rem;
}
.task.enroll {background-color:#3bb3e5;}
.task.manage {background-color:#001688;}
.task.solicit {background-color:#722281;}
.task.complete {background-color:#1f1645;}
.task-ctr {
    background-color:#ffffff;
    border-radius:5px;
    padding:0 0.5rem;
    font-size:1rem;
}
.task-ctr p {
    padding:0.2rem 0.4rem;
    margin:0.5rem 0.5rem 0.5rem 0;
    border-radius:5px;
    display:inline-block;
}
.task-ctr p.task-y {background-color:rgb(189, 255, 205);}
.task-ctr p.task-n {
    background-color:#dddddd;
    color:#6b6b6b;
}
.task-ctr p::before {
    display:inline-block;
    margin-right:0.1rem;
}
.task-ctr p.task-y::before {
    content:'\2714';
    color:rgb(43, 146, 136);
}
.task-ctr p.task-n::before {
    content:'\2716';
    color:darkslategray;
}

/* ===== end User Roles */

/* ===== For Find Opportunities - Key Terms */
 
.term-block {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 2px solid #000;
}
 
.term-block dt {
    font-weight: bold;
    font-size: 1em;
    padding: 1em 1em 1em 0;
    align-self: stretch;
}
 
.term-block dd {
    margin: 0;
    padding: 1em 0 1em 1em;
}
 
.key-terms ul {
    margin: 0.5em 0 0 0;
    padding-left: 1.2em;
}
 
.key-terms li {
    margin-bottom: 0.3em;
}

/* ===== end Find Opportunities - Key Terms */

/* ===== For HHS PQL Guide  */

/*styles filings tables ---- L&D requested to replace the tables with images
.filing-tables {
  overflow-x: auto;
  white-space:nowrap;
  margin-bottom: 2rem;
}
.filing-tables th,
.filing-tables td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}
.filing-tables .row-header {
  background-color: #d9e1f2;
  text-align: left;
  font-weight: bold;
}
.filing-tables .yes {
  background-color: #00b050;
  color: white;
  font-weight: bold;
}
.filing-tables .section-heading {
     background-color: #0a5796;
     color: white;
     font-weight: bold;
     text-align: center;
}
.filing-tables .subheading-blue,
.filing-tables .subheading-purple {
     color: white;
     font-weight: bold;
}
.filing-tables .subheading-blue {
     background-color: #3bb3e5;
}
.filing-tables .subheading-purple {
     background-color: #c000a3;
} */
/*change list style to abc*/
.alpha-list {
     list-style-type: lower-alpha;
     padding-left: 2rem
}
/* ===== end HHS PQL Guide */

/***********************************************/
/* Learning to Use PASSPort page */
.g-instruct {
    font-size:2.1rem;
    background-color:#0a5796;
    color:#ffffff;
    text-align:center;
    margin:2rem 0 1rem;
    padding:0.4rem 0;
}
.g-method {
    /*border:dotted 0.15rem #3bb3e5;*/
    border-radius:0.3rem;
    margin-bottom:1rem;
    padding:1.5rem;
    background-color:rgba(59,179,229,0.2);
}
.g-method h4 {color:#3bb3e5;}
.g-2out {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
.g-2out .g-method {flex-basis:100%;}
@media (min-width:700px) {
    .g-2out .g-method {
        flex-basis:41.5%;
    }
}

/***********************************************/
/* Knowledge Base page */
.g-overview ul.flex-2 {
    margin-left:1.5rem;
    list-style:circle;
}
.g-overview ul.flex-2 li {margin-bottom:0.5rem;}
.ans-ctr p a {
    display:block;
    position:relative;
    background-color:rgba(59,179,229,0.12);
    border:dotted 1px rgba(59,179,229,0.12);
    border-radius:3px;
    box-sizing:border-box;
    padding:0.6rem;
    height:100%;
    padding-left:3.6rem;
}
.ans-ctr p a:hover {
    text-decoration:none;
    border-style:solid;
    border-color:#9f2882;
}
.ans-ctr p a::before {
    /*content:'\279d'; arrow right*/
    font-size:0.8rem;
    line-height:initial;
    border:1px solid;
    padding:1px;
    position:absolute;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left:0.7rem;
}
.ans-ctr p a strong {
    display:block;
}
.ans-ctr p a[href$=".pdf"]::before {content:"PDF";}
.ans-ctr p a[href$=".docx"]::before {content:"DOCX";}
.ans-ctr p a[href$=".doc"]::before {content:"DOC";}
.ans-ctr p a[href$=".xlsx"]::before {content:"XLSX";}
.ans-ctr p a[href$=".xls"]::before {content:"XLS";}
.ans-ctr p a[href$=".mp4"]::before {content:"MP4";}
.ans-ctr p a[href$=".zip"]::before {content:"ZIP";}
.ans-ctr p a[href$=".ppt"]::before {content:"PPT";}
.ans-ctr p a[href$=".pptx"]::before {content:"PPTX";}

/* ===== Horizontal rule */
.about-description .holding hr {
    block-size:3px;
    background-color:#722281;
}
.g-section hr {
    block-size:2px;
    background-color:#0a5796;
    margin-block:2rem;
}
.g-step hr {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), #999999, rgba(0, 0, 0, 0));
    block-size: 1px;
    border: none;
}

/* ===== Collapsible overwrites */
.holding h2 {color:#722281;}
.holding .faq-v3 .faq-heading {
    background-color:rgba(10,87,150,0.8);
    color:#ffffff;
}
.holding .faq-v3 .faq-controls a {background-color:#999999;}
.holding .faq-v3 .faq-questions {margin:0px;}
.holding .faq-v3 .faq-questions p {
    margin-bottom:0;
    font-size:1.4rem;
    padding:0.8rem 1rem;
    /*border:solid 2px #3bb3e5;*/
    color:#0a5796;
    border-top:dotted 1px;
    background:linear-gradient(135deg, #ffffff 0%, #3bb3e5 135%);
    /*border-radius:5px;*/
    background-color:#ffffff;
}
.holding .faq-v3 .faq-questions p span {
    font-size:1rem;
    font-weight:normal;
    display:block;
}
.holding .faq-v3 .faq-questions:hover p {
    background-color:#ffffff;
    color:#9f2882;
    border-left:10px solid;
}
.holding .faq-v3 .faq-questions.expanded p {
    /*background:linear-gradient(135deg, #3bb3e5 80%, #ffffff 80%);*/
    color:#001688;
    background:rgba(59,179,229,0.12);
    border:dotted 1px #001688;
    border-bottom:none;
}
.holding .faq-v3 .faq-questions.expanded:hover p {
    background-color:#0a5796;
    color:#ffffff;
}
.holding .faq-v3 .faq-questions.expanded + .faq-answers + .faq-questions p {border-top:none;}
.holding .faq-v3 .faq-answers {
    border:dotted 1px #001688;
    border-top:none;
    background-color:rgba(59,179,229,0.12);
}
.holding .faq-v3 .faq-questions.expanded + .faq-answers {padding:1rem;}
.faq-answers .ans-ctr a {
    background-color:#ffffff;
    border-color:#ffffff;
}
/* ===== Page embeds */
iframe.yt {
    width:700px;
    aspect-ratio: 16/9;
}
@media (max-width:700px) {
    iframe.yt {
        width:100%;
    }
}

/* end Knowledge Base styles */
/***********************************************/