@charset "utf-8";

.ui-dialog-form .ui-dialog.supporters_pop {
  --dialog-margin: 32px 80px 32px 80px;
}

.ui-dialog-form .ui-dialog.supporters_pop .ui-dialog-content {
  min-height: calc(100vh - 64px) !important;
}

.supporters_container {
  height: 100%;
  width: 100%;
  display: flex;
  flex: 1 1 0;
  background-color: var(--Gray-0, #FFF);
  padding-top: env(safe-area-inset-top, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  box-sizing: border-box;
}

@media (orientation: landscape) {
  .supporters_container {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
}

.supporters_container .left_section
,.supporters_container .right_section {
  display: flex;
  flex-direction: column;
}

.supporters_container .left_section {
  flex: 0 0 280px;
  border-right: 1px solid var(--Gray-20, #E1E4E9);
  box-sizing: border-box;
}

.supporters_container .left_section.hide {
  display: none;  
}

.supporters_container .right_section {
  flex: 1 1;
}

.supporters_container .left_section .supporters_header {
  display: flex;
  padding: 20px 12px 8px 12px;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
}

.supporters_container .right_section .supporters_header {
  display: flex;
  padding: 20px 20px 8px 20px;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
}

.supporters_container .supporters_header .icon_btn {
  --icon-btn-size: 40px;
}

.supporters_container .ask_list_wrap {
  display: flex;
  padding: 20px 12px 4px 12px;
  flex-direction: column;
  gap: 16px;
  flex: 1 0 0;
  overflow: hidden;
}

.supporters_container .ask_list_wrap .ask_list_top {
  flex: 0 0 auto;
}

.supporters_container .ask_list_wrap .folder_list_wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 0 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.supporters_container .folder_list_wrap .folder_list {
  display: flex;
  padding: 10px;
  align-items: flex-start;
  gap: 6px;
  border-radius: var(--Corner-radius-4, 4px);
  cursor: pointer;
}

.supporters_container .folder_list_wrap .folder_list.selected
,.supporters_container .folder_list_wrap .folder_list:hover {
  background-color: var(--Gray-5, #F9F9FB);
}

.supporters_container .folder_list_wrap .folder_list .folder_left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1 0 0;
}

.supporters_container .folder_list_wrap .folder_list .folder_title {
  color: var(--Text-Primary, #26282C);
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.supporters_container .folder_list_wrap .folder_list .folder_bottom {
  color: var(--Gray-50, #676D79);
}

.supporters_container .folder_list_wrap .folder_list .more_menu_wrap {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.supporters_container .folder_list_wrap .folder_list .more_menu_wrap .icon_btn {
  --icon-btn-size: 16px;
  --icon-btn-border-radius: 0px;
  --icon-btn-background-size: 16px;
}

.supporters_container .supporters_main_container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0px 24px;
  flex: 1 0 0;
  overflow: hidden;
  gap: 8px;
}

.supporters_container .supporters_main_container .main_wrap
,.supporters_container .supporters_main_container .view_wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  color: var(--Text-Primary, #26282C);
  width: 100%;
}

.supporters_container .supporters_main_container .main_wrap {
  max-width: 764px;
  align-items: center;
}

.supporters_container .supporters_main_container .view_wrap {
  max-width: 764px;  
  flex: 1 0 auto;
  margin-bottom: 8px;
}

.supporters_container .supporters_main_container .view_wrap .view_bottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.supporters_container .supporters_main_container .supporters_title_logo {
  width: 146px;
  height: 120px;
  flex: 0 0 auto;
  background-image: url(/ilos/images/supporters/supporters_title_logo.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

html.theme_dark .supporters_container .supporters_main_container .supporters_title_logo {
  background-image: url(/ilos/images/supporters/supporters_title_logo_dark.png);
}

.supporters_container .supporters_main_container .user_nm {
  color: var(--Supporters-Student, #4856F1);
}

.supporters_container .supporters_main_container .question_wrap {
  display: flex;
  padding: 12px;
  border-radius: var(--Corner-radius-12, 12px);
  border: 1px solid var(--Gray-20, #E1E4E9);
  align-self: stretch;
  gap: 12px;
  align-items: center;
  cursor: text;
}

.supporters_container .supporters_main_container .question_wrap.disabled {
  cursor: wait;
}

.supporters_container .supporters_main_container .question_wrap > textarea {
  outline: none;
  border: none;
  background-color: transparent;
  resize: none;
  padding: 0px 8px;
  color: var(--Text-Primary, #26282C);
  height: 22px;
  flex: 1 1 0;
  cursor: text;
}

.supporters_container .supporters_main_container .question_wrap.disabled > textarea {
/*   cursor: wait; */
}

.supporters_container .supporters_main_container .question_wrap .btn_wrap {
  align-self: flex-end;
}

.supporters_container .supporters_main_container .question_wrap .send_btn {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid var(--Gray-20, #E1E4E9);
  background: url(/ilos/images/supporters/send_btn.png) center / 20px no-repeat;
  cursor: pointer;
}

.supporters_container .supporters_main_container .question_wrap:not(.disabled) .send_btn {
  cursor: pointer;
}

.supporters_container .supporters_main_container .question_wrap:not(.disabled) .send_btn:hover {
  border: 1px solid var(--Gray-20, #E1E4E9);
  background-color: var(--Contrast-Alpha-05, rgba(28, 29, 32, 0.05));
}

.supporters_container .supporters_main_container .question_wrap.disabled .send_btn {
  background-image: url(/ilos/images/supporters/send_btn_disabled.png);
}

.supporters_container .supporters_main_container .caution {
  color: var(--Gray-50, #676D79);
  text-align: center;
  word-break: keep-all;
}

.supporters_container .supporters_main_container .view_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.supporters_container .supporters_main_container .view_center .reg_date {
  padding: 4px 8px;
  border-radius: var(--Corner-radius-max, 999px);
  border: 1px solid var(--Gray-20, #E1E4E9);
  background-color: var(--Gray-10, #F0F1F4);
  color: var(--Gray-50, #676D79);
  margin: 8px;
}

.supporters_container .supporters_main_container .view_center .question_box {
  max-width: 480px;
  padding: 12px 20px;
  align-self: flex-end;
  border-radius: 10px;
  background-color: var(--Gray-10, #F0F1F4);
  margin-bottom: 20px;
}

.supporters_container .supporters_main_container .view_center .question_box .question {
  word-break: break-all;
}

.supporters_container .supporters_main_container .view_center .answer_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  max-width: 100%;
}

.supporters_container .supporters_main_container .view_center .answer_box .answer {
  padding: 0 4px;
  color: var(--Text-Primary, #26282C);
  word-break: break-all;
  align-self: stretch;
  max-width: 100%;
  box-sizing: border-box;
}

.dots_bounce circle {
  transform-box: fill-box;
  transform-origin: center;
  fill: var(--Gray-20, #E1E4E9);
  animation: dot-bounce 2s infinite ease-in-out;
}

.dots_bounce circle:nth-child(1) { animation-delay: 0s; }
.dots_bounce circle:nth-child(2) { animation-delay: .5s; }
.dots_bounce circle:nth-child(3) { animation-delay: 1s; }

.mobile_supporters_background {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 0px;
  background-color: var(--Popup-back, rgba(48, 50, 54, 0.70));
  overscroll-behavior: contain;
  z-index: 5;
  display: none;
}

@keyframes dot-bounce {
  0%, 50%, 100% {
    transform: translateY(0);
    fill: var(--Gray-20, #E1E4E9);
  }
  
  25% {
    transform: translateY(-8px);
    fill: var(--Gray-80, #303236);
  }
}

@media screen and (max-width: 1180px){
  .ui-dialog-form .ui-dialog.supporters_pop {
    --dialog-margin: 0px;
  }
  
  .ui-dialog-form .ui-dialog.supporters_pop .ui-dialog-content {
    min-height: 100vh !important;
  }

  .supporters_container .right_section .supporters_header {
    padding: 12px 12px 0px 12px;
  }
  
  .supporters_container .supporters_header .icon_btn {
    --icon-btn-size: 34px;
    --icon-btn-background-size: 20px;
  }
  
  .supporters_container .supporters_main_container {
    padding: 0px 12px;
  }
  
  .supporters_container .supporters_main_container .supporters_title_logo {
    width: 123px;
    height: 100px;
  }
  
  .supporters_container .supporters_main_container .main_wrap, .supporters_container .supporters_main_container .view_wrap {
    gap: 20px;
  }
  
  .supporters_container .supporters_main_container .question_wrap {
    padding: 10px 12px;
    gap: 4px;
  }
  
  .supporters_container .supporters_main_container .question_wrap > textarea {
    padding: 0px;
  }
  
  .supporters_container .supporters_main_container .question_wrap .send_btn {
    width: 34px;
    height: 34px;
    background-size: 16px;
  }
  
  .supporters_container .supporters_header .close_btn {
    --close-btn-size: 34px;
    --close-background-size: 20px;
  }
  
  .supporters_container .supporters_main_container .caution_wrap {
    margin: 0 12px;
  }

  .supporters_container .left_section {
    position: absolute;
    height: 100%;
    background-color: var(--Gray-0, #FFF);
    width: 300px;
    z-index: 10;
  }
  
  .supporters_container .left_section .supporters_header {
    padding: 12px 12px 0px 12px;
  }
  
  .mobile_supporters_background {
    width: 100%;
    height: 100%;
    display: block;
  }     
}