/* * 버튼 디자인 모음 */
@charset "UTF-8";


/* 공통 버튼 */

.black_btn {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 5px;
  transition: .3s;
  background-color: #222;
  color: #fff;
}

.black_btn:hover {
  background-color: #3D3D3D;
  color: #fff;
}

.black_btn:active {
  background-color: #383838;
  color: #fff;
}

.black_btn:disabled {
  background-color: #AFAFAF;
}

.gray_btn {
  padding: 6px 16px;
  border-radius: 5px;
  font-family: 'Pretendard-SemiBold';
  transition: .3s;
  background-color: #DFDFDF;
  color: #939393;
}

.gray_btn:hover {
  background-color: rgba(223, 223, 223, 0.7);
}

.gray_btn:active {
  background-color: rgba(223, 223, 223, 0.9);
}

.gray_btn:disabled {
  background-color: #DFDFDF;
  color: #939393;
}


/* 대시보드 상단 버튼 모음 wrap */
svg.icon_btn_style {
  color: #6C6C6C;
  font-size: 17px;
}

.content_btn_wrap {
  display: flex;
  column-gap: 14px;
  row-gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.content_btn_wrap .btn_style {
  display: flex;
  align-items: center;
  padding: 5px 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  gap: 10px;
  color: #6C6C6C;
}

.content_btn_wrap .btn_style:hover {
  background-color: #fff;
  color: #222;
}

.content_btn_wrap .icon_btn {
  color: #222;
  width: 23px;
  height: 34px;
}

.content_btn_wrap button svg {
  color: #6C6C6C;
  font-size: 16px;
}

.content_btn_wrap button.icon_btn svg {
  font-size: 18px;
  margin-top: 2px;
}

.content_btn_wrap button:hover svg {
  color: #222;
}

/* * 흰 버튼 공통 디자인 */
.white_btn_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.white_btn {
  display: inline-block;
  padding: 5px 12px;
  background-color: #fff;
  border: var(--common-border);
  border-radius: 5px;
  font-size: 13px;
  transition: .3s;
}
.white_btn.white_btn_small {
  padding: 3px 11px;
}
.white_btn.white_btn_small:nth-last-child(1) {
  margin-left: 5px;
}
/* 링크 연결 */
.white_btn.link {
  padding: 0 0;
}

.white_btn.link a {
  display: inline-block;
  padding: 6px 12px;
}

.white_btn.small {
  padding: 2px 7px;
  font-size: 12px;
}

.white_btn:hover {
  background-color: #EFEFEF;
}

.white_btn:active {
  background-color: #E7E7E7;
}

.white_btn:disabled {
  background-color: #EDECEC;
  color: #939393;
  border: 1px solid #D2D2D2;
}

.white_btn img {
  margin-right: 4px;
}

.white_btn svg {
  height: 13px;
}

/* * 하단 버튼 영역 */
.button_wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

.button_wrap.table_inner_pagination {
  margin-top: 3px;
}

/* * 페이지네이션 */
.pagination_wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
}

.pagination>ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* 이전/다음 */
.pagination>ul li.arrowBtn {
  display: flex;
  align-items: center;
}

/* 숫자 */
.pagination>ul li.numberBtns {
  display: flex;
  align-items: center;
}

.pagination>ul li.numberBtns ul {
  display: flex;
  flex-wrap: wrap;
  /* gap: 2px; */
}

.pagination>ul li.numberBtns ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination>ul li.numberBtns ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 24px;
  height: 24px;
  text-align: center;
  color: #AAA;
  border-radius: 5px;
  margin: 0 1px;
  padding: 0 1px;
  line-height: 24px;
}

.pagination>ul li.numberBtns ul li.active a {
  background-color: #222;
  color: #fff !important;
}

.pagination>ul li.numberBtns ul li a:hover {
  color: #222;
}

.pagination .prevBtn,
.pagination .nextBtn {
  margin: 0px 5px;
  cursor: pointer;
  display: flex;
}
.pagination .prevBtn.disabled img,
.pagination .nextBtn.disabled img {
  opacity: 0.5;
  cursor: default;
}

/* 페이지네이션 페이지 이동 */
.pageInfo {
  display: flex;
  color: #aaa;
  font-size: 14px;
  min-width: 113px;
  justify-content: flex-end;
}

.pageInfo .pages {
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  line-height: 25px;
}

.pageInfo .pages::after {
  content: '\f0d7';
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  margin-left: 5px;
  line-height: 24px;
}

.pageInfo .pages:hover,
.pageInfo .pages:hover a[selected="true"] {
  color: #222;
}
.pageInfo .pages > .items {
  padding-left: 5px;
}
.table_detail .pageInfo .pages > .items {
  padding-left: 0px;
}
.pageInfo:has(.searchBar[style*="block"]) .pages::after {
  content: '\f0d8';
}
.pageInfo .table_size:has(.list_select ul.arrow).pages::after {
  content: '\f0d8';
}

