/*------------------------------------*\
    NAMING CONVENTIONS
\*------------------------------------*/
/*
    1) Use Ctrl-K+D before you save and check in. This will format the indentation for you.

    2) Begin every new major section of a CSS project with a title and comment it

    3) Prefix all class names with "aq-". Not using prefixes in your class names will eventually clash with imported styles.
        e.g. font awesome use prefix fa-. For a copy icon the class name is "fa-copy".
        if it wasn't prefixed with fa- the chances are some other css will have a class name of "copy".

    4) As we are all familiar with bootstrap we should adopt their naming conventions.
    
        For example, to set the text of an element to lowercase in bootstrap there is a class that does this for us.
        .text-lowercase
        Notice how the first part of the class name is the 'root' (what it is actually relating to) any 'text' element.
             - this will affect anything that has text in it.
        The 2nd part of the class name is the description (what is it actually doing) setting text to 'lowercase'
             - this is describing what this class is doing. Making something lowercase
        It's very clear to understand/use/follow/predict that 'text-lowercase' is converting our text element to lowercase
        
        If we are creating a brand new class that has no relation to elements or bootstrap classes that we want to change globally
        then we should create our new classes based on the aquilastrap naming convention 'aq-'
        
        For example, if we were to create the text lowercase class it would be
        .aq-text-lowercase {
        
        }

        .aq-         is our prefix
        text         is our root. What are we making changes to? In this case, any text field element.
        lowercase    is our description. What is the end result? Setting our text to lowercase.

        Each part is delimited by a single dash (-) which is bootstraps naming convention.

    5) Best practices:
        o Use generic meaningful names. E.g. if you need to create a class to convert the text of a label to lowercase:
            .aq-label-lowercase {} 
            This is a bad name as this class could be used for many different elements, not just a label. (using this class in a button will syntactically look wrong)
            Try and think about the bigger picture. Can you create a class that will not only help you now, but also in the future and for any other developer.
            .aq-text-lowercase {} is a much better name as it implies that it can be used for any text element. (label, input, textarea, button etc)

        o Write multiple selectors on separate lines.	
           .btn,
           .btn-link {
           }

        o Write hex values in lowercase.	
            #3d3d3d vs #3D3D3D

        o Use double quotes, not single quotes (neither is wrong but we use double in C# so let's be consistent).
            url ("/image.png") vs url ('/image.png')
        
        o Document why you have added the css if it is not blindingly obvious. E.g.
            Although I've added a global style to change the font to our aquila font some element were being overwritten by other style sheets
            Therefore, I explicitly told aquilastrap to set all headers h1 - h6 to use the aquila font and explained why.
            "The headers can be overwritten by bootstrap or other CDNs.
             By doing this we are making sure that our font is being used everywhere without inheriting other css fonts/default font's."

*/


/*
    :root is where we can create global variables and assign values against these variable
    e.g. We can set our default font here and reference --aq-font everywhere that we need to override a font.
    note: you can even use these variables in other style sheets without having to declare them again.
*/
:root {
    --aq-font: "IBM Plex Sans", "Segoe UI","Calibri";
    --aq-font-light: "Segoe UI Light","Calibri";
    --aq-main-colour: #80d3c9;
    --aq-secondary-colour: #2c4f7a;
    --aq-font-size: 14px;
    --aq-font-size-large: 1.1rem;
    --aq-red-text: #ed4545;
    --aq-orange-text: #ed752b;
    --aq-blue-text: #2c4f7a;
    --aq-green-text: #008a00;
    --aq-pink-text: #FF66CC;
    --aq-black-text: #000000;
    --aq-yellow-text: #FFE000;
    --aq-purple-text: #b200ff;
    --aq-grey-text: #777777;
    --aq-grey-light: #C5C7C4;
    --aq-radius: 1rem;
    /*New Colour Scheme*/
    --aq-light-teal-01: #dafff2;
    --aq-light-teal-02: #ddeee9;
    --aq-teal-01: #80d3c9;
    --aq-teal-02: #84c9c3;
    --aq-aqua-blue-01: #00cbff;
    --aq-aqua-blue-02: #3dbfef;
    --aq-blue: #2c4f7a;
    --aq-dark-blue: #1c2b45;
    --aq-blue-grey: #637985;
    --aq-off-white: #f6f6f4;
    --aq-cream: #fffbee;
    --aq-dark-cream: #e4e0bf;
    --aq-orange: #ed752b;
    --aq-white: #ffffff;
    --aq-grey-01: #bfbfbf;
    --aq-grey-02: #808080;
    --aq-grey-03: #404040;
    --aq-black: #000000;
    --fav-bar-height: 30px; /* Adjust as needed */
}


/*------------------------------------*\
    LAYOUT CHANGES
\*------------------------------------*/

.custom-dropdown-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 1rem;
    padding: 0rem 1rem 1rem 1rem;
    justify-content: center;
}


#header-main-bar {
    height: 3.5rem !important;
    transition: 300ms ease-in-out;
    width: -webkit-fill-available;
}

body {
    font-family: var(--aq-font);
    font-size: var(--aq-font-size);
    display: grid;
    grid-template-columns: minmax(auto, 3.3rem) 1fr; /* Sidebar + Main content */
    grid-template-rows: auto 1fr; /* Header (first row) and main content (second row) */
    grid-template-areas:
        "sidebar header" /* Header spans both columns */
        "sidebar main"; /* Sidebar in the first column, main content in the second */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal overflow */
    height: 100vh; /* Make body fill the entire height */
}

/* Header (now using grid-area) */
header {
    height: calc(3.5rem + var(--fav-bar-height, 0px));
    grid-area: header; /* Refers to the header area in grid-template-areas */
}

/* Sidebar (now using grid-area) */
#sidebar {
    box-sizing: border-box;
    height: 100vh;
    width: 25vw;
    max-width: 400px;
    padding: 5px 1em;
    background-color: var(--aq-off-white);
    position: sticky;
    top: 0;
    align-self: start;
    transition: 300ms ease-in-out;
    overflow-y: auto;
    overflow-x: hidden;
    text-wrap: nowrap;
    grid-area: sidebar; /* Refers to the sidebar area in grid-template-areas */
    z-index: 999;
}

/* Main content (now using grid-area) */
#MainBodyDiv {
    transition: 300ms ease-in-out;
    position: relative;
    overflow-x: hidden; /* Prevent horizontal overflow in main content */
    grid-area: main; /* Refers to the main area in grid-template-areas */
}

/* Hide the scrollbar but keep the scrolling functionality */
#sidebar::-webkit-scrollbar {
    width: 0; /*Hides the vertical scrollbar */
    height: 0; /*Hides the horizontal scrollbar */
}

#sidebar::-webkit-scrollbar-thumb {
    background: transparent; /*Make the scrollbar thumb transparent*/
}

#sidebar::-webkit-scrollbar-track {
    background: transparent; /* Make the scrollbar track transparent */
}

#sidebar.closed {
    width: 3.3rem !important;
    min-width: 3.3rem !important;
}

    #sidebar.closed.expanded-on-hover {
        width: 25vw !important;
        max-width: 400px !important;
        min-width: 400px !important;
    }

    /* When sidebar is collapsed, restrict the dropdown button width */
    #sidebar.closed .dropdown-btn {
        width: auto !important; /* Let it shrink to fit content */
    }
    /* When sidebar is collapsed, restrict the dropdown button width */
    #sidebar.closed.expanded-on-hover .dropdown-btn {
        width: 100% !important; /* Let it shrink to fit content */
    }
/* On hover, display all content inside dropdown-btn and bring it to the front */
/*#sidebar.closed .dropdown-btn:hover {
            z-index: 999;
            position: fixed;
            pointer-events: auto;*/ /* Ensures hover events still work */
/*}*/


.dropdown-btn .fa-chevron-right {
    transition: transform 0.3s ease-in-out;
    margin-left: auto;
}

.dropdown-btn.rotate .fa-chevron-right {
    transform: rotate(90deg);
}

#sidebar .sub-menu a {
    color: black;
}

.sub-menu {
    margin-left: 1.5rem;
    padding-left: 0;
    background-color: var(--aq-off-white);
}

#sidebar .sub-menu a:hover {
    background-color: #d5e7f5 !important; /* Hover color similar to Quartz theme */
}

.sidebar-icon img {
    height: 35px;
    flex-shrink: 0;
}

#sidebar a span, #sidebar .dropdown-btn span {
    flex-grow: 1;
}

#sidebar ul {
    list-style: none;
}


#sidebar > ul > li:first-child.logo {
    font-weight: 600;
}

#sidebar ul li.active a {
    background-color: #d5e7f5 !important; /* Hover color similar to Quartz theme */
    color: white;
}

#sidebar a, #sidebar .dropdown-btn, #sidebar .logo {
    padding: .85em;
    background-color: var(--aq-off-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1em;
}

#sidebar .sub-menu {
    display: grid;
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out;
}

    #sidebar .sub-menu > div {
        overflow: hidden;
    }

    #sidebar .sub-menu.show {
        grid-template-rows: 1fr;
    }

#toggle-btn {
    border: none;
    background: none;
    cursor: pointer;
    grid-area: toggle;
    transition: transform 0.3s ease;
}

    #toggle-btn.rotate {
        transform: rotate(180deg);
    }


#main-li {
    background-color: var(--aq-main-colour);
    position: sticky;
    top: 0;
    height: 3.5rem;
}

