.progress-spinner {
  position: fixed;
  z-index: 99999;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-spinner:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-dim);
}

.cus-btn {
  border-radius: var(--radius-pill) !important;
}

.cus-btn-primary {
  background-color: var(--color-btn-primary) !important;
}

.cus-btn-success {
  background-color: var(--color-btn-success) !important;
}

.cus-btn-error {
  background-color: var(--color-btn-error) !important;
}

.cus-btn-info {
  background-color: var(--color-btn-info) !important;
}

.cus-btn-secondary {
  background-color: var(--color-btn-secondary) !important;
}

.cus-btn-warning {
  background-color: var(--color-btn-warning) !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-white);
}

::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-scroll-thumb);
}

.div-search,
.div-content {
  background-color: var(--color-white);
  padding: 10px;
}

.div-content {
  margin-top: 10px;
}

.font-weight-600 {
  font-weight: 600;
}

.map-container {
  width: 100%;
  height: 550px;
}

.swal2-container {
  z-index: 9999 !important;
}

.cus-cursor {
  cursor: pointer;
}

a.nav-link:before {
  display: none;
}

.fontSize-16 {
  font-size: 16px;
}

.ql-container.ql-container {
  font-size: 16px;
  color: var(--color-gray-800);
}

.form-check-label-radio {
  margin-bottom: 8px;
}

.strong-required {
  color: red;
}

.error-required {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #f06548;
}

.display-none {
  display: none;
}


.MuiSelect-select,
.MuiInputBase-input {
  padding: 9.5px !important;
}

.MuiInputBase-root {
  font-size: inherit !important;
}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.p-tabview .p-tabview-nav .p-tabview-ink-bar {
  background-color: var(--primary-color);
}
.form-control {
  font-size: var(--vz-body-font-size);
  padding: 0.5rem 0.9rem !important;
}

.p-inputtext,
.p-button {
  font-size: var(--vz-body-font-size);
}

.p-inputtext:enabled:hover {
  border: double 1px transparent;
  background-image: linear-gradient(var(--color-white), var(--color-white)), linear-gradient(90deg, var(--color-primary-700) 0%, var(--color-primary-700) 10%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  outline: 0;
}

.p-inputtext:enabled:focus,
.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
  border: double 1px transparent;
  background-image: linear-gradient(var(--color-white), var(--color-white)), linear-gradient(90deg, var(--color-primary-700) 0%, var(--color-primary-700) 10%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  outline: 0;
  box-shadow: 0 0 0.5rem rgba(123, 198, 171, 0.3), 0 0 0.5rem rgba(100, 160, 211, 0.3);
}
.p-datepicker table td > span:focus,
.p-link:focus,
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus,
.p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
.p-datepicker .p-datepicker-header .p-datepicker-next:focus, .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus{
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none !important;
  /* box-shadow: 0 0 0 0.2rem var(--color-primary-100) !important; */
}
.p-datepicker
  .p-datepicker-header
  .p-datepicker-title
  .p-datepicker-year:enabled:hover,
.p-datepicker
  .p-datepicker-header
  .p-datepicker-title
  .p-datepicker-month:enabled:hover {
  color: var(--primary-color) !important;
}
.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
  color: var(--primary-color) !important;
}
.p-treetable .p-treetable-tbody > tr:focus {
  outline: 0.15rem solid var(--color-primary-100) !important;
  outline-offset: -0.15rem;
}
.p-component {
  font-size: var(--vz-body-font-size) !important;
}
/* .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
    background-color: transparent;
    color: var(--color-white);
    border-color: transparent;
} */
.p-button.p-button-secondary:enabled:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-100), 0 1px 2px 0 var(--color-black);
}

/* .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
  background: var(--color-primary-100) !important;
  border-color: var(--color-primary-100) !important;
  color: var(--primary-color) !important;
} */

.p-button .p-badge {
  margin-left: 0.5rem;
  min-width: 1rem;
  height: 1rem;
  line-height: 1rem;
  color: var(--primary-color);
  background-color: var(--color-white);
}
.p-button.p-button-outlined:enabled:hover,
.p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
  background: rgba(99, 102, 241, 0.04);
  color: var(--primary-color);
  border: 1px solid;
}
.p-button.p-button-outlined {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid;
}
.p-button.p-button-icon-only {
  width: unset;
  height: unset !important;
  padding: 0.5rem 0.7rem;
}
.pi {
  font-size: 0.85rem;
  line-height: unset;
}
.p-inputtext {
  padding: 0.5rem 0.85rem;
  border-radius: 0;
}
.p-button.p-button-secondary.p-button-text:enabled:hover,
.p-button.p-button-secondary.p-button-text:not(button):not(a):not(
    .p-disabled
  ):hover,
.p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover,
.p-buttonset.p-button-secondary
  > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover,
.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover,
.p-splitbutton.p-button-secondary
  > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover,
.p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover,
.p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(
    .p-disabled
  ):hover {
  background: rgba(100, 116, 139, 0.04);
  border-color: transparent;
  color: var(--forth-color);
}
.p-datepicker table td > span.p-highlight,
.p-treetable .p-treetable-tbody > tr.p-highlight,
.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight,
.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
  color: var(--primary-color) !important;
  background: var(--color-primary-100) !important;
}
.p-datepicker table td.p-datepicker-today > span {
  background: var(--color-primary-100) !important;
  color: #495057;
  border-color: transparent;
}
.p-button {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0.5rem 0.85rem;
  color: var(--color-white);
}
.p-button:active,
.p-button:enabled:hover {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.p-button:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-100), 0 1px 2px 0 var(--color-black);
}

