@charset "UTF-8";
/*------------------------------------------------------------------
[Table of contents]
1 — Variables
2 — Theme
3 — Components
    3.1 — Form
    3.2 — Card
    3.3 — Buttons
    3.4 — Background
    3.5 — Badges
    3.6 — Alert
    3.7 — Scroll
    3.8 — Dropdown
    3.9 — Dropzone
4 — Modals
5 — Global
    5.1 — General
    5.2 — Editor
    5.3 — Chart
    5.4 — Table
6 — Layout
7 — Pages
    7.1 — Api
    7.2 — Files
    7.3 — Overview
    7.4 — Payments
    7.5 — Settings
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[1 - Variables]
*/
:root {
  --color-1: #323EDD;
  --color-2: #00263B;
  --color-3: #32456c;
  --color-4: #f7f7fc;
  --color-5: #14855F;
  --color-6: #a91d3a;
  --color-7: #006769;
  --color-1-rgb: 50, 62, 221;
  --color-2-rgb: 0, 38, 59;
  --color-3-rgb: 50, 69, 108;
  --color-4-rgb: 247, 247, 252;
  --color-5-rgb: 20, 133, 95;
  --color-6-rgb: 169, 29, 58;
  --color-7-rgb: 0, 103, 105;
}

:root {
  --dark-text-color: #f7f7f7;
  --dark-color: #232323;
  --dark-bg-color: #121212;
  --dark-border-1: rgba(242,243,249,.1);
  --dark-border-2: rgba(242,243,249,.25);
}

/*------------------------------------------------------------------
[2 - Theme]
*/
html.dark-mode .dashboard-content,
html.dark-mode .offcanvas-body,
html.dark-mode #side-menu .offcanvas-header,
html.dark-mode .overview-card .icon,
html.dark-mode .gridjs-tr:hover,
html.dark-mode .file-preview-inner {
  background: var(--dark-bg-color) !important;
}

html.dark-mode .card,
html.dark-mode .offcanvas-content .offcanvas-header,
html.dark-mode .modal-content {
  background: var(--dark-color) !important;
}

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode p,
html.dark-mode .form-label,
html.dark-mode .form-check .form-check-label,
html.dark-mode .form-switch .form-check-label,
html.dark-mode .card-heading,
html.dark-mode .dropdown-item,
html.dark-mode input.gridjs-input,
html.dark-mode .gridjs-container,
html.dark-mode th.gridjs-th,
html.dark-mode .gridjs-pagination .gridjs-pages button,
html.dark-mode .plan-card .plan-features li,
html.dark-mode .dropzone span,
html.dark-mode pre {
  color: var(--dark-text-color) !important;
}

html.dark-mode .topbar,
html.dark-mode .dropdown-menu,
html.dark-mode .form-check .form-check-input,
html.dark-mode .form-switch .form-check-input,
html.dark-mode .gridjs-footer,
html.dark-mode input.gridjs-input,
html.dark-mode .gridjs-pagination .gridjs-pages button,
html.dark-mode .gridjs-pagination .gridjs-pages button:disabled {
  background-color: var(--dark-color);
  border-color: var(--dark-border-1) !important;
}

html.dark-mode .gridjs-pagination .gridjs-pages button.gridjs-currentPage,
html.dark-mode .modal .verify-icon {
  color: var(--color-1) !important;
}

html.dark-mode .dashboard-sidebar {
  background: var(--dark-color);
  border-color: var(--dark-border-1);
}

html.dark-mode .dashboard-sidebar .sidebar-logo {
  border-color: var(--dark-border-1);
}

html.dark-mode .dashboard-sidebar .nav-link {
  color: var(--dark-text-color) !important;
}

html.dark-mode .dashboard-sidebar .nav-link.active {
  background: var(--color-1) !important;
}

html.dark-mode .dashboard-sidebar .nav-link.active > .sidebar-i,
html.dark-mode .dashboard-sidebar .nav-link.active > .sidebar-t {
  color: var(--dark-text-color) !important;
}

html.dark-mode .dashboard-sidebar .nav-link.active .sidebar-badge {
  background: var(--dark-bg-color);
}

html.dark-mode .dashboard-sidebar .nav-link:not(.active):hover {
  background: var(--dark-bg-color) !important;
}

html.dark-mode .offcanvas-thumb,
html.dark-mode .gridjs-head,
html.dark-mode .gridjs-wrapper,
html.dark-mode th.gridjs-th,
html.dark-mode .gridjs-tbody > .gridjs-tr:not(:last-child),
html.dark-mode .files-overview-card .card,
html.dark-mode .link-area {
  border-color: var(--dark-border-1);
}

html.dark-mode .avatar {
  outline-color: var(--dark-border-1);
}

html.dark-mode .btn-color-1:hover {
  background: var(--dark-bg-color) !important;
  border-color: var(--dark-bg-color) !important;
}

html.dark-mode .btn-color-4 {
  color: white !important;
  background: var(--dark-bg-color) !important;
  border-color: var(--dark-bg-color) !important;
}