#main-li-grid {
    display: grid;
    grid-template-columns: 5fr 8fr 1fr;
    grid-template-rows: 3.5rem;
    grid-template-areas:
        "logo search toggle";
    transition: 300ms ease-in-out;
    align-items: center;
    justify-content: center;
    padding-left: .5rem;
}

    #main-li-grid > div {
        overflow: hidden;
    }

    #main-li-grid.closed {
        grid-template-columns: 0fr 0fr 1fr;
        grid-template-areas:
            "logo search toggle";
        padding-left: 0px;
    }

        #main-li-grid.closed.expanded-on-hover {
            grid-template-columns: 5fr 8fr 1fr;
            grid-template-areas:
                "logo search toggle";
            padding-left: .5rem;
        }

    #main-li-grid > div {
        overflow: hidden;
    }

#sidebar .logo {
    background: url(../images/aquila-logo-white.svg);
    background-repeat: no-repeat, repeat;
    height: 30px;
    width: 130px;
    grid-area: logo;
}
/* Wrapper for input and button */
.nav-search-wrapper {
    grid-area: search;
}


.dropdown-btn {
    border: none;
    background-color: transparent;
}

    .dropdown-btn:hover {
        border: none;
        background-color: #d5e7f5 !important; /* Hover color similar to Quartz theme */
        overflow: visible;
    }


    .dropdown-btn.rotate {
        background-color: #d5e7f5 !important; /* Hover color similar to Quartz theme */
    }


/* Style the input */
.nav-search-input {
    flex-grow: 2; /* Let input take up remaining space */
    border: none; /* Remove default border */
}

    /* Remove the focus outline from the input */
    .nav-search-input:focus {
        outline: none;
    }

/* Style the button */
.nav-search-icon {
    color: white;
}

/* The dropdown list that shows the filtered results */
.search-dropdown {
    position: absolute;
    top: 100%; /* Position it directly below the search input */
    right: 2rem;
    width: auto;
    height: auto;
    background-color: var(--aq-off-white);
    border: 1px solid #ccc;
    max-height: 60vh; /* Limit the height */
    overflow-y: auto; /* Add scroll if too many results */
    z-index: 1000;
    display: none; /* Initially hidden */
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* To ensure padding/borders do not affect width calculation */
}


/* Ensure the search dropdown items look good */
.search-item {
    list-style: none;
    padding: 10px;
}

    .search-item a.menu-link:hover {
        background-color: #d5e7f5 !important; /* Hover color similar to Quartz theme */
    }

    .search-item a {
        text-decoration: none;
        color: black;
    }



/*------------------------------------*\
    GLOBAL
\*------------------------------------*/
/*
    This will be used for any global styles.
    e.g. fonts, colours, selectors (ul nav h3 etc...).

    Font: Nick has asked that we use "Segoe UI" as our default application font.
          - It's a very clean font, is built into VS (so we don't have to download it) 
            and it's the same font Microsoft use for their web apps (www.office.com)
          If you need a lighter font - use "Segio UI Light"
*/

/* 
    Try and set a global font for the solution
    This can be overwritten by CDNs that we are referencing.
*/
* {
    font-family: var(--aq-font);
}

.aq-font-size-small {
    font-size: small !important;
}

.overflow-initial {
    overflow: initial !important;
}


/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 30px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--aq-grey-light);
    border-radius: 30px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #888;
    }

/* If we need to use a light font anywhere then use this class */
.aq-font-light {
    font-family: var(--aq-font-light);
}

.aq-fas-btn {
    font-size: var(--aq-font-size-large);
    margin-right: 15px;
}

.RequiredField[value=""] {
    background-color: #f7fc90;
}

/* If we need to use a light font anywhere then use this class */
.aq-main-colour {
    color: var(--aq-main-colour) !important;
    /*  background: -webkit-linear-gradient(122.5deg, #174170, #5d87b5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
}

.aq-secondary-colour {
    color: var(--aq-secondary-colour) !important;
}

.aq-red-text {
    /*  color: var(--aq-red-text) !important;*/
    color: var(--aq-red-text) !important;
}

.aq-blue-text {
    color: var(--aq-blue-text) !important;
}

.aq-pink-text {
    color: var(--aq-pink-text) !important;
}

.aq-black-text {
    color: var(--aq-black-text) !important;
}

.aq-grey-text {
    color: var(--aq-grey-text) !important;
}

.aq-grey-light {
    color: var(--aq-grey-light) !important;
}

.aq-green-text {
    color: var(--aq-green-text) !important;
}

.aq-yellow-text {
    color: var(--aq-yellow-text) !important;
}

.aq-purple-text {
    color: var(--aq-purple-text) !important;
}

.aq-orange-text {
    /*    color: var(--aq-orange-text) !important;*/
    color: var(--aq-orange-text) !important;
}

.aq-bold-text {
    font-weight: 600;
    font-size: calc(var(--aq-font-size) + 1px) !important;
}

.aq-background-live {
    background-color: rgb(33, 79, 198);
    color: rgb(255, 255, 255);
}

.aq-background-pending {
    background-color: var(--aq-pink-text);
    color: rgb(255, 255, 255);
}

.aq-background-history {
    background-color: rgb(169, 169, 169);
    color: rgb(255, 255, 255);
}

/*Background colours...*/
.aq-background-main {
    background-color: var(--aq-main-colour);
}

.aq-background-cyan {
    background-color: #00ffff;
}

.aq-background-yellow {
    background-color: var(--aq-yellow-text);
}

.aq-background-red {
    background-color: var(--aq-red-text);
}

.aq-background-orange {
    background-color: var(--aq-orange-text);
}

.aq-background-blue {
    background-color: var(--aq-blue-text);
}

.aq-background-green {
    background-color: var(--aq-green-text);
}

.aq-background-palegreen {
    background-color: palegreen;
}

.aq-background-lightpink {
    background-color: var(--aq-pink-text);
}

.aq-background-lightpink {
    background-color: pink;
}

.aq-background-black {
    background-color: var(--aq-black-text);
}

.aq-background-purple {
    background-color: var(--aq-purple-text);
}

.aq-background-grey {
    background-color: var(--aq-grey-text);
}

.DeleteQA.aq-red-text {
    color: var(--aq-red-text) !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
label,
p,
select,
.table > thead > tr > th,
.table > tbody > tr > td {
    color: var(--aq-grey-03);
}


/* The headers can be overwritten by bootstrap or other CDNs.
   By doing this we are making sure that our font is being used everywhere without inheriting other css fonts/default font's.
*/
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--aq-font);
}

.d-contents {
    display: contents !important;
}

.aq-height-100 {
    height: 100%;
}

/* Set the height to 95% */
.aq-height-95 {
    height: 95%;
}


.display-none {
    display: none !important;
}

.display-inline {
    display: inline !important;
}

.display-block {
    display: block !important;
}

.display-grid {
    display: grid !important;
}

.text-align-r {
    text-align: right;
}

.text-align-l {
    text-align: left;
}

.text-align-c {
    text-align: center;
}

.width-auto {
    width: auto !important;
}

.FilterFavRow {
    text-overflow: ellipsis;
    overflow: hidden;
}

.FilterFavRowParentChild {
    text-overflow: ellipsis;
    overflow: hidden;
}

/*------------------------------------*\
    PADDING AND MARGIN
\*------------------------------------*/
/*specifically for CRUD controls*/
.ReadQ,
.UpdateQ,
.DeleteQ,
.CopyQ,
.AuditTrailQ,
.incidentsexist,
.notesexist {
    padding: 0 .15rem; /* 0 for top and bottom, 2px for left and right */
}



/*general padding/margin Classes*/
.aq-mb-0 {
    margin-bottom: 0px !important;
}

.aq-mt-0 {
    margin-top: 0px !important;
}

.aq-ml-0 {
    margin-left: 0px !important;
}

.aq-mr-0 {
    margin-right: 0px !important;
}

.aq-pl-0 {
    padding-left: 0px !important;
}

.aq-pb-0 {
    padding-bottom: 0px !important;
}

.aq-pr-0 {
    padding-right: 0px !important;
}

.aq-mt-3 {
    margin-top: 3px !important;
}

.aq-p-5 {
    padding: 5px !important;
}

.aq-ml-5 {
    margin-left: 5px !important;
}

.aq-mr-5 {
    margin-right: 5px !important;
}

.aq-mt-5 {
    margin-top: 5px !important;
}

.aq-mb-5 {
    margin-bottom: 5px !important;
}

.aq-pt-0 {
    padding-top: 0px !important;
}

.aq-pt-5 {
    padding-top: 5px !important;
}

.aq-pr-5 {
    padding-right: 5px !important;
}

.aq-pb-5 {
    padding-bottom: 5px !important;
}

.aq-pl-5 {
    padding-left: 5px !important;
}

.aq-pt-8 {
    padding-top: 8px !important;
}


.aq-p-10 {
    padding: 10px !important;
}

.aq-pl-10 {
    padding-left: 10px !important;
}

.aq-pt-10 {
    padding-top: 10px !important;
}

.aq-pb-10 {
    padding-bottom: 10px !important;
}

.aq-mb-10 {
    margin-bottom: 10px !important;
}

.aq-mt-10 {
    margin-top: 10px !important;
}

.aq-ml-10 {
    margin-left: 10px !important;
}

.aq-mr-10 {
    margin-right: 10px !important;
}

