/* =========================================================
   =========================================================
   WINGS / DSWD GLOBAL UI
   PHPRunner 11.x
   CLEAN MODIFY CSS
   =========================================================

   IMPORTANT:
   Replace ALL existing Modify CSS with this file.

   DO NOT append this below your old CSS.

   Separate files remain:
   - wings-partners.css
   - wings-partners.js
   - dswd-footer.css
   - dswd-footer.js
   =========================================================
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

    --dswd-blue: #2e3192;
    --dswd-blue-dark: #252875;
    --dswd-blue-soft: #ededf7;

    --dswd-red: #ee1c25;
    --dswd-red-dark: #cf161e;

    --dswd-yellow: #fef200;

    --wings-green: #4caf5a;
    --wings-green-dark: #41994d;

    --wings-white: #ffffff;

    --wings-page-bg: #ffffff;

    --wings-sidebar-bg: #f7f7f8;
    --wings-sidebar-hover: #eeeeF4;
    --wings-sidebar-active: #e8e8f2;

    --wings-text: #292929;
    --wings-text-secondary: #666666;
    --wings-text-muted: #969696;

    --wings-border: #e6e6e8;
    --wings-border-dark: #d5d5d8;

    --wings-soft-bg: #f7f7f8;

    --wings-header-height: 68px;

    --wings-radius-sm: 4px;
    --wings-radius: 6px;
    --wings-radius-lg: 9px;

    --wings-shadow:
        0 2px 8px rgba(0,0,0,0.07);

    --wings-shadow-card:
        0 2px 10px rgba(0,0,0,0.09);
}


/* =========================================================
   02. GLOBAL RESET / TYPOGRAPHY
   ========================================================= */

