:root {
    --ddb-primary: #1abc9c;
    --ddb-primary-hover: #16a98c;
    --ddb-primary-active: #13977d;
    --ddb-primary-emphasis: #117d69;
    --ddb-primary-subtle: #d1f2ec;
    --ddb-primary-border-subtle: #93e3d3;
    --ddb-text: #2c3e50;
    --ddb-muted: rgba(44, 62, 80, 0.8);
    --ddb-soft: rgba(26, 188, 156, 0.1);
    --ddb-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    --ddb-section-space: 80px;
    --bs-blue: var(--ddb-primary);
    --bs-primary: var(--ddb-primary);
    --bs-primary-rgb: 26, 188, 156;
    --bs-primary-text-emphasis: var(--ddb-primary-emphasis);
    --bs-primary-bg-subtle: var(--ddb-primary-subtle);
    --bs-primary-border-subtle: var(--ddb-primary-border-subtle);
    --bs-link-color: var(--ddb-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--ddb-primary-hover);
    --bs-link-hover-color-rgb: 22, 169, 140;
    --bs-focus-ring-color: rgba(26, 188, 156, 0.25);
}

* {
    letter-spacing: 0;
}

[x-cloak] {
    display: none !important;
}

body {
    color: var(--ddb-text);
    font-family:
        "Fredoka",
        "Inter",
        system-ui,
        -apple-system,
        sans-serif;
    background: #fff;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--ddb-primary);
}

.text-primary {
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity, 1)) !important;
}

.bg-primary {
    background-color: rgba(
        var(--bs-primary-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

.border-primary {
    border-color: rgba(
        var(--bs-primary-rgb),
        var(--bs-border-opacity, 1)
    ) !important;
}

.link-primary {
    color: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: rgba(
        var(--bs-primary-rgb),
        var(--bs-link-underline-opacity, 1)
    ) !important;
}

.link-primary:hover,
.link-primary:focus {
    color: rgba(22, 169, 140, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: rgba(
        22,
        169,
        140,
        var(--bs-link-underline-opacity, 1)
    ) !important;
}

.link-underline-primary {
    text-decoration-color: rgba(
        var(--bs-primary-rgb),
        var(--bs-link-underline-opacity, 1)
    ) !important;
}

.focus-ring-primary {
    --bs-focus-ring-color: rgba(
        var(--bs-primary-rgb),
        var(--bs-focus-ring-opacity)
    );
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ddb-primary);
    --bs-btn-border-color: var(--ddb-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ddb-primary-hover);
    --bs-btn-hover-border-color: var(--ddb-primary-hover);
    --bs-btn-focus-shadow-rgb: 26, 188, 156;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ddb-primary-active);
    --bs-btn-active-border-color: var(--ddb-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(26, 188, 156, 0.45);
    --bs-btn-disabled-border-color: rgba(26, 188, 156, 0.35);
}

.btn-outline-primary {
    --bs-btn-color: var(--ddb-primary);
    --bs-btn-border-color: var(--ddb-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ddb-primary);
    --bs-btn-hover-border-color: var(--ddb-primary);
    --bs-btn-focus-shadow-rgb: 26, 188, 156;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ddb-primary-active);
    --bs-btn-active-border-color: var(--ddb-primary-active);
    --bs-btn-disabled-color: rgba(26, 188, 156, 0.55);
    --bs-btn-disabled-border-color: rgba(26, 188, 156, 0.35);
}

.alert-primary,
.list-group-item-primary {
    --bs-alert-color: var(--ddb-primary-emphasis);
    --bs-alert-bg: var(--ddb-primary-subtle);
    --bs-alert-border-color: var(--ddb-primary-border-subtle);
    --bs-alert-link-color: var(--ddb-primary-emphasis);
    --bs-list-group-color: var(--ddb-primary-emphasis);
    --bs-list-group-bg: var(--ddb-primary-subtle);
    --bs-list-group-border-color: var(--ddb-primary-border-subtle);
    --bs-list-group-action-hover-bg: var(--ddb-primary-border-subtle);
    --bs-list-group-action-active-bg: var(--ddb-primary-border-subtle);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--ddb-primary-emphasis);
    --bs-list-group-active-border-color: var(--ddb-primary-emphasis);
}

.text-bg-primary {
    color: #fff !important;
    background-color: rgba(
        var(--bs-primary-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ddb-primary);
}

.progress-bar {
    background-color: var(--ddb-primary);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow:
        0 0 0 1px #fff,
        0 0 0 0.25rem rgba(26, 188, 156, 0.2);
}

.form-range:focus::-moz-range-thumb {
    box-shadow:
        0 0 0 1px #fff,
        0 0 0 0.25rem rgba(26, 188, 156, 0.2);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--ddb-primary);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--ddb-primary-border-subtle);
}