.aq-pt-12 {
    padding-top: 12px !important;
}

.aq-pl-15 {
    padding-left: 15px !important;
}

.aq-pt-15 {
    padding-top: 15px !important;
}

.aq-pb-15 {
    padding-bottom: 15px !important;
}

.aq-pr-15 {
    padding-right: 15px !important;
}

.aq-mr-15 {
    margin-right: 15px !important;
}

.aq-ml-15 {
    margin-left: 15px !important;
}

.aq-mt-20 {
    margin-top: 20px !important;
}

.aq-mt-15 {
    margin-top: 15px !important;
}

.aq-ml-20 {
    margin-left: 20px !important;
}

.aq-pr-20 {
    padding-right: 20px !important;
}

.aq-pt-20 {
    padding-top: 20px !important;
}

.aq-pr-25 {
    padding-right: 25px !important;
}

.aq-pl-25 {
    padding-left: 25px !important;
}

.aq-mb-25 {
    margin-bottom: 25px;
}

.aq-mt-25 {
    margin-top: 25px;
}

.aq-mt-40 {
    margin-top: 40px;
}

.aq-mt-60 {
    margin-top: 60px;
}

.aq-pl-80 {
    padding-left: 80px;
}

.no-wrap {
    white-space: nowrap;
}

/*------------------------------------*\
    TABLE
\*------------------------------------*/

/* When a table has a "LockedBy" or "LockUser" column the highlight the cell yellow. */
.table-row-locked {
    background-color: yellow;
}


/*  */
.table tbody tr td {
    white-space: nowrap;
}

.table-hover tbody tr:hover {
    background-color: var(--aq-grey-02);
}

    .table-hover tbody tr:hover > td:not(.blurry-text),
    .table-hover tbody tr:hover > td:not(.table-row-locked),
    .table-hover tbody tr:not(.enquire):hover > td,
    .table-hover tbody tr:not(.enquire):hover > td > span.fa,
    .table-hover tbody tr:not(.enquire):hover > td > span.far,
    .table-hover tbody tr:not(.enquire):hover > td > span.fas,
    .table-hover tbody tr:not(.enquire):hover > td > span > i.fas {
        color: white !important;
    }

.table-hover tbody tr.enquire:hover > td,
.table-hover tbody tr.enquire:hover > td > span.fa,
.table-hover tbody tr.enquire:hover > td > span.far,
.table-hover tbody tr.enquire:hover > td > span.fas,
.table-hover tbody tr.enquire:hover > td > span > i.fas,
.table-hover tbody tr.selected:hover > td > span.fa,
.table-hover tbody tr.selected:hover > td > span.far,
.table-hover tbody tr.selected:hover > td > span.fas,
.table-hover tbody tr.selected:hover > td > span > i.fas,
.table-hover tbody tr.selected:hover > td {
    color: black !important;
}

.table-hover tbody tr:hover > td.table-row-locked {
    background-color: yellow !important;
    color: black !important;
}

/* Highlight tr colour on mouse up */
.tr-selected {
    background-color: var(--aq-grey-light) !important;
}

/* Highlight a colour on mouse up */
.a-selected {
    background-color: var(--aq-grey-light) !important;
}

/*
    Set td and th font sizes and padding for tables
    ALL of our tables throughtout the application should have an identical layout unless specifically asked.
    This is adopting the characteristics of a bootstrap table and making it look the way we want.
    Also, set all table elemnts to be non wrapping (so data stay's on single line in table)
*/
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    /*padding: 3px 10px 3px 3px !important;*/
    padding: 10px 18px; /*this is the datatable values so we need to keep this to ensure the layout works for datatables (otherwise the sort arrows overlap the text)*/
    white-space: nowrap;
    font-size: var(--aq-font-size);
}

.table > tbody > tr {
    line-height: 1.75;
}

/* Make the table scrollable with a fixed thead */
.table-fixed-header {
    overflow: auto;
    display: block;
    max-width: -webkit-fill-available;
    /*display: -webkit-inline-box;*/
}

    .table-fixed-header thead th {
        background-color: white;
        position: sticky !important;
        top: 0;
        border: none;
    }


table.dataTable tbody tr.selected > *,
.table > tbody > tr.selected .fas,
.table > tbody > tr.selected .fa,
.table > tbody > tr.selected .far {
    box-shadow: inset 0 0 0 9999px var(--aq-grey-01);
    color: var(--aq-black) !important;
}

/**This change means that the last th column in every table with the class (table-fixed-header) will be fit to the remaining size of the screen.
        This also keeps the data within the window when the screen is made smaller.*/
/*  .table-fixed-header thead th:last-child {
        width: 100%;
    }
*/
/*.table > tbody > tr:hover {
    background-color:lightblue;
}*/


/* 
    This handles the row text color and hover colours for Auditable tables. 
    e.g. LIVE row hover colour is BLUE
*/
.table > tbody > tr.PNEW > td {
    color: var(--aq-pink-text);
}

.table > tbody > tr.PNEW:hover > td {
    color: #FFFFFF;
    background-color: var(--aq-pink-text);
}

/* Make the 'description' text colour to white on hover*/
.table > tbody > tr.PNEW:hover span {
    color: white !important;
}

.table > tbody > tr.PUPD > td {
    color: var(--aq-pink-text);
}

.table > tbody > tr.PUPD:hover > td {
    color: #FFFFFF;
    background-color: var(--aq-pink-text);
}

/* Make the 'description' text colour to white on hover*/
.table > tbody > tr.PUPD:hover span {
    color: white !important;
}

.table > tbody > tr.PDEL > td {
    color: var(--aq-pink-text);
}

.table > tbody > tr.PDEL:hover > td {
    color: #FFFFFF;
    background-color: var(--aq-pink-text);
}

/* Make the 'description' text colour to white on hover*/
.table > tbody > tr.PDEL:hover span {
    color: white !important;
}

.table > tbody > tr.LIVE > td {
    color: var(--aq-blue-text);
}

.table > tbody > tr.selected > td {
    color: var(--aq-black);
}

.table > tbody > tr.LIVE:hover > td {
    color: #FFFFFF;
    background-color: var(--aq-blue-text);
}

/*.table > tbody > tr.LIVE {
    color: var(--aq-blue-text);
}

    .table > tbody > tr.LIVE:hover {
        color: #FFFFFF;
        background-color: var(--aq-blue-text);
    }*/

.table > tbody > tr.LIVE:hover .ReadQ,
.table > tbody > tr.LIVE:hover .UpdateQ,
.table > tbody > tr.LIVE:hover .DeleteQ,
.table > tbody > tr.LIVE:hover .CopyQ {
    color: white !important;
}

.table > tbody > tr.HUPD > td,
.table > tbody > tr.HDEL > td {
    color: #A9A9A9;
}

.table > tbody > tr.RNEW > td,
.table > tbody > tr.RUPD > td,
.table > tbody > tr.RDEL > td {
    color: var(--aq-red-text);
}

.table > tbody > tr.HUPD:hover > td,
.table > tbody > tr.HDEL:hover > td {
    color: #FFFFFF;
    background-color: #A9A9A9;
}

.table > tbody > tr.RNEW:hover > td,
.table > tbody > tr.RUPD:hover > td,
.table > tbody > tr.RDEL:hover > td {
    color: #FFFFFF;
    background-color: var(--aq-red-text);
}

.table > tbody > tr.RNEW:hover .ReadQ,
.table > tbody > tr.RNEW:hover .UpdateQ,
.table > tbody > tr.RNEW:hover .DeleteQ,
.table > tbody > tr.RNEW:hover .CopyQ,
.table > tbody > tr.RUPD:hover .ReadQ,
.table > tbody > tr.RUPD:hover .UpdateQ,
.table > tbody > tr.RUPD:hover .DeleteQ,
.table > tbody > tr.RUPD:hover .CopyQ,
.table > tbody > tr.RDEL:hover .ReadQ,
.table > tbody > tr.RDEL:hover .UpdateQ,
.table > tbody > tr.RDEL:hover .DeleteQ,
.table > tbody > tr.RDEL:hover .CopyQ {
    color: white;
}

.table > tbody > tr.RNEW:hover .DeleteQA,
.table > tbody > tr.RUPD:hover .DeleteQA,
.table > tbody > tr.RDEL:hover .DeleteQA {
    color: black;
}

.filterTd {
    width: 550px;
}


table.table > tbody > tr.enquire {
    background-color: var(--aq-light-teal-02);
}

.cpy-border {
    max-height: 50vh;
    overflow: auto
}

#counterpartySearchContent thead th {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #fff; /* Adjust as needed */
    border: none;
}
/*------------------------------------*\
    SET STATUS TEXT COLOURS 
    (both td and button text)
\*------------------------------------*/
/* Green */
#statisticsTable thead tr th button.Ack,
tr td.Ack,
#statisticsTable thead tr th button.PositiveAck,
#statisticsTable thead tr th.PositiveAck,
#statisticsTable thead tr th button.Processed,
#statisticsTable thead tr th.Processed,
#statisticsTable thead tr th button.Printed,
#statisticsTable thead tr th.Printed,
#statisticsTable thead tr th button.Finalised,
#statisticsTable thead tr th.Finalised,
tr td.Processed button,
tr td.Printed button,
tr td.Finalised button,
tr td.PositiveAck button,
tr td.Ack button,
tr td.PositiveAck,
tr td.Ack button,
tr td.WorkflowReference,
tr td.UserProcessName,
tr td.reducing,
tr td.PositiveAck button {
    color: var(--aq-green-text);
}

