/*
 * Styles for backend-authored education and exercise content.
 *
 * Ported from HTMLFormatter.getCssForExerciseAndEducation() in
 * EmployeePrevention.Persistence. There it was injected as a <style> element inside a
 * full HTML document rendered in an isolated WebView, so it could use bare selectors
 * like body, div and p safely.
 *
 * Here the content lives in the application's own DOM, so every rule is scoped under
 * .sg-content. Without that scoping, `div { background-color: #EAEFF4; padding: 2em }`
 * would restyle every div in the app. The server strips style elements and attributes
 * from content for the same reason.
 *
 * Values are transcribed, not reinterpreted: the content was signed off as it looks today.
 */

/* body { ... } in the original */
.sg-content {
    font-family: 'Inter', system-ui, sans-serif;
    padding: 0;
    color: #001A37;
    background-color: #F8FAFC;
    line-height: 1.5em;
    padding-bottom: 1em;
    margin: 1em 0;
}

.sg-content a {
    color: #0056A4;
    text-decoration: none;
    font-weight: bold;
}

.sg-content h1 { font-family: 'Oxygen', sans-serif; color: #002B5B; font-size: 2em; line-height: 1.5em; }
.sg-content h2 { font-family: 'Oxygen', sans-serif; font-size: 1.5em; color: #001A37; padding: 0.7em 0; margin: 0; line-height: 1.3; }
.sg-content h3 { font-family: 'Oxygen', sans-serif; font-size: 1.3em; font-weight: bold; color: #001A37; }
.sg-content h4 { font-family: 'Inter', sans-serif; font-size: 1em; color: #001A37; padding: 0.7em 0; margin: 0 0 0.7em 0; }

.sg-content div {
    background-color: #EAEFF4;
    padding: 2em 1.5em;
    border-radius: 1.5em;
    margin: 1.5em 0;
}

.sg-content p { font-size: 16px; padding: 0.7em 0; margin: 0; }
.sg-content p.center { text-align: center; }
.sg-content p.fs14 { font-size: 14px; }
.sg-content img { width: 100%; }
    .sg-content ul li, .sg-content ol li, .sg-content th, .sg-content td {
        font-size: 16px;
    }
    .sg-content .scrollhint {
        display: none;
    }

    .sg-content .reflection {
        background-color: #33557C;
    }
.sg-content .reflection h4 {
    color: #002B5B; font-weight: 700; background-color: #EAEFF4;
    padding: 0.25em 0.5em; display: inline-block; border-radius: 1em;
}
.sg-content .reflection p,
.sg-content .reflection li,
.sg-content .reflection a { color: #F8FAFC; }
.sg-content .reflection p strong { font-size: 1.3em; line-height: 1.5em; font-weight: 600; }

.sg-content .container,
.sg-content .exercise,
.sg-content .conclusion {
    border: 1px solid #B8B8B8;
    background-color: transparent;
    padding: 2em 1em;
}
.sg-content .container h2 { padding: 1em 0.5em; margin-bottom: 1em; }
.sg-content .conclusion h4,
.sg-content .exercise h4 {
    color: #002B5B; font-weight: 700; background-color: #EAEFF4;
    padding: 0.25em 0.5em; display: inline-block; border-radius: 1em;
}
.sg-content .conclusion p { font-size: 1.3em; line-height: 1.55; }
.sg-content .conclusion h4 img { height: 15px; display: inline; width: auto; vertical-align: middle; }

.sg-content .mark {
    padding: 1.5em 2em;
    margin: 2em 0;
    border-left: 5px solid #d5e0f5;
    background-color: #F2F8F9;
    vertical-align: middle;
}

.sg-content .bg-audio {
    padding: 0.5em 1em 2.5em 1em;
    text-align: center;
    color: #7E8CA3;
    font-weight: bold;
    border-radius: 1em;
    background-image: url(../img/audio-file-bg-gray.png);
    background-color: #5d7982;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 115%;
    margin-bottom: 0.5em;
}
.sg-content .bg-audio p { margin: 0 0 0.4em 0; padding: 0; }
.sg-content .bg-audio audio { margin-right: 2em; }
.sg-content .bg-audio.hanna { background-image: url(../img/audio-file-bg-gray-hanna.png); }
.sg-content .bg-audio.alex { background-image: url(../img/audio-file-bg-gray-alex.png); }
.sg-content audio::-webkit-media-controls-enclosure { background-color: #cce1ed; }

.sg-content .bg-video {
    background-color: #cce1ed;
    border-radius: 10px;
    padding: 0.7em 0.7em 0.1em 0.7em;
    margin-bottom: 1em;
    text-align: center;
    color: #728FAE;
    font-weight: bold;
}
.sg-content .bg-video p { font-size: 0.9em; margin: 0.2em; padding: 0; }

.sg-content table {
    width: 100%;
    margin: 0.5em 0;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    padding: 0;
    border-spacing: 0;
}
.sg-content table tr:first-child th:first-child { border-top-left-radius: 8px; }
.sg-content table tr:first-child th:last-child { border-top-right-radius: 8px; }
.sg-content table tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.sg-content table tr:last-child td:last-child { border-bottom-right-radius: 8px; }
.sg-content th.center, .sg-content td.center { text-align: center; }
.sg-content th, .sg-content td { padding: 0.5em 1em; border: 0; vertical-align: top; text-align: left; }
.sg-content th { background-color: #D0E1F3; }
.sg-content td { background-color: #EAEFF4; }
.sg-content th.darker { background-color: #99aac0; }
.sg-content td.darker { background-color: #c3d5e5; }
.sg-content th.darker.textlight { color: #F2F8F9; }
.sg-content table.centered td { text-align: center; }
.sg-content table.stronged td { font-weight: bold; }
.sg-content table.orange th { background-color: #ffb380; color: #2F303D; }
.sg-content table.orange td { background-color: #fbd2b6; color: #2F303D; }
.sg-content td.empty { background-color: transparent; border-color: transparent; }
.sg-content table.orange td.orange-light { background-color: #f9ddca; }
.sg-content table.blue th { background-color: #9DC6EB; color: #2F303D; }
.sg-content table.blue td { background-color: #B5D9F4; color: #2F303D; }
.sg-content table.blue td.blue-light { background-color: #c6e2f7; }

.sg-content span.rotate { display: block; transform: rotate(-90deg); width: 30px; }
.sg-content .lh { color: #7E8CA3; font-weight: bold; margin: 1.5em 0 0.5em 0; }
.sg-content .lh.l { color: #7E8CA3; font-size: 1.2em; }

.sg-content ol, .sg-content ul { padding-inline-start: 1.5em; }
.sg-content ol.s, .sg-content ul.s { font-size: 0.8em; }
.sg-content ol > li, .sg-content ul > li { margin-bottom: 1em; }
.sg-content ol > li > ol li,
.sg-content ol > li > ul li,
.sg-content ul > li > ul > li,
.sg-content ul > li > ol > li { margin-bottom: 0; }
.sg-content ol > li > p:first-child,
.sg-content ul > li > p:first-child { display: inline; }
.sg-content ol.l > li, .sg-content ul.l > li { font-weight: bold; }

.sg-content .example { border-left: 5px solid #c1cde3; }
.sg-content .example-content { border-top: 0; padding: 0.5em 1em 1em 2em; margin-top: 0; margin-bottom: 0; }
.sg-content .example .example-content:not(:last-child) { margin-bottom: 0; }
.sg-content .example-hl { margin-bottom: 0; padding: 1em 1em 0.5em 2em; text-align: left; font-weight: bold; }
.sg-content .example ul, .sg-content .example ol { padding-left: 2em; }
.sg-content .nextbutton { height: 15px; width: 15px; display: inline; vertical-align: text-top; margin: 0 5px; }

.sg-content a.download {
    display: grid; grid-template-columns: minmax(0, auto) auto;
    align-items: center; justify-content: center; column-gap: 16px; padding: 12px 0;
}
.sg-content a.download .text {
    background-color: transparent; padding: 0; border-radius: 0; margin: 0;
    text-align: left; min-width: 0; font-size: 16px; font-weight: 500; color: #0056A4;
}
.sg-content a.download .icon { vertical-align: middle; width: 20px; height: 20px; }

.sg-content a.exerciseclose {
    display: grid; grid-template-columns: minmax(0, auto) auto;
    align-items: center; justify-content: center; column-gap: 16px; padding: 12px 0;
}
.sg-content a.exerciseclose .text {
    background-color: transparent; padding: 0; border-radius: 0; margin: 0;
    text-align: left; min-width: 0; font-size: 20px; font-weight: 600; color: #002B5B;
}
.sg-content a.exerciseclose .icon { vertical-align: middle; height: 20px; }

.sg-content a.btn {
    display: inline-block;
    background-color: #1469C4;
    color: #F8FAFC;
    border-radius: 30px;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    padding: 14px 24px;
    font-weight: bold;
    text-decoration: none;
    font-size: 20px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.sg-content a.btn.block { display: block; text-align: center; }

.sg-content a.imgbtn {
    font-weight: normal; font-size: 0.9em; display: block; border-radius: 1em;
    background-color: #2F303D; padding: 1em; line-height: 1.2em; color: #F5FCFF;
    margin-bottom: 0.5em;
}
.sg-content a.imgbtn span { display: table-cell; vertical-align: middle; }
.sg-content a.imgbtn span:first-child { padding-right: 10px; }
.sg-content a.imgbtn span:first-child img { width: 30px; }

.sg-content .mt-1 { margin-top: 0.5em; }
.sg-content .mt-2 { margin-top: 1em; }
.sg-content .mt-3 { margin-top: 1.5em; }
.sg-content .mb-1 { margin-bottom: 0.5em; }
.sg-content .mb-2 { margin-bottom: 1em; }
.sg-content .mb-3 { margin-bottom: 1.5em; }
.sg-content .ml-1 { margin-left: 0.5em; }
.sg-content .ml-2 { margin-left: 1em; }
.sg-content .ml-3 { margin-left: 1.5em; }
.sg-content .mr-1 { margin-right: 0.5em; }
.sg-content .mr-2 { margin-right: 1em; }
.sg-content .mr-3 { margin-right: 1.5em; }

/* The original had "@media screen and(max-width: 580px)" -- missing the space after
   "and", which makes the query invalid and means these rules never applied in the app
   either. Transcribed with the space so they behave as evidently intended; if that
   changes the approved appearance, delete these two rules rather than the space. */
@media screen and (max-width: 580px) {
    .sg-content span.hyphen::before { content: '-'; }
    .sg-content span.br { display: block; }
}

.sg-content span.orange { color: #F18739; }
.sg-content span.bold { font-weight: bold; }
.sg-content .vertical {
    line-height: 1; padding-top: 0.5rem; transform: rotate(180deg);
    white-space: nowrap; writing-mode: vertical-rl;
}

.sg-content table.feelings { width: 100%; border: 0; padding: 2px; }
.sg-content table.feelings tr:first-child th:first-child,
.sg-content table.feelings tr:first-child td:first-child { border-top-left-radius: 0; }
.sg-content table.feelings tr:first-child th:last-child,
.sg-content table.feelings tr:first-child td:last-child { border-top-right-radius: 0; }
.sg-content table.feelings tr:last-child th:first-child,
.sg-content table.feelings tr:last-child td:first-child { border-bottom-left-radius: 0; border-top-right-radius: 10px; }
.sg-content table.feelings tr:last-child th:last-child,
.sg-content table.feelings tr:last-child td:last-child { border-bottom-right-radius: 0; border-top-left-radius: 10px; }
.sg-content table.feelings td,
.sg-content table.feelings th { border: 0; padding: 8px 4px; color: #2F303D; font-weight: 600; }
.sg-content table.feelings th { text-align: center; font-weight: 900; font-size: 1.2em; }
.sg-content table.feelings td {
    line-height: 1; padding-top: 0.5rem; transform: rotate(180deg);
    white-space: nowrap; writing-mode: vertical-rl;
}
.sg-content table.feelings.sad th { background-color: #575da7; }
.sg-content table.feelings.sad tr:first-child td { background-color: #696eb5; }
.sg-content table.feelings.sad tr:last-child td { background-color: #8088c2; }
.sg-content table.feelings.surprise th { background-color: #d9b84e; }
.sg-content table.feelings.surprise tr:first-child td { background-color: #dec166; }
.sg-content table.feelings.surprise tr:last-child td { background-color: #e6cf8a; }
.sg-content table.feelings.fear th { background-color: #4c81c7; }
.sg-content table.feelings.fear tr:first-child td { background-color: #699adb; }
.sg-content table.feelings.fear tr:last-child td { background-color: #84afe8; }
.sg-content table.feelings.happy th { background-color: #87c45a; }
.sg-content table.feelings.happy tr:first-child td { background-color: #a6db7f; }
.sg-content table.feelings.happy tr:last-child td { background-color: #c1eda1; }
.sg-content table.feelings.rejecting th { background-color: #c98344; }
.sg-content table.feelings.rejecting tr:first-child td { background-color: #e3a166; }
.sg-content table.feelings.rejecting tr:last-child td { background-color: #e8b384; }
.sg-content table.feelings.angry th { background-color: #ad3d45; }
.sg-content table.feelings.angry tr:first-child td { background-color: #d16068; }
.sg-content table.feelings.angry tr:last-child td { background-color: #e8848b; }

.sg-content span.more { color: #8BB7D8; font-weight: 900; }
.sg-content button.more { background-color: transparent; border: 0; color: #8BB7D8; font-weight: 900; }