/* Metronic overrides */
:root {
    --body-bg-color: #F7F7F7;
    --text-color-dark: #181c32;
    --text-color-navy: #112e43;
    --text-color-muted: #060606;
    --text-color-orange: #f36c23;
    --lightest-grey: #eee;
    --lightest-grey-border: #e4e6ef;
    --border-radius: .475rem;
    --lightest-grey-border-hover: var(--text-color-navy); /*#a1a5b7;*/
    --default-button-hover: #f5f5f5;
    --pi-blue: #00abc7; /*#009bc2*/
    --pi-dark-blue: #111d42;
    --pi-darkblue: #111d42;
    --pi-blue-dark: #00788c;
    --pi-blue-darker: #003d47;
    --ap-green: #3FAC48;
    --ap-red: #CD1335;
    --ap-orange: #EB620E;
    --badge-size: 18px;
    --help-icon-bg: rgba(117, 117, 126, .6);
    --white: #FFF;
    --page-background: var(--white);
    --default-font-size: 14px;
    --rainbow-grad--tilt: linear-gradient(125deg, rgba(228,23,23,1) 0%, rgba(253,179,29,1) 15%, rgba(245,253,38,1) 30%, rgba(45,247,82,1) 45%, rgba(78,224,222,1) 60%, rgba(136,131,209,1) 75%, rgba(187,104,198,1) 90%, rgba(252,69,183,1) 100%);
    --rainbow-grad: linear-gradient(90deg, rgba(228,23,23,1) 0%, rgba(253,179,29,1) 15%, rgba(245,253,38,1) 30%, rgba(45,247,82,1) 45%, rgba(78,224,222,1) 60%, rgba(136,131,209,1) 75%, rgba(187,104,198,1) 90%, rgba(252,69,183,1) 100%);
    --prism-grad: linear-gradient(white, white) padding-box, linear-gradient(90deg, rgba(238,57,148,1) 0%, rgba(249,171,115,1) 35%, rgba(171,119,184,1) 70%, rgba(92,131,194,1) 100%) border-box;
    --prism-grad-bg: linear-gradient(45deg, rgba(238,57,148,1) 0%, rgba(249,171,115,1) 35%, rgba(171,119,184,1) 70%, rgba(92,131,194,1) 100%);
    --prism-grad-bg-soft: linear-gradient(45deg, rgba(238,57,148,.3) 0%, rgba(249,171,115,.3) 35%, rgba(171,119,184,.3) 70%, rgba(92,131,194,.3) 100%);
    --redgreen-grad: linear-gradient(to right, #3FAC48 1%,#CD1335 100%);
    --split-bar-height: 15px;
    --highlight-blue: #0f7486;
    --focus-shadow: 0 0 5px 5px rgb(0,171,199, .2);
    --focus-border-color: #000;
    --focus-color: #000;
    --text-color: #101D41;
    --link-color: #101D41;
    --background-color: #f4f4f4;
    --icon-grey-off: rgba(117,117,126,.3);
    --icon-grey-on: rgba(117,117,126);
    --left-right-padding: 2.25rem;
    --left-right-padding--mobile: 2.25rem;
    --header-min-height: 80px;
    --linkblue: #00abc7;
    --baseSpacing: 0.25rem;
    --pi-grey-light: #c0c0c0;
    --font-family: 'Poppins', Arial, "Helvetica Neue","Segoe UI", helvetica, verdana, sans-serif;
}

@media all and (min-width: 992px) {
    .container-fluid {
        padding: 0 45px;
    }
}

/* START * MP 447 */
.dx-widget {
    font-family: 'Poppins', Arial, "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif !important;
}

    .dx-widget input, .dx-widget textarea {
        font-family: 'Poppins', Arial, "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif !important;
    }

.dx-overlay-wrapper {
    font-family: 'Poppins', Arial, "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif !important;
}
/* END * MP 447 */

/* Margin/Padding Utilities START */
.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

/*.w-100 {
    width: 100% !important;
}*/

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

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.mw-100 {
    max-width: 100% !important;
}

.mh-100 {
    max-height: 100% !important;
}

.m-0 {
    margin: 0 !important;
}

.mt-0,
.my-0 {
    margin-top: 0 !important;
}

.mr-0,
.mx-0 {
    margin-right: 0 !important;
}

.mb-0,
.my-0 {
    margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
    margin-left: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.mt-1,
.my-1 {
    margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
    margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
    margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
    margin-left: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.mt-2,
.my-2 {
    margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
    margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
    margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
    margin-left: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.mt-3,
.my-3 {
    margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
    margin-right: 1rem !important;
}

.mb-3,
.my-3 {
    margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
    margin-left: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.mt-4,
.my-4 {
    margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
    margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
    margin-left: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-5,
.my-5 {
    margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
    margin-right: 3rem !important;
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
    margin-left: 3rem !important;
}

.p-0 {
    padding: 0 !important;
}

.pt-0,
.py-0 {
    padding-top: 0 !important;
}

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

.pb-0,
.py-0 {
    padding-bottom: 0 !important;
}

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

.p-1 {
    padding: 0.25rem !important;
}

.pt-1,
.py-1 {
    padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
    padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
    padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
    padding-left: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.pt-2,
.py-2 {
    padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
    padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
    padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
    padding-left: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.pt-3,
.py-3 {
    padding-top: 1rem !important;
}

.pr-3,
.px-3 {
    padding-right: 1rem !important;
}

.pb-3,
.py-3 {
    padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
    padding-left: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.pt-4,
.py-4 {
    padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
    padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
    padding-left: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-5,
.py-5 {
    padding-top: 3rem !important;
}

.pr-5,
.px-5 {
    padding-right: 3rem !important;
}

.pb-5,
.py-5 {
    padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
    padding-left: 3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mt-auto,
.my-auto {
    margin-top: auto !important;
}

.mr-auto,
.mx-auto {
    margin-right: auto !important;
}

.mb-auto,
.my-auto {
    margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
    margin-left: auto !important;
}

@media (min-width: 576px) {
    .m-sm-0 {
        margin: 0 !important;
    }

    .mt-sm-0,
    .my-sm-0 {
        margin-top: 0 !important;
    }

    .mr-sm-0,
    .mx-sm-0 {
        margin-right: 0 !important;
    }

    .mb-sm-0,
    .my-sm-0 {
        margin-bottom: 0 !important;
    }

    .ml-sm-0,
    .mx-sm-0 {
        margin-left: 0 !important;
    }

    .m-sm-1 {
        margin: 0.25rem !important;
    }

    .mt-sm-1,
    .my-sm-1 {
        margin-top: 0.25rem !important;
    }

    .mr-sm-1,
    .mx-sm-1 {
        margin-right: 0.25rem !important;
    }

    .mb-sm-1,
    .my-sm-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-sm-1,
    .mx-sm-1 {
        margin-left: 0.25rem !important;
    }

    .m-sm-2 {
        margin: 0.5rem !important;
    }

    .mt-sm-2,
    .my-sm-2 {
        margin-top: 0.5rem !important;
    }

    .mr-sm-2,
    .mx-sm-2 {
        margin-right: 0.5rem !important;
    }

    .mb-sm-2,
    .my-sm-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-sm-2,
    .mx-sm-2 {
        margin-left: 0.5rem !important;
    }

    .m-sm-3 {
        margin: 1rem !important;
    }

    .mt-sm-3,
    .my-sm-3 {
        margin-top: 1rem !important;
    }

    .mr-sm-3,
    .mx-sm-3 {
        margin-right: 1rem !important;
    }

    .mb-sm-3,
    .my-sm-3 {
        margin-bottom: 1rem !important;
    }

    .ml-sm-3,
    .mx-sm-3 {
        margin-left: 1rem !important;
    }

    .m-sm-4 {
        margin: 1.5rem !important;
    }

    .mt-sm-4,
    .my-sm-4 {
        margin-top: 1.5rem !important;
    }

    .mr-sm-4,
    .mx-sm-4 {
        margin-right: 1.5rem !important;
    }

    .mb-sm-4,
    .my-sm-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-sm-4,
    .mx-sm-4 {
        margin-left: 1.5rem !important;
    }

    .m-sm-5 {
        margin: 3rem !important;
    }

    .mt-sm-5,
    .my-sm-5 {
        margin-top: 3rem !important;
    }

    .mr-sm-5,
    .mx-sm-5 {
        margin-right: 3rem !important;
    }

    .mb-sm-5,
    .my-sm-5 {
        margin-bottom: 3rem !important;
    }

    .ml-sm-5,
    .mx-sm-5 {
        margin-left: 3rem !important;
    }

    .p-sm-0 {
        padding: 0 !important;
    }

    .pt-sm-0,
    .py-sm-0 {
        padding-top: 0 !important;
    }

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

    .pb-sm-0,
    .py-sm-0 {
        padding-bottom: 0 !important;
    }

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

    .p-sm-1 {
        padding: 0.25rem !important;
    }

    .pt-sm-1,
    .py-sm-1 {
        padding-top: 0.25rem !important;
    }

    .pr-sm-1,
    .px-sm-1 {
        padding-right: 0.25rem !important;
    }

    .pb-sm-1,
    .py-sm-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-sm-1,
    .px-sm-1 {
        padding-left: 0.25rem !important;
    }

    .p-sm-2 {
        padding: 0.5rem !important;
    }

    .pt-sm-2,
    .py-sm-2 {
        padding-top: 0.5rem !important;
    }

    .pr-sm-2,
    .px-sm-2 {
        padding-right: 0.5rem !important;
    }

    .pb-sm-2,
    .py-sm-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-sm-2,
    .px-sm-2 {
        padding-left: 0.5rem !important;
    }

    .p-sm-3 {
        padding: 1rem !important;
    }

    .pt-sm-3,
    .py-sm-3 {
        padding-top: 1rem !important;
    }

    .pr-sm-3,
    .px-sm-3 {
        padding-right: 1rem !important;
    }

    .pb-sm-3,
    .py-sm-3 {
        padding-bottom: 1rem !important;
    }

    .pl-sm-3,
    .px-sm-3 {
        padding-left: 1rem !important;
    }

    .p-sm-4 {
        padding: 1.5rem !important;
    }

    .pt-sm-4,
    .py-sm-4 {
        padding-top: 1.5rem !important;
    }

    .pr-sm-4,
    .px-sm-4 {
        padding-right: 1.5rem !important;
    }

    .pb-sm-4,
    .py-sm-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-sm-4,
    .px-sm-4 {
        padding-left: 1.5rem !important;
    }

    .p-sm-5 {
        padding: 3rem !important;
    }

    .pt-sm-5,
    .py-sm-5 {
        padding-top: 3rem !important;
    }

    .pr-sm-5,
    .px-sm-5 {
        padding-right: 3rem !important;
    }

    .pb-sm-5,
    .py-sm-5 {
        padding-bottom: 3rem !important;
    }

    .pl-sm-5,
    .px-sm-5 {
        padding-left: 3rem !important;
    }

    .m-sm-auto {
        margin: auto !important;
    }

    .mt-sm-auto,
    .my-sm-auto {
        margin-top: auto !important;
    }

    .mr-sm-auto,
    .mx-sm-auto {
        margin-right: auto !important;
    }

    .mb-sm-auto,
    .my-sm-auto {
        margin-bottom: auto !important;
    }

    .ml-sm-auto,
    .mx-sm-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 768px) {
    .m-md-0 {
        margin: 0 !important;
    }

    .mt-md-0,
    .my-md-0 {
        margin-top: 0 !important;
    }

    .mr-md-0,
    .mx-md-0 {
        margin-right: 0 !important;
    }

    .mb-md-0,
    .my-md-0 {
        margin-bottom: 0 !important;
    }

    .ml-md-0,
    .mx-md-0 {
        margin-left: 0 !important;
    }

    .m-md-1 {
        margin: 0.25rem !important;
    }

    .mt-md-1,
    .my-md-1 {
        margin-top: 0.25rem !important;
    }

    .mr-md-1,
    .mx-md-1 {
        margin-right: 0.25rem !important;
    }

    .mb-md-1,
    .my-md-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-md-1,
    .mx-md-1 {
        margin-left: 0.25rem !important;
    }

    .m-md-2 {
        margin: 0.5rem !important;
    }

    .mt-md-2,
    .my-md-2 {
        margin-top: 0.5rem !important;
    }

    .mr-md-2,
    .mx-md-2 {
        margin-right: 0.5rem !important;
    }

    .mb-md-2,
    .my-md-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-md-2,
    .mx-md-2 {
        margin-left: 0.5rem !important;
    }

    .m-md-3 {
        margin: 1rem !important;
    }

    .mt-md-3,
    .my-md-3 {
        margin-top: 1rem !important;
    }

    .mr-md-3,
    .mx-md-3 {
        margin-right: 1rem !important;
    }

    .mb-md-3,
    .my-md-3 {
        margin-bottom: 1rem !important;
    }

    .ml-md-3,
    .mx-md-3 {
        margin-left: 1rem !important;
    }

    .m-md-4 {
        margin: 1.5rem !important;
    }

    .mt-md-4,
    .my-md-4 {
        margin-top: 1.5rem !important;
    }

    .mr-md-4,
    .mx-md-4 {
        margin-right: 1.5rem !important;
    }

    .mb-md-4,
    .my-md-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-md-4,
    .mx-md-4 {
        margin-left: 1.5rem !important;
    }

    .m-md-5 {
        margin: 3rem !important;
    }

    .mt-md-5,
    .my-md-5 {
        margin-top: 3rem !important;
    }

    .mr-md-5,
    .mx-md-5 {
        margin-right: 3rem !important;
    }

    .mb-md-5,
    .my-md-5 {
        margin-bottom: 3rem !important;
    }

    .ml-md-5,
    .mx-md-5 {
        margin-left: 3rem !important;
    }

    .p-md-0 {
        padding: 0 !important;
    }

    .pt-md-0,
    .py-md-0 {
        padding-top: 0 !important;
    }

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

    .pb-md-0,
    .py-md-0 {
        padding-bottom: 0 !important;
    }

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

    .p-md-1 {
        padding: 0.25rem !important;
    }

    .pt-md-1,
    .py-md-1 {
        padding-top: 0.25rem !important;
    }

    .pr-md-1,
    .px-md-1 {
        padding-right: 0.25rem !important;
    }

    .pb-md-1,
    .py-md-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-md-1,
    .px-md-1 {
        padding-left: 0.25rem !important;
    }

    .p-md-2 {
        padding: 0.5rem !important;
    }

    .pt-md-2,
    .py-md-2 {
        padding-top: 0.5rem !important;
    }

    .pr-md-2,
    .px-md-2 {
        padding-right: 0.5rem !important;
    }

    .pb-md-2,
    .py-md-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-md-2,
    .px-md-2 {
        padding-left: 0.5rem !important;
    }

    .p-md-3 {
        padding: 1rem !important;
    }

    .pt-md-3,
    .py-md-3 {
        padding-top: 1rem !important;
    }

    .pr-md-3,
    .px-md-3 {
        padding-right: 1rem !important;
    }

    .pb-md-3,
    .py-md-3 {
        padding-bottom: 1rem !important;
    }

    .pl-md-3,
    .px-md-3 {
        padding-left: 1rem !important;
    }

    .p-md-4 {
        padding: 1.5rem !important;
    }

    .pt-md-4,
    .py-md-4 {
        padding-top: 1.5rem !important;
    }

    .pr-md-4,
    .px-md-4 {
        padding-right: 1.5rem !important;
    }

    .pb-md-4,
    .py-md-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-md-4,
    .px-md-4 {
        padding-left: 1.5rem !important;
    }

    .p-md-5 {
        padding: 3rem !important;
    }

    .pt-md-5,
    .py-md-5 {
        padding-top: 3rem !important;
    }

    .pr-md-5,
    .px-md-5 {
        padding-right: 3rem !important;
    }

    .pb-md-5,
    .py-md-5 {
        padding-bottom: 3rem !important;
    }

    .pl-md-5,
    .px-md-5 {
        padding-left: 3rem !important;
    }

    .m-md-auto {
        margin: auto !important;
    }

    .mt-md-auto,
    .my-md-auto {
        margin-top: auto !important;
    }

    .mr-md-auto,
    .mx-md-auto {
        margin-right: auto !important;
    }

    .mb-md-auto,
    .my-md-auto {
        margin-bottom: auto !important;
    }

    .ml-md-auto,
    .mx-md-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 992px) {
    .m-lg-0 {
        margin: 0 !important;
    }

    .mt-lg-0,
    .my-lg-0 {
        margin-top: 0 !important;
    }

    .mr-lg-0,
    .mx-lg-0 {
        margin-right: 0 !important;
    }

    .mb-lg-0,
    .my-lg-0 {
        margin-bottom: 0 !important;
    }

    .ml-lg-0,
    .mx-lg-0 {
        margin-left: 0 !important;
    }

    .m-lg-1 {
        margin: 0.25rem !important;
    }

    .mt-lg-1,
    .my-lg-1 {
        margin-top: 0.25rem !important;
    }

    .mr-lg-1,
    .mx-lg-1 {
        margin-right: 0.25rem !important;
    }

    .mb-lg-1,
    .my-lg-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-lg-1,
    .mx-lg-1 {
        margin-left: 0.25rem !important;
    }

    .m-lg-2 {
        margin: 0.5rem !important;
    }

    .mt-lg-2,
    .my-lg-2 {
        margin-top: 0.5rem !important;
    }

    .mr-lg-2,
    .mx-lg-2 {
        margin-right: 0.5rem !important;
    }

    .mb-lg-2,
    .my-lg-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-lg-2,
    .mx-lg-2 {
        margin-left: 0.5rem !important;
    }

    .m-lg-3 {
        margin: 1rem !important;
    }

    .mt-lg-3,
    .my-lg-3 {
        margin-top: 1rem !important;
    }

    .mr-lg-3,
    .mx-lg-3 {
        margin-right: 1rem !important;
    }

    .mb-lg-3,
    .my-lg-3 {
        margin-bottom: 1rem !important;
    }

    .ml-lg-3,
    .mx-lg-3 {
        margin-left: 1rem !important;
    }

    .m-lg-4 {
        margin: 1.5rem !important;
    }

    .mt-lg-4,
    .my-lg-4 {
        margin-top: 1.5rem !important;
    }

    .mr-lg-4,
    .mx-lg-4 {
        margin-right: 1.5rem !important;
    }

    .mb-lg-4,
    .my-lg-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-lg-4,
    .mx-lg-4 {
        margin-left: 1.5rem !important;
    }

    .m-lg-5 {
        margin: 3rem !important;
    }

    .mt-lg-5,
    .my-lg-5 {
        margin-top: 3rem !important;
    }

    .mr-lg-5,
    .mx-lg-5 {
        margin-right: 3rem !important;
    }

    .mb-lg-5,
    .my-lg-5 {
        margin-bottom: 3rem !important;
    }

    .ml-lg-5,
    .mx-lg-5 {
        margin-left: 3rem !important;
    }

    .p-lg-0 {
        padding: 0 !important;
    }

    .pt-lg-0,
    .py-lg-0 {
        padding-top: 0 !important;
    }

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

    .pb-lg-0,
    .py-lg-0 {
        padding-bottom: 0 !important;
    }

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

    .p-lg-1 {
        padding: 0.25rem !important;
    }

    .pt-lg-1,
    .py-lg-1 {
        padding-top: 0.25rem !important;
    }

    .pr-lg-1,
    .px-lg-1 {
        padding-right: 0.25rem !important;
    }

    .pb-lg-1,
    .py-lg-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-lg-1,
    .px-lg-1 {
        padding-left: 0.25rem !important;
    }

    .p-lg-2 {
        padding: 0.5rem !important;
    }

    .pt-lg-2,
    .py-lg-2 {
        padding-top: 0.5rem !important;
    }

    .pr-lg-2,
    .px-lg-2 {
        padding-right: 0.5rem !important;
    }

    .pb-lg-2,
    .py-lg-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-lg-2,
    .px-lg-2 {
        padding-left: 0.5rem !important;
    }

    .p-lg-3 {
        padding: 1rem !important;
    }

    .pt-lg-3,
    .py-lg-3 {
        padding-top: 1rem !important;
    }

    .pr-lg-3,
    .px-lg-3 {
        padding-right: 1rem !important;
    }

    .pb-lg-3,
    .py-lg-3 {
        padding-bottom: 1rem !important;
    }

    .pl-lg-3,
    .px-lg-3 {
        padding-left: 1rem !important;
    }

    .p-lg-4 {
        padding: 1.5rem !important;
    }

    .pt-lg-4,
    .py-lg-4 {
        padding-top: 1.5rem !important;
    }

    .pr-lg-4,
    .px-lg-4 {
        padding-right: 1.5rem !important;
    }

    .pb-lg-4,
    .py-lg-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-lg-4,
    .px-lg-4 {
        padding-left: 1.5rem !important;
    }

    .p-lg-5 {
        padding: 3rem !important;
    }

    .pt-lg-5,
    .py-lg-5 {
        padding-top: 3rem !important;
    }

    .pr-lg-5,
    .px-lg-5 {
        padding-right: 3rem !important;
    }

    .pb-lg-5,
    .py-lg-5 {
        padding-bottom: 3rem !important;
    }

    .pl-lg-5,
    .px-lg-5 {
        padding-left: 3rem !important;
    }

    .m-lg-auto {
        margin: auto !important;
    }

    .mt-lg-auto,
    .my-lg-auto {
        margin-top: auto !important;
    }

    .mr-lg-auto,
    .mx-lg-auto {
        margin-right: auto !important;
    }

    .mb-lg-auto,
    .my-lg-auto {
        margin-bottom: auto !important;
    }

    .ml-lg-auto,
    .mx-lg-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 1200px) {
    .m-xl-0 {
        margin: 0 !important;
    }

    .mt-xl-0,
    .my-xl-0 {
        margin-top: 0 !important;
    }

    .mr-xl-0,
    .mx-xl-0 {
        margin-right: 0 !important;
    }

    .mb-xl-0,
    .my-xl-0 {
        margin-bottom: 0 !important;
    }

    .ml-xl-0,
    .mx-xl-0 {
        margin-left: 0 !important;
    }

    .m-xl-1 {
        margin: 0.25rem !important;
    }

    .mt-xl-1,
    .my-xl-1 {
        margin-top: 0.25rem !important;
    }

    .mr-xl-1,
    .mx-xl-1 {
        margin-right: 0.25rem !important;
    }

    .mb-xl-1,
    .my-xl-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-xl-1,
    .mx-xl-1 {
        margin-left: 0.25rem !important;
    }

    .m-xl-2 {
        margin: 0.5rem !important;
    }

    .mt-xl-2,
    .my-xl-2 {
        margin-top: 0.5rem !important;
    }

    .mr-xl-2,
    .mx-xl-2 {
        margin-right: 0.5rem !important;
    }

    .mb-xl-2,
    .my-xl-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-xl-2,
    .mx-xl-2 {
        margin-left: 0.5rem !important;
    }

    .m-xl-3 {
        margin: 1rem !important;
    }

    .mt-xl-3,
    .my-xl-3 {
        margin-top: 1rem !important;
    }

    .mr-xl-3,
    .mx-xl-3 {
        margin-right: 1rem !important;
    }

    .mb-xl-3,
    .my-xl-3 {
        margin-bottom: 1rem !important;
    }

    .ml-xl-3,
    .mx-xl-3 {
        margin-left: 1rem !important;
    }

    .m-xl-4 {
        margin: 1.5rem !important;
    }

    .mt-xl-4,
    .my-xl-4 {
        margin-top: 1.5rem !important;
    }

    .mr-xl-4,
    .mx-xl-4 {
        margin-right: 1.5rem !important;
    }

    .mb-xl-4,
    .my-xl-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-xl-4,
    .mx-xl-4 {
        margin-left: 1.5rem !important;
    }

    .m-xl-5 {
        margin: 3rem !important;
    }

    .mt-xl-5,
    .my-xl-5 {
        margin-top: 3rem !important;
    }

    .mr-xl-5,
    .mx-xl-5 {
        margin-right: 3rem !important;
    }

    .mb-xl-5,
    .my-xl-5 {
        margin-bottom: 3rem !important;
    }

    .ml-xl-5,
    .mx-xl-5 {
        margin-left: 3rem !important;
    }

    .p-xl-0 {
        padding: 0 !important;
    }

    .pt-xl-0,
    .py-xl-0 {
        padding-top: 0 !important;
    }

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

    .pb-xl-0,
    .py-xl-0 {
        padding-bottom: 0 !important;
    }

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

    .p-xl-1 {
        padding: 0.25rem !important;
    }

    .pt-xl-1,
    .py-xl-1 {
        padding-top: 0.25rem !important;
    }

    .pr-xl-1,
    .px-xl-1 {
        padding-right: 0.25rem !important;
    }

    .pb-xl-1,
    .py-xl-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-xl-1,
    .px-xl-1 {
        padding-left: 0.25rem !important;
    }

    .p-xl-2 {
        padding: 0.5rem !important;
    }

    .pt-xl-2,
    .py-xl-2 {
        padding-top: 0.5rem !important;
    }

    .pr-xl-2,
    .px-xl-2 {
        padding-right: 0.5rem !important;
    }

    .pb-xl-2,
    .py-xl-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-xl-2,
    .px-xl-2 {
        padding-left: 0.5rem !important;
    }

    .p-xl-3 {
        padding: 1rem !important;
    }

    .pt-xl-3,
    .py-xl-3 {
        padding-top: 1rem !important;
    }

    .pr-xl-3,
    .px-xl-3 {
        padding-right: 1rem !important;
    }

    .pb-xl-3,
    .py-xl-3 {
        padding-bottom: 1rem !important;
    }

    .pl-xl-3,
    .px-xl-3 {
        padding-left: 1rem !important;
    }

    .p-xl-4 {
        padding: 1.5rem !important;
    }

    .pt-xl-4,
    .py-xl-4 {
        padding-top: 1.5rem !important;
    }

    .pr-xl-4,
    .px-xl-4 {
        padding-right: 1.5rem !important;
    }

    .pb-xl-4,
    .py-xl-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-xl-4,
    .px-xl-4 {
        padding-left: 1.5rem !important;
    }

    .p-xl-5 {
        padding: 3rem !important;
    }

    .pt-xl-5,
    .py-xl-5 {
        padding-top: 3rem !important;
    }

    .pr-xl-5,
    .px-xl-5 {
        padding-right: 3rem !important;
    }

    .pb-xl-5,
    .py-xl-5 {
        padding-bottom: 3rem !important;
    }

    .pl-xl-5,
    .px-xl-5 {
        padding-left: 3rem !important;
    }

    .m-xl-auto {
        margin: auto !important;
    }

    .mt-xl-auto,
    .my-xl-auto {
        margin-top: auto !important;
    }

    .mr-xl-auto,
    .mx-xl-auto {
        margin-right: auto !important;
    }

    .mb-xl-auto,
    .my-xl-auto {
        margin-bottom: auto !important;
    }

    .ml-xl-auto,
    .mx-xl-auto {
        margin-left: auto !important;
    }
}

/* Margin/Padding Utilities END */

.spinner-border.spinner-blue {
    border: 0.185rem solid var(--pi-blue);
    border-right-color: transparent;
}

body:not([data-kt-sticky-header=on]) .header .header-menu .menu > .menu-item.here > .menu-link, body:not([data-kt-sticky-header=on]) .header .header-menu .menu > .menu-item.show > .menu-link {
    background-color: rgba(255,255,255,.2);
}

.header-fixed[data-kt-sticky-header=on] .header {
    height: 75px;
    padding: 0 0 10px 0;
}

    .header-fixed[data-kt-sticky-header=on] .header:after {
        content: "";
        background: #fff linear-gradient(90deg, rgba(243, 108, 35, 0.5) 0%, rgba(118, 132, 117, 0.5) 30%, rgba(0, 155, 194, 0.5) 70%, rgba(0, 155, 194, 0.5) 100%);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 10px;
    }

.header-fixed[data-kt-sticky-header=on] .wrapper {
    padding-top: 75px;
}

body {
    font-family: Poppins, Arial, Helvetica, sans-serif;
}

    body.dashboard-screens {
        background-color: var(--page-background);
    }

    body.bg-body, .bg-light {
        background-color: #F7F7F7 !important;
    }

@media all and (max-width: 991px) {
    body .dashboard-screens {
        background-size: auto auto;
        background-image: url(/theme/media/patterns/pi-bg-4-mobile.png);
        background-color: #F7F7F7;
        background-position: right 215px;
    }
}

@media (min-width: 992px) {
    div.table-data-wrapper::-webkit-scrollbar, ol::-webkit-scrollbar, pre::-webkit-scrollbar, span::-webkit-scrollbar, ul::-webkit-scrollbar {
        width: 1.2rem !important;
        height: 0.4rem !important;
    }
}

@media (min-width: 992px) {
    div.table-data-wrapper::-webkit-scrollbar-thumb, ol::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb, span::-webkit-scrollbar-thumb, ul::-webkit-scrollbar-thumb {
        background-color: #F36A23 !important;
    }
}

/* Staging indicator */

.staging-indicator {
    position: fixed;
    left: 50%;
    margin-left: -75px;
    top: 0px;
    z-index: 1000;
    text-align: center;
    width: 150px;
    height: 22px;
    line-height: 24px;
    background-color: #000;
    color: #FFF;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    pointer-events: none;
}

    .staging-indicator.staging {
        background-color: orange;
    }

    .staging-indicator.live {
        background-color: green;
    }

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

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

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

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

.text-danger {
    color: var(--ap-red) !important;
}

a, a:visited {
    color: var(--pi-blue);
}

.toolbar .btn.btn-custom {
    background-color: rgba(0,0,0,.3);
}

.scrolltop {
    background-color: #F36A23;
}

.g-xl-8, .gy-xl-8 {
    --bs-gutter-y: 1rem;
}

.g-xxl-8, .gy-xxl-8 {
    --bs-gutter-y: 1rem;
}

.page-title {
    margin-bottom: 15px;
}

.text-orange {
    color: #F36A23 !important;
}

/* Login overrides */
.js-treeview-container--header {
    padding-bottom: 10px;
}

.js-treeview-container--login .js-treeview-container--header input.form-control {
    height: 42px !important;
    text-align: left;
}

.js-treeview-container--login .js-treeview-container--content {
    max-height: 300px;
    min-height: 300px;
    overflow-y: auto;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin-bottom: 20px;
}

    .js-treeview-container--login .js-treeview-container--content .js-treeview-item {
        padding: 6px 0;
    }

/* Bootstrap overrides */
.btn {
    min-width: fit-content;
}

    .btn.btn-icon:has(span:not(.svg-icon)) {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .btn.btn-primary {
        color: #fff;
        /*border-color: #F36A23;
    background-color: #F36A23 !important;*/
        /*font-size: 12px;*/
        font-weight: 500;
        letter-spacing: 0;
        border-color: var(--pi-dark-blue);
        background: var(--pi-dark-blue);
        background: -webkit-gradient(linear, left top, left bottom, from(rgb(17, 29, 64)), to(rgb(3, 6, 13)));
        background: linear-gradient(180deg, rgb(17, 29, 64) 0%, rgb(3, 6, 13) 100%);
        border-width: 1px;
    }

.btn-primary:hover {
    color: #000;
    background-color: #D6560C;
    border-color: #D6560C;
}

body:not([data-kt-sticky-header=on]) .topbar .btn.btn-icon.btn-primary:hover:not(.btn-active) {
    background-color: #D6560C !important;
}

body:not([data-kt-sticky-header=on]) .topbar .btn.btn-icon.btn-primary:active:not(.btn-active) {
    background-color: #D6560C !important;
}

body:not([data-kt-sticky-header=on]) .topbar .btn.btn-icon.btn-primary:focus:not(.btn-active) {
    background-color: #D6560C !important;
}

body:not([data-kt-sticky-header=on]) .topbar .btn.btn-icon.btn-primary.show {
    background-color: #D6560C !important;
}

.btn.btn-primary:active:not(.btn-active) {
    color: #fff;
    border-color: var(--pi-dark-blue);
    background: var(--pi-dark-blue) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(17, 29, 64)), to(rgb(3, 6, 13)));
    background: linear-gradient(180deg, rgb(17, 29, 64) 0%, rgb(3, 6, 13) 100%) !important;
}

.btn.btn-primary:focus:not(.btn-active) {
    color: #fff;
    border-color: var(--pi-dark-blue);
    background: var(--pi-dark-blue) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(17, 29, 64)), to(rgb(3, 6, 13)));
    background: linear-gradient(180deg, rgb(17, 29, 64) 0%, rgb(3, 6, 13) 100%) !important;
}

.btn.btn-primary:hover:not(.btn-active) {
    color: #fff;
    border-color: var(--pi-dark-blue);
    background: var(--pi-dark-blue) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(17, 29, 64)), to(rgb(3, 6, 13)));
    background: linear-gradient(180deg, rgb(17, 29, 64) 0%, rgb(3, 6, 13) 100%) !important;
}

.btn.btn-danger {
    color: #fff;
    border-color: #CF1E41;
    background-color: #CF1E41 !important;
}

.btn-danger:hover {
    color: #000;
    background-color: #B21A39;
    border-color: #B21A39;
}

.btn.btn-danger:active:not(.btn-active) {
    color: #fff;
    border-color: #B21A39;
    background-color: #B21A39 !important;
}

.btn.btn-danger:focus:not(.btn-active) {
    color: #fff;
    border-color: #B21A39;
    background-color: #B21A39 !important;
}

.btn.btn-danger:hover:not(.btn-active) {
    color: #fff;
    border-color: #B21A39;
    background-color: #B21A39 !important;
}

.bg-success {
    --bg-color: var(--ap-green) !important;
}

.btn.btn-success {
    color: #fff;
    border-color: var(--ap-green);
    background-color: var(--ap-green) !important;
}

.btn-success:hover {
    color: #000;
    background-color: #308235;
    border-color: #308235;
}

.btn.btn-success:active:not(.btn-active) {
    color: #fff;
    border-color: #308235;
    background-color: #308235 !important;
}

.btn.btn-success:focus:not(.btn-active) {
    color: #fff;
    border-color: #308235;
    background-color: #308235 !important;
}

.btn.btn-success:hover:not(.btn-active) {
    color: #fff;
    border-color: #308235;
    background-color: #308235 !important;
}

/* DevExtreme overrides */

.person-hover {
    display: none;
}

@font-face {
    font-family: 'skyron';
    src: url('/local/fonts/skyron.eot?n4dzzw');
    src: url('/local/fonts/skyron.eot?n4dzzw#iefix') format('embedded-opentype'), url('/local/fonts/skyron.ttf?n4dzzw') format('truetype'), url('/local/fonts/skyron.woff?n4dzzw') format('woff'), url('/local/fonts/skyron.svg?n4dzzw#skyron') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="skyron-icon-"], [class*=" skyron-icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'skyron' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.skyron-icon-Driver-Strength-Icon:before {
    font-family: 'skyron' !important;
    content: "\1f321";
}

.dx-button .dx-button-content [class^="skyron-icon-"] {
    padding: 0 3px; /* 0 0*/
    ;
    text-align: center;
}

.dx-button .dx-button-content [class^="skyron-icon-"],
.dx-button .dx-button-content [class*=" skyron-icon-"] {
    font-size: 23px;
}

.buttonCell.dx-button .dx-button-content [class^="skyron-icon-"] {
    line-height: 22px;
    margin: 3px 0 0 0;
}

td.dx-button {
    border: none !important;
}

.dx-datagrid-headers {
    color: var(--text-color-dark);
    font-weight: 600;
}

    .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
        padding-top: 15px;
        padding-bottom: 15px;
    }

.dx-pager .dx-pages .dx-selection {
    color: #ffffff;
    background-color: #00abc7;
}

.dx-pager .dx-page-sizes .dx-selection {
    color: #ffffff;
    background-color: #EB620E;
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link, .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused), .dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td:not(.dx-focused) {
    background-color: #00abc7;
    color: #fff;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td, .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
    vertical-align: middle;
}

/*.dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td {
    background-color: #fcfcfc;
    border-top: 1px solid #fcfcfc;
    border-bottom: 1px solid #fcfcfc;
}
*/
.dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td {
    background-color: #FFF;
    border-top: 1px solid #fcfcfc;
    border-bottom: 1px solid #fcfcfc;
}

.btn-pi-action {
    height: calc(1.1 em + 1.1 rem + 2 px ) !important;
    width: calc(1.1 em + 1.1 rem + 2 px ) !important;
}

.dx-datagrid-pager {
    border-top: 2px solid #ddd;
}

.internal-grid .dx-header-row {
    display: none;
}

.internal-grid .dx-datagrid-rowsview {
    border-top: none !important;
}

.internal-grid-container {
    padding: 0 !important;
}

.dx-dropdowneditor-icon {
    color: var(--text-color-dark);
}

.dx-switch {
    width: 52px !important;
}

.dx-switch-container {
    height: 32px !important;
    border-radius: 4px !important;
}

.dx-switch-inner {
    padding: 4px !important;
}

.dx-switch-on, .dx-switch-off {
    font-size: 1em !important;
    font-weight: unset !important;
}

.dx-switch-off {
    color: #DDDDDD !important;
}

.dx-tag-content {
    background-color: #EB620E;
    color: #ffffff;
}

.dx-state-readonly .dx-tag-content {
    background-color: #CCCCCC !important;
    color: #ffffff;
}

.dx-tag-remove-button::before {
    background: #ffffff;
}

.dx-tag-remove-button::after {
    background: #ffffff;
}

.dx-popup-content {
    /*padding: 6px;*/
    padding: 20px;
}

.dx-datagrid-table .dx-row .dx-command-expand.dx-datagrid-group-space {
    padding-top: 12px;
}

.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
    background: #EB620E;
}

/* Tag box buttons */

.dx-button-mode-contained.dx-button-default {
    background-color: #FFFFFF;
    color: #EB620E;
    font-weight: bold;
    font-size: 16px;
}

    .dx-button-mode-contained.dx-button-default.dx-state-hover {
        background-color: #DDDDDD;
        color: #EB620E;
        font-weight: bold;
        font-size: 16px;
    }

    .dx-button-mode-contained.dx-button-default.dx-state-active {
        background-color: #DDDDDD;
        color: #EB620E;
        font-weight: bold;
        font-size: 16px;
    }

    .dx-button-mode-contained.dx-button-default .dx-button-content {
        padding-left: 6px;
        padding-right: 6px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

        .dx-button-mode-contained.dx-button-default .dx-button-content::after {
            content: "\f001";
            font: 18px/18px DXIcons;
        }

.dx-overlay-content.dx-popup-normal.dx-resizable {
    background-image: url('/local/img/gripper.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 15px 15px;
    background-position-x: 5px;
    background-position-y: calc(100% - 5px);
}

/* Toastr overrides */
.toastr.toastr-warning {
    background-color: #F36A23;
    color: #fff;
}

#toastr-container > div {
    width: 350px;
}

#toastr-container > .toastr-warning {
    /*background-image: url(/local/img/loading-progress.gif) !important;*/
    background-image: url(/local/img/loader-svg.svg) !important;
    background-repeat: no-repeat;
    background-position: 0 center !important;
    background-size: 60px 60px;
    background-color: rgba(0, 155, 194,.85)
}


/* Accordian */

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.8rem 1.0rem;
    padding-right: 1.63rem;
    font-size: 1rem;
    color: #181c32;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
}

    .accordion-button:not(.collapsed) {
        color: #181c32;
        background-color: #f5f8fa;
        box-shadow: inset 0 -1px 0 #eff2f5;
    }

.accordion-button-no-expand {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.8rem 1.0rem;
    font-size: 1rem;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
    color: #a1a5b7;
    box-shadow: inset 0 -1px 0 #eff2f5;
}



/* Skeletoning */

.visually-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: auto;
}


:root {
    --preload-fp-height: 400px;
}

.focal-point-chart--donut .focal-point-chart:empty {
    position: relative;
    height: var(--preload-fp-height);
    pointer-events: none;
}

    .focal-point-chart--donut .focal-point-chart:empty::after {
        position: absolute;
        top: 17px;
        left: 50%;
        transform: translateX(-50%);
        right: 0;
        bottom: 0;
        content: "";
        background-image: url(../img/focal-preload.svg);
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.5;
        -webkit-animation: loading 1.5s infinite;
        animation: loading 1.5s infinite;
        width: 305px;
        z-index: 1;
    }

    .focal-point-chart--donut .focal-point-chart:empty::before {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50%;
        width: 100%;
        content: "";
        background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 2;
    }

.focal-point-chart--bar .focal-point-chart:empty {
    position: relative;
    height: var(--preload-fp-height);
    pointer-events: none;
}

    .focal-point-chart--bar .focal-point-chart:empty::after {
        position: absolute;
        top: 17px;
        left: 50%;
        transform: translateX(-50%);
        right: 0;
        bottom: 0;
        content: "";
        background-image: url(../img/focal-bar-preload.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top center;
        opacity: 0.5;
        -webkit-animation: loading 1.5s infinite;
        animation: loading 1.5s infinite;
        width: 100%;
        height: 90%;
        z-index: 1;
    }

    .focal-point-chart--bar .focal-point-chart:empty::before {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50%;
        width: 100%;
        content: "";
        background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 2;
    }

@-webkit-keyframes loading {
    from {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

@keyframes loading {
    from {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

.action-plan-chart:empty {
    position: relative;
}

    .action-plan-chart:empty::after {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        right: 0;
        bottom: 0;
        content: "";
        background-image: url(../img/action-plan-chart-preloader.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top center;
        opacity: 0.5;
        -webkit-animation: loading 1.5s infinite;
        animation: loading 1.5s infinite;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .action-plan-chart:empty:empty::before {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50%;
        width: 100%;
        content: "";
        background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 2;
    }

.upcoming-actions:empty {
    position: relative;
}


.tooltip .tooltip-inner {
    box-shadow: 0 5px 10px rgba(0,0,0,.5);
}


/* datagrid preloader */
:root {
    --skeleton-color: #EEEEEE;
    --item-height: 25px;
    --item-row-padding: 15px;
    --skeleton-height: 280px;
}

.datagrid-loaded-in__skeleton {
    width: 100%;
    height: var(--skeleton-height);
    overflow: hidden;
    position: relative;
    pointer-events: none;
}

    .datagrid-loaded-in__skeleton:after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50%;
        width: 100%;
        content: "";
        background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
    }

    .datagrid-loaded-in__skeleton .dli-headers {
        border-bottom: 1px solid var(--skeleton-color);
        padding: var(--item-row-padding) 0;
        display: flex;
        width: 100%;
    }

    .datagrid-loaded-in__skeleton .dli-body .dli-row {
        padding: var(--item-row-padding) 0;
        display: flex;
        width: 100%;
    }

        .datagrid-loaded-in__skeleton .dli-headers .dli-header-item,
        .datagrid-loaded-in__skeleton .dli-body .dli-row .dli-row-item {
            background-color: var(--skeleton-color);
            border-radius: 50px;
            height: var(--item-height);
            flex: 1 0 auto;
            margin-right: 5px;
            opacity: 0.5;
            -webkit-animation: loading 1.5s infinite;
            animation: loading 1.5s infinite;
        }

            .datagrid-loaded-in__skeleton .dli-headers .dli-header-item:last-child,
            .datagrid-loaded-in__skeleton .dli-body .dli-row .dli-row-item:last-child {
                border-right: 0;
                margin-right: 0;
            }

            .datagrid-loaded-in__skeleton .dli-headers .dli-header-item.long,
            .datagrid-loaded-in__skeleton .dli-body .dli-row .dli-row-item.long {
                flex-basis: 25%;
            }

            .datagrid-loaded-in__skeleton .dli-headers .dli-header-item.short,
            .datagrid-loaded-in__skeleton .dli-body .dli-row .dli-row-item.short {
                flex-basis: 10%;
                flex-grow: 0;
            }


.card {
    transition: height .25s ease-in-out;
    border: 2px solid var(--body-bg-color);
    box-shadow: none;
}

.breadcrumb .breadcrumb-item .dd-menu > a {
    display: block;
    padding: 5px 10px;
    border: 1px solid var(--lightest-grey-border);
    background-color: #FFF;
    border-radius: var(--border-radius);
}

    .breadcrumb .breadcrumb-item .dd-menu > a:hover {
        border: 1px solid var(--lightest-grey-border-hover);
    }

    .breadcrumb .breadcrumb-item .dd-menu > a:active {
        background-color: var(--default-button-hover);
    }


.dx-header-row > td > .dx-datagrid-text-content {
    font-size: 14px;
    color: var(--text-color-dark);
}

.card .card-header .card-title, .card .card-header .card-title .card-label {
    color: var(--text-color-navy);
}

.form-check.form-check-solid .form-check-input:checked {
    background-color: var(--pi-blue);
}

.svg-icon.svg-icon-primary svg [fill]:not(.permanent):not(g) {
    fill: var(--pi-blue);
}

.badge-success {
    background-color: #3FAC48;
}

/*.btn.btn-primary.btn-outline {
    border-width: 2px;*/
/*border-color: var(--text-color-orange) !important;*/
/*border-color: var(--pi-dark-blue) !important;
    background: none; 
    background-color: #FFF !important;*/
/*color: var(--text-color-orange) !important;*/
/*color: var(--pi-dark-blue) !important;
}


    .btn.btn-primary.btn-outline:hover {*/
/*background-color: var(--text-color-orange) !important;*/
/*color: #FFF !important;
        background: var(--pi-dark-blue);
        background: -webkit-gradient(linear, left top, left bottom, from(rgb(17, 29, 64)), to(rgb(3, 6, 13)));
        background: linear-gradient(180deg, rgb(17, 29, 64) 0%, rgb(3, 6, 13) 100%);
    }

    .btn.btn-primary.btn-outline .svg-icon svg [fill]:not(.permanent):not(g) {*/
/*fill: var(--text-color-orange) !important;*/
/*fill: var(--pi-dark-blue);
    }

    .btn.btn-primary.btn-outline:hover .svg-icon svg [fill]:not(.permanent):not(g) {
        fill: #FFF;
    }

    .btn.btn-primary.btn-outline:active, .btn.btn-primary.btn-outline:focus
    .btn.btn-primary.btn-outline:active i, .btn.btn-primary.btn-outline:focus i,
    .btn.btn-primary.btn-outline:active span, .btn.btn-primary.btn-outline:focus span {
        color: #FFF;
    }

        .btn.btn-primary.btn-outline:active .svg-icon svg [fill]:not(.permanent):not(g),
        .btn.btn-primary.btn-outline:focus .svg-icon svg [fill]:not(.permanent):not(g) {
            fill: #FFF;
        }*/





.explore-toggle .explore-icon.right-panel-open {
    display: inline-block;
}

.explore-toggle {
    background-color: #F36A23;
    position: absolute;
    left: -50px;
    color: #FFF;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    bottom: 0;
    height: 250px;
    text-align: center;
    right: auto;
    width: 50px;
    border-top-left-radius: 0.475rem;
    border-bottom-left-radius: 0.475rem;
    font-size: 16px;
    transition: height .25s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .explore-toggle.has-value {
        height: 250px;
    }

    .explore-toggle:hover {
        background-color: #D6560C;
    }

    .explore-toggle .explore-toggle--inner {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        writing-mode: vertical-lr;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .explore-toggle.has-value .explore-toggle--inner .explore-toggle-label {
        position: relative;
        left: 10px;
    }


    .explore-toggle .explore-toggle--inner .explore-icon {
        position: relative;
        rotate: 90deg;
        margin-bottom: 15px;
    }

        .explore-toggle .explore-toggle--inner .explore-icon img {
            transform: rotate(-90deg);
        }

    .explore-toggle .explore-toggle--inner .explore-toggle-label .filters-drawer-count {
        width: 0;
        display: inline-block;
        text-align: left;
    }

    .explore-toggle.has-value .explore-toggle--inner .explore-toggle-label .filters-drawer-count {
        width: 40px;
    }

.filter-drawer.drawer {
    overflow: visible;
    border-left: 4px solid var(--text-color-orange);
}

.filter-drawer.drawer-on .explore-toggle .explore-toggle--inner .explore-icon img {
    transform: rotate(90deg);
}

.header-menu .menu-link.home-link {
    padding: .85rem 1rem;
}
    /*@media all and (min-width: 992px) {
    .header-menu .menu-link.home-link {
        min-height: 40.5px;
    }
}*/


    .header-menu .menu-link.home-link i.fas {
        font-size: 1.25rem;
    }

    .header-menu .menu-link.home-link .svg-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

/*.dx-datagrid .dx-header-row .impact-column .dx-datagrid-text-content {
    display: block;
}*/

.dx-datagrid .dx-header-row .impact-column .dx-datagrid-text-content > .dx-header-cell > span:not(.help-tt-icon) {
    position: relative;
    top: 1px;
}

.dx-datagrid .dx-datagrid-content .impact-column {
    width: 100%;
}

    .dx-datagrid .dx-datagrid-content .impact-column > .dx-button-content {
        text-align: center;
    }


.dx-datagrid .dx-header-row .help-tt-icon {
    background-color: var(--help-icon-bg);
    color: white;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 17.5px;
}

    .dx-datagrid .dx-header-row .help-tt-icon i {
        color: white;
        font-size: 0.7rem;
    }

.material-icons.check-circle:after {
    content: "\00a0";
    background-image: url(/local/icons/check-circle--filled.svg);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    width: 28px;
    height: 28px;
    background-size: 100%;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    opacity: .75;
}

.material-icons.check-circle:hover:after {
    background-image: url(/local/icons/check-circle--filled.svg);
}

.material-icons.check-circle-outline:after {
    content: "\00a0";
    background-image: url(/local/icons/check-circle.svg);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    width: 28px;
    height: 28px;
    background-size: 100%;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    opacity: .75;
}

.material-icons.check-circle-outline:hover:after {
    background-image: url(/local/icons/check-circle.svg);
}



/* Action Planning Overview */
.action-plan-overview {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

    .action-plan-overview .action-plan-overview--item {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-right: 15px;
        background-color: var(--body-bg-color);
        justify-content: space-between;
        overflow: hidden;
        height: 0;
        opacity: 0;
        animation-name: ap-item-slide;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
        border-radius: var(--border-radius);
    }

        .action-plan-overview .action-plan-overview--item > div.action-plan-overview--item-content {
            padding: 1rem;
            display: flex;
            flex-grow: 1;
            align-items: flex-start;
            flex-direction: column;
            justify-content: flex-end;
        }

        .action-plan-overview .action-plan-overview--item:last-child {
            margin-right: 0;
        }

        .action-plan-overview .action-plan-overview--item .value {
            font-size: 4.8em;
            font-weight: 500;
        }

        .action-plan-overview .action-plan-overview--item .label {
            font-size: 1.2rem;
        }

        .action-plan-overview .action-plan-overview--item .bar {
            border-top: 1px solid #FFF;
            height: 20px;
            padding: 0;
            background-color: #CCC;
        }

        .action-plan-overview .action-plan-overview--item.status-not-started {
            animation-delay: 1ms;
        }

        .action-plan-overview .action-plan-overview--item.status-in-progress {
            animation-delay: 300ms;
        }

        .action-plan-overview .action-plan-overview--item.status-completed {
            animation-delay: 600ms;
        }

        .action-plan-overview .action-plan-overview--item.status-not-started .bar {
            background-color: var(--ap-red);
        }

        .action-plan-overview .action-plan-overview--item.status-in-progress .bar {
            background-color: var(--ap-orange) !important;
        }

        .action-plan-overview .action-plan-overview--item.status-completed .bar {
            background-color: var(--ap-green);
        }

@-webkit-keyframes ap-item-slide {
    from {
        opacity: 0;
        height: 0;
    }

    to {
        opacity: 1;
        height: 100%;
    }
}

@keyframes ap-item-slide {
    from {
        opacity: 0;
        height: 0;
    }

    to {
        opacity: 1;
        height: 100%;
    }
}


.login-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

    .login-img img {
        max-width: 450px;
    }

.coloured-brand-bar {
    background: rgb(243, 108, 35);
    background: linear-gradient(90deg, rgb(243, 108, 35) 0%, rgba(118, 132, 117, 0.9) 30%, rgb(0, 155, 194) 70%, rgb(0, 155, 194) 100%);
    width: 100%;
    height: 10px;
    display: block;
    opacity: 0.5;
}

.btn.btn-primary-dblue {
    padding: 15px 26px;
    height: auto;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    color: #fff;
    border-color: var(--pi-dark-blue);
    background: #111d40;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(17, 29, 64)), to(rgb(3, 6, 13)));
    background: linear-gradient(180deg, rgb(17, 29, 64) 0%, rgb(3, 6, 13) 100%);
    text-transform: none;
    border-width: 1px;
}

.btn.btn-rounded {
    border-radius: 50px;
}

.sign-in-email h1 {
    font-weight: 500 !important;
    font-size: 18px;
    line-height: 22px;
}

.btn.btn-light-primary {
    color: var(--pi-blue);
}

    .btn.btn-light-primary:hover:not(.btn-active) {
        color: white;
        background-color: var(--pi-blue) !important;
        border-color: var(--pi-blue) !important;
    }

.fs-18 {
    font-size: 18px !important;
}

.badge.badge-circle {
    width: var(--badge-size) !important;
    height: var(--badge-size) !important;
    line-height: 1 !important;
    font-size: .75rem !important;
}


.scrolltop {
    right: auto;
    left: 20px;
}


.nav-line-tabs .nav-item .nav-link.active, .nav-line-tabs .nav-item .nav-link:hover:not(.disabled), .nav-line-tabs .nav-item.show .nav-link {
    border-left: 1px solid #eff2f5 !important;
    border-top: 1px solid #eff2f5 !important;
    border-right: 1px solid #eff2f5 !important;
    background-color: #FFF !important;
}

.nav-line-tabs .nav-item .nav-link, .nav-line-tabs .nav-item .nav-link:not(.disabled), .nav-line-tabs .nav-item .nav-link {
    border-left: 1px solid transparent !important;
    border-top: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    color: #000;
}


.language-symbol {
    background-color: #FFF;
}

/* Action Planning overrides */
.action-planning-report__columns .apr-col-wrapper .apr-col .apr-item--footer ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.action-planning-report__columns .apr-col-wrapper h2 {
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
    border-bottom-left-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
}

.action-planning-report__columns .apr-col-wrapper .apr-col .apr-item {
    border-radius: var(--border-radius) !important;
}

@media all and (min-width: 1024px) {
    /*.action-planning-report__columns .apr-col-wrapper.not-started h2:before {
        position: absolute;
        right: 0 !important;
        width: 30px;
        content: "";
        background-color: yellow;
        top: 0;
        bottom: 0;
        z-index:1;
    }*/
    .action-planning-report__columns .apr-col-wrapper.not-started h2:after {
        display: none;
        /*background-image: url(/local/img/arrows/red-right-round.svg) !important;*/
        background-image: none;
        height: 46px !important;
        background-position: right 0;
        background-color: #FCC;
        right: 0 !important;
        width: 46px !important;
        content: "";
        /* border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;*/
    }

    .action-planning-report__columns .apr-col-wrapper.in-progress h2:after {
        display: none;
        background-image: url(/local/img/arrows/orange-right-round.svg) !important;
        height: 46px !important;
        background-position: right 0;
        background-color: #FFF;
        right: 0 !important;
        width: 26px !important;
    }

    .action-planning-report__columns .apr-col-wrapper.in-progress h2:before {
        display: none;
        background-image: url(/local/img/arrows/orange-left-round.svg) !important;
        height: 46px !important;
    }

    .action-planning-report__columns .apr-col-wrapper.complete h2::before {
        display: none;
        background-image: url(/local/img/arrows/green-left-round.svg) !important;
        height: 46px !important;
    }
}


#kt_header .header-menu .menu-item .menu-link .menu-title {
    font-size: 14px;
}

.viewing-details-username {
    margin-top: 2px;
    color: var(--pi-blue);
    font-weight: 500;
}

@media all and (min-width: 1200px) and (max-width: 1399px) {

    .content .report-module__content--gauge-wrapper .score__inner--content h2 {
        margin-top: -65px !important;
        font-size: 4.2rem !important;
    }

    .content .report-module__content--gauge-wrapper .score__inner--content span.change {
        font-size: 1.6em !important;
    }
}

.main-nav-button {
    width: 150px !important;
}

@media all and (max-width: 1320px) {
    .main-nav-button > span.main-nav-button--label {
        display: none;
    }

    .main-nav-button {
        width: 50px !important;
    }
}

#kt_header .header-menu {
    display: flex;
}

@media all and (max-width: 1199px) {
    #kt_header .header-menu {
        display: none;
    }
}

/*.hc-pie-data-label {
    font-size: 14px;
}*/

:root {
    --cp-border-rad: 12px;
    --cp-border-rad-inner: 6px;
}

.copilot.copilot__overall .copilot__summary {
    background-color: white;
    border: 3px solid var(--lightest-grey);
    padding: 1rem;
    border-radius: var(--cp-border-rad);
    display: flex;
    height: 100%;
    flex-direction: column;
}

    .copilot.copilot__overall .copilot__summary.copilot__summary--rainbow {
        position: relative;
        background-clip: padding-box;
        background: var(--rainbow-grad--tilt);
        padding: 1rem;
    }

        .copilot.copilot__overall .copilot__summary.copilot__summary--rainbow .copilot__summary--rainbow-inner {
            background-color: white;
            padding: 2rem;
            border-radius: 25px;
            height: 100%;
        }

        .copilot.copilot__overall .copilot__summary.copilot__summary--rainbow .h5 {
            background-color: var(--lightest-grey);
        }

    .copilot.copilot__overall .copilot__summary .h5 {
        background-color: var(--lightest-grey);
        border-radius: 50px;
        padding: 10px 15px;
        text-align: left;
        margin-bottom: 1rem;
    }

    .copilot.copilot__overall .copilot__summary p {
        line-height: 1.75;
    }

        .copilot.copilot__overall .copilot__summary p:last-child {
            margin-bottom: 0;
        }


.copilot.copilot__results .copilot__summary {
    background-color: white;
    padding: 1rem;
    border-radius: var(--cp-border-rad);
    display: flex;
    height: 100%;
    flex-direction: column;
    border: 3px solid var(--lightest-grey);
}

    .copilot.copilot__results .copilot__summary > div {
        display: flex;
    }

        .copilot.copilot__results .copilot__summary > div span {
            flex-grow: 1;
        }

        .copilot.copilot__results .copilot__summary > div .action-btn {
            flex-shrink: 1;
            display: flex;
            align-items: flex-end;
            border: 0;
            background: 0;
        }

    .copilot.copilot__results .copilot__summary.copilot__summary--category {
        position: relative;
        background-clip: padding-box;
        background: var(--lightest-grey);
        padding: 5px;
        border: 0;
    }

        .copilot.copilot__results .copilot__summary.copilot__summary--category .copilot__summary--category-inner {
            display: flex;
            flex-direction: row;
            background-color: white;
            padding: 1rem;
            border-radius: var(--cp-border-rad-inner);
            height: 100%;
        }

@media all and (max-width: 991px) {
    .copilot.copilot__results .copilot__summary.copilot__summary--category .copilot__summary--category-inner {
        flex-direction: column;
    }

    .copilot.copilot__results .copilot__summary.copilot__summary--category .summary-chart-wrapper {
        margin-top: 1rem;
        padding-left: 0;
    }
}

.copilot.copilot__results .copilot__summary.copilot__summary--category .summary-chart-wrapper {
    min-width: 150px;
    padding-left: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

    .copilot.copilot__results .copilot__summary.copilot__summary--category .summary-chart-wrapper .summary-chart {
        width: 100%;
        max-width: 150px;
        height: 150px;
    }

    .copilot.copilot__results .copilot__summary.copilot__summary--category .summary-chart-wrapper .score {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        padding-left: 10px;
        text-align: center;
    }

        .copilot.copilot__results .copilot__summary.copilot__summary--category .summary-chart-wrapper .score .h2.dashboard-score-value {
            margin: 0;
            font-size: 1.8rem;
        }

.copilot.copilot__results .copilot__summary.copilot__summary--rainbow {
    position: relative;
    background-clip: padding-box;
    background: var(--rainbow-grad--tilt);
    padding: 1rem;
}

    .copilot.copilot__results .copilot__summary.copilot__summary--rainbow .copilot__summary--rainbow-inner {
        background-color: white;
        padding: 2rem;
        border-radius: 25px;
        height: 100%;
    }

    .copilot.copilot__results .copilot__summary.copilot__summary--rainbow .h5 {
        background-color: var(--lightest-grey);
    }

.copilot.copilot__results .copilot__summary .h5 {
    background-color: var(--lightest-grey);
    border-radius: 50px;
    padding: 10px 15px;
    text-align: left;
    margin-bottom: 1rem;
}

.copilot.copilot__results .copilot__summary p {
    line-height: 1.75;
}

    .copilot.copilot__results .copilot__summary p:last-child {
        margin-bottom: 0;
    }

.copilot .copilot__summary--actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

    .copilot .copilot__summary--actions button {
        border: 0;
    }

.copilot.copilot__category .copilot__category--body div.row {
    background-color: #fcfcfc;
}

    .copilot.copilot__category .copilot__category--body div.row:nth-child(even) {
        background-color: var(--lightest-grey);
    }

    .copilot.copilot__category .copilot__category--body div.row div[class^='col'] {
        padding: 1.5rem 1rem;
    }

        .copilot.copilot__category .copilot__category--body div.row div[class^='col'] p {
            line-height: 1.75;
        }

            .copilot.copilot__category .copilot__category--body div.row div[class^='col'] p:last-child {
                margin-bottom: 0;
            }

.icon--copilot-reader {
    background-image: url(/local/icons/immersive-reader-icon.svg);
    background-repeat: no-repeat;
    display: block;
    width: 20px;
    height: 15px;
    background-position: 0 0;
}

.copilot.copilot__category .category-action__rainbow {
    padding: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

    .copilot.copilot__category .category-action__rainbow:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 5px;
        background-image: var(--rainbow-grad);
        background-clip: padding-box;
        border-radius: 50px;
    }

.copilot.copilot__overall .copilot__summary .action-btn {
    flex-shrink: 1;
    display: flex;
    justify-content: flex-end;
    border: 0;
    background: 0;
}

.copilot.copilot__category .copilot__category--header {
    border-bottom: 1px solid var(--lightest-grey-border);
    padding: 0 0 1rem 0;
}

    .copilot.copilot__category .copilot__category--header div[class^='col'] {
        display: flex;
        align-items: center;
    }

    .copilot.copilot__category .copilot__category--header .copilot-generated-header {
        display: flow-root;
        position: relative;
        padding: 1rem;
        width: 100%;
        text-align: center;
    }

        .copilot.copilot__category .copilot__category--header .copilot-generated-header h5 {
            margin: 0;
        }

        .copilot.copilot__category .copilot__category--header .copilot-generated-header:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px;
            border: 5px solid transparent;
            background: var(--rainbow-grad);
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
        }


.copilot.copilot__category .copilot__category--body div.row .category-action__rainbow .category-action__rainbow-inner {
    background-color: #fcfcfc;
}

.copilot.copilot__category .copilot__category--body div.row:nth-child(even) .category-action__rainbow .category-action__rainbow-inner {
    background-color: var(--lightest-grey);
}

.copilot.copilot__category .category-action__rainbow .category-action__rainbow-inner {
    padding: 0 0 1rem 0;
    height: 100%;
}

.split-bar {
    background-color: #fff;
    border-radius: 50px;
    padding: 4px;
}

    .split-bar .split-bar--inner {
        display: flex;
        width: 100%;
        height: var(--split-bar-height);
        background-color: var(--ap-red);
        border-radius: 50px;
        overflow: hidden;
    }

    .split-bar .split-bar--bar {
        height: 100%;
        width: 0%;
        background-color: var(--ap-green);
        transition: width .25s ease-in-out;
        transition-delay: .25s;
    }

.copilot-btn {
    border: 0;
    background: 0;
    padding: 1rem 2rem;
    position: relative;
    font-weight: 500;
    /*font-size: 14px;*/
    border-radius: 20px;
    transition: all .25s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .copilot-btn.copilot-btn--icon > i {
        margin-right: 10px;
    }


    .copilot-btn:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 20px;
        border: 5px solid transparent;
        background: var(--rainbow-grad);
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
    }

    .copilot-btn:hover {
        background-color: var(--lightest-grey)
    }

i.copilot-icon {
    background-image: url(/local/img/prism/prism-icon.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 25px;
    height: 25px;
    display: inline-flex;
    justify-content: left;
    align-items: center;
    background-size: contain;
}

@keyframes pulse {
    0% {
        opacity: .25;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .25;
    }
}

.copilot-analysing {
    text-align: center;
    animation: pulse 1s infinite;
    padding: 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cp-border-rad);
    background-color: var(--lightest-grey);
}

.pmap-target-question {
    text-align: left;
    padding: 1rem 0.5rem;
    display: flex;
    align-items: center;
    border-radius: var(--cp-border-rad);
    background-color: var(--lightest-grey);
    padding-left: 20px;
}

.dx-button .dx-button-content {
    display: block;
}

.dx-calendar-caption-button .dx-button-content {
    display: flex;
}

.dx-button .dx-button-content [class^="skyron-icon-"] {
    text-align: center;
}

div.nav-line-tabs {
    border-bottom: 0 !important;
    position: relative;
}

    div.nav-line-tabs:after {
        border-top: 3px solid #F7F7F7;
        content: "";
        position: absolute;
        bottom: -3px;
        left: 0;
        right: 0;
    }

    div.nav-line-tabs ul {
        border: 0 !important;
        position: relative;
        top: 3px;
        z-index: 1;
        margin-left: 10px;
    }

div.nav.nav-line-tabs .nav-item {
    margin-bottom: 0;
}


    div.nav.nav-line-tabs .nav-item .nav-link {
        border-bottom: 3px solid transparent !important;
        border-left: 1px solid var(--lightest-grey) !important;
        border-right: 1px solid var(--lightest-grey) !important;
        border-top: 1px solid var(--lightest-grey) !important;
        min-height: 51px;
    }

        div.nav.nav-line-tabs .nav-item .nav-link.active {
            border-bottom: 3px solid #FFF !important;
        }

.dx-datagrid-header-panel {
    border-bottom: 0;
}

.dx-resizable-handle-corner-bottom-left, .dx-resizable-handle-corner-bottom-right, .dx-resizable-handle-corner-top-left, .dx-resizable-handle-corner-top-right {
    width: 10px;
    height: 10px;
}

#gridComments .dx-datagrid .dx-datagrid-table .CommentTextTd[role=gridcell] {
    font-weight: 400 !important;
}

:root {
    --not-started: #cd1335;
    --not-started-rgba: rgba(205, 19, 53, .5);
    --in-progress: #eb620e;
    --in-progress-rgba: rgba(235, 98, 14, .5);
    --complete: #3fac48;
    --complete-rgba: rgba(63, 172, 72, .5);
}

.action-planning-report__columns .apr-col-wrapper .apr-col .apr-item {
    border-width: 2px !important;
}

.action-planning-report__columns .apr-col-wrapper.not-started .apr-col .apr-item {
    border-color: var(--not-started);
}

.action-planning-report__columns .apr-col-wrapper.in-progress .apr-col .apr-item {
    border-color: var(--in-progress);
}

.action-planning-report__columns .apr-col-wrapper.complete .apr-col .apr-item {
    border-color: var(--complete);
}

.action-planning-report__columns .apr-col-wrapper.not-started .apr-col .apr-item.sortable-chosen:before {
    background-color: var(--not-started-rgba) !important;
    border-radius: 7px;
}

.action-planning-report__columns .apr-col-wrapper.not-started .apr-col .apr-item.sortable-chosen {
    border-color: var(--not-started);
}

.action-planning-report__columns .apr-col-wrapper.in-progress .apr-col .apr-item.sortable-chosen:before {
    background-color: var(--in-progress-rgba) !important;
    border-radius: 7px;
}

.action-planning-report__columns .apr-col-wrapper.in-progress .apr-col .apr-item.sortable-chosen {
    border-color: var(--in-progress);
}

.action-planning-report__columns .apr-col-wrapper.complete .apr-col .apr-item.sortable-chosen:before {
    background-color: var(--complete-rgba) !important;
    border-radius: 7px;
}

.action-planning-report__columns .apr-col-wrapper.complete .apr-col .apr-item.sortable-chosen {
    border-color: var(--complete);
}

.action-planning-report__columns .apr-col-wrapper .apr-col .apr-item .apr-item--header .apr-item-edit:hover i {
    color: #000;
}

.dx-datagrid .dx-header-filter {
    font: 16px / 1 "Material Icons";
}

    .dx-datagrid .dx-header-filter:before {
        content: "\ef4f"
    }

.grid-comments-dxgrid .dx-datagrid-headers .dx-datagrid-table.dx-datagrid-table-fixed {
    margin-top: 5px;
}

.grid-comments-dxgrid .dx-datagrid-headers .dx-datagrid-table .dx-header-row > td, .grid-comments-dxgrid .dx-datagrid-headers .dx-datagrid-table .dx-header-row > td.actionCol {
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    vertical-align: top !important;
}

.singleBar .hbWrap {
    background-color: transparent;
}

/* START // SM Accessility Updates 1 **/
#kt_drawer_menu.header-menu .menu-item .menu-link:focus {
    outline: 2px solid var(--focus-border-color) !important;
    box-shadow: var(--focus-shadow) !important;
}

.btn:focus, .btn:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):focus {
    outline: 2px solid var(--focus-border-color) !important;
    box-shadow: var(--focus-shadow) !important;
}

footer .menu .menu-item a.menu-link:focus, .footer .menu .menu-item a.menu-link:focus {
    outline: 2px solid var(--focus-border-color) !important;
    box-shadow: var(--focus-shadow);
}

.accordion .accordion-item .accordion-button:focus {
    background-color: #dbfaff;
}

    .accordion .accordion-item .accordion-button:focus span {
        outline: 2px solid #00bcdb;
        border-radius: 2px;
    }

.menu-column > .menu-header {
    display: none;
    visibility: hidden;
}

@media all and (max-width: 1199px) {
    .menu-column > .menu-header {
        visibility: visible;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 5px;
    }
}

.menu-title-gray-700 .menu-item .menu-link, .menu-title-gray-700 .menu-item .menu-link i {
    color: var(--highlight-blue);
}

    .menu-title-gray-700 .menu-item .menu-link .menu-title {
        color: var(--link-color)
    }

.skip-to-main-content-link {
    position: absolute;
    left: 20px;
    z-index: 999;
    padding: .75rem 1rem;
    background-color: #FFF;
    color: var(--text-color-dark);
    opacity: 0;
    border: 2px solid #999;
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transform: translateY(-2rem);
    transition: transform .25s, opacity .25s;
}

    .skip-to-main-content-link:focus {
        opacity: 1;
        transform: translateY(0);
    }

    .skip-to-main-content-link:not(:focus) {
        opacity: 0;
        transform: translateY(-2rem);
    }


.nav-line-tabs .nav-item .nav-link.active, .nav-line-tabs .nav-item .nav-link:hover:not(.disabled), .nav-line-tabs .nav-item.show .nav-link {
    color: var(--pi-blue-dark) !important;
    border-bottom-color: var(--pi-blue-dark);
}

.nav-line-tabs > .nav-link {
    color: var(--pi-grey) !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    transition: color .2s ease, background-color .2s ease;
    padding: .5rem 0;
    margin: 0 1rem;
}

    .nav-line-tabs > .nav-link.active, .nav-line-tabs > .nav-link:hover:not(.disabled) {
        color: var(--pi-blue-dark) !important;
        border-bottom-color: var(--pi-blue-dark) !important;
    }

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

.viewing-details-username {
    color: var(--pi-blue-dark);
}

.menu-gray-600 .menu-item .menu-link {
    color: var(--highlight-blue);
}

.menu-title-gray-700 .menu-item .menu-link, .menu-title-gray-700 .menu-item .menu-link i {
    color: var(--highlight-blue);
}

.menu-gray-600 .menu-item .menu-link:hover, .menu-gray-600 .menu-item .menu-link:focus {
    color: var(--pi-blue-darker) !important;
    text-decoration: underline !important
}

.scrolltop {
    border: none;
}

input.form-control.form-control-solid:focus, textarea.form-control.form-control-solid:focus, select.form-control.form-control-solid:focus {
    outline: 2px solid var(--focus-border-color) !important;
    box-shadow: var(--focus-shadow) !important;
}

.dx-texteditor-label .dx-label > span {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.075rem !important;
    color: #181c32 !important;
}

.rainbow-border {
    width: 100%;
    height: auto;
    padding: 30px;
    border-radius: 20px;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: double 10px transparent;
    /*    background-image: linear-gradient(white, white), linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);*/

    background: var(--prism-grad);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.form-check.form-check-solid .form-check-input:focus {
    outline: 2px solid var(--focus-border-color) !important;
    box-shadow: var(--focus-shadow) !important;
}

.dx-button:focus {
    outline: 2px solid var(--focus-border-color) !important;
    box-shadow: var(--focus-shadow) !important;
}

a, a:visited {
    color: var(--pi-blue-dark);
}

/* Bootstrap overrides */
.btn:focus, .btn:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):focus {
    outline: 2px solid var(--focus-border-color) !important;
    box-shadow: var(--focus-shadow) !important;
}

.btn.btn-primary {
    /*padding: 15px 26px;*/
    height: auto;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #fff !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #111d42;
    background: #111d40;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(17, 29, 64)), to(rgb(3, 6, 13)));
    background: linear-gradient(180deg, rgb(17, 29, 64) 0%, rgb(3, 6, 13) 100%);
    /*border-radius: 50px;*/
    text-transform: none;
    border-width: 1px;
    white-space: nowrap;
}


    .btn.btn-primary:active:not(.btn-active),
    .btn.btn-primary:focus:not(.btn-active),
    .btn.btn-primary:hover:not(.btn-active) {
        color: #111d42 !important;
        border: 1px solid #111d42 !important;
        background-color: #FFF !important;
        background: none !important;
    }

        .btn.btn-primary:active:not(.btn-active) i,
        .btn.btn-primary:focus:not(.btn-active) i,
        .btn.btn-primary:hover:not(.btn-active) i {
            color: #111d42 !important;
        }



    .btn.btn-outline-primary, .btn.btn-primary.btn-outline {
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0;
        color: #111d40 !important;
        border: 1px solid #111d42 !important;
        background: #FFF;
        /*background: -webkit-gradient(linear, left top, left bottom, from(rgb(17, 29, 64)), to(rgb(3, 6, 13)));
    background: linear-gradient(180deg, rgb(17, 29, 64) 0%, rgb(3, 6, 13) 100%);*/
        /*border-radius: 50px;*/
        text-transform: none;
        border-width: 1px;
    }

        .btn.btn-outline-primary:hover, .btn.btn-primary.btn-outline:hover {
            color: #fff !important;
            background: #111d40 !important;
            background: -webkit-gradient(linear, left top, left bottom, from(rgb(17, 29, 64)), to(rgb(3, 6, 13))) !important;
            background: linear-gradient(180deg, rgb(17, 29, 64) 0%, rgb(3, 6, 13) 100%) !important;
        }

        .btn.btn-outline-primary.btn-icon svg [fill]:not(.permanent):not(g),
        .btn.btn-primary.btn-outline.btn-icon svg [fill]:not(.permanent):not(g),
        .btn.btn-outline-primary:active .svg-icon svg [fill]:not(.permanent):not(g),
        .btn.btn-primary.btn-outline:active .svg-icon svg [fill]:not(.permanent):not(g) {
            fill: var(--pi-dark-blue);
        }

        .btn.btn-outline-primary:hover .svg-icon svg [fill]:not(.permanent):not(g),
        .btn.btn-primary.btn-outline:hover .svg-icon svg [fill]:not(.permanent):not(g) {
            fill: #FFF !important;
        }

/*

    

    .btn.btn-primary.btn-outline:active, .btn.btn-primary.btn-outline:focus
    .btn.btn-primary.btn-outline:active i, .btn.btn-primary.btn-outline:focus i,
    .btn.btn-primary.btn-outline:active span, .btn.btn-primary.btn-outline:focus span {
        color: #FFF;
    }

        .btn.btn-primary.btn-outline:active .svg-icon svg [fill]:not(.permanent):not(g),
        .btn.btn-primary.btn-outline:focus .svg-icon svg [fill]:not(.permanent):not(g) {
            fill: #FFF;
        }*/

.btn.btn-secondary {
    padding: 15px 26px;
    height: auto;
    font-size: 1rem;
    letter-spacing: 0;
    /*border-radius: 50px;*/
    text-transform: none;
    border-width: 1px;
}

    .btn.btn-secondary.normal-border-rad {
        border-radius: .475rem;
    }



.btn-primary:hover {
    color: #000;
    background-color: #111d40;
    border-color: #111d42;
}

.btn.btn-primary.btn-icon:hover .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-primary.btn-icon:active .svg-icon svg [fill]:not(.permanent):not(g),
.btn.btn-primary.btn-icon:focus .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #111d40;
}

.btn.btn-orange {
    background-color: var(--pi-orange) !important;
    color: var(--text-color-dark);
}

body:not([data-kt-sticky-header=on]) .topbar .btn.btn-icon.btn-primary:hover:not(.btn-active) {
    background-color: #111d40 !important;
}

body:not([data-kt-sticky-header=on]) .topbar .btn.btn-icon.btn-primary:active:not(.btn-active) {
    background-color: #111d40 !important;
}

body:not([data-kt-sticky-header=on]) .topbar .btn.btn-icon.btn-primary:focus:not(.btn-active) {
    background-color: #111d40 !important;
}

body:not([data-kt-sticky-header=on]) .topbar .btn.btn-icon.btn-primary.show {
    background-color: #111d40 !important;
}



.btn.btn-danger {
    color: #fff;
    padding: 15px 26px;
    height: auto;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    border-width: 1px;
    border-color: #CF1E41;
    background-color: #CF1E41 !important;
}

.bg-success {
    background-color: #3FAC48 !important;
}

.btn.btn-success {
    color: #fff;
    border-color: #3FAC48;
    background-color: #3FAC48 !important;
}

.btn-success:hover {
    color: #000;
    background-color: #308235;
    border-color: #308235;
}

.btn.btn-success:active:not(.btn-active) {
    color: #fff;
    border-color: #308235;
    background-color: #308235 !important;
}

.btn.btn-success:focus:not(.btn-active) {
    color: #fff;
    border-color: #308235;
    background-color: #308235 !important;
}

.btn.btn-success:hover:not(.btn-active) {
    color: #fff;
    border-color: #308235;
    background-color: #308235 !important;
}

.dx-datagrid-search-text {
    color: #000;
}

.date-range-select .dx-label {
    font-size: 12px !important;
}

.svg-icon.svg-icon-success svg [fill]:not(.permanent):not(g) {
    fill: #2AA763;
}

.form-check.form-check-solid .form-check-input {
    border: 0;
    background-color: var(--pi-grey-light);
}
/*
.form-check.form-check-solid .form-check-input,
.form-check.form-check-solid .form-check-input:active,
.form-check.form-check-solid .form-check-input:focus {
    background-color: var(--pi-grey-light);
}
*/

.btn.btn-secondary-outline {
    display: block;
    padding: 5px 10px;
    border: 1px solid var(--lightest-grey-border) !important;
    background-color: #FFF;
    border-radius: var(--border-radius);
}

    .btn.btn-secondary-outline:hover, .btn.btn-secondary-outline:active {
        border: 1px solid var(--lightest-grey-border-hover) !important;
    }


.comparison-table .th {
    background: #ffffff;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.btn-secondary:hover {
    color: #000 !important;
}

.btn.btn-light {
    color: var(--pi-blue-dark);
}

    .btn.btn-light:hover {
        color: var(--pi-blue-darker) !important;
    }

.menu-state-primary .menu-item .menu-link:hover:not(.disabled):not(.active), .menu-state-primary .menu-item.hover > .menu-link:not(.disabled):not(.active) {
    color: var(--pi-blue-darker);
}

/* END // SM Accessility Updates 1 **/


/* START // MFA Login buttons */
.btn.mfa-button {
    border: 1px solid var(--lightest-grey-border) !important;
    font-size: 16px;
    font-weight: 500;
    color: rgba(0,0,0,.8);
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .btn.mfa-button span.mfa-icon {
        flex-shrink: 1;
        width: 24px;
        height: 24px;
        opacity: .8;
    }

    .btn.mfa-button span.mfa-title {
        flex-grow: 1;
    }

    .btn.mfa-button span.mfa-icon {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
    }

        .btn.mfa-button span.mfa-icon.mfa-icon__microsoft {
            background-image: url(/local/img/microsoft-icon-color.svg);
        }

        .btn.mfa-button span.mfa-icon.mfa-icon__google {
            background-image: url(/local/img/google-icon-color.svg);
        }

    .btn.mfa-button:hover {
        background-color: var(--body-bg-color);
        border-color: var(--lightest-grey-border-hover) !important;
        color: rgba(0,0,0,1);
    }

        .btn.mfa-button:hover span.mfa-icon {
            opacity: 1;
        }

    .btn.mfa-button.disabled {
        pointer-events: none;
        background-color: var(--body-bg-color);
    }

        .btn.mfa-button.disabled .mfa-icon, .btn.mfa-button.disabled .mfa-title {
            opacity: .75;
        }

        .btn.mfa-button.disabled span.mfa-icon.mfa-icon__microsoft {
            background-image: url(/local/img/microsoft-icon-mono.svg);
        }

        .btn.mfa-button.disabled span.mfa-icon.mfa-icon__google {
            background-image: url(/local/img/google-icon-mono.svg);
        }
/* END // MFA Login buttons */
.swal2-icon.swal2-question {
    border-color: var(--pi-blue);
    color: var(--pi-blue);
}

.text-left {
    text-align: left !important;
}

.svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #000;
}

.btn-check:active + .btn.btn-active-icon-primary .svg-icon svg [fill]:not(.permanent):not(g), .btn-check:checked + .btn.btn-active-icon-primary .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-icon-primary.active .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-icon-primary.show .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-icon-primary:active:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-icon-primary:focus:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-icon-primary:hover:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .show > .btn.btn-active-icon-primary .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: var(--pi-blue-dark);
}
/* END // SM Accessility Updates 1 **/

.mw-55 {
    max-width: 55% !important;
}

.mw-60 {
    max-width: 60% !important;
}

.mw-65 {
    max-width: 65% !important;
}

.mw-70 {
    max-width: 70% !important;
}

@media all and (min-width: 1200px) {
    .mw-xl-55 {
        max-width: 55% !important;
    }

    .mw-xl-60 {
        max-width: 60% !important;
    }

    .mw-xl-65 {
        max-width: 65% !important;
    }

    .mw-xl-70 {
        max-width: 70% !important;
    }
}

#QuestionId .dx-texteditor-input {
    font-weight: bold;
}

#CorrelationId .dx-texteditor-input {
    font-weight: bold;
}

#ActionOptions .dx-texteditor-input {
    font-weight: bold;
}