/* Pink */
#statisticsTable thead tr th button.Unprocessed,
#statisticsTable thead tr th.Unprocessed,
#statisticsTable thead tr th button.SancOK,
#statisticsTable thead tr th.SancOK,
#statisticsTable thead tr th button.AMLOK,
#statisticsTable thead tr th.AMLOK,
#statisticsTable thead tr th button.FATFOK,
#statisticsTable thead tr th.FATFOK,
#statisticsTable thead tr th button.CoverOK,
#statisticsTable thead tr th.CoverOK,
#statisticsTable thead tr th button.CRMOK,
#statisticsTable thead tr th.CRMOK,
tr td.Currency,
tr td.Unprocessed button,
tr td.SancOK button,
tr td.AMLOK button,
tr td.FATFOK button,
tr td.CoverOK button,
tr td.CRMOK button,
tr td.Unverified,
tr td.Archived,
tr td.Unverified button {
    color: var(--aq-pink-text);
}

/* Red */
#statisticsTable thead tr th button.Incomplete,
#statisticsTable thead tr th.Incomplete,
#statisticsTable thead tr th button.PossDup,
#statisticsTable thead tr th.PossDup,
#statisticsTable thead tr th button.Pending,
#statisticsTable thead tr th.Pending,
#statisticsTable thead tr th button.SancFail,
#statisticsTable thead tr th.SancFail,
#statisticsTable thead tr th button.AMLFail,
#statisticsTable thead tr th.AMLFail,
#statisticsTable thead tr th button.FATFFail,
#statisticsTable thead tr th.FATFFail,
#statisticsTable thead tr th button.CRMFail,
#statisticsTable thead tr th.CRMFail,
#statisticsTable thead tr th button.Repair,
#statisticsTable thead tr th.Repair,
#statisticsTable thead tr th button.Nak,
#statisticsTable thead tr th button.NegativeAck,
#statisticsTable thead tr th.NegativeAck,
#statisticsTable thead tr th button.Exception,
#statisticsTable thead tr th.Exception,
tr td.Incomplete button,
tr td.PossDup button,
tr td.Pending button,
tr td.SancFail button,
tr td.AMLFail button,
tr td.FATFFail button,
tr td.CRMFail button,
tr td.Repair button,
tr td.Nak button,
tr td.NegativeAck button,
tr td.Exception button,
select option.Exception,
select option.Rejected,
ul li.Exception,
ul li.Rejected,
tr td.Archived,
tr td.ExceptionPosting,
tr td.RejectedPosting,
tr td.Exception button,
tr td.increasing,
tr td.Incomplete button,
tr td.Repair button,
tr td.Nak,
tr td.Naked,
tr td.NegativeAck,
tr td.priority,
tr td.Naked button {
    color: var(--aq-red-text);
}

/* Orange */
#statisticsTable thead tr th button.Verified,
#statisticsTable thead tr th.Verified,
#statisticsTable thead tr th button.Authorised,
#statisticsTable thead tr th.Authorised,
tr td.Verified button,
tr td.Authorised button,
tr td.Verified,
tr td.Verified button,
tr td.Authorised,
tr td.Authorised button {
    color: var(--aq-orange-text);
}


/* Blue */
#statisticsTable thead tr th button.Transmitting,
#statisticsTable thead tr th.Transmitting,
#statisticsTable thead tr th button.Sent,
#statisticsTable thead tr th.Sent,
#statisticsTable thead tr th.Workflow,
#statisticsTable thead tr th button.Workflow,
#statisticsTable thead tr th.SancCheck,
#statisticsTable thead tr th button.SancCheck,
#statisticsTable thead tr th.AMLCheck,
#statisticsTable thead tr th button.AMLCheck,
#statisticsTable thead tr th.FATFCheck,
#statisticsTable thead tr th button.FATFCheck,
#statisticsTable thead tr th.CRMCheck,
#statisticsTable thead tr th button.CRMCheck,
#statisticsTable thead tr th.Transmitting,
#statisticsTable thead tr th button.Transmitting,
#statisticsTable thead tr th.Sent,
#statisticsTable thead tr th button.Sent,
tr td.Transmitting button,
tr td.Sent button,
tr td.Workflow button,
tr td.SancCheck button,
tr td.AMLCheck button,
tr td.FATFCheck button,
tr td.CRMCheck button,
select option.Restrained,
select option.Workflow,
ul li.Restrained,
ul li.Workflow,
tr td.Transmitting,
tr td.Forward,
tr td.Out,
tr td.RestrainedPosting,
tr td.WorkflowPosting,
tr td.Transmitting button,
tr td.Sent,
tr td.Sent button,
tr td.placeofsettlement,
tr td.Workflow button,
tr td.messageType {
    color: var(--aq-blue-text);
}

/* Grey */
#statisticsTable thead tr th button.Cancelled,
#statisticsTable thead tr th.Cancelled,
tr td.Cancelled button,
tr td.Cancelled,
tr td.Cancelled button {
    color: var(--aq-grey-text);
}

    /*Black*/
    #statisticsTable thead tr th button.Processed,
    #statisticsTable thead tr th.Processed,
    #statisticsTable thead tr th button.Cancelled,
    #statisticsTable thead tr th.Cancelled,
    #statisticsTable thead tr th button.Deleted,
    #statisticsTable thead tr th.Deleted,
    #statisticsTable thead tr th button.Duplicate,
    #statisticsTable thead tr th.Duplicate,
    #statisticsTable thead tr th button.Transformed,
    #statisticsTable thead tr th.Transformed,
    tr td.Processed button,
    tr td.Transformed button,
    tr td.Cancelled button,
    tr td.Deleted button,
    tr td.Duplicate button,
    tr td.Finalised button,
    tr td.Processed,
    tr td.Transformed,
    tr td.AuthorisedPosting,
    tr td.Processed,
    tr td.Transformed,
    #statisticsTable thead tr th button.Finalised,
    #statisticsTable thead tr th.Finalised,
    tr td.Finalised,
    tr td.Current,
    tr td.Finalised button {
        color: var(--aq-black-text);
    }


tr > td.load-counterparty {
    color: blue;
    text-decoration: underline;
}

tr > td.load-hyperlink {
    text-decoration: underline;
    cursor: pointer !important;
}

tr > td.load-counterparty:hover {
    color: var(--aq-main-colour);
}


select option.Unprocessed,
ul li.Unprocessed {
    color: var(--aq-purple-text);
}

select option.Verified,
ul li.Verified,
tr td.VerifiedPosting {
    color: var(--aq-yellow-text);
}
/*------------------------------------*\
    CONTROLS
\*------------------------------------*/
/*
    labels, input, textarea etc...
*/
/* This is the coloured pill that display's the status of a row. e.g. "Live" with blue background and corner radius in CRUDGrid */
.aq-status-pill {
    padding: 5px 0px;
    border-width: 0px;
    max-width: 150px;
    border-radius: 30px;
    text-align: center;
}

.search-modal {
    height: 38px;
    display: inline;
    /*    margin-right: 5px;*/
}

.search-modal-description {
    display: inline-flex;
    margin-left: 5px;
    padding-top: 7px;
}

/*  Placeholder text UPPERCASE disable START

    If an input is set to uppercase text then by default it also uppercases the placeholder.
    By default we want this to be normally cased even if the text value is set to uppercase
*/
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}

.input-width-xxs {
    width: 15% !important;
}

.input-width-xs {
    width: 25% !important;
}


.input-width-sm {
    width: 40% !important;
}

.input-width-md-sm {
    width: 50% !important;
}

/* form-group sets width to auto and we don't want this in some cases*/
.input-width-md {
    width: 75% !important;
}

/* form-group sets width to auto and we don't want this in some cases*/
.input-width-md-lg {
    width: 90% !important;
}

/* form-group sets width to auto and we don't want this in some cases*/
.input-width-lg {
    width: 100% !important;
}
/* form-group sets width to auto and we don't want this in some cases*/
.input-width-xl {
    width: 150% !important;
}

::placeholder { /* Recent browsers */
    text-transform: none;
}
/*Placeholder text UPPERCASE disable END*/

.textarea-resize-none {
    resize: none;
}


/* 
    This will change the cursor to a pointer icon (the same as when you hover over a button).
    This is being used for when you hover over a glyphicon in the Web Wizard table. It is supposed to act like a button.
    This can be used for any element not just a glyphicon, hence the name.
*/
.aq-pointer:hover {
    cursor: pointer !important;
}


/*------------------------------------*\
    ICONS
\*------------------------------------*/
/*
    Icon styles. Size/colour etc for specific fas icon's
*/
/* The defualt colour for all glyphicons should be the aquila colour */
.glyphicon,
.fa,
.fas,
.far {
    color: var(--aq-main-colour);
    margin: 0.15rem;
}

.ag-icon-colour-match.far,
.ag-icon-colour-match.fas {
    color: var(--ag-icon-font-color); /* Set the color to AG Grid icon color */
    opacity: 0.9 !important; /* Set opacity to 90% */
}

.far.fa-eye,
.fas.fa-clipboard-list,
.fas.fa-balance-scale,
.fas.fa-list,
.far.fa-copy,
.far.fa-trash-alt {
    color: var(--aq-secondary-colour);
}

.fasred {
    color: var(--aq-red-text) !important;
}

