/* @import url("https://fonts.googleapis.com/css2?family=Google Sans:wght@200;300;400;500;600;700;800&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
* {
  font-family: "Google Sans", sans-serif;
}

body {
  margin: 0;
  font-family: "Google Sans", sans-serif;
}

table {
  font-family: "Google Sans", sans-serif;
  border-collapse: collapse;
  width: 100%;
  /* background-color:#fff; */
}

th {
  padding: 0px;
  box-sizing: border-box;
}

td {
  padding: 0px;
  box-sizing: border-box;
}

input {
  font-family: "Google Sans", sans-serif;
  box-sizing: border-box;
  background-color: transparent;
}

textarea {
  font-family: "Google Sans", sans-serif;
  box-sizing: border-box;
  outline: none;
  background-color: transparent;
}

textarea::-webkit-scrollbar {
  width: 5px;
}

textarea::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #ccc;
}

button {
  font-family: "Google Sans", sans-serif;
}

select {
  background-color: transparent;
  font-family: "Google Sans", sans-serif;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  background-image: url("../asset/svg/arrow_down.svg");
  padding-right: 24px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: calc(100% - 3px);
  outline: none;
  cursor: pointer;
  /* box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.20); */
}

form {
  margin: 0px;
}

a {
  text-decoration: none;
  color: #000;
}

.box_header_top {
  box-sizing: border-box; /* รวม padding และ border ใน height */
  display: flex;
  justify-content: space-between;
  padding: 4px 16px; /* บน-ล่าง 4px, ซ้าย-ขวา 16px */
  height: 72px; /* รวมทุกอย่างต้องไม่เกิน 62px */
  border: 1px solid #000;
  border-top: 2px solid #000; /* ขอบบนจะมีความหนา 2px */
  background-color: #fff;
}

.box_logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

#logo_company {
  max-width: 6vw;
  min-width: 15px;
}

#logo_iso_bsi {
  width: 5vw;
}

