body {
  margin: 0px;
  padding: 0px;
  color: azure;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
}
.head_flexcon {
  display: flex;
  flex-direction: column;
  background: #2b2631;
  height: 140px;
  border-bottom: 2px solid #34333e;
}
.head_load_flexcon {
  display: flex;
  flex-direction: row;
  background: #606060;
  height: 4px;
}
.head_load_on {
  width: 300px;
  background: #e28741;
}
.head_title_flexcon {
  margin-left: 28px;
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 100px;
}
.head_menu_flexcon {
  display: flex;
  flex-direction: row;
  height: 36px;
}
.main_flexcon {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: calc(100vh - 142px);
  overflow: auto;
}
.main_left {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding-top: 50px;
  background: #202020;
  border-right: 5px solid #34333e;
}
.left_indent0 {
  margin-left: 30px;
  padding-bottom: 10px;
}
.left_indent1 {
  padding-left: 55px;
  padding-bottom: 10px;
}
/* left object type update after initial input*/
.left_rel_update {
  display: flex;
  flex-direction: row;
}
.left_rel_update_name {
  padding-top: 3px;
  width: 130px;
}
.left_rel_update_label {
  transform: rotate(-90deg);
}
/*reasonability matrix selector related*/
.main_left_matrix {
  position: relative;
  width: 225px;
  height: 200px;
}
/*reasonability sections */
.main_left_matrix_un_inac,
.main_left_matrix_un_ac,
.main_left_matrix_rea_inac,
.main_left_matrix_rea_ac {
  position: absolute;
  width: 80px;
  height: 70px;
}
.main_left_matrix_un_inac {
  left: 20px;
  top: 15px;
  background: #e24172;
  border: 10px solid #f8e933;
}
.main_left_matrix_un_ac {
  left: 125px;
  top: 15px;
  background: #3780f5;
  border: 10px solid #f8e933;
}
.main_left_matrix_rea_inac {
  left: 20px;
  top: 110px;
  background: #e24172;
  border: 10px solid #18dd27;
  opacity: 0.3;
}
.main_left_matrix_rea_ac {
  left: 125px;
  top: 110px;
  background: #3780f5;
  border: 10px solid #18dd27;
  opacity: 0.3;
}

/*reasonability labels */
.main_left_matrix_label_un,
.main_left_matrix_label_rea,
.main_left_matrix_label_ac,
.main_left_matrix_label_inac {
  position: absolute;
  font-size: 20px;
  font-weight: 300;
}
.main_left_matrix_label_un {
  transform: rotate(-90deg);
  left: -40px;
  top: 48px;
  color: #f8e933;
}
.main_left_matrix_label_rea {
  transform: rotate(-90deg);
  left: -33px;
  top: 140px;
  color: #18dd27;
  opacity: 0.3;
}
.main_left_matrix_label_ac {
  top: -10px;
  left: 145px;
  color: #3780f5;
}
.main_left_matrix_label_inac {
  top: -10px;
  left: 35px;
  color: #e24172;
}

/*reasonability proportion*/
.main_left_matrix_pro_un_inac,
.main_left_matrix_pro_un_ac,
.main_left_matrix_pro_rea_inac,
.main_left_matrix_pro_rea_ac {
  position: absolute;
  font-size: 18px;
}
.main_left_matrix_pro_un_inac {
  left: 42px;
  top: 45px;
  text-decoration: underline;
}
.main_left_matrix_pro_un_ac {
  left: 145px;
  top: 45px;
  text-decoration: underline;
}
.main_left_matrix_pro_rea_inac {
  left: 42px;
  top: 140px;
  opacity: 0.3;
}
.main_left_matrix_pro_rea_ac {
  left: 145px;
  top: 140px;
  opacity: 0.3;
}

/* long evaluation matrix*/
.main_matrix {
  position: relative;
  width: 380px;
  height: 200px;
}
/*reasonability sections */
.main_matrix_un_inac,
.main_matrix_un_ac,
.main_matrix_rea_inac,
.main_matrix_rea_ac {
  position: absolute;
  width: 150px;
  height: 70px;
}
.main_matrix_un_inac {
  left: 20px;
  top: 15px;
  background: #e24172;
  border: 10px solid #f8e933;
}
.main_matrix_un_ac {
  left: 200px;
  top: 15px;
  background: #3780f5;
  border: 10px solid #f8e933;
}
.main_matrix_rea_inac {
  left: 20px;
  top: 115px;
  background: #e24172;
  border: 10px solid #18dd27;
}
.main_matrix_rea_ac {
  left: 200px;
  top: 115px;
  background: #3780f5;
  border: 10px solid #18dd27;
}