.pagination .searchBar {
  min-width: 136px;
  padding: 10px 10px 10px;
  position: absolute;
  margin-top: 24px;
  background-color: #fff;
  box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.07);
  border-radius: 5px;
  z-index: 51;
  display: none;
}

.pagination .searchBar .headline {
  color: #222;
  font-size: 13px;
  margin-bottom: 4px;
}

.pagination .searchBar .serachInput {
  display: flex;
}

.pagination .searchBar .serachInput .text_box_gray {
  border-radius: 5px 0 0 5px !important;
  color: #222;
}

.pagination .searchBar .serachInput .text_box_gray:focus {
  border: 1px solid #ddd !important;
}
.pagination .searchBar .serachInput .text_box_gray:focus::placeholder {
  color: #fff;
}
.pagination .searchBar .serachInput button[type="submit"] {
  /* margin-top: 1px; */
  background-color: #222;
  height: 32px;
  width: 32px;
  border-radius: 0 5px 5px 0;
  color: #07070700;
  background-image: url(/assets/images/svg/arrow-right-solid.svg);
  background-repeat: no-repeat;
  background-size: 13px;
  background-position: center;
}

.pagination .searchBar .serachInput button[type="submit"]:disabled {
  background-color: #ddd !important;
  border: #dddddd00 !important;
}

