/* Slim app-specific styles extracted from styles.css (orphan classes NobleUI
   does not provide). Replaces the 468KB styles.css so NobleUI's own component
   styles are no longer buried. Auto-generated by extract_orphans.py. */
:root{
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 1024px;
  --bs-breakpoint-xl: 1280px;
  --bs-breakpoint-xxl: 1480px;
  --bs-breakpoint-xxxl: 1680px;
}
@media (min-width: 1680px){
.col-xxxl-3{
    flex: 0 0 auto;
    width: 25%;
  }
}
@keyframes progress-bar-stripes{
  0% {
    background-position-x: 1rem;
  }
}
@keyframes spinner-border{
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
@keyframes spinner-grow{
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
@keyframes placeholder-glow{
  50% {
    opacity: 0.2;
  }
}
@keyframes placeholder-wave{
  100% {
    mask-position: -200% 0%;
  }
}
.mt-10{
  margin-top: 40px !important;
}
.mb-8{
  margin-bottom: 32px !important;
}
.p-12{
  padding: 48px !important;
}
.px-10{
  padding-right: 40px !important;
  padding-left: 40px !important;
}
.py-10{
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.py-16{
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.pt-9{
  padding-top: 36px !important;
}
.pt-13{
  padding-top: 52px !important;
}
.pe-9{
  padding-right: 36px !important;
}
.ps-13{
  padding-left: 52px !important;
}
.gap-8{
  gap: 32px !important;
}
.rounded-circle, .circle:before, .circle, .app-aside .app-nav li .app-nav-sub ul li a:before, .text-editor ul li::before{
  border-radius: 50% !important;
}
.rounded-top-0, .card-table-0 .dt-container .dt-layout-table{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
@media (min-width: 576px){
.gap-sm-8{
    gap: 32px !important;
  }
}
@media (min-width: 768px){
.px-md-10{
    padding-right: 40px !important;
    padding-left: 40px !important;
  }
.px-md-20{
    padding-right: 80px !important;
    padding-left: 80px !important;
  }
.pb-md-8{
    padding-bottom: 32px !important;
  }
}
@media (min-width: 1024px){
.mb-lg-8{
    margin-bottom: 32px !important;
  }
.px-lg-8{
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
}
@media (min-width: 1280px){
.p-xl-9{
    padding: 36px !important;
  }
.pt-xl-9{
    padding-top: 36px !important;
  }
.gap-xl-8{
    gap: 32px !important;
  }
}
@media (min-width: 1480px){
.mb-xxl-8{
    margin-bottom: 32px !important;
  }
.pe-xxl-8{
    padding-right: 32px !important;
  }
.pb-xxl-12{
    padding-bottom: 48px !important;
  }
.gap-xxl-11{
    gap: 44px !important;
  }
}
@media (min-width: 1680px){
.mb-xxxl-8{
    margin-bottom: 32px !important;
  }
.p-xxxl-8{
    padding: 32px !important;
  }
.p-xxxl-12{
    padding: 48px !important;
  }
.px-xxxl-8{
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
.pt-xxxl-8{
    padding-top: 32px !important;
  }
.pt-xxxl-12{
    padding-top: 48px !important;
  }
}
.picture > img, .picture > iframe{
  position: absolute;
  top: 0px;
  left: 0px;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
a,
.a,
a:focus,
.a:focus,
a:hover,
.a:hover{
  text-decoration: none;
}
a,
.a{
  color: var(--bs-primary);
  display: inline-block;
  cursor: pointer;
}
a:hover,
.a:hover,
.active a:not(.btn),
.active .a:not(.btn){
  color: var(--bs-primary);
}
:last-child:not(img):not(.icon):not(.bar):not(.card-table),
:only-child:not(img):not(.icon):not(.bar):not(.card-table){
  margin-bottom: 0px !important;
}
.announcement-grid .col-12.active{
  animation-name: GridAnimation;
  animation-duration: 1s;
}
@keyframes GridAnimation{
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* Common Css
======================================================*/
.transition, .select2-dropdown .select2-results .select2-results__option, .select2-dropdown .select2-search__field, .select2 .select2-selection .select2-selection__arrow, .select2 .select2-selection, .mCustomScrollbar .mCSB_scrollTools, input,
textarea,
button,
select,
option, .app-aside, img, svg, a,
.a, .announcement-grid .col-12,
::before,
::after,
.icon,
svg *,
header,
main,
aside,
footer{
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}
.rounded-xxl{
  -webkit-border-radius: var(--bs-radius-xl);
  -moz-border-radius: var(--bs-radius-xl);
  border-radius: var(--bs-radius-xl);
}
.rounded-lg, .swal2-container .swal2-modal, .drag-area, .dt-container .dt-layout-table, .card-table-0 .dt-container .dt-layout-table{
  -webkit-border-radius: var(--bs-radius-lg);
  -moz-border-radius: var(--bs-radius-lg);
  border-radius: var(--bs-radius-lg);
}
.rounded-md, .select2-dropdown .select2-results .select2-results__option, .cke_chrome, .drag-area .icon-block, .daterangepicker .calendar-time .hourselect,
.daterangepicker .calendar-time .minuteselect{
  -webkit-border-radius: var(--bs-radius-md);
  -moz-border-radius: var(--bs-radius-md);
  border-radius: var(--bs-radius-md);
}
.rounded-sm, .bootstrap-tagsinput .tag{
  -webkit-border-radius: var(--bs-radius-sm);
  -moz-border-radius: var(--bs-radius-sm);
  border-radius: var(--bs-radius-sm);
}
.rounded-circle, .circle:before, .circle, .app-aside .app-nav li .app-nav-sub ul li a:before, .text-editor ul li::before{
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
/* Image
======================================================*/
.image-horizontal .picture{
  padding-top: 56%;
}
.image-vertical .picture{
  padding-top: 150.12%;
}
.image-square .picture{
  padding-top: 100%;
}
/* Link
======================================================*/
.link{
  position: relative;
}
.link::before{
  content: "";
  position: absolute;
  top: 90%;
  left: 0px;
  right: 0px;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  visibility: hidden;
}
.link:hover:before{
  top: 100%;
  opacity: 1;
  visibility: visible;
}
a:hover > .link:before{
  top: 100%;
  opacity: 1;
  visibility: visible;
}
/* Text Editor
======================================================*/
.text-editor h2, .text-editor .h2,
.text-editor h3,
.text-editor .h3,
.text-editor h4,
.text-editor .h4,
.text-editor h5,
.text-editor .h5,
.text-editor h6,
.text-editor .h6{
  margin-top: 30px;
  margin-bottom: 16px;
}
.text-editor p{
  margin-bottom: 16px;
}
.text-editor a:not(.btn){
  font-weight: bold;
  display: inline;
}
.text-editor figure,
.text-editor img{
  width: 100%;
  overflow: hidden;
  margin-top: 30px;
}
.text-editor strong{
  color: var(--bs-secondary);
  font-weight: var(--bs-font-regular);
}
.text-editor ul,
.text-editor ol{
  margin-top: 0px;
  margin-bottom: 30px;
}
.text-editor ul li,
.text-editor ol li{
  padding-left: 25px;
  position: relative;
}
.text-editor ul li::before{
  content: "";
  min-width: 6px;
  height: 6px;
  display: inline-block;
  background-color: var(--bs-body-color);
  position: absolute;
  left: 0px;
  top: 10px;
}
.text-editor ol{
  counter-reset: ol;
}
.text-editor ol li::before{
  counter-increment: ol;
  content: counter(ol) ".";
  position: absolute;
  left: 0px;
  top: 0px;
}
.text-editor :first-child{
  margin-top: 0px;
}
.text-editor :last-child{
  margin-bottom: 0px;
}
/* Card Form
======================================================*/
/* Table
======================================================*/
.card-table{
  margin-bottom: 88px;
}
@media only screen and (max-width: 1679px){
.card-table{
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px){
.card-table{
    margin-bottom: 100px;
  }
}
.table-responsive.table-select-show .dt-container .dt-layout-table{
  -webkit-border-top-left-radius: 0;
  -moz-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
  border-top-right-radius: 0;
}
.dt-container .dt-scroll-headInner .select2{
  min-width: 130px;
}
.card-announcement-detail .picture{
  border: 1px solid #e0e0e0;
}
.card-announcement{
  border-color: #eaecf0;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(234, 236, 240, 0.05);
  -moz-box-shadow: 0px 1px 2px 0px rgba(234, 236, 240, 0.05);
  box-shadow: 0px 1px 2px 0px rgba(234, 236, 240, 0.05);
}
.card-announcement:hover{
  border-color: var(--bs-primary);
}
.card-announcement .card-body p{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-announcement figure{
  border: 1px solid #e0e0e0;
}
.card-announcement .card-announcement-data{
  width: calc(100% - 150px);
}
.card-announcement .btn-action a{
  color: var(--bs-dark);
}
.icon-primary{
  background: #dcedfa;
  color: var(--bs-info);
}
/* Header
======================================================*/
.app-header{
  background-color: var(--bs-white);
  /* NobleUI navbar soft shadow */
  box-shadow: 3px 0 10px 0 rgba(183, 192, 206, 0.2);
}
[data-bs-header-fixed=true] .app-header{
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 4;
}
[data-bs-aside=true] .app-header{
  left: var(--bs-aside);
}
.app-header h4, .app-header .h4{
  color: #41516c;
}
.app-header hr{
  border-color: #f2f4f9;
}
.nav-toggle .bar{
  width: 20px;
  height: 2px;
  background-color: var(--bs-primary);
  display: block;
  margin: 6px auto;
}
.nav-toggle.open{
  -webkit-transition: all 0.3s ease-in-out 0.6s;
  -moz-transition: all 0.3s ease-in-out 0.6s;
  transition: all 0.3s ease-in-out 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav-toggle.open .bar:nth-child(1){
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  transform: translateY(8px);
}
.nav-toggle.open .bar:nth-child(2){
  width: 0px;
}
.nav-toggle.open .bar:nth-child(3){
  -webkit-transform: translateY(-8px) rotate(90deg);
  -moz-transform: translateY(-8px) rotate(90deg);
  transform: translateY(-8px) rotate(90deg);
}
.nav-toggle.open .bar:nth-child(1), .nav-toggle.open .bar:nth-child(3){
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
@keyframes shake{
  0% {
    transform: rotate(30deg);
  }
  12.5% {
    transform: rotate(-30deg);
  }
  25% {
    transform: rotate(25deg);
  }
  37.5% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(15deg);
  }
  62.5% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.avatar-block{
  border-bottom: 1px solid var(--bs-border-color);
}
.avatar-block .status-dot{
  position: absolute;
  bottom: 0;
  right: 0;
}
.avatar-block .status-dot span{
  width: 10px;
  height: 10px;
  display: block;
}
.avatar-block .status-dot span.online{
  background: #17B26A;
}
.avatar-block .status-dot span.offline{
  background: var(--bs-danger);
}
.avatar-block p{
  color: #344054;
}
.avatar-block p span{
  color: #475467;
}
/* Footer
======================================================*/
.app-footer{
  margin-top: auto;
  background-color: #f2f4f7;
  border-top: 1px solid #eaecf0;
}
.app-footer ul li a{
  color: #101828;
  font-weight: 500;
}
.app-footer ul li a:hover{
  color: var(--bs-primary);
}
.form-control.form-control-date{
  max-width: 230px;
}
.daterange-control{
  width: 480px;
  max-width: 100%;
}
.form-control-icon-start{
  position: relative;
}
.form-control-icon-start .form-control{
  padding-left: 48px;
}
.form-control-icon-start .icon{
  position: absolute;
  top: 12px;
  left: 14px;
  width: 20px;
  height: 20px;
  display: inline-block;
}
.invalid-feedback,
.error{
  display: inline-block;
  width: 100%;
  font-size: var(--bs-small-font-size);
  line-height: var(--bs-small-line-height);
  color: var(--bs-danger);
  font-weight: normal;
  margin-top: 4px;
}
.invalid-feedback.form-control,
.error.form-control{
  margin: 0;
}
.inline-form > li{
  display: flex;
  flex-wrap: nowrap;
  padding: 20px 0px;
  gap: 32px;
  border-bottom: 1px solid #eaecf0;
}
.inline-form > li:first-child{
  padding-top: 0;
}
.inline-form > li:last-child{
  padding-bottom: 0;
  border-bottom: 0;
}
.inline-form > li .form-label{
  width: 280px;
  max-width: 100%;
  flex: 0 0 auto;
  margin-bottom: 0px;
}
.inline-form > li .form-label small, .inline-form > li .form-label .small{
  color: #475467;
  font-weight: normal;
}
@media only screen and (max-width: 1023px){
.inline-form > li:not(.li-sm){
    flex-direction: column;
    gap: 0px;
    padding: 8px 0px;
    border-bottom: none;
  }
.inline-form > li:not(.li-sm) .form-label{
    width: 100%;
    margin-bottom: 6px;
  }
.inline-form > li.li-sm .form-label{
    width: 200px;
  }
}
@media only screen and (max-width: 575px){
.inline-form > li.li-sm{
    flex-direction: column;
    gap: 0px;
    padding: 8px 0px;
    border-bottom: none;
  }
.inline-form > li.li-sm .form-label{
    width: 100%;
    margin-bottom: 6px;
  }
}
.icon-date{
  background: rgba(0, 0, 0, 0) no-repeat url("../images/icon-calendar.svg") scroll center center;
  cursor: pointer;
  position: absolute;
}
.drag-area{
  border: 1px solid var(--bs-border-color);
  padding: 16px 14px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
.drag-area .icon-block{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eaecf0;
  margin-bottom: 12px;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  -moz-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.drag-area .text-block{
  color: var(--bs-body-color);
  text-align: center;
}
.drag-area .text-block small, .drag-area .text-block .small{
  margin-bottom: 4px;
}
.drag-area .text-block small span, .drag-area .text-block .small span{
  font-weight: 600;
  color: #064676;
}
.drag-area .text-block p{
  font-size: 12px;
  line-height: 18px;
}
/* Select 2
======================================================*/
.select2{
  width: 100% !important;
  display: inline-block;
}
.select2 .select2-selection{
  position: relative;
  display: block;
  width: 100%;
  padding: 9px 48px 9px 14px;
  font-family: var(--bs-font);
  font-size: var(--bs-body-fs);
  font-weight: var(--bs-body-fw);
  line-height: 24px;
  color: var(--bs-dark);
  background-color: var(--bs-white);
  border: 1px solid var(--bs-border-color);
  -webkit-border-radius: var(--bs-radius-md);
  -moz-border-radius: var(--bs-radius-md);
  border-radius: var(--bs-radius-md);
}
.select2 .select2-selection .select2-selection__clear{
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}
.select2 .select2-selection.select2-selection--multiple{
  display: flex;
  justify-content: start;
  gap: 6px;
}
.select2 .select2-selection.select2-selection--multiple:before{
  content: attr(data-placeholder);
  opacity: 0.5;
}
.select2 .select2-selection.select2-selection--multiple:after{
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0) url("../images/icon-select.svg") no-repeat scroll center center;
  top: 12px;
  right: 14px;
}
.select2 .select2-selection.select2-selection--multiple .select2-selection__rendered{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 1px 0px;
}
.select2 .select2-selection.select2-selection--multiple .select2-selection__rendered li{
  border: 1px solid var(--bs-border-color);
  font-size: var(--bs-small-font-size);
  line-height: var(--bs-small-line-height);
  padding: 2px 24px 2px 9px;
  -webkit-border-radius: var(--bs-radius-sm);
  -moz-border-radius: var(--bs-radius-sm);
  border-radius: var(--bs-radius-sm);
}
.select2 .select2-selection.select2-selection--multiple .select2-selection__rendered li .select2-selection__choice__remove{
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-color: transparent;
  font-size: 0;
  background: transparent url("../images/icon-close.svg") no-repeat scroll center center;
  position: absolute;
  top: 4px;
  right: 4px;
}
.select2 .select2-selection.select2-selection--multiple .select2-search.select2-search--inline{
  display: inline-block;
  position: relative;
  padding: 0px;
  width: auto;
  overflow: hidden;
}
.select2 .select2-selection.select2-selection--multiple .select2-search.select2-search--inline textarea{
  padding: 0;
  border: none;
  height: 24px;
  resize: none;
  background: transparent !important;
  min-height: initial;
  color: var(--bs-dark);
}
.select2 .select2-selection .select2-selection__rendered{
  color: var(--bs-dark);
  font-size: var(--bs-body-fs);
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-height: 156px;
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
}
.select2 .select2-selection .select2-selection__rendered .select2-selection__placeholder{
  text-transform: capitalize;
  opacity: 0.3;
}
.select2 .select2-selection .select2-selection__arrow{
  position: absolute;
  width: 20px;
  height: 20px;
  background: transparent url("../images/icon-select.svg") no-repeat scroll center center;
  top: 12px;
  right: 14px;
}
.select2.select2-container--open .select2-selection.select2-selection--multiple::after{
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.select2.select2-container--open .select2-selection__arrow{
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.select2.select2-container--open.select2-container--below .select2-selection{
  -webkit-border-radius: var(--bs-radius-md) var(--bs-radius-md) 0 0;
  -moz-border-radius: var(--bs-radius-md) var(--bs-radius-md) 0 0;
  border-radius: var(--bs-radius-md) var(--bs-radius-md) 0 0;
}
.select2.select2-container--open.select2-container--above .select2-selection{
  -webkit-border-radius: 0 0px var(--bs-radius-md) var(--bs-radius-md);
  -moz-border-radius: 0 0px var(--bs-radius-md) var(--bs-radius-md);
  border-radius: 0 0px var(--bs-radius-md) var(--bs-radius-md);
}
.section-auth .auth-container{
  max-width: 360px;
}
.section-auth .auth-container.auth-container-register{
  max-width: 560px;
}
@media only screen and (max-width: 1479px){
.section-auth .auth-container.auth-container-register{
    max-width: 420px;
  }
}
.section-auth figure img{
  object-fit: contain;
  object-position: bottom right;
}
@media only screen and (max-width: 1023px){
.section-auth figure{
    padding-top: 100%;
  }
}
@media only screen and (max-width: 1023px){
.section-auth > figure{
    display: none;
  }
}
@media only screen and (max-width: 1023px){
.section-auth > div{
    margin-top: auto;
    margin-bottom: auto;
    padding: 30px 0;
  }
}
.block-dashboard{
  background: #EEF4FF;
  border: 1px solid #E0EAFF;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  -moz-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.block-dashboard .block-right{
  max-width: 210px;
  width: 100%;
}
.block-dashboard .block-right .picture{
  padding-top: 86.7%;
}
.block-dashboard .block-right .picture img{
  object-fit: contain;
}
@media only screen and (max-width: 1479px){
.block-dashboard .block-right{
    max-width: 150px;
  }
.block-dashboard .block-right .picture{
    padding-top: 67%;
  }
}
@media only screen and (max-width: 767px){
.block-dashboard .block-left ul li{
    width: 50%;
    text-align: center;
  }
}
@media only screen and (max-width: 575px){
.block-dashboard .block-left ul{
    flex-wrap: wrap;
  }
.block-dashboard .block-left ul li{
    width: 100%;
  }
}
.block-chart{
  width: 16.66vw;
  height: 16.66vw;
}
.block-chart .chart-view{
  width: 100% !important;
  height: 100% !important;
}
@media only screen and (max-width: 1279px){
.block-chart{
    width: 21vw;
    height: 21vw;
  }
}
@media only screen and (max-width: 1023px){
.block-chart{
    width: 250px;
    height: 250px;
  }
}
.chart-info p{
  color: #1F2937;
}
.block-status ul{
  display: flex;
  flex-wrap: wrap;
  column-gap: 48px;
  row-gap: 24px;
}
.block-status ul li{
  width: calc(50% - 24px);
}
.block-status ul li .progress-bar{
  background: #1175BC;
}
@media only screen and (max-width: 767px){
.block-status ul li{
    width: 100%;
  }
}
.page_404{
  padding: 40px 0;
  background: #fff;
  display: flex;
  align-items: center;
  min-height: 100vh;
}
.page_404 .section-im{
  width: 100%;
}
.page_404 .section-im svg{
  max-height: 40vh;
}
.page_404 .contant_box_404{
  margin-top: 0;
}
.cls-1{
  fill: #ffc541;
}
.cls-2{
  fill: #063a62;
}
.cls-3{
  fill: #075794;
}
.cls-4{
  fill: #075794;
}
.cls-5{
  fill: #fff7eb;
}
.cls-6,
.cls-7,
.cls-8{
  fill: #f4b233;
}
.cls-10,
.cls-6{
  opacity: 0.6;
}
.cls-7{
  opacity: 0.4;
}
.cls-9{
  fill: #f4b73b;
}
.cls-11{
  fill: #f9c358;
}
.cls-12{
  fill: #063a62;
}
.cls-13{
  fill: #063a62;
}
.cls-14{
  fill: #075794;
}
/* animations */
.wheel{
  animation: wheel-rotate 6s ease infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes wheel-rotate{
  50% {
    transform: rotate(360deg);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }
  100% {
    transform: rotate(960deg);
  }
}
.clock-hand-1{
  animation: clock-rotate 3s linear infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}
.clock-hand-2{
  animation: clock-rotate 6s linear infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}
@keyframes clock-rotate{
  100% {
    transform: rotate(360deg);
  }
}
@keyframes box-top-anim{
  50% {
    transform: rotate(-5deg);
  }
}
@keyframes umbrella-anim{
  25% {
    transform: translateY(10px) rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}
@keyframes cup-rotate{
  50% {
    transform: rotate(-5deg);
  }
}
@keyframes pillow-anim{
  25% {
    transform: rotate(10deg) translateY(5px);
  }
  75% {
    transform: rotate(-10deg);
  }
}
@keyframes stripe-anim{
  25% {
    transform: translate(10px, 0) rotate(-10deg);
  }
  75% {
    transform: translateX(10px);
  }
}
@keyframes bike-anim{
  0% {
    transform: translateX(-1300px);
  }
  50% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  100% {
    transform: translateX(1300px);
  }
}
@keyframes ruck-anim{
  50% {
    transform: rotate(5deg);
  }
}
.circle.c1{
  animation-duration: 2s;
}
.circle.c2{
  animation-duration: 3s;
}
.circle.c3{
  animation-duration: 1s;
}
.circle.c4{
  animation-duration: 1s;
}
.circle.c5{
  animation-duration: 2s;
}
.circle.c6{
  animation-duration: 3s;
}
@keyframes circle-anim{
  50% {
    transform: scale(0.2) rotateX(360deg) rotateY(360deg);
  }
}
.four,
#ou{
  animation: four-anim cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
}
.four.a{
  transform-origin: bottom left;
  animation-duration: 3s;
  transform-box: fill-box;
}
.four.b{
  transform-origin: bottom right;
  animation-duration: 3s;
  transform-box: fill-box;
}
@keyframes four-anim{
  50% {
    transform: scale(0.98);
  }
}
.image-avatar{
  -webkit-box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  -moz-box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}
.image-avatar .icon{
  bottom: 8px;
}
@media only screen and (max-width: 1023px){
.image-avatar .picture{
    margin: 0 auto;
  }
}

/* === Icon wrappers ==========================================================
   The app puts `class="icon p-*"` on ~100 controls (Add-Group button, table
   action/filter buttons, input icons). styles.css made `.icon` a box whose svg is
   centered; NobleUI redefines `.icon` and its p-* padding is 3rem, which ballooned
   every one of them. Flex-center the svg/img at its natural size and ignore the
   padding. Fully .icon-scoped — does not touch any NobleUI component.
   ========================================================================== */
.icon:not(.icon-input) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 0;
  vertical-align: middle;
}
.icon > svg, .icon > img {
  position: static !important;
  margin: 0;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
}
.btn .icon > svg { width: 1.1em; height: 1.1em; }
.table .icon > svg, td .icon > svg, th .icon > svg { width: 20px; height: 20px; }

/* Password/date field toggle icons (background-image, positioned inside the input) */
.icon-input { display: inline-block; width: 20px; height: 20px; }
.form-control-icon-start .icon { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); width: 20px; height: 20px; }
.form-control-icon-end .icon { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 20px; height: 20px; }
.icon-eye { background: transparent no-repeat url("../images/icon-eye-off.svg") scroll center center; cursor: pointer; position: absolute; }
.icon-eye.active { background-image: url("../images/icon-eye-on.svg"); }
.icon-date { background: transparent no-repeat url("../images/icon-calendar.svg") scroll center center; cursor: pointer; position: absolute; }
.image-avatar .icon { bottom: 8px; }

/* === Sidebar brand ==========================================================
   Show the full "K12Smart Phish" logo when expanded, the Phish badge only when the
   sidebar is folded. NobleUI has no .sidebar-brand-mini rule (styles.css hid it). */
.sidebar .sidebar-header .sidebar-brand-mini { display: none; }
.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-header .sidebar-brand-mini { display: inline-flex; }
.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-header .sidebar-brand-mini img { width: 32px; height: 32px; }


/* === Dashboard welcome block ================================================
   The custom .block-dashboard-phish block used a fragile .picture (relative box +
   absolute object-fit:cover img sized by custom pt-13/ps-13 padding + a class typo:
   styles.css only sized .block-dashboard, not .block-dashboard-phish). Post-sweep the
   base rules were missing and images ballooned. Render its avatar + illustration at
   natural size instead. Scoped to this block only. */
.block-dashboard-phish .picture { position: static; padding: 0 !important; width: auto; height: auto; }
.block-dashboard-phish .picture > img { position: static !important; width: auto; height: auto; max-width: 100%; }
.block-dashboard-phish .block-left .picture { width: 56px; height: 56px; }
.block-dashboard-phish .block-left .picture > img { width: 100%; height: 100%; object-fit: cover; }
.block-dashboard-phish .block-right { max-width: 220px; }
.block-dashboard-phish .block-right .picture > img { width: 100%; }
.block-dashboard-phish ul { list-style: none; padding-left: 0; margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Data tables — compact density to match the Chat product.
 * NobleUI sets .table cells to .85rem, which renders chunky rows on the
 * list views (now marked up as `table align-middle table-hover`, matching
 * Chat). Tighten only DataTables ( table.dataTable ) so plain Bootstrap
 * tables are untouched.
 * Loaded after nobleui.css + datatables.net-bs5, so it wins on the cells.
 * ------------------------------------------------------------------ */
table.dataTable.table > :not(caption) > * > * { padding: .5rem .6rem; }

/* Select2 hides the original <select> by adding .select2-hidden-accessible, but the bundled
 * Select2 CSS omits that rule — so the native multi-select rendered ON TOP of the Select2
 * widget. Restore the canonical visually-hidden (a11y) rule so only the Select2 widget shows. */
.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}
/* nobleui themes Select2's colors but never loads Select2's own base stylesheet, so the
 * dropdown had no structure — it rendered position:static (in-flow, overlapping the fields
 * below) with list bullets. Restore the minimal structural rules; nobleui still supplies the
 * colors/borders. Fixes every Select2 in the app (campaign + audience forms). */
.select2-container { position: relative; box-sizing: border-box; display: inline-block; vertical-align: middle; }
.select2-dropdown { position: absolute; left: -100000px; box-sizing: border-box; display: block; width: 100%; z-index: 1060; }
.select2-container--open .select2-dropdown { left: 0; }
.select2-results { display: block; }
.select2-results__options { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.select2-results__option { padding: 6px 12px; user-select: none; }
.select2-search--dropdown { display: block; padding: 6px; }
.select2-search--dropdown .select2-search__field { width: 100%; box-sizing: border-box; padding: .35rem .5rem; }
.select2-search--dropdown.select2-search--hide { display: none; }

/* ==========================================================================
 * WCAG 2.2 AA — visual accessibility pass (contrast, focus, target size,
 * skip link). Loads after nobleui.css so these overrides win. Paired with
 * the zero-visual ARIA pass; only touches keyboard-focus styling and a few
 * contrast tokens — no layout or brand-identity changes.
 * ========================================================================== */

/* 2.4.7 / 2.4.13 Focus visible — a clear keyboard focus ring (only shows for
 * keyboard users via :focus-visible, never on mouse click). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--bs-primary, #075794);
    outline-offset: 2px;
}

/* 2.4.1 Skip to main content — off-screen until focused, then slides in. */
.skip-to-content {
    position: absolute;
    left: 12px;
    top: -64px;
    z-index: 2000;
    padding: 8px 16px;
    background: var(--bs-primary, #075794);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    transition: top .15s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
    top: 12px;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* 1.4.3 Contrast — darken status-pill text to >=4.5:1 on their tinted fills
 * (was 1.7-3.1:1). Background fills are unchanged; only the text darkens. */
.badge.badge-success { color: #037033; }
.badge.text-success { color: #037033 !important; }
.badge.badge-danger { color: #b52448; }
.badge.text-danger  { color: #b52448 !important; }
.badge.badge-secondary { color: #566072; }
.badge.badge-info    { color: #356d6d; }

/* 1.4.3 Muted/secondary text used for metadata, subtitles, sidebar section
 * labels — nudged from #7987a1 (3.6:1) to >=4.5:1 on white. */
.text-secondary { color: #5f6b80 !important; }
.sidebar .nav-category { color: #5f6b80; }

/* 1.4.3 Warning buttons — dark text instead of white (1.7:1 -> ~10:1). */
.btn-warning { color: #1b1642; }
.btn-outline-secondary { color: #5f6b80; }

/* 2.5.8 Target size — password-reveal / input adornment icons to >=24px. */
.icon-input { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ *
 * Table cards sit flush with the page (no floating shadow/border).
 * Scoped via :has() to cards that wrap a data table, so dashboards,
 * forms, and stat tiles keep their elevated card look. Browsers without
 * :has() simply keep the previous (shadowed) appearance — no breakage.
 * ------------------------------------------------------------------ */
.card:has(.table-responsive) {
    box-shadow: none;
    border-color: transparent;
}

/* ------------------------------------------------------------------ *
 * Global table search — roomier & rounded with a search icon. The
 * DataTables Bootstrap-5 default renders a cramped form-control-sm
 * (~160px, width:auto) that looked squished. Give it a comfortable
 * fixed width, standard height/padding, and an inset magnifier.
 * ------------------------------------------------------------------ */
div.dt-container div.dt-search input.form-control {
    width: 260px;
    max-width: 100%;
    height: 40px;
    padding: .5rem .9rem .5rem 2.2rem;
    font-size: .875rem;
    border-radius: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237987a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: .7rem center;
    background-size: 16px;
}
div.dt-container div.dt-search label { margin: 0; }