/* -------------------------------------------------------------------------- */
/*                                  nav                                       */
/* -------------------------------------------------------------------------- */
.navbar-vertical .navbar-nav {
  font-size: 1rem;
}
.navbar-vertical .navbar-nav .nav-link-icon {
  font-size: 1rem;
}
.navbar-vertical .navbar-nav .nav {
  font-size: 0.875rem;
}
/*.navbar-vertical .navbar-nav .nav-item .nav-link:hover,
.navbar-vertical .navbar-nav .nav-item .nav-link:focus {
  background-color: var(--falcon-soft-danger);
}*/
.navbar-dropdown-menu {
    min-width: 5rem;
}
/* -------------------------------------------------------------------------- */
/*                                  autorefresh                                  */
/* -------------------------------------------------------------------------- */
#autorefresh_timer_text {
    width: 40px;
    height: 18px;
    line-height: 18px;
    margin-top: 2px;
}
/* -------------------------------------------------------------------------- */
/*                                     modal                                  */
/* -------------------------------------------------------------------------- */
/*fix Multiple modals overlay*/
.modal.fade {
  background: rgba(0, 0, 0, 0.35);
}
.modal-backdrop.fade {
  opacity: 0;
}

/*modal-fixed-right*/
.modal-fixed-right .modal-dialog {
    max-width: 25rem;
}
/* -------------------------------------------------------------------------- */
/*                                  timeline                                  */
/* -------------------------------------------------------------------------- */
.ticket-timeline {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: left;
}
.ticket-timeline .timestamp {
  font-size: 12px;
  margin-bottom: 26px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ticket-timeline .timestamp .date,
.ticket-timeline .timestamp .author{
    white-space: nowrap;
}
.ticket-timeline .status {
  padding: 26px 40px 0;
  display: flex;
  justify-content: center;
  border-top: 2px dotted var(--falcon-300);
  position: relative;
  white-space: nowrap;
}
.ticket-timeline .status:before {
  color: var(--falcon-primary);
  content: "";
  text-align: center;
  font-weight: bolder;
  width: 25px;
  height: 25px;
  background-color: var(--falcon-white);
  border-radius: 25px;
  border: 1px solid #82a4d3;
  box-shadow: 0px 0 0px 3px var(--falcon-300);
  position: absolute;
  top: -15px;
  left: 42%;
}
.ticket-timeline .complete .status {
  border-top: 2px solid var(--falcon-primary);
}
.ticket-timeline .complete .status:before {
  /*content: "✓";*/
  content: url('../img/icons/check-solid.svg');
  border: none;
  box-shadow: 0px 0 0px 3px var(--falcon-primary);
  padding: 2px;
}

.ticket-timeline-his-log img:not(.avatar .rounded-circle){
    cursor: pointer;
    max-width: 92%;
    /*height: auto;*/
}

/* -------------------------------------------------------------------------- */
/*                                    Border                                    */
/* -------------------------------------------------------------------------- */

.border-dotted{border:1px dotted var(--falcon-border-color) !important}
.border-dotted-top{border-top:1px dotted var(--falcon-border-color) !important}
.border-dotted-end{border-right:1px dotted var(--falcon-border-color) !important}
.border-dotted-start{border-left:1px dotted var(--falcon-border-color) !important}
.border-dotted-bottom{border-bottom:1px dotted var(--falcon-border-color) !important}

/* -------------------------------------------------------------------------- */
/*                                    Size                                    */
/* -------------------------------------------------------------------------- */
.min-h-auto{
  min-height: auto;
}
/* -------------------------------------------------------------------------- */
/*                                    Form                                     */
/* -------------------------------------------------------------------------- */
.breadcrumb-select {
    height:21px;
    line-height:1;
}

optgroup:not([option]) {
  color: var(--falcon-600);
  font-size: 0.8333333333rem !important;
}

optgroup option{
  color: var(--falcon-dark);
  font-size: 1rem;
}

.needs-validation .state-error+em {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .25rem;
    margin-top: .1rem;
    font-size: 0.8333333333rem;
    font-style: normal;
    color: #fff;
    background-color: rgba(230,55,87,.9);
    border-radius: .25rem;
}

/*
    Ticket: statistics counter 統計值
    [fix] Centring flexbox items using justify-content results in a quriky behaviour when the content overflows the container. Even after scrolling, some items may not be fully visible.
*/
#ticket_statistics_counter .form-check:first-child {
    margin-left: auto;
}
#ticket_statistics_counter .form-check:last-child {
    margin-right: auto;
}

