/*
 MOCS Learn page CSS
 Styles for Learn landing page and for library page
 2024-08-05

 Blue #0a5796
 Plum #9f2882
*/
.ctr, #webinars {margin-bottom:2rem;}
.ctr a.mocsBtnOutline {padding:0.4rem 0.8rem;}
.ctr a.mocsBtnOutline::after {
    content:'\279E';
    margin-left:0.3rem;
}
#ctr-flex {
    display: flex;
    justify-content: space-between;
}
.about-description a:not([class*=Btn]) {font-weight:bold;}

.overview {
    font-size:1.2em;
    margin-bottom:1rem;
}

.flex {display:flex;}

/* ===== 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 */

/* ===== Badge styles */
.badge {
    font-weight:normal;
    font-size:0.8em;
    display:inline-block;
    background-color:#999999;
    color:#ffffff;
    padding:0em 0.4em;
    border-radius:0.2em;
}
/* ===== end badge styles */

/* ===== Page embeds */
iframe.yt {
    width:700px;
    aspect-ratio: 16/9;
}
@media (max-width:700px) {
    iframe.yt {width:100%;}
}
/* ===== end Page embeds */

/* Learn to Use page *************************************/
.promote {
    margin-bottom:2rem;
    border:solid 1px #0a5796;
    border-radius:0.3rem;
}
.promote-img {
    flex-basis:20%;
    text-align:center;
    background-color:#0a57961a;
    flex-grow:1;
}
.promote-txt {
    flex-basis:50%;
    box-sizing:border-box;
    padding:1rem 1.5rem 1.5rem;
    flex-grow:2;
}

.category {
    width:100%;
    border-radius:0.3rem;
    margin-bottom:1.5rem;
    margin-right:1rem;
    padding:1rem 1.5rem 1.5rem;
    background-color:#0a57961a;
    box-sizing:border-box;
}
.category h2 {font-size:2.3rem;}
.category h3 {font-size:1.7rem;}
.category h2 ~ h3 {
    margin-top:1.2rem;
}
.category p {margin:1rem 0;}
.ctr-training .category {
    background:none;
    padding:1rem 0;
}
.ctr-training h3 {margin-top:2rem;}


/* Cards styles ******************************************/
.ctr-library section {margin-bottom: 2rem;}
.card-ctr {
    flex-wrap:wrap;
    justify-content:space-between;
}
.card-ctr div {
    flex-basis:49%;
    margin-bottom:0.9rem;
    display:flex;
    align-items:stretch;
}
@media screen and (max-width:1590px) {
    .card-ctr div {flex-basis:100%;}
}
.card-ctr div a {
    box-sizing:border-box;
    width:100%;
}
.ctr .card a.mocsBtnOutline {padding:1em 1.5em;}
.card a.mocsBtnOutline {
    font-weight:normal;
    text-align:left;
    box-shadow:inset 0 0 0 2px #999999, 0 0 0 0 transparent, 0 0 0 0 transparent;
}
.card a.mocsBtnOutline:hover {box-shadow:inset 0 0 0 2px #692f7c, 0 0 0 2px #fff, 0 0 0 4px #692f7c;}
.card a.mocsBtnOutline::before {font-size:0.8em;}
.card a.mocsBtnOutline.guide::before {content:"Guide";}
.card a.mocsBtnOutline.topic::before {content:"Topic";}
.card a.mocsBtnOutline.reference::before {content:"Reference";}
.card a.mocsBtnOutline.webinar::before {content:"Webinar";}
.card a.mocsBtnOutline.video::before {content:"Video";} /* currently not in use */
.card a.mocsBtnOutline.training::before {content:"Training Video";} /* currently not in use */
.card a.mocsBtnOutline .card-title {
    font-weight:bold;
    font-size:1.25rem;
    display:block;
    margin-bottom:0.25rem;
    line-height:1.25em;
}
.card a.mocsBtnOutline .card-title::after {
    font-weight:normal;
}
.card a.mocsBtnOutline[href$=".pdf"] .card-title::after {content:" (PDF)";}
.card a.mocsBtnOutline[href$=".xlsx"] .card-title::after {content:" (XLSX)";}
.card a.mocsBtnOutline[href$=".mp4"] .card-title::after {content:" (MP4)";}