/* ### Default CSS ### */
/* mathjax 글꼴변경되어 :not 추가 */
*:not(.math-content*),
*:not(.math-command-content*) {
  font-family: "Pretendard Variable";
  letter-spacing: -0.3px;
}
:root {
  /* --bg-col1: #313a46;
  --light-bg-col1: #454e5a;
  --txt-col1: #cedfea;
  --bg-col2: #fafbfe;
  --bg-col2-bd: #e6eaee;
  --txt-col2: #6c757d;
  --light-gray: #cdcdcd; */
  /* --empty-text: #ccc; */
  /* --table-head: #eef2f7;
  --btn-normal: #4c5e72;
  --btn-normal-col: #eaeaea;
  --font-size: 18px;
  --span-text: #788291; */
  --ct-primary-lighten: rgba(var(--ct-primary-rgb), 0.1);
  --ct-secondary-lighten: rgba(var(--ct-secondary-rgb), 0.1);
  --ct-success-lighten: rgba(var(--ct-success-rgb), 0.1);
  --ct-info-lighten: rgba(var(--ct-info-rgb), 0.1);
  --ct-danger-lighten: rgba(var(--ct-danger-rgb), 0.1);
  --ct-warning-lighten: rgba(var(--ct-warning-rgb), 0.1);
  --ct-orange-lighten: rgba(253, 126, 20, 0.1);
  --ct-primary-rgb: 114, 124, 245;
  --ct-secondary-rgb: 108, 117, 125;
  --ct-success-rgb: 10, 207, 151;
  --ct-info-rgb: 57, 175, 209;
  --ct-warning-rgb: 255, 188, 0;
  --ct-danger-rgb: 250, 92, 124;
  --ct-bdrad: 7px;
  --ct-padding: 17px;
  --ct-header-height: 55px;
  --ct-footer-height: 65px;
  --ct-graph-color: #8391a2;

  /* btn */
  --ct-btnTest: 85px;
  --ct-btn-h: 45px;

  --point: #537eeb;
  --point-rgb: rgb(83, 126, 235);
  --point-light: #eef3fd;
  --point-dark: #294daa;
  --point-border-light: #d7e1fa;
  --point-dark-light: #697698;
  --point-filter: invert(39%) sepia(76%) saturate(1566%) hue-rotate(209deg)
  brightness(100%) contrast(85%);
  --default-color: #3c4651;

  --content-h: calc(
          var(--ct-header-height) + calc(var(--ct-footer-height) + 1px)
  );
  --mobile-pd: 14px;
  --scrollbar-bg: rgba(var(--ct-secondary-rgb), 0.25);

  --ct-box-shadow: 0 0 20px rgba(0, 0, 0, 0.07);
}
img {
  object-fit: cover;
}
caption {
  display: none;
}
textarea {
  resize: none;
}

/* ### Reset CSS ### */
body {
  font-size: 14px;
  color: var(--default-color);
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
a,
a:hover,
a:focus {
  font-size: 15px;
  color: var(--default-color);
}
input,
button,
textarea,
select {
  display: inline-block;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
}
em {
  font-style: normal;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--default-color) !important;
  /* border: none; */
}
i {
  font-weight: 400;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: var(--scrollbar-bg);
}
::-webkit-scrollbar-track-piece {
  /* margin: 3px; */
}

/* ### Custom CSS ### */
/* --- app layout --- */
body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg) {
  min-height: 100vh;
}
body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg)
.wrapper
.content-page,
.content-page {
  margin: 0;
  padding: 0;
  /* background: #f7f7f7; */
  background: #fff;
  color: var(--default-color);
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding: 0;
}
.content-page {
  margin-left: 0 !important;
}
.content {
  /* height: 100vh; */
}
.content > .container-fluid {
  padding: var(--ct-header-height) 0 var(--ct-footer-height);
}
.container-fluid > [class*="-wrap"] {
  padding: 0 14px;
}
.container-fluid > [class*="-wrap"] > [class*="-top"] {
  margin: 0 0 10px;
}
.container-fluid > [class*="-wrap"] > [class*="-bottom"] {
  padding: 14px 0;
}
.container-fluid > [class*="-wrap"] > [class*="-top"] + [class*="-bottom"] {
  padding-top: 0;
}
.btn,
input.form-control,
.form-select {
  height: var(--ct-btn-h);
  border-radius: var(--ct-bdrad);
  font-weight: 400;
  font-size: 15px;
}
.btn:focus,
input.form-control:focus,
.form-select:focus {
  box-shadow: none;
}

/* --- layout --- */
.custom-page-card {
  background-color: #fff;
  border-radius: var(--ct-bdrad);
  /* box-shadow: 0 0 10px rgb(0 0 0 / 5%); */
}

/* ----- display ----- */
.d-none {
  display: none;
}
.d-b {
  display: block;
}

/* --- empty --- */
.custom-empty-table {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ct-text-muted);
}
[class*="custom-empty-"] .custom-warning {
  display: block;
}
.custom-list-empty-text,
.custom-list-empty-text > :is(span, i) {
  display: block;
  text-align: center;
}
.custom-list-empty-text > :is(span, i) {
  font-weight: 400;
  font-size: 14px;
  color: var(--ct-text-muted);
}

[id*="main"] :is(.custom-empty-table, .custom-list-existing) {
  /* list item: 40px * 3 + margin: 15px * 2 */
  min-height: 150px;
}

/* ----- form ----- */
.form-control {
  padding: 0.5rem;
}
textarea.form-control {
  border-radius: var(--ct-bdrad);
  word-break: break-all;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly] {
  background-color: #f6f7f7;
}
.disable-action {
  -webkit-user-select: none;
}
input.form-check-input:checked {
  background-color: var(--point) !important;
}

/* ----- btn ----- */
[class*="btn"] {
  box-shadow: none;
}
.btn {
  padding: 0;
  line-height: var(--ct-btn-h);
}
.badge-primary-lighten,
.bg-primary-lighten {
  background: var(--point-light) !important;
  color: var(--point);
}
.badge-primary-lighten:hover,
.bg-primary-lighten:hover {
  color: var(--ct-point);
}
.btn.badge-success-lighten:hover {
  color: var(--ct-success);
}
.btn-right {
  margin-left: auto;
  float: right;
  padding: 0;
}
.btn-left {
  margin-right: auto;
  float: left;
  padding: 0;
}
.btn-primary {
  background: var(--point) !important;
}
.btn-primary:hover {
  background: var(--point-dark) !important;
}
.btn-outline-primary {
  border-color: var(--point);
  color: var(--point);
}
.btn-outline-primary:hover {
  background: var(--point) !important;
}
.btn-success:hover {
  background: var(--ct-success);
  border-color: var(--ct-success);
}
.btn-outline-success:hover {
  background: #fff;
  color: var(--ct-success);
}
.custom-btn-medium {
  height: 50px;
  line-height: 50px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: var(--ct-bdrad);
  text-align: center;
  font-size: 16px;
}
.custom-btn-medium:focus {
  box-shadow: none;
}
[class*="custom-type-btn"],
[class*="custom-type-btn"]:hover,
[class*="custom-type-btn"]:active,
[class*="custom-type-btn"]:focus {
  height: var(--ct-btn-h);
  line-height: var(--ct-btn-h);
  border-radius: var(--ct-bdrad);
  box-shadow: none;
  text-align: center;
  font-size: 14px;
}
.custom-type-btn2 {
  width: 200px;
}
.custom-type-btnTest {
  width: 89px;
}
[class*="custom-btn-point"] {
  color: #fff;
}
.custom-btn-point {
  background-color: var(--ct-success);
}
.custom-btn-point2 {
  background-color: var(--point);
}
.custom-btn-dark {
  background-color: var(--light-bg-col1);
  color: var(--txt-col1);
}
.fixed-bottom-btn-wrap {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 0 10px 10px;
}

