:root {
    /* --bg-main: #f4f6f9;*/
    --bg-main: #aef1d22b;
    --color-primary: #008d4c;
    --color-primary-hover: #097a46;
    --color-primary-light: #aef1d22b;
    --color-primary-soft: #bdffdbcc;
    --gradient-primary: linear-gradient(to right, var(--color-primary) 0%, #05be69 51%, var(--color-primary) 100%);
}

.wrapper {
    background-color: white !important;
}

.content-wrapper.theamedbg {
    background-color: var(--bg-main) !important;
}



.BGPrimary {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.BGPrimary-light {
    background-color: var(--color-primary-light) !important;
}

.BGPrimary-soft {
    background-color: var(--color-primary-soft) !important;
}


.skin-yellow .main-header {
    max-height: 160px !important;
}

.skin-green .main-header .logo {
    background: var(--color-primary);
    color: white;
}

.skin-green .main-header .navbar {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
}



/*.main-sidebar {*/
/* background: var(--color-primary-light) !important;*/
/*background: white !important;
}*/
.sidebar-menu > li > a {
    border-radius:0px !important;
}
.sidebar-menu > li:hover > a {
    border-left: 4px solid var(--color-primary) !important;
    background: white !important;
    color: black !important;
}

    .sidebar-menu > li:hover > a > .fa {
        color: black !important;
    }


.sidebar-menu > li.active > a {
    font-weight: 600 !important;
    border-left: 4px solid var(--color-primary) !important;
    background: white !important;
    color: black !important;
    transition: background 0.10s ease, color 0.10s ease, border-radius 0.10s ease;
    border-radius:0px !important;
}

/*.sidebar-menu li > .treeview-menu {
    background: white !important;
    color: black !important;
}
*/
.sidebar-menu > li > .treeview-menu > li:hover > a {
    background: white !important;
    color: black !important;
    font-weight: 600 !important;
    margin-right: 3.5px !important;
    border-radius: 5px !important;
    transition: background 0.15s ease, color 0.15s ease, border-radius 0.15s ease;
}

.box {
    border-top: hidden !important;
    border-radius: 4px !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}

    .box:not(:has(.box-header, .box-body)) {
        padding: 10px !important;
    }

.nav-tabs-custom .box {
    box-shadow: none !important;
    border: 1px solid rgb(0 0 0 / 18%) !important;
}

.box .box {
    box-shadow: none !important;
    border: 1px solid rgb(0 0 0 / 18%) !important;
}

.box-body {
    border-radius: 5px !important;
    padding-top: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 10px !important;
}

/*.box-primary {
    background-color: white;
}

  .box-primary .box-header {
        background-color: var(--color-primary) !important;
        border-radius: 5px 5px 4px 4px !important;
        color: white !important;
    }

        .box-primary .box-header .btn-bitbucket {
            background: white !important;
            color: var(--color-primary) !important;
        }

        .box-primary .box-header .box-title {
            color: white !important;
        }

            .box-primary .box-header .box-title .fa {
                color: white !important;
            }

    .box-primary .box-body {
        background-color: var(--color-primary-light) !important;
    }
*/

.box-top-outline {
    border-top: 2.5px solid var(--color-primary) !important;
}

.box-outline {
    border: 1px solid var(--color-primary) !important;
    padding: 1px !important;
}

.box-outline-header {
    border: 1px solid var(--color-primary) !important;
    padding: 0px !important;
}

    .box-outline-header .box-header {
        background: var(--color-primary-soft) !important;
        border-bottom: 1px solid var(--color-primary) !important;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }



.box-header {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    padding: 12px 16px;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}


.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    /*  grid-template-columns: repeat(9, minmax(120px, 1fr));*/
    gap: 0px;
    justify-content: center;
    justify-items: center;
    padding-top: 12px;
    margin: 0 auto;
}

    /* When more than 7 icons exist */
    /*  .dashboard-grid:has(.dashboard-icon:nth-child(8)) {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0px;
        margin: 0 auto; 
    }*/


    .dashboard-grid:has(:nth-child(8)) {
        justify-content: center;
        justify-items: center;
    }

.moduleNameFirstLetter {
    position: absolute;
    font-size: 50px;
    margin: auto;
    width: 104px !important;
    word-break: break-all;
    margin-top: 0px !important;
    margin-left: -99px !important;
    line-height: 1.86;
    font-weight: bold;
    vertical-align: middle;
    text-transform: uppercase;
    transition: color 0.5s ease;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary-light) !important;
}

    .moduleNameFirstLetter:hover {
        background-color: white !important;
        transform: scale(1.10);
        box-shadow: none !important;
        border: 1px solid rgb(0 0 0 / 18%) !important;
    }


.dashboard-icon {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 145px !important;
}

.dashboard-icon-title {
    font-size: 15px;
    font-weight: 600 !important;
    color: #333;
    width: 110px;
    margin-top: 2px !important;
    text-shadow: 0px 0px #d4d4d4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.3;
    padding-bottom: 2px;
}



