:root {
    --bs-primary: #1a2a6c;
    --bs-primary-rgb: 26, 42, 108;
    --bs-primary-hover: #2d5b9a;
    --bs-secondary: #708238;
    --bs-secondary-rgb: 112, 130, 56;
    --bs-secondary-hover: #8ca452;
    --bs-success: #36973a;
    --bs-success-rgb: 54, 151, 58;
    --bs-success-hover: #4caf50;
    --bs-info: #0f52ba;
    --bs-info-rgb: 15, 82, 186;
    --bs-info-hover: #2c6dd8;
    --bs-warning: #e0c187;
    --bs-warning-rgb: 224, 193, 135;
    --bs-warning-hover: #f0d6a4;
    --bs-danger: #bc3549;
    --bs-danger-rgb: 188, 53, 73;
    --bs-danger-hover: #df3750;
    --bs-light: #fdf6e3;
    --bs-light-rgb: 253, 246, 227;
    --bs-light-hover: #fffff5;
    --bs-dark: #2f2f2f;
    --bs-dark-rgb: 47, 47, 47;
    --bs-dark-hover: #4b4b4b;
    --bs-indigo: #675aa9;
    --bs-indigo-rgb: 103, 90, 169;
    --bs-red: #7b1e3a;
    --bs-red-rgb: 123, 30, 58;
    --bs-red-hover: #a13a5b;
    --bs-orange: #ff8621;
    --bs-orange-rgb: 255, 134, 33;
    --bs-orange-hover: #f17202;
    --bs-yellow: #ffc561;
    --bs-yellow-rgb: 255, 197, 97;
    --bs-yellow-hover: #fdba45;
    --bs-green: #1abc9c;
    --bs-green-rgb: 22, 188, 156;
    --bs-green-hover: #14ae90;
    --bs-teal: #02a8b5;
    --bs-teal-rgb: 2, 168, 181;
    --bs-cyan: #4fc6e1;
    --bs-cyan-rgb: 79, 189, 225;
    --bs-cyan-hover: #49b9d3;
    --bs-white: #fff;
    --bs-white-rgb: 255, 255, 255;
    --bs-gray: #98a6ad;
    --bs-gray-rgb: 152, 166, 173;
    --bs-gray-hover: #838f95;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f3f7f9;
    --bs-gray-200: #f7f7f7;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #98a6ad;
    --bs-gray-700: #6c757d;
    --bs-gray-800: #343a40;
    --bs-gray-900: #323a46;
    --bs-purple: #6658dd;
    --bs-purple-rgb: 102, 88, 221;
    --bs-purple-hover: #5f51cf;
    --bs-pink: #f672a7;
    --bs-pink-rgb: 246, 114, 167;
    --bs-blue: #3d8aff;
    --bs-blue-rgb: 61, 138, 138;
    --bs-blue-hover: #1f7aff;
    --bs-midlight-blue: #0f2a51;
    --bs-midlight-blue-rgb: 15, 42, 81;
    --bs-midlight-blue-hover: #0a2143;
    --bs-black: #000000;
    --bs-black-rgb: 0, 0, 0;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-size: 15px;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #444444;
    --bs-body-rgb: 68, 68, 68;
    --bs-body-bg: #ffffff;
    --bs-control-bg: #ffffff;
    --bs-text-color: #222222;
    --bs-shadow-rgb: 154, 161, 171;
    --bs-shadow-rgba: 154, 161, 171, 0.2;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 7px;
    --bs-border-radius-xs: 5px;
    --bs-btn-height: 36px;
    --bs-btn-height-sm: 32px;
    --bs-btn-height-xs: 28px;
    --bs-control-height: 36px;
    --bs-control-height-sm: 32px;
    --bs-control-height-xs: 28px;
}

form { margin: 0; }
a { text-decoration: none; transition: all 0.3s; }
button { text-decoration: none; transition: all 0.3s; border: 0; outline: none; }

.btn {
    --bs-btn-padding-x: 10px;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 15px;
    --bs-btn-line-height: 100%;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-border-width: 0;
    --bs-btn-font-family: var(--bs-body-font-family);
    height: var(--bs-btn-height);
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    white-space: nowrap;
    line-height: normal;
}

.btn-group-sm > .btn, .btn-sm {
    --bs-btn-font-size: 14px;
    height: var(--bs-btn-height-sm);
}

