:root {
    --bg00: #fff;
    --bg01: #FAFBFC;
    --bg02: #F2F5FA;
    --bg03: #F0F0FC;
    --bg04: #E6EAF2;
    --border00: #F5F9FC;
    --border01: #EDF0F2;
    --border02: #DAE0E5;
    --border03: #CED4D9;
    --font00: #212121;
    --font01: #5C6166;
    --font02: #919599;
    --font03: #B6BABF;
    --primary: #3acabb;
    --color00: #404A80;
    --color01: #aaaafa;
    --primary-hover: #33b3a6;
    --color00-hover: #535aa6;
    --primary-rgb: 133, 204, 51;
    --color00-rgb: 64, 74, 128;
    --color01-rgb: 170, 170, 250;
    --top10: #008300;
    --top25: #A8E58A;
    --top50: #fbb710;
    --bottom50: #F23524;
}
:root{
  --bs-primary: var(--primary);
  --bs-light-rgb: 250,251,252;
  --bs-body-color: var(--font00);
  --bs-secondary-color: var(--font01);
  --bs-tertiary-color: var(--font02);
}

html{
  width: 100%;
  height: 100%;
  font: 16px/28px;
}
ul,li{
  padding: 0;
  margin: 0;
}
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  width: 16px;
  height: 16px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.1);
  background-clip: content-box;
  border: solid 4px transparent;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, .85);
}
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
.h5, h5{
  font-size: 1.125rem;
}
.fs-7{
  font-size: .875rem;
  line-height: 1.25;
}
.fs-15 {
    font-size: 2.125rem;
    line-height: 3.5;
}

a {
  transition: all .2s;
}

.btn{
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-line-height: 1;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: .5rem;
}
.btn-lg{
  --bs-btn-font-size: 1rem;
  --bs-btn-padding-y: 1rem;
}
.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
}
.btn-secondary{
  --bs-btn-bg: var(--color00);
  --bs-btn-border-color: var(--color00);
  --bs-btn-hover-bg: var(--color00-hover);
  --bs-btn-hover-border-color: var(--color00-hover);
  --bs-btn-active-bg: var(--color00-hover);
  --bs-btn-active-border-color: var(--color00-hover);
}
.btn-cancel{
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-bg: #565e64;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #565e64;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn-icon{
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  border: none;
  background: transparent;
}
.btn-back{
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: solid 1px var(--border02);
  background: transparent;
  color: var(--font00);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .2s;
}
.btn-back:hover{
  background: var(--color00);
  color: #fff;
}

label{
  font-size: .875rem;
}
.form-select{
  font-size: .875rem;
  border-radius: .5rem;
}
.form-control{
  font-size: .875rem;
  border-radius: .5rem;
}
.form-select:focus{
  border-color: var(--color00);
  box-shadow: 0 0 0 0.25rem rgba(100, 105, 200, 0.25);
}
.form-control:focus{
  border-color: var(--color00);
  box-shadow: 0 0 0 0.25rem rgba(100, 105, 200, 0.25);
}
.form-control-lg{
  font-size: 1rem;
  padding: .75rem 1rem;
}

ul>li{
  list-style: var(--ul-marker-style);
}
ul>li::marker{
  font-size: var(--ul-marker-size);
  color: var(--ul-marker-color);
}

.modal{
  --bs-modal-border-radius: 1rem;
  --bs-modal-padding: 1rem 1.5rem;
  --bs-modal-header-padding: 1rem 1.5rem;
  --thumb-border-color: #fff;
}
.modal-title{
  font-weight: 700;
}
.modal-footer{
  padding: .75rem 1.5rem;
}
.modal-footer .btn{
  min-width: 120px;
}
.modal-content {
    min-height: 575px;
}
.card{
  --bs-card-border-width: 0;
  --bs-card-border-radius: 1rem;
  --bs-card-spacer-x: 2rem;
  --thumb-border-color: #fff;
}
.table{
  --bs-table-hover-bg: var(--bg03);
  --bs-table-border-color: var(--border00);
}
.table>thead>tr>*{
  --bs-table-bg: var(--bg04);
}
.table>thead>tr>*:first-child,
.table>tbody>tr>*:first-child{
  border-radius: .5rem 0 0 .5rem;
}
.table>thead>tr>*:last-child,
.table>tbody>tr>*:last-child{
  border-radius: 0 .5rem .5rem 0;
}

