* {
  box-sizing: border-box;
}
body.modal-open {
  overflow: hidden!important;
}
/**
 * Material Modal CSS
 */
#modal_container{
  line-height: 1.5 !important;
  /*font-family: 'JetBrains Mono', monospace;*/
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
}
#modal_container p{ 
  font-weight: 300 !important;
  margin: 0 0 0.6rem 0 !important;
}
#modal{
  line-height: 1.5 !important;
  /*font-family: 'JetBrains Mono', monospace;*/
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
}
#modal p{ 
  font-weight: 350 !important;
  margin: 0 0 0.6rem 0 !important;
}
.modal {
  will-change: visibility, opacity !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1000 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
  transition-delay: $modal-delay !important;
}
.modal--active {
  visibility: visible !important;
  opacity: 1 !important;
}
.modal--align-top {
  align-items: flex-start !important;
}
.modal__bg {
  background: transparent !important;
}
.modal__dialog {
  max-width: 1200px !important;
  max-height: 90% !important;
  padding: 0 !important;
}
.modal__content {
  will-change: transform, opacity !important;
  position: relative !important;
  padding: 1rem !important;
  background: #FDFFFE !important;
  background-clip: padding-box !important;
  box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25) !important;
  opacity: 0 !important;
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1) !important;
  overflow-y: auto !important;
  height: 100vh !important;
}
.modal__content--active {
  opacity: 1 !important;
}
.modal__close {
  z-index: 1100 !important;
  position: fixed !important;
  right:-30px !important;
  float: right !important;
  top: 20px !important;
  cursor: pointer !important;
}
.modal__trigger {
  text-decoration: none;
  color: rgba(0,0,0,0.7);
  font-style: normal;
  position: relative !important;
  display: inline-block !important;
  border-style: solid !important;
  border-width: 0px 0px thin 0px !important;
  border-color: #37821494 !important;
  cursor: pointer !important;
  box-shadow: 0 0px 0px 0 rgba(0,0,0,0.26) !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.related__link {
  font-style: normal !important;
  margin: 4px 16px 4px 16px !important;
  line-height: 1.5 !important;
  color: rgba(0,0,0,0.7) !important;
}

.history__link {
  font-style: normal !important;
  line-height: 1.0 !important;
  margin: 2px 4px 2px 4px !important;
  color: rgba(41, 40, 40, 0.7) !important;
}

.history_item{
  max-width: 150px !important;
  display:  inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0px 4px 0px 4px;
}
.history_span{
  max-width: 150px !important;
  display:  inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0px 4px 0px 4px;
}

.modal__trigger--active {
  z-index: 10 !important;
}
.modal__trigger:hover {
  background: #a9f5cf9c !important;
}
#modal__temp {
  will-change: transform, opacity;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #e3f7ed !important;
  transform: none !important;
  opacity: 1 !important;
  transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}


.demo-close {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: 1.2rem !important;
  padding: 0.6rem !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 50% !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.demo-close svg {
  width: 24px !important;
  fill: #fff !important;
  pointer-events: none !important;
  vertical-align: top !important;
}
.demo-close:hover {
  background: rgba(0,0,0,0.6) !important;
}
.logo {
  position: fixed !important;
  bottom: 3vh !important;
  right: 3vw !important;
  z-index: 2 !important;
}
.logo img {
  width: 45px;
  transform: rotate(0) !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.logo img:hover {
  transform: rotate(180deg) scale(1.1) !important;
}

.modal__content__title {
  padding: 0px 16px 8px 16px !important; 
  text-align: center; 
  font-size: 20px !important; 
  font-weight:bold !important;
}
.modal__dynamic__content .loading{
  padding: 8px 16px 16px 16px !important;
}

.modal__content__related{
  max-height: 20vh !important;
  text-align: left !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  overflow-y: scroll !important;
}

.modal__content__related::-webkit-scrollbar {
  display: none;
}

.modal__content__related .history{
  font-size: 12px !important; 
  padding: 4px 16px 4px 16px !important;
}

.modal__dynamic__content {
  text-align: left !important; 
  padding: 0px 8px 0px 8px !important;
  overflow-y: scroll !important;
  max-height: 75vh  !important;
}

.modal__dynamic__content::-webkit-scrollbar {
  display: none;
}

.modal__dynamic__content strong{
  font-weight: 700!important;
}
.modal__dynamic__content .matching_main0 { font-size: 15px !important; font-weight: 400 !important;}
.modal__dynamic__content .matching_main1 { font-size: 14px !important; font-style: italic !important;}
.modal__dynamic__content .matching_main2 { font-size: 14px !important;}
.modal__dynamic__content .matching_main3 { font-size: 13px !important;}
.modal__dynamic__content .matching_main4 { font-size: 13px !important;}
.modal__dynamic__content .matching_main5 { font-size: 13px !important;}
.modal__dynamic__content .matching_main6 { font-size: 13px !important;}
.modal__dynamic__content .matching_main7 { font-size: 13px !important;}
.modal__dynamic__content .matching_main8 { font-size: 13px !important;}
.modal__dynamic__content .matching_main9 { font-size: 13px !important;}
.modal__dynamic__content .matching_main10 { font-size: 12px !important;}
.modal__dynamic__content .matching_main11 { font-size: 12px !important;}
.modal__dynamic__content .matching_main12 { font-size: 12px !important;}
.modal__dynamic__content .matching_main13 { font-size: 12px !important;}
.modal__dynamic__content .matching_main14 { font-size: 12px !important;}
.modal__dynamic__content .matching_main15 { font-size: 12px !important;}
.modal__dynamic__content .matching_sub   { font-size: 12px !important;}
.modal__dynamic__content .each_page {padding: 0px 0 0px 0 !important; border-bottom-style: solid !important; border-bottom-width: thin !important; border-bottom-color:grey !important; } 
.modal__dynamic__content .img_presentation {
  max-width: 75% !important;
}
.modal__dynamic__content .source_link {font-size: 14px !important; overflow: hidden !important; padding:0 0 16px 0 !important;}

.modal__dynamic__content .content_group {font-size: 13px !important; padding: 8px 0px 8px 0px !important;}
.modal__dynamic__content .same_page_content {padding: 8px 0px 8px 0px !important;}

.modal__content__title .loka_title{
  font-size: 16px!important;
  font-weight: normal!important;
  font-stretch: expanded!important;
}
.modal__content__title .loka_title .css_lo{
  color: #607d8b!important;
}
.modal__content__title .loka_title .css_k{
  color: #ff9800!important;
}
.modal__content__title .loka_title .css_a{
  color: #607d8b!important;
}
.modal__content__title .loka_title .css_quickdef{
  color: #009688!important;
}

@media (max-width: 640px) {
  /**.modal__trigger {
    margin-bottom: 0.8rem !important;
  }**/
  .modal__dialog {
    max-width: 100% !important;
  }
  .modal__content {
    padding: 0.6rem 0.6rem !important;
  }
  body.modal-open {
    position: fixed;
  }

  .modal__content__related{
    max-height: 34vh !important;
  }
  .modal__dynamic__content{
    max-height: 65vh !important;
  }
}