.user-info {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.user-info .box_username {
  margin-top: 12px;
  text-align: right;
  line-height: 20px;
}

.user-info .img_user_image {
  display: flex;
  align-items: center;
}

.padding_page {
  /* background-color:#EEEDEB!important; */
  padding-top: 16px;
  /* padding-bottom:16px; */
  padding-left: 48px;
  padding-right: 48px;
}

.navbar_pd_border_1 {
  border: 1px solid #000;
  border-bottom: 0px;
}

.navbar_pd_top {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 16px;
  padding-right: 16px;
}

.navbar_user_right {
  text-align: right;
  padding-right: 16px;
  line-height: 20px;
}

.navbar_text_username {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

.navbar_text_username_gold {
  -webkit-text-stroke: 0.5px black;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1px;
  background: linear-gradient(0deg, #fed45e, #987f38);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  paint-order: stroke fill !important;
}

.navbar_text_email {
  font-size: 13px;
  font-weight: 400;
}

.navbar_user_image {
  background-image: url("../asset/image/default_user.png");
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid #000;
  cursor: pointer;
}

.navbar_logo_iso {
  width: 100px;
}

.navbar_logo_company {
  width: 150px;
}

.div_weather_marquee {
  height: 40px;
  border-bottom: 1px solid #000;
}

.td_weather_fixed {
  width: 269px;
  border: 0.5px solid #505050;
  padding: 0px;
}

.td_marquee {
  padding-left: 24px;
}

.div_header_type {
  /* height:81px; */
  background-color: #eff0f2;
  border: 1px solid #000;
  border-top: 0px;
}

.div_header_type_padding_24 {
  padding: 24px;
}

.text_type_admin {
  padding-left: 8px;
  width: 42px;
  font-size: 14px;
  font-weight: 400;
  color: #161616;
}

.tr_height_33 {
  height: 33px;
}

.tr_height_32 {
  height: 32px;
  /* background-color:##EFF0F2; */
}

.icon_32 {
  width: 32px;
  height: 32px;
}

.table_height_64 {
  height: 64px;
}

.tr_header {
  /* border-right: 1pt solid #000; */
  text-align: center;
  line-height: 18px;
}

.tr_height_48 {
  height: 48px;
}

.tr_height_40 {
  height: 40px;
}

.div_header_menu {
  /* height:40px; */
  border: 1px solid #000;
  border-top: 0px;
}

.td_box_menu {
  /* width:10%; */
  width: 8%;
  border-bottom: 1px solid #000;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  /* border-right: 0.5px solid #000; */
  cursor: pointer;
}

.table_header {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.td_box_header {
  border-top: 1pt solid #000;
  border-bottom: 1pt solid #000;
  height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-left: 1pt solid #000;
  /* padding-left:16px;
  padding-right:16px; */
}

.td_w_16 {
  width: 48px;
}

.td_w_24 {
  width: 24px;
}

.td_w_32 {
  width: 32px;
}

.td_w_48 {
  width: 48px;
}

.td_w_60 {
  width: 60px;
}

.td_w_64 {
  width: 64px;
}

.td_w_66 {
  width: 66px;
  height: 40px;
}

.td_w_96 {
  width: 96px;
}

.text_12 {
  font-size: 12px;
}

.text_12_400 {
  font-size: 12px;
  font-weight: 400;
}

.text_14 {
  font-size: 14px;
}

.text_14_600 {
  font-size: 14px;
  font-weight: 600;
}

.text_14_400 {
  font-size: 14px;
  font-weight: 400;
}

.text_16_600 {
  font-size: 16px;
  font-weight: 600;
}

.margin_top_24 {
  margin-top: 24px;
}

.border_bottom_1_black {
  border-bottom: 1pt solid #000;
}

.border_bottom_1_5_black {
  border-bottom: 1.5pt solid #000;
}

.input_form {
  font-family: "Google Sans", sans-serif;
  width: 100%;
  font-size: 14px;
  height: 40px;
  padding: 8px;
  outline: none;
  box-sizing: border-box;
  border: 0.5pt solid #505050;
  border-bottom: 1.5pt solid #505050;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.input_form {
  -moz-appearance: textfield;
}
.input_form::-webkit-inner-spin-button {
  display: none;
}
.input_form::-webkit-outer-spin-button,
.input_form::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input_form_outline {
  font-family: "Google Sans", sans-serif;
  width: 100%;
  font-size: 14px;
  height: 40px;
  padding: 8px;
  padding-left: 0px;
  outline: none;
  box-sizing: border-box;
  border: 0px;
}

.input_form_outline {
  -moz-appearance: textfield;
}
.input_form_outline::-webkit-inner-spin-button {
  display: none;
}
.input_form_outline::-webkit-outer-spin-button,
.input_form_outline::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.select_form {
  border: 0.5pt solid #505050;
  border-bottom: 1.5pt solid #505050;
  box-sizing: border-box;
  padding: 8px;
  width: 100%;
  height: 40px;
  /*box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  background-image: url("../asset/svg/arrow_down.svg");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: calc(100% - 8px);
  outline: none;
  cursor: pointer;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.20); */
}

.td_pd_left_8 {
  padding-left: 8px;
}

.td_pd_right_8 {
  padding-right: 8px;
}

.td_pd_input_form {
  padding-top: 4px;
  padding-bottom: 16px;
}

.imgae_company {
  width: 32px;
  height: 32px;
}

/* navbar */
.header_navbar {
  height: 64px;
  padding-left: 16px;
  padding-right: 16px;
  border: 0.5pt solid #000;
  border-bottom: 2pt solid #000;
}

.image_navbar_user {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: contain;
  border: 1px solid #000;
}

.project_image {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #000;
  object-fit: cover;
  vertical-align: middle;
}
.text_navbar_username {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

.text_navbar_user_detail {
  font-size: 13px;
  font-weight: 400;
}

.navbar_menu {
  padding-top: 24px;
  padding-bottom: 24px;
  border: 0.5pt solid #000;
  border-top: 0px;
  border-bottom: 0px;
  background-color: #eff0f2;
}
.navbar_menu td {
  padding-left: 12px;
  padding-right: 12px;
}
.text_navbar_menu {
  font-size: 24px;
  font-weight: 700;
}

.icon_navbar_menu {
  vertical-align: middle;
  cursor: pointer;
}

.icon_navbar_setting {
  width: 24px;
  vertical-align: middle;
  cursor: pointer;
}

.text_navbar_admin {
  font-size: 14px;
  font-weight: 400;
}

.td_box_navbar_page {
  width: 10%;
  padding: 0px;
  text-align: center;
  cursor: pointer;
}

.td_box_navbar_page:hover {
  background-color: #eff0f2;
}

.box_navbar_page {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border: 0.5pt solid #000;
  border-right: 0pt;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
/* end navbar */

.image_company {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #000;
  object-fit: contain;
}

.box_section {
  height: 48px;
  background-color: #eff0f2;
  border: 1pt solid #000;
  margin-top: 24px;
}

.box_section_height {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 24px;
  padding-right: 24px;
}

.text_section {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

.text_type_dropdown {
  color: #000;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.select_dropdown_header {
  width: 100%;
  height: 32px;
  padding-left: 8px;
  background-color: #fff;
  border: 1px solid #505050;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
  /* box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  background-image: url("../asset/svg/arrow_down.svg");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: calc(100% - 8px);
  outline: none;
  cursor: pointer;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.20); */
}

.icon_section {
  width: 24px;
  vertical-align: -webkit-baseline-middle;
  cursor: pointer;
}

.icon_outline {
  width: 16px;
  color: rgba(255, 255, 255, 0);
  padding-left: -16px;
  vertical-align: sub;
  cursor: pointer;
}

.box_content {
  border: 1px solid #000;
  background-color: #fff;
}

.box_pd_24 {
  padding: 24px;
}

.td_box_header_timesheet {
  /* border-top:1pt solid #000;
  border-bottom:1.5pt solid #000;
  border-left:1pt solid #000; */
  /* height:53px; */
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  padding-top: 8px;
  padding-bottom: 8px;
}

.td_box_body_timesheet {
  padding: 0px;
  padding-left: 16px;
  padding-right: 8px;
  text-align: center;
  height: 40px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  /* padding-top:8px;
  padding-bottom:8px; */
  /* border-bottom:1pt solid #000;
  border-left:1pt solid #000; */
}

.td_box_body_total {
  text-align: center;
  height: 40px;
  border-top: 2px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
}

.td_box {
  /* border-top: 0.5px solid #000; */
  border-bottom: 1px solid #000;
  border-right: 1pt solid #000;
  /* height:53px; */
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}

.td_iso {
  /* border-top: 0.5px solid #000; */
  border-bottom: 1px solid #000;
  border-right: 1pt solid #000;
  /* height:53px; */
  padding: 8px 8px 8px 16px;
  text-align: left;
}
.td_box_body_iso {
  text-align: center;
  /* padding-top:8px;
  padding-bottom:8px; */
  border-bottom: 1pt solid #000;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 14px;
}
.td_list {
  /* border-top: 0.5px solid #000; */
  border-bottom: 0.5px solid #000;
  border-right: 0.5px solid #000;
  /* height:53px; */
  /* padding-top:8px;
  padding-bottom:8px; */
  padding-left: 16px;
  padding-right: 16px;
}

.td_box_body {
  /* text-align:center; */
  padding-left: 16px;
  height: 40px;
  border-left: 1pt solid #000;
  border-bottom: 1px solid #000;
}

.icon_timesheet {
  width: 16px;
  vertical-align: middle;
  cursor: pointer;
}
.icon_edit {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  cursor: pointer;
}
.select_dropdown {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  /* padding-left:8px;
  padding-right:8px; */
  border: 0px;
  cursor: pointer;
  outline: none;
}
.project_select_dropdown {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  border: 0px;
  cursor: pointer;
  outline: none;
  text-align: left;
}
.form_input_center {
  width: 100%;
  height: 40px;
  padding: 0px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  border: 0px;
  outline: none;
  outline: none;
}

.form_input {
  width: 100%;
  height: 40px;
  padding: 0px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  border: 0px;
  outline: none;
}
.form_input_text {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  border: 0px;
  outline: none;
}
.form_input_textarea {
  width: 100%;
  height: 100%;
  padding: 0px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  border: 0px;
  resize: none;
  outline: none;
}
.form_input_date {
  width: 98%;
  height: 100%;
  padding: 8px 0px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  border: 0px;
  resize: none;
  outline: none;
}

.td_box_header_project {
  border-top: 1pt solid #000;
  border-bottom: 1.5pt solid #000;
  height: 53px;
  padding: 8px;
  vertical-align: middle;
  text-align: left;
}
.without_padding {
  padding: 0px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  text-align: left !important;
}
.td_box_body_project {
  text-align: center;
  height: 40px;
  /* padding-top:8px;
  padding-bottom:8px; */
  border-bottom: 1pt solid #000;
  padding: 16px 8px;
  font-size: 14px;
}
.td_box_body_project_iso {
  text-align: left;
  height: 40px;
  /* padding-top:8px;
  padding-bottom:8px; */
  border-bottom: 1pt solid #000;
  padding: 16px 8px;
  font-size: 14px;
  vertical-align: top;
}
.td_box_body_leave {
  text-align: center;
  height: 40px;
  /* padding-top:8px;
  padding-bottom:8px; */
  border-bottom: 1pt solid #000;
  padding: 8px 8px 8px 16px;
  text-align: left;
  font-size: 14px;
  border-right: 1px solid #000;
}
.td_box_body_financial {
  text-align: center;
  height: 40px;
  /* padding-top:8px;
  padding-bottom:8px; */
  border-bottom: 1pt solid #000;
  padding: 8px 16px;
  text-align: left;
  font-size: 14px;
  border-right: 1px solid #000;
}
/* .td_box_ot{
width:48px;
height:40px;
padding-top:8px;
padding-bottom:8px;
padding-left:0px;
padding-right:0px;
}

.td_box_day{
width:67px;
height:40px;
padding-top:8px;
padding-bottom:8px;
padding-left:0px;
padding-right:0px;
} */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.show_project input {
  opacity: 0;
  width: 0;
  height: 0;
}
.show_project {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #000;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(23px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
  background-color: #ccc;
}

.slider.round:before {
  border-radius: 50%;
  background-color: #fff;
}

/* project */
.slider_project {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* border:1px solid #ccc; */
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider_project:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 2px;
  bottom: 3px;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider_project {
  background-color: #000;
}

input:focus + .slider_project {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider_project:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider_project.round {
  border-radius: 12px;
  background-color: #ccc;
}

.slider_project.round:before {
  border-radius: 50%;
  background-color: #fff;
}
.active_status {
  border: 1px solid #adc986;
  background: #adc986;
  border-radius: 34px;
  height: 30px;
  text-align: center;
  color: #fff;
}
.marketing_status {
  border: 1px solid #9dc2cb;
  background: #9dc2cb;
  border-radius: 34px;
  height: 30px;
  width: 100%;
  text-align: center;
  color: #fff;
}
.overhead_status {
  border: 1px solid #95c0d6;
  background: #95c0d6;
  border-radius: 34px;
  height: 30px;
  text-align: center;
  color: #fff;
}
.develop_status {
  border: 1px solid #b794f6;
  background: #b794f6;
  border-radius: 34px;
  height: 30px;
  text-align: center;
  color: #fff;
}
.complete_status {
  border: 1px solid #f0ac8a;
  background: #f0ac8a;
  border-radius: 34px;
  height: 30px;
  text-align: center;
  color: #fff;
}
.hold_status {
  border: 1px solid #b9b9b9;
  background: #b9b9b9;
  border-radius: 34px;
  height: 30px;
  text-align: center;
  color: #fff;
}
.reject_status {
  border: 1px solid #f3939b;
  background: #f3939b;
  border-radius: 34px;
  height: 30px;
  text-align: center;
  color: #fff;
}
.table_create tr {
  border-bottom: 1px solid #000;
}

#table_td_create {
  width: 20%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-right: 1px solid #000;
}
#add_table_td_create {
  width: 20%;
  padding-left: 16px;
  padding-right: 16px;
  border-right: 1px solid #000;
}
#submit_button {
  padding: 0px;
  border: 0px;
}
.clock_leave {
  background-color: #dad7ce;
  /* text-align: left;
  padding-left: 16px;
  padding-right: 8px; */
}
.clock_late {
  background-color: #feb75b;
}
.clock_ontime {
  background-color: #fed45e;
}
.clock_early {
  background-color: #ccdb64;
}
.noclock{
  background-color: #fff;
}
.text_chart {
  text-align: center;
  font-size: 14px;
  font-weight: 400px;
  vertical-align: top;
}

/* header */
.header_type_border {
  border: 1px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  background-color: #eff0f2;
}

.header_type_border_pd {
  padding: 24px;
}

.tr_header_type_border_height {
  height: 43px;
}

.header_menu_border {
  border: 1px solid #000;
  border-top: 0px;
  /* border-bottom:0px; */
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  /* border-bottom:8px solid #F15A2E; */
}

.border_bottom_header_menu {
  margin: 0px;
  padding: 0px;
  border-bottom: 8px;
  border-style: solid;
  border-image: linear-gradient(
      to right,
      /* #c4e17f 0px, #c4e17f 50px,
    #f7fdca 50px, #f7fdca 100px,
    #fad071 100px, #fad071 150px,
    #f0766b 150px, #f0766b 200px,
    #db9dbe 200px, #db9dbe 250px,
    #c49cdf 250px, #c49cdf 300px,
    #6599e2 300px, #6599e2 350px,
    #61c2e4 350px, #61c2e4 400px */
        /* LGBT
    #760089 0%,
    #760089 10%,
    #760089 20%,
    #E70000 30%,
    #FF8C00 40%,
    #FFEF00 50%,
    #00811F 60%,
    #0044FF 70%,
    #760089 80%,
    #760089 90%,
    #760089 100% */
        #61c2e4 0%,
      #6599e2 10%,
      #c49cdf 20%,
      #c4e17f 30%,
      #f7fdca 40%,
      #fad071 50%,
      #f0766b 60%,
      #db9dbe 70%,
      #c49cdf 80%,
      #6599e2 90%,
      #61c2e4 100%
        /* rgba(255, 0, 0, 1) 0%,
    rgba(255, 154, 0, 1) 10%,
    rgba(208, 222, 33, 1) 20%,
    rgba(79, 220, 74, 1) 30%,
    rgba(63, 218, 216, 1) 40%,
    rgba(47, 201, 226, 1) 50%,
    rgba(28, 127, 238, 1) 60%,
    rgba(95, 21, 242, 1) 70%,
    rgba(186, 12, 248, 1) 80%,
    rgba(251, 7, 217, 1) 90%,
    rgba(255, 0, 0, 1) 100% */
    )
    5 5 100% 5;
}

.tr_header_menu {
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.td_header_menu {
  width: 8%;
  border-right: 1px solid #000;
  background-color: #fff;
}

.td_header_menu_select {
  width: 8%;
  border-right: 1px solid #000;
  background-color: #ededed;
}

.td_header_menu:hover {
  background-color: #ededed;
}

/* popup */
.page_popup {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
}

.bg_popup {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

/* tooltip */
.tooltip_image {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip_image .tooltiptext_image {
  visibility: hidden;
  width: 100%;
  background-color: #eff0f2;
  text-align: center;
  border-radius: 8px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  top: 100%;
  left: 70%;
  transform: translateX(-50%);
}

.tooltip_image:hover .tooltiptext_image {
  visibility: visible;
  opacity: 1;
}

.tooltip_image.bottom .tooltiptext_image {
  top: 40%;
  bottom: auto;
}

.tooltip_image_asset {
  position: relative;
  display: contents;
  cursor: pointer;
}

.tooltip_image_asset .tooltiptext_image_asset {
  visibility: hidden;
  max-width: 1600px;
  /* margin-left:36px; */
  background-color: #f3f3f3;
  text-align: left;
  border-radius: 8px;
  padding: 10px;
  position: fixed;
  z-index: 1;
  opacity: 0.1;
  transition: opacity 0.3s;
  top: 80%;
  left: 15%;
  /* transform: translateX(-50%); */
}

.tooltip_image_asset:hover .tooltiptext_image_asset {
  visibility: visible;
  opacity: 1;
}

.tooltip_image_asset.bottom .tooltiptext_image_asset {
  top: 40%;
  bottom: auto;
}

/* tag */
.tag_container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 14px;
  padding: 8px;
  border: 0.5px solid #505050;
  border-bottom: 1px solid #505050;
  outline: none;
  box-sizing: border-box;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2);
}
.select_tag {
  display: flex;
  align-items: center;
  background-color: #505050;
  font-size: 11px;
  font-weight: 600;
  color: #ededed;
  border-radius: 16px;
  padding-top: 4px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 8px;
  margin-right: 8px;
  text-transform: uppercase;
}
.select_tag span {
  margin-right: 8px;
}
.select_tag button {
  background: none;
  border: none;
  cursor: pointer;
}
.tag_input {
  box-sizing: border-box;
  flex-grow: 1;
  border: none;
  outline: none;
}
.footer_style {
  border: 1px solid #000;
  border-top: 2px solid #000;
  margin-top: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 24px;
  padding-right: 24px;
  background-color: #fff;
}
.dot {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  display: inline-block;
}
input[type="radio"] {
  margin: 0px;
}
.submit_evaluation {
  width: 100%;
  margin-top: 24px;
  text-align: start;
  padding-left: 16px;
  height: 48px;
  background-color: #eff0f2;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
}
table.scroll {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  border-spacing: 0;
  width: 100%;
}