html.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-mode .action-button {
  background: var(--dark-bg-color) !important;
  color: var(--dark-text-color) !important;
}

html.dark-mode .action-button:active, html.dark-mode .action-button.show {
  border-color: var(--dark-bg-color) !important;
}

html.dark-mode .action-button > label {
  color: var(--dark-text-color) !important;
}

html.dark-mode .action-button .btn-check:checked + .btn {
  background-color: var(--dark-color);
  border-color: var(--dark-color);
}

@media (min-width: 576px) {
  html.dark-mode .advanced-options .btn {
    background: var(--dark-color);
    color: var(--dark-text-color);
    border-color: var(--dark-border-1);
  }
}

html.dark-mode .offcanvas-content .detail-card {
  border-color: var(--dark-border-1);
}

html.dark-mode .offcanvas-content .detail-card .content {
  color: var(--dark-text-color);
}

html.dark-mode .offcanvas-content .detail-card .content i {
  color: var(--color-1);
}

html.dark-mode .form-control,
html.dark-mode .form-select {
  background-color: var(--dark-color) !important;
  color: var(--dark-text-color) !important;
  border-color: var(--dark-border-1) !important;
}

html.dark-mode .form-control::placeholder,
html.dark-mode .form-select::placeholder {
  color: var(--dark-text-color) !important;
  opacity: .75;
}

html.dark-mode .form-select {
  background-image: url("../image/chevron-light.svg") !important;
}

html.dark-mode input[type=file]::-webkit-file-upload-button {
  background: var(--dark-bg-color) !important;
  color: var(--dark-text-color) !important;
}

html.dark-mode input[type=range]::-webkit-slider-runnable-track {
  background: var(--dark-bg-color) !important;
}

html.dark-mode textarea::-webkit-scrollbar-corner {
  border-color: var(--dark-border-1);
  background-color: var(--dark-color);
}

html.dark-mode textarea::-webkit-scrollbar {
  background-color: var(--dark-bg-color);
}

html.dark-mode textarea::-webkit-scrollbar-thumb {
  background-color: var(--dark-color);
  border-radius: 1rem;
  border: 4px solid transparent;
  background-clip: padding-box;
}

html.dark-mode .scroll-light::-webkit-scrollbar-track {
  background: var(--dark-bg-color) !important;
}

html.dark-mode .scroll-light::-webkit-scrollbar-thumb {
  background: var(--dark-border-2) !important;
}

html.dark-mode .os-theme-dark {
  --os-handle-bg: var(--dark-border-2) !important;
  --os-handle-bg-hover: var(--dark-bg-color) !important;
  --os-handle-bg-active: var(--dark-bg-color) !important;
}

html.dark-mode .alert-1 {
  color: var(--dark-text-color);
  background: var(--color-6);
}

html.dark-mode .alert-2 {
  color: var(--dark-text-color);
  background: var(--color-7);
}

html.dark-mode .alert-3 {
  color: var(--dark-text-color);
  background: var(--color-1);
}

html.dark-mode .img-container,
html.dark-mode .bg-container,
html.dark-mode .bg-container-2 {
  background: var(--dark-color);
  border: 1px solid var(--dark-border-1);
}

html.dark-mode .setting-tabs .nav-link {
  color: var(--dark-text-color);
}

html.dark-mode .setting-tabs .nav-link.active {
  background: var(--dark-bg-color);
}

html.dark-mode .apexcharts-text,
html.dark-mode .apexcharts-title-text,
html.dark-mode .apexcharts-legend-text {
  fill: var(--dark-text-color) !important;
  color: var(--dark-text-color) !important;
}

html.dark-mode .apexcharts-xcrosshairs,
html.dark-mode .apexcharts-xaxis-tick,
html.dark-mode .apexcharts-gridline {
  stroke: var(--dark-border-1) !important;
}

html.dark-mode .apexcharts-tooltip {
  background: var(--dark-color) !important;
  border-color: var(--dark-border-1) !important;
}

html.dark-mode .apexcharts-tooltip-text {
  color: var(--dark-text-color) !important;
}

html.dark-mode .apexcharts-tooltip .apexcharts-tooltip-title {
  color: var(--dark-text-color) !important;
  background: var(--dark-color) !important;
  border-color: var(--dark-border-1) !important;
}

html.dark-mode .ck.ck-editor__main > .ck-editor__editable {
  background: var(--dark-color);
  border-color: var(--dark-border-1);
}

html.dark-mode .ck.ck-editor__main > .ck-editor__editable pre code {
  color: var(--dark-text-color);
}

html.dark-mode .ck.ck-editor .ck.ck-reset_all * {
  color: var(--dark-text-color);
}

html.dark-mode .ck.ck-toolbar {
  background: var(--dark-color);
  border-color: var(--dark-border-1);
}

html.dark-mode .ck.ck-toolbar__separator {
  background: var(--dark-border-1) !important;
}

html.dark-mode .ck.ck-toolbar .ck.ck-button:active, html.dark-mode .ck.ck-toolbar .ck.ck-button:focus,
html.dark-mode .ck.ck-toolbar a.ck.ck-button:active,
html.dark-mode .ck.ck-toolbar a.ck.ck-button:focus {
  box-shadow: none;
}