.dashboard-icon-anchor {
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.1s ease;
}

.dashboard-icon-image {
    width: 99px;
    height: 95px;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary-light) !important;
    transition: transform 0.3s ease, background-color 0.3s ease, border 0.3s ease;
}

    .dashboard-icon-image:hover {
        background-color: white !important;
        transform: scale(1.10);
        box-shadow: none !important;
        border: 1px solid rgb(0 0 0 / 18%) !important;
    }


@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr); /* still 4 per row on tablet */
        gap: 10px;
    }

    .dashboard-icon-image {
        width: 86px;
        height: 86px;
    }

    .dashboard-icon-title {
        margin-top: -10px !important;
        font-size: 15px;
    }

    .dashboard-icon {
        height: 133px !important;
    }

    .moduleNameFirstLetter {
        margin-top: -6px !important;
        font-size: 47px !important;
        margin-left: -95px !important;
    }
}


@media (max-width: 480px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 icons per row on small screens */
        gap: 5px;
        justify-items: center;
    }

    .dashboard-icon-image {
        width: 76px;
        height: 76px;
    }

    .dashboard-icon-title {
        margin-top: -16px !important;
        font-size: 13px;
    }

    .dashboard-icon {
        height: 122px !important;
    }

    .moduleNameFirstLetter {
        margin-top: -11px !important;
        font-size: 45px !important;
        margin-left: -89px !important;
    }
}


@media (max-width: 376px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 icons per row on small screens */
        gap: 10px;
        justify-items: center;
    }

    .dashboard-icon-image {
        width: 72px;
        height: 72px;
    }

    .dashboard-icon-title {
        margin-top: -23px !important;
        font-size: 12px;
    }

    .dashboard-icon {
        height: 107px !important;
    }

    .moduleNameFirstLetter {
        margin-top: -12px !important;
        font-size: 45px !important;
        margin-left: -85px !important;
    }
}


.btn-social-icon {
    padding-left: 33px !important;
    box-shadow: 0 0 0px var(--color-primary-light);
}

    .btn-social-icon :first-child {
        line-height: 35px !important;
        height: 32px !important;
        width: 34px !important;
        font-size: 20px !important;
    }

.btn-bitbucket {
    background-image: var(--gradient-primary);
}

.btn-bitbucket {
    border-radius: 5px !important;
    border: 0px !important;
    transition: 0.5s;
    font-weight: 600;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 0px var(--color-primary);
}

    .btn-bitbucket:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }


button, a, .btn {
    border-radius: 5px !important;
}


.btn {
    margin-right: 2px !important;
    box-shadow: 0 0 0px var(--color-primary-light);
}

.btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white;
    font-weight: 600;
    box-shadow: none;
    transition: background .25s ease-in-out;
}


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

.btn-outline-primary {
    background: white;
    color: var(--color-primary);
    font-weight: 600;
    border: 1px solid var(--color-primary) !important;
    box-shadow: none;
    transition: color .35s ease-in-out,background-color .20s ease-in-out;
}

    .btn-outline-primary:hover {
        color: white;
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

.btn-gradient-primary {
    background-image: var(--gradient-primary);
}

.btn-gradient-primary {
    transition: 0.5s;
    font-weight: 600;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
}

    .btn-gradient-primary:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }


.input-group-addon {
    border-radius: 3.5px !important;
    background-color: #e9ecef !important;
    color: #585257 !important;
}

