:root {
    --primary-color: #3a5433;
    --primary-hover: #2d4127;
    --primary-light: #4a6943;
    --primary-lighter: #e8f0e6;
    --primary-dark: #253621;
}

    main .search, main .table-responsive {
        background-color: #f9f9f9;
        padding: 1rem 2.5rem;
        border-radius: 1.5rem;
        margin-bottom: 3.75rem;
        background-color: var(--bs-body-bg);
    }
.saveContainer {
    text-align: center;
    margin-top: 3.75rem;
}
.hide{
    display:none;
}
main .search .SearchBtn {
    margin: 0 auto;
    display: block;
}
.operations i {
    font-size: 1.5rem;
}
.row > * {
    margin-bottom: 1rem;
}
.section > b {
    position: relative;
    padding-bottom: 0.5rem;
    width: 100%;
    display: inline-block;
}

    .section > b::after {
        content: '';
        position: absolute;
        bottom: 50%;
        margin: 0 5px;
        height: 1px;
        background-color: #b2b5b9;
        width: -webkit-fill-available;
    }
.borderlessBtn{
    border:none;
    background-color:transparent;
}
.form-check-label{
    color:unset;
}
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    text-align:center;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    text-align: center;
}
.clickable {
    cursor: pointer;
}
    .clickable svg {
        fill: var(--bs-text-muted);
    }
    svg {
        width: 20px;
        height: 20px;
    }
.oneImage {
    text-align: center;
}
    .oneImage .imgWrapper{
        position:relative;
    }
    .oneImage .changeImgBtn {
        position: absolute;
        left: 88%;
        top: 2px;
    }
    .oneImage .deleteImgBtn {
        position: absolute;
        left: 88%;
        top: 81%;
    }

    .oneImage .Rectangle {
        position: relative;
        overflow: hidden;
    }

        .oneImage .Rectangle .nameWrapper {
            position: absolute;
            padding-top: 0.5rem;
            width: 100%;
        }

    .oneImage .Circle .imgWrapper img {
        width: 7rem;
        height: 7rem;
        border-radius: 50%;
    }

    .oneImage .Rectangle .imgWrapper img {
        max-width: 100%;
        max-height: 12rem;
    }

    .oneImage .operations button, .oneImage .operations button :focus {
        background-color: transparent;
        border: none;
        outline: none;
        text-decoration: underline;
        color: #212529;
    }
.nav-tabs .nav-link {
    cursor: pointer;
    font-size: 1.2rem;
}
@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width: 85%;
    }
}
.tab-pane{
    padding-top:1rem;
}
.qrCode {
    position: absolute;
    height: 8.4rem !important;
    right: 1rem;
    z-index: 1;
}
.Autocomplete {
    position: relative;
    padding: 0;
}
    .Autocomplete .Info {
        position: absolute;
        height: 2.9rem;
        top: 1px;
        padding-top: 0.6rem;
        left: 10px;
        width: 84%;
        background: #f9f9f9 !important;
        font-size: 1.1rem;
    }
        .Autocomplete .Info ul{
            margin:0;
        }
        .Autocomplete .BackToSearch {
            position: absolute;
            top: 6px;
            right: 0;
            line-height: 1.6rem;
        }
.autocompleteSearchResult {
    z-index: 2;
    position: absolute;
    background: #f4f6f9;
}
    .autocompleteSearchResult ul {
        padding: 0;
    }
    .autocompleteSearchResult ul:hover {
        border-radius: 0 0 5px 5px;
        border-top: 0;
    }

    .autocompleteSearchResult ul li {
        padding: 0.2rem;
        cursor: pointer;
        list-style: none;
    }

        .autocompleteSearchResult ul li:hover {
            color: var(--primary-color);
        }

.userInfo .card-body {
    padding: 0.5rem;
}

    .userInfo .card-body .img-wrapper img {
        max-height: 100px;
    }

    .userInfo .card-body h4 {
        text-align: center;
        margin-bottom: 1rem;
    }


