/*!
 * RealMosaic Style Overides
 */

:root,
[data-bs-theme="light"] {
  --bs-blue: #2b9cd9;
  --bs-indigo: #918bc8;
  --bs-purple: #7e5ab0;
  --bs-pink: #ed6e87;
  --bs-red: #ca3053;
  --bs-orange: #e96126;
  --bs-yellow: #f5a92d;
  --bs-green: #71b348;
  --bs-teal: #7dcaec;
  --bs-cyan: #4db3e2;
  --bs-black: #181a1e;
  --bs-white: #fff;
  --bs-gray: #475569;
  --bs-gray-dark: #1e293b;
  --bs-gray-100: #f8fafc;
  --bs-gray-200: #f1f5f9;
  --bs-gray-300: #e2e8f0;
  --bs-gray-400: #94a3b8;
  --bs-gray-500: #64748b;
  --bs-gray-600: #475569;
  --bs-gray-700: #334155;
  --bs-gray-800: #1e293b;
  --bs-gray-900: #191315;
  --bs-primary: #918bc8;
  --bs-secondary: #475569;
  --bs-success: #71b348;
  --bs-info: #4db3e2;
  --bs-warning: #f5a92d;
  --bs-danger: #ca3053;
  --bs-light: #f8fafc;
  --bs-dark: #191315;
  --bs-white: #fff;
  --bs-primary-rgb: 145, 139, 200;
  --bs-secondary-rgb: 71, 85, 105;
  --bs-success-rgb: 113, 179, 72;
  --bs-info-rgb: 77, 179, 226;
  --bs-warning-rgb: 230, 138, 98;
  --bs-danger-rgb: 202, 48, 83;
  --bs-light-rgb: 248, 250, 252;
  --bs-dark-rgb: 35, 31, 32;
  --bs-white-rgb: 255, 255, 255;
  --bs-primary-text-emphasis: rgb(19.8, 21, 51);
  --bs-secondary-text-emphasis: rgb(14.2, 17, 21);
  --bs-success-text-emphasis: rgb(17.2, 32.8, 22.6);
  --bs-info-text-emphasis: rgb(2.6, 40.4, 48);
  --bs-warning-text-emphasis: rgb(46, 27.6, 19.6);
  --bs-danger-text-emphasis: rgb(46.2, 16.4, 23.6);
  --bs-light-text-emphasis: #191315;
  --bs-dark-text-emphasis: #334155;
  --bs-primary-bg-subtle: rgb(239.4, 240, 255);
  --bs-secondary-bg-subtle: rgb(236.6, 238, 240);
  --bs-success-bg-subtle: rgb(238.1, 245.9, 240.8);
  --bs-info-bg-subtle: rgb(230.8, 249.7, 253.5);
  --bs-warning-bg-subtle: rgb(252.5, 243.3, 239.3);
  --bs-danger-bg-subtle: rgb(252.6, 237.7, 241.3);
  --bs-light-bg-subtle: rgb(251.5, 252.5, 253.5);
  --bs-dark-bg-subtle: #94a3b8;
  --bs-primary-border-subtle: rgb(223.8, 225, 255);
  --bs-secondary-border-subtle: rgb(218.2, 221, 225);
  --bs-success-border-subtle: rgb(221.2, 236.8, 226.6);
  --bs-info-border-subtle: rgb(206.6, 244.4, 252);
  --bs-warning-border-subtle: rgb(250, 231.6, 223.6);
  --bs-danger-border-subtle: rgb(250.2, 220.4, 227.6);
  --bs-light-border-subtle: #f1f5f9;
  --bs-dark-border-subtle: #64748b;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 2, 6, 23;
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #334155;
  --bs-body-color-rgb: 51, 65, 85;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #231f20;
  --bs-emphasis-color-rgb: 2, 6, 23;
  --bs-secondary-color: rgba(51, 65, 85, 0.65);
  --bs-secondary-color-rgb: 51, 65, 85;
  --bs-secondary-bg: #f1f5f9;
  --bs-secondary-bg-rgb: 241, 245, 249;
  --bs-tertiary-color: rgba(51, 65, 85, 0.5);
  --bs-tertiary-color-rgb: 51, 65, 85;
  --bs-tertiary-bg: #f8fafc;
  --bs-tertiary-bg-rgb: 248, 250, 252;
  --bs-heading-color: inherit;
  --bs-link-color: #918bc8;
  --bs-link-color-rgb: 99, 105, 255;
  --bs-link-decoration: none;
  --bs-link-hover-color: rgb(79.2, 84, 204);
  --bs-link-hover-color-rgb: 79, 84, 204;
  --bs-code-color: #ed6e87;
  --bs-highlight-color: #334155;
  --bs-highlight-bg: rgb(250, 231.6, 223.6);
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #f1f5f9;
  --bs-border-color-translucent: #94a3b8;
  --bs-border-radius: 0.325rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(2, 6, 23, 0.05);
  --bs-box-shadow-sm: 0 3px 4px rgba(2, 6, 23, 0.03);
  --bs-box-shadow-lg: 0 1rem 2rem rgba(2, 6, 23, 0.1);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(2, 6, 23, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(99, 105, 255, 0.25);
  --bs-form-valid-color: #71b348;
  --bs-form-valid-border-color: #71b348;
  --bs-form-invalid-color: #ca3053;
  --bs-form-invalid-border-color: #ca3053;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-color: #e2e8f0;
  --bs-body-color-rgb: 226, 232, 240;
  --bs-body-bg: #181a1e;
  --bs-body-bg-rgb: 35, 31, 32;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(226, 232, 240, 0.75);
  --bs-secondary-color-rgb: 226, 232, 240;
  --bs-secondary-bg: #1e293b;
  --bs-secondary-bg-rgb: 30, 41, 59;
  --bs-tertiary-color: rgba(226, 232, 240, 0.5);
  --bs-tertiary-color-rgb: 226, 232, 240;
  --bs-tertiary-bg: rgb(14, 17, 19);
  --bs-tertiary-bg-rgb: 14, 17, 19;
  --bs-primary-text-emphasis: rgb(161.4, 165, 255);
  --bs-secondary-text-emphasis: rgb(144.6, 153, 165);
  --bs-success-text-emphasis: rgb(153.6, 200.4, 169.8);
  --bs-info-text-emphasis: rgb(109.8, 223.2, 246);
  --bs-warning-text-emphasis: rgb(240, 184.8, 160.8);
  --bs-danger-text-emphasis: rgb(240.6, 151.2, 172.8);
  --bs-light-text-emphasis: #f8fafc;
  --bs-dark-text-emphasis: #e2e8f0;
  --bs-primary-bg-subtle: rgb(19.8, 21, 51);
  --bs-secondary-bg-subtle: rgb(14.2, 17, 21);
  --bs-success-bg-subtle: rgb(17.2, 32.8, 22.6);
  --bs-info-bg-subtle: rgb(2.6, 40.4, 48);
  --bs-warning-bg-subtle: rgb(46, 27.6, 19.6);
  --bs-danger-bg-subtle: rgb(46.2, 16.4, 23.6);
  --bs-light-bg-subtle: #1e293b;
  --bs-dark-bg-subtle: rgb(16, 23.5, 41);
  --bs-primary-border-subtle: rgb(59.4, 63, 153);
  --bs-secondary-border-subtle: rgb(42.6, 51, 63);
  --bs-success-border-subtle: rgb(51.6, 98.4, 67.8);
  --bs-info-border-subtle: rgb(7.8, 121.2, 144);
  --bs-warning-border-subtle: rgb(138, 82.8, 58.8);
  --bs-danger-border-subtle: rgb(138.6, 49.2, 70.8);
  --bs-light-border-subtle: #334155;
  --bs-dark-border-subtle: #1e293b;
  --bs-heading-color: inherit;
  --bs-link-color: rgb(161.4, 165, 255);
  --bs-link-hover-color: rgb(180.12, 183, 255);
  --bs-link-color-rgb: 161, 165, 255;
  --bs-link-hover-color-rgb: 180, 183, 255;
  --bs-code-color: rgb(240.6, 151.2, 172.8);
  --bs-highlight-color: #e2e8f0;
  --bs-highlight-bg: rgb(92, 55.2, 39.2);
  --bs-border-color: #1e293b;
  --bs-border-color-translucent: #334155;
  --bs-form-valid-color: rgb(153.6, 200.4, 169.8);
  --bs-form-valid-border-color: rgb(153.6, 200.4, 169.8);
  --bs-form-invalid-color: rgb(234, 133.8, 143.4);
  --bs-form-invalid-border-color: rgb(234, 133.8, 143.4);
}

a {
  color: var(--bs-primary);
  text-decoration: none;
}

a:hover {
  color: rgb(var(--bs-link-hover-color-rgb));
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary); /* Use the primary color variable */
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(91, 67, 130); /* Optional: Custom hover color if desired */
  --bs-btn-hover-border-color: rgb(91, 67, 130);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(91, 67, 130);
  --bs-btn-active-border-color: rgb(91, 67, 130);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary); /* Use the secondary color variable */
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(56.8, 68, 84);
  --bs-btn-hover-border-color: rgb(56.8, 68, 84);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(53.25, 63.75, 78.75);
  --bs-btn-active-border-color: rgb(53.25, 63.75, 78.75);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-success); /* Use the success color variable */
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(68.8, 131.2, 90.4);
  --bs-btn-hover-border-color: rgb(68.8, 131.2, 90.4);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(64.5, 123, 84.75);
  --bs-btn-active-border-color: rgb(64.5, 123, 84.75);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-info {
  --bs-btn-color: var(--bs-body-color); /* Customise as per your body text color */
  --bs-btn-bg: var(--bs-info); /* Use the info color variable */
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: rgb(49.3, 209.95, 242.25);
  --bs-btn-hover-border-color: rgb(49.3, 209.95, 242.25);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: rgb(61.4, 212.6, 243);
  --bs-btn-active-border-color: rgb(61.4, 212.6, 243);
  --bs-btn-disabled-color: var(--bs-body-color);
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}

