/* Colors */
:root {
  --primary-color: #3c7292;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #f5222d;
  --info-color: #90a9cd;
  --white: #ffffff;
  --black: #000000;
  --gray-1: #f5f5f5;
  --gray-2: #e5e5e5;
  --gray-3: #d9d9d9;
  --gray-4: #bfbfbf;
  --gray-5: #999999;
  --gray-6: #434343;
  --gray-7: #262626;
  --gray-8: #1f1f1f;
  --gray-9: #141414;
}

/* Typography */
:root {
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-sm: 12px;
  --line-height-base: 1.5;
  --heading-color: var(--gray-8);
  --text-color: var(--gray-7);
  --text-color-secondary: var(--gray-5);
  --font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif; 
}

/* Spacing */
:root {
  --padding-md: 16px;
  --padding-sm: 12px;
  --margin-md: 16px;
  --margin-sm: 12px;
  --gutter-width: 0;
}

/* Border radius and shadow */
:root {
  --border-radius-base: 4px;
  --box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Button */
.ant-btn {
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: var(--border-radius-base);
}

.ant-btn-default {
  background-color: var(--gray-2);
  color: var(--gray-7);
  border: 1px solid var(--gray-3);
}

/* Input */
.ant-input {
  background-color: var(--white);
  border: 1px solid var(--gray-3);
  padding: var(--padding-sm);
  border-radius: var(--border-radius-base);
}

/* Select */
.ant-select {
  background-color: var(--white);
  border: 1px solid var(--gray-3);
  padding: var(--padding-sm);
  border-radius: var(--border-radius-base);
}

/* Table */
.ant-table-header {
  background-color: var(--gray-2);
  color: var(--gray-7);
}

.ant-table-row:hover {
  background-color: var(--gray-1);
}

.ant-table-row:hover td {
  background-color: var(--gray-1);
}

/* Tabs */
.ant-tabs-card-head {
  background-color: var(--gray-2);
}

.ant-tabs-ink-bar {
  background-color: var(--primary-color);
}

/* Menu */
.ant-menu-dark {
  background-color: var(--gray-8);
}

.ant-menu-dark.ant-menu-item-selected {
  background-color: var(--primary-color);
}

/* Popover */
.ant-popover {
  background-color: var(--white);
  border: 1px solid var(--gray-3);
  padding: var(--padding-sm);
  border-radius: var(--border-radius-base);
}

/* Modal */
.ant-modal-header {
  background-color: var(--gray-2);
  padding: var(--padding-md);
  border-bottom: 1px solid var(--gray-3);
}

.ant-modal-footer {
  background-color: var(--gray-2);
  padding: var(--padding-md);
  border-top: 1px solid var(--gray-3);
}

/* Tooltip */
.ant-tooltip {
  background-color: rgba(0, 0, 0, 0.75);
  color: var(--white);
  padding: var(--padding-sm);
  border-radius: var(--border-radius-base);
}

/* Progress */
.ant-progress-default {
  background-color: var(--primary-color);
}

/* Skeleton */
.ant-skeleton {
  background-color: var(--gray-2);
}

/* Timeline */
.ant-timeline {
  color: var(--primary-color);
}

/* Pagination */
.ant-pagination-item-active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Card */
.ant-card-head {
  background-color: var(--gray-2);
  padding: var(--padding-md);
  border-bottom: 1px solid var(--gray-3);
}

.ant-card-actions {
  background-color: var(--gray-1);
  padding: var(--padding-md);
}

/* Drawer */
.ant-drawer-header {
  padding: var(--padding-md);
  background-color: var(--gray-2);
  border-bottom: 1px solid var(--gray-3);
}

.ant-drawer-body {
  padding: var(--padding-md);
}

/* Alert */
.ant-alert-success {
  border-color: var(--success-color);
  background-color: lighten(var(--success-color), 40%);
}

.ant-alert-info {
  border-color: var(--info-color);
  background-color: lighten(var(--info-color), 40%);
}

.ant-alert-warning {
  border-color: var(--warning-color);
  background-color: lighten(var(--warning-color), 40%);
}

.ant-alert-error {
  border-color: var(--error-color);
  background-color: lighten(var(--error-color), 40%);
}

/* Badge */
.ant-badge {
  background-color: var(--white);
  color: var(--primary-color);
  padding: var(--padding-sm);
  border-radius: var(--border-radius-base);
}

/* Collapse */
.ant-collapse-header {
  padding: var(--padding-md);
  background-color: var(--gray-2);
  border-bottom: 1px solid var(--gray-3);
}

.ant-collapse-content {
  padding: var(--padding-md);
  background-color: var(--white);
}

/* Carousel */
.ant-carousel-dot {
  width: 16px;
  height: 3px;
  border-radius: var(--border-radius-base);
  background-color: var(--gray-3);
}

.ant-carousel-dot-active {
  background-color: var(--primary-color);
}

/* Cascader */
.ant-cascader-dropdown {
  background-color: var(--white);
  border: 1px solid var(--gray-3);
  padding: var(--padding-sm);
  border-radius: var(--border-radius-base);
}

/* DatePicker */
.ant-calendar-date {
  padding: var(--padding-sm);
  border-radius: var(--border-radius-base);
}

.ant-calendar-date:hover {
  background-color: var(--gray-2);
}

.ant-calendar-date-active {
  background-color: var(--primary-color);
}

/* Descriptions */
.ant-descriptions {
  background-color: var(--white);
  padding: var(--padding-md);
  border: 1px solid var(--gray-3);
}

/* Empty */
.ant-empty {
  font-size: var(--font-size-base);
  color: var(--text-color-secondary);
}

/* Form */
.ant-form-item-label {
  font-size: var(--font-size-base);
  color: var(--heading-color);
  font-weight: normal;
}

/* Grid */
.ant-grid {
  grid-template-columns: repeat(24, 1fr);
  grid-gap: 0;
}

/* List */
.ant-list-header {
  background-color: var(--white);
  padding: var(--padding-md);
  border-bottom: 1px solid var(--gray-3);
}

.ant-list-footer {
  background-color: var(--white);
  padding: var(--padding-md);
  border-top: 1px solid var(--gray-3);
}

/* Mentions */
.ant-mentions-dropdown {
  background-color: var(--white);
  border: 1px solid var(--gray-3);
  padding: var(--padding-sm);
  border-radius: var(--border-radius-base);
}

/* Message */
.ant-message-notice {
  padding: var(--padding-md);
  background-color: var(--white);
  border: 1px solid var(--gray-3);
}

/* Notification */
.ant-notification {
  background-color: var(--white);
  padding: var(--padding-md);
  border: 1px solid var(--gray-3);
}

/* PageHeader */
.ant-page-header {
  padding: var(--padding-md);
  background-color: var(--white);
  border-bottom: 1px solid var(--gray-3);
}

/* Popconfirm */
.ant-popconfirm {
  background-color: var(--white);
  border: 1px solid var(--gray-3);
  padding: var(--padding-sm);
  border-radius: var(--border-radius-base);
}

/* Result */
.ant-result-title {
  font-size: 24px;
}

.ant-result-subtitle {
  font-size: 14px;
}

/* Statistic */
.ant-statistic-title {
  font-size: 14px;
}

.ant-statistic-content {
  font-size: 24px;
}

/* Steps */
.ant-steps-nav {
  background-color: var(--white);
  padding: var(--padding-md);
  border-bottom: 1px solid var(--gray-3);
}

.ant-steps-icon {
  font-size: 32px;
}

/* Switch */
.ant-switch {
  background-color: var(--gray-3);
  border: 1px solid var(--gray-3);
}

.ant-switch-checked {
  background-color: var(--primary-color);
}

/* Transfer */
.ant-transfer-list {
  height: 200px;
  background-color: var(--white);
  border: 1px solid var(--gray-3);
}

.ant-transfer-item:hover {
  background-color: var(--gray-2);
}

.ant-transfer-item-selected:hover {
  background-color: darken(var(--primary-color), 5%);
}

/* Tree */
.ant-tree-title {
  font-size: var(--font-size-base);
  color: var(--heading-color);
}

.ant-tree-node-selected {
  background-color: var(--primary-color);
}

/* Treeselect */
.ant-treeselect-dropdown {
  height: 200px;
  background-color: var(--white);
  border: 1px solid var(--gray-3);
}

/* Upload */
.ant-upload-actions {
  color: var(--text-color-secondary);
}

.ant-upload-picture-card {
  width: 104px;
  height: 104px;
  border: 1px dashed var(--gray-3);
}

/* Global styles */
body {
  background-color: #ffffff;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.kasaka-banner {
  width: 100%;
  height: auto;
  max-width: 600px;
}

.toggle-button:hover {
  background-color: #f0f0f0;
}