/* hover */
.btn-fadeIn {
  opacity: 1;
  visibility: visible;
}
.btn-fadeOut {
  opacity: 0;
  visibility: hidden;
}

/* 하단으로 내려가는 스크롤 다운 버튼 */
.custom-btn-goDown,
.custom-btn-goDown:hover {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 93px;
  width: 200px;
  border-radius: 100px;
  background: linear-gradient(45deg, var(--ct-success), var(--point));
  box-shadow: 0 0 20px rgba(83, 126, 235, 0.3);
  font-weight: 700;
  color: #fff;
  transition: bottom 0.5s;
}

/* 하단으로 내려가는 스크롤 다운 버튼 - 스크롤 내렸을/올렸을 때 css */
.custom-btn-goDown.btn-fadeIn,
.custom-btn-goDown.btn-fadeOut {
  opacity: 1;
  visibility: visible;
}
.custom-btn-goDown.btn-fadeIn {
  bottom: 93px;
}
.custom-btn-goDown.btn-fadeOut {
  bottom: -100%;
}

/* ----- bg ----- */
.bg-point {
  background: var(--point);
  color: #fff;
}
.bg-point:hover {
  background: var(--point-dark);
  color: #fff;
}
.bg-plain {
  background: #fff;
  border: 1px solid var(--ct-border-color);
  color: var(--default-color);
}
.bg-plain:hover {
  border-color: var(--ct-secondary);
}
.bg-point-lighten {
  background: var(--point-light);
  color: var(--point);
}
.bg-secondary-lighten {
  background: var(--ct-secondary-lighten) !important;
  color: var(--ct-secondary);
}
.bg-success-lighten {
  background: var(--ct-success-lighten) !important;
  color: var(--ct-success);
}
.bg-danger-lighten {
  background: var(--ct-danger-lighten) !important;
  color: var(--ct-danger);
}
.bg-info-lighten {
  background: var(--ct-info-lighten) !important;
  color: var(--ct-info);
}
.bg-warning-lighten {
  background: var(--ct-warning-lighten) !important;
  color: var(--ct-warning);
}

/* 2022-12-29 유병현 더보기 버튼 옮겨옴 */
/* 더보기 버튼 */
.custom-block-btn-more,
.custom-block-btn-more:hover {
  background: var(--ct-secondary);
  color: #fff;
}
.custom-block-btn-more {
  width: 100%;
  margin: 15px 0 0;
  padding: 0;
}

/* ----- nav ----- */
.custom-nav-tabs,
.custom-nav-tabs .nav-link {
  border: none;
}
.custom-nav-tabs {
  display: block;
  margin: 0 0 15px;
  padding-top: 7px;
}
.nav-tabs.custom-nav-tabs .nav-item {
  display: inline-block;
}
.nav-tabs.custom-nav-tabs .nav-item:not(:last-child) {
  margin-right: 4px;
}
.nav-tabs.custom-nav-tabs .nav-link {
  width: 120px;
  height: var(--ct-btn-h);
  line-height: var(--ct-btn-h);
  margin: 0;
  padding: 0;
  border-radius: 100px;
  background: var(--ct-text-muted);
  font-weight: 400;
  color: #fff;
}
.nav-tabs.custom-nav-tabs .nav-item.show .nav-link,
.nav-tabs.custom-nav-tabs .nav-link.active {
  background: var(--point);
  color: #fff;
}

/* 더보기 클릭시 사라지는것과, 탭변경시 사라지는것을 구분하기위해 */
.tab-d-none {
  display: none;
}

/* CUSTOM nav - 학원 사이트 버전 */
.custom-nav {
  padding: 2px;
  background: var(--ct-secondary-lighten);
  border-radius: 100px;
}
.custom-nav .nav-item {
  flex: 1;
  width: 120px;
}
.custom-nav.w-100 .nav-item {
  width: 100%;
}
.custom-type-btnNav,
.custom-type-btnNav:hover,
.custom-type-btnNav:active,
.custom-type-btnNav:focus {
  width: 100%;
  padding: 0;
  font-weight: 600;
  font-size: 13px;
  border-radius: 100px;
}
.custom-type-btnNav {
  border-color: transparent;
  background-color: transparent;
  color: var(--ct-text-muted);
}
.custom-type-btnNav.nav-link.active:hover,
.custom-type-btnNav.nav-link.active {
  background: #fff;
  box-shadow: 0 2px 6px 0 rgb(0, 0, 0 / 50%);
  color: var(--default-color);
}
.custom-type-btnNav.nav-link:hover,
.custom-type-btnNav.nav-link:focus,
.custom-type-btnNav.nav-link.active:hover {
  color: var(--default-color);
}
.custom-type-btnNav.nav-link:hover {
  background: transparent;
  border-color: transparent;
  animation: hoverOpacity 1s 0s linear;
}

/* ----- badge ----- */
.badge {
  padding: 3px 5px;
  box-shadow: none;
  font-weight: 400;
  font-size: 12px;
}
.custom-badge {
  display: block;
  width: 55px;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  box-shadow: none;
  text-align: center;
  font-size: 14px;
}

/* ----- text ----- */
.custom-page-title {
  font-size: 18px;
  color: var(--default-color);
}
span[class$="-date"] {
  font-weight: 400;
  font-size: 14px;
  color: #ccc;
  color: var(--ct-text-muted);
}
.custom-compare-gain {
  color: var(--ct-success);
}
.custom-compare-loss {
  color: var(--ct-danger);
}
[class*="custom-elps-"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
}

.custom-list-type-title-wrap {
  width: 100%;
}
.custom-elps-1 {
  width: 100%;
  -webkit-line-clamp: 1;
}
.text-primary {
  color: var(--point) !important;
}
.custom-text-must {
  color: var(--point);
}

/* ----- img ----- */
img.custom-logo {
  filter: var(--point-filter);
}

/* ----- modal ----- */
.modal-content {
  border-radius: var(--ct-bdrad);
}
.custom-modal-header {
  position: fixed;
  width: calc(100% - calc(var(--mobile-pd) * 2));
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: var(--ct-header-height);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  position: relative;
  z-index: 10;
  display: none;
}
.custom-myinfo-modal.show .custom-modal-header {
  position: fixed;
  display: flex;
}