/* * 이전/다음 버튼 */
.pagination ul li.arrowBtn>a {
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: center;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.pagination ul li.arrowBtn.prevBtn>a {
  background-image: url(/assets/images/svg/pagination_prev.svg);
}

.pagination ul li.arrowBtn.prevBtn.disabled>a {
  background-image: url(/assets/images/svg/pagination_prev_disabled.svg);
  cursor: default;
}
.pagination ul li.arrowBtn.nextBtn>a {
  background-image: url(/assets/images/svg/pagination_next.svg);
}

.pagination ul li.arrowBtn.nextBtn.disabled>a {
  background-image: url(/assets/images/svg/pagination_next_disabled.svg);
  cursor: default;
}

/* 디테일 페이지네이션 */
.table_detail .pagination ul li.arrowBtn.prevBtn>a {
  background-image: url(/assets/images/svg/pagination_sm_left.svg);
  /* background-color: red; */
  background-size: 5px;
  width: 5px;
}

.table_detail .pagination ul li.arrowBtn.prevBtn.disabled>a {
  opacity: 0.3;
  cursor: default !important;
}
.table_detail .pagination ul li.arrowBtn.nextBtn>a {
  background-image: url(/assets/images/svg/pagination_sm_right.svg);
  background-size: 5px;
  width: 5px;
}

.table_detail .pagination ul li.arrowBtn.nextBtn.disabled>a {
  opacity: 0.3;
  cursor: default !important;
}

/* .pagination_arrow {
  background-size: 10px;
  background-position: center;
}
.pagination_arrow.button_prev {
  background-image: url(../images/pagination_prev.svg);
}

.pagination_arrow.button_next {
  background-image: url(../images/pagination_next.svg);
}
 */
/* * (비활성화) 이전/다음 버튼 */
.pagination_arrow.button_prev:disabled {
  background-image: url(../images/pagination_prev_disabled.svg);
  background-position: center;
}

.pagination_arrow.button_next:disabled {
  background-image: url(../images/pagination_next_disabled.svg);
}

/* * 현재 페이지 */
.pagination .pagination_num.now,
.pagination .pagination_num:active {
  border-radius: 5px;
  background-color: #222;
  color: #fff !important;
}

/* * 페이지네이션 효과 */
.pagination_num:hover {
  color: var(--text-main-color);
}

/* * 페이지네이션 페이지 이동 */
.pagination_more_info {
  position: relative;
  margin-left: 16px;
  padding-top: 1px;
  padding-right: 25px;
  color: var(--text-gray-color);
  transition: .3s;
}

.pagination_more_info:hover {
  color: var(--text-main-color);
}

.pagination_more_info::after {
  position: absolute;
  top: 9px;
  right: 8px;
  content: '';
  display: block;
  width: 10px;
  height: 6px;
}

/* 이너 페이지네이션 */
.pagination2 .pagination_num.now,
.pagination2 .pagination_num:active {
  border-radius: none;
  background-color: #22222200;
  color: #aaa !important;
}

/* * 페이지 이동 박스 : 기본 안보임 */
.pagination_more_box {
  position: absolute;
  padding: 15px 10px 10px;
  margin-left: 15px;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 30;
  font-size: 13px;
}

.pagination_more_box p {
  margin-bottom: 4px;
}

.pagination_more_box .move_input {
  width: 125px;
  height: 33px;
  border: var(--common-border);
  border-radius: 5px;
  box-sizing: border-box;
}

.pagination_more_box .move_input input {
  height: 100%;
  border-radius: 5px;
  padding: 0 42px 0 10px;
  border: none;
}

.pagination_more_box .move_input input:focus {
  outline: 1px solid #000;
  border: none !important;
}

.pagination_more_box .move_input button {
  position: absolute;
  width: 32px;
  height: 33px;
  top: -1px;
  right: 0;
  border-radius: 0 5px 5px 0;
  background-color: #222;
}

.pagination_more_box .move_input button:active {
  background-color: #000;
}

.pagination_more_box .move_input button img {
  vertical-align: -3px;
}

/* 페이지네이션 기존 관리자페이지 클래스명으로 스타일 */
/* 테이블 이너 내 페이지네이션 */
tr.detail .pagination {
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

tr.detail .pagination>ul li.numberBtns ul li a {
  margin-top: 1px;
  background-color: #00000000 !important;
  color: #aaa !important;
}

tr.detail .pagination>ul li.numberBtns ul li.active a {
  color: #5f5f5f !important;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
tr.detail .pagination>ul li.numberBtns ul li.active a:hover {
  color: #222 !important;
}
.config_popup[name="popup_dashboard_detail"] .pageInfo .pages [lab_name="total_page"] {
  padding-right: 5px;
}
tr.detail .pagination>ul [lab_name="total_page"] {
  padding-right: 5px;
}

tr.detail .pagination>ul .searchBar .headline {
  line-height: 17px;
}

tr.detail .pagination .serachInput input {
  font-size: 13px;
}

tr.detail .pagination .serachInput .btn_small {
  vertical-align: -1px;
  height: 32px;
}

/* * 필터 */
.btn_wrap {
  gap: 12px;
  flex-wrap: wrap;
}

button.filter {
  width: 34px;
  height: 34px;
  border: var(--common-border);
  border-radius: 5px;
  color: #555;
  transition: .3s;
}

button.filter svg {
  vertical-align: -3px;
}

button.filter:hover {
  background-color: #EFEFEF;
}

button.filter:active {
  background-color: #E7E7E7;
}

button.filter:disabled {
  color: #aaa;
  background-color: rgba(34, 34, 34, 0.1);
}

/* * svc 다운로드 버튼 */
.svc_icon_btn {
  display: flex;
  align-items: center;
}

.svc_icon_btn svg {
  margin-right: 5px;
}

.circle_exclamation_icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  /* background-color: #222; */
  margin-right: 5px;
}

.circle_exclamation_icon svg {
  color: #fff;
  font-size: 8px;
  vertical-align: 4px;
  margin-left: 5px;
}

/* * 정책 삭제 관련 버튼 */
.policy_selection_btn {
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 12px;
  transition: .3s;
}

.policy_selection_btn:hover {
  background-color: #EFEFEF;
}

.policy_selection_btn:active {
  background-color: #E7E7E7;
}

.policy_selection_btn:disabled {
  color: #aaa;
  background-color: rgba(34, 34, 34, 0.1);
  border: none;
}

/* * 추가하기 / 적용하기 */
.add_content {
  display: flex;
  color: #222;
  font-size: 13px;
  flex-wrap: wrap;
}

.add_content button {
  padding: 5px 9px;
  border-radius: 5px;
  transition: .3s;
}

.add_content button:hover {
  background-color: #EFEFEF;
}

.add_content button:active {
  background-color: #E7E7E7;
}

.add_content button svg {
  margin-right: 5px;
}

/* * 페이지 하단 버튼 폰트어썸 간격 */
.white_btn_wrap button svg {
  margin-right: 6px;
}

/* * 예외 사용자 / 개별 설정 */
.policy .type_btn_wrap button {
  padding: 4px 10px;
  border-radius: 5px;
  transition: .3s;
  color: #777;
  font-family: 'Pretendard-Regular';
}

.policy .type_btn_wrap button.active,
.policy .type_btn_wrap button:hover {
  font-family: 'Pretendard-SemiBold';
  background-color: #222;
  color: #fff;
}

/* * 디바이스 추가 가이드 */
.divice_guide {

  color: #40A629 !important;
  font-size: 12px;
  transition: .3s;
  border-radius: 5px;
  display: inline-block;
  padding: 5px 10px;
  vertical-align: 2px;
}

.divice_guide svg {
  margin-right: 3px;
}

.divice_guide:hover {
  background-color: #EEFCEB;
}

.divice_guide:active {
  background-color: #DAF2D5;
}

/* 출력물 관련 버튼 */
.white_btn.printer_setting_btn {
  padding: 3px 10px;
  box-sizing: border-box;
  height: 31px;
  margin-right: 5px;
}

/* *서비스 관련 */
.service_white_btn {
  padding: 6px 7px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  color: #222;
  font-family: 'Pretendard-SemiBold';
  transition: .3s;
}

.service_white_btn:hover {
  background-color: #EFEFEF;
}

.service_black_btn {
  padding: 6px 7px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #222;
  color: #fff;
  font-family: 'Pretendard-SemiBold';
}

.service_black_btn:hover {
  background-color: #3d3d3d;
}

.service_black_btn:active {
  background-color: #383838;
}

.service_black_btn:disabled {
  background-color: #AFAFAF;
}


/* 사업자등록증 업로드 */
.service button.upload {
  padding: 4px 11px;
  margin-left: 8px;
  font-size: 12px;
  font-family: 'Pretendard-SemiBold';
}

/* *구독 변경하기 */
.service .btn_wrap {
  text-align: center;
}

.btn_blue {
  /* margin: 25px auto 0; */
  padding: 6px 20px;
  border-radius: 5px;
  background-color: #2196F3;
  color: #fff;
  /* font-size: 18px; */
  transition: background-color .3s;
  border-radius: 5px !important;
  font-family: 'Pretendard-Regular';
  font-weight: 600;
}

.btn_blue:hover {
  background-color: #1782db;
}

.btn_blue:active {
  background-color: #3185C8;
}

.btn_blue:disabled {
  background-color: #76BFF8;
}

/* 기존 관리자 토글 스위치 - 팝업 */
.popup-control-label {
  width: 31px;
  padding-left: 0 !important;
  background: none !important;
}

.popup-control-label::before {
  position: absolute;
  display: block;
  width: 31px;
  height: 19px;
  content: "";
  background: #AAA;
}

.popup-control-label[disabled="disabled"]::before {
  background-color: #e3e3e3;
  cursor: not-allowed !important;
}

.popup-control-label:before {
  transition: all 0.3s ease-in-out;
}

.popup-switch .popup-control-label::before {
  pointer-events: all;
  border-radius: 25px;
}

.popup-control-label::after {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  content: "";
  background: no-repeat 50% / 50% 50%;
  margin: 3px;
}

.popup-switch .popup-control-label::before:checked {
  pointer-events: none;
}

.popup-control-label::after:checked {
  pointer-events: none;
}

.popup-switch .popup-control-label::after {
  background: #fff;
  border-radius: 10px;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.popup-control-input:checked~.popup-control-label::before {
  pointer-events: none;
  color: #2196F3;
  border-color: #2196F3;
  background-color: #2196F3;
  box-shadow: none;
}

.popup-switch .popup-control-input:checked~.popup-control-label::after {
  pointer-events: none;
  background-color: #ffffff;
  transform: translateX(0.7rem);
}

.popup-control-label-cover {
  width: 36px;
  height: 21px;
  display: none;
  position: absolute;
  margin-top: -20px;
}

.popup-switch {
  display: inline-block;
  /* margin: 6px 22px 0px 4px; */
}


/* * 토글 아이콘 */
button.switch_toggle {
  position: relative;
  width: 32px;
  height: 22px;
  border-radius: 25px;
  background-color: #aaa;
  transition: .3s;
}

button.switch_toggle span {
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-block;
  background-color: #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

/* * 토글 on */
button.switch_toggle.active,
button.switch_toggle.wide.active {
  background-color: var(--text-blue-color);
}

button.switch_toggle.active span {
  left: 14px;
}

button.switch_toggle:disabled {
  background-color: #ddd;
}

/* 메뉴 넓게 보기 토글 스위치 */
button.switch_toggle.wide {
  width: 27px;
  height: 18px;
  background-color: #DBDBDB;
}

button.switch_toggle.wide span {
  top: 3px;
  left: 4px;
  width: 12px;
  height: 12px;
}

button.switch_toggle.wide.active span {
  left: 12px;
}

button.sample {
  color: #777777;
  width: 25px;
  text-align: center;
  padding: 3px 0 2px;
  border-radius: 5px;
  transition: .3s;
}

button.sample:hover {
  background-color: #EFEFEF;
}

button.sample:active {
  background-color: #E7E7E7;
}

/* 검사결과 다운로드 */
.result_down {
  padding: 2px 8px;
  border-radius: 5px;
  background-color: #E7F4FF;
}

.result_down svg {
  color: #2196F3;
}

.result_down:hover {
  background-color: #dbeeff;
}

/* * 설정 아이콘 */
button.setting {
  color: #A3A3A3;
  font-size: 20px;
  transition: .3s;
}

button.setting:hover {
  color: #7F7F7F;
}

button.setting:active {
  color: #626262;
}

button.setting:disabled {
  color: #DCDCDC;
}

/* 더보기 버튼 */
.more_btn2 {
  display: inline-block;
  height: 28px;
  box-sizing: border-box;
  padding: 4px 8px;
  border-radius: 5px;
  color: #777;
  font-size: 13px;
  transition: .3s;
}

.more_btn2:hover {
  background-color: #EFEFEF;
}

.more_btn2:active {
  background-color: #E7E7E7;
}

.more_btn2 div {
  width: 100%;
}

/* 대시보드 플랜 변경하기 */
.plan_change {
  border-radius: 25px;
  background-color: #222;
  font-size: 14px;
  color: #fff;
  transition: .3s;
}

.plan_change a {
  display: inline-block;
  padding: 5px 21px;
}

.plan_change:hover {
  background-color: #3d3d3d;
}

.plan_change:active {
  background-color: #383838;
}

.plan_change:disabled {
  background-color: #AFAFAF;
}

/* 대시보드 추가하기 */
.btn-dashboard_license_add {
  padding: 4px 9px 4px 8px;
  font-size: 12px;
  border-radius: 5px;
  background-color: #222;
  color: #fff;
  font-family: 'Pretendard-Bold';
}
.btn-dashboard_license_add:hover {
  background-color: #3D3D3D;
}
.btn-dashboard_license_add:active {
  background-color: #383838;
}
.btn-dashboard_license_add:disabled {
  background-color: #AFAFAF;
}

.btn-dashboard_license_add a {
  display: inline-block;
  padding: 3px 8px 3px 6px;
  font-family: 'Pretendard-SemiBold';
}

.btn-dashboard_license_add svg {
  margin-right: 5px;
  font-size: 13px;
  padding-top: 2px;
}

/* 대시보드 정책설정 goto */
.dashboard .goto:hover {
  text-decoration: none;
}

.goto {
  transition: .3s;
}
.goto_js::after {
  content: '\f35d';
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  font-size: 11px;
  padding-left: 3px;
}
.goto.grey {
  color: #9A9A9A;
}

.goto svg {
  font-size: 12px;
}

.goto:hover {
  color: #555;
}

.goto:active {
  color: #9A9A9A;
}

.goto:disabled {
  color: #BFBFBF;
}

.more_btn_wrap {
  font-size: 13px;
}

.btn_detail {
  text-decoration: underline;
}

/* 기존 관리자 버튼 */

.btn_wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn_grey {
  padding: 6px 20px;
  background: #DFDFDF !important;
  border-radius: 5px !important;
  color: #aaa !important;
  font-family: 'Pretendard-Regular';
  font-weight: 600;
}

html[lang='ja'] .Exosphere.custom--exosecurity .btn_grey {
  font-family: 'NotoSansJP-Regular';
}

.btn_grey:hover {
  background: #CECECE !important;
}

.btn_grey:active {
  background: #BCBCBC !important;
}

.btn_grey:disabled {
  background: #D8D8D8 !important;
  color: #939393 !important;
  pointer-events: none !important;
}

.btn_black {
  padding: 6px 20px;
  color: #FFFFFF !important;
  background: #222222 !important;
  border-radius: 5px !important;
  font-family: 'Pretendard-Regular';
  font-weight: 600;
}

html[lang='ja'] .Exosphere.custom--exosecurity .btn_black {
  font-family: 'NotoSansJP-Regular';
}

.btn_black:hover {
  background: #3D3D3D !important;
}

.btn_black:active {
  background: #383838 !important;
}

.btn_black:disabled {
  background: #AFAFAF !important;
  pointer-events: none !important;
  color: #FFFFFF !important;
}

.btn_red {
  padding: 6px 20px;
  background: #EF5350 !important;
  border-radius: 5px !important;
  font-family: 'Pretendard-Regular';
  font-weight: 600;
  color: #FFFFFF !important;
}

html[lang='ja'] .Exosphere.custom--exosecurity .btn_red {
  font-family: 'NotoSansJP-Regular';
}

.btn_red:hover {
  background: #E74E4B !important;
}

.btn_red:active {
  background: #DD4441 !important;
}

.btn_red:disabled {
  background: #FF9492 !important;
  pointer-events: none !important;
  color: #FFFFFF !important;
}

.btn_white {
  padding: 10px 20px 10px 20px;
  color: #333333 !important;
  background: #FFFFFF !important;
  border: 1px solid #D2D2D2 !important;
  box-sizing: border-box !important;
  border-radius: 5px !important;
}

.btn_white:hover {
  background: #F2F2F2 !important;
}

.btn_white:active {
  background: rgba(170, 170, 170, 0.25) !important;
}

.btn_white.height_input_text {
  height: 35px !important;
  padding: 0 10px !important;
}

.btn_white:disabled {
  background: #EDECEC !important;
  color: #939393 !important;
  pointer-events: none !important;
}

.btn_white_2 {
  padding: 4px 20px 4px 20px;
  color: #333333 !important;
  background: #FFFFFF !important;
  border: 1px solid #D2D2D2 !important;
  box-sizing: border-box !important;
  border-radius: 5px !important;
}

.btn_white_2:hover {
  background: #F2F2F2 !important;
}

.btn_white_2:active {
  background: rgba(170, 170, 170, 0.25) !important;
}
.btn_white_2:disabled {
  background: #EDECEC !important;
  color: #939393 !important;
  pointer-events: none !important;
}

.btn_grey_custom_1 {
  padding: 4px 12px 4px 12px;
  background: #E8E8E8;
  border-radius: 100px;
  color: #989898 !important;
  font-size: 12px;
  font-family: 'Pretendard-Regular';
  font-weight: 600;
}

.btn_grey_custom_1:hover {
  color: #989898;
  background: #D2D2D2 !important;
}

.ip_input[type='text'] {
  width: 12% !important;
  height: 35px !important;
  border: 1px solid #D2D2D2 !important;
  box-sizing: border-box !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  line-height: 17px;
  color: #000000;
  font-family: 'Pretendard-Light' !important;
  padding: 3px 11px !important;
  font-size: 14px !important;
  text-align: center;
  letter-spacing: 1px;
}

.memo_input {
  width: 71% !important;
  height: 35px !important;
  border: 1px solid #D2D2D2 !important;
  box-sizing: border-box !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  line-height: 17px;
  color: #000000;
  font-family: 'Pretendard-Light' !important;
  padding: 3px 11px !important;
  font-size: 14px !important;
}

/* 곽지훈 */
.arrow[lab_name="show_item"],
.arrow[lab_name="hide_item"] {
  float: right;
  margin: 6px 0px;
}

.popup_box .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 20px !important;
}

/* 사용자 등록 버튼 */
.selectlist {
  display: flex;
  flex-wrap: wrap;
  /* gap: 14px; */
}

.selectlist .selectlist_button {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

button.policy_off {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* from dev */
.btn_registration {
  width: 100%;
  max-width: 408px;
  height: 57px;
  margin-bottom: 20px;
}

/* .btn_grey {
  padding: 10px 20px 10px 20px;
  background: #DFDFDF !important;
  border-radius: 5px !important;
  color: #333333 !important;
  font-family: 'Pretendard-Regular';
  font-weight: 600;
}

.btn_grey:hover {
  background: #CECECE !important;
}

.btn_grey:active {
  background: #BCBCBC !important;
}

.btn_grey:disabled {
  background: #D8D8D8 !important;
  color: #939393 !important;
  pointer-events: none !important;
} */
/* 
.btn_black {
  padding: 10px 20px 10px 20px;
  color: #FFFFFF !important;
  background: #222222 !important;
  border-radius: 5px !important;
  font-family: 'Pretendard-Regular';
  font-weight: 600;
}

.btn_black:hover {
  background: #3D3D3D !important;
}

.btn_black:active {
  background: #383838 !important;
}

.btn_black:disabled {
  background: #AFAFAF !important;
  pointer-events: none !important;
  color: #FFFFFF !important;
} */

/* .btn_red {
  padding: 10px 20px 10px 20px;
  background: #EF5350 !important;
  border-radius: 5px !important;
  font-family: 'Pretendard-Light';
}

.btn_red:hover {
  background: #E74E4B !important;
}

.btn_red:active {
  background: #DD4441 !important;
}

.btn_red:disabled {
  background: #FF9492 !important;
  pointer-events: none !important;
  color: #FFFFFF !important;
}
 */
.btn_white {
  padding: 10px 20px 10px 20px;
  color: #333333 !important;
  background: #FFFFFF !important;
  border: 1px solid #D2D2D2 !important;
  box-sizing: border-box !important;
  border-radius: 5px !important;
}

.btn_white:hover {
  background: #F2F2F2 !important;
}

.btn_white:active {
  background: rgba(170, 170, 170, 0.25) !important;
}

.btn_white:disabled {
  background: #EDECEC !important;
  color: #939393 !important;
  pointer-events: none !important;
}

.white_btn:has(.type_view) {
  position: relative;
  width: 410px;
  text-align: left;
  font-size: 11pt;

  @media (max-width : 500px) {
    width: 250px;
  }
}

.white_btn:has(.type_view)::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
  padding: 0 10px 0 5px;
  right: 0;
}

.white_btn:has(.type_view) .numBadge {
  text-align: center;
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: 4px;
  background-color: rgba(33, 149, 243, 0.1);
  font-size: 13px;
  color: #2196F3;
}

/* 설정 버튼 */
td:has(button.each),
/* 점검정책 제외 버튼 위치 */
td:has(.toggle) {
  text-align: center;
}

td .check_area {
  text-align: center;
}

td .check_area .toggle {
  margin: 0 auto;
}

table button.each {
  position: relative;
  color: #ffffff00;
  width: 25px;
  height: 21px;
  text-align: center;
}

table button.each::after {
  position: absolute;
  content: '\f013';
  width: 25px;
  height: 21px;
  top: -2px;

  display: block;
  font-size: 17px;
  color: #A3A3A3;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  transition: .3s;
}

table button.each:hover:after {
  color: #7F7F7F;
}

table button.each:active:after {
  color: #626262;
}

table button.each:disabled:after {
  color: #DCDCDC;
}

/* 점검 정책 비활성화 아이콘 */
td:has(.setting_disable) {
  text-align: center;
}

.setting_disable {
  position: relative;
}

.setting_disable::after {
  width: 25px;
  height: 21px;
  position: absolute;
  content: '';
  /* content: '\f013'; */
  font-family: "Font Awesome 5 Free";
  font-size: 17px;
  /* font-weight: 900; */
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  /* color: #DCDCDC; */
}

/* 탐지및 조치 내역 필터 버튼 */
.cf_filter_type {
  margin-right: 5px;
  height: 32px;
  padding: 0px 6px 0px 10px;
}

/* 자세히 보기 */
.tb_cf_detailView {
  display: inline-block;
  padding-bottom: 14px;
}
.tb_cf_detailView img {
  width: 12px;
  vertical-align: -2px;
}

input[type="radio"]:disabled+label {
  filter: brightness(95%);
}

/* 구독내역 더보기 */

.service .subscriptionHistory_btn {
  font-size: 15px;
  padding: 10px 30px;
}

.service .subscriptionHistory_filtering {
  padding: 5px 12px;
  background-color: #fff;
  border: var(--common-border);
  border-radius: 5px;
  font-size: 13px;
  transition: .3s;
  margin: 5px 0px 30px 0px;
  width: fit-content;
}

.subscriptionHistory_frame_close {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url(/assets/images/svg/close.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  vertical-align: -1px;
}

.subscriptionHistory_frame_close:hover {
  background-image: url(/assets/images/svg/close_hover.svg);
}

.subscriptionHistory_frame_close:active {
  background-image: url(/assets/images/svg/close_active.svg);
}

.subscriptionHistory_frame_close:disabled {
  background-image: url(/assets/images/svg/close_disabled.svg);
}

img[src*="icn_filter.png"] {
  display: none;
}

th[event="filter"] span.buttoncursor::after {
  display: inline-block;
  content: '\f0d7';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 4px;
}
th[event="filter"] span.buttoncursor.arrow::after {
  display: inline-block;
  content: '\f0d8';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 4px;
}

.subscriptionChange_btn {
  /* margin: 20px; */
  margin-top: 10px;
  font-size: 18px;
  padding: 10px 19px;
}
.policy_table_wrap table .btncolor_white[lab_class="selectbox_custom_button"] {
  padding: 4px 5px;
  background-color: #fff;
  border: var(--common-border);
  border-radius: 5px;
  font-size: 13px;
  transition: .3s;
  display: none;
}
.policy_table_wrap table .btncolor_white[lab_class="selectbox_custom_button"]:disabled {
  background-color: #eee;
  color: #999;
}
img[src*="setting_disabled_v2"]:hover {
  cursor: default;
}
.disabled img[src*="pagination_sm_right"], 
.disabled img[src*="pagination_sm_left"] {
  cursor: default;
  opacity: 0.4;
}

 /* open api */
.api_list_content .memo_icon {
  padding: 4px 5px 4px 7px;
  margin-right: 2px;
  border-radius: 5px;
  transition: .3s;
  cursor: pointer;
}
.api_list_content .memo_icon:hover {
  background-color: #EFEFEF;
}
.api_list_content .memo_icon:active {
  background-color: #E7E7E7;
}
.api_list_content .memo_icon svg {
  vertical-align: -1px;
}
.api_list_content button[name='issuing_api_key']:disabled:hover + .tooltip_type04,
.api_list_content button[name="add"]:disabled:hover + .tooltip_type04 {
  display: block !important; 
  transform: translateX(-40px);
}
.white_btn img[src="/assets/images/png/icon_link.png"],
.white_btn img[src="/assets/images/png/icon_unlink.png"] {
  margin-bottom: 2px;
}
button[name='add']:disabled:has(+.saml_sso_tooltip):hover +.saml_sso_tooltip {
  display: block !important;
  top: auto;
}
button[name='idp_metadata_download']:disabled:has(+.idp_metadata_tooltip):hover +.idp_metadata_tooltip, 
button[name='idp_metadata_copy']:disabled:has(+.idp_metadata_tooltip):hover +.idp_metadata_tooltip {
  display: block !important;
  top: auto;
}

/* 정책 일괄 적용 스타일 */
.popup-toast .toast-btns {
  display: flex;
  gap: 20px;
  @media (max-width : 650px) {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
  }
}
.popup-toast .toast-btns button {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
  padding: 3px 12px;
  box-sizing: border-box;
  /* font-family: Pretendard; */
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 23px;
  min-height: 31px;
  border-radius: 7px !important;
}
.popup-toast .toast-btns button.cancel {
  max-height: 100px;
  color: #222;
  border: 1px solid #222;
}
.popup-toast .toast-btns button.apply {
  color: #fff;
}
.btn_green {
  background-color: #DEECDD;
  transition: background-color .3s;
}
.btn_green:hover {
  background-color: #CEE6CC;
}
.btn_green:active {
  background-color: #BDDDBB;
}
.toast_icon_loading {
  animation: toastIconLoading 0.5s linear infinite;
}
@keyframes toastIconLoading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn_inquiry {
  padding: 8px 24px;
  background: #2196F3;
  border-radius: 100px;
  color: #FFF;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  gap: 10px;
}
.btn_inquiry:hover {
  background: #128AE9;
  color: #FFF;
}
.btn_inquiry:active {
  background: #3185C8;
  color: #FFF;
}
.btn_small.each {
  font-size: 1px;
}
.buttoncursor[disabled="disabled"] {
  pointer-events: none !important;
}
.toggle[disabled="disabled"]{
  pointer-events: none !important;
}
.policy_list_sort {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4px;
  color: #AAA;
  /* font-family: Pretendard; */
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 18px */
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 5px;
  transition: 0.3s;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-right: 6px;
}

.policy_list_sort img {
  width: 13px;
  height: 12px;
}

.policy_list_sort:hover {
  background-color: #EFEFEF;
}

.policy-delete {
  border-radius: 5px;
  width: 25px;
  height: 25px;
  transition: .3s;
}

.policy-delete img {
  vertical-align: -3px;
}

.policy-item.policy-item-basic .policy-delete {
  display: none;
}

.policy-delete:hover {
  background-color: #EFEFEF;
}

.container_area .policy_info {
  position: relative;
}
.left_content_slide_btn_area {

  /* height: 962px !important; */
  @media (max-width: 1500px) {
    height: 30px !important;
    
  }
}

.container_area .left_content_slide_btn {
  pointer-events: visible;
  z-index: 10;
  left: 287px;
  transition: left 0.4s;
  width: 30px !important;
  /* height: 962px !important; */
  top: 156px !important;
  margin-left: -40px;
  display: flex;
  align-items: flex-start;
  margin-top: 70px;

  @media (max-width: 1500px) {
    margin-left: auto;
    margin-right: 30px;
    margin-top: -20px;
  }
}

.container_area .left_content_slide_btn .tooltip_type04 {
  top: 100px;

  @media (max-width: 1500px) {
    top: auto;
  }
}

.container_area .left_content_slide_btn.left_content_hide {
  /* min-height: 710px; */
  margin-left: -24px;

  @media (max-width: 1500px) {

    margin-left: auto;
    margin-right: 30px;
    margin-top: -20px;
  }
}

.container_area .left_content_slide_btn img {
  @media (max-width: 1500px) {
    transform: rotate(90deg);
  }
}

.container_area .left_content_slide_btn.left_content_hide img {
  transform: rotate(180deg);

  @media (max-width: 1500px) {
    transform: rotate(270deg);
  }
}

.container_area .left_content_slide_btn.left_content_hide::after {
  position: absolute;
  top: 44px;
  left: -12px;
  content: '';
  display: block;
  width: 1px;
  height: calc(100vh - 310px);
  background-color: #EAEAEA;
  z-index: -1;
}

@media (max-width: 1500px) {

  .container_area .left_content_slide_btn.left_content_hide::after {
    position: absolute;
    top: 34px;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #EAEAEA;
    z-index: -1;
  }
}

.container_area .left_content_slide_btn:hover .tooltip_type04 {
  display: block;
}
.container_area .left_content_slide_btn .tooltip_type04 {
  @media (max-width: 1500px) {
    margin-top: 30px;
  }
}
.target-select-btn {
height: 32px;
display: flex;
gap: 9px;
align-items: center;
align-self: center;
}
.target-select-btn.white_btn svg {
  margin-right: 0;
}
.target-select-btn p {
  color: #222;
/* font-family: Pretendard; */
font-size: 13px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 19.5px */
}
.full_black_btn {
  border-radius: 5px;
background: #222;
width: calc(100% - 80px);
color: #fff;
/* font-family: Pretendard; */
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
height: 52px;
margin-bottom: 37px;
transition: .3s;
}
.full_black_btn:hover {
  background: #3D3D3D;
}
.full_black_btn:active {
  background: #383838;
}
.full_black_btn:disabled {
  background: #AFAFAF;
}

.left_search_area {
  box-shadow: 0px 1px 15px 0px rgba(197, 197, 197, 0.25);
  margin-top: 18px;
}
.left_search_area .text_box_gray {
  height: 34px;
}
.id_content.id_content_list .pagination {
  justify-content: center;
  margin-top: 16px;
}
.black_border_btn {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid #000;
  font-size: 14px;
}
.black_border_btn:hover {
  background-color: #eeeeee;
}
.gray_box_btn {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding: 0 19px;
  width: 362px;
  height: 35px;
  border-radius: 5px;
  background-color: #DFDFDF;
}
.gray_box_btn:hover {
  background-color: #d8d8d8;
}
.gray_box_btn p {
  text-align: center; 
  width: calc(100% - 6px);
  margin-left: 6px;
}
.gray_box_btn svg {
  margin-left: auto;
}