.btn-group-xs > .btn, .btn-xs {
    --bs-btn-font-size: 12px;
    --bs-btn-border-radius: var(--bs-border-radius-xs);
    height: var(--bs-btn-height-xs);
}

.btn-primary,
.btn.primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-hover);
    --bs-btn-active-border-color: var(--bs-primary-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-primary-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-orange-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-primary.outline,
.btn.primary.outline {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-border-width: 1px;
}

.btn-secondary,
.btn.secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary-hover);
    --bs-btn-active-border-color: var(--bs-secondary-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-secondary-rgb), 0.3);
    --bs-btn-disabled-border-color: rgba(var(--bs-secondary-rgb), 0.3);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}
.btn-secondary.outline,
.btn.secondary.outline{
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-border-width: 1px;
}

.btn-success,
.btn.success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success-hover);
    --bs-btn-hover-border-color: var(--bs-success-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-success-hover);
    --bs-btn-active-border-color: var(--bs-success-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-success-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-success-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-success.outline,
.btn.success.outline {
    --bs-btn-color: var(--bs-success);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-border-width: 1px;
}

.btn-danger,
.btn.danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger-hover);
    --bs-btn-hover-border-color: var(--bs-danger-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-danger-hover);
    --bs-btn-active-border-color: var(--bs-danger-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-danger-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-danger-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
.btn-danger.outline,
.btn.danger.outline {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-border-width: 1px;
}

.btn-info,
.btn.info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-info-hover);
    --bs-btn-hover-border-color: var(--bs-info-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-info-hover);
    --bs-btn-active-border-color: var(--bs-info-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-info-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-info-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}
.btn-info.outline,
.btn.info.outline {
    --bs-btn-color: var(--bs-info);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-border-width: 1px;
}

.btn-warning,
.btn.warning {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-warning-hover);
    --bs-btn-hover-border-color: var(--bs-warning-hover);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-warning-hover);
    --bs-btn-active-border-color: var(--bs-warning-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: rgba(var(--bs-warning-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-warning-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}
.btn-warning.outline,
.btn.warning.outline {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-border-width: 1px;
}

.btn-dark,
.btn.dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-dark-hover);
    --bs-btn-hover-border-color: var(--bs-dark-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-dark-hover);
    --bs-btn-active-border-color: var(--bs-dark-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-dark-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-dark-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}
.btn-dark.outline,
.btn.dark.outline {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-dark-hover);
    --bs-btn-border-width: 1px;
}

.btn-light,
.btn.light {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-light-hover);
    --bs-btn-hover-border-color: var(--bs-light-hover);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-light-hover);
    --bs-btn-active-border-color: var(--bs-light-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: rgba(var(--bs-light-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-light-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
}
.btn-light.outline,
.btn.light.outline {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-light-hover);
    --bs-btn-border-width: 1px;
}

.btn.gray {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-gray-300);
    --bs-btn-border-color: var(--bs-gray-300);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-gray-400);
    --bs-btn-hover-border-color: var(--bs-gray-400);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-gray-400);
    --bs-btn-active-border-color: var(--bs-gray-400);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: rgba(var(--bs-gray-rgb), 0.3);
    --bs-btn-disabled-border-color: rgba(var(--bs-gray-rgb), 0.3);
    --bs-btn-focus-shadow-rgb: var(--bs-gray-rgb);
}
.btn.gray.outline {
    --bs-btn-color: var(--bs-gray-600);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-gray-400);
    --bs-btn-border-width: 1px;
}

.btn.green {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-green);
    --bs-btn-border-color: var(--bs-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-green-hover);
    --bs-btn-hover-border-color: var(--bs-green-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-green-hover);
    --bs-btn-active-border-color: var(--bs-green-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-green-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-green-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-green-rgb);
}
.btn.green.outline {
    --bs-btn-color: var(--bs-green);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-green-hover);
    --bs-btn-border-width: 1px;
}

.btn.red {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-red);
    --bs-btn-border-color: var(--bs-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-red-hover);
    --bs-btn-hover-border-color: var(--bs-red-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-red-hover);
    --bs-btn-active-border-color: var(--bs-red-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-red-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-red-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-red-rgb);
}
.btn.red.outline {
    --bs-btn-color: var(--bs-red);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-red-hover);
    --bs-btn-border-width: 1px;
}