.fasgreen {
    color: var(--aq-green-text) !important;
}

.fasmagenta {
    color: magenta !important;
}

.faswarning {
    color: #ffc107 !important;
}

.btn.btn-outline-warning:hover .faswarning {
    color: #000 !important;
}

/* All following buttons should have a white icon:
    primary (blue)
    success (green)
*/
.btn-primary i,
.btn-danger i,
.btn-success i,
.btn-radio {
    color: white;
}

.btn-outline-primary {
    color: var(--aq-main-colour);
    border-color: var(--aq-main-colour);
}

    .btn-outline-primary:hover {
        background-color: var(--aq-secondary-colour);
    }
/* All close/remove icons should be red */
button i.fa-times-circle,
.fa-times-circle {
    color: var(--aq-red-text);
}

.fa-edit {
    color: var(--aq-green-text);
}
/*------------------------------------*\
    ACCORDION
\*------------------------------------*/
/* Set all jQuery accordions background colour to our default aquila colour. */
.ui-accordion .ui-accordion-header {
    background: var(--aq-main-colour);
}


/* Modify the default css for bootstrap tooltip */
.tooltip.left .tooltip-inner,
.tooltip.top .tooltip-inner,
.tooltip.right .tooltip-inner,
.tooltip.bottom .tooltip-inner {
    background-color: var(--aq-main-colour) !important;
    /*padding: 15px 20px;*/
    font-size: var(--aq-font-size);
}
/* Set the arrow colour of the tooltip */
.tooltip.left .tooltip-arrow {
    border-left-color: var(--aq-main-colour) !important;
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--aq-main-colour) !important;
}

.tooltip.right .tooltip-arrow {
    border-right-color: var(--aq-main-colour) !important;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--aq-main-colour) !important;
}


/*------------------------------------*\
    LOADING SPINNER
\*------------------------------------*/

.aq-loading-spinner {
    background: url(../images/loading-logo-teal.gif) center center no-repeat;
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}

/*
    This is the default loading spinner a user will see when the application is loading.
    This is a pure css approach that shows 9 flashing dots
*/
.aq-loading-spinner2 {
    /*margin-left: 50vw;
    margin-top: 50vh;*/
    position: absolute;
    top: 47vh;
    left: 47vw;
    transform: translate(-47%, -47%);
    z-index: 100;
}

    .aq-loading-spinner2 div {
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--aq-main-colour);
        animation: aq-loading-spinner2 1.2s linear infinite;
    }

        .aq-loading-spinner2 div:nth-child(1) {
            top: 6px;
            left: 6px;
            animation-delay: 0s;
        }

        .aq-loading-spinner2 div:nth-child(2) {
            top: 6px;
            left: 46px;
            animation-delay: -0.4s;
        }

        .aq-loading-spinner2 div:nth-child(3) {
            top: 6px;
            left: 86px;
            animation-delay: -0.8s;
        }

        .aq-loading-spinner2 div:nth-child(4) {
            top: 46px;
            left: 6px;
            animation-delay: -0.4s;
        }

        .aq-loading-spinner2 div:nth-child(5) {
            top: 46px;
            left: 46px;
            animation-delay: -0.8s;
        }

        .aq-loading-spinner2 div:nth-child(6) {
            top: 46px;
            left: 86px;
            animation-delay: -1.2s;
        }

        .aq-loading-spinner2 div:nth-child(7) {
            top: 86px;
            left: 6px;
            animation-delay: -0.8s;
        }

        .aq-loading-spinner2 div:nth-child(8) {
            top: 86px;
            left: 46px;
            animation-delay: -1.2s;
        }

        .aq-loading-spinner2 div:nth-child(9) {
            top: 86px;
            left: 86px;
            animation-delay: -1.6s;
        }

@keyframes aq-loading-spinner2 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/**
    
*/
.border {
    border: 1px solid var(--aq-main-colour) !important;
    border-radius: var(--aq-radius);
    padding: 5px 10px;
    margin-top: 10px;
}

.border-black {
    border: 1px solid black !important;
}

.border-red {
    border: 1px solid var(--aq-red-text) !important;
}

.border-green {
    border: 1px solid var(--aq-green-text) !important;
}

.border-blue {
    border: 1px solid var(--aq-blue-text) !important;
    /*border: 1px solid var(--aq-main-colour) !important;*/
}

.border-grey {
    border: 1px solid var(--aq-grey-text) !important;
}

.border-silver {
    border: 1px solid #e2e2e2 !important;
}

#title {
    color: var(--aq-main-colour);
    font-size: x-large;
    font-weight: bold;
    padding-right: 10px;
}

/* Add a border around a fieldset */
fieldset.scheduler-border {
    border: 1px solid var(--aq-main-colour);
    padding: 0 1em 1em 1em;
    /*margin: 0 0 1.5em 0 !important;*/
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
    border-radius: 10px;
}
/*
    fieldset.scheduler-border legend {
        color: var(--aq-main-colour);
    }*/


fieldset.scheduler-border-filter {
    border: 1px solid var(--aq-main-colour);
    padding: 0 1em 1em 1em;
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
    border-radius: 4px;
}

legend.scheduler-border {
    font-size: var(--aq-font-size); /*1.2em*/
    font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px;
    border-bottom: none;
    margin-bottom: 5px;
    color: var(--aq-main-colour);
}

/* Add a border around a fieldset */
/*fieldset.scheduler-border-green {
    border: 1px solid var(--aq-green-text) !important;
    padding: 0 1em 1em 1em !important;*/
/*margin: 0 0 1.5em 0 !important;*/
/*-webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
    border-radius: 10px;
}

legend.scheduler-border-green {
    font-size: var(--aq-font-size) !important;*/ /*1.2em*/
/*font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px;
    border-bottom: none;
    color: var(--aq-green-text);
    margin-bottom: 5px;
}

fieldset.scheduler-border-red {
    border: 1px solid var(--aq-red-text) !important;
    padding: 0 1em 1em 1em !important;*/
/*margin: 0 0 1.5em 0 !important;*/
/*-webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
    border-radius: 10px;
}

legend.scheduler-border-red {
    font-size: var(--aq-font-size) !important;*/ /*1.2em*/
/*font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px;
    border-bottom: none;
    color: var(--aq-red-text);
    margin-bottom: 5px;
}

fieldset.scheduler-border-blue {
    border: 1px solid var(--aq-blue-text) !important;
    padding: 0 1em 1em 1em !important;*/
/*margin: 0 0 1.5em 0 !important;*/
/*-webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
    border-radius: 10px;
}

legend.scheduler-border-blue {
    font-size: var(--aq-font-size) !important;*/ /*1.2em*/
/*font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px;
    border-bottom: none;
    color: var(--aq-blue-text);
    margin-bottom: 5px;
}

fieldset.scheduler-border-info {
    border: 1px solid dimgrey !important;
    padding: 0 1em 1em 1em !important;*/
/*margin: 0 0 1.5em 0 !important;*/
/*-webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
    border-radius: 10px;
}

legend.scheduler-border-info {
    font-size: var(--aq-font-size) !important;*/ /*1.2em*/
/*font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px;
    border-bottom: none;
    color: dimgrey;
    margin-bottom: 5px;
}

legend.scheduler-border-red-large {
    font-size: 18px;*/ /*1.2em*/
/*font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px;
    border-bottom: none;
    color: var(--aq-red-text);
    margin-bottom: 5px;
}

legend.scheduler-border-blue-large {
    font-size: 18px;*/ /*1.2em*/
/*font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px;
    border-bottom: none;
    color: var(--aq-main-colour);
    margin-bottom: 5px;
}*/


/* Uncomment this to use glyphicons for context menu - this should really be done in aquilastrap and all context menu icons changed. */
.context-menu-icon::before {
    font-family: "Glyphicons Halflings" !important;
}

.context-menu-active {
    background-color: var(--aq-grey-light);
}


.panel-default {
    border-color: var(--aq-main-colour);
}



/*#region Web Wizard for 'CSS (Classes)' column in EditColumnValues*/
.aq-full-width:not(.search-input) {
    width: 90% !important;
}

.aq-height-2 {
    height: 68px !important;
}

.aq-height-3 {
    height: 102px !important;
}

/*#endregion */

/*#region Bootstrap*/

button.btn-light > i.fa-search {
    color: var(--aq-main-colour);
}

.btn-radio {
    background-color: var(--aq-grey-light);
    border-color: transparent;
    color: black;
}

    .btn-radio.active {
        background-color: var(--aq-main-colour);
        border-color: transparent;
        color: white;
        border: 2px solid black;
    }

.btn-primary {
    background-color: var(--aq-main-colour);
    border-color: transparent;
}

    .btn-primary:hover {
        background-color: var(--aq-secondary-colour);
        /*background: -webkit-linear-gradient(122.5deg, #174170, #5d87b5);*/
    }

    .btn-primary:disabled {
        background-color: var(--aq-grey-02);
        border-color: var(--aq-grey-light);
    }

/* Change the icon colour to white on hover of a btn-outline-primary and btn-outline-secondary button */
button.btn-outline-primary:hover i,
button.btn-outline-secondary:hover i {
    color: white;
}


.btn-danger {
    background-color: var(--aq-red-text);
}

.btn-success {
    background-color: var(--aq-green-text);
}

/* Overwrite the bootstrap form font and size to make sure it explicitly used aquila's font */
.btn,
.custom-control-label,
.form-control,
.form-group input,
.form-group textarea,
.form-group label {
    font-family: var(--aq-font) !important;
    font-size: var(--aq-font-size) !important;
}