input[type=text], .textboxclass, .ui-autocomplete-input, textarea, select, .select2-selection--single, .select2-selection--multiple {
    border-radius: 3.5px !important;
    border: 1px solid #ced4da !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

    input[type=text]:focus, .textboxclass:focus, .ui-autocomplete-input:focus, textarea:focus, select:focus, .select2-container--open, .select2-container--open .select2-selection--multiple {
        color: #495057 !important;
        background-color: #fff !important;
        border-color: #80bdff !important;
        outline: 0 !important;
        box-shadow: inset 0 0 0 transparent !important;
    }


.nav-tabs-custom {
    margin-bottom: 0px !important;
    background: #fff;
    border-radius: 5px !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    position: relative !important;
}

.nav-tabs-custom-outline {
    border: 1px solid var(--color-primary) !important;
}

.nav-tabs-custom-top-outline {
    border-top: 2.5px solid var(--color-primary) !important;
}



.nav-tabs-custom > .nav-tabs {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 5px 6px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    background-color: var(--color-primary-soft) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

.nav-tabs-custom > .nav-tabs::-webkit-scrollbar {
    height: 0px !important;
    background: transparent !important;
}

.nav-tabs-custom > .tab-content {
    border-radius: 5px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.nav-tabs-custom > .nav-tabs > li:not(:has(.box-title)) {
    color: black !important;
}


.nav-tabs-custom > .nav-tabs > .Tab,
.nav-tabs-custom > .nav-tabs > li:has(a),
.nav-tabs-custom > .nav-tabs > li:has(button) {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    padding: 6px 14px !important;
    font-size: 14px !important;
    margin: 0 2px !important;
    border-radius: 20px !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    transition: color 0.25s ease !important;
    cursor: pointer;
}


.nav-tabs-custom > .nav-tabs > li:has(a).active,
.nav-tabs-custom > .nav-tabs > li:has(button).active {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    padding: 6px 14px !important;
    font-size: 14px !important;
    margin: 0 2px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    border: none !important;
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    transition: color 0.25s ease, font-weight 0.25s ease !important;
}



.nav-tabs-custom > .nav-tabs li > a {
    background: transparent !important;
    border: hidden !important;
    padding: 1px !important;
    color: #000000 !important;
    white-space: nowrap !important;
}

.nav-tabs-custom > .nav-tabs li.active > a {
    background: transparent !important;
    border: hidden !important;
    padding: 1px !important;
    color: inherit !important;
    white-space: nowrap !important;
}

/* ── pull-right nav-tabs: neutralise float, use flex-end alignment ── */
.nav-tabs-custom > .nav-tabs.pull-right {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-end !important;
}

/* Header / title li inside pull-right bar: pin it to the left, push tabs right */
.nav-tabs-custom > .nav-tabs.pull-right > li.header,
.nav-tabs-custom > .nav-tabs.pull-right > li.pull-left {
    order: -1 !important;
    margin-right: auto !important;
}

/* Header li (title, no <a> tag) — never styled as a tab */
.nav-tabs-custom > .nav-tabs > li.header {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 8px !important;
    margin: 0 !important;
    z-index: auto !important;
    cursor: default !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: none !important;
    transition: none !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* Non-tab li (no <a> or <button> inside, not .header) — content/layout element */
.nav-tabs-custom > .nav-tabs > li:not(:has(a)):not(:has(button)):not(.header) {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    z-index: auto !important;
    cursor: default !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* ── Tooltip: always render above tab-bar stacking contexts ─────────────── */
.tooltip {
    z-index: 9999 !important;
}

/* ── Mobile / responsive: compact tab bar on small screens ──────────────── */
@media (max-width: 767px) {
    .nav-tabs-custom > .nav-tabs {
        padding: 3px 3px !important;
    }

    .nav-tabs-custom > .nav-tabs > .Tab,
    .nav-tabs-custom > .nav-tabs > li:has(a),
    .nav-tabs-custom > .nav-tabs > li:has(button) {
        padding: 4px 8px !important;
        font-size: 12px !important;
        margin: 0 1px !important;
    }

    .nav-tabs-custom > .nav-tabs > li:has(a).active,
    .nav-tabs-custom > .nav-tabs > li:has(button).active {
        padding: 4px 8px !important;
        font-size: 12px !important;
        margin: 0 1px !important;
    }

    .nav-tabs-custom > .nav-tabs.pull-right > li.header,
    .nav-tabs-custom > .nav-tabs.pull-right > li.pull-left {
        max-width: 38vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}


.select2-selection__rendered .select2-selection__choice {
    background-color: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

    .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
        color: var(--color-primary) !important;
    }


.BackgroundColor {
    background-color: var(--color-primary) !important;
}

.jsUseFirstLink, .jsUsePreviousLink, .jsUseNextLink, .jsUseLastLink, .jsUsegridprintbtn, .jsUsegridexportbtn {
    color: var(--color-primary);
}

.gridActions > a {
    color: var(--color-primary);
}

.BackgroundColorWithColor {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.textcolor {
    color: var(--color-primary);
}

.iconfill {
    fill: var(--color-primary) !important;
}

.User_Profile_Img {
    margin-top: 5mm !important;
    border: 3px solid var(--color-primary) !important;
    height: 175px !important;
    width: 180px !important;
    border-radius: 50% !important;
    margin: auto !important;
    box-shadow: 0px 1.5px 1.5px 1.5px var(--color-primary-light) !important;
}

.profile-user-img {
    margin: 0 auto;
    width: 27mm;
    padding: 3px;
    border: 3px solid var(--color-primary);
}


.img-circle {
    border-radius: 50% !important;
}


.emng header {
    box-shadow: 3px 2px 8px 1px #00a65a47, 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

aside, footer {
    box-shadow: 0 4px 8px 0 #00a65a47, 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.table .btn-social-icon {
    padding: 0px !important;
}


.mce-tinymce button {
    border-radius: 0px !important;
    box-shadow: none;
}

.add {
    border-radius: 50% !important;
}

/* Chrome / Edge / Safari */
.fileinput-button input[type="file"]::-webkit-file-upload-button {
    background: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    padding: 6px 12px;
    border-radius: 20px !important;
    cursor: pointer;
    color: white;
}

/* Firefox */
.fileinput-button input[type="file"]::file-selector-button {
    background: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    padding: 6px 12px;
    border-radius: 20px !important;
    cursor: pointer;
    color: white;
}