/*------------------------------------*\
    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: "Segoe UI","Calibri";
    --aq-font-light: "Segoe UI Light","Calibri";
    --aq-main-colour: #80d3c9;
    --aq-secondary-colour: #2c4f7a;
    --aq-font-size: 16px;
    --aq-font-size-large: 1.1rem;
    --aq-red-text: #ed4545;
    --aq-orange-text: #ed752b;
    --aq-blue-text: #2c4f7a;
    --aq-green-text: #009900;
    --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;
}


/*------------------------------------*\
    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;
}

body {
    font-family: var(--aq-font);
    font-size: var(--aq-font-size);
}

/* 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: bold;
}

.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 {
    padding-right: 5px;
}

.UpdateQ {
    padding-right: 5px;
}

.DeleteQ {
    padding-right: 5px;
}

.CopyQ {
    padding-right: 5px;
}


/*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: 2;
}

/* 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);
}

    .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);
}

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

.fasmagenta {
    color: magenta;
}

/* 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);*/
    }

/* 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;
}

.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; */
}

.invalid-input {
    background-color: rgba(255, 102, 102, 0.7) !important;
}

.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: 20px;
    margin-bottom: 20px;
    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: 1.2em;
    padding-right: 12px;
}

.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;
}