/*reasonability labels */
.main_matrix_label_un,
.main_matrix_label_rea,
.main_matrix_label_ac,
.main_matrix_label_inac {
  position: absolute;
  font-size: 20px;
  font-weight: 300;
}
.main_matrix_label_un {
  transform: rotate(-90deg);
  left: -40px;
  top: 48px;
  color: #f8e933;
}
.main_matrix_label_rea {
  transform: rotate(-90deg);
  left: -33px;
  top: 147px;
  color: #18dd27;
}
.main_matrix_label_ac {
  top: -10px;
  left: 254px;
  color: #3780f5;
}
.main_matrix_label_inac {
  top: -10px;
  left: 65px;
  color: #e24172;
}

/*reasonability proportion*/
.main_matrix_pro_un_inac,
.main_matrix_pro_un_ac,
.main_matrix_pro_rea_inac,
.main_matrix_pro_rea_ac {
  position: absolute;
  font-size: 18px;
}
.main_matrix_pro_un_inac {
  left: 60px;
  top: 45px;
}
.main_matrix_pro_un_ac {
  left: 239px;
  top: 45px;
}
.main_matrix_pro_rea_inac {
  left: 60px;
  top: 145px;
}
.main_matrix_pro_rea_ac {
  left: 239px;
  top: 145px;
}
.main_eval_box {
  position: relative;
  width: 230px;
  height: 170px;
}
.main_eval_box_label {
  position: absolute;
  font-size: 20px;
  top: -10px;
  left: 35px;
  font-weight: 300;
}
.main_eval_box_itself {
  position: absolute;
  background: #303030;
  width: 230px;
  height: 190px;
  left: 0px;
  top: 15px;
}
.main_eval_box_prop_left {
  position: absolute;
  font-size: 40px;
  font-weight: 600;
  /* left: 20px; */
  top: 70px;
}
.main_eval_box_cond_left {
  position: absolute;
  font-size: 20px;
  left: 30px;
  top: 115px;
}
.main_eval_box_prop_right {
  position: absolute;
  font-size: 40px;
  font-weight: 600;
  left: 140px;
  top: 70px;
}
.main_eval_box_cond_right {
  position: absolute;
  font-size: 20px;
  left: 155px;
  top: 115px;
}
.main_eval_box_anchor {
  position: absolute;
  left: 105px;
  top: 90px;
}

/*.main_right for the case where the right screen has no bottom tab e.g., open model / datasets*/
/*.main_right_top and .main_right_bottom for the case where the right screen has a bottom tab e.g., assess attention, adjust attention*/
.main_right,
.main_right_top {
  display: flex;
  padding-top: 40px;
  padding-left: 30px;
  flex-direction: column;
  width: calc(100vw - 305px);
  background: #000000;
}

.main_right {
  overflow-y: auto;
  overflow-x: hidden;
}

.main_right_2tabs {
  display: flex;
  flex-direction: column;
}
.main_right_top {
  height: calc(100vh - 290px);
}
.main_right_bottom {
  height: 110px;
  padding-left: 30px;
  background: #202020;
}
/*right progress bar related*/
.main_right_progress {
  position: relative;
  height: 90px;
}
.main_right_progress_status {
  position: absolute;
  top: 10px;
  font-size: 24px;
  font-weight: 200;
}
.main_right_progress_unassessed {
  position: absolute;
  top: 40px;
  height: 25px;
  width: 300px;
  background: #767676;
}
.main_right_progress_reasonable,
.main_right_progress_reasonable_num {
  position: absolute;
  top: 40px;
  height: 25px;
  color: black;
  /* width: calc(300px * 0.4); */
}
.main_right_progress_reasonable {
  background: #18dd27;
}
.main_right_progress_unasonable,
.main_right_progress_unasonable_num {
  position: absolute;
  top: 40px;
  height: 25px;
  /* left: calc(300px * 0.4);
                width: calc(300px * 0.15); */
  color: #000000;
}
.main_right_progress_unasonable {
  background: #f8e933;
}

