.card {
          margin-bottom: 1.875rem;
          transition: all .5s ease-in-out;
          position: relative;
          border: 0px solid transparent;
          border-radius: 2px;
          box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
        }
        
        .bg-primary {
          background-color: #0d6efd!important;
        }
        
        .widget-stat .media {
          padding: 0px 0;
          align-items: center;
        }
        
        .media { 
          display: flex;
          align-items: flex-start;
        }
        
        .text-white {
          color: #fff !important;
        }
        
        .text-right {
          text-align: right !important;
        }
        
        .media-body {
          flex: 1;
        }
        
        .widget-stat[class*="bg-"] .media>span {
          background-color: rgba(255, 255, 255, 0.25);
          color: #fff;
        }
        
        .ql-container {
          max-height: 80% !important;
        }
        
        /* dark mode */
        [data-bs-theme="dark"] .dt__table__thead {
          --bs-bg-opacity: 1;
          background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
        }
        
        [data-bs-theme="dark"] .dt__table td,
        [data-bs-theme="dark"] .dt__table th,
        [data-bs-theme="dark"] .dt__filter__search,
        [data-bs-theme="dark"] .dt__pagination__info p {
          color: #ffffffed !important;
        }
        
        [data-bs-theme="light"] .text-body {
          opacity: 0.5;
        }
        
        [data-bs-theme="dark"] input,
        [data-bs-theme="dark"] .vs__dropdown-toggle {
          background-color: #e5e5e5 !important;
        }
        
        [data-bs-theme="dark"] input {
          color: #2b2e3b !important;
        }
        
        
        [data-bs-theme="dark"] .dt__table_wrapper,
        [data-bs-theme="dark"] .dt__pagination_wrapper--bottom,
        [data-bs-theme="dark"] .dt__pagination__nav {
          border: solid 2px #4b4e63 !important;
        }
        
        [data-bs-theme="dark"] .dt__table tr,
        [data-bs-theme="dark"] .dt__pagination,
        [data-bs-theme="dark"] .dt__filter__search,
        [data-bs-theme="dark"] .dt__pagination_wrapper--bottom {
          background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
        }
        
        /* Popup Background */
        .datepicker-w-100 .vuejs3-datepicker__value {
          width: 100%;
        }
        
        /* Popup Background */
        .popup-background {
          position: fixed;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: #2b2e3b;
          overflow: hidden;
          z-index: 5000;
        }
        
        .popup-background img {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
        
        /* Data Table Vue3 */
        .dt__table_wrapper {
          border-radius: 10px 10px 0px 0px !important;
        }
        
        .dt__pagination_wrapper--bottom {
          border-radius: 0px 0px 10px 10px !important;
        }
        
        .dt__pagination>div {
          display: contents;
        }
        
        .dt__pagination p {
          text-align: left;
        }
        
        [data-bs-theme=light] .dt__table_wrapper {
          border: solid 1px #dbdee4;
          border-bottom: solid 0px #dbdee4;
        }
        
        [data-bs-theme=light] .dt__pagination_wrapper--bottom {
          border: solid 1px #dbdee4;
          border-top: solid 0px #dbdee4;
        }
        
        .dt-overflow-auto {
          min-height: 500px !important;
        }
        
        .dt__loading>div {
          height: 180px !important;
        }
        
        .dt__pagination_size {
          display: none !important;
        }
        
        .dt__pagination__info {
          width: 100%;
          text-align: end;
        }
        
        [dir=rtl] .dt__table__thead__tr th,
        .v-select ul li {
          text-align: right;
        }
        
        
        /* Data Table Vue3 */
        .vs__search {
          font-size: 20px !important;
        }
        
        .vuejs3-datepicker__value {
          padding: 8px 10px 8px 10px !important;
        }
        
        /* vuejs3-datepicker */
        .vuejs3-datepicker__value {
          width: 100%;
        }
        
        /* RTL Style */
        [dir=rtl] input {
          text-align: start;
        }
        
        .footer {
          position: fixed !important;
          background-color: var(--bs-header-bg);
        }