/* p {
  font-family: -apple-system, BlinkMacSystemFont,
    “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”,
    “Fira Sans”, “Droid Sans”, “Helvetica Neue”,
    sans-serif;

} */
@font-face {
    font-family: TitiliumWeb;
    src: url("../fonts/TitilliumWeb-Regular.ttf");
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Work Sans";
    src: url("../fonts/WorkSans-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Work Sans";
    src: url("../fonts/WorkSans-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Work Sans";
    src: url("../fonts/WorkSans-Bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Work Sans";
    src: url("../fonts/WorkSans-Black.ttf") format("truetype");
    font-weight: 900;
}

body {
    padding-top: 5rem;
}

.container-fluid {
    max-width: 1860px;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

legend {
    margin-top: 2em;
}

.accordion > .card {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    border-bottom: 6px solid white;
}

.accordion .card-header {
    background-color: #f2f2f2;
}

.accordion .card-header button {
    font-size: 80%;
    color: #222;
    font-size: 24px;
    font-family: 'TitiliumWeb', sans-serif;
    font-weight: 800;
    font-style: normal;
}

.section_heading_100 {
    background-image: url('../img/bg_trans_green.png');
    background-position: bottom 0px right -940px;
    background-repeat: no-repeat;
}

.section_heading_80 {
    background-image: url('../img/bg_trans_green.png');
    background-position: bottom 16px right -940px;
    background-repeat: no-repeat;
}

.section_heading_60 {
    background-image: url('../img/bg_trans_green.png');
    background-position: bottom 32px right -940px;
    background-repeat: no-repeat;
}

.section_heading_40 {
    background-image: url('../img/bg_trans_green.png');
    background-position: bottom 48px right -940px;
    background-repeat: no-repeat;
}

.section_heading_20 {
    background-image: url('../img/bg_trans_green.png');
    background-position: bottom 64px right -940px;
    background-repeat: no-repeat;
}


.collapse p {
    font-family: "Lucida Sans", "Lucida Grande", Tahoma, sans-serif;
}

.row-section_intro {
    background-color: #f0f0f0;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-bottom: 50px;
}
.col-section_intro {
    background-color: #f0f0f0;
    padding-top: 20px;
    padding-bottom: 20px;
}

ul.section_subnav {
    font-family: "Lucida Sans", "Lucida Grande", Tahoma, sans-serif;
}
ul.section_subnav li.active {
    font-weight: bold;
    background-color: #f2f2f2;
}
ul.section_subnav li:hover {
  background-color: #f8f8f8;
}
ul.section_subnav a.nav-link {
    padding-left: 4px;
    padding-right: 4px;
}

.study_path_body h1, .study_path_body h2, .study_path_body h3, .study_path_body h4, .study_path_body h5, .study_path_body h6 {
    font-family: 'TitiliumWeb', sans-serif;
    font-weight: 300;
    font-style: normal;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.study_path_body .material_item {
    margin-top: 1em;
    margin-bottom: 0.5em;
}
a.mi_anchor, a.cce_anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}
a.cce_anchor {
    top: -200px;
}
a.sbc_anchor {
  display: block;
  position: relative;
  top: -240px;
  visibility: hidden;
}
a.closeContentColumn {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.presentation-embed {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.presentation-embed iframe {
    width: 100%;
    border: none;
    height: 800px;
}
.presentation-embed.dbl-height iframe {
    height: 1300px;
}


.study_path_body .image_wrapper {
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
}
.study_path_body .video_thumbnail {
    width: 240px;
    display: block;
}
.study_path_body canvas.video_progress {
    background-color: #eee;
    width: 240px;
    height: 8px;
    margin-bottom: 1.5em;

    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -o-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

.study_path_body .material_type_icon {
    color: #001145;
}
.study_path_body .material_link {
    display: inline-block;
}
.study_path_body span.mi_title {
    display: inline-block;
    font-weight: bold;
    margin-bottom: 8px;
}
.item_text_pre {
    padding-bottom: 1em;
}
.item_text_pre hr {
    border: 2px solid #eee;
}

#th_ohje {
    background-color: #f2f2f2;
    padding: 1em;
    margin-bottom: 1em;  
}

.doc_part_forms h3, .doc_part_forms h4 {
    color: #001145;
}
.doc_part_forms h3 {
    font-size: 140%;
    margin-top: 1em;
}
.doc_part_forms h4 {
    font-size: 120%;
    margin-top: 0.6em;
}
.doc_part_content .btn {
    margin-right: 1em;
    margin-bottom: 1em;
}
.doc_part_content textarea {
  margin-bottom: 1em;
}
.doc_part_content .tox-tinymce {
  margin-bottom: 1em;
}

.doc_chapter {
  margin-bottom: 2em;
}
.doc_chapter_level_2 {
  padding-left: 1em;
}
.doc_chapter h3 {
  color: #001145;
}
.doc_chapter h4 {
  border-bottom: 2px solid #ddd;
}
.doc_chapter .revision_history {
  background-color: #eee;
  padding: 0.5em;  
}
.doc_chapter .revision_history button {
  margin-bottom: 0;
}

.inline_quiz_wrapper {
  margin-top: 1em;
}
.inline_quiz_wrapper textarea {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.plan_body {
    background-image: url("../img/suunnitelma_tausta.png");
    background-color: #f0f0f0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-top: 70px;
}

.plan_yrtti {
    background-image: url("../img/suunnitelma_tausta_yrtti.png") !important;
}

.plan_nobg {
    background: none !important;
}

table.table-doc-html td.cb_ans {
    text-align: center;
    padding-left: 1em;
}

.custom-range::-webkit-slider-thumb {
    width: 2em;
    height: 2em;
    background-color: #001145;
}
.custom-range::-moz-range-thumb {
    width: 2em;
    height: 2em;
    background-color: #001145;
}
.custom-range::-ms-thumb {
    width: 2em;
    height: 2em;
    background-color: #001145;
}
input[type=checkbox].custom-control-input:checked ~ .custom-control-label::before {
    background-color: #001145;
    border-color: #001145;
}
.nav-tabs {
    border-bottom: 1px solid #aeb2b6;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-color: #aeb2b6 #aeb2b6 #fff;
}

.card-instructor-comments {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.card-instructor-comments .card-body {
    padding: 0.8rem;
}
.card-instructor-comments .addCommentForm {
    margin-bottom: 1em;
}
.card-instructor-comments .addCommentForm textarea {
    margin-bottom: 0.5em;
}
.comment.show .comment-body { display: block; }
.comment.show .comment-header i.fa-chevron-down { display: none; }
.comment.hide .comment-body { display: none; }
.comment.hide .comment-header i.fa-chevron-up { display: none; }

.comment .comment-header {
    font-size: 90%;
    border-top: 1px solid #005aff;
    background-color: #f0f0f0;
    margin-top: 6px;
    padding-left: 4px;
}
.comment-header a.cmt_toggle {
    text-decoration: none;
    color: #212529;
}
.comment-date {
    font-size: 92%;
}
.comment .comment-header i {
    margin-left: 0.5em;
    margin-right: 0.5em;
    color: #999;
}
.comment .comment-body {
    padding-bottom: 0.5em;
}

.forum_post_title {
  color: #EB172D;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-weight: 600;
}
.btnAddForumComment {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.btnSubmitForumComment, .btnCancelForumComment {
  margin-top: 0.5em;
  margin-left: 0.7em;
}
.forum_topiclink {
  font-weight: 600;
  color: #001145;
}
.forum_comment {
  margin-right: 1em;
  margin-left: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-top: 1px solid #bbb;
}
.forum_comment_date {
  font-size: 85%;
}
span.comment_author, span.post_author {
  font-weight: 600;
}
textarea.addFormComment {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.navbar_logo {
    width: 200px;
}
@media screen and (min-width: 1200px) {
  .navbar_logo {
    width: 300px;
  }
}

.navbar {
    border-top: 5px solid #860000;
    border-bottom: 1px solid #CCC;
}

.navbar-light .navbar-nav .nav-link {
    color: #222;
}

.navbar-light .navbar-nav .nav-link .fa {
    display: block;
    font-size: 150%;
}

.navbar-light .navbar-nav a.nav-link {
    text-align: center;
}

.presentation_infobar {
    color: #fff; 
    background-color: #001145; 
    padding-left: 1em;
}

p, h6 {
  color: #0f0f0f; 
}
  
.punainen {
  color: #C32330;
}

.vihrea {
  color: #00871E;
}

.haalea {
  color: #F0EAE0;
}

.keltainen {
  color: #F49F12;
}

.harmaa {
  color: #707070;
}

.valkoinen {
  color: #ffffff;
}

.kirjanmerkki { 
  bottom: .3em; 
  font-size:90%;
  color: #ffffff;

}

span.hashtag i {
  color: #ffffff;
}

.ikoni_video {
  text-align: center;
  color: #ffffff;
}

/* .fa-stack {
  font-size: .5em;
} */

.toc {
    background-color: grey;
}

.matsku {
    background-color: rgb(255, 255, 255);
}

.suunnitelma {
    background-color: yellowgreen;
}

.otsikko {
    background-color: rgb(167, 17, 17);
}

.mat_video {
    background-color: rgb(255, 255, 255);
}

.mat_tiedot {
    background-color: rgb(192, 207, 162);
}
 
.navbar {
  text-align: left;
  background-color: #B7c0B5;
  padding-left: 0em;
}

.navbar ul {
  margin-top: 0em;
  margin-left: 0em;
  padding-top: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  font-weight: normal;
}

.navbar li {
  border-left: 0px solid black;
  display: list-item;
  margin-left: 1em;
  margin-bottom: 0.25em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0em;
  padding-bottom: 0em;
}

@media screen and (max-width: 768px) {
  .navbar {
    padding-top: 0em;
    text-align: center;
    background-color: #B7c0B5;
    padding-left: 0em;
  }

  .navbar ul {
    margin-top: 0em;
    margin-left: 0em;
    padding-top: 0.2em;
    padding-left: 0em;
    padding-right: 1em;
    font-weight: normal;
    
  }

  .navbar li {
    display: inline;
    margin-left: 0em;
    border-left: 1px solid black;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0em;
    padding-bottom: 0em;
    vertical-align: sub;
  }

  .navbar_logo {
    width: 120px;
  }
  .fw-container {
    padding-left: 0;
    padding-right: 0;
  }
  .accordion .card-header button {
    font-weight: 500;
    font-size: 20px;
  }
  .section_content_column {
    padding-left: 0;
    padding-right: 0;
  }
  .presentation_infobar h4 {
    font-size: 1.2rem;
  }
  .presentation_infobar .fa-3x {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
}        

/* Navbar background color (roi) */
.navbar-custom {
    background-color: #0b2a6d;
    border-top: 5px solid #ee2e24;
    font-family: 'TitiliumWeb', sans-serif;
}

/* Brand text color */
.navbar-custom .navbar-brand {
    color: #ffffff;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
    color: #e0e0e0;
}

/* Nav links color */
.navbar-custom .navbar-nav .nav-link {
    color: #ffffff;
    font-family: 'TitiliumWeb', sans-serif;
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus {
    color: #cccccc;
}

/* Active and current page link */
.navbar-custom .navbar-nav .active > .nav-link,
.navbar-custom .navbar-nav .nav-link.active,
.navbar-custom .navbar-nav .nav-link.show,
.navbar-custom .navbar-nav .show > .nav-link {
    color: #ffffff;
    font-weight: bold;
}

/* Disabled link */
.navbar-custom .navbar-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.5);
}

/* Navbar text */
.navbar-custom .navbar-text {
    color: #ffffff;
}

.navbar-custom .navbar-text a,
.navbar-custom .navbar-text a:hover,
.navbar-custom .navbar-text a:focus {
    color: #ffffff;
}

/* Toggler (hamburger) icon for mobile */
.navbar-custom .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

/*
.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3Csvg%3E");
}
*/

/* Custom navbar menu item jump fix */
.navbar-custom .nav-link .nav-text {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
}

.navbar-custom .nav-link .nav-text::after {
    content: attr(data-text);
    height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    font-weight: bold;
}

.navbar-custom .nav-link.active {
    font-weight: bold;
}

.text-wrap {
    white-space: normal !important;
    word-wrap: break-word;
}