/* 3D Shadow Effect */
.button-3d-shadow {
    /* 3D shadow effect: shadow bottom right, highlight top left */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.2s ease, transform 0.2s ease; /* Smooth transition for the click effect */
}

    /* Shadow on hover */
    .button-3d-shadow:hover {
        box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25), -6px -6px 12px rgba(255, 255, 255, 0.6);
    }

    /* Shadow effect on click */
    .button-3d-shadow:active {
        transform: translate(2px, 2px); /* Move the button down slightly */
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15), -1px -1px 4px rgba(255, 255, 255, 0.3); /* Reduced shadow */
    }


.fade.in {
    opacity: 1;
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal-backdrop.in {
    opacity: 0.5;
}

/* Overwrite the blue text for auditable tables when the item is selected in the 'Parameters search' dropdown list */
.dropdown-item.active, .dropdown-item:active {
    color: #fff !important;
}

svg.bi {
    color: var(--aq-main-colour);
    height: 20px;
}

.popover {
    background-color: yellow !important;
    border-color: red !important;
}
/*#endregion */

.svg-main-colour {
    height: 20px;
    filter: invert(57%) sepia(70%) saturate(5803%) hue-rotate(188deg) brightness(80%) contrast(92%);
    margin-right: 5px;
}

.blurry-text,
table.table-hover > tbody > tr:hover > td.blurry-text {
    color: transparent !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
}

.list-group-item-aquila {
    position: relative;
    display: block;
    padding: 0.3rem 1.25rem;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.row-filtering-aquila {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* margin-right: -15px; */
    /* margin-left: -15px; */
}

.empty-mandatory-input {
    background-color: yellow !important;
}

/* This is the number of records to show textbox */
#RecordsToShow {
    width: 80px;
    margin-left: 5px;
    margin-right: 5px;
}

.highlight_dataTables_filter_input {
    background-color: yellow !important;
}

.dataTables_filter input {
    width: 20rem;
    max-width: 20rem;
}

.blinking {
    animation: blinkingText 1.0s infinite;
}


/*the commented out code was hard coding the blinker to red but now the colour is applied dynamically from C# and blinker works with whatever colour that is.*/
@keyframes blinkingText {

    49% {
        color: transparent;
    }

    50% {
        color: transparent;
    }
}

button.anchor-button:hover {
    text-decoration: underline;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--aq-main-colour);
    background-color: var(--aq-main-colour);
}


.object-fit-cover {
    object-fit: cover;
}

.left-border-radius-curve {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.right-border-radius-curve {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

div.hr {
    margin-top: 0.5rem;
    margin-bottom: .5rem;
    border: 0;
    border-top: 1px solid var(--aq-main-colour);
    height: 0px;
    line-height: 0px;
}

.hr-title {
    background-color: #fff;
    color: var(--aq-main-colour);
    padding: 0px 5px;
    margin-left: 6px;
    font-weight: bold;
}

#genericSearchModal #genericSearchModalTitle {
    text-align: center;
    color: blue;
}

p#genericSearchModalListName {
    flex: auto;
    font-weight: bold;
    color: blue;
}

.dropdown > ul.dropdown-menu > li {
    padding: 5px 10px;
    cursor: pointer;
    min-height: 34px;
}

    .dropdown > ul.dropdown-menu > li:hover {
        background-color: var(--aq-blue-grey);
        color: white !important;
    }

.CRUDControls > span {
    font-size: medium;
    margin-right: .1rem;
}

.aq-flex-footer-parent {
    display: flex;
    flex-direction: column;
}

.aq-flex-footer-child {
    margin-top: auto;
}

    .aq-flex-footer-child button {
        float: right;
    }

mark {
    padding: 0;
    background: yellow;
}

.dataTables_length, .dt-buttons {
    padding-right: 10px;
}

.card-header {
    height: 60px;
}

/*for the new card tiles input QM,AR,Referrals*/
/*.shadow {
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15) !important;
}*/

/*.grey-background-colour {
    background-color: #f8f9fc !important;
}*/

.aq-radius,
.btn,
.form-control,
.card,
.dataTables_wrapper,
.dataTables_length select,
.dataTables_filter input,
.dataTables_paginate,
.paginate_button,
button.dt-button {
    border-radius: var(--aq-radius) !important;
}

.nav-link {
    border-top-left-radius: var(--aq-radius) !important;
    border-top-right-radius: var(--aq-radius) !important;
}