html.dark-mode .ck.ck-toolbar .ck.ck-button.ck-on,
html.dark-mode .ck.ck-toolbar a.ck.ck-button.ck-on {
  background: var(--dark-color);
}

html.dark-mode .ck.ck-toolbar .ck.ck-button:not(.ck-disabled):hover, html.dark-mode .ck.ck-toolbar .ck.ck-button:not(.ck-disabled):active,
html.dark-mode .ck.ck-toolbar a.ck.ck-button:not(.ck-disabled):hover,
html.dark-mode .ck.ck-toolbar a.ck.ck-button:not(.ck-disabled):active {
  background: var(--dark-bg-color);
}

html.dark-mode .ck.ck-toolbar .ck.ck-dropdown__panel {
  background: var(--dark-bg-color);
  border-color: var(--dark-border-1);
}

html.dark-mode .ck.ck-toolbar .ck.ck-dropdown__panel .ck-list {
  background: var(--dark-color);
}

html.dark-mode .ck.ck-toolbar .ck.ck-dropdown__panel .ck-list__item .ck-button.ck-on {
  background: var(--color-1);
}

html.dark-mode .ck.ck-toolbar .ck.ck-dropdown__panel .ck-input {
  background: var(--dark-color);
  box-shadow: none;
}

html.dark-mode .upload-methods a {
  color: var(--dark-text-color);
}

html.dark-mode .dropzone {
  background: var(--dark-color);
  border: 2px dashed var(--dark-border-1) !important;
}

html.dark-mode .dropzone .fa-cloud-arrow-up {
  color: var(--dark-bg-color);
}

html.dark-mode .dropzone ::-webkit-scrollbar-track {
  background: var(--dark-bg-color) !important;
}

html.dark-mode .dropzone ::-webkit-scrollbar-thumb {
  background: var(--dark-border-2) !important;
}

html.dark-mode .table-custom {
  border-color: var(--dark-border-1);
}

html.dark-mode .table-custom tr,
html.dark-mode .table-custom th {
  border-color: var(--dark-border-1);
}

html.dark-mode .table-custom th,
html.dark-mode .table-custom td {
  color: var(--dark-text-color);
}

html.dark-mode .table-custom .table {
  --bs-table-bg: var(--dark-color);
}

html.dark-mode .table-custom .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--dark-bg-color);
}

html.dark-mode .pagination .page-item .page-link {
  color: var(--dark-text-color);
  background: var(--dark-color);
  border: 1px solid var(--dark-border-1);
}

html.dark-mode .pagination .page-item .page-link.disabled {
  color: var(--dark-text-color);
  background: var(--dark-color);
}

html.dark-mode .pagination .page-item .page-link:hover {
  background-color: var(--dark-bg-color);
}

html.dark-mode .pagination .page-item:last-child .page-link {
  border-left: 1px solid var(--dark-border-1);
}

html.dark-mode .popover-arrow::after {
  border-bottom-color: var(--dark-bg-color) !important;
}

html.dark-mode .popover-body {
  background: var(--dark-bg-color) !important;
  color: var(--dark-text-color) !important;
}

/*------------------------------------------------------------------
[3 - Components]
*/
/*------------------------------------------------------------------
[3.1 - Form]
*/
input[type=email],
input[type=number],
input[type=url] {
  direction: rtl !important;
}

.form-label {
  color: var(--color-3);
  font-weight: 600;
}

.form-label .required {
  color: var(--color-1);
}

.form-select,
.form-control {
  border-radius: 1rem;
  cursor: pointer;
  border-color: var(--color-4);
  color: var(--color-3);
}

.form-select:focus,
.form-control:focus {
  color: var(--color-3);
  box-shadow: none;
  border-color: rgba(var(--color-1-rgb), 0.75);
}

.form-select:disabled,
.form-control:disabled {
  background-color: var(--color-4);
  cursor: not-allowed;
}

.form-select::placeholder,
.form-control::placeholder {
  color: rgba(var(--color-3-rgb), 0.75);
}

.form-select.missing,
.form-control.missing {
  border-color: var(--color-6) !important;
}

.form-select {
  background-image: url("../image/chevron.svg");
  height: 3.250rem;
  padding: 0 1.25rem 0 3.5rem;
  line-height: 3;
}

.form-control:not(textarea):not(input[type=file]):not(.stripe-input):not(.receiver-search-input) {
  padding: 0 1.25rem;
  height: 3.250rem;
  line-height: 3;
}

.form-control:not(input) {
  padding: 1rem 1.25rem;
}

input[type=file] {
  padding: 0 .75rem 1.25rem 1.25rem;
  height: 3.250rem;
  line-height: 3;
}