#DisplayOptions .dx-texteditor-input {
    font-weight: bold;
}

.menu .menu-item .menu-link:focus {
    outline: 1px solid rgba(0,0,0,.5) !important;
}


.app-header-secondary {
    background-color: white;
    border-bottom: 1px solid var(--lightest-grey-border);
    /*margin-bottom: 1rem;*/
    box-shadow: 0 0 10px rgba(0,0,0,.15);
}

    .app-header-secondary button.btn.show {
        background-color: white;
    }

    .app-header-secondary .survey-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        height: 34.8px;
        border: 1px solid var(--lightest-grey-border);
        border-radius: var(--border-radius);
        min-width: 20%;
        background-color: var(--page-background-color);
    }

        .app-header-secondary .survey-title .viewing-details-username {
            font-weight: 600;
        }

.btn.btn-secondary-outline-light {
    border: 1px solid var(--bs-gray-300) !important;
    background-color: transparent;
}

.bgc--white {
    background-color: white !important;
}
/*
@media all and (max-width: 1199px) {
    .datagrid-wrapper {
        overflow: auto;
    }
    .dx-datagrid {
        min-width: 1000px;
    }
}
*/

.trend-breadcrumbs {
    flex-direction: column;
}

@media all and (min-width: 992px) {
    .trend-breadcrumbs {
        flex-direction: column;
    }
}