.right_heading {
  font-size: 32px;
  font-weight: 700;
}
.right_text,
.right_text_rale {
  font-size: 28px;
  font-weight: 100;
  margin-top: 10px;
  margin-bottom: 10px;
}

.right_text_rale {
  font-family: "Raleway", sans-serif;
  color: #ccc;
  font-size: 18px;
  font-weight: 400;
}

/*data prep images and description*/
.right_text_dataprep_flexcon {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
/*image browsers with 1 column used in open dataset*/
.right_image1col {
  display: flex;
  flex-direction: row;
}
.right_image1col_each {
  width: calc((100vw - 400px) / 8);
  height: calc((100vw - 400px) / 8);
  margin-right: 5px;
  background: #ccc;
}

.right_eval_example_col_1st {
  width: 120px;
}
.right_eval_example_col_rest {
  margin-right: 5px;
  width: 180px;
}
.right_eval_example_col_rest img {
  width: 180px;
}

/*image browsers with 2 columns used in assess model attention*/
.right_image2col {
  display: flex;
  flex-direction: row;
}
.right_image2col_each {
  display: flex;
  flex-direction: column;
  width: calc((100vw - 400px) / 2);
}
.right_image2col_each_name {
  font-size: 32px;
  font-weight: 200;
}
.right_image2col_each_col {
  display: flex;
  flex-direction: column;
  height: calc((100vh - 460px));
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.right_image2col_each_col_group {
  margin-top: 30px;
  width: calc((100vw - 400px) / 2);
}
.right_image2col_each_col_group_header {
  position: relative;
  width: calc((100vw - 470px) / 2 + 6 * 2px);
  height: 65px;
  background: #414141;
  margin-bottom: 4px;
}
.right_image2col_group_name {
  position: absolute;
  left: 10px;
  top: 3px;
  font-size: 28px;
}
.right_image2col_group_selection {
  position: absolute;
  left: 10px;
  top: 36px;
  font-size: 20px;
  font-weight: 200;
}
.right_image2col_subgroup_track {
  position: absolute;
  right: 10px;
  top: 10px;
}
.right_image2col_subgroup_track img {
  max-height: 27px;
  width: auto;
}

.right_image2col_each_col_group img,
.gt_mask_svg_m3,
.gt_mask_svg_m4 {
  height: calc((100vw - 540px) / 10);
}
.gt_mask_svg_m3 {
  margin: 3px;
}
.image_reasonable {
  border: solid 3px #18dd27;
  /* border: solid 3px rgba(11, 139, 21, 1); */
}
.image_unreasonable {
  border: solid 3px rgba(248, 233, 51, 1);
}
.image_accurate {
  border: solid 3px #3780f5;
}
.image_inaccurate {
  border: solid 3px #e24172;
}
.image_unassessed {
  border: solid 3px #767676;
}

/*image browsers with 2 columns scroll together used in attention adjustment*/
.right_image2col_syncscroll {
  display: flex;
  flex-direction: column;
  width: calc((100vw - 350px));
}
.right_image2col_syncscroll_name {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.right_image2col_syncscroll_name_each {
  font-size: 32px;
  font-weight: 200;
  width: calc((100vw - 350px) / 2 - 30px);
}
.right_image2col_syncscroll_flexcon {
  display: flex;
  flex-direction: column;
  height: calc((100vh - 510px));
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.right_image2col_syncscroll_group_header {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 8px;
  font-weight: 200;
  width: calc((100vw - 350px));
  font-size: 24px;
  height: 44px;
  background: #414141;
  margin-bottom: 4px;
}
.right_image2col_syncscroll_group_images {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 30px;
}

/*version 1 in each row, 3 images*/
.right_image2col_syncscroll_group_images_each {
  width: calc((100vw - 350px) / 2 - 30px);
}
.right_image2col_syncscroll_group_images_each img,
.gt_mask_svg {
  width: calc(((100vw - 350px) / 2 - 30px - 20px) / 3);
  height: calc(((100vw - 350px) / 2 - 30px - 20px) / 3);
  /* height: auto; */
}

/*version 2 in each row, 5 images*/
.right_image2col_syncscroll_group_images_each_2 {
  width: calc((100vw - 350px) / 2 - 30px);
}
.right_image2col_syncscroll_group_images_each_2 img {
  width: calc(((100vw - 350px) / 2 - 30px - 20px) / 5);
  height: auto;
}

.right_image2col_syncscroll_edit_container {
  display: inline;
  position: relative;
}
.right_image2col_syncscroll_edit {
  position: absolute;
  width: 30px;
  height: 30px;
  top: -20px;
  left: -40px;
}
.right_image2col_syncscroll_edit img {
  width: 30px;
  height: auto;
}

/*evaluation accuracy graph*/
.right_image2col_eval_text_col {
  font-size: 24px;
  margin-left: 10px;
  font-weight: 400;
  width: calc((100vw - 350px) / 2 - 30px);
}
.right_image2col_eval_graph_col {
  display: flex;
  flex-direction: row;
  font-size: 32px;
  font-weight: 200;
  background: #303030;
  width: calc((100vw - 350px) / 2 - 30px);
  height: 130px;
}
.right_image2col_eval_graph_each {
  position: relative;
  margin-left: 10px;
  margin-top: 5px;
  width: 50px;
  height: 120px;
}
.right_image2col_eval_graph_each_label {
  margin-left: -40px;
  margin-top: 60px;
  bottom: 25px;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  transform: rotate(-90deg);
  font-size: 14px;
}
.right_image2col_eval_graph_each_bar1 {
  position: absolute;
  width: 7px;
  height: 100px;
  bottom: 5px;
  left: 15px;
  background: #767676;
  display: flex;
  flex-direction: column-reverse;
}

.right_image2col_eval_graph_each_bar2 {
  position: absolute;
  width: 7px;
  height: 100px;
  bottom: 5px;
  left: 30px;
  background: #767676;
  display: flex;
  flex-direction: column-reverse;
}

.right_image2col_eval_graph_each_bar_fill {
  width: 7px;
  height: 100px;
  background: #e28741;
}

/*eval vis*/
.right_image2col_vis_flexcon {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.right_image2col_vis_flexcon_bg {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 8px;
  font-weight: 200;
  width: calc((100vw - 360px));
  font-size: 24px;
  height: 200px;
  background: #414141;
  margin-bottom: 4px;
}
.right_image2col_syncscroll_group_images_each_3 {
  width: calc((100vw - 350px) / 2 - 60px);
}
.right_image2col_syncscroll_group_images_each_3 img {
  width: calc(((100vw - 350px) / 2 - 0px - 20px) / 5 - 20px);
  height: auto;
}

.right_image2col_syncscroll_group_images_each_4 {
  width: calc((100vw - 350px) / 2 - 10px);
}
.right_image2col_syncscroll_group_images_each_4 img {
  width: calc(((100vw - 350px) / 2 - 0px - 20px) / 6 - 4px);
  height: auto;
}

/*starting object type relevance input*/
.right_input_typerel_scroll {
  flex: 1 1 auto;
  overflow-y: auto;
}
.right_input_typerel_flexcon {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
.right_input_typerel_subject {
  height: 100px;
  width: 180px;
  background: #414141;
  margin-right: 5px;
}
.right_input_typerel_subject_name {
  margin-left: 8px;
  margin-top: 2px;
  font-size: 28px;
}
.right_input_typerel_subject_frequency {
  margin-left: 8px;
  margin-top: 15px;
  font-size: 20px;
  font-weight: 200;
}
.right_input_typerel_subject_bar {
  width: 160px;
  height: 10px;
  margin-top: 8px;
  margin-left: 8px;
  background: #767676;
}
.right_input_typerel_subject_bar_on {
  width: 120px;
  height: 10px;
  background: #e28741;
}
.right_input_typerel_examples img {
  height: 100px;
  width: 100px;
}
.right_input_typerel_radio {
  margin-left: 5px;
  text-align: center;
  height: 100px;
  width: 300px;
  background: #414141;
  font-size: 24px;
  align-items: center;
}
/*Display pop up*/
.popup_background {
  position: fixed;
  left: 0px;
  top: 0px;
  width: calc(100vw);
  height: calc(100vh);
  background: rgba(0, 0, 0, 0.8);
}
.popup_container {
  position: fixed;
  left: calc((100vw -700px) / 2 - 350px);
  top: calc((100vh -500px) / 2 - 250px);
  width: 700px;
  height: 500px;
  background: #202020;
}