.aq-radius-left {
    border-top-left-radius: var(--aq-radius) !important;
    border-bottom-left-radius: var(--aq-radius) !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.aq-radius-right {
    border-top-right-radius: var(--aq-radius) !important;
    border-bottom-right-radius: var(--aq-radius) !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.aq-radius-top {
    border-top-left-radius: var(--aq-radius) !important;
    border-top-right-radius: var(--aq-radius) !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.aq-radius-bottom {
    border-bottom-left-radius: var(--aq-radius) !important;
    border-bottom-right-radius: var(--aq-radius) !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.icon-container {
    font-size: medium;
}

@keyframes flashYellow {
    0%, 100% {
        background-color: rgba(255, 247, 0, 0.2) !important; /* Standard opacity */
    }

    50% {
        background-color: rgba(255, 247, 0, 0) !important; /* Transparent */
    }
}

@keyframes flashRed {
    0%, 100% {
        background-color: rgba(255, 102, 102, 0.1) !important; /* Standard opacity */
    }

    50% {
        background-color: rgba(255, 102, 102, 0) !important; /* Transparent */
    }
}

@keyframes flashGreen {
    0%, 100% {
        background-color: rgba(91, 255, 63, 0.1) !important; /* Standard opacity */
    }

    50% {
        background-color: rgba(91, 255, 63, 0) !important; /* Transparent */
    }
}

@keyframes flashOrange {
    0%, 100% {
        background-color: rgba(255, 200, 0, 0.2) !important; /* Standard opacity */
    }

    50% {
        background-color: rgba(255, 200, 0, 0) !important; /* Transparent */
    }
}


.grid-chart-panel {
    max-height: 0; /* Start hidden */
    overflow: hidden; /* Hide overflowing content */
    transition: max-height 0.5s ease, padding 0.5s ease; /* Smooth transition */
    border: none !important;
}

    .grid-chart-panel.expanded {
        max-height: 60vh; /* Adjust this value based on your content's maximum height */
    }


.chart-row {
    height: -webkit-fill-available;
}

.chart-col {
    min-width: 31.5vw;
    margin-bottom: .25rem;
}

.chart-div {
    padding: .25rem .25rem .25rem .25rem
}


.ag-grid-yellow-highlight {
    background-color: rgba(255, 247, 0, 0.2) !important;
    color: yellow !important;
}

.ag-grid-red-highlight {
    background-color: rgba(255, 102, 102, 0.1) !important;
    color: red !important;
}

.ag-grid-green-highlight {
    background-color: rgba(91, 255, 63, 0.1) !important;
    color: darkgreen !important;
}

.ag-grid-orange-highlight {
    background-color: rgba(255, 200, 0, 0.2) !important;
    color: darkgreen !important;
}

/* Flashing classes */
.ag-grid-yellow-highlight-flash {
    animation: flashYellow 1s infinite;
    color: yellow !important;
}

.ag-grid-red-highlight-flash {
    animation: flashRed 1s infinite;
    color: red !important;
}

.ag-grid-green-highlight-flash {
    animation: flashGreen 1s infinite;
    color: darkgreen !important;
}

.ag-grid-orange-highlight-flash {
    animation: flashOrange 1s infinite;
    color: orange !important;
}

.ag-row.highlight {
    background-color: rgba(153, 213, 255, 0.2) !important; /* Or any color of your choice */
}

.ag-grid-locked-row {
    background-color: rgba(255, 247, 0, 0.5) !important;
    color: red !important;
    font-weight: 600;
}

.text-align-last-center {
    text-align-last: center;
    -moz-text-align-last: center; /* For Firefox */
}



#globalToast {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1050;
    transition: opacity 0.3s ease;
    width: 300px; /* Adjust the width to make it more visible */
    padding: 10px; /* Add padding for better spacing */
}

.toast-body {
    font-size: 16px; /* Increase font size for readability */
}

.toast-header {
    padding: 0.75rem 1.25rem; /* Add padding to the header */
}

.toast {
    border-radius: 0.5rem; /* Rounded corners for a nicer look */
}

/* Define the wiggle animation */
/*@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}*/

/* Apply the base transition and animation on hover */
i.fas, i.fa-solid,
i.far, i.fa-regular,
span.fas, span.fa-solid,
span.far, span.fa-regular {
    transition: transform 0.2s ease; /* Smooth transition for transform */
}

    /* Wiggle effect on hover */
    i.fas:hover, i.fa-solid:hover,
    span.fas:hover, span.fa-solid:hover,
    button:hover i.fas, button:hover i.fa-solid,
    button:hover span.fas, button:hover span.fa-solid,
    i.far:hover, i.fa-regular:hover,
    span.far:hover, span.fa-regular:hover,
    button:hover i.far, button:hover i.fa-regular,
    button:hover span.far, button:hover span.fa-regular {
        transform: scale(1.3); /* Pop effect combined with wiggle */
    }

.statistic-item:hover i.fas, .statistic-item:hover i.fa-solid,
.statistic-item:hover i.far, .statistic-item:hover i.fa-regular,
.statistic-item:hover span.fas, .statistic-item:hover span.fa-solid,
.statistic-item:hover span.far, .statistic-item:hover span.fa-regular {
    transform: scale(1.3); /* Slightly increase size on hover */
}

i.fa-sync-alt, i.fa-sync,
span.fa-sync-alt, span.fa-sync {
    animation: none; /* No animation by default */
    transition: color 0.3s ease; /* Smooth transition for the color */
}

/* Define the infinite spin animation */
@keyframes spinAndScale {
    0% {
        transform: scale(1) rotate(0deg); /* Start with normal scale and no rotation */
    }

    50% {
        transform: scale(1.3) rotate(180deg); /* Midway through: scale up and rotate halfway */
    }

    100% {
        transform: scale(1) rotate(360deg); /* End with normal scale and full rotation */
    }
}

/* Apply the spin animation on hover */
i.fa-sync-alt:hover, i.fa-sync:hover,
span.fa-sync-alt:hover, span.fa-sync:hover,
button:hover i.fa-sync-alt, button:hover i.fa-sync,
button:hover span.fa-sync-alt, button:hover span.fa-sync {
    animation: spinAndScale 1.4s ease-in-out infinite; /* Rotate indefinitely */
}






/* Base Styles for Quartz Theme */
.aquila-quartz {
    /*border: thin solid #dcdcdc !important;*/
    width: 100% !important;
    border-spacing: 0 !important;
    border-radius: 4px !important;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;*/
}

    /* Header Styles */
    .aquila-quartz thead th {
        font-weight: 500 !important;
        font-size: small !important;
        color: var(--ag-foreground-color) !important;
        /*background-color: #f9f9fa !important;*/
        text-align: left !important;
        /*padding: 8px 12px !important;*/
        position: relative; /* Ensure positioning context for :after */
        line-height: 40px;
    }

        .aquila-quartz thead th:after {
            content: '';
            position: absolute;
            right: 0; /* Align to the end of the cell */
            top: 30%; /* Start 30% down from the top for centering */
            height: 40%; /* Set height to 40% of the cell */
            border-right: 2px inset lightgray;
        }


        .aquila-quartz thead th:last-child {
            border-right: none !important;
        }

    /* Body Row Styles */
    .aquila-quartz tbody tr {
        transition: background-color 0.2s !important;
    }

        .aquila-quartz tbody tr:hover {
            background-color: #d5e7f5 !important; /* Hover color similar to Quartz theme */
            color: inherit !important; /* Ensure text color doesn't change */
        }

    /* Cell Styles */
    .aquila-quartz tbody td {
        padding: 8px 12px !important;
        border-bottom: 1px solid #dcdcdc !important;
        text-align: left !important;
        vertical-align: middle !important;
    }


    /* Fixed Header Styles */
    .aquila-quartz thead {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }



.ag-theme-quartz {
    font-family: var(--aq-font);
    font-size: var(--aq-font-size);
}

    .ag-theme-quartz .ag-header-cell {
        font-family: var(--aq-font);
        font-size: var(--aq-font-size) !important;
        font-weight: 600; /* Make the headers bold */
    }

    .ag-theme-quartz .ag-cell {
        font-family: var(--aq-font);
        font-size: var(--aq-font-size) !important;
    }

.w-45 {
    width: 45%;
}




.ag-card-header-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    align-items: center;
    gap: 1rem;
}

    .ag-card-header-grid .ag-quick-filters {
        justify-self: center;
    }

    .ag-card-header-grid .ag-grid-controls {
        justify-self: end;
    }


.ag-card-header-grid-mm {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
}

    .ag-card-header-grid-mm .ag-grid-controls {
        justify-self: end;
    }


#AGGRID-ACCLIST,
#GenericSearchModalGrid {
    height: 55vh;
}

.acc-list-modal-width {
    min-width: 900px;
}



.mm-statistic-item {
    display: flex;
    align-items: stretch; /* Ensures children have equal height */
    position: relative;
    overflow: hidden; /* Ensures the highlight effect is contained within the item */
    transition: transform 0.3s ease;
}

    .mm-statistic-item:hover {
        transform: scale(1.01) translate(-2px, -2px); /* Grows by 5% and shifts up and left */
    }

    /* Sweeping highlight effect from bottom-left to top-right */
    .mm-statistic-item::after {
        content: "";
        position: absolute;
        bottom: -100%; /* Start off-screen at the bottom */
        left: -100%; /* Start off-screen at the left */
        width: 200%; /* Double the width to cover the diagonal sweep */
        height: 200%; /* Double the height to cover the diagonal sweep */
        background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
        transform: rotate(45deg); /* Rotate to achieve diagonal sweep */
        transition: bottom 0.4s ease, left 0.4s ease; /* Controls the sweep animation */
    }

    .mm-statistic-item:hover::after {
        bottom: 0; /* Move into view vertically */
        left: 0; /* Move into view horizontally */
    }


.mm-statistic-content {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: var(--aq-radius);
    margin: .25rem;
}

.mm-statistic-info {
    text-align: right;
    width: 100%;
    text-align-last: center;
    color: #fff; /* Ensures text is white */
}

.mm-statistic-item i {
    color: #fff; /* Sets all icons to white */
    margin: 1.5rem;
    font-size: xx-large;
}

.mm-statistic-item h4,
.mm-statistic-item h6,
.mm-statistic-item small {
    color: #fff; /* Sets all icons to white */
    margin: 0;
    margin-top: .25rem;
}


.mm-statistic-info small {
    display: block;
    font-weight: 900;
}


/* Background gradients for each statistic panel */
.mm-statistic-item-unmatched {
    background: linear-gradient(45deg, #cc0000 0%, #ff4d4d 100%);
    /*Dark Red to Bright Red*/
}

.mm-statistic-item-auto-match {
    background: linear-gradient(45deg, #006600 0%, #66cc66 100%);
    /*Dark Green to Bright Green*/
}

.mm-statistic-item-manual-match {
    background: linear-gradient(45deg, #cc8f00 0%, #ffcc00 100%);
    /*Dark Orange to Bright Orange*/
}

.mm-statistic-item-proposals {
    background: linear-gradient(45deg, #003366 0%, #3399ff 100%);
    /*Dark Blue to Bright Blue*/
}


.manual-matching-debit-row {
    color: var(--aq-red-text);
}

.manual-matching-credit-row {
    color: var(--aq-blue-text);
}

.manual-matching-group-row {
    color: var(--aq-green-text);
}


.sub-heading {
    font-weight: bold;
}


.tab label {
    justify-content: right;
    text-align: right;
}


.dropdown-menu {
    max-height: 50vh; /* Adjust the max height as needed */
    overflow-y: auto;
}

#genericKeyValueModalHeader {
    color: var(--aq-main-colour);
}

.main-card-body,
#DocumentManagement {
    max-height: 57.5vh !important;
    overflow-y: auto;
    /*padding-top: 0*/
}

#FullMessageDetails,
#AuditTrailScreen,
#MessagesScreen,
#RawJSONScreen {
    max-height: 55vh;
}
/*.mother-block-hidden-border,
.sub-block-hidden,
.repeated-element-hidden-border,
.hiddenElement {
    display: none !important;
}*/

#UserProcessModal .modal-dialog {
    min-width: 60vw;
}


.acclist-table-scroll {
    overflow: auto;
    max-width: -webkit-fill-available;
}

    .acclist-table-scroll thead th {
        background-color: white;
        position: sticky !important;
        top: 0;
        border: none;
    }

.acc-list-table-div {
    max-height: 50vh !important;
}

.acc-list-modal-width {
    max-width: 45vw !important;
}

.generic-modal-width {
    max-width: 50vw !important;
}


.input-width-md {
    max-width: 40% !important;
}

.empty-mandatory-field {
    background-color: #ffff00ab !important;
}

.invalid-value {
    background-color: yellow !important;
}

#DebitDetailsPanel {
    margin: 0 .5rem .5rem .5rem !important;
}


.country {
    max-width: 7% !important;
}

.ccy,
.fx-rate {
    max-width: 10% !important;
}



.date,
.bic {
    max-width: 15% !important;
}

.amount,
.clearing {
    max-width: 25% !important;
}

.cred-type {
    max-width: 12% !important;
}

.account-no,
.account-to-debit,
.account-to-credit,
.reference,
.lei {
    max-width: 35% !important;
}

.bic {
    text-transform: uppercase;
}

#PaymentModalSubHeading.success {
    color: var(--aq-green-text);
}

#PaymentModalSubHeading.partial {
    color: var(--aq-orange-text);
}

#PaymentModalSubHeading.fail {
    color: var(--aq-red-text);
}

/* Style the form */
#ManualEntryInputForm {
    background-color: #ffffff;
    margin: 1rem auto;
    width: 80%;
}


/* Hide all steps by default: */
.tab {
    display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: var(--aq-blue-grey);
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

    /* Mark the active step: */
    .step.active {
        opacity: 1;
    }

    /* Mark the steps that are finished and valid: */
    .step.finish {
        background-color: var(--aq-main-colour);
    }


.shake {
    animation: shake 0.5s;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.reference-input.invalid-input {
    border-color: rgba(255, 157, 71, 1) !important;
    background-color: rgba(255, 157, 71, 0.5) !important;
}

.invalid-input {
    border-color: #dc3545 !important; /* Red border color */
    background-color: rgba(255, 102, 102, 0.6) !important;
}

#CreditorDetailsList {
    animation: slow-flash 2s infinite;
}

#ExistingCreditorDetailsModalBody {
    max-height: 70vh;
    overflow: auto;
}