/* ----- icon 안내 ----- */
.custom-guide-icon {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.custom-guide-text {
  width: 220px;
  left: calc(100% + 7px);
  top: 50%;
  transform: translateY(-50%);
  padding: 14px;
  border-radius: var(--ct-bdrad);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background: #fff;
  line-height: 1.25em;
  font-weight: 500;
  font-size: 13px;
  color: var(--ct-text-muted);
  z-index: 10;
  display: none;
}
.custom-guide-icon:hover .custom-guide-text {
  display: block;
  position: absolute;
}

/* ----- board ----- */
.custom-board-content {
  margin: 15px 0 0;
  background-color: #fff;
  /* box-shadow: 0 0 10px rgba(0,0,0,0.05); */
  border-radius: var(--ct-bdrad);
  overflow: hidden;
}
.custom-board-item {
  padding: 13px 15px;
  overflow: hidden;
}

/* ### custom css - listItem 23.11.09 사용: main  START ### */
[id*="main"] .custom-board-item {
  padding: 0;
}
[id*="main"] .custom-board-item:not(:last-child) {
  margin: 0 0 15px;
}
.custom-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 4px;
}
.custom-board-top > strong {
  font-weight: 700;
  font-size: 20px;
}
.custom-board-menulink,
.custom-board-menulink:hover {
  font-size: 22px;
  color: var(--ct-text-muted);
}
.custom-board-bottom {
  padding: var(--mobile-pd);
  background: #fff;
  border-radius: var(--ct-bdrad);
  box-shadow: var(--ct-box-shadow);
}
.custom-board-item-title {
  font-weight: 600;
  font-size: 14px;
}
[id*="main"] .custom-board-item-title {
  max-width: calc(100% - 70px);
}
.custom-board-item-info,
span.custom-board-item-date {
  font-weight: 400;
  font-size: 13px;
  color: var(--ct-text-muted);
}
.custom-board-item-info > span:not(:first-child)::before {
  content: "·";
  padding: 0 4px 0 2px;
}
/* ### custom css - listItem 23.11.09 사용: main  END ### */

/* emoji */
.custom-board-left-icon,
.custom-list-type01-item .custom-list-type-left {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--ct-border-color);
  background-color: var(--point-light);
}
.custom-emoji {
  width: 20px;
}

/* .custom-board-left-desc */
.custom-board-left-desc {
  width: calc(100% - calc(40px + 0.375rem));
}
.custom-board-left-desc > small {
  color: var(--ct-text-muted);
}
.custom-board-left-desc > strong {
  line-height: 1.3em;
}

.custom-board-right i[class*="ri-arrow-right"] {
  font-size: 18px;
  color: var(--ct-text-muted);
}

/* 질문 내역 없는 경우 */
.custom-empty-board-list {
  padding: 13px 15px;
  font-weight: 500;
  color: var(--ct-text-muted);
  display: none;
}

/* list */
.custom-list-type01-item {
  background: #fff;
  border-radius: var(--ct-bdrad);
  padding: 0 17px;
  /* box-shadow: 0 0 10px rgba(0,0,0,0.05); */
}
.custom-list-type01-item:not(:last-child) {
  margin: 0 0 14px;
}
.custom-list-type01 .custom-list-type01-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.custom-list-type01-item .custom-list-type-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.custom-list-type01-item .custom-list-type-left + .custom-list-type-right {
  width: calc(100% - calc(40px + 10px));
}
.custom-list-type01-item :is(.custom-list-type-title, .custom-list-type-info) {
  display: block;
}
.custom-list-type01-item
.custom-list-type-info
:is(small, span[class$="-date"]) {
  color: var(--ct-text-muted);
  font-size: 12px;
}
.custom-list-type01-item .custom-list-type-info > small {
  display: inline-block;
  position: relative;
}
.custom-list-type01-item .custom-list-type-info > small:not(:last-child) {
  padding-right: 10px;
}
.custom-list-type01-item
.custom-list-type-info
> small:not(:last-child):before {
  content: "·";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}

/* ----- apex charts ----- */
.apex-charts text,
.apexcharts-datalabels-group text {
  font-family: "Pretendard Variable" !important;
}
.apexcharts-xaxis-label {
  font-size: 12px;
}
.apexcharts-xaxis text.apexcharts-xaxis-title-text {
  fill: #adb5bd !important;
  font-weight: 600 !important;
}
.apexcharts-legend-text {
  font-family: "Pretendard Variable" !important;
}

/* myScoreChart */
#myScoreChart .apexcharts-tooltip {
  background: #fff;
}

/* ----- topbar START ----- */
.custom-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--ct-header-height);
  padding: 0 var(--mobile-pd);
  background: #fff;
  overflow: hidden;
  z-index: 10;
}
.custom-topbar.scrollDown {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(4px);
}
[class*="custom-topbar-"] img {
  width: 100%;
}
.custom-topbar-logo img {
  width: 75px;
  filter: invert(39%) sepia(76%) saturate(1566%) hue-rotate(209deg)
  brightness(100%) contrast(85%);
}
.custom-topbar-goBack {
  font-size: 22px;
  color: var(--ct-secondary);
}

/* header title */
.custom-topbar-center {
  font-size: 15px;
}
.custom-topbar-title > span {
  font-weight: 400;
}
.custom-topbar-title > span strong {
  font-weight: 700;
}
.custom-topbar-title > img {
  width: 18px;
  margin-left: 4px;
  transform: translateY(-2px);
}

/* header title - parent */
.custom-topbar-center .custom-parent-topbar .custom-topbar-subtitle {
  max-width: 244px;
  margin: 0 auto;
}

/* header title - student */
.custom-topbar-center .custom-student-topbar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* header lnb */
.custom-topbar-right > [class*="custom-topbar-"] {
  display: inline-block;
  vertical-align: middle;
}
.custom-topbar-expire {
  margin: 10px 0 0;
  margin-right: 7px;
}
.custom-topbar-jwt-title {
  margin-bottom: -3px;
}
#jwt-remaining-time-view {
  font-weight: 500;
}
.custom-topbar-profile {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  border-radius: 12px;
}
.custom-topbar-profile-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* 학부모 topbar */
.custom-topbar-profile.custom-parent-topbar {
  border: 1px solid #fafafa;
}

/* 학생 topbar */
.custom-topbar-qrcode {
  position: relative;
  width: 40px;
  height: 40px;
}
.custom-topbar-qr {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.custom-topbar-camera {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 22px;
  color: var(--ct-secondary);
}
/* ----- topbar END ----- */

/* ----- footer START ----- */
.custom-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.05);
  /* border-top: 1px solid #eee; */
}
.custom-footer-list {
  overflow: hidden;
}
.custom-footer-item {
  float: left;
  width: calc(100% / 5);
}
.custom-footer-link,
.custom-footer-link:hover {
  color: var(--ct-gray-400);
}
.custom-footer-link {
  display: block;
  width: 100%;
  height: var(--ct-footer-height);
  padding: 8px 0 0;
  text-align: center;
}
.custom-footer-link.active {
  font-weight: 700;
  color: var(--ct-secondary);
}
.custom-footer-link .uil {
  font-size: 20px;
}
.custom-footer-link-name {
  display: block;
  margin: -3px 0 0;
  font-size: 14px;
}

/* ### 내 정보 modal ### */
.custom-myinfo-modal {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  min-height: 100vh;
  /* height: 100vh; */
  min-height: -moz-available; /* WebKit-based browsers will ignore this. */
  min-height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  min-height: fill-available;
  height: 100%;
  height: -moz-available; /* WebKit-based browsers will ignore this. */
  height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  height: fill-available;
  background: #fff;
  z-index: 100;
  transition: 0.2s;
  overflow-y: auto;
}
.custom-myinfo-modal.show {
  right: 0;
}

/* --- modal header --- */
.custom-myinfo-modal .custom-modal-header {
  padding: 7px 0;
}
.custom-myinfo-modal .custom-modal-header.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 100;
}
.custom-myinfo-modal .custom-modal-header span {
  font-weight: 600;
  font-size: 15px;
  color: var(--light-bg-col1);
}
.custom-myinfo-modal .custom-modal-btn-close,
.custom-myinfo-modal .custom-modal-btn-close:hover,
.custom-myinfo-modal .custom-modal-btn-close:focus {
  color: var(--ct-secondary);
}
.custom-myinfo-modal .custom-modal-btn-close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  font-size: 24px;
}