html,
body {

    margin: 0;

    padding: 0;

    background:
        var(--wings-page-bg);

    color:
        var(--wings-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


body,
button,
input,
select,
textarea,
table,
label,
.form-control,
.btn {

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


* {

    box-sizing:
        border-box;
}


a {

    text-decoration:
        none;
}


a:hover,
a:focus {

    text-decoration:
        none;
}


/* =========================================================
   03. IMPORTANT LAYOUT RESET
   ========================================================= */

/*
   DO NOT control PHPRunner's sidebar geometry here.

   Specifically, this file intentionally contains NO:

   width: 238px
   flex-basis: 238px
   position: sticky
   position: fixed
   margin-left: 238px
   --wings-extra-gap
   translateX(...)

   PHPRunner controls the left-bar width and collapsed state.
*/


.r-vbar-page .r-topheader,
.r-vbar-page .r-body,
.r-vbar-page .r-content {

    transform:
        none !important;
}


/* =========================================================
   04. MAIN CONTENT
   ========================================================= */

body:not(.function-login) .r-body {

    padding-left:
        18px !important;

    padding-right:
        18px !important;

    background:
        #ffffff;
}


body:not(.function-login) .r-content {

    background:
        #ffffff;
}


body:not(.function-login) .container-fluid {

    max-width:
        none;
}


/* =========================================================
   =========================================================
   LEFT SIDEBAR
   =========================================================
   ========================================================= */


/* =========================================================
   05. SIDEBAR APPEARANCE

   IMPORTANT:
   No width or position rules here.
   ========================================================= */

.r-vbar-page .r-left,
.r-left {

    background:
        var(--wings-sidebar-bg) !important;

    border-right:
        1px solid #eeeeef !important;

    box-shadow:
        none !important;
}


/* =========================================================
   06. SIDEBAR LOGO AREA
   ========================================================= */

.r-left [data-logo-cell],
.r-left [data-itemid="logo"] {

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        14px 10px 12px !important;

    background:
        #ffffff !important;

    border:
        none !important;

    box-shadow:
        none !important;

    text-align:
        center !important;
}


/* Remove inherited blue/logo strip */

.r-left [data-logo-cell]::before {

    display:
        none !important;

    content:
        none !important;
}


/* Main logo */

.r-left [data-logo-cell] > img,
.r-left [data-itemid="logo"] img {

    display:
        block !important;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        195px !important;

    max-height:
        56px !important;

    margin:
        0 auto !important;

    object-fit:
        contain !important;
}


/* =========================================================
   07. MENU CONTAINER
   ========================================================= */

.r-left [data-itemid="menu"],
.r-left .r-menu {

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        8px 8px 100px !important;

    background:
        transparent !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    scrollbar-width:
        thin;

    scrollbar-color:
        #cfcfd4 transparent;
}


/* Chrome / Edge */

.r-left [data-itemid="menu"]::-webkit-scrollbar,
.r-left .r-menu::-webkit-scrollbar {

    width:
        5px;
}


.r-left [data-itemid="menu"]::-webkit-scrollbar-track,
.r-left .r-menu::-webkit-scrollbar-track {

    background:
        transparent;
}


.r-left [data-itemid="menu"]::-webkit-scrollbar-thumb,
.r-left .r-menu::-webkit-scrollbar-thumb {

    background:
        #cfcfd4;

    border-radius:
        10px;
}


.r-left [data-itemid="menu"]::-webkit-scrollbar-thumb:hover,
.r-left .r-menu::-webkit-scrollbar-thumb:hover {

    background:
        #b8b8bd;
}


/* =========================================================
   08. MENU RESET
   ========================================================= */

.r-left [data-itemid="menu"] ul {

    margin:
        0 !important;

    padding-left:
        0 !important;

    list-style:
        none !important;

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;
}


.r-left [data-itemid="menu"] li {

    position:
        relative;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        none !important;
}


/* =========================================================
   09. TOP LEVEL MENU ITEM
   ========================================================= */

.r-left [data-itemid="menu"]
> ul > li {

    margin:
        2px 4px !important;
}


.r-left [data-itemid="menu"]
> ul > li > a {

    display:
        flex !important;

    align-items:
        center !important;

    width:
        100% !important;

    min-height:
        38px !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        9px 9px !important;

    background:
        transparent !important;

    border:
        none !important;

    border-radius:
        6px !important;

    box-shadow:
        none !important;

    color:
        #606060 !important;

    text-decoration:
        none !important;

    transition:
        background-color .15s ease,
        color .15s ease;
}


/* =========================================================
   10. MENU TITLE
   ========================================================= */

.r-left [data-itemid="menu"]
> ul > li > a .r-menu-title {

    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    color:
        #606060 !important;

    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        18px !important;

    white-space:
        normal !important;

    word-break:
        normal !important;

    overflow-wrap:
        break-word !important;
}


/* =========================================================
   11. MENU ICON
   ========================================================= */

.r-left [data-itemid="menu"]
> ul > li > a .menu-icon,

.r-left [data-itemid="menu"]
> ul > li > a .glyphicon,

.r-left [data-itemid="menu"]
> ul > li > a .fa,

.r-left [data-itemid="menu"]
> ul > li > a i {

    flex:
        0 0 19px !important;

    width:
        19px !important;

    min-width:
        19px !important;

    margin-right:
        7px !important;

    color:
        #777777 !important;

    font-size:
        14px !important;

    text-align:
        center !important;
}


/* =========================================================
   12. MENU CARET / ARROW
   ========================================================= */

.r-left [data-itemid="menu"] .caret,
.r-left [data-itemid="menu"] .menu-arrow {

    flex:
        0 0 auto !important;

    margin-left:
        6px !important;

    color:
        #666666 !important;
}


/* =========================================================
   13. MENU HOVER
   ========================================================= */

.r-left [data-itemid="menu"]
> ul > li > a:hover {

    background:
        var(--wings-sidebar-hover) !important;

    color:
        var(--dswd-blue) !important;
}


.r-left [data-itemid="menu"]
> ul > li > a:hover .r-menu-title,

.r-left [data-itemid="menu"]
> ul > li > a:hover .menu-icon,

.r-left [data-itemid="menu"]
> ul > li > a:hover .glyphicon,

.r-left [data-itemid="menu"]
> ul > li > a:hover .fa,

.r-left [data-itemid="menu"]
> ul > li > a:hover i {

    color:
        var(--dswd-blue) !important;
}


/* =========================================================
   14. ACTIVE TOP LEVEL
   ========================================================= */

.r-left [data-itemid="menu"]
> ul > li.active > a {

    background:
        var(--wings-sidebar-active) !important;

    color:
        var(--dswd-blue) !important;
}


.r-left [data-itemid="menu"]
> ul > li.active > a .r-menu-title {

    color:
        var(--dswd-blue) !important;

    font-weight:
        600 !important;
}


.r-left [data-itemid="menu"]
> ul > li.active > a i,

.r-left [data-itemid="menu"]
> ul > li.active > a .fa,

.r-left [data-itemid="menu"]
> ul > li.active > a .glyphicon {

    color:
        var(--dswd-blue) !important;
}


/* =========================================================
   15. PARENT WITH ACTIVE CHILD
   ========================================================= */

.r-left [data-itemid="menu"]
li:has(ul li.active) > a .r-menu-title {

    color:
        var(--dswd-blue) !important;

    font-weight:
        600 !important;
}


.r-left [data-itemid="menu"]
li:has(ul li.active) > a i {

    color:
        var(--dswd-blue) !important;
}


/* =========================================================
   16. SUBMENU
   ========================================================= */

.r-left [data-itemid="menu"] ul ul {

    position:
        static !important;

    float:
        none !important;

    width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        2px 0 5px !important;

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;
}


/*
   PHPRunner controls expanded/collapsed menu state.
*/

.r-left [data-itemid="menu"]
li:not(.open):not(.active)
> ul.dropdown-menu {

    display:
        none;
}


.r-left [data-itemid="menu"]
li.open
> ul.dropdown-menu {

    display:
        block;
}


.r-left [data-itemid="menu"]
li:has(> ul li.active)
> ul {

    display:
        block;
}


/* =========================================================
   17. SUBMENU ITEM
   ========================================================= */

.r-left [data-itemid="menu"]
ul ul li > a {

    display:
        flex !important;

    align-items:
        flex-start !important;

    width:
        calc(100% - 8px) !important;

    min-height:
        32px !important;

    height:
        auto !important;

    margin:
        1px 4px !important;

    padding:
        7px 8px 7px 31px !important;

    background:
        transparent !important;

    border:
        none !important;

    border-radius:
        5px !important;

    box-shadow:
        none !important;

    color:
        #666666 !important;

    text-decoration:
        none !important;
}


.r-left [data-itemid="menu"]
ul ul li > a .r-menu-title {

    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    color:
        #666666 !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    line-height:
        16px !important;

    white-space:
        normal !important;

    overflow-wrap:
        break-word !important;
}


.r-left [data-itemid="menu"]
ul ul li.active > a .r-menu-title {

    color:
        var(--dswd-blue) !important;

    font-weight:
        600 !important;
}


.r-left [data-itemid="menu"]
ul ul li > a:hover {

    background:
        var(--wings-sidebar-hover) !important;
}


.r-left [data-itemid="menu"]
ul ul li > a:hover .r-menu-title {

    color:
        var(--dswd-blue) !important;
}


/* Third level */

.r-left [data-itemid="menu"]
ul ul ul li > a {

    padding-left:
        43px !important;
}


/* Fourth level */

.r-left [data-itemid="menu"]
ul ul ul ul li > a {

    padding-left:
        55px !important;
}


/* =========================================================
   =========================================================
   HEADER
   =========================================================
   ========================================================= */


/* =========================================================
   18. TOP HEADER
   ========================================================= */

.r-topheader {

    min-height:
        var(--wings-header-height) !important;

    background:
        var(--dswd-blue) !important;

    background-image:
        none !important;

    border:
        none !important;

    box-shadow:
        none !important;

    color:
        #ffffff !important;

    overflow:
        visible !important;
}


.r-topheader .navbar,
.r-topheader .navbar-default,
.r-topheader .navbar-inverse {

    min-height:
        var(--wings-header-height) !important;

    margin:
        0 !important;

    background:
        var(--dswd-blue) !important;

    background-image:
        none !important;

    border:
        none !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;
}


/*
   Prevent PHPRunner header cells from clipping custom alert.
*/

.r-topheader .r-form,
.r-topheader .r-row,
.r-topheader .row {

    overflow:
        visible !important;
}


/* =========================================================
   19. HEADER LINKS
   ========================================================= */

.r-topheader a,
.r-topheader .navbar-nav > li > a {

    color:
        #ffffff !important;
}


.r-topheader .navbar-nav > li > a:hover,
.r-topheader .navbar-nav > li > a:focus {

    background:
        rgba(255,255,255,0.07) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   20. HEADER TITLE
   ========================================================= */

.r-topheader [data-itemtype="pageheader"],
.r-topheader [data-itemid="pageheader"],
.r-topheader .r-page-title {

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        none !important;

    color:
        #ffffff !important;
}


.r-topheader [data-itemtype="pageheader"] h1,
.r-topheader [data-itemtype="pageheader"] h2,
.r-topheader [data-itemtype="pageheader"] h3,
.r-topheader .r-page-title h1,
.r-topheader .r-page-title {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

    font-size:
        24px !important;

    font-weight:
        700 !important;

    line-height:
        28px !important;
}


/* =========================================================
   21. BREADCRUMB
   ========================================================= */

.r-topheader .breadcrumb {

    margin:
        0 !important;

    padding:
        3px 0 0 !important;

    background:
        transparent !important;

    border:
        none !important;

    font-size:
        9px !important;
}


.r-topheader .breadcrumb,
.r-topheader .breadcrumb a,
.r-topheader .breadcrumb > li,
.r-topheader .breadcrumb > li + li::before {

    color:
        rgba(255,255,255,0.85) !important;
}


/* =========================================================
   22. HEADER SEARCH
   ========================================================= */

.r-topheader .form-control,
.r-topheader input[type="search"],
.r-topheader input[type="text"] {

    height:
        31px !important;

    min-height:
        31px !important;

    padding:
        6px 10px !important;

    background:
        #ffffff !important;

    border:
        1px solid rgba(255,255,255,0.40) !important;

    border-radius:
        4px !important;

    color:
        #444444 !important;

    font-size:
        11px !important;

    box-shadow:
        none !important;
}


.r-topheader input::placeholder,
.r-topheader .form-control::placeholder {

    color:
        #a7a7aa !important;
}


/* =========================================================
   23. HEADER ICONS
   ========================================================= */

.r-topheader .glyphicon,
.r-topheader .fa,
.r-topheader i {

    color:
        #ffffff;
}


.wings-header-icon {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        33px !important;

    height:
        33px !important;

    min-width:
        33px !important;

    margin-left:
        7px !important;

    background:
        #ffffff !important;

    border:
        none !important;

    border-radius:
        50% !important;

    color:
        var(--dswd-blue) !important;
}


.wings-header-icon i,
.wings-header-icon .fa,
.wings-header-icon .glyphicon {

    color:
        var(--dswd-blue) !important;
}


/* =========================================================
   24. USER INFO
   ========================================================= */

.wings-user-name {

    color:
        #ffffff !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;
}


.wings-user-role {

    margin-top:
        1px !important;

    color:
        rgba(255,255,255,0.78) !important;

    font-size:
        9px !important;
}


/* =========================================================
   25. PENDING APPROVAL ALERT
   ========================================================= */

/*
   This restores the alert IF the element is still generated
   by your dashboard/header JavaScript.

   Example:
   ⚠ 25 Pending Approval(s)
*/

.r-topheader .wings-approval-alert,
.r-topheader .pending-approval-alert,
.r-topheader .approval-alert,
.r-topheader [data-itemid*="pending"],
.r-topheader [data-itemid*="approval"] {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    min-height:
        31px !important;

    margin:
        0 8px !important;

    padding:
        5px 13px !important;

    background:
        #fff8d7 !important;

    border:
        1px solid #f1d76b !important;

    border-left:
        4px solid #f1b900 !important;

    border-radius:
        5px !important;

    color:
        #735d00 !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;

    line-height:
        18px !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    z-index:
        100 !important;
}


.r-topheader .wings-approval-alert i,
.r-topheader .pending-approval-alert i,
.r-topheader .approval-alert i,
.r-topheader [data-itemid*="pending"] i,
.r-topheader [data-itemid*="approval"] i {

    color:
        #9d7800 !important;

    margin-right:
        5px !important;
}


/* =========================================================
   =========================================================
   BUTTONS
   =========================================================
   ========================================================= */


/* =========================================================
   26. BUTTON BASE
   ========================================================= */

.btn {

    border-radius:
        6px !important;

    box-shadow:
        none !important;

    font-size:
        12px;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}


/* Default */

.btn-default {

    background:
        #ffffff !important;

    background-image:
        none !important;

    border:
        1px solid #cfcfd2 !important;

    color:
        #333333 !important;

    box-shadow:
        none !important;
}


.btn-default:hover,
.btn-default:focus,
.btn-default:active {

    background:
        #f5f5f6 !important;

    border-color:
        #bbbbbf !important;

    color:
        #222222 !important;
}


/* Primary */

.btn-primary {

    background:
        var(--dswd-blue) !important;

    background-image:
        none !important;

    border-color:
        var(--dswd-blue) !important;

    color:
        #ffffff !important;

    box-shadow:
        none !important;
}


.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {

    background:
        var(--dswd-blue-dark) !important;

    border-color:
        var(--dswd-blue-dark) !important;
}


/* Success */

.btn-success {

    background:
        var(--wings-green) !important;

    border-color:
        var(--wings-green) !important;

    color:
        #ffffff !important;
}


.btn-success:hover,
.btn-success:focus,
.btn-success:active {

    background:
        var(--wings-green-dark) !important;

    border-color:
        var(--wings-green-dark) !important;
}


/* Danger */

.btn-danger {

    background:
        var(--dswd-red) !important;

    border-color:
        var(--dswd-red) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   =========================================================
   PANELS / CARDS
   =========================================================
   ========================================================= */


/* =========================================================
   27. GENERIC PANEL
   ========================================================= */

.panel,
.card,
.wings-module-card {

    background:
        #ffffff;

    border:
        1px solid #ededee !important;

    border-radius:
        8px !important;

    box-shadow:
        var(--wings-shadow-card);

    overflow:
        hidden;
}


/*
   IMPORTANT:
   Do not force background/text colors on ALL panel headings.
   PHPRunner Sections can have their own configured colors
   (for example Approvals = DSWD Blue).
*/
.panel-heading,
.card-header,
.r-panel-header {

    min-height:
        36px;

    margin:
        0 !important;

    padding:
        10px 12px !important;

    background-image:
        none !important;

    border:
        none !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        16px !important;
}


.panel-heading *,
.card-header *,
.r-panel-header * {

    color:
        inherit;
}


.panel-body,
.card-body {

    padding:
        12px !important;
}


/* =========================================================
   28. SECTION TITLE HELPERS
   ========================================================= */

.wings-section-title,
.wings-section-title-blue {

    width:
        100%;

    padding:
        9px 10px;

    background:
        var(--dswd-blue);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

    border-radius:
        4px 4px 0 0;
}


.wings-section-title-yellow {

    width:
        100%;

    padding:
        9px 10px;

    background:
        var(--dswd-yellow);

    color:
        #222222;

    font-size:
        11px;

    font-weight:
        700;
}


.wings-section-title-red {

    width:
        100%;

    padding:
        9px 10px;

    background:
        var(--dswd-red);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;
}


/* =========================================================
   =========================================================
   DASHBOARD
   =========================================================
   ========================================================= */


/* =========================================================
   29. DASHBOARD PAGE
   ========================================================= */
/* =========================================================
   WINGS DASHBOARD - FIGMA LAYOUT FOUNDATION
   STEP 1
   ========================================================= */


body.function-dashboard,
body[data-page="dashboard"] {

    background:
        #f7f7f8 !important;

}


/* Dashboard spacing */

.r-dashboard-cell {

    padding:
        8px !important;

}


/* Dashboard row spacing */

body.function-dashboard .row {

    margin-left:
        -8px !important;

    margin-right:
        -8px !important;

}


/* Dashboard content area */

body.function-dashboard .r-content {

    background:
        #f7f7f8 !important;

}


/* Dashboard widgets */

.r-dashboard-cell .panel,
.r-dashboard-cell .card,
.r-dashboard-cell .bs-dbelement {

    background:
        #ffffff !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    box-shadow:
        0 2px 12px rgba(0,0,0,0.08) !important;

}

/* =========================================================
   DASHBOARD WIDGET BASE STYLE
   ========================================================= */
/* =========================================================
   DASHBOARD WIDGET BASE STYLE
   ========================================================= */

.r-dashboard-cell .panel,
.r-dashboard-cell .card,
.r-dashboard-cell .bs-dbelement {

    overflow:
        hidden !important;

    background:
        #ffffff !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    box-shadow:
        0 2px 12px rgba(0,0,0,0.08) !important;

}



/* =========================================================
   WINGS DASHBOARD KPI CARDS
   STEP 2
   ========================================================= */


/* KPI CARD BASE */

body.function-dashboard .r-dashboard-cell {

    vertical-align:
        top !important;

}


body.function-dashboard .r-dashboard-cell .panel,
body.function-dashboard .r-dashboard-cell .card {


    border-radius:
        10px !important;

    overflow:
        hidden !important;

}



/* KPI HEADER */

body.function-dashboard
.panel-heading,
body.function-dashboard
.card-header {


    padding:
        10px 14px !important;


    background:
        #ffffff !important;


    color:
        #202020 !important;


    font-size:
        12px !important;


    font-weight:
        700 !important;


    border:
        none !important;

}



/* KPI BODY */

body.function-dashboard
.panel-body,
body.function-dashboard
.card-body {


    padding:
        14px !important;

}



/* KPI BIG NUMBER */

body.function-dashboard
.wings-kpi-number {


    color:
        #30369b !important;


    font-size:
        28px !important;


    font-weight:
        700 !important;


    line-height:
        32px !important;

}



/* KPI LABEL */

body.function-dashboard
.wings-kpi-label {


    color:
        #333333 !important;


    font-size:
        11px !important;


    font-weight:
        600 !important;

}


/* =========================================================
   TOTAL FFP STOCKPILE CARD
   FIGMA DESIGN
   ========================================================= */


body.function-dashboard
.wings-stockpile-card {

    background:
        linear-gradient(
            135deg,
            #4b50d8 0%,
            #30369b 100%
        ) !important;

    border-radius:
        12px !important;

    padding:
        18px !important;

    min-height:
        220px !important;

    color:
        #ffffff !important;

    box-shadow:
        0 4px 15px rgba(46,49,146,0.25) !important;

}


/* Remove default dashboard panel background */

body.function-dashboard
.wings-stockpile-card .panel,
body.function-dashboard
.wings-stockpile-card .card {

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

}


/* Icon */

body.function-dashboard
.wings-stockpile-card
.wings-stockpile-icon {

    width:
        42px !important;

    height:
        42px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        rgba(255,255,255,0.20) !important;

    border-radius:
        50% !important;

    color:
        #ffffff !important;

}


/* Title */

body.function-dashboard
.wings-stockpile-card
.wings-stockpile-title {

    margin-top:
        12px !important;

    color:
        rgba(255,255,255,0.85) !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    text-transform:
        uppercase;

}

/* =========================================================
   TOTAL FFP MAIN VALUE
   ========================================================= */

body.function-dashboard
.wings-stockpile-card
.wings-stockpile-main-value {

    margin-top:
        8px !important;

    color:
        #ffffff !important;

    font-size:
        34px !important;

    font-weight:
        700 !important;

    line-height:
        40px !important;

}


/* Supporting values */

body.function-dashboard
.wings-stockpile-card
.wings-stockpile-details {

    margin-top:
        15px !important;

    padding-top:
        12px !important;

    border-top:
        1px solid rgba(255,255,255,0.25);

}


body.function-dashboard
.wings-stockpile-card
.wings-stockpile-details td {

    color:
        #ffffff !important;

    font-size:
        11px !important;

}

/* =========================================================
   STORAGE DONUT CARD
   ========================================================= */


body.function-dashboard
.wings-storage-card {


    background:
        #ffffff !important;

}


body.function-dashboard
.wings-storage-card canvas {


    max-width:
        65px !important;

}


/* =========================================================
   WAREHOUSE CARD
   ========================================================= */


body.function-dashboard
.wings-warehouse-card
.wings-kpi-number {


    font-size:
        30px !important;

}


body.function-dashboard
.wings-warehouse-card
table {


    background:
        #f5f5f8 !important;


    border-radius:
        6px !important;

}


body.function-dashboard
.wings-warehouse-card td {


    text-align:
        center !important;


    font-size:
        11px !important;

}

.r-dashboard-cell .panel-heading,
.r-dashboard-cell .card-header,
[data-itemtype="dashboard_item_header"] {

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    padding:
        10px 11px !important;

    background:
        #ffffff !important;

    border:
        none !important;

    color:
        #222222 !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;
}


/* =========================================================
   =========================================================
   LIST PAGE
   =========================================================
   ========================================================= */


/* =========================================================
   30. LIST PAGE
   ========================================================= */

body.function-list .r-body {

    padding-top:
        15px !important;
}


body.function-list .r-grid {

    background:
        #ffffff;
}


/* =========================================================
   31. GRID / TABLE
   ========================================================= */

.rnr-gridtable,
.r-grid table,
.table {

    width:
        100%;

    margin-bottom:
        0;

    background:
        #ffffff;

    border-collapse:
        separate !important;

    border-spacing:
        0 !important;

    border:
        none !important;

    border-radius:
        7px;

    box-shadow:
        none !important;

    font-size:
        12px;
}


/* =========================================================
   32. TABLE HEADER
   ========================================================= */

.rnr-gridtable th,
.rnr-gridtable thead th,
.r-grid table thead th,
.table thead th,
.r-grid-header > div,
[data-itemtype="grid_field_label"],
th.bs-gridcell {

    height:
        36px;

    padding:
        9px 12px !important;

    background:
        #f6f6f7 !important;

    background-image:
        none !important;

    color:
        #707070 !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    vertical-align:
        middle !important;

    white-space:
        nowrap;

    border:
        none !important;
}


.rnr-gridtable th a,
.r-grid table thead th a,
.table thead th a,
.r-grid-header a,
[data-itemtype="grid_field_label"] a {

    color:
        #707070 !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    text-decoration:
        none !important;
}


/* =========================================================
   33. TABLE BODY
   ========================================================= */

.rnr-gridtable td,
.r-grid table tbody td,
.table tbody td,
.r-gridrow td.r-ori-vert {

    padding:
        9px 12px !important;

    background:
        #ffffff;

    color:
        #333333;

    font-size:
        12px;

    vertical-align:
        middle !important;

    border-top:
        none !important;

    border-left:
        none !important;

    border-right:
        none !important;

    border-bottom:
        1px solid #f1f1f2 !important;
}


.rnr-gridtable tbody tr:hover td,
.r-grid table tbody tr:hover td,
.table tbody tr:hover td {

    background:
        #fafafd !important;
}


/* =========================================================
   34. GRID ACTION BUTTON
   ========================================================= */

[data-cellid="grid_cell_icons"] {

    white-space:
        nowrap;
}


[data-cellid="grid_cell_icons"] .btn-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    margin:
        0 2px;

    padding:
        0 !important;

    background:
        #ffffff;

    border:
        1px solid #e1e1e3;

    border-radius:
        50%;

    color:
        #4f4f4f !important;

    box-shadow:
        0 1px 3px rgba(0,0,0,0.08);
}


/* =========================================================
   35. LIST FIELD NO WRAP
   ========================================================= */

body.function-list th {

    white-space:
        nowrap !important;
}


body.function-list
td:not([data-field="description"])
:not([data-field="notes"])
:not([data-field="remarks"]) {

    white-space:
        nowrap !important;

    word-wrap:
        normal !important;

    overflow-wrap:
        normal !important;
}


/* Long fields may wrap */

body.function-list td[data-field="description"],
body.function-list td[data-field="notes"],
body.function-list td[data-field="remarks"],
body.function-list span[data-field="description"],
body.function-list span[data-field="notes"],
body.function-list span[data-field="remarks"] {

    white-space:
        normal !important;
}


/* =========================================================
   36. RESPONSIVE TABLE
   ========================================================= */

.rnr-gridtable-wrapper,
.table-responsive,
.r-grid {

    overflow-x:
        auto;

    -webkit-overflow-scrolling:
        touch;
}


/* =========================================================
   =========================================================
   ADD / EDIT PAGE
   =========================================================
   ========================================================= */


/* =========================================================
   37. ADD / EDIT CONTENT
   ========================================================= */

body.function-add .r-body,
body.function-edit .r-body {

    padding-top:
        14px !important;
}


body.function-add .r-content,
body.function-edit .r-content {

    width:
        100% !important;

    max-width:
        none !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}


/* =========================================================
   38. FORM LABELS
   ========================================================= */

.r-edit-label {

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 0 4px !important;

    text-align:
        left !important;
}


.r-edit-field {

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.r-edit-label label,
.r-edit-label .control-label,
.control-label {

    margin-bottom:
        4px;

    color:
        #353535;

    font-size:
        10.5px;

    font-weight:
        600;
}


/* =========================================================
   39. FORM CONTROLS
   ========================================================= */

.form-control,
.r-edit-field input[type="text"],
.r-edit-field input[type="number"],
.r-edit-field input[type="email"],
.r-edit-field input[type="password"],
.r-edit-field input[type="date"],
.r-edit-field select,
.r-edit-field textarea {

    background:
        #ffffff;

    border:
        1px solid #e6e6e8 !important;

    border-radius:
        3px !important;

    color:
        #333333;

    font-size:
        11px !important;

    box-shadow:
        none !important;
}


input.form-control,
select.form-control {

    min-height:
        34px;
}


textarea.form-control {

    min-height:
        80px;

    resize:
        vertical;
}


.form-control::placeholder {

    color:
        #b0b0b3 !important;
}


.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {

    border-color:
        var(--dswd-blue) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 2px rgba(46,49,146,0.10) !important;
}


/* =========================================================
   40. ADD/EDIT PANEL
   ========================================================= */

body.function-add .panel,
body.function-edit .panel {

    margin-bottom:
        10px;

    background:
        #f8f8f9;

    border:
        none !important;

    border-radius:
        6px !important;

    box-shadow:
        none !important;
}


/* =========================================================
   =========================================================
   MODAL
   =========================================================
   ========================================================= */


/* =========================================================
   41. MODAL
   ========================================================= */

.modal-content {

    border:
        none !important;

    border-radius:
        10px !important;

    overflow:
        hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.18) !important;
}


.modal-header {

    background:
        var(--dswd-blue) !important;

    border:
        none !important;

    color:
        #ffffff !important;
}


.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4 {

    color:
        #ffffff !important;
}


.modal-header .close,
.modal-header .close span {

    color:
        #ffffff !important;

    opacity:
        1 !important;
}


/* =========================================================
   =========================================================
   PAGINATION
   =========================================================
   ========================================================= */

.pagination > li > a,
.pagination > li > span {

    margin:
        0 2px;

    border:
        1px solid #dddddf !important;

    border-radius:
        5px !important;

    background:
        #ffffff !important;

    color:
        #555555 !important;
}


.pagination > .active > a,
.pagination > .active > span {

    background:
        var(--dswd-blue) !important;

    border-color:
        var(--dswd-blue) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   =========================================================
   RESPONSIVE
   =========================================================
   ========================================================= */


/* =========================================================
   42. TABLET
   ========================================================= */

@media screen and (max-width: 991px) {

    body:not(.function-login) .r-body {

        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }


    .r-topheader {

        min-height:
            62px !important;
    }


    .r-topheader .navbar {

        min-height:
            62px !important;
    }


    .r-topheader .wings-approval-alert,
    .r-topheader .pending-approval-alert,
    .r-topheader .approval-alert,
    .r-topheader [data-itemid*="pending"],
    .r-topheader [data-itemid*="approval"] {

        padding:
            4px 9px !important;

        margin:
            0 4px !important;

        font-size:
            10px !important;
    }
}


/* =========================================================
   43. MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    :root {

        --wings-header-height:
            58px;
    }


    body:not(.function-login) .r-body {

        padding-left:
            10px !important;

        padding-right:
            10px !important;
    }


    .r-topheader {

        min-height:
            var(--wings-header-height) !important;
    }


    .r-topheader .navbar {

        min-height:
            var(--wings-header-height) !important;
    }


    .r-topheader [data-itemtype="pageheader"] h1,
    .r-topheader .r-page-title {

        font-size:
            18px !important;

        line-height:
            22px !important;
    }


    /*
       Pending alert may be too wide on phones.
       Keep visible but compact.
    */

    .r-topheader .wings-approval-alert,
    .r-topheader .pending-approval-alert,
    .r-topheader .approval-alert,
    .r-topheader [data-itemid*="pending"],
    .r-topheader [data-itemid*="approval"] {

        max-width:
            170px !important;

        padding:
            4px 7px !important;

        margin:
            0 3px !important;

        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;

        font-size:
            9px !important;
    }


    .rnr-gridtable th,
    .table thead th {

        padding:
            8px 7px !important;

        font-size:
            10px !important;
    }


    .rnr-gridtable td,
    .table tbody td {

        padding:
            8px 7px !important;

        font-size:
            11px !important;
    }
}


/* =========================================================
   44. PRINT
   ========================================================= */

@media print {

    .panel,
    .card {

        box-shadow:
            none !important;
    }


    .r-left {

        display:
            none !important;
    }
}
/* =========================================================
   45. ADD / EDIT - PHPRUNNER SECTION COLOR PRESERVATION
   ========================================================= */

/*
   PHPRunner Page Designer section colors must be allowed to
   render. Do not overwrite the configured header background
   or text color here.
*/

body.function-add .r-section,
body.function-edit .r-section,
body.function-add [data-itemtype="section"],
body.function-edit [data-itemtype="section"] {

    border-radius:
        6px !important;

    overflow:
        hidden !important;
}


body.function-add .r-section .panel-heading,
body.function-edit .r-section .panel-heading,
body.function-add [data-itemtype="section"] .panel-heading,
body.function-edit [data-itemtype="section"] .panel-heading {

    min-height:
        38px !important;

    padding:
        10px 12px !important;

    border-radius:
        5px 5px 0 0 !important;

    border:
        none !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        18px !important;
}


body.function-add .r-section .panel-heading *,
body.function-edit .r-section .panel-heading *,
body.function-add [data-itemtype="section"] .panel-heading *,
body.function-edit [data-itemtype="section"] .panel-heading * {

    color:
        inherit !important;
}


body.function-add .r-section .panel-body,
body.function-edit .r-section .panel-body,
body.function-add [data-itemtype="section"] .panel-body,
body.function-edit [data-itemtype="section"] .panel-body {

    padding:
        14px !important;
}


/* =========================================================
   46. ADD / EDIT - FORM CARD SPACING
   ========================================================= */

body.function-add .r-edit-form,
body.function-edit .r-edit-form,
body.function-add .r-edit-form > .row,
body.function-edit .r-edit-form > .row {

    max-width:
        100% !important;
}


body.function-add .r-edit-field,
body.function-edit .r-edit-field {

    min-width:
        0 !important;
}


body.function-add .form-group,
body.function-edit .form-group {

    margin-bottom:
        12px !important;
}


/* =========================================================
   47. ADD / EDIT - READONLY / DISABLED FIELDS
   ========================================================= */

body.function-add .form-control[readonly],
body.function-edit .form-control[readonly],
body.function-add .form-control:disabled,
body.function-edit .form-control:disabled,
body.function-add input[readonly],
body.function-edit input[readonly],
body.function-add input:disabled,
body.function-edit input:disabled,
body.function-add select:disabled,
body.function-edit select:disabled {

    background:
        #e7e8ea !important;

    color:
        #4f4f4f !important;

    opacity:
        1 !important;
}


/* =========================================================
   48. ADD / EDIT - DETAIL GRID
   ========================================================= */

/*
   Purchase Request Detail and other inline child grids.
   The yellow section/title color may still be configured by
   the page/detail layout, while this block keeps the grid clean.
*/

body.function-add .r-grid,
body.function-edit .r-grid,
body.function-add .rnr-gridtable-wrapper,
body.function-edit .rnr-gridtable-wrapper,
body.function-add .table-responsive,
body.function-edit .table-responsive {

    max-width:
        100% !important;

    overflow-x:
        auto !important;

    -webkit-overflow-scrolling:
        touch;
}


body.function-add .r-grid table,
body.function-edit .r-grid table,
body.function-add .rnr-gridtable,
body.function-edit .rnr-gridtable {

    background:
        #f7f7f8 !important;

    border-radius:
        0 0 6px 6px !important;
}


body.function-add .r-grid table thead th,
body.function-edit .r-grid table thead th,
body.function-add .rnr-gridtable thead th,
body.function-edit .rnr-gridtable thead th {

    background:
        #f7f7f8 !important;

    color:
        #555555 !important;

    font-size:
        11px !important;

    font-weight:
        500 !important;

    border:
        none !important;
}


body.function-add .r-grid table tbody td,
body.function-edit .r-grid table tbody td,
body.function-add .rnr-gridtable tbody td,
body.function-edit .rnr-gridtable tbody td {

    background:
        #f7f7f8 !important;

    border:
        none !important;
}


/* =========================================================
   49. ADD / EDIT - INLINE BUTTONS
   ========================================================= */

body.function-add .r-grid .btn,
body.function-edit .r-grid .btn,
body.function-add .rnr-gridtable .btn,
body.function-edit .rnr-gridtable .btn {

    min-height:
        30px !important;

    padding:
        5px 10px !important;

    font-size:
        11px !important;

    border-radius:
        4px !important;
}


/* =========================================================
   50. ADD / EDIT - PURPOSE / TEXTAREA
   ========================================================= */

body.function-add textarea.form-control,
body.function-edit textarea.form-control {

    min-height:
        125px !important;

    background:
        #ffffff !important;
}


/* =========================================================
   51. ADD / EDIT - FILE UPLOAD
   ========================================================= */

body.function-add .fileinput-button,
body.function-edit .fileinput-button,
body.function-add .btn-file,
body.function-edit .btn-file {

    background:
        var(--dswd-blue) !important;

    border-color:
        var(--dswd-blue) !important;

    color:
        #ffffff !important;
}


body.function-add .fileinput-button:hover,
body.function-edit .fileinput-button:hover,
body.function-add .btn-file:hover,
body.function-edit .btn-file:hover {

    background:
        var(--dswd-blue-dark) !important;

    border-color:
        var(--dswd-blue-dark) !important;
}


/* =========================================================
   52. ADD / EDIT - SELECT2
   ========================================================= */

body.function-add .select2-container .select2-selection--single,
body.function-edit .select2-container .select2-selection--single {

    min-height:
        34px !important;

    border:
        1px solid #e6e6e8 !important;

    border-radius:
        3px !important;
}


body.function-add .select2-container .select2-selection--single .select2-selection__rendered,
body.function-edit .select2-container .select2-selection--single .select2-selection__rendered {

    line-height:
        32px !important;

    font-size:
        11px !important;
}


body.function-add .select2-container .select2-selection--single .select2-selection__arrow,
body.function-edit .select2-container .select2-selection--single .select2-selection__arrow {

    height:
        32px !important;
}


/* =========================================================
   53. ADD / EDIT - HIGH ZOOM / SMALL VIEWPORT
   ========================================================= */

@media screen and (max-width: 640px) {

    body.function-add .r-body,
    body.function-edit .r-body {

        padding-left:
            8px !important;

        padding-right:
            8px !important;
    }


    body.function-add .r-section .panel-body,
    body.function-edit .r-section .panel-body,
    body.function-add [data-itemtype="section"] .panel-body,
    body.function-edit [data-itemtype="section"] .panel-body {

        padding:
            10px !important;
    }


    body.function-add .form-control,
    body.function-edit .form-control {

        width:
            100% !important;
    }
}
/* =========================================================
   54. ADD / EDIT - DETAIL PANEL HEADER = DSWD YELLOW
   ========================================================= */

/*
   PHPRunner inline/detail relationships commonly render
   with Bootstrap's .panel-info styling. Override only on
   Add/Edit pages so transaction detail headers use the
   official DSWD yellow.
*/

body.function-add .panel-info > .panel-heading,
body.function-edit .panel-info > .panel-heading,
body.function-add .r-details-grid > .panel-heading,
body.function-edit .r-details-grid > .panel-heading,
body.function-add [data-itemtype="details"] > .panel-heading,
body.function-edit [data-itemtype="details"] > .panel-heading,
body.function-add [data-itemtype="details"] .panel-info > .panel-heading,
body.function-edit [data-itemtype="details"] .panel-info > .panel-heading {

    background:
        var(--dswd-yellow) !important;

    background-color:
        var(--dswd-yellow) !important;

    background-image:
        none !important;

    color:
        #111111 !important;

    border-color:
        var(--dswd-yellow) !important;
}


/* Keep detail title dark/readable without recoloring buttons */

body.function-add .panel-info > .panel-heading .panel-title,
body.function-edit .panel-info > .panel-heading .panel-title,
body.function-add .panel-info > .panel-heading > span:not(.btn),
body.function-edit .panel-info > .panel-heading > span:not(.btn),
body.function-add .panel-info > .panel-heading > a:not(.btn),
body.function-edit .panel-info > .panel-heading > a:not(.btn) {

    color:
        #111111 !important;
}


/* Detail panel border/body */

body.function-add .panel-info,
body.function-edit .panel-info {

    border-color:
        #ececec !important;

    box-shadow:
        none !important;
}


body.function-add .panel-info > .panel-body,
body.function-edit .panel-info > .panel-body {

    background:
        #f7f7f8 !important;
}
/* =========================================================
   55. ADD / EDIT - PHPRUNNER ACTION BUTTON COLORS
   ========================================================= */

/*
   PHPRunner frequently renders Save as .btn-primary and
   Inline Add / Inline Cancel as .btn-info.  These rules
   target the actual actions instead of recoloring every
   primary/info button on the page.
*/


/* ---------------------------------------------------------
   SAVE = GREEN
   --------------------------------------------------------- */

body.function-add [id*="saveButton"],
body.function-edit [id*="saveButton"],
body.function-add [id*="SaveButton"],
body.function-edit [id*="SaveButton"],
body.function-add [data-itemtype="save_button"],
body.function-edit [data-itemtype="save_button"],
body.function-add [data-itemid="save"],
body.function-edit [data-itemid="save"],
body.function-add [data-itemid*="save_button"],
body.function-edit [data-itemid*="save_button"],
body.function-add [data-itemtype="save_button"] .btn,
body.function-edit [data-itemtype="save_button"] .btn,
body.function-add [data-itemid="save"] .btn,
body.function-edit [data-itemid="save"] .btn,
body.function-add [data-itemid*="save_button"] .btn,
body.function-edit [data-itemid*="save_button"] .btn {

    background:
        var(--wings-green) !important;

    background-color:
        var(--wings-green) !important;

    background-image:
        none !important;

    border-color:
        var(--wings-green) !important;

    color:
        #ffffff !important;

    box-shadow:
        none !important;
}


body.function-add [id*="saveButton"]:hover,
body.function-edit [id*="saveButton"]:hover,
body.function-add [id*="SaveButton"]:hover,
body.function-edit [id*="SaveButton"]:hover,
body.function-add [data-itemtype="save_button"]:hover,
body.function-edit [data-itemtype="save_button"]:hover,
body.function-add [data-itemtype="save_button"] .btn:hover,
body.function-edit [data-itemtype="save_button"] .btn:hover,
body.function-add [data-itemid="save"] .btn:hover,
body.function-edit [data-itemid="save"] .btn:hover {

    background:
        var(--wings-green-dark) !important;

    background-color:
        var(--wings-green-dark) !important;

    border-color:
        var(--wings-green-dark) !important;

    color:
        #ffffff !important;
}


/*
   Fallback for PHPRunner top/bottom action bars:
   Save is normally the primary action in these bars.
*/
body.function-add .r-buttons .btn-primary,
body.function-edit .r-buttons .btn-primary,
body.function-add [data-container*="buttons"] > .btn-primary,
body.function-edit [data-container*="buttons"] > .btn-primary,
body.function-add [data-container*="buttons"] .btn-primary[data-itemtype="save_button"],
body.function-edit [data-container*="buttons"] .btn-primary[data-itemtype="save_button"] {

    background:
        var(--wings-green) !important;

    background-color:
        var(--wings-green) !important;

    border-color:
        var(--wings-green) !important;

    color:
        #ffffff !important;
}


/* ---------------------------------------------------------
   CANCEL = DSWD RED
   --------------------------------------------------------- */

body.function-add [id*="cancelButton"],
body.function-edit [id*="cancelButton"],
body.function-add [id*="CancelButton"],
body.function-edit [id*="CancelButton"],
body.function-add [data-itemtype="cancel_button"],
body.function-edit [data-itemtype="cancel_button"],
body.function-add [data-itemid="cancel"],
body.function-edit [data-itemid="cancel"],
body.function-add [data-itemid*="cancel_button"],
body.function-edit [data-itemid*="cancel_button"],
body.function-add [data-itemtype="cancel_button"] .btn,
body.function-edit [data-itemtype="cancel_button"] .btn,
body.function-add [data-itemid="cancel"] .btn,
body.function-edit [data-itemid="cancel"] .btn {

    background:
        var(--dswd-red) !important;

    background-color:
        var(--dswd-red) !important;

    background-image:
        none !important;

    border-color:
        var(--dswd-red) !important;

    color:
        #ffffff !important;

    box-shadow:
        none !important;
}


body.function-add [id*="cancelButton"]:hover,
body.function-edit [id*="cancelButton"]:hover,
body.function-add [id*="CancelButton"]:hover,
body.function-edit [id*="CancelButton"]:hover,
body.function-add [data-itemtype="cancel_button"] .btn:hover,
body.function-edit [data-itemtype="cancel_button"] .btn:hover {

    background:
        var(--dswd-red-dark) !important;

    background-color:
        var(--dswd-red-dark) !important;

    border-color:
        var(--dswd-red-dark) !important;

    color:
        #ffffff !important;
}


/* ---------------------------------------------------------
   BACK TO LIST = WHITE / DARK OUTLINE
   --------------------------------------------------------- */

body.function-add [id*="backButton"],
body.function-edit [id*="backButton"],
body.function-add [id*="BackButton"],
body.function-edit [id*="BackButton"],
body.function-add [data-itemtype="back_button"],
body.function-edit [data-itemtype="back_button"],
body.function-add [data-itemid*="back"],
body.function-edit [data-itemid*="back"],
body.function-add [data-itemtype="back_button"] .btn,
body.function-edit [data-itemtype="back_button"] .btn,
body.function-add [data-itemid*="back"] .btn,
body.function-edit [data-itemid*="back"] .btn {

    background:
        #ffffff !important;

    background-color:
        #ffffff !important;

    background-image:
        none !important;

    border:
        1px solid #bfc0c4 !important;

    color:
        #222222 !important;

    box-shadow:
        none !important;
}


body.function-add [id*="backButton"]:hover,
body.function-edit [id*="backButton"]:hover,
body.function-add [data-itemtype="back_button"] .btn:hover,
body.function-edit [data-itemtype="back_button"] .btn:hover,
body.function-add [data-itemid*="back"] .btn:hover,
body.function-edit [data-itemid*="back"] .btn:hover {

    background:
        #f5f5f6 !important;

    border-color:
        #9fa0a4 !important;

    color:
        var(--dswd-blue) !important;
}


/* ---------------------------------------------------------
   RESET = WHITE / NEUTRAL
   --------------------------------------------------------- */

body.function-add [id*="resetButton"],
body.function-edit [id*="resetButton"],
body.function-add [data-itemtype="reset_button"],
body.function-edit [data-itemtype="reset_button"],
body.function-add [data-itemtype="reset_button"] .btn,
body.function-edit [data-itemtype="reset_button"] .btn {

    background:
        #ffffff !important;

    border:
        1px solid #cfcfd2 !important;

    color:
        #333333 !important;
}


/* =========================================================
   56. INLINE DETAIL HEADER BUTTONS
   ========================================================= */

/*
   In the Purchase Request Detail header:
      first button  = Inline Add  -> black
      second button = Cancel      -> red
*/

body.function-add .panel-info > .panel-heading .btn-info,
body.function-edit .panel-info > .panel-heading .btn-info {

    border-radius:
        4px !important;

    box-shadow:
        none !important;
}


/* Inline Add */
body.function-add .panel-info > .panel-heading .btn-info:first-of-type,
body.function-edit .panel-info > .panel-heading .btn-info:first-of-type,
body.function-add .panel-info > .panel-heading [id*="inlineAdd"],
body.function-edit .panel-info > .panel-heading [id*="inlineAdd"],
body.function-add .panel-info > .panel-heading [id*="InlineAdd"],
body.function-edit .panel-info > .panel-heading [id*="InlineAdd"],
body.function-add .panel-info > .panel-heading [onclick*="inlineAdd"],
body.function-edit .panel-info > .panel-heading [onclick*="inlineAdd"] {

    background:
        #171717 !important;

    background-color:
        #171717 !important;

    background-image:
        none !important;

    border-color:
        #171717 !important;

    color:
        #ffffff !important;
}


body.function-add .panel-info > .panel-heading .btn-info:first-of-type:hover,
body.function-edit .panel-info > .panel-heading .btn-info:first-of-type:hover {

    background:
        var(--dswd-blue) !important;

    background-color:
        var(--dswd-blue) !important;

    border-color:
        var(--dswd-blue) !important;

    color:
        #ffffff !important;
}


/* Inline Cancel */
body.function-add .panel-info > .panel-heading .btn-info:last-of-type:not(:first-of-type),
body.function-edit .panel-info > .panel-heading .btn-info:last-of-type:not(:first-of-type),
body.function-add .panel-info > .panel-heading [id*="inlineCancel"],
body.function-edit .panel-info > .panel-heading [id*="inlineCancel"],
body.function-add .panel-info > .panel-heading [id*="InlineCancel"],
body.function-edit .panel-info > .panel-heading [id*="InlineCancel"],
body.function-add .panel-info > .panel-heading [onclick*="inlineCancel"],
body.function-edit .panel-info > .panel-heading [onclick*="inlineCancel"] {

    background:
        var(--dswd-red) !important;

    background-color:
        var(--dswd-red) !important;

    background-image:
        none !important;

    border-color:
        var(--dswd-red) !important;

    color:
        #ffffff !important;
}


body.function-add .panel-info > .panel-heading .btn-info:last-of-type:not(:first-of-type):hover,
body.function-edit .panel-info > .panel-heading .btn-info:last-of-type:not(:first-of-type):hover {

    background:
        var(--dswd-red-dark) !important;

    background-color:
        var(--dswd-red-dark) !important;

    border-color:
        var(--dswd-red-dark) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   57. KEEP UPLOAD BUTTON BLUE
   ========================================================= */

body.function-add .fileinput-button,
body.function-edit .fileinput-button,
body.function-add .btn-file,
body.function-edit .btn-file,
body.function-add [data-itemtype*="file"] .btn-primary,
body.function-edit [data-itemtype*="file"] .btn-primary {

    background:
        var(--dswd-blue) !important;

    background-color:
        var(--dswd-blue) !important;

    border-color:
        var(--dswd-blue) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   END OF WINGS / DSWD MODIFY CSS
   ========================================================= */

/* =========================================================
   58. WINGS LOGIN PAGE - FIXED VIEWPORT LAYOUT
   PHPRUNNER 11.3

   ARCHITECTURE:
   - Footer is fixed at the bottom of the viewport.
   - Login area is fixed ABOVE the footer.
   - The login area has its own vertical scrolling.
   - Card is centered when it fits.
   - At high zoom, the login area scrolls instead of allowing
     the card to go underneath the footer.
   - Desktop browser zoom does NOT trigger mobile layout.
   ========================================================= */


/* =========================================================
   LOGIN VARIABLES
   ========================================================= */

body.function-login {
    --wings-login-card-width: 435px;

    /*
     * This SAME variable must also be used by dswd-footer.css.
     */
    --dswd-login-footer-height: 56px;

    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #151821 !important;

    overflow: hidden !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


/* =========================================================
   ROTATING BACKGROUND
   ========================================================= */

body.function-login #wingsLoginBackdrop {
    position: fixed !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #151821 !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 0 !important;
}


body.function-login
#wingsLoginBackdrop
.wings-login-slide {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    opacity: 0 !important;

    transition:
        opacity 1.2s ease-in-out !important;
}


body.function-login
#wingsLoginBackdrop
.wings-login-slide.is-visible {
    opacity: 1 !important;
}


/* =========================================================
   FIGMA OVERLAY
   ========================================================= */

body.function-login #wingsLoginVisualOverlay {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 228, 1, 0.00) 0%,
            rgba(2, 29, 145, 0.40) 50%,
            rgba(249, 1, 1, 0.64) 100%
        ),
        rgba(30, 30, 30, 0.50) !important;

    pointer-events: none !important;

    z-index: 5 !important;
}


/* =========================================================
   LOGIN VIEWPORT AREA

   This area can NEVER go under the footer because its bottom
   edge is the footer height.
   ========================================================= */

body.function-login
.wings-login-flex-shell {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;

    bottom:
        var(--dswd-login-footer-height) !important;

    left: 0 !important;

    z-index: 10 !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
        24px
        16px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    background: transparent !important;

    box-sizing: border-box !important;

    /*
     * High zoom scrolls inside this area.
     * Footer remains visible and never covers the card.
     */
    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   CENTERING WRAPPER CHAIN

   JavaScript adds .wings-login-flex-ancestor only to the
   wrappers BETWEEN the login card and BODY.

   These wrappers fill the available login viewport.
   They do not change the fields inside the card.
   ========================================================= */

body.function-login
.wings-login-flex-shell
> .wings-login-flex-ancestor {
    flex: 1 0 auto !important;

    width: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
}


body.function-login
.wings-login-flex-ancestor:not(.wings-login-flex-shell) {
    position: static !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 1 0 auto !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;

    margin: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    float: none !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* Bootstrap offset / column reset */

body.function-login
.wings-login-flex-ancestor.row,

body.function-login
.wings-login-flex-ancestor[class*="col-"] {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    float: none !important;
}


/* =========================================================
   LOGIN CARD
   ========================================================= */

body.function-login
.wings-login-card,

body.function-login
.bs-pagepanel.wings-login-card {
    position: relative !important;

    display: block !important;

    flex: 0 0 auto !important;

    width:
        min(
            var(--wings-login-card-width),
            calc(100vw - 32px)
        ) !important;

    max-width:
        var(--wings-login-card-width) !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin:
        0
        auto !important;

    padding: 0 !important;

    float: none !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    background: #ffffff !important;

    border: 0 !important;

    border-radius: 22px !important;

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.20) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    z-index: 20 !important;
}


/* =========================================================
   REMOVE OLD PHPRUNNER TOP STRIP
   ========================================================= */

body.function-login
.wings-login-card
.panel-heading {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 0 !important;

    box-shadow: none !important;
}


body.function-login
.wings-login-card
.panel-heading.wings-empty-login-heading {
    display: none !important;

    height: 0 !important;
    min-height: 0 !important;
}


/* =========================================================
   CARD BODY
   ========================================================= */

body.function-login
.wings-login-card
.panel-body {
    width: 100% !important;

    margin: 0 !important;

    padding:
        22px
        26px
        20px !important;

    background: #ffffff !important;

    box-sizing: border-box !important;
}


body.function-login
.wings-login-card
.panel-footer {
    margin: 0 !important;

    padding:
        0
        26px
        20px !important;

    background: #ffffff !important;

    border: 0 !important;
}


body.function-login
.wings-login-card
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   WINGS LOGO
   ========================================================= */

body.function-login
.wings-login-logo-main {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 78px !important;
    max-height: 72px !important;

    margin:
        0
        auto
        8px !important;

    object-fit: contain !important;
}


/* =========================================================
   SYSTEM TITLE
   ========================================================= */

body.function-login
.wings-login-system-title,

body.function-login
.wings-login-system-title * {
    color: #222222 !important;

    font-size: 18px !important;

    font-style: normal !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    text-align: center !important;
}


body.function-login
.wings-login-system-title {
    display: block !important;

    width: 100% !important;

    margin:
        0
        0
        5px !important;
}


/* =========================================================
   TAGLINE
   ========================================================= */

body.function-login
.wings-login-tagline {
    display: block !important;

    width: 100% !important;

    margin:
        8px
        0
        17px !important;

    color: #ee1c25 !important;

    font-size: 11px !important;

    font-style: italic !important;

    font-weight: 600 !important;

    text-align: center !important;
}


/* =========================================================
   LOGIN TITLE
   ========================================================= */

body.function-login
.wings-login-intro {
    display: block !important;

    width: 100% !important;

    margin:
        0
        0
        23px !important;

    color: #2e3192 !important;

    font-size: 18px !important;

    font-style: normal !important;

    font-weight: 700 !important;

    text-align: center !important;
}


/* =========================================================
   FORM - LEFT ALIGNED
   ========================================================= */

body.function-login
.wings-login-card
.form-group,

body.function-login
.wings-login-card
.r-integrated-field,

body.function-login
.wings-login-card
.r-edit-field,

body.function-login
.wings-login-card
.rnr-field-control,

body.function-login
.wings-login-card
[data-field],

body.function-login
.wings-login-card
[data-itemtype="integrated_edit_field"] {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left !important;
}


body.function-login
.wings-login-card
.form-group {
    margin-bottom: 18px !important;
}


/* =========================================================
   LABELS
   ========================================================= */

body.function-login
.wings-login-card
.control-label,

body.function-login
.wings-login-card
.form-group > label {
    display: block !important;

    width: 100% !important;

    margin:
        0
        0
        4px
        0 !important;

    padding: 0 !important;

    color: #696969 !important;

    font-size: 10px !important;

    font-style: normal !important;

    font-weight: 400 !important;

    text-align: left !important;
}


/* =========================================================
   USERNAME / PASSWORD
   ========================================================= */

body.function-login
.wings-login-card
.form-control,

body.function-login
.wings-login-card
input[type="text"],

body.function-login
.wings-login-card
input[type="password"],

body.function-login
.wings-login-card
input[type="email"] {
    display: block !important;

    width: 100% !important;

    height: 32px !important;
    min-height: 32px !important;

    margin: 0 !important;

    padding:
        4px
        0
        5px !important;

    background: transparent !important;

    border: 0 !important;

    border-bottom:
        1.5px
        solid
        #686868 !important;

    border-radius: 0 !important;

    color: #333333 !important;

    font-size: 12px !important;

    font-style: normal !important;

    text-align: left !important;

    box-shadow: none !important;

    outline: none !important;

    box-sizing: border-box !important;
}


body.function-login
.wings-login-card
.form-control:focus,

body.function-login
.wings-login-card
input[type="text"]:focus,

body.function-login
.wings-login-card
input[type="password"]:focus {
    border: 0 !important;

    border-bottom:
        2px
        solid
        #2e3192 !important;

    box-shadow: none !important;
}


/* =========================================================
   PASSWORD INPUT GROUP
   ========================================================= */

body.function-login
.wings-login-card
.input-group {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;

    border-bottom:
        1.5px
        solid
        #686868 !important;

    box-shadow: none !important;
}


body.function-login
.wings-login-card
.input-group
.form-control {
    border-bottom: 0 !important;
}


body.function-login
.wings-login-card
.input-group-addon,

body.function-login
.wings-login-card
.input-group-btn > .btn {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   REMEMBER ME
   ========================================================= */

body.function-login
.wings-login-card
.checkbox {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    min-height: 16px !important;

    margin:
        7px
        0
        0
        0 !important;

    padding: 0 !important;

    text-align: left !important;
}


body.function-login
.wings-login-card
.checkbox label {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #666666 !important;

    font-size: 9px !important;

    font-style: normal !important;

    text-align: left !important;
}


body.function-login
.wings-login-card
.checkbox
input[type="checkbox"] {
    position: static !important;

    float: none !important;

    width: 13px !important;
    height: 13px !important;

    margin:
        0
        6px
        0
        0 !important;

    accent-color: #2e3192;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

body.function-login
.wings-login-button-wrap {
    width: 100% !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


body.function-login
.wings-login-button-host {
    margin-top: 15px !important;
}


body.function-login
.wings-login-button-action {
    display: block !important;

    width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;

    padding:
        0
        16px !important;

    background: #0828ad !important;

    border: 0 !important;

    border-radius: 4px !important;

    color: #ffffff !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    line-height: 44px !important;

    text-align: center !important;

    box-shadow: none !important;
}


/* =========================================================
   DSWD / BAGONG PILIPINAS
   ========================================================= */

body.function-login
.wings-login-agency-logo {
    display: block !important;

    width: auto !important;

    height: auto !important;

    max-width: 250px !important;

    max-height: 58px !important;

    margin:
        20px
        auto
        0 !important;

    object-fit: contain !important;
}


/* =========================================================
   PARTNERSHIP
   ========================================================= */

body.function-login
.wings-login-partnership-label {
    display: block !important;

    width: 100% !important;

    margin:
        18px
        0
        12px !important;

    color: #333333 !important;

    font-size: 9px !important;

    font-style: italic !important;

    text-align: center !important;
}


/* =========================================================
   AUSTRALIAN AID / WFP
   ========================================================= */

body.function-login
.wings-login-partner-logo {
    display: inline-block !important;

    width: auto !important;

    height: auto !important;

    max-width: 96px !important;

    max-height: 40px !important;

    margin:
        0
        10px !important;

    object-fit: contain !important;
}


/* =========================================================
   ACTUAL MOBILE ONLY
   ========================================================= */

/*
   Login OnLoad adds .wings-mobile only for a real coarse
   pointer device. Browser zoom on desktop does not add it.
*/

body.function-login.wings-mobile {
    --dswd-login-footer-height: 84px;
}


body.function-login.wings-mobile
.wings-login-flex-shell {
    padding:
        16px
        12px !important;
}


body.function-login.wings-mobile
.wings-login-card {
    width:
        min(
            100%,
            420px
        ) !important;

    border-radius: 18px !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.function-login
    #wingsLoginBackdrop
    .wings-login-slide {
        transition: none !important;
    }
}


/* =========================================================
   END SECTION 58
   ========================================================= */
   
   