input[type=number] {
  appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.form-check .form-check-input {
  filter: none !important;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid rgba(var(--color-2-rgb), 0.1);
  border-radius: .5rem;
  margin-top: 0;
  cursor: pointer;
}

.form-check .form-check-input:focus {
  box-shadow: none;
}

.form-check .form-check-input:checked {
  background-color: var(--color-1) !important;
}

.form-check .form-check-label {
  color: var(--color-3);
  font-weight: 600;
  cursor: pointer;
}

.form-switch .form-check-input {
  filter: none !important;
  width: 3.5em;
  height: 2em;
  border: 1px solid rgba(var(--color-3-rgb), 0.2);
  border-radius: .5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Crect x='-3' y='-3' width='6' height='6' rx='1' fill='rgb(173 181 196)' /%3E%3C/svg%3E");
  z-index: 1;
}

.form-switch .form-check-input:checked {
  background-color: rgba(var(--color-1-rgb), 0.05);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Crect x='-3' y='-3' width='6' height='6' rx='1' fill='rgb(50 62 221)' /%3E%3C/svg%3E");
}

.form-switch .form-check-input:focus {
  box-shadow: none;
  border-color: rgba(var(--color-3-rgb), 0.2) !important;
}

.form-switch .form-check-label {
  color: var(--color-3);
  font-weight: 600;
  cursor: pointer;
}

.form-switch span {
  font-size: 1.25rem;
  color: var(--color-3);
  cursor: pointer;
}

.input-icon {
  position: relative;
}

.input-icon > input,
.input-icon > select,
.input-icon > textarea {
  padding-right: 3rem !important;
}

.input-icon > input:focus + i,
.input-icon > select:focus + i,
.input-icon > textarea:focus + i {
  color: var(--color-1);
}

.input-icon > i {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  color: rgba(var(--color-1-rgb), 0.25);
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -ms-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
}

.error {
  color: var(--color-2);
  font-size: .875rem;
}

.table-select {
  min-width: 10rem;
}

.form-help {
  color: rgba(var(--color-1-rgb), 0.5);
  cursor: pointer;
}

.form-help:hover, .form-help[aria-describedby] {
  color: var(--color-1);
}

/*------------------------------------------------------------------
[3.2 - Card]
*/
.card {
  border-radius: 2rem;
  border: 0;
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05);
}

.card-body {
  padding: 2rem;
}

.card-heading {
  position: relative;
  color: var(--color-2);
  font-size: 1.5rem;
  font-weight: 700;
}

.card-heading:not(.collapsed)::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: .25rem;
  right: 0;
  bottom: 0;
  background: var(--color-1);
  border-radius: 1rem;
}

/*------------------------------------------------------------------
[3.3 - Buttons]
*/
.btn-close:focus {
  box-shadow: none !important;
}

.btn > i {
  pointer-events: none;
}