/* --- modal body --- */
.custom-myinfo-modal .custom-modal-body {
  min-height: 100vh;
  padding: calc(var(--ct-header-height) + 7px) 0
  calc(calc(50px + calc(var(--mobile-pd) * 2)) + 7px);
  background: #fff;
}
.custom-myinfo-thumb {
  text-align: center;
  margin: 0 0 25px;
}
.custom-myinfo-profile-thumb {
  position: relative;
}
.custom-myinfo-img {
  width: 70px;
  height: 70px;
  margin: 15px auto 0;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.custom-myinfo-img img {
  width: 100%;
}
.custom-myinfo-file {
  position: absolute;
  width: 30px;
  height: 30px;
  line-height: 30px;
  bottom: -5px;
  left: calc(50% + 28px);
  transform: translateX(-50%);
  background: #fff;
  border-radius: 100%;
  box-shadow: 4px 4px 7px #dbdbdb;
  text-align: center;
}
.custom-myinfo-file input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.custom-myinfo-file .uil {
  color: var(--point);
  font-size: 17px;
}
.custom-myinfo-thumb h3 {
  margin: 23px 0 17px;
  font-size: 19px;
}
.custom-myinfo-thumb a,
.custom-myinfo-thumb a:hover,
.custom-myinfo-thumb a:focus {
  display: inline-block;
  width: 80px;
  height: 40px;
  line-height: 40px;
  border: 1px solid var(--ct-border-color);
  border-radius: var(--ct-bdrad);
  color: var(--ct-secondary);
}
.custom-myinfo-btn-wrap a:not(:last-child) {
  margin-right: 4px;
}

/* --- modal form --- */
.custom-myinfo-form {
  width: calc(100% - calc(var(--mobile-pd) * 2));
  margin: 0 auto;
}
.custom-myinfo-form [class*="custom-myinfo-"]:not(:last-child) {
  margin: 0 0 15px;
}
.custom-myinfo-form [class*="custom-myinfo-"] .form-label {
  display: block;
  margin: 0 0 5px;
  font-weight: 500;
}
.custom-myinfo-form [class*="custom-myinfo-"] .form-control {
  padding-left: 10px;
}
.custom-pw-wrap {
  position: relative;
}
.custom-myinfo-form [class*="custom-myinfo-"] .custom-pw-wrap .form-control {
  padding-right: 30px;
}
.custom-pw-wrap .xi-eye-off-o {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #ccc;
  right: 10px;
}
.custom-pw-wrap .xi-eye-off-o.show:before {
  content: "\e950";
}
.custom-pw-help span {
  display: block;
}

/* --- modal body - btn --- */
.custom-myinfo-modal .custom-myinfo-btn {
  position: fixed;
  width: calc(100% - calc(var(--mobile-pd) * 2));
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 0;
  background: linear-gradient(to top, #fff 70%, transparent);
  z-index: 10;
  display: none;
}
.custom-myinfo-modal.show .custom-myinfo-btn {
  display: block;
}
.custom-myinfo-modal .custom-modal-btn-save {
  font-size: 15px;
  transition: 0.3s;
}

/* --- 학생용 내정보 modal - 내 등급 정보 --- */
/* 2023-01-09 유병현 구분선 클래스 따로 뺌 */
.custom-mypage-wrap {
  padding: 0 7px;
}
.top-hr {
  margin: 25px 0 0;
  border-top: 5px solid #f3f2f1;
}
.bottom-hr {
  margin: 0 0 25px;
  border-bottom: 5px solid #f3f2f1;
}
.custom-myinfo-modal .custom-mypage-bottom {
  padding: 10px 0 0;
}
.custom-myinfo-modal .custom-mypage-bottom-box:last-child {
  margin: 0 0 10px;
}
.custom-myinfo-modal .custom-mypage-title {
  padding: 20px 0;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  color: unset;
}

/* ----- 학부모앱 - 학생 선택 START ----- */
#selectChildren-modal
:is(.modal-content, .modal-body, .custom-profile-select-wrap) {
  height: 100%;
  overflow: hidden;
}
#selectChildren-modal .modal-content {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
#selectChildren-modal .modal-dialog-scrollable .modal-body {
  padding-top: 0;
  padding-bottom: 10px;
}

.custom-profile-select-wrap {
  text-align: center;
  overflow: hidden;
}
.custom-profile-select-wrap h3 {
  margin: 0;
  color: #fff;
}

/* 학생 프로필을 선택하세요 문구 */
.custom-profile-select-title {
  font-weight: 600;
}

/* 학생 프로필 목록 */
.custom-profile-select-list {
  display: grid;
  grid-template-columns: repeat(2, calc(calc(100% - 25px) / 2));
  grid-gap: 25px;
}
.custom-btn-profile {
  width: 100%;
  padding: 0;
}
.custom-btn-profile [class*="custom-profile-"] {
  display: block;
}
.custom-profile-thumb {
  border-radius: var(--ct-bdrad);
  position: relative;
  overflow: hidden;
}
.addChildren .custom-profile-thumb {
  border: 1px solid #fff;
}
.custom-student-profile-img {
  width: 100%;
  height: 100%;
}
.custom-profile-select-item.addChildren .custom-student-profile-img {
  filter: invert(90%) sepia(19%) saturate(206%) hue-rotate(169deg)
  brightness(97%) contrast(88%);
}
.custom-profile-del {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  border-radius: 11px;
  background: rgba(var(--ct-secondary-rgb), 0.5);
  text-align: center;
  font-size: 18px;
  color: #f7f7f7;
}
.custom-profile-del:hover,
.custom-profile-del:focus {
  color: #f7f7f7;
}
.custom-profile-name {
  margin: 13px 0 0;
  font-size: 17px;
  color: #fff;
}

/* 학생 프로필을 선택하세요 문구 */
#selectChildren-modal .custom-profile-select-top {
  padding: 25px 0;
  position: relative;
}
#selectChildren-modal .custom-profile-select-title {
  text-align: left;
  font-size: 18px;
}
#selectChildren-modal .custom-btn-close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 24px;
  color: #dedede;
}

/* 학생 프로필 목록 */
#selectChildren-modal .custom-profile-select-middle {
  height: calc(100% - calc(70px + 85px));
  overflow-y: scroll;
  border-radius: var(--ct-bdrad);
}

/* 로그아웃 */
#selectChildren-modal .custom-profile-select-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding:10px;
}
#selectChildren-modal .custom-profile-select-bottom #qrInfo {
  margin-bottom: 10px;  /* qrInfo와 로그아웃 버튼 사이에 여백 추가 */
  word-wrap:break-word;
}
#selectChildren-modal .custom-profile-select-bottom .custom-modal-btn-logout {
  font-size: 14px;
  color: #eaeaea;
  white-space: nowrap;
  word-wrap:break-word;
  max-width: 100%;
}
/* ----- 학부모앱 - 학생 선택 END ----- */