.btn.yellow {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-yellow);
    --bs-btn-border-color: var(--bs-yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-yellow-hover);
    --bs-btn-hover-border-color: var(--bs-yellow-hover);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-yellow-hover);
    --bs-btn-active-border-color: var(--bs-yellow-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: rgba(var(--bs-yellow-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-orange-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-yellow-rgb);
}
.btn.yellow.outline {
    --bs-btn-color: var(--bs-yellow);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-yellow-hover);
    --bs-btn-border-width: 1px;
}

.btn.cyan {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-cyan);
    --bs-btn-border-color: var(--bs-cyan);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-cyan-hover);
    --bs-btn-hover-border-color: var(--bs-green-hover);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-cyan-hover);
    --bs-btn-active-border-color: var(--bs-cyan-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: rgba(var(--bs-cyan-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-cyan-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-cyan-rgb);
}
.btn.cyan.outline {
    --bs-btn-color: var(--bs-cyan);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-cyan-hover);
    --bs-btn-border-width: 1px;
}

.btn.orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-orange-hover);
    --bs-btn-hover-border-color: var(--bs-orange-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-orange-hover);
    --bs-btn-active-border-color: var(--bs-orange-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-orange-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-orange-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-orange-rgb);
}
.btn.orange.outline {
    --bs-btn-color: var(--bs-orange);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-orange-hover);
    --bs-btn-border-width: 1px;
}

.btn.blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-blue);
    --bs-btn-border-color: var(--bs-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-blue-hover);
    --bs-btn-hover-border-color: var(--bs-blue-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-blue-hover);
    --bs-btn-active-border-color: var(--bs-blue-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-blue-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-blue-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-blue-rgb);
}
.btn.blue.outline {
    --bs-btn-color: var(--bs-blue);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-blue-hover);
    --bs-btn-border-width: 1px;
}

.btn.midnight-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-midlight-blue);
    --bs-btn-border-color: var(--bs-midlight-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-midlight-blue-hover);
    --bs-btn-hover-border-color: var(--bs-midlight-blue-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-midlight-blue-hover);
    --bs-btn-active-border-color: var(--bs-midlight-blue-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-midlight-blue-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-midlight-blue-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-midlight-blue-rgb);
}
.btn.midnight-blue.outline {
    --bs-btn-color: var(--bs-midlight-blue);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-midlight-blue);
    --bs-btn-border-width: 1px;
}

.btn.purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-purple);
    --bs-btn-border-color: var(--bs-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-purple-hover);
    --bs-btn-hover-border-color: var(--bs-purple-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-purple-hover);
    --bs-btn-active-border-color: var(--bs-purple-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--bs-purple-rgb), 0.6);
    --bs-btn-disabled-border-color: rgba(var(--bs-purple-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-purple-rgb);
}
.btn.purple.outline {
    --bs-btn-color: var(--bs-purple);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-purple-hover);
    --bs-btn-border-width: 1px;
}

.lh-md { line-height: 1.35 !important; }

.fs-6 { font-size: 1.05rem !important; }
.fs-7 { font-size: 0.9rem !important; }
.fs-8 { font-size: 0.8rem !important; }
.fs-9 { font-size: 0.7rem !important; }

.alert {
    --bs-alert-border: none;
    --bs-alert-padding-x: 10px;
    --bs-alert-padding-y: 10px;
}

.modal {
    --bs-modal-border-radius: 10px;
}