.btn-color-1 {
  color: white !important;
  background: var(--color-1) !important;
  border-color: var(--color-1) !important;
  border-radius: 1rem;
  padding: .75rem 1.25rem;
  font-weight: 500;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.btn-color-1:hover {
  background: var(--color-2) !important;
  border-color: var(--color-2) !important;
}

.btn-color-2 {
  color: white !important;
  background: var(--color-2) !important;
  border-color: var(--color-2) !important;
  border-radius: 1rem;
  padding: .75rem 1.25rem;
  font-weight: 500;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.btn-color-2:hover {
  background: var(--color-1) !important;
  border-color: var(--color-1) !important;
}

.btn-color-3 {
  color: var(--color-2) !important;
  background: white !important;
  border-color: white !important;
  border-radius: 1rem;
  padding: .75rem 1.25rem;
  font-weight: 500;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.btn-color-3:hover {
  color: white !important;
  background: var(--color-1) !important;
  border-color: var(--color-1) !important;
}

.btn-color-4 {
  color: var(--color-2) !important;
  background: var(--color-4) !important;
  border-color: var(--color-4) !important;
  border-radius: 1rem;
  padding: .75rem 1.25rem;
  font-weight: 500;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.btn-color-4:hover {
  color: white !important;
  background: var(--color-1) !important;
  border-color: var(--color-1) !important;
}

.btn-sm-1 {
  color: white !important;
  background: var(--color-1) !important;
  border: 0 !important;
  border-radius: .75rem;
  font-size: 1rem;
}

.btn-sm-2 {
  color: white !important;
  background: var(--color-2) !important;
  border: 0 !important;
  border-radius: .75rem;
  font-size: 1rem;
}

.btn-sm-3 {
  color: white !important;
  background: var(--color-5) !important;
  border: 0 !important;
  border-radius: .75rem;
  font-size: 1rem;
}

.action-button {
  color: var(--color-3) !important;
  font-weight: 500;
  border-radius: .75rem;
  margin: auto 0;
  display: inline-block;
  padding: .5rem .75rem;
}

.action-button[data-bg="gray"] {
  background: var(--color-4) !important;
}

.action-button[data-bg="gray"]:active, .action-button[data-bg="gray"].show {
  border-color: var(--color-4) !important;
}

.action-button[data-bg="white"] {
  background: white !important;
}

.action-button[data-bg="white"]:active, .action-button[data-bg="white"].show {
  border-color: white !important;
}

.action-button i {
  pointer-events: none;
}

.action-button > label {
  color: var(--color-2) !important;
  border-radius: .75rem;
}

.action-button .btn-check:checked + .btn {
  background-color: white;
  border-color: white;
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05);
}

/*------------------------------------------------------------------
[3.4 - Background]
*/
.covered {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.contained {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/*------------------------------------------------------------------
[3.5 - Badges]
*/
.badge-1 {
  color: white;
  background: var(--color-1);
  border-radius: .5rem;
  padding: .25rem .5rem;
  font-size: 1rem;
  font-weight: 500;
}

.badge-2 {
  color: white;
  background: var(--color-2);
  border-radius: .5rem;
  padding: .25rem .5rem;
  font-size: 1rem;
  font-weight: 500;
}

.badge-3 {
  color: white;
  background: var(--color-5);
  border-radius: .5rem;
  padding: .25rem .5rem;
  font-size: 1rem;
  font-weight: 500;
}

.badge-4 {
  color: white;
  background: var(--color-3);
  border-radius: .5rem;
  padding: .25rem .5rem;
  font-size: 1rem;
  font-weight: 500;
}

/*------------------------------------------------------------------
[3.6 - Alert]
*/
.alert-1 {
  color: var(--color-6);
  background: rgba(var(--color-6-rgb), 0.1);
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05);
}

.alert-2 {
  color: var(--color-7);
  background: rgba(var(--color-7-rgb), 0.1);
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05);
}

.alert-3 {
  color: var(--color-1);
  background: rgba(var(--color-1-rgb), 0.1);
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05);
}

/*------------------------------------------------------------------
[3.7 - Scroll]
*/
.scroll-light {
  overflow-y: overlay;
}

.scroll-light::-webkit-scrollbar {
  width: .5rem;
}

.scroll-light::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 1rem;
}

.scroll-light::-webkit-scrollbar-thumb {
  background: rgba(var(--color-2-rgb), 0.25);
  border-radius: .5rem;
}

.os-theme-dark {
  --os-handle-bg: rgba(var(--color-2-rgb),.25) !important;
  --os-handle-bg-hover: rgba(var(--color-2-rgb),.5) !important;
  --os-handle-bg-active: rgba(var(--color-2-rgb),.5) !important;
}

/*------------------------------------------------------------------
[3.8 - Dropdown]
*/
.dropdown-menu {
  border: 1px solid var(--color-4);
  padding: .5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.dropdown-menu .dropdown-item {
  color: var(--color-2);
  padding: .5rem .75rem;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.dropdown-menu .dropdown-item:hover {
  background: var(--color-4);
  border-radius: .25rem;
}

/*------------------------------------------------------------------
[3.9 - Dropzone]
*/
.dropzone {
  height: calc(19rem - 2px);
  border-radius: 1rem;
  border: 2px dashed var(--color-1) !important;
  color: var(--color-3);
}

.dropzone h2 {
  font-size: 1.125rem;
  font-weight: 700;
}

.dropzone span {
  color: var(--color-3);
  font-weight: 300;
}

.dropzone .uploader-icon::before {
  content: url("../image/uploader-icon.svg") !important;
}

.dropzone-results {
  height: 0;
  overflow-y: hidden;
}

.dropzone-results.show {
  height: auto !important;
  overflow-y: unset !important;
}

.dropzone .dz-clickable {
  cursor: pointer !important;
}

.dropzone .dz-error-message {
  display: none !important;
}

.dropzone .dropzone-previews,
.dropzone .dropzone-links {
  overflow-x: hidden;
}

.dropzone .dropzone-previews .dropzone-previews-inner,
.dropzone .dropzone-links .dropzone-previews-inner {
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 10;
}

.dropzone .dz-preview {
  background: var(--color-4) !important;
  border-radius: 1rem;
  max-height: 100px;
}

@media (min-width: 1200px) {
  .dropzone .dz-preview {
    width: calc(25% - 2rem);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .dropzone .dz-preview {
    width: calc(calc(100% / 3) - 2rem);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .dropzone .dz-preview {
    width: calc(25% - 2rem);
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .dropzone .dz-preview {
    width: calc(calc(100% / 3) - 2rem);
  }
}

@media (max-width: 575.98px) {
  .dropzone .dz-preview {
    width: calc(50% - 2rem);
  }
}

.dropzone .dz-preview .dz-remove {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 1.65rem;
  width: 1.65rem;
  font-size: 1rem !important;
  text-indent: -9999px;
  white-space: nowrap;
  position: absolute;
  background-color: white !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border-radius: 100%;
  top: -.825rem;
  left: -.825rem;
  z-index: 21;
}

.dropzone .dz-preview .dz-remove:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  mask-size: 40%;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: rgba(var(--color-3-rgb), 0.5);
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(173 181 196)'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}

.dropzone .dz-preview .dz-progress {
  height: 100% !important;
  width: 0;
  left: 0 !important;
  top: 0 !important;
  margin-top: unset !important;
  margin-left: unset !important;
  background: var(--color-4) !important;
  border-radius: 1rem !important;
  animation: none !important;
}

.dropzone .dz-preview .dz-filename,
.dropzone .dz-preview .dz-size {
  display: none !important;
}

.dropzone .dz-preview .dz-size {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-image {
  width: 100% !important;
  height: 100% !important;
  border-radius: 1rem !important;
}

.dropzone .dz-preview .dz-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100px !important;
  max-height: 100px !important;
}

.dropzone .dz-preview:hover .dz-image img {
  transform: none !important;
  filter: none !important;
}

.dropzone .dz-preview .image-opener {
  position: absolute;
  background: var(--color-1);
  width: 2.25rem;
  height: 2.25rem;
  left: .5rem;
  bottom: .5rem;
  border-radius: .5rem .5rem .5rem 1rem;
  cursor: pointer;
  z-index: 1001;
}

.dropzone .dz-preview .image-opener i {
  color: white;
}

.dropzone ::-webkit-scrollbar {
  width: .5rem;
}

.dropzone ::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 1rem;
}

.dropzone ::-webkit-scrollbar-thumb {
  background: rgba(var(--color-2-rgb), 0.25);
  border-radius: .5rem;
}

/*------------------------------------------------------------------
[4 - Modals]
*/
.modal-content {
  border: 0;
  border-radius: 1rem;
}

.modal-content i:not(.verify-icon) {
  color: var(--color-1);
}

.modal-content .verify-icon,
.modal-content h4 {
  color: var(--color-2);
}

.modal-content .modal-text {
  font-size: 1.125rem;
  color: var(--color-3);
}

.modal-body {
  padding: 2rem;
}

.modal-footer {
  justify-content: center;
  border: 0;
  padding: 0 2rem 2rem 2rem;
}

.offcanvas {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

/*------------------------------------------------------------------
[5 - Global]
*/
/*------------------------------------------------------------------
[5.1 - General]
*/
body,
pre {
  font-family: "Inter", sans-serif;
}

a {
  text-decoration: none !important;
}

.recaptcha {
  font-size: .875rem;
  color: var(--color-3);
  text-align: center;
  margin: 0;
}

.recaptcha a {
  color: var(--color-1);
  font-weight: 500;
}

.grecaptcha-badge,
img:not([src]):not([srcset]) {
  visibility: hidden;
}

.offcanvas-content {
  -webkit-transition: transform 0.4s ease-in-out 0.25s;
  -moz-transition: transform 0.4s ease-in-out 0.25s;
  -ms-transition: transform 0.4s ease-in-out 0.25s;
  -o-transition: transform 0.4s ease-in-out 0.25s;
  transition: transform 0.4s ease-in-out 0.25s;
}

@media (min-width: 1200px) {
  .offcanvas-content {
    width: 35rem !important;
  }
}

@media (max-width: 575.98px) {
  .offcanvas-content {
    max-width: 80% !important;
  }
}

.offcanvas-content .offcanvas-header {
  background: var(--color-4);
}

.offcanvas-content .detail-card {
  border: 1px solid var(--color-4);
  border-radius: 1rem;
}

.offcanvas-content .detail-card .title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-3);
}

.offcanvas-content .detail-card .content {
  color: var(--color-3);
}

.offcanvas-content .payment-detail span {
  color: var(--color-1);
  font-weight: 600;
}

.offcanvas-content .payment-detail span:first-child {
  font-size: 2rem;
}

.offcanvas-content .payment-detail .plan-name,
.offcanvas-content .payment-detail .package-name {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-3);
}

.offcanvas-content .payment-detail .package-price {
  font-size: 2rem;
  color: var(--color-1);
}

.no-data {
  color: var(--color-3);
  font-size: 1.125rem;
}

.bg-container {
  background: var(--color-4);
  border-radius: 1rem;
}

.bg-container-2 {
  background: rgba(var(--color-1-rgb), 0.1);
  border-radius: 1rem;
}

/*------------------------------------------------------------------
[5.2 - Editor]
*/
.ck-toolbar {
  border-radius: 1rem 1rem 0 0 !important;
}

.ck-content {
  border-radius: 0 0 1rem 1rem !important;
}

.ck-content {
  width: 100%;
  height: 300px;
  overflow-y: auto;
}

/*------------------------------------------------------------------
[5.3 - Chart]
*/
.apexcharts-legend-marker {
  margin-left: 3px;
  margin-right: unset !important;
}

.apexcharts-tooltip-marker {
  margin-left: 10px;
  margin-right: unset !important;
}

.apexcharts-title-text {
  text-anchor: end !important;
}

/*------------------------------------------------------------------
[5.4 - Table]
*/
.gridjs-head,
.gridjs-footer {
  padding: 2rem !important;
}

.gridjs-search-input {
  padding: .75rem 1.75rem !important;
}

.gridjs-search-input:focus {
  border-color: rgba(var(--color-1-rgb), 0.75) !important;
}

th.gridjs-th,
td.gridjs-td {
  font-size: 1.125rem;
}

.gridjs-pages button:first-child {
  border-right: 1px solid #f1f1f1 !important;
  border-radius: 0 1rem 1rem 0 !important;
}

.gridjs-pages button:last-child {
  border-right: 0 !important;
  border-radius: 1rem 0 0 1rem !important;
}

.comments-table th.gridjs-th[data-column-id="comment"] {
  width: 350px !important;
}

.comments-table td.gridjs-td[data-column-id="comment"] {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.table-custom {
  overflow: auto;
  border-radius: 1rem;
  border: 1px solid rgba(var(--color-2-rgb), 0.1);
}

.table-custom table {
  border-spacing: 0;
  border-collapse: collapse;
  border-style: hidden;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.table-custom th {
  font-weight: 500;
  border: 1px solid rgba(var(--color-2-rgb), 0.1);
}

.table-custom tr {
  vertical-align: middle;
}

.table-custom th,
.table-custom td {
  padding: 1rem;
  font-size: 1.125rem;
  color: var(--color-3);
}

.table-custom .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--color-4);
}

/*------------------------------------------------------------------
[6 - Layout]
*/
@media (min-width: 1200px) {
  .dashboard-sidebar {
    border-left: 1px solid var(--color-4);
    bottom: 0;
    margin-top: 0;
    position: fixed;
    top: 0;
    right: 0;
  }
  .dashboard-sidebar:not(.sm) {
    width: 260px;
  }
}

.dashboard-sidebar > div.nav[data-overlayscrollbars="host"] {
  height: calc(100vh - calc(4.5rem + 1px));
}

.dashboard-sidebar #side-menu {
  border: none;
  max-width: 80%;
}

.dashboard-sidebar .submenu {
  padding-right: 2rem;
}

.dashboard-sidebar .submenu > div {
  margin: .125rem 0;
}

.dashboard-sidebar .submenu.dropdown-menu {
  border-color: rgba(var(--color-4-rgb), 0.5);
  padding: 0;
}

.dashboard-sidebar .submenu.dropdown-menu div {
  margin: .25rem;
}

.dashboard-sidebar .submenu.dropdown-menu div:hover > a {
  color: var(--color-1);
}

.dashboard-sidebar .sidebar-t {
  display: flex;
  width: 100%;
}

.dashboard-sidebar .sidebar-badge {
  color: white;
  background: var(--color-1);
  border-radius: .25rem;
  font-size: .75rem;
  min-width: 1.125rem;
  text-align: center;
}

.dashboard-sidebar .nav-item {
  width: 100%;
  padding: .75rem .75rem 0 .75rem;
}

.dashboard-sidebar .nav-link {
  display: flex;
  align-items: center;
  padding: .5rem;
  width: 100%;
  color: var(--color-3);
  font-size: 1.125rem;
  border-radius: .75rem;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.dashboard-sidebar .nav-link.active {
  background: var(--color-4);
  color: var(--color-1);
}

.dashboard-sidebar .nav-link.active > .sidebar-i,
.dashboard-sidebar .nav-link.active > .sidebar-t {
  color: var(--color-1);
}

.dashboard-sidebar .nav-link:not(.active):hover {
  background: rgba(var(--color-4-rgb), 0.5);
}

.dashboard-sidebar.sm {
  width: 4.25rem;
  position: absolute;
  box-shadow: none;
  z-index: 1001;
}

.dashboard-sidebar.sm .sidebar-logo {
  padding: 0;
}

.dashboard-sidebar.sm .sidebar-logo > img {
  display: none;
}

.dashboard-sidebar.sm .action-button,
.dashboard-sidebar.sm .sidebar-i {
  margin: auto;
}

.dashboard-sidebar.sm .sidebar-t,
.dashboard-sidebar.sm .dropdown-toggle::after {
  display: none;
}

.dashboard-content {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-4);
}

@media (min-width: 1200px) {
  .dashboard-content:not(.lg) {
    margin-right: 260px;
  }
  .dashboard-content.lg {
    margin-right: 4.25rem;
  }
}

.dashboard-content > .content {
  padding: 2rem;
}

.animate {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.sidebar-logo {
  padding: 0 1.5rem;
  height: calc(4.5rem + 1px);
  border-bottom: 1px solid var(--color-4);
}

.sidebar-logo > img {
  max-height: 1.875rem;
  margin: auto 0 auto auto;
}

.topbar {
  background: white;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--color-4);
}

.topbar .page-name > p {
  color: var(--color-2);
  font-size: 1.25rem;
  margin: auto 0;
}

.avatar {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  outline: 1px solid var(--color-4);
}

.pagination .page-item .page-link {
  color: var(--color-3);
  background: white;
  font-weight: 600;
  padding: .75rem 1.25rem;
  border: 1px solid #f1f1f1;
  border-left: none;
  outline: none;
  margin-right: 0;
}

.pagination .page-item .page-link.disabled {
  color: var(--color-3);
  background: white;
}

.pagination .page-item .page-link:focus {
  box-shadow: none;
}

.pagination .page-item .page-link:hover {
  background-color: #f7f7f7;
  outline: none;
}

.pagination .page-item:first-child .page-link {
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 1rem;
}

.pagination .page-item:last-child .page-link {
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 1rem;
  border-left: 1px solid #f1f1f1;
}

.pagination .page-item:last-child .page-link:focus {
  margin-left: 0;
}

.pagination .page-item.active > .page-link {
  color: var(--color-1) !important;
}

/*------------------------------------------------------------------
[7 - Pages]
*/
/*------------------------------------------------------------------
[7.1 - Api]
*/
.api-card p:not(.card-heading):not(.api-card-data) {
  color: var(--color-3);
  font-weight: 600;
}

.api-card-data {
  color: var(--color-3);
}

.api-card pre {
  color: var(--color-3);
  font-size: 1rem;
  direction: ltr;
}

/*------------------------------------------------------------------
[7.2 - Files]
*/
.upload-methods a {
  color: var(--color-3);
  font-weight: 600;
}

.upload-methods a.active {
  color: var(--color-1) !important;
}

.link-area {
  border-radius: 1rem;
  border: 2px dashed var(--color-1);
  color: var(--color-3);
}

.link-area #file-url {
  resize: none;
}

@media (min-width: 576px) {
  .mobile-options {
    display: none;
  }
  .advanced-options {
    display: none;
    border-radius: 1rem;
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
  }
  .advanced-options.show {
    display: inline-flex;
    max-height: 500px;
    transition: max-height 1s ease-in;
  }
  .advanced-options .btn {
    background: var(--color-4);
    color: var(--color-3);
    border-color: var(--color-4);
    border-radius: 1rem;
  }
  .advanced-options .btn:hover i {
    color: var(--color-1);
  }
}

@media (max-width: 575.98px) {
  .advanced-options {
    display: none;
  }
  .mobile-options {
    display: none;
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
  }
  .mobile-options.show {
    display: inline-flex;
    max-height: 500px;
    transition: max-height 1s ease-in;
  }
}

.files-overview-card .card {
  border: 2px dashed var(--color-1);
}

@media (max-width: 575.98px) {
  .files-overview-card .card .count {
    font-size: 1.125rem;
    line-height: 1.5;
  }
}

@media (min-width: 768px) and (max-width: 1399.98px) {
  #files-table-search .input-group input, #files-table-search .input-group select,
  #reports-table-search .input-group input,
  #reports-table-search .input-group select {
    border-radius: 1rem;
    width: 40%;
    margin-right: .25rem;
    margin-left: .25rem;
  }
  #files-table-search .input-group button,
  #reports-table-search .input-group button {
    border-radius: 1rem;
    width: 48.65%;
    margin-right: .25rem;
    margin-left: .25rem;
  }
}