/* -------------------------------------------------------------------------- */
/*                             loading animate                                */
/* -------------------------------------------------------------------------- */
@keyframes load {
    0%{
        opacity: 0.1;
        /* font-size: 10px; */
        /* font-weight: 400; */
        filter: blur(2px);
        letter-spacing: 3px;
        }
    100%{
        /* opacity: 1; */
        /* font-size: 12px; */
        /* font-weight:600; */
        /* filter: blur(0); */
        }
}

.animate {
  display: flex;
  justify-content: center;
  align-items: center;
  height:100%;
  margin: auto;
  /* width: 350px; */
  /* font-size:26px; */
  font-family: Helvetica, sans-serif, Arial;
  animation: load 0.8s infinite 0s ease-in-out;
  animation-direction: alternate;
  text-shadow: 0 0 1px white;
}

/* -------------------------------------------------------------------------- */
/*                                   Choices                                  */
/* -------------------------------------------------------------------------- */
.choices .choices__list--dropdown .choices__item--selectable {
  background-color: var(--falcon-choices-item-has-no-choices-bg);
  color: var(--falcon-input-color);
}

.choices .choices__list--single {
  color: var(--falcon-input-color);
}

.choices .choices__list--multiple .choices__item {
  background-color: var(--falcon-soft-primary);
  color: var(--falcon-primary);
}

/*for Floating labels */
.js-choice-floating >label {
    opacity: .65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.js-choice-floating .choices__inner {
    padding-top: 1.625rem;
}

/* -------------------------------------------------------------------------- */
/*                                   Cursor                                  */
/* -------------------------------------------------------------------------- */
.cursor-row-resize {
    cursor: row-resize;
}
.cursor-unset {
  cursor: unset !important;
}
/* -------------------------------------------------------------------------- */
/*                                   Image                                    */
/* -------------------------------------------------------------------------- */
#checkTicketModal_desc_html img,
#viewLatestTicketModal_desc img,
#viewTicketModal_desc img{
    cursor: pointer;
    max-width: 92%;
    /*height: auto;*/
}
/* -------------------------------------------------------------------------- */
/*                             easy datagrid                                  */
/* -------------------------------------------------------------------------- */
.highlight-datagrid-row {
    background-color: var(--falcon-soft-warning);
}

/* 修正在拉寬欄位時對不到的問題 */
.datagrid-header .datagrid-cell {
    height: 100% !important;
    padding-top: 12px;
}
/* -------------------------------------------------------------------------- */
/*                             div resize                                     */
/* -------------------------------------------------------------------------- */
.resize--outer {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.resize--block {
  width: 20%;
}

.resize--block-left {
  /*background-color: #FDC5B6;*/
  /* resize: vertical; resize vertical */
  overflow: auto; /* resize works for overflow other than visible */
}

.resize--block-right {
  /*background-color: #D8E0AF;*/
  flex: 1; /* adjust automatically */
  min-height: 0;
  overflow: auto; /* hide overflow on small width */
}

.resize--handle {
  position: relative;
  text-align: center;
  width: 5px;
  background-color: #dee2e6;
  cursor: col-resize;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #b5b5b5;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #b5b5b5;
  user-select: none; /* disable selection */
}
.resize--handle:hover {
  background-color: #dd4b39;
}
.resize--handle:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 100%;
  height: 18px;
  width: 2px;
  margin-top: -9px;
  border-left-color: #8d8d8d;
  border-left-width: 1px;
  border-left-style: solid;
}
.resize--handle:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 100%;
  height: 18px;
  width: 2px;
  margin-top: -9px;
  border-right-color: #8d8d8d;
  border-right-width: 1px;
  border-right-style: solid;
}