.p-button-small {
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem !important;
  font-weight: 500;
}

.p-button-large {
  padding: 0.6rem 0.9rem;
  font-size: 1rem !important;
  font-weight: 500;
}

.p-dropdown:not(.p-disabled).p-focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem var(--color-primary-100);
  border-color: var(--primary-color) !important;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  color: var(--primary-color) !important;
  background: var(--color-primary-100);
}

.p-dropdown:not(.p-disabled):hover {
  border-color: var(--primary-color) !important;
}

.profile-info .profile-name {
  font-size: 50px;
  line-height: 1;
  margin: 0;
  color: #3f3a64;
}

.profile-info .short-descrip {
  border-bottom: 2px solid #20ad96;
}

.profile-info .author-bio {
  margin-top: 15px;
  margin-bottom: 0;
}

.author-bio {
  text-align: justify;
}

.color-community {
  color: #3f3a64;
}

.MuiOutlinedInput-notchedOutline {
  border-color: #ced4da !important;
}

.text-align-end {
  text-align: end;
}

.comment-img-width {
  width: 32px;
}

.comment-content-width {
  width: calc(100% - 32px);
}

.spinner-cus {
  color: var(--color-white);
  width: 0.75rem;
  height: 0.75rem;
}

.icon {
  font-size: 24px;
  color: #797b7c;
}

.area-btn-search {
  display: flex;
  align-items: end;
  justify-content: end;
}

.class-sidebar-left {
  left: 70px !important;
}

.class-sidebar-width {
  width: 70px;
}

.class-sidebar-m-left {
  margin-left: 70px;
}

@media (min-width: 768px) {
  #page-topbar {
    left: 70px;
  }
}

@media (min-width: 1200px) {
  #page-topbar {
    left: 250px;
  }
}

.form-control.search_menu{
  background-color: var(--color-white-alpha-36);
  border: none;
  color: var(--color-white);
}


.form-control.search_menu::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-white);
  font-weight: 500;
}

.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem var(--color-primary-100);
}

.accordion-button:not(.collapsed){
  background: none;
}

.accordion-item{
  border: none;
}

/* .accordion-button:not(.collapsed){
  box-shadow: none;
} */

.accordion-button.collapsed:focus{
  box-shadow: none;
}

/* .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
  border-color: #deecde;
  background: #e5ebe5;
  color: #343a40;
} */

.title-head-body{
  padding: 20px;
}
.button-head-body{
  margin: auto 10px;
}

#lst-project.p-treetable .p-treetable-tbody > tr > td{
  border: none;
}
#lst-project thead{
  display: none;
}

#lst-project.p-treetable .p-treetable-tbody > tr:focus {
  outline: none !important;
}
#lst-project.p-treetable .p-treetable-tbody > tr .item-project{
  margin-left: 4rem;
  box-shadow: 0 3px 3px rgba(56, 65, 74, 0.1);
  position: relative;
}
/* 
#lst-project.p-treetable .p-treetable-tbody > tr .item-project::before{
  width: 2px;
  height: 100%;
  background-color: #cacaca;
  position: absolute;
  left: -10px;
  content: "";
} */

.p-panel .p-panel-header .p-panel-title{
  font-size: 1.3rem;
}

.title-head-body.project-list{
  text-align: center;
  font-size: 1.3rem;
  text-transform: uppercase;

}
.ql-syntax {
  padding: 10px !important;
  background: var(--color-gray-800);
  color: var(--color-white);
  border-radius: 6px;
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{
  background: var(--primary-color);
}

.p-inputswitch.p-focus .p-inputswitch-slider{
  outline: none;
  box-shadow: none;
}

.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider{
  background: var(--primary-darker-color);
}

.p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{
  margin-bottom: 0.5rem;
}

.width-dialog {
  width: 80vw;
}

@media only screen and (min-width: 992px) {
  .width-dialog {
    width: 50vw;
  }
}

.p-splitbutton.rounded-btn>.p-splitbutton-defaultbutton.p-button{
  border-top-left-radius: 50rem;
  border-bottom-left-radius: 50rem;

}

.p-splitbutton.rounded-btn>.p-splitbutton-menubutton.p-button{
  border-top-right-radius: 50rem;
  border-bottom-right-radius: 50rem;
  border-left: 1px solid var(--color-white-alpha-21);
}

.p-splitbutton.rounded-btn>.p-splitbutton-defaultbutton.p-button:focus, .p-splitbutton.rounded-btn>.p-splitbutton-menubutton.p-button:focus{
  box-shadow: none;
}

.menu-active {
  font-weight: 900 !important;
}

.srh-filter2 > ul > li > .calendar-picker em{
  margin: 0 0.25rem;
}

.highcharts-data-label > span{
  width: auto !important;
}

.org-chart .highcharts-data-label > span {
  width: 100% !important; /* org-chart 클래스가 있는 경우에만 적용 */
}

.justify-content-between{
  justify-content: space-between;
}
.align-items-center{
  align-items: center;
}
.anl-017-icon1{
  position: absolute;
  top: 125px;
  left: 165px;
}
.tabUl {
  display: flex;           
  list-style: none;         
  padding: 0;
  margin: 0;
  width: 100%;               
}

/* variables는 variables.css로 분리됨 */