@keyframes slow-flash {
    0% {
        background-color: #ffc107; /* Bootstrap btn-warning color (fully opaque) */
    }

    50% {
        background-color: rgba(255, 193, 7, 0); /* Transparent version of the btn-warning color */
    }

    100% {
        background-color: #ffc107; /* Bootstrap btn-warning color (fully opaque) */
    }
}


.badge-success-swift {
    color: #fff;
    background-color: var(--aq-main-colour);
}

.large-icon {
    font-size: xxx-large;
    color: gray;
}
/*
#main-container{
    width: 85%;
}*/


/*#DocumentManagement {
    text-align: -webkit-center;
}
.doc-card{
    width:75%;
}*/
/*CSS FOR FILE UPLOAD BUTTON*/

@keyframes flashBorder {
    0%, 100% {
        border-color: var(--aq-main-colour);
        background-color: none;
    }

    50% {
        border-color: orange;
        background-color: rgba(255, 165, 0, 0.3); /* Orange with 50% opacity */
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-3px);
    }

    75% {
        transform: translateY(3px);
    }
}

.upload-container.flash {
    animation: flashBorder 0.4s ease-in-out infinite, shake 0.3s ease-in-out infinite;
}

.upload-container {
    height: 70%;
    border: 4px dashed var(--aq-main-colour);
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    align-content: center;
    transition: border-color 0.3s ease; /* Transition colour change */
}

    .upload-container:hover {
        border: 4px dashed var(--aq-secondary-colour);
        background-color: var(--aq-grey-light);
    }

        .upload-container:hover i {
            color: var(--aq-secondary-colour);
        }

    .upload-container i {
        font-size: 48px;
        color: var(--aq-main-colour);
        transition: color 0.3s ease; /* Transition colour change */
    }


    .upload-container p {
        margin: 10px 0 0;
        font-size: 16px;
        color: #555;
    }


.dz-success-mark, .dz-error-mark, .dz-error-message {
    display: none;
}

.mandatory-file-text {
    background-color: rgba(255, 247, 0, 0.5) !important;
}

#FullMessageDetails input {
    padding: 0px 3px !important;
}

#FullMessageDetails .input-group > .form-control.search-input {
    flex: initial;
}


label.btn.disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}




/* ========================================================= */
/* ================ NEW CONTEXT MENU CSS =================== */
/* ========================================================= */

/* ---------- aq-menu CSS (copy this into a stylesheet loaded after other libs) ---------- */
:root {
    --aq-bg: #ffffff;
    --aq-border: rgba(0,0,0,0.08);
    --aq-sep: rgba(0,0,0,0.06);
    --aq-shadow: 0 8px 20px rgba(17,24,39,0.12);
    --aq-muted: #6b7280;
    --aq-hover-bg: color-mix(in srgb, transparent, #80d3c9 8%);
    --aq-focus-outline: 2px solid rgba(99,102,241,0.12);
    --aq-spacing: 8px;
    --aq-icon-size: 16px;
    --aq-menu-background-color: color-mix(in srgb, #FFFFFF, #181d1f 3%);
    --aq-menu-border: solid 1px color-mix(in srgb, transparent, #181d1f 20%);
    --aq-menu-radius: 4px;
    --aq-menu-shadow: 0px 0px 16px 0px #00000026;
    --aq-menu-text-color: color-mix(in srgb, #FFFFFF, #181d1f 95%);
    --aq-menu-min-width: 100px;
    --aq-menu-max-width: 300px;
}

/* ---------- container ---------- */
.aq-menu {
    position: absolute; /* set with JS or inline top/left */
    display: block;
    min-width: var(--aq-menu-min-width);
    max-width: var(--aq-menu-max-width);
    width: var(--aq-menu-width);
    background-color: var(--aq-menu-background-color);
    color: var(--aq-menu-text-color);
    border-radius: var(--aq-menu-radius);
    border: 1px solid var(--aq-border-color);
    box-shadow: var(--aq-menu-shadow);
    padding: 6px 0;
    z-index: 99999;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    overflow: hidden;
    right: 25px;
    top: 175px;
}

    /* nice scroll for long menus */
    .aq-menu::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    .aq-menu::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.12);
        border-radius: 6px;
    }

.aq-menu {
    max-height: 70vh;
    overflow-y: auto;
}

/* ---------- list ---------- */
.aq-menu-list {
    display: block; /* ensure block for grid rows */
    padding: var(--aq-spacing) 0;
    margin: 0;
    width: 100%;
}

/* focus guards for keyboard parity (invisible) */
.aq-tab-guard {
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- menu row as CSS Grid (4 columns) ---------- */
.aq-menu-option {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr; /* icon | label | shortcut | popup */
    align-items: center; /* vertical centring */
    justify-items: start; /* left-align content inside each cell */
    column-gap: 1rem;
    padding: .3rem;
    cursor: pointer;
    min-height: var(--aq-min-row-height);
    font-weight: 500;
    user-select: none;
    outline: none;
    background: transparent;
    transition: background 120ms ease, color 120ms ease;
    line-height: 1.5;
    color: var(--aq-menu-text-color);
}

    .aq-menu-option .fas,
    .aq-menu-option .fa {
        color: var(--aq-menu-text-color);
    }

    /* reset common icon spacing (Font Awesome mr- classes may remain in markup) */
    .aq-menu-option i {
        margin-right: 0 !important;
    }

/* each part is a grid cell */
.aq-menu-option-part {
    line-height: var(--aq-icon-size);
    padding: calc(var(--aq-spacing) + 2px) 0;
}

    /* icon cell - left padded and vertically centered */
    .aq-menu-option-part.aq-menu-option-icon {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: calc(var(--aq-spacing) * 2);
        width: 100%;
        font-size: var(--aq-icon-size);
    }

    /* label cell - grows (3fr) */
    .aq-menu-option-part.aq-menu-option-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /* change to normal-wrap if you want wrapping */
        padding-left: 0;
        padding-right: 0;
    }

    /* shortcut and popup pointer cells */
    .aq-menu-option-part.aq-menu-option-shortcut,
    .aq-menu-option-part.aq-menu-option-popup-pointer {
        justify-self: start;
        padding-right: calc(var(--aq-spacing));
        color: var(--aq-muted);
        font-size: 0.92em;
    }

/* ---------- hover / focus / active ---------- */
.aq-menu-option:hover,
.aq-menu-option:focus {
    background: var(--aq-hover-bg);
}

.aq-menu-option:active {
    background: rgba(0,0,0,0.08);
}

/* keyboard focus visible */
.aq-menu-option:focus-visible {
    box-shadow: var(--aq-focus-outline);
    border-radius: 6px;
}


/* ---------- separators (if used) ---------- */
.aq-menu-separator {
    display: flex;
    gap: 6px;
    margin: 8px 4px;
    align-items: center;
}

.aq-menu-separator-part {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0,0,0,0.06);
    border-radius: 1px;
}

/* ---------- small screen adjustments ---------- */
@media (max-width: 420px) {
    .aq-menu {
        min-width: 170px;
        width: 92vw;
        max-width: calc(100vw - 24px);
    }

    .aq-menu-option {
        grid-template-columns: 28px 1fr;
        column-gap: 10px;
        min-height: 44px;
    }

    .aq-menu-option-part.aq-menu-option-shortcut,
    .aq-menu-option-part.aq-menu-option-popup-pointer {
        display: none;
    }
}

/* ---------- utility helpers (optional) ---------- */

/* if you want a small caret/arrow pointing to trigger, you can add this class to container
   adjust positioning via JS - included here for convenience */
.aq-menu.caret::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: var(--aq-bg);
    border-left: 1px solid var(--aq-border-color);
    border-top: 1px solid var(--aq-border-color);
    box-shadow: -2px -2px 6px rgba(0,0,0,0.04);
    top: -6px; /* default - adjust from JS when enabling */
    left: 20px; /* default - adjust from JS when enabling */
    z-index: 1;
}

/* ensure pointer events on decorative parts are ignored */
.aq-menu-option-part[role="presentation"] {
    pointer-events: none;
}


/* Disabled menu look */
.aq-menu-option-disabled,
.aq-menu-option.aq-menu-option-disabled {
    color: #9ca3af; /* light grey text */
    background: transparent; /* keep hover/bg neutral */
    opacity: 0.95; /* slightly dim */
    cursor: not-allowed; /* no-entry cursor */
    user-select: none;
}

    /* Dim any icon inside */
    .aq-menu-option-disabled .aq-menu-option-icon i,
    .aq-menu-option.aq-menu-option-disabled .aq-menu-option-icon i {
        color: #9ca3af;
        opacity: 0.9;
    }

    /* Make text and small extras muted */
    .aq-menu-option-disabled .aq-menu-option-text,
    .aq-menu-option-disabled .aq-menu-option-shortcut,
    .aq-menu-option-disabled .aq-menu-option-popup-pointer {
        color: #9ca3af;
        opacity: 0.95;
    }

    /* Prevent hover highlight visually (optional) */
    .aq-menu-option-disabled:hover,
    .aq-menu-option.aq-menu-option-disabled:hover {
        background: transparent;
        color: #9ca3af;
    }