@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
   --app-font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --is-primary: #59287F;
   --is-accent: #A064CE;
   --is-dark: #0D0917;
   --is-surface: #171022;
   --is-elevated: #21152F;
   --is-muted: #A89ABF;
   --is-text: #F8F4FF;
   --is-border: rgba(160, 100, 206, 0.22);
   --is-gradient: linear-gradient(135deg, #59287F 0%, #A064CE 100%);
   --is-hero-gradient: linear-gradient(135deg, #0D0917 0%, #21152F 42%, #59287F 100%);
   --defaultColor: var(--is-accent);
   --primaryColor: var(--is-primary);
   --btnColor: var(--is-accent);
   --activeColor: var(--is-accent);
   --primary-color: var(--is-primary);
   --primary-color-rgb: 89, 40, 127;
   --primaryColorRGB: 89, 40, 127;
   --primary-color-soft: rgba(160, 100, 206, 0.12);
   --primary-color-mid: rgba(160, 100, 206, 0.5);
   --hero-bg-color: var(--is-hero-gradient);
}

html,
body,
button,
input,
select,
textarea {
   font-family: var(--app-font-family) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.box-title,
.card-title {
   font-family: var(--app-font-family) !important;
}

.theme-dark {
   --nav-color: rgba(13, 9, 23, 0.88);
   --body-color: var(--is-dark);
   --body-color-bg: var(--is-dark);
   --background-color: var(--is-surface);
   --primary-bg: var(--is-elevated);
   --color: var(--is-text);
   --card-color: var(--is-elevated);
   --card-background: var(--is-elevated);
   --soft-background: rgba(160, 100, 206, 0.12);
   --card-soft: rgba(160, 100, 206, 0.10);
   --border-color: var(--is-border);
   --box-shadow: rgba(0, 0, 0, 0.32);
   --box-shadow-soft: rgba(160, 100, 206, 0.16);
   --bg-gray: rgba(160, 100, 206, 0.10);
}

.theme-light {
   --nav-color: #F8F4FF;
   --body-color: #F6F1FA;
   --body-color-bg: #F6F1FA;
   --background-color: #FFFCFF;
   --primary-bg: #F0E6F7;
   --color: #261733;
   --card-color: #FFFCFF;
   --card-background: #FFFCFF;
   --soft-background: rgba(160, 100, 206, 0.10);
   --card-soft: #F7F0FC;
   --border-color: rgba(89, 40, 127, 0.14);
   --box-shadow: rgba(89, 40, 127, 0.10);
   --box-shadow-soft: rgba(160, 100, 206, 0.14);
   --bg-gray: #F0E6F7;
}

.btn-primary,
.d-color-bg,
.primaryBg,
.bgActive,
.primary-light-active,
.info-light-active {
   background: var(--is-gradient) !important;
   border-color: var(--is-primary) !important;
   color: #fff !important;
}

.d-color,
.primaryColor,
.defaultColor,
.text-primary,
.theme-dark .icofont-globe,
.theme-dark .icofont-bell-alt {
   color: var(--is-accent) !important;
}

.home-page-navbar .navbar,
.navHeader-img,
.modern-alert.alert-setup,
.config-page-header,
.settings-sidebar .sidebar-header {
   background: var(--is-hero-gradient) !important;
}

.main-header .navbar,
.main-header > .logo,
.theme-dark .main-sidebar,
.theme-dark .left-side {
   border-color: var(--is-border) !important;
}

 .colspan-null {
   display: table-cell;
   width: auto;
}

.colspan-data {
   display: table-cell;
   width: auto;
}

@media screen and (max-width: 600px) {
   .responsiveTable.table-responsive {
       display: block;
       width: 100%;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
   }

   .responsiveTable .table thead th,
   .responsiveTable .table td,
   .responsiveTable .table th {
       white-space: nowrap;
   }

   .responsiveTable .table tbody tr {
       margin-bottom: 2rem;
       border-radius: .5rem;
       padding: 5px;
   }

   .responsiveTable .table thead,
   .responsiveTable .table tbody,
   .responsiveTable .table th,
   .responsiveTable .table td,
   .responsiveTable .table tr {
       display: block;
   }

   .responsiveTable .table thead tr {
       position: absolute;
       top: -9999px;
       left: -9999px;
   }

   .responsiveTable .table td:last-child {
       border: 0;
   }

   .responsiveTable .table td {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       text-wrap: wrap;
       gap: 10px;
   }

   .responsiveTable .table tr {
       border: 1px solid var(--border-color);
   }

   .responsiveTable .table td {
       border: none;
       border-bottom: 1px solid var(--border-color);
       position: relative;
       padding-left: 50%;
   }

   .responsiveTable .table td:before {
       position: absolute;
       top: 12px;
       left: 6px;
       width: 45%;
       padding-right: 10px;
       white-space: nowrap;
       content: attr(data-label);
       font-weight: bold;
   }

   .responsiveTable .table td div {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       text-wrap: wrap;
   }

   .responsiveTable .table td a {
       text-wrap: wrap;
   }

   .viewItems {
       font-size: 1.2rem !important;
   }

   td.text-center {
       text-align: inherit !important;
   }

   .colspan-null {
       display: none;
       padding-left: 0 !important;
   }

   .colspan-data {
       display: block;
       width: 100%;
       box-sizing: border-box;
       padding-left: 0 !important;
   }

   .colspan-data .bottomPrice {
       display: flex;
       flex-direction: column;
       width: 100%;
   }

   .colspan-data .bottomPrice p,
   .colspan-data .bottomPrice h4 {
       width: 100%;
   }

   td.actionTd .btn-group {
       gap: 10px;
   }

   .sm-pl-0 {
       padding-left: 0 !important;
   }

   .sm-mt-10 {
       margin-top: 10px !important;
   }

   .responsiveTable .table td.action {
       display: flex;
       align-items: center;
       justify-content: space-around !important;
       flex-wrap: wrap;
       gap: 10px;
   }

   .p-sm-0 {
       padding: 0;
   }

   .sm-column-reverse {
       flex-direction: column-reverse;
   }

   .sm-mb-15 {
       margin-bottom: 15px !important;
   }
}

.pt-5 {
   padding-top: 10px !important;
}

.table tr td .viewItems {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
}

.text-wrap-wrap {
   text-wrap: wrap;
}

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   -webkit-text-fill-color: var(--color) !important;
   color: var(--color) !important;
   border: 1px solid var(--border-color) !important;
}

input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   -webkit-text-fill-color: var(--color) !important;
   border: 1px solid var(--border-color) !important;
}