.btn-warning {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-warning); /* Use the warning color variable */
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: rgb(233.75, 155.55, 121.55);
  --bs-btn-hover-border-color: rgb(233.75, 155.55, 121.55);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: rgb(235, 161.4, 129.4);
  --bs-btn-active-border-color: rgb(235, 161.4, 129.4);
  --bs-btn-disabled-color: var(--bs-body-color);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-danger); /* Use the danger color variable */
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(196.35, 69.7, 100.3);
  --bs-btn-hover-border-color: rgb(196.35, 69.7, 100.3);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(184.8, 65.6, 94.4);
  --bs-btn-active-border-color: rgb(184.8, 65.6, 94.4);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-dark); /* Use the dark color variable */
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(51, 57.8, 73.95);
  --bs-btn-hover-border-color: rgb(51, 57.8, 73.95);
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(63, 69.4, 84.6);
  --bs-btn-active-border-color: rgb(63, 69.4, 84.6);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-dark);
  --bs-btn-disabled-border-color: var(--bs-dark);
}

.min-vh-80 {
  min-height: 80vh !important;
}

table.dataTable thead th {
  white-space: nowrap;
}

/* Parsley */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid #eed3d7;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  color: #b94a48;

  transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

/*Datatables tidy up*/
div.dt-container .dt-paging .dt-paging-button {
  padding: 0;
}
.pagination .page-item .page-link {
  border-radius: 0.05rem;
}

/* themes nice */
.theme-card img {
  border-bottom: 1px solid #e5e5e5;
}
.theme-card:hover {
  transform: translateY(-3px);
  transition: 0.2s ease;
}

.file-item.editable {
  cursor: pointer;
}
.file-item.editable.loadactive,
.file-item.editable:hover {
  background-color: #f9f9f9;
}
.file-item small.text-success {
  font-size: 0.75rem;
}

/* Nav Tweak */
.page-sidebar-mini .aside-menu .nav-section {
  display: none;
}

/* choices update */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: #fff !important;
}

/* Monaco Editor */
.monacoEditor {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

/* Common height presets */
.monacoEditor150h {
  height: 150px;
}
.monacoEditor450h {
  height: 450px;
}
.monacoEditor80vh {
  height: 80vh;
}
.monacoEditor100vh {
  height: 100vh;
}

.border-grey {
  border-color: #ced4da !important;
}

.border-dashed {
  border-style: dashed !important;
}