@media (max-width: 767.98px) {
  #files-table-search .input-group input, #files-table-search .input-group select, #files-table-search .input-group button,
  #reports-table-search .input-group input,
  #reports-table-search .input-group select,
  #reports-table-search .input-group button {
    border-radius: 1rem;
    width: 100%;
    margin: 0;
  }
}

.uploaded-file {
  max-height: 500px;
}

.file-preview-inner {
  background: var(--color-4);
  border-radius: 1rem;
}

@media (min-width: 768px) {
  .file-preview-inner {
    height: 450px;
  }
}

@media (max-width: 767.98px) {
  .file-preview-inner {
    height: 350px;
  }
}

.file-preview-inner p {
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(var(--color-1-rgb), 0.2);
}

@media (max-width: 767.98px) {
  #view-modal-inner iframe {
    height: 350px;
  }
}

/*------------------------------------------------------------------
[7.3 - Overview]
*/
.overview-card .count {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-3);
}

.overview-card .title {
  font-size: 1.125rem;
  color: var(--color-3);
}

.overview-card .icon {
  background: rgba(var(--color-1-rgb), 0.1);
  color: var(--color-1);
  border-radius: 1rem;
  padding: 1rem;
}

/*------------------------------------------------------------------
[7.4 - Payments]
*/
.plan-card .plan-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-2);
}

.plan-card .price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-1);
}

.plan-card .plan-features li {
  color: var(--color-3);
}

.plan-card .plan-features i:not(.form-help) {
  color: var(--color-1);
}

.plan-card .current-icon {
  left: 2rem;
  color: var(--color-1);
}

/*------------------------------------------------------------------
[7.5 - Settings]
*/
.setting-tabs .nav-link {
  color: var(--color-3);
  font-size: 1.125rem;
  text-align: center;
  border-radius: 1rem;
  padding: .75rem 1.75rem;
}

.setting-tabs .nav-link.active {
  color: var(--color-1);
  background: var(--color-4);
}

.img-container {
  background: var(--color-4);
  border-radius: 1rem;
}

.img-container .covered {
  width: 140px;
  height: 140px;
  border-radius: 1rem;
}

.img-container .delete-photo {
  top: .5rem;
  left: .5rem;
  background: var(--color-1);
  border-radius: .5rem;
  cursor: pointer;
}

.img-container .delete-photo i {
  color: white;
}

/*# sourceMappingURL=dashboard.rtl.css.map */