.dropdown-menu{
  --bs-dropdown-font-size: .875rem;
  --bs-dropdown-border-radius: .5rem;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-item-padding-y: .5rem;
  --bs-dropdown-link-active-bg: var(--primary);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 2px 8px -2px rgba(0, 0, 0, .2);
}

.progress-bar{
  border-radius: var(--bs-progress-border-radius);
}

.login_container{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(var(--bg02),var(--bg04));
  overflow: hidden;
}
.login_form{
  --thumb-border-color: #fff;
  width: 560px;
  height: 720px;
  max-height: 98%;
  padding: 60px;
  border-radius: 1.5rem;
  background-color: var(--bg00);
  box-shadow: 0 40px 80px -40px #00000040;
  overflow: hidden auto;
}
.login_form .btn_password{
  color: var(--font03);
  padding: 0;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.btn_password svg{
  width: 1.25rem;
  height: 1.25rem;
}
.btn_password .icon_show{
  display: none;
  opacity: 0;
}
.btn_password.show .icon_show{
  display: block;
  opacity: 1;
}
.btn_password .icon_hide{
  display: block;
  opacity: 1;
}
.btn_password.show .icon_hide{
  display: none;
  opacity: 0;
}
.verification_code{
  display: flex;
  gap: 1rem;
}
.verification_code .form-control{
  flex: 1;
  height: 80px;
  font-size: 36px;
  font-weight: 700;
  line-height: 80px;
  text-align: center;
}
.login_form a:hover{
  color: var(--primary-hover) !important;
}

header{
  height: 80px;
  overflow: hidden;
}
main{
  --thumb-border-color: #fff;
}
.main{
  width: 100%;
  height: calc(100vh - 80px);
  padding-bottom: 1.5rem;
}
footer{
  width: 100%;
  height: 1.5rem;
  font-size: .75rem;
  color: var(--font01);
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 1.5rem;
} 
.main + footer{
  padding-left: 5rem;
}
.scrollbar{
  width: 100%;
  height: 100%;
  overflow: auto;
}

.project_bg{
  background-color: var(--bg03);
  border-radius: 1.5rem;
  padding: 2rem;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
}
.project_container{
  width: calc(25vw - 3.875rem);
  height: 100%;
  min-width: 260px;
  border-radius: 1rem;
  background-color: var(--bg00);
}
.project_concepts{
  padding-bottom: 24px;
}
.project_concepts_title{
  font-size: .875rem;
  color: var(--font02);
  font-weight: 700;
}
.concept_list{
  padding: 0 1rem;
}
.concept_list .item{
  display: flex;
  align-items: center;
  background-color: transparent;
  border-radius: .75rem;
  padding: .5rem 1rem;
  transition: all .2s;
}
.concept_list .item:hover{
  color: #fff;
  background-color: var(--primary);
}
.concept_img{
  width: 80px;
  height: 56px;
  flex-shrink: 0;
  border-radius: .5rem;
  border: solid 1px var(--border02);
  overflow: hidden;
  cursor: pointer;
}
.concept_img:hover{
  border-color: var(--color00);
}
.image_preview{
  --bs-tooltip-bg: #fff;
  --bs-tooltip-border-radius: 1rem;
  --bs-tooltip-max-width: 100%;
  --bs-tooltip-padding-x: 0;
  --bs-tooltip-padding-y: 0;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-arrow-width: 1rem;
  --bs-tooltip-arrow-height: .5rem;
}
.image_preview .tooltip-inner{
  box-shadow: 0 16px 24px -16px rgba(0,0,0,.2);
  overflow: hidden;
}
.image_preview img{
  max-width: 640px;
  max-height: 640px;
}
.btn_select_project{
  --bs-btn-bg: var(--bg00);
  --bs-btn-hover-bg: var(--bg00);
  --bs-btn-active-bg: var(--bg00);
  --bs-btn-border-radius: 1rem;
  --bs-btn-color: var(--font02);
  --bs-btn-hover-color: var(--font02);
  --bs-btn-active-color: var(--font02);
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 2.5rem;
  width: calc(25vw - 3.875rem);
  align-self: flex-start;
  border: dashed 1.5px var(--color00);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.btn_select_project:hover{
  border-color: var(--color00-hover);
}
.btn_select_project .icon_add{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color00);
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5317 5L12.512 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.5 12H19.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 1rem;
  transition: all .2s;
}
.btn_select_project:hover .icon_add{
  background-color: var(--color00-hover);
}
.aside{
  width: 80px;
  display: flex;
  flex-direction: column;
}
.sidebar{
  background-color: var(--bg00);
  flex-wrap: nowrap;
  gap: 1.5rem;
  padding: 0 1rem .25rem;
}
.sidebar .nav-item{
  position: relative;
}
.sidebar .nav-link{
  width: 3rem;
  height: 3rem;
  color: var(--font01);
  /* border-radius: 50%; */
  background-color: var(--bg00);
  padding: 0;
}
.sidebar .nav-link.back{
  background-color: var(--bg02);
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover{
  color: #fff;
  /* background-color: var(--primary); */
}
.sidebar .nav-link .img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sidebar .nav-link .defualt{
  display: block;
}
.sidebar .nav-link .active{
  display: none;
}
.sidebar .nav-link.active .defualt{
  display: none;
}
.sidebar .nav-link.active .active{
  display: block;
}
.sidebar .tooltip{
  display: none;
  opacity: 0;
  width: fit-content;
  height: fit-content;
  background: #000;
  color: #fff;
  font-size: .75rem;
  white-space: nowrap;
  border-radius: .25rem;
  padding: .25rem .5rem;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: .5rem;
}
.sidebar .tooltip::before{
  display: block;
  content: url('data:image/svg+xml;charset=utf-8,<svg width="6" height="9" viewBox="0 0 6 9" fill="rgb(30,30,30)" xmlns="http://www.w3.org/2000/svg"><path d="M3.78613 8.35958C4.41327 8.99888 5.5 8.55484 5.5 7.6593V1.2717C5.5 0.371858 4.40438 -0.070157 3.77996 0.577767L0.674712 3.79989C0.299054 4.18969 0.301793 4.80765 0.680892 5.1941L3.78613 8.35958Z"/></svg>');
  line-height: 1;
  color: #1e1e1e;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: -2px;
}
.sidebar .nav-item:hover .tooltip{
  display: block;
  opacity: 1;
}
.main_content{
  --thumb-border-color: var(--bg02);
  flex: 1 0 0;
  height: 100%;
  border-radius: 1.5rem;
  background-color: var(--bg02);
  margin-right: 1.5rem;
  position: relative;
  overflow: hidden;
}
.main_content>.scrollbar,
.scroll_mask{
  mask-image: linear-gradient(to top, transparent 0%, black 1rem, black calc(100% - 1rem), transparent 100%);
  -moz-mask-image: linear-gradient(to top, transparent 0%, black 1rem, black calc(100% - 1rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 1rem, black calc(100% - 1rem), transparent 100%);
}
.tab-pane{
  width: 100%;
}
.mc_content{
  min-width: 1020px;
}
.mc_top{
  width: 100%;
  background-color: var(--bg00);
  border-radius: 1rem;
  padding: 1.5rem 2rem .75rem;
}
.input_search{
  width: 400px;
  position: relative;
}
.input_search .form-control{
  --bs-form-control-bg: var(--bg02);
  height: 48px;
  padding-left: 1.5rem;
  padding-right: 3.5rem;
  border-radius: 100px;
}
.input_search .form-control:not(:focus){
  border-color: transparent;
}
.input_search .btn{
  height: calc(100% - 2px);
  --bs-btn-padding-x: 1rem;
  --bs-btn-color: var(--font01);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-border-radius: 100px;
  position: absolute;
  right: 1px;
  top: 1px;
}
.input_search .form-control::placeholder{
  color: var(--font01);
}
.mc_top .nav-item{
  margin-right: 2.5rem;
  padding-bottom: 1rem;
}
.mc_top .nav-link{
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-font-size: .875rem;
  --bs-nav-link-font-weight: 700;
  --bs-nav-link-color: var(--font02);
  --bs-nav-link-hover-color: var(--font00);
  position: relative;
}
.mc_top .nav-link::after{
  content: '';
  width: 64%;
  height: .25rem;
  background-color: transparent;
  border-radius: 1rem;
  position: absolute;
  top: 100%;
  margin: .75rem 18%;
}
.mc_top .nav-link.active{
  --bs-nav-link-color: var(--font00);
}
.mc_top .nav-link.active::after{
  display: block;
  background-color: var(--primary);
}
.filter_group{
  display: flex;
  gap: 1vw;
}
.filter_group .form-select{
  width: calc(100px + 6vw);
}
.filter_group .btn{
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: .25rem;
}
.filter_group .btn>*{
  flex-shrink: 0;
}
.filter_group .dropdown-item.jpeg::before,
.filter_group .dropdown-item.pdf::before{
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  margin-right: .25rem;
}
.filter_group .dropdown-item.jpeg::before{
  content: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C5 8.89543 5.89543 8 7 8L41 8C42.1046 8 43 8.89543 43 10V38C43 39.1046 42.1046 40 41 40H7C5.89543 40 5 39.1046 5 38V10Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 18C15.3284 18 16 17.3284 16 16.5C16 15.6716 15.3284 15 14.5 15C13.6716 15 13 15.6716 13 16.5C13 17.3284 13.6716 18 14.5 18Z"/><path d="M15 24L20 28L26 21L43 34V38C43 39.1046 42.1046 40 41 40H7C5.89543 40 5 39.1046 5 38V34L15 24Z"/></svg>');
}
.filter_group .dropdown-item.pdf::before{
  content: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 22 22" fill="none" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="1.5" d="M4.58317 1.83333H13.7498L18.3332 6.41667V19.25C18.3332 19.7563 17.9228 20.1667 17.4165 20.1667H4.58317C4.07691 20.1667 3.6665 19.7563 3.6665 19.25V2.75C3.6665 2.24374 4.07691 1.83333 4.58317 1.83333Z"/><path d="M14.9699 14.287C14.1451 14.2283 13.3509 13.9348 12.7094 13.4064C11.4569 13.6706 10.2655 14.0522 9.07413 14.5219C8.12714 16.1364 7.24125 16.9583 6.47754 16.9583C6.3248 16.9583 6.14151 16.929 6.01932 16.8409C5.68329 16.6941 5.5 16.3712 5.5 16.0483C5.5 15.7841 5.5611 15.0502 8.46317 13.8467C9.13523 12.6725 9.65455 11.4689 10.0822 10.2066C9.71565 9.50212 8.92139 7.77017 9.47126 6.88952C9.65455 6.56661 10.0211 6.39048 10.4183 6.41983C10.7237 6.41983 11.0292 6.56661 11.2125 6.80145C11.6096 7.32984 11.5791 8.44534 11.0598 10.0892C11.5485 10.9699 12.19 11.7625 12.9538 12.4376C13.5953 12.3202 14.2368 12.2322 14.8783 12.2322C16.314 12.2615 16.5279 12.9073 16.4973 13.2889C16.4973 14.287 15.4892 14.287 14.9699 14.287ZM6.41644 16.107L6.50809 16.0777C6.93576 15.9309 7.27179 15.6374 7.51618 15.2557C7.05796 15.4319 6.69138 15.7254 6.41644 16.107ZM10.4794 7.30049H10.3877C10.3572 7.30049 10.2961 7.30049 10.2655 7.32984C10.1433 7.82888 10.235 8.35727 10.4488 8.82696C10.6321 8.32792 10.6321 7.79953 10.4794 7.30049ZM10.6932 11.557L10.6626 11.6157L10.6321 11.5863C10.3572 12.2615 10.0517 12.9367 9.71565 13.5825L9.77674 13.5531V13.6118C10.4488 13.377 11.182 13.1715 11.854 13.0247L11.8235 12.9954H11.9151C11.4569 12.5551 11.0292 12.056 10.6932 11.557ZM14.8477 13.1128C14.5728 13.1128 14.3284 13.1128 14.0535 13.1715C14.359 13.3183 14.6644 13.377 14.9699 13.4064C15.1838 13.4357 15.3976 13.4064 15.5809 13.3477C15.5809 13.2596 15.4587 13.1128 14.8477 13.1128Z" fill="currentColor"/></svg>');
}
.summary_legend{
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: .75rem;
  color: var(--font01);
}
.summary_legend .legend{
  display: flex;
  align-items: center;
  gap: .5rem;
  background-color: transparent;
}
.summary_legend .legend::before{
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: .25rem;
}
.top10::before,
.top10{
  background-color: var(--top10);
}
.top25::before,
.top25{
  background-color: var(--top25);
}
.top50::before,
.top50{
  background-color: var(--top50);
}
.bottom50::before,
.bottom50{
  background-color: var(--bottom50);
}
.table_study_summary{
  font-weight: 700;
  vertical-align: middle;
}
.table_study_summary thead{
  text-align: center;
}
.table_study_summary>:not(caption)>*>*{
  padding: .25rem .5rem;
}
.table_study_summary .concept_img{
  width: 160px;
  height: 100px;
}
.table_study_summary .cell{
  width: 100%;
  height: 32px;
  border-radius: .5rem;
}
.table_study_summary_body tr>*:first-child{
  position: sticky;
  left: 0;
}
.table_study_summary_body tbody tr > * {
    background-color: #fff;
}
.cc_progress_group{
  --bs-gutter-x: 6%;
}
.ot_list{
  --ul-marker-size: .6rem;
  --ul-marker-color: var(--font02);
  --ul-marker-style: inside;
}

.carousel_compare .carousel-control-prev,
.carousel_compare .carousel-control-next{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: solid 1px var(--border03);
  background-color: #ffffff10;
  backdrop-filter: blur(10px);
  top: 1rem;
}
.carousel_compare .carousel-control-next-icon,
.carousel_compare .carousel-control-prev-icon{
  width: 1.5rem;
  height: 1.5rem;
}
.carousel_compare .carousel-control-next-icon{
  margin-left: 2px;
}
.carousel_compare .carousel-control-prev-icon{
  margin-right: 2px;
}
.carousel_compare .carousel-control-prev{
  left: initial;
  right: 5rem;
}
.carousel_compare .carousel-control-next{
  right: 1.5rem;
}

.sc_top_concept{
  border-radius: .75rem;
  background-color: var(--bg03);
  padding: 1rem 1.5rem;
}

.commentary_form_list label{
  width: 280px;
}

/* loading */
.loading_container{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999;
}
.loading_content{
  color: var(--color01);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.animate_stroke{
  stroke-dasharray: 200;
  stroke-dashoffset: -400;
  animation: loading 1.5s ease-in-out infinite;
  transform: rotate(270deg);
}
.masonry_container{
  margin: 0 -12px;
}
.masonry_item{
  width: 100%;
  min-width: 300px;
  padding: 0 12px 24px;
  float: left;
}
.masonry_container .table{
  border-color: #e6eaed;
}
.masonry_container .table td,
.masonry_container .table th{
  font-size: 14px;
}

.masonry_container .table tr th{
  border-radius: 0;
}
.masonry_container .table tr>*:first-child{
  border-left: none;
  padding-left: 1.5rem;
}
.masonry_container .table tr>*:last-child{
  border-right: none;
}
.masonry_container .table thead{
  border-color: #d7d9db;
}
@media screen and (min-width: 750px) {
  .masonry_item{
    width: 50%;
  }
}
@media screen and (min-width: 1128px) {
  .masonry_item{
    width: 33.33%;
  }
}
@media screen and (min-width: 1840px) {
  .masonry_item{
    width: 20%;
  }
}

@keyframes loading {
  to {
    stroke-dashoffset: 0;
  }
}