:root {
    --cd-primary: #ee681e;
    --cd-primary-dark: #d85a15;
    --cd-dark: #333333;
    --cd-light: #efefef;
    --cd-white: #ffffff;
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

main {
    flex: 1;
}


body {
    background: var(--cd-light);
    color: var(--cd-dark);
}

.card {
    background: var(--cd-white);
}

.page-title {
    color: var(--cd-dark);
}

.btn-primary {
    background-color: var(--cd-primary);
    border-color: var(--cd-primary);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--cd-primary-dark) !important;
        border-color: var(--cd-primary-dark) !important;
    }

.form-control:focus,
.form-select:focus {
    border-color: var(--cd-primary);
    box-shadow: 0 0 0 .2rem rgba(238,104,30,.2);
}

.form-check-input:checked {
    background-color: var(--cd-primary);
    border-color: var(--cd-primary);
}

.form-check-input:focus {
    border-color: var(--cd-primary);
    box-shadow: 0 0 0 .2rem rgba(238,104,30,.2);
}

a {
    color: var(--cd-primary);
}

    a:hover {
        color: var(--cd-primary-dark);
    }

.card {
    border: none;
    border-top: 4px solid var(--cd-primary);
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.08);
}
.form-group {
    margin-bottom: 1.25rem;
}

    .form-group label {
        display: block;
        margin-bottom: .45rem;
        font-size: .92rem;
        font-weight: 600;
        color: #333;
        letter-spacing: .2px;
    }

    .form-group .help-text {
        display: block;
        margin-top: .35rem;
        font-size: .85rem;
        color: #6c757d;
    }
    .form-group label.required::after {
        content: " *";
        color: #dc3545;
        font-weight: 700;
    }
.form-control[readonly] {
    background-color: #efefef;
    color: #666;
    border-color: #d9d9d9;
    cursor: default;
    opacity: 1; /* Override Bootstrap's default opacity */
}