.autocompleteSuggesstions {
    position: absolute;
    right: 0;
    top: 0;
    max-width: 33%;
    z-index: 1;
}

    .autocompleteSuggesstions .card {
        background: #fff;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

        .autocompleteSuggesstions .card .card-header {
            background: #f8f9fa;
            min-height: 2rem;
        }

        .autocompleteSuggesstions .card .card-body {
            padding: 0.5rem;
        }

    .autocompleteSuggesstions .borderlessBtn {
        float: right;
        padding: 0;
    }

    .autocompleteSuggesstions li {
        cursor: pointer;
    }
.modal .card{
    border:0;
}
.modal .card .card-body {
    padding: 0;
}
@media (min-width: 992px) {
    [data-kt-app-sidebar-enabled=true][data-kt-app-sidebar-fixed=true] .app-main {
        margin-left: unset;
    }
}
.news-bar {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}

.news-content {
    display: inline-block;
    white-space: nowrap;
    animation: scroll 25s linear infinite;
    width: 100%;
}

.news-bar:hover .news-content {
    animation-play-state: paused;
}
.news-bar .news-content .newsItem {
    margin: 0 1rem;
    font-size: 1.2rem;
    color: var(--primary-color);
}
    .news-bar .news-content .newsItem:hover {
        font-weight: bold;
        transition: font-weight 0.5s ease;
        cursor: pointer;
        color: var(--primary-hover);
    }
@keyframes scroll {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}
@media (max-width: 768px) {
    .news-bar {
        padding: 5px;
    }

    .news-content {
        font-size: 14px; /* Smaller font for mobile */
        animation-duration: 20s; /* Slow down animation for readability */
    }
}
.modal .page-heading{
    display:none!important;
}
.AddByExcel h4 {
    text-align: center;
    margin: 2rem;
    padding: 1rem;
    border-bottom: 1px solid var(--primary-lighter);
}
@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width: 1200px!important;
    }
}
.progressBack, .progressbar {
    border-radius: 39px;
    height: 10px;
}
.SearchBeneficials {
    background: #f7f7f7;
    border-radius: 2rem;
    padding: 2rem;
    padding-top: 5rem;
}
    .SearchBeneficials #kt_app_toolbar {
        display:none;
    }
    .SearchBeneficials .search {
        margin-bottom: 3rem !important;
        background: #f7f7f7;
    }
    .SearchBeneficials .search input {
        background: #fff;
    }
    .SearchBeneficials .card {
        margin-bottom: 3rem !important;
    }
.mark, mark {
    border-radius: 5px;
    background-color: var(--primary-lighter);
}
.ajax-file-upload, .ajax-file-upload:hover {
    background: var(--primary-color)!important;
}
@media (min-width: 992px) {
    .app-header-logo {
        width:unset!important;
    }
}
.table:not(.table-bordered) td, .table:not(.table-bordered) th, .table:not(.table-bordered) tr {
    line-height: 4rem;
}

#ClaimingCoupon #couponNotValid {
    width: 50%;
    margin: 0 auto;
    display: none;
    padding: 3rem;
    border-radius: 5px;
    text-align: center;
    font-size: 3rem;
}
#ClaimingCoupon #claimBtn {
    margin: 0 auto;
    display: none;
    border-radius: 5px;
    text-align: center;
    font-size: 3rem;
    color: #fff;
    background: var(--primary-color);
}
    #ClaimingCoupon #claimBtn:hover {
        background: var(--primary-hover);
    }
    #ClaimingCoupon #claimBtn h3, #ClaimingCoupon #claimBtn #couponAmount {
        text-align: center;
        font-size: 3rem;
        color: #fff;
    }
#ClaimingCoupon #claimSection {
    display:none;
}
.MadeBy img {
    width: 6rem;
}
.ContactUs .MadeBy img {
    width: 8rem;
}
.TOTP {
    gap: 10px;
}
    .TOTP .totp-input, .totp-input:focus-visible {
        width: 100%;
        height: 50px;
        text-align: center;
        font-size: 24px;
        border: 1px solid #ced4da;
        border-radius: 5px;
        margin: 0 5px;
        outline: none;
    }
    .TOTP .totp-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(58, 84, 51, 0.25);
    }

/* Button Enhancements */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(58, 84, 51, 0.5) !important;
}

/* Link colors */
a {
    color: var(--primary-color);
}
a:hover {
    color: var(--primary-hover);
}

/* Badge enhancements */
.badge.badge-primary {
    background-color: var(--primary-color) !important;
}
.badge.badge-light-primary {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-color) !important;
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(58, 84, 51, 0.25);
}

/* Active menu items */
.menu-link.active {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-color) !important;
}

/* Text primary color */
.text-primary {
    color: var(--primary-color) !important;
}

/* Background primary color */
.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Progress bars */
.progress-bar {
    background-color: var(--primary-color) !important;
}

/* Card header with primary */
.card-header.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Icons with primary color */
.ki-duotone.text-primary {
    color: var(--primary-color) !important;
}
.form-control.form-control-solid, .form-select.form-select-solid {
    border: 1px solid #abb3a9 !important;
}
.table > thead {
    background: #e9f3ff;
}
tr {
    border: 1px solid #afb9ad !important;
}
.modal {
    --bs-modal-bg: #f5f5f5;
}
.form-check-custom .form-check-input {
    border: 1px solid #b4bbb2;
}
.form-check-custom .form-check-label {
    margin-right: .55rem;
    font-size: 1.2rem;
}
.form-check-custom {
    padding-top: 1rem;
}