@media all and (min-width: 992px) and (max-width: 1199px) {
    .nontrend-breadcrumbs {
        flex-direction: column;
    }

    .participation-responses-wrapper {
        flex-basis: 35%;
    }
}

@media all and (max-width: 1499px) {
    .trend-breadcrumbs-breadcrumb-item,
    .trend-breadcrumbs-wrapper,
    .trend-breadcrumbs__viewing {
        width: 100%;
    }

    .comparator-breadcrumb-item,
    .comparator-breadcrumb-item-btn {
        width: 100%;
    }
}

@media all and (max-width: 1199px) {
    .nontrend-breadcrumbs > .breadcrumb-item > .dd-menu {
        width: 100% !important
    }

    .nontrend-breadcrumbs__viewing {
        width: 100%;
    }
}

@media all and (min-width: 1500px) {
    .trend-breadcrumbs, .nontrend-breadcrumbs {
        flex-direction: row;
    }

    .trend-breadcrumbs__viewing, .nontrend-breadcrumbs__viewing {
        white-space: nowrap;
    }
}

#kt_content_container {
    margin-top: 1rem;
}
/* begin::filter summary */
.btn.btn-outline.btn-transparent {
    background-color: transparent;
}

    .btn.btn-outline.btn-transparent.active {
        background-color: transparent;
    }

.filter-summary {
    background-color: #e5e5e5;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px 0px inset;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .filter-summary .filter-summary-input {
        background-color: var(--white);
        display: block;
        border-radius: var(--border-radius);
    }

    .filter-summary .filter-summary-input__text, .filter-summary .filter-summary-input__text i {
        color: var(--text-color-dark);
        font-style: normal !important;
    }

    .filter-summary .filter-summary-input {
        height: calc(1.5em + 1.1rem + 4px);
        overflow: hidden;
        display: flex;
        align-items: center;
    }

        .filter-summary .filter-summary-input > span {
            display: flex;
            align-items: center;
            height: 100%;
            padding: 1rem;
            width: 100%;
        }


    .filter-summary .filter-summary-input__text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

        .filter-summary .filter-summary-input__text > i {
            display: inline-block;
            margin-right: 3px;
        }

    .filter-summary .applied-filters-summary i {
        color: var(--text-color-dark);
    }