.table {
    --bs-table-bg: #ffffff;
    --bs-table-border-color: #eeeeee;
    --bs-table-hover-bg: #f6f6f6;
    margin: 0; font-size: 15px; white-space: nowrap;
}
.table tr > th { font-weight: 500; vertical-align: middle; padding: 12px 12px; color: #333;}
.table tr > td { padding: 12px 12px; vertical-align: middle;}
.table tr > th.table_index,
.table tr > td.table_index { padding-right: 0; padding-top: 0; padding-bottom: 0; width: 20px;}
.table tr > th.table_checkbox,
.table tr > td.table_checkbox { padding-right: 0; padding-top: 0; padding-bottom: 0; width: 30px; text-align: center;}
.table tr > th.table_action,
.table tr > td.table_action { padding-right: 0; padding-top: 0; padding-bottom: 0; width: 30px; text-align: center;}
.table tr > th.position,
.table tr > td.position { padding-top: 0; padding-bottom: 0; width: 80px; text-align: center;}
.table tr > td.position > input { text-align: center; }
.table tr > th.image,
.table tr > td.image { padding-top: 2px; padding-bottom: 2px; width: 60px; }
.table tr > th.is_active,
.table tr > td.is_active { width: 30px; text-align: center;}
.table tr > th.sort { cursor: pointer;}
.table tr > th.sort:after { content: "\f883"; font-family: var(--font-awesome); font-weight: 400; color: #e9e9e9; margin-left: 5px;}
.table tr > th.sort.asc:after { content: "\f15e"; color: var(--bs-orange);}
.table tr > th.sort.desc:after { content: "\f881"; color: var(--bs-orange);}
.table .action-group { display: flex; gap: 5px; align-items: center;}
.table .action-group .btn-group .dropdown-toggle::after { display: none; }
.table .action-group .btn { padding: 0; min-width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px;}

.dropdown-menu {
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-link-color: #444444;
    --bs-dropdown-link-hover-color: #222222;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 5px;
    --bs-dropdown-border-radius: 5px;
    font-size: var(--bs-body-font-size);
    box-shadow: 0 0 35px 0 rgba(var(--bs-shadow-rgba));
    border: 0;
    border-radius: var(--bs-dropdown-border-radius);
    animation: DropDownMenu 0.3s ease forwards;
    top: 100% !important;
}
.dropdown-menu[data-popper-placement="top-start"] {
    top: auto !important;
    bottom: 100% !important;
    animation: DropUpMenu 0.3s ease forwards;
}
.dropdown-menu a { padding: 7px 10px; display: flex; align-items: center; font-weight: var(--bs-body-font-weight); color: var(--bs-dropdown-link-color); margin: 0 5px; line-height: 1.25; border-radius: var(--bs-dropdown-border-radius);}
.dropdown-menu a:hover { background-color: rgba(var(--bs-secondary-rgb), 0.1); color: var(--bs-dropdown-link-hover-color);}
.dropdown-menu a > i { min-width: 24px;}
.dropdown-menu .dropdown-header { padding: 5px 15px; color: var(--bs-body-color); font-size: 12px;}

.dropdown-item.active,
.dropdown-item:active { color: var(--bs-body-color); }

.dropdown-divider { border-color: #ebebeb; margin: 5px 0;}

.form-check { margin: 0; padding: 0; min-height: 0; display: inline-flex; align-items: center; gap: 5px;}
.form-check-input {
    --bs-form-check-bg: #ffffff;
    width: 18px;height: 18px;border: 1px solid #cccccc;
}
.form-check-input:focus { box-shadow: none; border-color: rgba(var(--bs-primary-rgb), 0.2);}
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check .form-check-input { float: none; margin: 0; }
.form-check .form-check-label { line-height: normal; }

.form-radio { display: flex; align-items: flex-start; column-gap: 20px; min-height: var(--bs-control-height);}
.form-radio .form-check { margin-bottom: 5px;}
.form-radio.list { flex-direction: column;}
.form-radio.list .form-check { width: 100%;}

.form-checkbox { display: flex; align-items: flex-start; column-gap: 20px; min-height: var(--bs-control-height);}
.form-checkbox .form-check { margin-bottom: 5px;}
.form-checkbox.list { flex-direction: column;}
.form-checkbox.list .form-check { width: 100%;}

.form-group .form-label { margin-bottom: 5px; line-height: 1.2; font-size: 15px; font-weight: 400;}
.form-group .form-label .required { color: var(--bs-danger); font-weight: bold; margin-left: 5px;}
.form-group.is-invalid .form-label { color: var(--bs-danger);}
.form-group.is-invalid .form-control,
.form-group.is-invalid .form-select,
.form-group.is-invalid .form-check-input,
.form-group.is-invalid .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content,
.form-group.is-invalid .ck.ck-editor .ck-editor__main,
.form-group.is-invalid .selectx-selected { border-color: var(--bs-danger);}

.input-group .image img { height: var(--bs-btn-height); cursor: zoom-in; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); }

.form-control { background-color: var(--bs-control-bg); padding: 0 10px; line-height: 1; height: var(--bs-control-height); font-size: 14px;}
.form-control:focus { box-shadow: none; background-color: var(--bs-control-bg); border-color: #bbbbbb; }
.form-control::placeholder { color: #bbbbbb; opacity: 1;}
textarea.form-control { padding-top: 10px; padding-bottom: 10px; min-height: 60px; height: auto;}
.form-control-sm { height: var(--bs-control-height-sm); padding: 0 5px; }
[type="number"].form-control-sm { padding: 0 0 0 5px;}
.form-control-xs { height: var(--bs-control-height-xs); padding: 0 5px; }
[type="number"].form-control-xs { padding: 0 0 0 5px;}
.form-control:disabled { background-color: #f8f8f8; }
.form-control:read-only { background-color: #f8f8f8; }

.form-select { background-color: var(--bs-control-bg); padding: 0 25px 0 10px; line-height: 1; height: var(--bs-control-height); font-size: 14px; background-position: right 6px center; background-size: 14px 10px;}
.form-select:focus { box-shadow: none; background-color: var(--bs-control-bg); border-color: #bbbbbb; }

.pagination {
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
    --bs-pagination-border-width: 0;
    --bs-pagination-color: #666;
    --bs-pagination-hover-color: var(--bs-primary);
    margin: 0; display: flex; justify-content: center; align-items: center; gap: 3px;
}
.page-item:not(:first-child) .page-link { margin: 0;}
.page-link { height: 30px; min-width: 30px; padding: 0 5px; display: inline-flex; justify-content: center; align-items: center; border-radius: var(--bs-border-radius); font-weight: 500; font-size: 15px;}
.page-link:hover,
.page-link:focus { background-color: #f6f6f6; color: #333; box-shadow: none;}
.active > .page-link, .page-link.active {
    background-color: var(--bs-primary);
    color: #ffffff;
    min-width: 30px;
}

.text-blue { color: var(--bs-blue); }
.text-black-10 { --bs-text-opacity: 1;color: rgba(0, 0, 0, .1) !important }
.text-black-20 { --bs-text-opacity: 1;color: rgba(0, 0, 0, .2) !important }
.text-black-30 { --bs-text-opacity: 1;color: rgba(0, 0, 0, .3) !important }
.text-black-40 { --bs-text-opacity: 1;color: rgba(0, 0, 0, .4) !important }
.text-black-50 { --bs-text-opacity: 1;color: rgba(0, 0, 0, .5) !important }
.text-black-60 { --bs-text-opacity: 1;color: rgba(0, 0, 0, .6) !important }
.text-black-70 { --bs-text-opacity: 1;color: rgba(0, 0, 0, .7) !important }
.text-black-80 { --bs-text-opacity: 1;color: rgba(0, 0, 0, .8) !important }
.text-black-90 { --bs-text-opacity: 1;color: rgba(0, 0, 0, .9) !important }

.block { background: #fff; border-radius: var(--bs-border-radius); margin-bottom: 16px; }
.block .block-header { padding: 0 16px; min-height: 50px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.block .block-header .title { font-size: 18px; font-weight: 500; }
.block .block-header .actions { display: flex; align-items: center; gap: 8px;}
.block .block-header .actions .btn { height: 34px; }
.block .block-filter { padding: 8px; min-height: 50px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.block .block-body { padding: 0;}
.block .block-content { padding: 16px;}
.block .block-footer { padding: 12px 16px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }

.ratio-9x16 {position: relative;width: 100%;padding-bottom: 177.77%;height: 0;}
.ratio-9x16 iframe {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}

.p-10 { padding: 10px !important; }
.p-15 { padding: 15px !important; }
.p-20 { padding: 20px !important; }
.p-25 { padding: 25px !important; }
.p-30 { padding: 30px !important; }
.p-35 { padding: 35px !important; }
.p-40 { padding: 40px !important; }
.p-45 { padding: 45px !important; }
.p-50 { padding: 50px !important; }
.px-10 { padding: 0 10px !important; }
.px-15 { padding: 0 15px !important; }
.px-20 { padding: 0 20px !important; }
.px-25 { padding: 0 25px !important; }
.px-30 { padding: 0 30px !important; }
.px-35 { padding: 0 35px !important; }
.px-40 { padding: 0 40px !important; }
.px-45 { padding: 0 45px !important; }
.px-50 { padding: 0 50px !important; }
.py-10 { padding: 10px 0 !important; }
.py-15 { padding: 15px 0 !important; }
.py-20 { padding: 20px 0 !important; }
.py-25 { padding: 25px 0 !important; }
.py-30 { padding: 30px 0 !important; }
.py-35 { padding: 35px 0 !important; }
.py-40 { padding: 40px 0 !important; }
.py-45 { padding: 45px 0 !important; }
.py-50 { padding: 50px 0 !important; }

.w-150 { width: 150px; max-width: 100%; }
.w-200 { width: 200px; max-width: 100%; }
.w-250 { width: 250px; max-width: 100%; }
.w-300 { width: 300px; max-width: 100%; }
.w-400 { width: 400px; max-width: 100%; }
.w-500 { width: 500px; max-width: 100%; }
.w-600 { width: 600px; max-width: 100%; }
.w-700 { width: 700px; max-width: 100%; }
.w-800 { width: 800px; max-width: 100%; }
.w-900 { width: 800px; max-width: 100%; }
.w-1000 { width: 1000px; max-width: 100%; }
.w-1100 { width: 1100px; max-width: 100%; }
.w-1200 { width: 1200px; max-width: 100%; }
.w-1300 { width: 1300px; max-width: 100%; }
.w-1400 { width: 1400px; max-width: 100%; }
.w-1500 { width: 1500px; max-width: 100%; }
.w-1600 { width: 1600px; max-width: 100%; }
.min-200 { min-width: 200px; max-width: 100%; }
.min-250 { min-width: 250px; max-width: 100%; }
.min-300 { min-width: 300px; max-width: 100%; }
.min-400 { min-width: 400px; max-width: 100%; }
.min-500 { min-width: 500px; max-width: 100%; }
.min-600 { min-width: 600px; max-width: 100%; }
.min-700 { min-width: 700px; max-width: 100%; }
.min-800 { min-width: 800px; max-width: 100%; }
.min-900 { min-width: 800px; max-width: 100%; }
.min-1000 { min-width: 100px; max-width: 100%; }
.min-1100 { min-width: 1100px; max-width: 100%; }
.min-1200 { min-width: 1200px; max-width: 100%; }
.min-1300 { min-width: 1300px; max-width: 100%; }
.min-1400 { min-width: 1400px; max-width: 100%; }
.min-1500 { min-width: 1500px; max-width: 100%; }
.min-1600 { min-width: 1600px; max-width: 100%; }

.spinner { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; border-radius: 50%; margin: -20px 0 0 -20px; font-size: 10px; border-top: 5px solid #dee2e6; border-right: 5px solid #dee2e6; border-bottom: 5px solid #dee2e6; border-left: 5px solid var(--bs-primary); transform: translateZ(0); animation: SpinnerAnimation 1.1s infinite linear; }

.loading { overflow: hidden; position: relative; }
.loading:before { content: ""; background-color: rgba(255, 255, 255, 0.3); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; }
.loading:after { content: ""; width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; border-radius: 50%; margin: -20px 0 0 -20px; font-size: 10px; border-top: 5px solid #dee2e6; border-right: 5px solid #dee2e6; border-bottom: 5px solid #dee2e6; border-left: 5px solid var(--bs-primary); transform: translateZ(0); animation: SpinnerAnimation 1.1s infinite linear; z-index: 9999; }

.page-loading { overflow: hidden; position: relative; }
.page-loading:before { content: ""; background-color: rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; }
.page-loading:after { content: ""; width: 40px; height: 40px; position: fixed; left: 50%; top: 50%; border-radius: 50%; margin: -20px 0 0 -20px; font-size: 10px; border-top: 5px solid #dee2e6; border-right: 5px solid #dee2e6; border-bottom: 5px solid #dee2e6; border-left: 5px solid var(--bs-primary); transform: translateZ(0); animation: SpinnerAnimation 1.1s infinite linear; z-index: 9999; }

.box-loading { overflow: hidden; position: relative; }
.box-loading:before { content: ""; background-color: rgba(255, 255, 255, 0.3); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; }
.box-loading:after { content: ""; width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; border-radius: 50%; margin: -20px 0 0 -20px; font-size: 10px; border-top: 5px solid #dee2e6; border-right: 5px solid #dee2e6; border-bottom: 5px solid #dee2e6; border-left: 5px solid var(--bs-primary); transform: translateZ(0); animation: SpinnerAnimation 1.1s infinite linear; z-index: 9999; }

.disabled { pointer-events: none; opacity: 0.6; }

[data-fancybox] { cursor: zoom-in;}

/* Animations */
@keyframes DropDownMenu {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0) }
}
@keyframes DropUpMenu {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0) }
}
@keyframes SlideDownMenu {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes SlideRightMenu {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes SpinnerAnimation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}