/* --- 로그인 관련 form --- */
.custom-login-box > small {
  display: block;
  margin: 4px 0 0;
  font-weight: 400;
  font-size: 13px;
  color: var(--ct-text-muted);
}
.custom-login-box > small a,
.custom-login-box > small a:hover {
  font-weight: 600;
  font-size: inherit;
  color: inherit;
}
.custom-login-input-box {
  position: relative;
}
.custom-login-input-box :is(.btn, .form-control, .form-select) {
  font-size: 14px;
}
.custom-login-input-box .btn:hover {
  font-size: 14px;
}
.custom-login-input-box i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--ct-gray-500);
}
.custom-login-input-box .ri-eye-line {
  right: 10px;
}
.custom-login-input-box .ri-eye-line.show:before {
  content: "\ecb7";
}

/* --- 비밀번호 경고 문구 START --- */
.custom-pw-text,
.custom-isPwMatch {
  margin: 4px 0 0;
  font-size: 13px;
}
.custom-pw-show {
  color: var(--ct-gray-500);
}

/* 비밀번호 안전도 */
.custom-pw-security {
  font-size: 13px;
}
[class*=".custom-pw-security-"] {
  display: inline-block;
  vertical-align: middle;
}
.custom-pw-security-title {
  margin-right: 10px;
  color: var(--ct-text-muted);
  position: relative;
}
.custom-pw-security-title:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
  right: -7px;
  background: var(--ct-gray-500);
}
.custom-security-bar {
  display: inline-block;
  width: 15px;
  height: 3px;
  margin-left: 3px;
  vertical-align: middle;
}
.custom-pw-security-low .custom-security-bar {
  background: var(--ct-danger);
}
.custom-pw-security-middle .custom-security-bar {
  background: var(--ct-warning);
}
.custom-pw-security-high .custom-security-bar {
  background: var(--ct-success);
}
/* --- 비밀번호 경고 문구 END --- */

/* ----- 등급 정보 START ----- */
.custom-mypage-bottom {
  padding: 14px 0 0;
}
.custom-mypage-bottom-box {
  padding: 17px 0;
  padding: 0 0 17px;
  background-color: #fff;
  border-radius: var(--ct-bdrad);
  /* box-shadow: 0 0 10px rgb(0 0 0 / 5%); */
}
.custom-mypage-bottom-box:not(:last-child) {
  margin: 0 0 14px;
}
.custom-mypage-title {
  display: block;
  padding: 20px 0 0;
  text-align: center;
  font-weight: 400;
  font-size: 15px;
}
.custom-chart-title {
  display: block;
  margin: 5px 0 15px;
  text-align: center;
  font-size: 18px;
}
.custom-chart-title small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--ct-text-muted);
}
.custom-subchart-title {
  display: block;
  text-align: center;
  font-weight: 400;
  color: var(--ct-text-muted);
}
.custom-mypage-update {
  margin: 10px 0 15px;
  text-align: center;
  color: var(--ct-gray-500);
}
.custom-mypage-update span {
  font-size: 14px;
  color: inherit;
}
.custom-score-arrow i {
  font-size: 13px;
}

/* Radial Chart */
.custom-mypage-chart {
  min-height: 359px;
  position: relative;
}
.custom-mypage-chart .apexcharts-datalabels-group text {
  fill: var(--default-color) !important;
  font-weight: 600;
}
.custom-mypage-wrap
.apexcharts-datalabels-group
text.apexcharts-datalabel-label {
  fill: var(--light-bg-col1) !important;
}
.custom-mypage-wrap
.apexcharts-datalabels-group
text.apexcharts-datalabel-value {
  font-weight: 600;
  fill: var(--ct-success) !important;
}
.custom-mypage-wrap
.apexcharts-datalabels-group
text.apexcharts-datalabel-value
tspan {
  font-size: 22px;
  fill: var(--light-bg-col1) !important;
}
.custom-student-score-view,
.custom-student-score-view:hover,
.custom-student-score-view:focus {
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #aaa;
}
.custom-student-score-view i {
  vertical-align: middle;
  font-size: 13px;
}
.custom-mypage-no-score {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: none;
}
.custom-mypage-no-score :is(strong, span) {
  display: block;
  line-height: 1em;
}
.custom-mypage-no-score span {
  margin: 0 0 7px;
  font-size: 18px;
}
.custom-mypage-no-score strong {
  font-size: 26px;
}

/* 그래프 없는 경우 */
.custom-no-option div[dir="ltr"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - calc(14px * 2));
  max-width: 358px;
  max-height: 358px;
  border: 8px solid var(--ct-border-color);
  border-radius: 100%;
}
.custom-no-option .custom-mypage-no-score {
  display: block;
  position: absolute;
}

/* 상위 % & 문제 수 & 정답률 */
.custom-mypage-score-list {
  margin: 17px 0 0;
}
.custom-mypage-score-item {
  flex: 1;
  text-align: center;
  position: relative;
}
.custom-mypage-score-item:not(:last-child):before {
  content: "";
  position: absolute;
  width: 1px;
  height: 50%;
  background-color: #e5e5e5;
  top: 50%;
  transform: translateY(-50%);
  right: 1px;
}
.custom-mypage-score-item > [class*="custom-mypage-score"] {
  display: block;
}
.custom-mypage-score-title {
  font-size: 14px;
}
.custom-mypage-score-num {
  font-weight: 700;
  font-size: 28px;
}
.custom-mypage-score-compare {
  padding: 2px 0 0;
  font-size: 12px;
}
.custom-last-month {
  display: block;
  margin: 0 0 -4px;
  font-size: 12px;
}
.custom-last-month + span {
  font-size: 12px;
  font-weight: 700;
}
.custom-mypage-score-compare i {
  margin-left: -2px;
  vertical-align: middle;
}

/* 등급 올리기 / 월별 등급 변화 확인 버튼 */
.custom-mypage-btn-box .btn {
  width: 100%;
  height: var(--ct-btn-h);
  line-height: var(--ct-btn-h);
  padding: 0;
}
/* ----- 등급 정보 END ----- */

/* ----- 메인화면 START ----- */
.custom-main-wrap {
  padding: 0 !important;
}

/* 배너 */
.custom-main-wrap .carousel-item img {
  width: 100%;
  height: 100%;
}
.carousel-indicators {
  margin-bottom: 10px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.65);
}
:is(.carousel-control-prev-icon, .carousel-control-next-icon) i {
  font-size: 24px;
  color: #fff;
}
.carousel-indicators [data-bs-target] {
  background-color: var(--ct-dark);
}

/* --- 게시판 --- */
.custom-main-board {
  margin: 15px 0 0;
  padding: 0 14px 15px;
}
.custom-main-board-box {
  padding: 17px 20px;
  background-color: #fff;
  box-shadow: var(--ct-box-shadow);
  border-radius: var(--ct-bdrad);
}
.custom-main-board-box:not(:last-child) {
  margin: 0 0 20px;
}

[id*="main"] .custom-main-board-box {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0px;
}

/* 게시판 제목 */
.custom-main-board-top {
  color: var(--default-color);
  position: relative;
}
.custom-main-board-title {
  font-size: 17px;
}
.custom-main-board-link {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%) rotate(90deg);
  right: 0;
  font-size: 18px;
  color: var(--ct-text-muted);
}

/* 게시글 */
.custom-main-board-item:not(:last-child) {
  margin: 0 0 10px;
}
.custom-main-board-item:first-child {
  margin-top: 20px;
}
.custom-main-board-item-link {
  display: block;
  overflow: hidden;
}
.custom-main-board-item-title {
  float: left;
  font-weight: 500;
  font-size: 15px;
  color: var(--txt-col2);

  /* 2022-12-29 유병현 문자 ...처리 */
  text-overflow: ellipsis;
  /* display:inline-block; */
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
}
.custom-main-board-item-date {
  float: right;
  transform: translateY(2px);
  font-size: 13px;
  color: var(--light-gray);
}
/* ----- 메인화면 END ----- */