.form-range::-moz-range-thumb {
    background-color: var(--ddb-primary);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--ddb-primary-border-subtle);
}

.table-primary {
    --bs-table-color: var(--ddb-text);
    --bs-table-bg: var(--ddb-primary-subtle);
    --bs-table-border-color: var(--ddb-primary-border-subtle);
    --bs-table-striped-bg: #c4eee5;
    --bs-table-striped-color: var(--ddb-text);
    --bs-table-active-bg: #b8e9df;
    --bs-table-active-color: var(--ddb-text);
    --bs-table-hover-bg: #bdebe2;
    --bs-table-hover-color: var(--ddb-text);
}

.list-group {
    --bs-list-group-active-bg: var(--ddb-primary);
    --bs-list-group-active-border-color: var(--ddb-primary);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.2);
    --bs-accordion-active-color: var(--ddb-primary-emphasis);
    --bs-accordion-active-bg: var(--ddb-primary-subtle);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23117769' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.pagination {
    --bs-pagination-color: var(--ddb-primary);
    --bs-pagination-hover-color: var(--ddb-primary-hover);
    --bs-pagination-focus-color: var(--ddb-primary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.2);
    --bs-pagination-active-bg: var(--ddb-primary);
    --bs-pagination-active-border-color: var(--ddb-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ddb-primary);
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.2);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--ddb-primary-border-subtle);
    box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.2);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    border-color: var(--ddb-primary);
    background-color: var(--ddb-primary);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2393e3d3'/%3e%3c/svg%3e");
}

.page-container {
    width: 100%;
    max-width: 1140px;
    margin-right: auto;
    margin-left: auto;
}

.btn {
    min-height: 42px;
    border-radius: 10px;
    font-weight: 500;
    padding: 9px 25px;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.2);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary-ddb {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(26, 188, 156, 0.8);
    --bs-btn-border-color: rgba(26, 188, 156, 0.63);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #16a98c;
    --bs-btn-hover-border-color: var(--ddb-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #13977d;
    --bs-btn-active-border-color: #13977d;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(26, 188, 156, 0.45);
    --bs-btn-disabled-border-color: rgba(26, 188, 156, 0.35);
    border-color: rgba(26, 188, 156, 0.63);
    background: rgba(26, 188, 156, 0.8);
    color: #fff;
}

.btn-primary-ddb:hover,
.btn-primary-ddb:focus {
    border-color: var(--ddb-primary);
    background: #16a98c;
    color: #fff;
    box-shadow: 0 8px 18px rgba(26, 188, 156, 0.24);
}

.btn-primary-ddb:active,
.btn-primary-ddb.active,
.btn-primary-ddb:first-child:active {
    border-color: #13977d;
    background: #13977d;
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.22);
}

.btn-soft-primary {
    --bs-btn-color: var(--ddb-primary);
    --bs-btn-bg: rgba(191, 216, 221, 0.63);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #13977d;
    --bs-btn-hover-bg: rgba(26, 188, 156, 0.14);
    --bs-btn-hover-border-color: rgba(26, 188, 156, 0.22);
    --bs-btn-active-color: #117d69;
    --bs-btn-active-bg: rgba(26, 188, 156, 0.22);
    --bs-btn-active-border-color: rgba(26, 188, 156, 0.28);
    border-color: transparent;
    background: rgba(191, 216, 221, 0.63);
    color: var(--ddb-primary);
}

.btn-soft-primary:hover,
.btn-soft-primary:focus {
    border-color: rgba(26, 188, 156, 0.22);
    background: rgba(26, 188, 156, 0.14);
    color: #13977d;
}

.btn-soft-primary:active,
.btn-soft-primary.active,
.btn-soft-primary:first-child:active {
    border-color: rgba(26, 188, 156, 0.28);
    background: rgba(26, 188, 156, 0.22);
    color: #117d69;
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.14);
}

.form-control {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    color: var(--ddb-text);
    font-size: 16px;
    box-shadow: var(--ddb-shadow);
}

.form-control::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

@media (min-width: 1600px) {
    .page-container {
        max-width: 1320px;
    }
}

@media (max-width: 1399.98px) {
    .page-container {
        max-width: 1200px;
    }

    .btn {
        padding-right: 22px;
        padding-left: 22px;
    }
}

@media (max-width: 1199.98px) {
    :root {
        --ddb-section-space: 72px;
    }

    .page-container {
        max-width: 960px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --ddb-section-space: 64px;
    }

    .page-container {
        max-width: 720px;
    }

    .btn {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 767.98px) {
    .page-container {
        max-width: 540px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --ddb-section-space: 48px;
    }

    .page-container {
        max-width: none;
    }
}