/* -------------------------------------------------------------------------- */
/*                           blockquote & table                               */
/* -------------------------------------------------------------------------- */
#checkTicketModal_desc_html blockquote,
#checkTicketModal_his_log blockquote,
#viewLatestTicketModal_desc blockquote,
#viewLatestTicketModal_his_log blockquote,
#viewTicketModal_desc blockquote{
    border-left: 2px solid #ccc;
    margin-left: 1.5rem;
    padding-left: 1rem;
}
#checkTicketModal_desc_html thead, #checkTicketModal_desc_html tbody, #checkTicketModal_desc_html tfoot, #checkTicketModal_desc_html tr, #checkTicketModal_desc_html td, #checkTicketModal_desc_html th,
#checkTicketModal_his_log thead, #checkTicketModal_his_log tbody, #checkTicketModal_his_log tfoot, #checkTicketModal_his_log tr, #checkTicketModal_his_log td, #checkTicketModal_his_log th,
#viewLatestTicketModal_desc thead, #viewLatestTicketModal_desc tbody, #viewLatestTicketModal_desc tfoot, #viewLatestTicketModal_desc tr, #viewLatestTicketModal_desc td, #viewLatestTicketModal_desc th,
#viewLatestTicketModal_his_log thead, #viewLatestTicketModal_his_log tbody, #viewLatestTicketModal_his_log tfoot, #viewLatestTicketModal_his_log tr, #viewLatestTicketModal_his_log td, #viewLatestTicketModal_his_log th,
#viewTicketModal_desc thead, #viewTicketModal_desc tbody, #viewTicketModal_desc tfoot, #viewTicketModal_desc tr, #viewTicketModal_desc td, #viewTicketModal_desc th {
  border-width: 1px;
}

/* -------------------------------------------------------------------------- */
/*                             篩選條件                                    */
/* -------------------------------------------------------------------------- */
#flatpickr_deftime_options .btn:hover {
    color: var(--falcon-white);
    background-color: var(--falcon-primary);
}

/* -------------------------------------------------------------------------- */
/*                             自訂篩選條件                                    */
/* -------------------------------------------------------------------------- */
#page_condition_blk {
    height: 28px;
}
.subnav-paddle {
    height: 30px;
    width: 22px;
    top: -20px;
    position: relative;
    cursor: pointer;
}
.subnav-paddle-left {
    clip-path: inset(0px -20px 0px 0px);
    box-shadow: 8px 0px 14px -8px rgb(0 0 0);
    right: -5px;
}
.subnav-paddle-right {
    clip-path: inset(0px 0px 0px -20px);
    box-shadow: -8px 0px 14px -8px rgb(0 0 0);
    left: -5px;
}
#quick_condition_list_blk div:first-child {
    margin-left: .5rem;
}
#quick_condition_list_blk div:last-child {
    /*margin-right: .5rem;*/
}
/* -------------------------------------------------------------------------- */
/*                             resize                                         */
/* -------------------------------------------------------------------------- */
.w-1 {
    width: 1rem;
}

.h-1 {
    height: 1rem;
}

/* -------------------------------------------------------------------------- */
/*                   左右方向鍵 及 Modal 動畫                                  */
/* -------------------------------------------------------------------------- */
.DocView-Commands-Key {
    background: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);
    height: 18px;
    width: 20px;
}

.modal-transform{
    opacity: 1;
    transform: translate(0%) scale(1);
    transition: all 0.6s ease-out;
}
.left-transform {
    opacity: 0;
    transform: translate(-30px);
    overflow: hidden !important;
}
.right-transform {
    opacity: 0;
    transform: translate(30px);
    overflow: hidden !important;
}

/* -------------------------------------------------------------------------- */
/*     控制其物件寬度以利後續使用 text-truncate (使用刪節號截斷較長的字串)        */
/* -------------------------------------------------------------------------- */

.w-truncate-s {
    width: calc(100% - 24px);
}
.w-truncate-m {
    width: calc(100% - 28px);
}
.w-truncate-l {
    width: calc(100% - 34px);
}
.w-truncate-xl {
    width: calc(100% - 38px);
}

/* -------------------------------------------------------------------------- */
/*                             extend align                                   */
/* -------------------------------------------------------------------------- */
.align-sub {
    vertical-align: sub !important;
}

.align-super {
    vertical-align: super !important;
}

/* -------------------------------------------------------------------------- */
/*                             word-break                                     */
/*        可以針對 CJK (中日韓) 和 non-CJK 的文字採取不一樣的斷詞規則            */
/* -------------------------------------------------------------------------- */
.word-break-normal {
    word-break: normal;  /* 預設值，英文不會在單詞中間斷開，CJK 字元會在任意位置斷開 */
}
.word-break-all {
    word-break: break-all;  /* 英文和 CJK 會在任意位址斷開 */
}
.word-break-keep {
    word-break: keep-all;  /* 英文不會在字中間斷開，CJK 字元也不會在任意位置斷開 */
}
/* prettier-ignore */
/*# sourceMappingURL=user.css.map */