/* ----- 게시글 START ----- */
/* --- 게시글 detail --- */
.custom-board-detail-wrap {
}
.custom-board-detail-top {
  padding: 20px 0 10px;
  margin: 0 0 15px;
  border-bottom: 1px solid var(--ct-border-color);
}

/* 게시글 detail 제목 */
.custom-board-detail-top .custom-board-title {
  font-size: 24px;
}

/* 게시글 detail 날짜 */
.custom-board-detail-top .custom-board-date {
  margin: 7px 0 0;
  color: var(--ct-text-muted);
}

/* 게시글 detail 내용 */
.custom-board-detail-text p {
  white-space: pre-wrap;
}
.custom-board-detail-text img {
  max-width: 100%;
}
/* 게시글 detail 뒤로가기 버튼 */
/* ----- 게시글 END ----- */

/* ----- 학습활동 & 숙제 START ----- */
.container-fluid > .custom-study-wrap {
  height: 100%;
}

/* 기간 조회 */
.custom-study-wrap .custom-study-search {
  padding: 0 0 15px;
}
.custom-study-wrap .custom-study-datepick .form-control {
  width: 78%;
}
.custom-study-wrap .custom-btn-datesearch {
  width: 20%;
}

/* --- 목록 --- */
/* 2022-12-22 유병현 무조건 보이도록 설정 */
.custom-study-wrap .custom-study-item {
  padding: 15px 17px 17px;
  background-color: #fff;
  /* box-shadow: 0 0 10px rgba(0,0,0,0.05); */
  border-radius: var(--ct-bdrad);
  justify-content: space-between;
  align-items: center;
  /* display: none; */
  display: flex;
}
.custom-study-wrap .custom-study-item:not(:last-child) {
  margin: 0 0 14px;
}
.custom-study-wrap .custom-study-item-left {
  width: 68%;
}
.custom-study-wrap .custom-study-item-right {
  width: 30%;
  text-align: right;
}
.custom-study-wrap .custom-study-desc [class*="custom-study-"] {
  /* display: block; */
}
.custom-study-wrap .custom-study-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 8px 0 0;
  font-size: 16px;
}

/* 문제 개수 / 정답률 */
.custom-study-wrap .custom-study-status {
  margin: 13px 0 0;
}
.custom-study-wrap .badge:not(:last-child) {
  margin-right: 3px;
}

/* 완료 / 미완료 버튼 */
.custom-study-wrap .custom-study-item-right .btn {
  width: var(--ct-btnTest);
}
.custom-study-wrap .custom-btn-waiting {
  /* box-shadow: 0 0 6px rgb(10 207 151 / 10%); */
}

/* 내역 없는 경우 */
.custom-study-wrap .custom-empty-study-list {
  height: calc(
          100vh -
          calc(
          calc(var(--ct-header-height) + var(--ct-footer-height)) +
          calc(40px + 22px) + calc(45px + 15px + 7px)
          )
  );
  padding: calc(
          calc(
          100vh -
          calc(
          calc(var(--ct-header-height) + var(--ct-footer-height)) +
          calc(40px + 22px) + calc(45px + 15px + 7px)
          )
          ) / 2
  )
  14px;
  border-radius: var(--ct-bdrad);
  background: #fff;
  text-align: center;
  display: none;
}

/* 2022-12-22 유병현 학습활동 내역 없는 경우 css로 자동설정  */
.custom-study-wrap .worksheet-ol .custom-empty-study-list:last-child {
  display: list-item !important;
}
/* ----- 학습활동 & 숙제 END ----- */

/* ----- 학습활동 & 숙제 Detail START ----- */
.custom-test-wrap .custom-test-top {
  margin: 0 0 12px !important;
}

/* --- title --- */
.custom-test-wrap .custom-page-title {
  margin: 0;
  padding: 0;
}
.custom-test-wrap .custom-test-subtitle {
  padding: 20px 0 2px;
  font-weight: 400;
  font-size: 15px;
  color: var(--point);
}

/* --- 목록 --- */
.custom-test-wrap .custom-test-item {
  padding: 13px 12px 15px;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
  border-radius: var(--ct-bdrad);
}
.custom-test-wrap .custom-test-item:not(:last-child) {
  margin: 0 0 17px;
}
.custom-test-wrap .custom-test-item * {
  letter-spacing: 0px;
}

/* --- 문제 Start --- */
/* 문제 내용 */
.custom-test-wrap .custom-test-item-desc {
  max-width: 320px;
  margin: 5px auto 0;
}
/* --- 문제 End --- */

/* --- 정답 선택 START --- */
.custom-test-wrap .custom-test-item-bottom {
  margin: 25px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--table-head);
}
.custom-test-answer-radio-title {
  margin: 0 0 8px;
}
.custom-test-wrap .custom-test-answer-radio {
  margin: 5px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}
.custom-test-wrap .custom-test-radio-box {
  flex: 1;
}
.custom-test-wrap .custom-test-radio {
  display: none;
}

/* 객관식 번호 선택 */
.custom-test-wrap .custom-test-radio-label {
  display: block;
  width: 100%;
  height: 37px;
  line-height: 37px;
  border-radius: 50px;
  text-align: center;
  background: var(--ct-light);
  color: var(--ct-text-muted);
}
.custom-test-wrap .custom-test-radio:checked + .custom-test-radio-label {
  background-color: var(--point);
  color: #fff;
}

/* 주관식 버튼 */
.preview-answer-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
/*.preview-answer-img + .btn {*/
/*  width: 100%;*/
/*  text-align: center;*/
/*  background: var(--ct-secondary-lighten);*/
/*  color: var(--ct-secondary);*/
/*}*/
/*.preview-answer-img[src='/img/empty-answer.png'] + .btn {*/
/*  background: var(--point-light);*/
/*  color: var(--point);*/
/*}*/
.custom-test-answer-radio .btn {
  width: 100%;
  text-align: center;
  background: var(--point-light);
  color: var(--point);
}
/*.preview-answer-img + .btn:before {*/
/*  content: '정답 수정'*/
/*}*/
/*.preview-answer-img[src='/img/empty-answer.png'] + .btn:before {*/
/*  content: '정답 입력'*/
/*}*/

.custom-test-list[data-status="Y"] :is(.preview-answer-img + .btn) {
  background: #fff;
  border: 1px solid var(--ct-border-color);
  color: var(--ct-text-muted);
  opacity: 0.5;
}
/* --- 정답 선택 END --- */

/* 제출하기 버튼 */
.custom-test-wrap .custom-test-submit {
  padding: 15px 0 0;
}
.custom-test-wrap .custom-btn-submit {
  width: 100%;
}

/* --- canvas modal START --- */
#canvas-modal .modal-content {
  min-height: -moz-available; /* WebKit-based browsers will ignore this. */
  min-height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  min-height: fill-available;
  height: 100%;
  height: -moz-available; /* WebKit-based browsers will ignore this. */
  height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  height: fill-available;
}
#canvas-modal :is(.modal-header, .modal-footer) {
  padding-top: 0;
  padding-bottom: 0;
}

/* #canvas-modal header */
#canvas-modal .modal-header {
  height: 55px;
  border: none;
  color: var(--ct-secondary);
}

/* #canvas-modal body */
#canvas-modal .modal-body {
  height: calc(100% - calc(55px + 45px));
  padding-top: 0;
  padding-bottom: 0;
}
.custom-canvas {
  width: 100%;
  height: calc(100% - 6px);
  border: 1px solid var(--ct-border-color);
  border-radius: var(--ct-bdrad);
  image-rendering: pixelated;
}

/* #canvas-modal footer */
#canvas-modal .modal-footer {
  height: 45px;
  border: none;
  color: var(--ct-secondary);
}
.canvas-modal-action {
  width: 100%;
  margin: -4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.canvas-modal-action button i {
  font-weight: 400;
  font-size: 15px;
}
.canvas-modal-action-left button {
  color: var(--ct-text-muted);
}
.canvas-modal-action-right button,
.canvas-modal-action-right button:hover {
  height: 35px;
  line-height: 35px;
  padding: 0;
  font-weight: 500;
  font-size: 13px;
}
.canvas-modal-action .canvas-modal-camera {
  border: 1px solid var(--point-border-light);
}
/* --- canvas modal END --- */

/* --- 웹앱수식기 START --- */
#answer-modal .modal-content {
  min-height: -moz-available; /* WebKit-based browsers will ignore this. */
  min-height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  min-height: fill-available;
  height: 100%;
  height: -moz-available; /* WebKit-based browsers will ignore this. */
  height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  height: fill-available;
}
#answer-modal :is(.modal-header, .modal-body, .modal-footer) {
  padding-left: 10px;
  padding-right: 10px;
}
#answer-modal .modal-header {
  height: 45px;
}

/* 문제 & 정답 화면 */
#answer-modal .custom-answerModal-top {
  /*height: calc(100% - 287px);*/
  height: calc(100% - 320px);
  padding: 10px;
  border-radius: var(--ct-bdrad);
  margin-top: auto;
  flex-grow: 1;
  min-height: 0;

  /* 추가 */
  position: relative;
  display: flex;
  flex-direction: column;
}
.custom-answerModal-test {
  height: 70%;
  margin: 0 0 7px;
  overflow-y: auto;
  /* 추가 */
  flex-shrink: 0;
  max-height: 35%;
  overflow-y: auto;
}
.custom-answerModal-test .custom-test-num {
  vertical-align: middle;
}
.custom-answerModal-answer {
  /*height: calc(30% - 7px);*/
  /*height: 55%;*/
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 8px;
}
.custom-answerModal-answer-title {
  height: 32px;
  line-height: 32px;
  margin: 0 0 7px;
  padding: 0 7px;
  background: rgba(var(--ct-success-rgb), 0.1);
  border: 1px solid rgba(var(--ct-success-rgb), 0.35);
  border-radius: var(--ct-bdrad);
}
.custom-answerModal-answer-desc {
  height: calc(100% - calc(32px + 13px));
  margin-bottom: 6px;
}
.custom-answerModal-answer-desc .form-control:read-only {
  background: #fff;
  padding: 0 7px 7px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.custom-answerModal-answer-desc .form-control:read-only::-webkit-scrollbar {
  display: none;
}

.custom-answerModal-answer-desc textarea {
  width: 100%;
}

/* 기본 / 수식 / 한/영 입력기 tab */
#answer-modal .nav-tabs {
  padding: 10px 0;
}
#answer-modal .nav-tabs .nav-link {
  /*height: 40px;*/
  /*line-height: 40px;*/
  height: 33px;
  line-height: 33px;
  padding: 0;
  border-radius: 100px;
  color: var(--ct-text-muted);
}
#answer-modal
:is(.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active) {
  border: none;
  background: var(--point);
  color: #fff;
}

/* 수식입력기 */
.custom-answerModal-bottom {
  padding-left : 5px;
  padding-right : 5px;
}
.custom-calculator-box {
  display: grid;
  grid-template-columns: repeat(4, calc(calc(100% - calc(7px * 3)) / 4));
  grid-gap: 7px;
}
.custom-calculator-item {
  /*height: 40px;*/
  height: 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--ct-bdrad);
  background: #f7f7f7;
  color: var(--ct-secondary);
}
.custom-calculator-item.focus {
  background: var(--point-light);
  color: var(--point);
}
.custom-calculator-item-alpha {
  height: 51px;
}
.custom-calculator-item hr {
  width: 20px;
  height: 2px;
  margin: -3px 0;
  background: #000;
}
.custom-calculator-item svg {
  width: 16px;
}

/* 한/영 수식입력기 */
#calcCharacter .custom-calculator-box {
  /* grid-template-columns: repeat(10, calc(calc(100% - calc(4px * 9)) / 10)); */
  align-items: center;
  justify-content: center;
  /* grid-gap: 0 4px; */

  display: flex;
  gap: 0 4px;
}
#calcCharacter .custom-calculator-box:not(:last-child) {
  margin: 0 0 7px;
}
#calcCharacter .custom-calculator-item {
  width: calc(calc(100% - calc(4px * 9)) / 10);
}
#calcCharacter .custom-calculator-item[data-id="space"] {
  width: calc(calc(calc(calc(100% - calc(4px * 9)) / 10) * 4) + calc(4px * 3));
}
#calcCharacter
.custom-calculator-item.focus:not(
    .custom-calculator-item[data-id="language"]
  ) {
  width: calc(calc(calc(calc(100% - calc(4px * 9)) / 10) * 3) / 2);
}
#calcCharacter .custom-calculator-item[data-id="upper"] img {
  width: 12px;
}
.custom-calculator-keyboard-language {
  position: relative;
}
.custom-calculator-keyboard-language span {
  position: absolute;
  font-size: 10px;
  top: 50%;
  left: 50%;
}
.custom-calculator-keyboard-language span:first-child {
  transform: translateX(-50%) translateY(calc(-50% + -5px));
  padding-right: 10px;
}
.custom-calculator-keyboard-language span:last-child {
  transform: translateX(-50%) translateY(calc(-50% + 5px));
  padding-left: 10px;
}
/* --- 웹앱수식기 END --- */
/* ----- 학습활동 & 숙제 Detail END ----- */

/* ----- 보고서 START ----- */

/* 월별 등급 변화 확인 */
.custom-myscore-wrap {
  padding: 0 10px;
}
.custom-myscore-top {
  margin: 0 0 25px;
}
.custom-myscore-bottom-box {
  margin: 0 0 10px;
  padding: 17px;
  background-color: #fff;
  /* box-shadow: 0 0 10px rgba(0,0,0,0.05); */
  border-radius: 10px;
}
.custom-myscore-subtitle {
  padding: 10px 0 0;
  text-align: center;
  font-size: 15px;
}

/* 등급 올리기 버튼 */
.custom-myscore-btn-box .custom-btn-medium {
  display: block;
  width: 100%;
}
.custom-btn-upgrade-score:hover {
  background-color: var(--point1);
}
/* ----- 보고서 END ----- */

/* ----- 알림 START ----- */
#customNotifyModal .modal-body {
  padding-bottom: 0.375rem;
}
.custom-notify-item {
  /* padding: 17px; */
  /* background-color: #fff; */
  /* box-shadow: 0 0 10px rgba(0,0,0,0.07); */
  /* border-radius: var(--ct-bdrad); */

  padding: 0;
  border-radius: 0px;
}
.custom-notify-item:not(:last-child) {
  margin: 0 0 15px;

  padding: 0 0 15px;
  border-bottom: 1px solid var(--ct-border-color);
}
.custom-notify-item [class*="custom-notify-"] {
  /* display: block; */
}

/* 알림 내역 없는 경우 */
.custom-empty-notify-list {
  display: none;
}
/* 2022-12-22 유병현 학습활동 내역 없는 경우 css로 자동설정  */
.notice-ol .custom-empty-notify-list:last-child {
  height: calc(100vh - calc(var(--ct-header-height) + var(--ct-footer-height)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 알림 목록 */
.custom-notify-text {
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 16px;
}

/* 알림 내용 팝업창 */
.custom-modal-notify-title {
  font-size: 16px;
}
.custom-modal-notify-date {
  display: block;
  margin: 5px 0 0;
}
.custom-modal-notify-content {
  margin: 10px 0 0;
}

/* 닫기 버튼 */
#customNotifyModal .modal-footer {
  border: none;
}
#customNotifyModal .modal-footer .btn {
  width: 100%;
}
/* ----- 알림 END ----- */

/* ----- 본인인증 START ----- */
.custom-profile-bottom {
  width: 100%;
  padding: var(--ct-padding) !important;
}
.custom-profile-bottom .btn {
  width: 100%;
  margin: 7px 0 0;
  padding: 0;
}
/* ----- 본인인증 END ----- */

/* ----- FAQ START ----- */
.custom-faq-q,
.custom-faq-a {
  display: block;
  width: 100%;
  word-break: keep-all;
}
.custom-faq-q {
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-faq-q span {
  max-width: 90%;
  font-weight: 700;
}
.custom-faq-q i {
  font-size: 20px;
  color: var(--ct-text-muted);
}
.custom-faq-a {
  padding: 0 0 17px;
  color: var(--ct-secondary);
  display: none;
}
.custom-faq-a.show {
  display: block;
}
.custom-faq-a a {
  text-decoration: underline;
  color: var(--ct-secondary);
}
.custom-faq-link {
  display: block;
  margin: 12px 0;
  font-weight: 700;
}
.faq-list-style {
  display: list-item;
  list-style: circle;
  margin: 0 17px;
}
/* ----- FAQ Detail END ----- */

/* ----- 에러 페이지 START ----- */
.custom-error-wrap {
  height: 100vh;
  position: relative;
}
.custom-error-desc {
  height: calc(100% - 78px);
  overflow-y: scroll;
  padding: 120px 0 0;
}
.custom-error-desc img {
  width: 240px;
  margin-left: 25px;
}
.custom-error-desc .text-error {
  font-family: var(--ct-body-font-family);
  font-size: 6.25rem;
}
.custom-error-desc .error-eng {
  font-size: 39px;
}
.custom-error-desc .error-kor {
  font-size: 23px;
}
.custom-error-desc p {
  line-height: 1.1em;
  font-size: 17px;
}
.custom-error-btn-wrap {
  padding: 14px;
  background: #fff;
}
/* ----- 에러 페이지 END ----- */

/* ### 내 등급 페이지의 정보 버튼 ### */
.score-info {
  position: absolute;
  /* top: 39.5%; */
  top: calc(calc(calc(100% - 80px) / 2) + calc(15px / 2));
  left: 52vw;
  width: 15px;
  height: 15px;
  line-height: 15px;
  border: 1px solid #aeb9c5;
  border-radius: 100%;
  text-align: center;
  font-size: 8px;
  color: #aeb9c5;
}

/* ### Alert - swal ### */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: rgba(var(--ct-secondary-rgb), 0.25) !important;
}
.swal2-popup {
  padding: 1.25em !important;
  border-radius: 13px !important;
}
.swal2-popup .swal2-html-container {
  line-height: 1.25em !important;
}
.swal2-container.swal2-center > .swal2-popup {
  box-shadow: none !important;
}
.swal2-container.swal2-center * {
  font-family: "Pretendard Variable" !important;
  color: var(--ct-secondary);
  word-break: keep-all;
  font-size: 16px;
}
.swal2-container.swal2-center strong {
  display: block;
  margin: 0 0 10px;
  font-size: 20px;
}
.swal2-popup i::before {
  font-family: remixicon !important;
}

/* --- alert text --- */
div:where(.swal2-container) div:where(.swal2-popup) {
  width: 500px !important;
  max-width: 100% !important;
}
.swal2-html-container {
  margin: 25px 0 15px !important;
  /* text-align: left !important; */
  line-height: 1.45em !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
.swal2-html-container .text-muted {
  word-break: keep-all;
  font-size: 14px;
}

/* alert badge */
.swal2-container.swal2-center .badge {
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  transform: translateY(-2px);
  font-weight: 600;
  font-size: 14px;
}
.swal2-container.swal2-center .badge.bg-secondary-lighten {
  color: var(--ct-secondary);
}

/* --- alert btn --- */
.swal2-loader {
  display: none !important;
}
.swal2-actions {
  gap: 7px !important;
}
.swal2-popup .swal2-styled {
  width: 120px !important;
  height: 44px !important;
  line-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--ct-bdrad) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  transition: 0.25s;
}
.swal2-popup .swal2-styled:focus {
  box-shadow: none !important;
}

/* 확인 버튼 */
.swal2-popup .swal2-styled.swal2-confirm {
  background: var(--point) !important;
  color: #fff !important;
  order: 2 !important;
}
.swal2-popup .swal2-styled.swal2-confirm:hover {
  background: var(--point-dark) !important;
}
.swal2-popup .swal2-styled.swal2-deny {
  background: var(--ct-danger) !important;
  color: #fff !important;
  order: 1 !important;
}

/* 취소 버튼 */
.swal2-popup .swal2-styled.swal2-cancel {
  background: var(--ct-light) !important;
  color: var(--ct-text-muted) !important;
}
.swal2-popup .swal2-styled.swal2-cancel:hover {
  background: var(--ct-gray-300) !important;
}

/* ### kakao 본인인증 ### */
#cert-modal .custom-form-control:nth-child(1) .form-control {
  border-radius: 7px 7px 0 0 !important;
}
#cert-modal .custom-form-control:nth-child(2) .form-control {
  border-radius: 0px !important;
}
#cert-modal .custom-form-control:nth-child(3) .form-control {
  border-radius: 0 0 7px 7px !important;
}
#cert-modal .custom-cert-modal-guide {
  margin-top: -13px;
}
#cert-modal .btn-kakaotalk .kakaotalk-symbol {
  width: 24px;
}
.custom-comment-profile {
  align-items: center;
  display: inline-flex;
}
.custom-comment-profile .account-user-avatar {
  width: 30px;
  height: 30px;
  margin-right: 6px;
  margin-right: 4px;
  border-radius: 7px;
  border: 1px solid var(--ct-table-border-color);
}
span .new-tag {
    background-color: red;
    color:white;
    border-radius: 28px;
    display: inline-block;
    width: 14px;
    height: 15px;
    text-align: center;
    margin-left: 8px;
    font-weight: bold;
    font-size: 10px;
}

/* file upload */
.custom-file-upload-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.custom-file-upload-item-left {
    width: calc(100% - calc(20px + 6px));
    display: flex;
    align-items: center;
    gap: 6px;
}
.custom-elps-1 {
    -webkit-line-clamp: 1;
}
.custom-file-upload-item-right {
    width: 20px;
}

/* monthlydiagnosis*/
.custom-monthly-left-desc {
    white-space: nowrap !important;
}
.custom-monthly-left-desc > small {
    color: var(--ct-text-muted);
    white-space: nowrap;
}