/**
 * Code generated by Microsoft. Changes to this file are not
 * supported. We recommend that you do not modify this file. Any
 * change to this file will get overwritten with a theme applied using
 * Site Styling panel from Power Apps Portals.
 */
 :root {
     /* primary colors */
    --black: #1a1a24 !important;
    --yellow: #ffe600 !important;
    --white: #ffffff !important;
    --grey-1000: var(--neutral-light-1000) !important;
    --grey-950: var(--neutral-dark-25) !important;
    --grey-900: var(--neutral-light-900) !important;
    --grey-850: var(--neutral-dark-200) !important;
    --grey-800: var(--neutral-light-800) !important;
    --grey-700: var(--neutral-light-700) !important;
    --grey-600: var(--neutral-light-600) !important;
    --grey-550: var(--neutral-dark-600) !important;
    --grey-500: var(--neutral-light-500) !important;
    --grey-400: var(--neutral-light-400) !important;
    --grey-300: var(--neutral-light-300) !important;
    --grey-200: var(--neutral-light-200) !important;
    --grey-100: var(--neutral-light-100) !important;
    --grey-75: #eaeaf2 !important;
    --grey-50: var(--neutral-light-50) !important;
    --grey-25: var(--neutral-light-25) !important;
    --grey-00: var(--neutral-light-00) !important;
    --neutral-light-00: #FFF;
    --neutral-light-25: #F9F9FA;
    --neutral-light-50: #F3F3F5;
    --neutral-light-100: #E6E6E9;
    --neutral-light-200: #D7D7DC;
    --neutral-light-300: #C3C3CB;
    --neutral-light-400: #AFAEBA;
    --neutral-light-500: #9897A6;
    --neutral-light-600: #7F7F91;
    --neutral-light-700: #656579;
    --neutral-light-800: #4D4D5C;
    --neutral-light-900: #2E2E38;
    --neutral-light-1000: #23232F;
    --neutral-light-bg-color: #2e2e384d;
    --neutral-dark-25: #23232F;
    --neutral-dark-200: #3F3F4C;
    --neutral-dark-600: #8A8A9B;
    /* colors providing meaning */
    --info: var(--blue-400) !important;    
    --info-focus: var(--blue-600) !important;
    --info-background: var(--blue-25) !important;
    --info-alt: #4D4D5C !important;    
    --info-focus-alt: #2E2E38 !important;
    --info-background-alt: #F3F3F5 !important;
    --error: var(--red-400) !important;
    --error-focus: var(--red-600) !important;
    --error-background: var(--red-25) !important;
    --warning: var(--orange-400) !important;
    --warning-focus: var(--orange-600) !important;
    --warning-background: var(--orange-25) !important;
    --success: var(--green-400) !important;
    --success-focus: var(--green-600) !important;
    --success-background: var(--green-25) !important;
    --link: var(--blue-400) !important;
    --link-focus: var(--blue-600) !important;
    --link-background: var(--blue-25) !important;
    /* secondary colors */
    /* green */
    --green-25: #E7FCE8;
    --green-50: #73FA90;
    --green-100: #48E674;
    --green-200: #34CE63;
    --green-300: #2DB757;
    --green-400: #26A04B;
    --green-500: #1F893F;
    --green-600: #197335;
    --green-700: #125E29;
    --green-800: #0C4A1F;
    --green-900: #0A3616;
    /* teal */
    --teal-25: #E1FCFB;
    --teal-50: #60F6F3;
    --teal-100: #44E0DE;
    --teal-200: #2FC9C7;
    --teal-300: #27ACAA;
    --teal-400: #229B9A;
    --teal-500: #1D8583;
    --teal-600: #17706F;
    --teal-700: #105B5A;
    --teal-800: #0B4847;
    --teal-900: #093434;
    /* blue */
    --blue-25: #F4F7FC;
    --blue-50: #D2E1FA;
    --blue-100: #AFCDFB;
    --blue-200: #85B9FD;
    --blue-300: #55A6FC;
    --blue-400: #188CE5;
    --blue-500: #1275C1;
    --blue-600: #0F69AE;
    --blue-700: #0A558E;
    --blue-800: #064372;
    --blue-900: #083153;
    /* purple */
    --purple-25: #F8F6FA;
    --purple-50: #E5DCF1;
    --purple-100: #D4C4EA;
    --purple-200: #C2ABE3;
    --purple-300: #B094DC;
    --purple-400: #9D7CD4;
    --purple-500: #8965CC;
    --purple-600: #724BC3;
    --purple-700: #5E36BC;
    --purple-800: #4A279F;
    --purple-900: #361C75;
    /* maroon */
    --maroon-25: #FAF5F8;
    --maroon-50: #F2D9E8;
    --maroon-100: #ECBDDA;
    --maroon-200: #E79ECD;
    --maroon-300: #E180C0;
    --maroon-400: #DA5BB3;
    --maroon-500: #B14891;
    --maroon-600: #A04082;
    --maroon-700: #82336A;
    --maroon-800: #682754;
    --maroon-900: #4C1C3D;
    /* red */
    --red-25: #FCF5F3;
    --red-50: #FCD7CF;
    --red-100: #FDBAAB;
    --red-200: #FF9783;
    --red-300: #FF735E;
    --red-400: #FF4136;
    --red-500: #EA011D;
    --red-600: #C70117;
    --red-700: #A40011;
    --red-800: #83000B;
    --red-900: #610402;
    /* orange */
    --orange-25: #FCF5F0;
    --orange-50: #FCD9BC;
    --orange-100: #FDBC84;
    --orange-200: #FF9831;
    --orange-300: #EE8300;
    --orange-400: #D07200;
    --orange-500: #B26100;
    --orange-600: #975100;
    --orange-700: #7B4100;
    --orange-800: #623300;
    --orange-900: #462602;
}

/* EY INTERSTATE */
@font-face {
    font-family: "ey_interstate";
    src: url(/ey_interstate-700.woff2) format("woff2");
    font-weight: 700;
    font-style: normal
  }
   
  @font-face {
    font-family: "ey_interstate";
    src: url(/ey_interstate-400.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
  }
   
  @font-face {
    font-family: "ey_interstate";
    src: url(/ey_interstate-300.woff2) format("woff2");
    font-weight: 300;
    font-style: normal
  }
   

[data-component-theme="black"] {
    background-color: var(--white) !important;
    color: var(--black) !important;
}

[data-component-theme="black"] h1,
[data-component-theme="black"] h2,
[data-component-theme="black"] h3,
[data-component-theme="black"] h4,
[data-component-theme="black"] h5,
[data-component-theme="black"] h6,
[data-component-theme="black"] p {
    color: var(--white) !important;
}

[data-component-theme="grey-800"] {
    background-color: var(--grey-800) !important;
    color: var(--white) !important;
}

[data-component-theme="grey-800"] h1,
[data-component-theme="grey-800"] h2,
[data-component-theme="grey-800"] h3,
[data-component-theme="grey-800"] h4,
[data-component-theme="grey-800"] h5,
[data-component-theme="grey-800"] h6,
[data-component-theme="grey-800"] p {
    color: var(--white) !important;
}

[data-component-theme="grey-600"] {
    background-color: var(--grey-600) !important;
    color: var(--white) !important;
}

[data-component-theme="grey-600"] h1,
[data-component-theme="grey-600"] h2,
[data-component-theme="grey-600"] h3,
[data-component-theme="grey-600"] h4,
[data-component-theme="grey-600"] h5,
[data-component-theme="grey-600"] h6,
[data-component-theme="grey-600"] p {
    color: var(--white) !important;
}

[data-component-theme="yellow"] {
    background-color: var(--yellow) !important;
    color: var(--grey-900) !important;
}

[data-component-theme="yellow"] h1,
[data-component-theme="yellow"] h2,
[data-component-theme="yellow"] h3,
[data-component-theme="yellow"] h4,
[data-component-theme="yellow"] h5,
[data-component-theme="yellow"] h6,
[data-component-theme="yellow"] p {
    color: var(--grey-900) !important;
}

[data-component-theme="grey-300"] {
    background-color: var(--grey-300) !important;
    color: var(--grey-900) !important;
}

[data-component-theme="grey-300"] h1,
[data-component-theme="grey-300"] h2,
[data-component-theme="grey-300"] h3,
[data-component-theme="grey-300"] h4,
[data-component-theme="grey-300"] h5,
[data-component-theme="grey-300"] h6,
[data-component-theme="grey-300"] p {
    color: var(--grey-900) !important;
}

[data-component-theme="grey-100"] {
    background-color: var(--grey-100) !important;
    color: var(--grey-900) !important;
}

[data-component-theme="grey-100"] h1,
[data-component-theme="grey-100"] h2,
[data-component-theme="grey-100"] h3,
[data-component-theme="grey-100"] h4,
[data-component-theme="grey-100"] h5,
[data-component-theme="grey-100"] h6,
[data-component-theme="grey-100"] p {
    color: var(--grey-900) !important;
}

[data-component-theme="white"] {
    background-color: var(--white) !important;
    color: var(--grey-900) !important;
}

[data-component-theme="white"] h1,
[data-component-theme="white"] h2,
[data-component-theme="white"] h3,
[data-component-theme="white"] h4,
[data-component-theme="white"] h5,
[data-component-theme="white"] h6,
[data-component-theme="white"] p {
    color: var(--grey-900) !important;
}

[data-component-theme="grey-900"] {
    background-color: var(--grey-900) !important;
    color: var(--white) !important;
}

[data-component-theme="grey-900"] h1,
[data-component-theme="grey-900"] h2,
[data-component-theme="grey-900"] h3,
[data-component-theme="grey-900"] h4,
[data-component-theme="grey-900"] h5,
[data-component-theme="grey-900"] h6,
[data-component-theme="grey-900"] p {
    color: var(--white) !important;
}

[data-component-theme="grey-200"] {
    background-color: var(--grey-200) !important;
    color: var(--grey-900) !important;
}

[data-component-theme="grey-200"] h1,
[data-component-theme="grey-200"] h2,
[data-component-theme="grey-200"] h3,
[data-component-theme="grey-200"] h4,
[data-component-theme="grey-200"] h5,
[data-component-theme="grey-200"] h6,
[data-component-theme="grey-200"] p {
    color: var(--grey-900) !important;
}

[data-component-theme="grey-75"] {
    background-color: var(--grey-75) !important;
    color: var(--grey-900) !important;
}

[data-component-theme="grey-75"] h1,
[data-component-theme="grey-75"] h2,
[data-component-theme="grey-75"] h3,
[data-component-theme="grey-75"] h4,
[data-component-theme="grey-75"] h5,
[data-component-theme="grey-75"] h6,
[data-component-theme="grey-75"] p {
    color: var(--grey-900) !important;
}

[data-component-theme="grey-50"] {
    background-color: var(--grey-50) !important;
    color: var(--grey-900) !important;
}

[data-component-theme="grey-50"] h1,
[data-component-theme="grey-50"] h2,
[data-component-theme="grey-50"] h3,
[data-component-theme="grey-50"] h4,
[data-component-theme="grey-50"] h5,
[data-component-theme="grey-50"] h6,
[data-component-theme="grey-50"] p {
    color: var(--grey-900) !important;
}

[data-component-theme="grey-25"] {
    background-color: var(--grey-25) !important;
    color: var(--grey-900) !important;
}

[data-component-theme="grey-25"] h1,
[data-component-theme="grey-25"] h2,
[data-component-theme="grey-25"] h3,
[data-component-theme="grey-25"] h4,
[data-component-theme="grey-25"] h5,
[data-component-theme="grey-25"] h6,
[data-component-theme="grey-25"] p {
    color: var(--grey-900) !important;
}

html {
    line-height: 1.15 !important;
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    -ms-text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    font-size: 14px !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

body {
    color: var(--black) !important;
    background-color: var(--white) !important;
    margin: 0;
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-size: 16px;
    line-height: 1.42857143;
    color: var(--grey-900);
    background-color: var(--grey-900);
}
.wrapper-body {
    min-height: calc(100% - 450px);
}

/* TYPOGRAPHY */
h1,
.h1,
.section-landing-heading,
.section-landing .row>div .section-landing-heading,
.section-inline-search .row>div h1,
.section-landing h1,
.section-search .header-search h1,
.page_section h1,
.color-inverse h1,
h1 p {
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    color: var(--grey-900);
    margin-left: 0px !important;
    margin-right: 0px !important;
}

h2,
.h2,
.section-landing .row>div .section-landing-sub-heading,
.page_section h2,
.color-inverse h2,
h2 p {
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    color: var(--grey-900);
}

h3,
.h3,
.page_section h3,
.color-inverse h3,
.sidebar-home h3 {
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 26px !important;
    color: var(--grey-900);
}

h4,
.h4,
.poll .poll-header h4,
.poll .poll-tags h4 {
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    color: var(--grey-900);
}

h5,
.h5 {
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    color: var(--grey-900);
}

h6,
.h6 {
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    color: var(--grey-900);
}

p,
.p,
.page_section p,
.section-diagonal-left p,
.section-diagonal-right p,
p.form-text span {
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    color: var(--grey-900);
}

.p2 {
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--grey-900);
}

p.smallText {
    display: inline !important;
    vertical-align: middle !important;
    /*color: var(--grey-900) !important;*/
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 300 !important;
    font-size: 12px !important;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 21px !important;
    margin-bottom: 10.5px !important;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    margin-top: 10.5px !important;
    margin-bottom: 10.5px !important;
}
/* END */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}
a:active,
a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: 700 !important;
}

dfn {
    font-style: italic;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

mark {
    background: var(--yellow);
    color: var(--black);
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible !important;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit !important;
    font-size: 100% !important;
    border-radius: .2857142857rem;
    color: inherit;
    font: inherit;
}
button,
input,
optgroup,
select {
    height: 36px !important;
}

button,
input {
    overflow: visible !important;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .75em .625em !important;
}

html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*iframe {
    width: 100%;
    height: auto;
    max-width: 100%;
}*/

img {
    border-style: none !important;
    border: 0
}

input {
    line-height: normal;
    background-color: var(--white) !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto;
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

legend {
    box-sizing: border-box !important;
    color: inherit !important;
    display: table !important;
    max-width: 100% !important;
    white-space: normal !important;
}

optgroup {
    font-weight: 700;
}

summary {
    display: list-item !important;
}

textarea {
    overflow: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button !important;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none !important;
    padding: 0 !important;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText !important;
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box !important;
    padding: 0 !important;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto !important;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px !important;
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none !important;
}

::-webkit-file-upload-button {
    -webkit-appearance: button !important;
    font: inherit !important;
}

footer {
    color: var(--grey-900) !important;
    background-color: var(--white);
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    border-top-color: var(--grey-75);
    border-top-width: 1px;
}
footer .footer-bottom {
    background-color: var(--white) !important;
    padding-top: 30px;
    padding-bottom: 36px;
}
footer .footer-content {
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}
footer .footer-content, 
.footer-content .richText-content {    
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 8px;
    padding-right: 8px;
}
.footer-content p {
    font-size: 14px;
    margin: 10px 0 5px !important;
    color: var(--grey-600) !important;
    line-height: 1.43;
}
.footer-content .richText-content {
    float: right;
    margin-top: 25px;
    width: 100%;
}
.footer-content .richText-content.footer-navigation p,
.footer-content .richText-content.footer-hyperlinks p {
    margin: 0 0 0 23px !important;
    font-size: 16px !important;
    line-height: 2.1;
}
.footer-content .richText-content a {
    color: var(--grey-900) !important;
    border-bottom: 1px solid;
    font-weight: 700;
    text-decoration: none !important;
}
.footer-content .richText-content a:hover {
    border-bottom-width: 2px;
    text-decoration: none !important;
}

@media only screen and (max-width: 899px) {
    footer .footer-content .richText-content.footer-navigation,
    footer .footer-content .richText-content.footer-navigation p {
        float: none;
        margin-left: 0;
        display: block;
    }
}

.hyperlink-icon {
    border: 1px solid var(--grey-300);
    border-radius: 50%;
    color: inherit;
    display: inline-block;
    width: 44px;
    height: 44px;
    position: relative;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    transition: border-color 0.3s, background-color 0.3s;
    text-align: center;
    vertical-align: middle;
    background: none;
}

.columnBlockLayout {
    /* margin-top: 60px !important;
    margin-bottom: 60px !important;
    padding: 16px !important;*/
}

/* NAVIGATION START */

.nav-tabs>li>a:hover {
    background-color: var(--grey-50) !important;
    color: var(--black) !important;
}

.nav-tabs>li>a:focus {
    background-color: var(--grey-50) !important;
    color: var(--black) !important;
}

.navbar a:not(.btn) {
    text-decoration: none !important;
}
.static-top.navbar-dark {
    background-color: var(--grey-900) !important;
    color: var(--grey-50) !important;
    position: sticky;
    top: 0;
    z-index: 289;
    padding: 0 !important;
}

.navbar-toggler {
    background-color: var(--grey-900) !important;
}

.static-top.navbar .menu-bar>.navbar-nav>li>a {
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    border: 1px solid transparent !important;
}

.navbar, .navbar-brand {
    padding: 0 !important;
}
.navbar .container {
    margin-left: 0;
    padding-left: 0;
    max-width: 100%;
}
.static-top.navbar .menu-bar>.navbar-nav>li>a:hover {
    text-decoration: Underline !important;
}

.navbar-dark .navbar-toggler {
    border: 1px solid var(--grey-1000) !important;
}

.navbar-dark .navbar-toggler:hover {
    background-color: var(--grey-1000) !important;
    border-color: var(--grey-00) !important;
    color: var(--white) !important;
}

.navbar-dark .navbar-toggler:focus {
    border: 1px solid var(--white) !important;
    background-color: var(--grey-1000) !important;
}

.navbar-dark .navbar-toggler .navbar-toggler-icon {
    background-image: url(data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E);
}

.navbar-dark .navbar-nav>li>a,
.navbar-dark .navbar-nav>li.dropdown>a {
    color: var(--grey-50) !important;
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
}

.navbar-dark .navbar-nav a.show,
.navbar-dark .navbar-nav a.dropdown-toggle.show,
.navbar-dark .navbar-nav a.show:hover,
.navbar-dark .navbar-nav a.dropdown-toggle.show:hover,
.navbar-dark .navbar-nav a.show:focus,
.navbar-dark .navbar-nav a.dropdown-toggle.show:focus {
    background-color: var(--grey-1000) !important;
    color: var(--white) !important;
    text-decoration: Underline !important;
}

.navbar-dark .navbar-nav>li>a:hover,
.navbar-dark .navbar-nav>li.dropdown>a:hover,
.navbar-dark .navbar-nav>li>a:focus,
.navbar-dark .navbar-nav>li.dropdown>a:focus,
.navbar-dark .navbar-nav>li>a:focus-visible,
.navbar-dark .navbar-nav>li.dropdown>a:focus-visible {
    background-color: var(--grey-1000) !important;
    color: var(--white) !important;
    text-decoration: Underline !important;
    outline: none;
}

/*.navbar-dark .navbar-nav .show.dropdown-menu>li>a:hover,
.navbar-dark .navbar-nav .show.dropdown-menu>li>a:focus,
.navbar-dark .navbar-nav .show.dropdown-menu>.active>a,
.navbar-dark .navbar-nav .show.dropdown-menu>.active>a:hover,
.navbar-dark .navbar-nav .show.dropdown-menu>.active>a:focus {
    background-color: var(--white) !important;
    color: var(--black) !important;
    text-decoration: Underline !important;
}

.navbar-dark .navbar-nav .show.dropdown-menu {
    background-color: var(--white) !important;
    text-decoration: none !important;
    margin-top: 0px;
}

.navbar-dark .navbar-nav .show.dropdown-menu>li>a {
    color: var(--black) !important;
    text-decoration: none !important;
}
*/

.navbar-collapse {
    background-color: transparent !important;
}

.nav>li>a {
    text-decoration: none !important;
}

.nav>li>a:hover,
.nav>li>a:focus {
    background-color: var(--grey-50) !important;
}
/*
.nav .show.dropdown-menu {
    background-color: var(--white) !important;
}

.nav .show.dropdown-menu>li>a {
    text-decoration: none !important;
    color: var(--black) !important;
}

.nav .show.dropdown-menu>li>a:hover,
.nav .show.dropdown-menu>li>a:focus,
.nav .show.dropdown-menu>.active>a,
.nav .show.dropdown-menu>.active>a:hover,
.nav .show.dropdown-menu>.active>a:focus {
    background-color: var(--grey-50) !important;
    color: var(--black) !important;
}
*/

.nav>.dropdown>a.show {
    text-decoration: none !important;
    background-color: var(--grey-1000) !important;
}

.nav>.dropdown>a.show:hover {
    text-decoration: Underline !important;
}

#navbar #search + .dropdown-search {
    margin-left: -132px;
    padding-top: 0 !important;
}
#navbar #search + .dropdown-search::before {
    left: 145px !important;
}

.nav>.dropdown>a.show:focus {
    text-decoration: Underline !important;
}

a:has(> .nav-logo) {
    margin: auto;
    width: 70px;
}
.nav-logo {
    height: 45px;
    padding-left: 20px;
    margin: auto;
}
.nav-title, .siteTitle.custom-sitetitle {
    margin-bottom: auto !important;
    margin-top: auto !important;
    margin-left: 20px !important;
    font-size: 20px !important;
    overflow-wrap: break-word;
    color: var(--white);
}
.nav-toggle {
    box-sizing: border-box;
    display: inline-flex;
    padding: 0;
    font-size: 3.6rem;
    line-height: 1;
    color: var(--white);
    background-color: var(--grey-850);
    border: 0;
    cursor: pointer;
}
.nav-toggle svg {
    margin: auto;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(--grey-900);
    overflow-x: hidden;
    transition: 0.5s;
}
.sidenav-header {
    display: inline-grid;
    grid-template-columns: 80px 50px 245px;
    column-gap: 20px;
    height: 81px;
    width: 100%;
    border-bottom-color: var(--grey-600);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
/*.sidenav > .navigation-section-container:not(.first) {
    border-top: 1px solid var(--grey-600);
}
.sidenav > .navigation-section-container:hover {
    border-top: 1px solid var(--black);
}*/
.sidenav > .navigation-section-container > a {
    padding-top: 9px;
    padding-right: 40px;
    padding-bottom: 9px;
    padding-left: 15px;
    line-height: 50px;
    border-left: 4px solid transparent;
    display: block;
    color: var(--white);
    font-size: 20px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
}
.sidenav > .navigation-section-container:has(.navigation-subsection-button:hover),
.sidenav > .navigation-section-container:has(.navigation-section-link:hover)
{
    background-color: var(--black);
}
.sidenav .navigation-section-link:hover,
.sidenav .navigation-section-link:has(+ .navigation-subsection-button:hover),
.navigation-subsection .navigation-item:hover {
    border-left-color: var(--yellow);
    border-left-style: solid;
    border-left-width: 5px;
}

.sidenav-logo {
    height: 45px;
    margin-bottom: auto;
    margin-top: auto;
    grid-column-start: 2;
}
.sidenav-title {
    margin-bottom: auto !important;
    margin-top: auto !important;
    grid-column-start: 3;
    font-size: 20px !important;
    overflow-wrap: break-word;
    color: var(--white) !important;
}
.sidenav .closebtn {
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    font-size: 32px;
    margin-left: 0px;
    font-weight: normal;
    background-color: var(--grey-850);
    cursor: pointer;
}
.sidenav .closebtn > svg {
    margin: auto;
}
.navigation-section-container {
    display: grid;
}
.navigation-section-link > .navigation-subsection-button {
    position: absolute;
    right: 0;
    padding-right: 20px;
    /*transform: translateY(0px) rotate(90deg);*/
    transition: transform .5s ease, -webkit-transform .5s ease;
}
.navigation-section-link > .navigation-subsection-button.active i {
    transform: translateY(0px) rotate(-180deg);
    transition: transform .5s ease, -webkit-transform .5s ease;
}
.navigation-subsection {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: var(--black);
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-transition: max-height .5s ease;
    transition: max-height .5s ease;
}
.navigation-subsection-active {
    max-height: 5000px;
    padding-top : 10px;
    padding-bottom: 15px;
    padding-inline-start: 0px;
}
.navigation-subsection .navigation-item {
    list-style-type: none;
    margin-left: 10px;
    font-size: 18px;
    font-weight: 700 !important;
    margin-right: 10px;
    line-height: 1.6;
    border-left: 5px solid var(--black);
    display: grid;
}
.navigation-subsection .navigation-item.subsection-header {
    font-size: 1px;
    border-bottom: 1px solid var(--grey-600);
}
.navigation-subsection .navigation-item a {
    width: 100%;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 18px;
}
.navigation-subsection .navigation-item:hover {
    background-color: var(--grey-900);
}

.static-top.navbar-dark .navbar-brand a p,
.static-top.navbar-dark .navbar-brand a h1,
.static-top.navbar-dark .navbar-brand a h2,
.static-top.navbar-dark .navbar-brand a h3,
.static-top.navbar-dark .navbar-brand a h4,
.static-top.navbar-dark .navbar-brand a h5,
.static-top.navbar-dark .navbar-brand a span {
    display: inline !important;
    vertical-align: middle !important;
    color: var(--grey-50) !important;
}

h1.siteTitle,
.static-top.navbar-dark .navbar-brand a h1.siteTitle,
.static-top.navbar-dark .navbar-brand a h1.siteTitle>span {
    display: inline !important;
    vertical-align: middle !important;
    color: var(--grey-50) !important;
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 32px !important;
}

@media screen and (max-height: 450px) {
    .sidenav {
      padding-top: 15px;
    }
    .sidenav a {
      font-size: 18px;
    }
}
@media screen and (min-width: 1200px) {
    .sidenav .closebtn, .nav-toggle {
        width: 80px;
        height: 80px;
    }
}
@media (max-width: 1200px) {
    .static-top .navbar-brand {
        position: initial;
        height: 80px;
    }
    .sidenav .closebtn, .nav-toggle {
        width: 80px;
        height: 80px;
    }
}

@media (min-width: 576px) {

    .row.sectionBlockLayout>.container,
    .row.sectionBlockLayout>.container-sm {
        max-width: 540px !important;
    }
    .navbar .container {
        max-width: 100%
    }
}

@media (min-width: 768px) {

    .row.sectionBlockLayout>.container,
    .row.sectionBlockLayout>.container-md,
    .row.sectionBlockLayout>.container-sm {
        max-width: 720px !important;
    }
    .navbar .container {
        max-width: 100%
    }
}

@media (min-width: 992px) {

    .row.sectionBlockLayout>.container,
    .row.sectionBlockLayout>.container-lg,
    .row.sectionBlockLayout>.container-md,
    .row.sectionBlockLayout>.container-sm {
        max-width: 960px !important;
    }
    .navbar .container {
        max-width: 100%
    }
}

@media (min-width: 1200px) {

    .row.sectionBlockLayout>.container,
    .row.sectionBlockLayout>.container-lg,
    .row.sectionBlockLayout>.container-md,
    .row.sectionBlockLayout>.container-sm,
    .row.sectionBlockLayout>.container-xl {
        max-width: 1140px !important;
    }
    .navbar .container {
        max-width: 100%
    }
}

@media (min-width: 1400px) {

    .row.sectionBlockLayout>.container,
    .row.sectionBlockLayout>.container-lg,
    .row.sectionBlockLayout>.container-md,
    .row.sectionBlockLayout>.container-sm,
    .row.sectionBlockLayout>.container-xl,
    .row.sectionBlockLayout>.container-xxl {
        max-width: 1320px !important;
    }
    .navbar .container {
        max-width: 100%
    }
}

/* NAVIGATION END */

.sectionPrimaryColor {
    background-color: var(--grey-800) !important;
    color: var(--white) !important;
}

.sectionPrimaryColor h1,
.sectionPrimaryColor h2,
.sectionPrimaryColor h3,
.sectionPrimaryColor h4,
.sectionPrimaryColor h5,
.sectionPrimaryColor h6,
.sectionPrimaryColor p,
.sectionPrimaryColor a {
    color: var(--white) !important;
}

.sectionPrimaryColor .crmEntityFormView h1,
.sectionPrimaryColor .crmEntityFormView h2,
.sectionPrimaryColor .crmEntityFormView h3,
.sectionPrimaryColor .crmEntityFormView h4,
.sectionPrimaryColor .crmEntityFormView h5,
.sectionPrimaryColor .crmEntityFormView h6,
.sectionPrimaryColor .crmEntityFormView p,
.sectionPrimaryColor .crmEntityFormView a {
    color: var(--black) !important;
}

.sectionPrimaryColor .entitylist h1,
.sectionPrimaryColor .entitylist h2,
.sectionPrimaryColor .entitylist h3,
.sectionPrimaryColor .entitylist h4,
.sectionPrimaryColor .entitylist h5,
.sectionPrimaryColor .entitylist h6,
.sectionPrimaryColor .entitylist p,
.sectionPrimaryColor .entitylist a {
    color: var(--black) !important;
}

/* CUSTOM STYLES FOR STANDARD ELEMENTS START*/

a:not(.btn) {
    text-decoration: underline !important;
}

a:not(.btn):hover {
    text-decoration: underline !important;
}

a,
.a {
    color: var(--link) !important;
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400;
    font-size: 14px;
}

a:hover,
a:focus,
.a:hover,
.a:focus {
    color: var(--link-focus) !important;
}

a[disabled] {
    color: var(--grey-300) !important;
    pointer-events: none !important;
}

a.anchor-inherit-styles {
    font-size: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
}

a.anchor-hover-color-color1:hover {
    color: var(--black) !important;
}

a.anchor-hover-color-color2:hover {
    color: var(--grey-800) !important;
}

a.anchor-hover-color-color3:hover {
    color: var(--grey-600) !important;
}

a.anchor-hover-color-color4:hover {
    color: var(--yellow) !important;
}

a.anchor-hover-color-color5:hover {
    color: var(--grey-300) !important;
}

a.anchor-hover-color-color6:hover {
    color: var(--grey-100) !important;
}

a.anchor-hover-color-color7:hover {
    color: var(--white) !important;
}

a.anchor-hover-color-color8:hover {
    color: var(--grey-900) !important;
}

a.anchor-hover-color-color9:hover {
    color: var(--grey-200) !important;
}

a.anchor-hover-color-color10:hover {
    color: var(--grey-75) !important;
}

a.anchor-hover-color-color11:hover {
    color: var(--grey-50) !important;
}

a.anchor-hover-color-color12:hover {
    color: var(--grey-25) !important;
}

a.anchor-text-decoration-none,
a.anchor-hover-text-decoration-none:hover {
    text-decoration: none !important;
}

a.anchor-text-decoration-underline,
a.anchor-hover-text-decoration-underline:hover {
    text-decoration: underline !important;
}

/* STANDARD BUTTONS SART */
.btn-small {
    height: 24px !important;
}
.btn-medium {
    height: 40px;
}
.btn-large {
    height: 44px;
}
.btn-primary {
    color: var(--grey-900) !important;
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
    border-radius: 0px !important;
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 6px 20px !important;
    width: fit-content !important;
    border-style: solid !important;
    background-color: var(--yellow) !important;
    color: var(--grey-900) !important;
}

.btn-primary:hover, 
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary.focus
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:active.focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.btn-danger:hover, 
.btn-danger:active,
.btn-danger.active,
.btn-danger:focus {
    color: var(--white) !important;
    background-color: var(--grey-900) !important;
    border-color: var(--grey-900) !important;
}
.btn-secondary.dropdown-toggle.show {
    color: var(--grey-900) !important;
    background-color: var(--grey-100) !important;
    border-color: var(--yellow) !important;
}

.btn-default.dropdown-toggle.show {
    color: var(--grey-900) !important;
    background-color: var(--grey-100) !important;
    border-color: var(--yellow) !important;
}

.btn-primary.dropdown-toggle.show {
    color: var(--white) !important;
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

.btn-primary.dropdown-toggle.show:hover,
.btn-primary.dropdown-toggle.show:focus,
.btn-primary.dropdown-toggle.show.focus {
    color: var(--white) !important;
    background-color: var(--grey-900) !important;
    border-color: var(--grey-800) !important;
}
.btn-group {
    display: inline-flex;
    align-items: center;
}
.btn-group .btn {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--black);
    box-shadow: none;
    border-radius: 5px;
}
.btn-group .btn:hover {
    background-color: var(--grey-200);
    color: var(--grey-900);
}
.btn-group .btn:focus, .btn-group .btn:active {
    background-color: var(--black);
    color: var(--white);
}

button, .btn {
    overflow: visible;
    border-radius: 5px !important;
    height: 36px;
    font-weight: bold;
    width: max-content !important;
}
button[disabled], .btn-disabled {
    background-color: var(--grey-50) !important;
    color: var(--grey-300) !important;
    border-color: var(--grey-75);
    border: 2px !important;
    pointer-events: none !important;
    cursor: not-allowed;
}

.btn-secondary-alt:hover, .btn-secondary-alt:focus {
    color: var(--grey-900);
    background-color: var(--white) !important;
    border-color: var(--grey-900);
}

.btn-text {
    border-color: transparent;
    background-color: transparent;
    /*line-height: 0;*/
    &:hover {
        text-decoration: underline !important;
    }
    &:focus {
        border-color: var(--grey-900) !important;
    }
}
.btn-info:hover, .btn-info:active, .btn-info:focus {
    border: 1px solid var(--blue-600);
    color: var(--white) !important;
    background-color: var(--blue-300) !important;
    text-decoration: underline;
    transition: none;
}

.button1 {
    color: var(--grey-900) !important;
    border-radius: 5px !important;
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-color: var(--yellow) !important;
    padding: 6px 20px !important;
    width: fit-content !important;
    border-style: solid !important;
    background-color: var(--yellow) !important;
}

.button1:not(.gjs-selected):hover {
    color: var(--white) !important;
    background-color: var(--grey-900) !important;
    border-color: var(--grey-900) !important;
}

.button1:not(.gjs-selected):active,
.button1.active:not(.gjs-selected) {
    color: var(--white) !important;
    background-color: var(--grey-900) !important;
}

.button1:focus,
.button1.focus {
    color: var(--white) !important;
    background-color: var(--grey-900) !important;
}

.button2,
.btn-secondary,
.btn-default,
.entitylist-download,
.entitylist-download.btn-info {
    color: var(--grey-900) !important;
    border-radius: 5px !important;
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-color: var(--grey-900) !important;
    padding: 6px 20px !important;
    width: max-content !important;
    border-style: solid !important;
    background-color: var(--white) !important;
}

.button2:not(.gjs-selected):hover,
.btn-secondary:not(.gjs-selected):hover,
.btn-default:not(.gjs-selected):hover,
.entitylist-download:hover {
    color: var(--white) !important;
    background-color: var(--grey-900) !important;
    border-color: var(--grey-900) !important;
}

.btn-for-delete {
    height: 36px !important;
    border-style: none !important;
}

.button2:not(.gjs-selected):active,
.button2.active:not(.gjs-selected),
.btn-secondary:not(.gjs-selected):active,
.btn-secondary.active:not(.gjs-selected),
.btn-default:not(.gjs-selected):active,
.btn-default.active:not(.gjs-selected),
.entitylist-download:not(.gjs-selected):active,
.entitylist-download.active:not(.gjs-selected) {
    color: var(--white) !important;
    background-color: var(--grey-900) !important;
}

.button2:focus,
.button2.focus,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-default:focus,
.btn-default.focus,
.entitylist-download:focus,
.entitylist-download.focus {
    color: var(--white) !important;
    background-color: var(--grey-900) !important;
}

.btn-tertiary {
    color: var(--grey-800);
    font-weight: 500 !important;
    border-color: var(--grey-300);
    line-height: 0;
    padding: 6px 20px;
    border-style: solid;
    background-color: var(--white);
    &:hover, &:active, &.active {
        background-color: var(--grey-50) !important;
        border-color: var(--grey-300);
    }
}

.btn.create-related-record-link span{
    margin-right: 5px;
}

.btn.button-circle,
.button.button-circle {
    border-radius: 100% !important;
    background-color: var(--grey-50);
    height: 40px !important;
    width: 40px !important;
    &:hover {
        background-color: var(--grey-75);
    }
}
/* BUTTONS END */

.crmEntityFormView,
.modal-content,
.popover-content {
    background-color: var(--grey-25) !important;
    color: var(--black) !important;
}
.modal-content,
.popover-content {
    border: 1px solid var(--grey-50) !important;
}

/* MOTIF modal */
.motif-modal-overlay {
    z-index: 1060;
    background: var(--neutral-light-bg-color);
}
.motif-modal-size-md {
    max-width: 50%;
}
.motif-modal-content {
    border-radius: .5714285714rem;
}
.motif-modal-header {
    color: var(--grey-900);
    background: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-style: solid;
    border-width: 0 0 .0714285714rem 0;
    border-color: var(--grey-100);
}
.motif-modal-header .motif-modal--header-icon-button {
    height: 3.4285714286rem !important;
    width: 3.4285714286rem !important;
}
.motif-button-ghost.motif-active, 
.motif-button-ghost:hover:not(:disabled) {
    background-color: var(--grey-75);
    color: inherit;
    border-color: transparent;
    border-width: 0;
    border-style: none;
    box-shadow: none;
    border-radius: .2857142857rem;
}

/* MOTIF badge design */

.badge, .motif-badge {
    align-items: center;
    background-color: var(--white);
    border: .0714285714rem solid var(--grey-200);
    font-size: 1rem;
    font-weight: 300;
    color: var(--grey-700);
    display: inline-flex;
    justify-content: center;
    position: relative;
    border-radius: 1.1428571429rem;
    line-height: 1.2142857143rem;
    padding: .1428571429rem .5rem;
    min-height: 1.7142857143rem;
    min-width: 1.7142857143rem;
    &.badge-notification {
        /* the notification icon is smaller than a button; 
        hence, we need to make the badge smaller */
        font-size: 0.9rem;
        line-height: 1rem;
        padding: .1rem .4rem;
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(40%) translateY(-15%);
    }
    .badge-number, .motif-badge-number {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-weight: 400;
        min-width: .7142857143rem;
        min-height: 1.4285714286rem;
    }
}
.badge.badge-overlap,
.motif-badge.motif-badge-overlap {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%) translateY(-40%);
}

/* CARDS START */

.card-container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
}
.card-container-grid > div {
    margin-left: 10px;
    margin-right: 10px;
}
.card-container-grid .card-body {
    height: 180px;
    overflow: auto;
}
.card-container-grid .card {
    width: fit-content;
    height: 95%;
}
.card, .ms_lay1_card, .ms_lay2_card {
    display: inline-flex;
    flex-direction: row;
    border-color: var(--grey-100);
    border-width: 1px;
    border-style: solid;
    border-radius: 8px !important;
    background-color: var(--white);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2) !important;
    transition: box-shadow 200ms ease;
    padding: 0px !important;
}
.card:hover, .ms_lay1_card:hover {
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px -1px rgba(0, 0, 0, 0.2) !important;
}
.card .img-container {
    padding: 24px 12px 24px 24px;
    min-width: 45%;
    max-width: 48%;
}
.card-img, .card-img-top, .ms_lay1_card_img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.card .main-container {
    display: flex; 
    flex-direction: column;
    padding: 24px;
    width: 100%;
}
.card .card-category {
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
    margin-left: -1px;
    margin-right: -1px;
    padding: 10px 24px 5px;
    color: var(--grey-800);
}
.card .card-subheading {
    padding-bottom: 0;
    min-height: 28px;
    align-items: center;
    color: var(--grey-600);
    .card-title {
        margin-bottom: 0;
    }
}
.card-header, 
.card.title, 
.ms_lay1_card > div > h4,
.ms_lay2_card > .ms_lay2_col2 > div > h4 {
    padding-bottom: 0;
    background-color: var(--white) !important;
    color: var(--grey-900) !important;
    padding: 11px 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-header-dark {
    background-color: var(--grey-900) !important;
    color: var(--white) !important;
    margin: 0 -1px;
}
.card-header-dark * {
    color: var(--white) !important;
}
.card-header-dark, .card-header-alt {
    border-bottom: 0;
}
.card-header .icon svg:hover, 
.card-header .icon-button:hover, 
.card-header .icon:hover {
    background-color: var(--grey-200);
}
.card .card-tags {
    padding: 0px 0;
    .btn-disabled {
        height: 24px !important;
        font-size: 1rem !important;
        font-weight: 500;
        padding: 0 5px 0 5px;
        width: fit-content !important;
        height: fit-content !important;
        background-color: var(--white) !important;
        color: var(--grey-800) !important;
        border: 1px solid var(--grey-300) !important;
        border-radius: 3px !important;
    }
}
.card-body {
    margin: 1rem 0;
    padding: 0;
}
.card .btn-text {
    text-decoration: none;
    font-weight: 500;
    &:hover {
        background-color: var(--grey-75) !important;
        text-decoration: none !important;
    }
}
.card-body,
.list-group-item,
.ms_lay1_card > div > p, 
.ms_lay2_card > .ms_lay2_col2 > div > p {
    background-color: var(--white) !important;
    color: var(--black) !important;
}
.card-footer, 
.ms_lay1_card > div:has(> button),
.ms_lay2_card > .ms_lay2_col2 > div:has(> button) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    background: var(--white);
    color: var(--grey-900);
    min-height: 3.1428571429rem;
    border-top: none;
    border-radius: 0 !important;
    padding: 0.5rem 0 0 0;
}
/* for powerpages built-in card gallery */
.ms_lay2_card {
    display: grid !important;
    grid-template-columns: 45% 55%;
    grid-template-rows: [category-start] 40px [category-end] auto [content-end];
    overflow: scroll;
    min-width: 600px;
    .ms_lay2_col1 {
        display: inline-grid !important;
        grid-column: 1 / 2;
        grid-row: category-end / content-end;
        padding: 24px 12px 24px 24px !important;
        .ms_lay2_card_img {
            height: 100% !important;
            width: 100% !important;
        }
    }
    .ms_lay2_col2 {
        display: grid !important;
        grid-column: 2 / 3;
        grid-row: category-end / content-end;
        display: grid !important;
        grid-template-columns: 50% 50%;
        grid-template-rows: [heading-start] 55px [heading-end] 180px [text-end] 45px [buttons];
        padding: 24px 24px 24px 12px !important;
        div:has(h4) {
            grid-column: 1 / 3;
            grid-row: heading-start / heading-end;
        }
        div:has(p) {
            grid-column: 1 / 3;
            grid-row: heading-end / text-end;
            overflow: auto;
        }
        div:has(button) {
            grid-column: 1 / 2;
            grid-row: text-end / buttons;
        }
        div:has(a) {
            grid-column: 2 / 3;
            grid-row: text-end / buttons;
        }
    }
}
.ms_lay1_card {
    display: grid !important;
    grid-template-columns: 45% 27% 27%;
    grid-template-rows: [category-start] 40px [category-end] 30px [subheading-end] 55px [heading-end] 25px [tags-end] auto [text-end] 45px [buttons];
    overflow: scroll;
}
.ms_lay1_card > div > button.button1, 
.ms_lay1_card > div > button.button2, 
.ms_lay2_card > .ms_lay2_col2 > div > button.button1,
.ms_lay2_card > .ms_lay2_col2 > div > button.button2 {
    color: var(--grey-800) !important;
    font-weight: 500 !important;
    border: 1px solid var(--grey-300) !important;
    line-height: 0;
    padding: 6px 20px !important;
    background-color: var(--white) !important;
    width: 100% !important;
    &:hover, &:focus, &:active {
        background-color: var(--grey-50) !important;
        border-color: var(--grey-300) !important;
    }
}
.ms_lay1_card > div > a, 
.ms_lay2_card > .ms_lay2_col2 > div > a {
    text-decoration: none !important;
    color: var(--grey-900) !important;
    font-weight: 500;
    border-color: transparent !important;
    background-color: transparent;
    line-height: 0;
    border-radius: 5px !important;
    width: 100%;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0 0 0;
    &:hover, &:focus, &:active {
        background-color: var(--grey-75) !important;
        text-decoration: none !important;
    }
}

/* CARDS END */

/* for cards carousel -- motif carousel */
.arrow-left {
    top: 50%;
    transform: translateY(-50%);
    margin-left: 1rem;
    z-index: 1;
}
.arrow-right {
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    margin-right: 1rem;
}
.arrow-button {
    position: absolute;
    cursor: pointer;
}

.carousel-container {
    position: relative;
    .carousel {
        &.controls-outside-md {
            height: auto;
            transform: translateX(-50%);
            width: calc(100% - 120px);
            position: absolute;
            left: 50%;
            .arrow-left {
                left: calc(0% - var(--arrow-offset, 62px));
            }
            .arrow-right {
                right: calc(0% - var(--arrow-offset, 62px));
            }
        }
        .slides-container {
            height: 95%;
            overflow: hidden;
            position: relative;
            .carousel-item {
                opacity: 0;
                position: absolute;
                inset: 0px;
                pointer-events: none;
                height: 100%;
                transform: translateX(100%);
                transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .carousel-item.active {
                opacity: 1;
                transform: translateX(0px);
                pointer-events: auto;
            }
        }
    }
    .carousel-item {
        position: absolute;
        inset: 0;
        display: block;
    }
    .carousel-controls {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .carousel-next-btn {
        right: 0;
    }
    .carousel-previous-btn {
        left: 0;
    }
    .carousel-previous-btn, .carousel-next-btn {
        border: 0;
        border-color: transparent;
        border-style: none;
        border-width: 0;
        background-color: transparent;
        box-shadow: none;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 2.5714285714rem;
        height: 2.5714285714rem;
        opacity: 0;
        transition: opacity ease-out 200ms;
    }
    .carousel-dot-indicator {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 0;
        width: 50%;
        height: 3.5714285714rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        list-style: none;
        padding: 0;
        .carousel-dot-item {
            display: flex;
            margin-bottom: 0;
        }
        .carousel-dot {
            height: 0.7142857143rem;
            width: 0.7142857143rem;
            border-radius: 50%;
            border-color: var(--black);
            border-width: 1px;
            border-style: solid;
            background-color: transparent;
            box-shadow: none;
            margin-left: 0.7142857143rem;
            padding: 0;
            cursor: pointer;
        }
    }
}

.chip {
    align-items: center;
    display: flex;
    .chip-button {
        background-color: var(--grey-50);
        border: 1px solid transparent;
        border-radius: 1.1428571429rem;
        box-shadow: none;
        color: var(--grey-900);
        display: flex;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.4285714286rem;
        padding: .1428571429rem .5714285714rem;
        text-align: center;
        &:hover, &:active, &:focus {
            border: 1px solid var(--grey-100);
        }
    }
    .chip-button.Live {
        background-color: var(--green-25);
        color: var(--green-400);
        &:hover, &:active, &:focus {
            border: 1px solid var(--green-400);
        }
    }
    .chip-button.Testing {
        background-color: var(--blue-25);
        color: var(--blue-400);
        &:hover, &:active, &:focus {
            border: 1px solid var(--blue-400);
        }
    }
    .chip-button.PoC {
        background-color: var(--purple-25);
        color: var(--purple-400);
        &:hover, &:active, &:focus {
            border: 1px solid var(--purple-400);
        }
    }
}

.facet-list-group-item-title {
    color: var(--black) !important;
}

/*.form-control {
    background-color: var(--white) !important;
    color: var(--black) !important;
}
.form-select:focus {
    border-color: var(--grey-300) !important;

}*/

.bootstrap-datetimepicker-widget {
    background-color: var(--white) !important;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td span:hover {
    color: var(--black) !important;
}

.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active:hover {
    color: var(--white) !important;
}

.table-striped>tbody>tr:nth-of-type(odd),
.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: var(--grey-50) !important;
    --bs-table-accent-bg: none;
}

.login-heading-section {
    color: unset !important;
}

.static-top.navbar-dark .navbar-brand a {
    color: var(--white) !important;
}
.navbar-brand a:hover, 
.navbar-brand button:hover {
    text-decoration: none !important;
}
.navbar-brand .xrm-attribute-value {
    display: inline-flex;
}

.search-results .highlight {
    color: var(--black) !important;
}

.table tr, .table-striped tr {
    border-color: var(--grey-200);
    border-width: 0.0714285714rem;
    border-style: solid;
    border-radius: 0;
}
.table thead tr, 
.table tr th {
    border-top-color: var(--grey-200);
    border-top-style: solid;
    border-top-width: 0.0714285714rem;
    height: 38.5px;
    background-color: var(--grey-50);
}
.table tr th {
    padding: .75rem 1.5rem;
    text-align: left;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem;
    height: 2.75rem;
}
.table tbody tr {
    border-top: 0px;
    color: var(--grey-800);
    box-shadow: none;
    height: 63px;
    font-weight: lighter;
    background-color: var(--white);
}
.table tr td, .table tr th {
    vertical-align: middle;
    color: var(--grey-900);
    background-color: transparent;
    padding: 1rem 1.5rem;
    text-align: left;
    height: 4.5rem;
    font-size: 14px;
}
.table>thead>tr.info>td,
.table>thead>tr.info>th,
.table>thead>tr>td.info,
.table>thead>tr>th.info,
.table>tbody>tr.info>td,
.table>tbody>tr.info>th,
.table>tbody>tr>td.info,
.table>tbody>tr>th.info,
.table>tfoot>tr.info>td,
.table>tfoot>tr.info>th,
.table>tfoot>tr>td.info,
.table>tfoot>tr>th.info,
.table-hover>tbody>tr:hover,
.table-hover>tbody>tr>td.info:hover,
.table-hover>tbody>tr>th.info:hover,
.table-hover>tbody>tr.info:hover>td,
.table-hover>tbody>tr.info:hover>th,
.table-hover>tbody>tr:hover>.info {
    background-color: var(--grey-50) !important;
}
.table td:hover,
.table-striped>tbody>tr:nth-of-type(odd)>td:hover,
.table tr:hover {
    background-color: var(--grey-50) !important;
}

.form-close,
.form-close:hover,
.form-close:focus,
::placeholder,
.help-block {
    color: var(--black) !important;
}

.msos-selection-container,
.msos-container,
.msos-caret-container,
.msos-action-buttons:hover {
    color: var(--black) !important;
    background: var(--white) !important;
}

.msos-option-selected,
.msos-selected-display-item,
.msos-quick-delete,
.msos-quick-delete:hover {
    background: var(--grey-50) !important;
}

.msos-label,
.msos-quick-delete,
.msos-quick-delete:hover {
    color: var(--black) !important;
}

.msos-option-focused:after,
.msos-selecteditems:focus .msos-selected-display-item.msos-selecteditem-active:after,
.msos-selecteditems-toggle:focus {
    border-color: var(--black) !important;
}

.msos-option:hover,
.msos-option-selected:hover {
    background: var(--grey-25) !important;
}

.msos-selecteditems-toggle {
    color: var(--grey-800) !important;
}



/*Bootstrap V5 Changes */
.table-striped,
.table-info,
.table-striped>tbody>tr:nth-of-type(odd)>*,
.form-control:focus,
.dropdown-menu,
.datepicker button {
    color: var(--black) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.popover-body {
    background-color: var(--white) !important;
    color: var(--black) !important;
    border: 1px solid var(--grey-50) !important;
}
.dropdown-menu {
    display: none;
    padding: 0;
    gap: 0.75rem;
    flex-direction: column;

    position: absolute;
    width: max-content;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    box-shadow: 0 2px 4px 0 rgba(35,35,47,.06),0 6px 12px 0 rgba(35,35,47,.08) !important;
    background-color: var(--white) !important;
    border: 1px solid var(--grey-100);
    border-radius: 4px;
    margin: 0;
    z-index: 900;
    /*display: none;
    min-width: 14.2857142857rem;
    margin-top: 6px !important;
    padding-top: 0.5rem !important;*/
    &:show {
        display: flex;
    }
    > li {
        min-height: 44px;
        margin-bottom: 0px;
    }
}
.dropdown-toggle:focus-visible + .dropdown-menu {
    display:block;
}
.dropdown-divider {
    margin-top: 0px !important;
    min-height: 0px !important;
}
.dropdown-menu-end[data-bs-popper] {
    right: auto !important;
}
.dropdown-menu:before,
.dropdown-menu:after {
    display: none !important;
}
.dropdown-item,
.dropdown-menu>li>a,
.dropdown .dropdown-menu > li > a.dropdown-item {
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.7142857143rem 1rem !important;
    font-size: 1.1428571429rem;
    line-height: 1.7142857143rem !important;
    clear: both;
    text-align: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: none;
    font-weight: 300 !important;
    color: var(--grey-900) !important;
    background: transparent;
    box-sizing: border-box;
    min-width: auto;
    width: auto;
    gap: 0.5714285714rem;
    /*height: 3.1428571429rem;*/
}
.dropdown-menu>li>a:hover,
.dropdown-item:hover,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    text-decoration: none !important;
    display: block !important;
    width: auto !important;
    background-color: var(--grey-75) !important;
    color: var(--grey-900) !important;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.dropdown-item:active,
.dropdown-item:focus {
    text-decoration: none !important;
    outline: 0 !important;
    width: auto !important;
    border-color: var(--grey-300) !important;
}

a.nav-link[role="tab"]:not(.active) {
    color: var(--black) !important;
    font-family: ey_interstate, "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

a.active.nav-link[role="tab"] {
    font-size: 14px !important;
    text-decoration: none !important;
}

.crmEntityFormView label {
    background-color: transparent !important;
    color: var(--grey-600) !important;
    font-weight: 400;
    line-height: 1.4285714286rem;
    font-size: 1rem;
    margin-bottom: .4285714286rem;
    transition: bottom .25s ease, top .25s ease, color .25s ease, margin .25s ease, font-size .25s ease;
}

/* till here */

/* new css code for the ey theme begins here */

/* tables */

table.dataTable td.dt-left,
table.dataTable th.dt-left {
    text-align: left !important;
}

table.dataTable td.dataTables_empty,
table.dataTable td.dt-center,
table.dataTable th.dt-center {
    text-align: center !important;
}

table.dataTable td.dt-right,
table.dataTable th.dt-right {
    text-align: right !important;
}

table.dataTable td.dt-justify,
table.dataTable th.dt-justify {
    text-align: justify !important;
}

table.dataTable td.dt-nowrap,
table.dataTable th.dt-nowrap {
    white-space: nowrap !important;
}

table.dataTable tfoot td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable thead th.dt-head-left {
    text-align: left !important;
}

table.dataTable tfoot td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable thead th.dt-head-center {
    text-align: center !important;
}

table.dataTable tfoot td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable thead th.dt-head-right {
    text-align: right !important;
}

table.dataTable tfoot td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable thead th.dt-head-justify {
    text-align: justify !important;
}

table.dataTable tfoot td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable thead th.dt-head-nowrap {
    white-space: nowrap !important;
}

table.dataTable tbody td.dt-body-left,
table.dataTable tbody th.dt-body-left {
    text-align: left !important;
}

table.dataTable tbody td.dt-body-center,
table.dataTable tbody th.dt-body-center {
    text-align: center !important;
}

table.dataTable tbody td.dt-body-right,
table.dataTable tbody th.dt-body-right {
    text-align: right !important;
}

table.dataTable tbody td.dt-body-justify,
table.dataTable tbody th.dt-body-justify {
    text-align: justify !important;
}

table.dataTable tbody td.dt-body-nowrap,
table.dataTable tbody th.dt-body-nowrap {
    white-space: nowrap
}

table.dataTable td.dt-control {
    text-align: center !important;
    cursor: pointer !important;
}

table.dataTable td.dt-control:before {
    height: 1em !important;
    width: 1em !important;
    margin-top: -9px !important;
    display: inline-block !important;
    color: var(--white) !important;
    border: .15em solid var(--white) !important;
    border-radius: 1em !important;
    box-shadow: 0 0 .2em var(--grey-600) !important;
    box-sizing: content-box !important;
    text-align: center !important;
    text-indent: 0 !important;
    font-family: Courier New, Courier, monospace !important;
    line-height: 1em !important;
    content: "+" !important;
    background-color: var(--success) !important;
}

table.dataTable tr.dt-hasChild td.dt-control:before {
    content: "-";
    background-color: var(--error) !important;
}

table.dataTable {
    clear: both;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    max-width: none !important;
    border-collapse: separate !important
}

table.dataTable td,
table.dataTable th {
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
    text-align: center !important;
}

table.dataTable.nowrap td,
table.dataTable.nowrap th {
    white-space: nowrap !important;
}

div.dataTables_wrapper div.dataTables_length label {
    font-weight: 400 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

div.dataTables_wrapper div.dataTables_length select {
    width: 75px !important;
    display: inline-block !important;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right !important;
}

div.dataTables_wrapper div.dataTables_filter label {
    font-weight: 400 !important;
    white-space: nowrap !important;
    text-align: left !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: .5em !important;
    display: inline-block !important;
    width: auto !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 8px !important;
    white-space: nowrap !important;
}

div.dataTables_wrapper div.dataTables_paginate {
    margin: 0 !important;
    white-space: nowrap !important;
    text-align: right !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0 !important;
    white-space: nowrap !important;
}

div.dataTables_wrapper div.dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 200px !important;
    margin-left: -100px !important;
    margin-top: -26px !important;
    text-align: center !important;
    padding: 1em 0 !important;
}

table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc {
    padding-right: 30px !important;
}

table.dataTable thead>tr>td:active,
table.dataTable thead>tr>th:active {
    outline: none !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_desc_disabled {
    cursor: pointer !important;
    position: relative !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc_disabled:after {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    display: block !important;
    font-family: Glyphicons Halflings, sans-serif !important;
    opacity: .5 !important;
}

table.dataTable thead .sorting:after {
    opacity: .2 !important;
    content: "\E150" !important;
}

table.dataTable thead .sorting_asc:after {
    opacity: .5 !important;
    content: "\E155" !important;
}

table.dataTable thead .sorting_desc:after {
    opacity: .5 !important;
    content: "\E156" !important;
}

table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    color: var(--grey-75) !important;
}

div.dataTables_scrollHead table.dataTable {
    margin-bottom: 0 !important
}

div.dataTables_scrollBody>table {
    border-top: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

div.dataTables_scrollBody>table>thead .sorting:after,
div.dataTables_scrollBody>table>thead .sorting_asc:after,
div.dataTables_scrollBody>table>thead .sorting_desc:after {
    display: none !important;
}

div.dataTables_scrollBody>table>tbody>tr:first-child>td,
div.dataTables_scrollBody>table>tbody>tr:first-child>th {
    border-top: none !important;
}

div.dataTables_scrollFoot>.dataTables_scrollFootInner {
    box-sizing: content-box !important;
}

div.dataTables_scrollFoot>.dataTables_scrollFootInner>table {
    margin-top: 0 !important;
    border-top: none !important;
}

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

    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: center !important;
    }
}

table.dataTable.table-condensed>thead>tr>th {
    padding-right: 20px !important;
}

table.dataTable.table-condensed .sorting:after,
table.dataTable.table-condensed .sorting_asc:after,
table.dataTable.table-condensed .sorting_desc:after {
    top: 6px !important;
    right: 6px !important;
}

table.table-bordered.dataTable {
    border-right-width: 0 !important;
}

table.table-bordered.dataTable td,
table.table-bordered.dataTable th {
    border-left-width: 0 !important;
}

table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable th:last-child {
    border-right-width: 1px !important;
}

div.dataTables_scrollHead table.table-bordered,
table.table-bordered.dataTable tbody td,
table.table-bordered.dataTable tbody th {
    border-bottom-width: 0 !important;
}

div.table-responsive>div.dataTables_wrapper>div.row {
    margin: 0 !important;
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child {
    padding-left: 0 !important;
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
    padding-right: 0 !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.child {
    cursor: default !important
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before {
    display: none !important
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control {
    position: relative !important;
    padding-left: 30px !important;
    cursor: pointer !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    top: 50% !important;
    left: 5px !important;
    height: 1em !important;
    width: 1em !important;
    margin-top: -9px !important;
    display: block !important;
    position: absolute !important;
    color: var(--white) !important;
    border: .15em solid var(--white) !important;
    border-radius: 1em !important;
    box-shadow: 0 0 .2em var(--grey-600) !important;
    box-sizing: content-box !important;
    text-align: center !important;
    text-indent: 0 !important;
    font-family: Courier New, Courier, monospace !important;
    line-height: 1em !important;
    content: "+" !important;
    background-color: var(--info) !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    content: "-" !important;
    background-color: var(--error) !important;
}

table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td.dtr-control,
table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th.dtr-control {
    padding-left: 27px !important;
}

table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th.dtr-control:before {
    left: 4px !important;
    height: 14px !important;
    width: 14px !important;
    border-radius: 14px !important;
    line-height: 14px !important;
    text-indent: 3px !important;
}

table.dataTable.dtr-column>tbody>tr>td.control,
table.dataTable.dtr-column>tbody>tr>td.dtr-control,
table.dataTable.dtr-column>tbody>tr>th.control,
table.dataTable.dtr-column>tbody>tr>th.dtr-control {
    position: relative !important;
    cursor: pointer !important;
}

table.dataTable.dtr-column>tbody>tr>td.control:before,
table.dataTable.dtr-column>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-column>tbody>tr>th.control:before,
table.dataTable.dtr-column>tbody>tr>th.dtr-control:before {
    top: 50% !important;
    left: 50% !important;
    height: .8em !important;
    width: .8em !important;
    margin-top: -.5em !important;
    margin-left: -.5em !important;
    display: block !important;
    position: absolute !important;
    color: var(--white) !important;
    border: .15em solid var(--white) !important;
    border-radius: 1em !important;
    box-shadow: 0 0 .2em var(--grey-600) !important;
    box-sizing: content-box !important;
    text-align: center !important;
    text-indent: 0 !important;
    font-family: Courier New, Courier, monospace !important;
    line-height: 1em !important;
    content: "+" !important;
    background-color: var(--info) !important;
}

table.dataTable.dtr-column>tbody>tr.parent td.control:before,
table.dataTable.dtr-column>tbody>tr.parent td.dtr-control:before,
table.dataTable.dtr-column>tbody>tr.parent th.control:before,
table.dataTable.dtr-column>tbody>tr.parent th.dtr-control:before {
    content: "-" !important;
    background-color: var(--error) !important;
}

table.dataTable>tbody>tr.child {
    padding: .5em 1em !important;
}

table.dataTable>tbody>tr.child:hover {
    background: transparent !important
}

table.dataTable>tbody>tr.child ul.dtr-details {
    display: inline-block !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
    border-bottom: 1px solid var(--grey-75) !important;
    padding: .5em 0 !important;
}

table.dataTable>tbody>tr.child ul.dtr-details>li:first-child {
    padding-top: 0 !important;
}

table.dataTable>tbody>tr.child ul.dtr-details>li:last-child {
    border-bottom: none !important;
}

table.dataTable>tbody>tr.child span.dtr-title {
    display: inline-block !important;
    min-width: 75px !important;
    font-weight: 700 !important;
}

.toast {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    font-weight: 400;
    background: var(--white);
    color: var(--grey-900);
    border: .0714285714rem solid var(--grey-400);
    border-radius: .5714285714rem;
}
.toast-content, .toast-body {
    display: flex;
    align-items: flex-start;
    font-size: 1rem;
    line-height: 1.5714285714rem;
    font-weight: 400;
    position: relative;
    width: 100%;
    padding: 1.1428571429rem;
    gap: .8571428571rem;
    &::before {
        width: 1.4285714286rem;
        height: 1.4285714286rem;
        content: ' ';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
    }
    .toast-text-container {
        width: 100%;
        line-height: 1.4285714286rem;
    }
    .toast-heading {
        margin-bottom: 10px;
    }
    p, .toast-text {
        color: inherit;
    }
    a {
        color: var(--grey-800) !important;
        &:hover, &:focus, &:active, &.active {
            color: var(--grey-900) !important;
        }
    }
}
.toast-action-button-container {
    display: flex;
    flex-direction: row;
    gap: .8571428571rem;
}
.toast.toast-notification {
    color: var(--grey-50);
    height: 100%;
    max-height: max-content;
    .toast-content, .toast-body {
        p, .toast-text {
            color: var(--grey-400);
        }
        a {
            color: var(--grey-200) !important;
            &:hover, &:focus, &:active, &.active {
                color: var(--grey-50) !important;
            }
        }
    } 
}
.toast.toast-notification.closed,
.toast.toast-notification.closed .toast-content, 
.toast.toast-notification.closed .toast-body {
    height: 0;
    opacity: 0;
    margin: 0;
    transition: height 1s ease, opacity 0.5s ease;
}
.toast.toast-notification.read {
    color: var(--grey-50);
    background-color: var(--grey-800) !important;
    border-color: var(--grey-800);
}
.motif-button-notification {
    color: var(--grey-100);
    aspect-ratio: 1 / 1;
}
.motif-button-notification.motif-active, 
.motif-button-notification:hover:not(:disabled) {
    color: var(--white);
    background-color: var(--grey-800);
    color: inherit;
    border-color: transparent;
    border-width: 0;
    border-style: none;
    box-shadow: none;
    border-radius: .2857142857rem;
}
/* setting the icons to display before content here */
.toast-success .toast-content::before,
.motif-toast-success .motif-toast-content::before {
    background-image: url('data:image/svg+xml; utf8, <svg width="16" height="16" viewBox="0 0 24 24" fill="%2326A04B" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.46967 11.9697C6.76256 11.6768 7.23744 11.6768 7.53033 11.9697L10 14.4393L16.4697 7.96967C16.7626 7.67678 17.2374 7.67678 17.5303 7.96967C17.8232 8.26256 17.8232 8.73744 17.5303 9.03033L10.5303 16.0303C10.2374 16.3232 9.76256 16.3232 9.46967 16.0303L6.46967 13.0303C6.17678 12.7374 6.17678 12.2626 6.46967 11.9697Z" fill="%2326A04B"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z" fill="%2326A04B"/></svg>');
}
.toast-danger .toast-content::before,
.motif-toast-danger .motif-toast-content::before {
    background-image: url('data:image/svg+xml; utf8, <svg width="16" height="16" viewBox="0 0 24 24" fill="%23FF4136" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.25C12.4142 6.25 12.75 6.58579 12.75 7V13C12.75 13.4142 12.4142 13.75 12 13.75C11.5858 13.75 11.25 13.4142 11.25 13V7C11.25 6.58579 11.5858 6.25 12 6.25Z" fill="%23FF4136"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.5117 16.4414C12.8196 16.7185 12.8446 17.1927 12.5675 17.5006L12.5575 17.5117C12.2804 17.8196 11.8062 17.8446 11.4983 17.5675C11.1904 17.2904 11.1654 16.8162 11.4425 16.5083L11.4525 16.4972C11.7296 16.1893 12.2038 16.1643 12.5117 16.4414Z" fill="%23FF4136"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z" fill="%23FF4136"/></svg>');
}
.toast-warning .toast-content::before,
.motif-toast-warning .motif-toast-content::before {
    background-image: url('data:image/svg+xml; utf8, <svg width="16" height="16" viewBox="0 0 24 24" fill="%23D07200" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.61617 3.64141C10.6736 1.80247 13.3268 1.80247 14.3841 3.64141L22.4271 17.6291C23.4813 19.4625 22.1579 21.7499 20.0431 21.7499H3.95721C1.84242 21.7499 0.519055 19.4625 1.57322 17.6291L9.61617 3.64141ZM13.0838 4.38912C12.6032 3.55324 11.3972 3.55324 10.9165 4.38912L2.87358 18.3769C2.39441 19.2102 2.99594 20.2499 3.95721 20.2499H20.0431C21.0044 20.2499 21.6059 19.2102 21.1267 18.3769L13.0838 4.38912Z" fill="%23D07200"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 8.24994C12.4144 8.24994 12.7502 8.58573 12.7502 8.99994V12.9999C12.7502 13.4142 12.4144 13.7499 12.0002 13.7499C11.5859 13.7499 11.2502 13.4142 11.2502 12.9999V8.99994C11.2502 8.58573 11.5859 8.24994 12.0002 8.24994Z" fill="%23D07200"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.5119 16.4414C12.8198 16.7185 12.8447 17.1927 12.5676 17.5006L12.5576 17.5117C12.2805 17.8195 11.8063 17.8445 11.4984 17.5674C11.1906 17.2903 11.1656 16.8161 11.4427 16.5082L11.4527 16.4971C11.7298 16.1892 12.204 16.1643 12.5119 16.4414Z" fill="%23D07200"/></svg>');
}
.toast-info .toast-content::before,
.motif-toast-info .motif-toast-content::before {
    background-image: url('data:image/svg+xml; utf8, <svg width="16" height="16" viewBox="0 0 24 24" fill="%23188CE5" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.75C12.4142 10.75 12.75 11.0858 12.75 11.5V16.5C12.75 16.9142 12.4142 17.25 12 17.25C11.5858 17.25 11.25 16.9142 11.25 16.5V11.5C11.25 11.0858 11.5858 10.75 12 10.75Z" fill="%23188CE5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.5117 6.94142C12.8196 7.21851 12.8446 7.69273 12.5675 8.00061L12.5575 8.01172C12.2804 8.31961 11.8062 8.34456 11.4983 8.06747C11.1904 7.79038 11.1654 7.31616 11.4425 7.00828L11.4525 6.99716C11.7296 6.68928 12.2038 6.66432 12.5117 6.94142Z" fill="%23188CE5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z" fill="%23188CE5"/></svg>');
}
.toast-notification.unread .toast-content::before,
.motif-toast-notification.unread .motif-toast-content::before {
    background-image: url('data:image/svg+xml; utf8, <svg width="24" height="24" viewBox="0 0 24 24" fill="%23E6E6E9" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.25 5C15.25 2.92894 16.9289 1.25 19 1.25C21.0711 1.25 22.75 2.92894 22.75 5C22.75 7.07106 21.0711 8.75 19 8.75C16.9289 8.75 15.25 7.07106 15.25 5Z" fill="%23FF4136"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.527 2.25C14.0342 3.04977 13.75 3.99169 13.75 5C13.75 7.89947 16.1004 10.25 19 10.25C20.0083 10.25 20.9502 9.96575 21.75 9.47301V15C21.75 18.7279 18.7279 21.75 15 21.75H9C5.27208 21.75 2.25 18.7279 2.25 15V9C2.25 5.27208 5.27208 2.25 9 2.25H14.527Z" fill="%23E6E6E9"/></svg>');
}
.toast-notification .toast-content::before,
.motif-toast-notification .motif-toast-content::before {
    background-image: url('data:image/svg+xml; utf8, <svg width="24" height="24" viewBox="0 0 24 24" fill="%23E6E6E9" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 2.75C17.7574 2.75 16.75 3.75736 16.75 5C16.75 6.24264 17.7574 7.25 19 7.25C20.2426 7.25 21.25 6.24264 21.25 5C21.25 3.75736 20.2426 2.75 19 2.75ZM15.25 5C15.25 2.92893 16.9289 1.25 19 1.25C21.0711 1.25 22.75 2.92893 22.75 5C22.75 7.07107 21.0711 8.75 19 8.75C16.9289 8.75 15.25 7.07107 15.25 5Z" fill="%23E6E6E9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.75C6.10051 3.75 3.75 6.10051 3.75 9V15C3.75 17.8995 6.10051 20.25 9 20.25H15C17.8995 20.25 20.25 17.8995 20.25 15V12C20.25 11.5858 20.5858 11.25 21 11.25C21.4142 11.25 21.75 11.5858 21.75 12V15C21.75 18.7279 18.7279 21.75 15 21.75H9C5.27208 21.75 2.25 18.7279 2.25 15V9C2.25 5.27208 5.27208 2.25 9 2.25H12C12.4142 2.25 12.75 2.58579 12.75 3C12.75 3.41421 12.4142 3.75 12 3.75H9Z" fill="%23E6E6E9"/></svg>');
}


/* dtr-modal */

div.dtr-modal {
    position: fixed !important;
    box-sizing: border-box !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 100 !important;
    padding: 10em 1em !important;
}

div.dtr-modal div.dtr-modal-display {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 50% !important;
    height: 50% !important;
    margin: auto !important;
    z-index: 102 !important;
    overflow: auto !important;
    background-color: var(--grey-50) !important;
    border: 1px solid var(--black) !important;
    border-radius: .5em !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6) !important;
}

div.dtr-modal div.dtr-modal-content {
    position: relative !important;
    padding: 1em !important;
}

div.dtr-modal div.dtr-modal-close {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 22px !important;
    height: 22px !important;
    border: 1px solid var(--grey-75) !important;
    background-color: var(--grey-50) !important;
    text-align: center !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    z-index: 12 !important;
}

div.dtr-modal div.dtr-modal-close:hover {
    background-color: var(--grey-75) !important;
}

div.dtr-modal div.dtr-modal-background {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 101 !important;
    background: rgba(0, 0, 0, .6) !important;
}

@media screen and (max-width:767px) {
    div.dtr-modal div.dtr-modal-display {
        width: 95% !important;
    }
}

div.dtr-bs-modal table.table tr:first-child td {
    border-top: none !important;
}

/* bootstrap overwrites */
.accordion-item {
  display: block;
  box-shadow: none;
  border: none;
  +.accordion-item {
   margin-top: -.0714285714rem;
  }
 }
 .accordion-item:first-of-type .accordion-button {
   border-top-left-radius: .2857142857rem !important;
   border-top-right-radius: .2857142857rem !important;
 }
 .accordion-item:last-of-type .accordion-button {
   border-bottom-left-radius: .2857142857rem !important;
   border-bottom-right-radius: .2857142857rem !important;
 }
 .accordion-item:last-of-type .accordion-collapse {
  border-bottom-width: 1px;
 }
 .accordion-header {
  font-size: 1.1428571429rem !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  border-width: 1px 1px 0px 1px !important;
 }
 .accordion-button, .accordion-button:not(.collapsed) {
  width: 100% !important;
  padding: .7142857143rem 2.2857142857rem;
  color: var(--grey-900);
  box-shadow: none;
  background-color: var(--white);
  border-radius: 0px !important;
  border: .0714285714rem solid var(--grey-100);
  gap: .8571428571rem;
  display: flex;
  align-items: center;
  height: 3.1428571429rem !important;
  text-align: left;
  font-size: 1.2857142857rem !important;
  line-height: 2rem;
  font-weight: 400;
 }
 .accordion-button:not(.collapsed) {
  border-bottom-width: 0px;
 }
 .accordion-button:hover {
  background-color: var(--grey-50);
 }
 .accordion-button:focus, .accordion-button:focus-visible {
   box-shadow: none !important;
   border-color: var(--grey-100);
 }
 .accordion-button::before {
   flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
   content: "";
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--grey-200)"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>');
   background-repeat: no-repeat;
   background-size: 1.25rem;
   transition: transform 0.2s ease-in-out;
   svg {
       fill: #d7d7dc;
   }
 }
 .accordion-button:not(.collapsed)::before {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--grey-200)"><path d="M19 13H5v-2h14v2z"/></svg>');
 }
 .accordion-button::after {
   display: none;
 }
 .accordion-body {
  display: inline-block;
  font-size: 1rem;
  font-weight: lighter;
  line-height: 1.5714285714rem;
  padding: 1em 2.8571428571rem 1em 2.8571428571rem;
  width: 100%;
  background-color: var(--white);
  margin-top: -.1428571429rem;
  border: .0714285714rem solid var(--grey-100);
  border-top: none;
  transition: border-color .2s ease, border-width .2s ease;
 }

.alert-primary, .badge-primary, .bg-primary {
    border-color: var(--grey-900);
    background-color: var(--white) !important;
    color: var(--grey-900);
}
.alert-secondary, .badge-secondary, .bg-secondary, .btn-secondary-alt {
    border-color: var(--grey-900);
    background-color: var(--grey-900) !important;
    color: var(--white);
}
.alert-success, .badge-success, .bg-success, .btn-success, .motif-toast-success, .toast-success {
    border-color: var(--success);
    background-color: var(--success-background) !important;
    color: var(--success) !important;
}
.alert-danger, .badge-danger, .bg-danger, .btn-danger, .motif-toast-danger, .toast-danger {
    border-color: var(--error);
    background-color: var(--error-background) !important;
    color: var(--error) !important;
}
.alert-warning, .badge-warning, .bg-warning, .btn-warning, .motif-toast-warning, .toast-warning {
    border-color: var(--warning);
    background-color: var(--warning-background) !important;
    color: var(--warning);
}
.alert-info, .badge-info, .bg-info, .btn-info, .motif-toast-info, .toast-info {
    border-color: var(--info);
    background-color: var(--info-background) !important;
    color: var(--info) !important;
    transition: none;
}
.alert-light, .bg-light, .btn-light {
    border-color: var(--grey-600);
    background-color: var(--white) !important;
    color: var(--grey-600);
}
.alert-dark, .bg-dark, .btn-dark, .motif-toast-notification, .toast-notification {
    border-color: var(--grey-900);
    background-color: var(--grey-900) !important;
    color: var(--white);
}
/*.alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info {
    opacity: 0.9;
}*/
.badge-ghost {
    border-color: var(--grey-300);
    background-color: var(--grey-300) !important;
    color: var(--grey-600);
}
.badge-info-alt {
    border-color: var(--info-background-alt);
    background-color: var(--info-background-alt) !important;
    color: var(--info-alt);
}

.breadcrumb {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    padding: 0 !important;
    color: var(--grey-900);
    background-color: transparent !important;
    gap: .8571428571rem;
    height: 1.2857142857rem;
    a[title="Home"] {
        padding: 0;
        margin: 0;
        span[class="fa fa-home"] {
            line-height: 1;
            vertical-align: middle;
            &::before {
                content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="var(--grey-900)"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
                &:hover {
                    fill: var(--grey-800);
                }
            }
        }
    }
}
.breadcrumb-item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    margin-bottom: 0;
    font-size: 0.857rem;
    padding: 0 !important;
}
.breadcrumb-item+.breadcrumb-item::before {
    float: none;
    height: 1.1428571429rem;
    margin-right: .8571428571rem;
    padding: 0 !important;
}
.breadcrumb > li a, .breadcrumb-item > p:not(:last-child) {
    font-size: 0.857rem !important;
    font-weight: 400 !important;
    color: var(--grey-900) !important;
    text-decoration: none !important;
    outline: none;
    line-height: 1.2857142857rem;
}
.breadcrumb-item > p:last-child, 
.breadcrumb-item.active > p {
    color: var(--grey-500);
    font-size: .857rem !important;
    font-weight: 400 !important;
    text-decoration: none;
    line-height: 1.2857142857rem;
}
.breadcrumb > li a:hover {
    color: var(--grey-850) !important;
    text-decoration: none !important;
}
.breadcrumb p.small {
    color: var(--grey-900);
}
nav[style*="'>'"] .breadcrumb-item+.breadcrumb-item::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="var(--grey-500)" stroke="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.46967 5.46967C8.17678 5.76256 8.17678 6.23744 8.46967 6.53033L13.9393 12L8.46967 17.4697C8.17678 17.7626 8.17678 18.2374 8.46967 18.5303C8.76256 18.8232 9.23744 18.8232 9.53033 18.5303L15.5303 12.5303C15.8232 12.2374 15.8232 11.7626 15.5303 11.4697L9.53033 5.46967C9.23744 5.17678 8.76256 5.17678 8.46967 5.46967Z" fill="currentColor" stroke-width="0" stroke="none"></path></svg>') !important;
}

.icon-button {
    cursor: pointer;
    outline: none;
    background: transparent;
    border: none;
    border-color: transparent;
    border-style: none;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    transition: box-shadow 150ms ease-in-out;
}

.checkbox-custom {
    width: 1.2857142857rem;
    height: 1.2857142857rem;
    border-color: var(--grey-900);
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--white);
    align-items: center;
    display: inline-flex;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.checkbox-custom:hover, .checkbox-custom:focus {
    border-width: 0.1428571429rem;
}
.checkbox-checked-icon, .checkbox-indeterminate-icon {
    display: none;
    fill: var(--white);
}
.checkbox-custom svg {
    width: 100%;
    height: auto;
}
.checkbox-label {
    margin-left: 0.5714285714rem;
    font-size: 1rem;
    font-weight: lighter;
    line-height: 1.2;
    color: var(--grey-900);
}
.checkbox:hover:not(.checkbox-disabled) .checkbox-label {
    text-decoration: underline;
}
.checkbox-cell {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end;
    .control {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        .checkbox {
            align-content: center;
            display: flex;
            flex-wrap: wrap;
        }
    }
    .table-info {
        align-content: center;
        label {
            color: var(--grey-900) !important;
        }
    }
}
.checkbox-cell:has(+.form-control-cell) {
    min-height: 108px;
}

.entity-form .table-info {
    align-content: center;
    label {
        color: var(--grey-900) !important;
    }
}

.progress.list-group {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.1428571429rem;
    border: 1px solid var(--grey-200);
    box-shadow: 0px 0px 4px var(--grey-75);
    border-radius: 8px;
    padding: calc(var(--bs-gutter-x)* 1.3);
    background-color: var(--white);
    .list-group-item {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        position: relative;
        width: 7.1428571429rem;
        background-color: transparent;
        border: none;
        border-top: 4px solid var(--grey-75);
        line-height: 1.4285714286rem;
        font-size: 1rem;
        text-align: left;
        min-height: 4.5rem;
        padding: .8571428571rem .5rem 0rem .2857142857rem;
    }
    .list-group-item-success {
        border-top: 4px solid var(--grey-900);
        .fa-check {
            display: none;
        }
    }
    .list-group-item.active {
        background-color: transparent !important;
        border-top: 4px solid var(--grey-600);
        margin-top: 0px;
    }
}
@media screen and (max-width:767px) {
    .progress.list-group.top,
    .progress.list-group {
        flex-direction: row !important;
        .list-group-item {
            width: 7.1428571429rem;
        }
    }
}
fieldset legend,
fieldset legend h3 {
    color: var(--grey-900);
    font-weight: 400 !important;
    font-size: 1.143rem !important;
    line-height: 1.7142857143rem;
}
.crmEntityFormView .form-control.readonly {
    cursor: default !important;
    pointer-events: none;
}
.form-control, textarea.form-control {
    background-color: var(--grey-50);
    color: var(--black);
}
textarea.form-control {
    min-height: 100px;
}
input[type=text], 
input[type=email], 
input[type=url], 
input[type=password], 
textarea,
.form-control.form-select {
    color: var(--grey-900);
    font-weight: lighter;
    font-size: 1rem !important;
    background-color: var(--white) !important;
    line-height: 1.4285714286rem !important;
    display: block;
    width: 100%;
    border-color: var(--grey-300) !important;
    border-width: .0714285714rem;
    border-style: solid;
    border-radius: .2857142857rem;
    box-shadow: none;
    padding: 1rem;
    min-height: 50px;
    margin-bottom: 0.8571428571rem;
}
.form-select option {
    background-color: var(--white) !important;
    color: var(--grey-900) !important;
    font-size: 16px;
    font-weight: lighter;
    height: 24px;
    display: flex;
    cursor: pointer;
    padding: 0.8571428571rem 0.4285714286rem !important;
}
select:not(:-internal-list-box):not([multiple]) option:enabled:hover {
    background-color: var(--grey-50) !important;
}
.form-select option:hover, .form-select option:active {
    background-color: var(--grey-50) !important;
}
#ModernMSPicklistControl .fui-Combobox {
    background-color: var(--white) !important;
    width: 100%;
    border-color: var(--grey-300) !important;
    border-width: .0714285714rem;
    border-style: solid;
    border-radius: .2857142857rem;
    box-shadow: none;
    height: 50px;
    vertical-align: middle;
    input[type=text] {
        min-height: auto;
        border: none;
        margin-bottom: 0px;
    }
    span.fui-Combobox__expandIcon {
        margin-bottom: 0px;
    }
}
/* for multiselect picklist - default */
#UpdMSPicklistControl {
    .customControl {
        .msos-container {
            border-radius: 5px;
        }
        div[role="combobox"] {
            .msos-caret-container {
                min-width: 40px;
                border-radius: 5px;
            }
            .msos-selection-container {
                top: 50px !important;
            }
        }
        .msos-selecteditems-container {
            .msos-selecteditems {
                min-height: 36px;
                .msos-selected-display-item {
                    height: 100%;
                    .msos-selected-display-item-text {
                        align-content: center;
                    }
                }
            }
        }
    }
}
.col-lg-6 .crmEntityFormView {
    max-height: 95vh;
    overflow: scroll;
}

.webchat__send-box-text-box .webchat__send-box-text-box__input {
    color: rgb(96, 94, 92) !important;
    background-color: var(--white) !important;
    margin-bottom: 0.0rem !important;
}
.webchat__send-box-text-box:focus, .webchat__send-box-text-box__input:focus, .webchat__send-box-text-box__input:hover, .webchat__send-box-text-box__input:active {
    color: rgb(96, 94, 92) !important;
    background-color: var(--white) !important;
    margin-bottom: 0.0rem !important;
}

input[type=text]:hover, input[type=email]:hover, .form-select:hover, input[type=url]:hover, input[type=password]:hover, textarea:hover {
    background-color: var(--grey-25) !important;
    border-color: var(--grey-300);
}
input[type=text]:focus, input[type=email]:focus, .form-select:focus, input[type=url]:focus, input[type=password]:focus, textarea:focus,
input[type=text]:active, input[type=email]:active, .form-select:active, input[type=url]:active, input[type=password]:active, textarea:active {
    border-color: var(--link) !important;
    border-width: .1428571429rem !important;
}
.input-group-addon:focus, .input-group-addon:active, .input-group-addon:focus-visible {
    outline: none;
}

/* for lookup field */
.input-group input.lookup ~ button {
    border-radius: 0px 5px 5px 0px !important;
    height: 100% !important;
    min-height: 50px;
    margin-bottom: 0.8571428571rem;
    &.clearlookupfield {
        border-radius: 0px !important;
    }
}
.modal-lookup.show {
    .view-toolbar .input-group.entitylist-search {
        display: flex !important;
        flex-wrap: nowrap;
        .input-group-btn {
            display: flex !important;
            align-items: center;
        }
    }
    .view-grid table {
        box-shadow: 0px 0px 4px var(--grey-75);
        border: .0714285714rem solid var(--grey-200) !important;
        border-radius: .5714285714rem;
        margin-top: 10px;
        thead th a {
            color: var(--grey-900) !important;
            &:hover {color: var(--grey-1000) !important;}
        } 
    }
}
.entitylist-search {
    margin-right: 10px;
}

.datetimepicker,
.entitylist-search {
    width: 23.4285714286rem;
    max-width: 100%;
    .input-group-addon,
    .input-group-btn,
    .input-text-box,
    input.query {
        color: var(--grey-900);
        background-color: var(--white);
        border-color: var(--grey-300);
        border-width: .0714285714rem;
        border-radius: .2857142857rem;
        border-style: solid;
        transition: none;
        min-height: 3.1428571429rem;
        margin-bottom: 0px;
    }
    .input-text-box,
    input.query {
        border-width: .0714285714rem 0 .0714285714rem .0714285714rem;
    }
    .input-group-addon,
    .input-group-btn {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-width: .0714285714rem .0714285714rem .0714285714rem 0;
        vertical-align: middle !important;
        button,
        .btn-default:not(.gjs-selected) {
            border: none !important;
            height: 100% !important;
            background-color: transparent !important;
            float: inline-end;
            &:hover, &:active, &:focus {
                color: var(--grey-900) !important;
            }
        }
    }
} 
.datetimepicker.input-group:hover input,
.datetimepicker.input-group:hover .input-group-addon,
.entitylist-search.input-group:hover input, 
.entitylist-search.input-group:hover .input-group-btn {
    background-color: var(--grey-25) !important;
}
.datetimepicker.input-group,
.entitylist-search.input-group {
    &:focus, &:active {
        .input-text-box,
        input.query {
            border-color: var(--link) !important;
            border-width: .1428571429rem 0 .1428571429rem .1428571429rem;
        } 
        .input-group-addon,
        .input-group-btn {
            border-color: var(--link) !important;
            border-width: .1428571429rem .1428571429rem .1428571429rem 0;
        }
    }
    input:focus, input:active,
    input:has(+ .input-group-addon:focus),
    input:has(+ .input-group-addon:active),
    input:has(+ .input-group-addon.active),
    input:has(+ .input-group-btn:focus),
    input:has(+ .input-group-btn:active),
    input:has(+ .input-group-btn.active) {
        border-color: var(--link) !important;
        border-width: .1428571429rem 0 .1428571429rem .1428571429rem !important;
        + .input-group-addon,
        + .input-group-btn {
            border-color: var(--link) !important;
            border-width: .1428571429rem .1428571429rem .1428571429rem 0;
        }
    }
}
/* format date picker table (calendar) */
.bootstrap-datetimepicker-widget {
    margin-top: .4285714286rem !important;
    max-width: unset;
    width: 23.4285714286rem !important;
    padding: 1.4285714286rem 1.7142857143rem !important;
    border-color: var(--grey-100);
    border-style: solid;
    border-width: .0714285714rem;
    background-color: var(--white) !important;
    border-radius: .1428571429rem;
    box-shadow: 0 .4285714286rem .8571428571rem 0 rgba(35, 35, 47, .0784313725), 0 .1428571429rem .2857142857rem 0 rgba(35, 35, 47, .0588235294) !important;
    .accordion-toggle {
        margin-bottom: 0px;
    }
}

.datepicker > div > table[role="application"] > thead,
.datepicker thead button {
    background: var(--white);
    color: var(--grey-600);
    margin-bottom: .8571428571rem;
    height: 3.1428571429rem;
    padding: 0;
    width: 20rem;
}
.datepicker thead th button {
    font-size: 1.1428571429rem !important;
    font-weight: normal;
}
.datepicker thead th.dow {
    font-weight: normal;
}
.datepicker > div > table[role="application"] > thead th:hover, 
.datepicker > div > table[role="application"] > thead th:focus, 
.datepicker > div > table[role="application"] > thead th:active {
    background-color: var(--white);
}
.datepicker tbody {
    tr {
        height: 40px;
    }
    td button {
        font-size: 1rem !important;
        font-weight: lighter;
        margin-top: 0px;
        height: 33px !important;
        width: 33px !important;
        background-color: inherit !important;
        border-radius: 100% !important;
    }
    td[data-action="selectDay"]:hover,
    span[data-action="selectMonth"]:hover,
    span[data-action="selectYear"]:hover,
    span[data-action="selectDecade"]:hover {
        background-color: var(--grey-100);
        border-radius: 100%;
    }
}

.file-cell input[type="file"] {
    margin-left: -2px !important;

    &::-webkit-file-upload-button {
        display: none;
    }
    &::file-selector-button {
        display: none;
    }    
}

/* .file-cell {
    display: flex;
    width: 93%;
    height: 100px !important;
    text-align: center;
    position: relative;
    box-shadow: none;
    font-size: 1rem;
    color: var(--grey-600) !important;
    font-weight: 400;
    background-color: var(--grey-50);
    border: 1px dashed var(--grey-600);
    padding: 2px !important;
    margin-left: 35px;
    margin-right: 35px;
}
.file-cell:hover {
    box-shadow: none;
    border: 1px dashed var(--grey-800);
    background-color: var(--grey-200);
    color: var(--grey-800) !important;
    }

.file-cell .table-info {
    position: relative;
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    color: inherit !important;
}
.file-cell label, 
.file-cell label:hover, 
*/
.file-cell .control {
    display: flex;
    width: 100%;
    height: 100px !important;
    text-align: center;
    position: relative;
    box-shadow: none;
    font-size: 1rem;
    color: var(--grey-600) !important;
    font-weight: 400;
    background-color: var(--grey-50);
    border: 1px dashed var(--grey-600);
    padding: 2px !important;
}
.file-cell .control:hover {
    box-shadow: none;
    border: 1px dashed var(--grey-800);
    background-color: var(--grey-200);
    color: var(--grey-800) !important;
}
.buttonForFileUpload #UploadButton div.fa{
    width: auto !important;
    height: auto !important;
}
.file-cell .file-info .fileNameAndSizeSpan > div {
    margin: auto !important;
}
.file-cell .file-info .progress-container {
    margin-top: auto !important;
    margin-bottom: auto;
}
.file-cell .file-info .deleteicondiv,
.file-cell .file-info .cancelIconDiv {
    margin-bottom: -5px;
}
.file-cell .file-info .deleteicon,
.file-cell .file-info .cancelicon {
    margin-bottom: 5px;
}
.control input[type="file"] {
    position: relative;
    width: 100%;
    height: 100% !important;
    background-color: inherit !important;
    font-weight: 400 !important;
    color: inherit !important;
    text-align: center;
    padding-top: 35px;
    padding-left: 40%;
}
.control input[type="file"]:hover {
    background-color: inherit !important;
    color: inherit !important;
}


/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {

    *,
    :after,
    :before {
        color: var(--black) !important;
        text-shadow: none !important;
        background: transparent !important;
        box-shadow: none !important
    }

    a,
    a:visited {
        text-decoration: underline
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: ""
    }

    blockquote,
    pre {
        border: 1px solid var(--grey-600);
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    img,
    tr {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }

    .navbar {
        display: none;
    }
    .navbar a:not(.btn) {
        text-decoration: none !important;
    }

    .btn>.caret,
    .dropup>.btn>.caret {
        border-top-color: var(--black) !important
    }

    .label {
        border: 1px solid var(--black)
    }

    .table {
        border-collapse: collapse !important
    }

    .table td,
    .table th {
        background-color: var(--white) !important
    }

    .table-bordered td,
    .table-bordered th {
        border: 1px solid var(--grey-75) !important
    }
}

/*Additional For PowerPages*/
/*.list-group-item.active {
    background-color: #FFE300 !important;
    border-color: #000000 !important;
}*/

ol.progress.left, ol.progress.right {
    margin-top: 0px !important;
}
.list-group-item+.list-group-item {
    border-top-width: 1 !important;
}

input[type=checkbox],
input[type=radio] {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    margin: 0px;
    width: 16px;
    height: 16px !important;
}

.boolean-radio {
    display: inline;
}
.boolean-radio-cell > .control input {
    border: 0;
    height: 20px;
    width: 20px;
    overflow: hidden;
    outline: 0;
    padding: 0;
}
.boolean-radio-cell > .control label {
    margin-left: 5px;
    font-size: 1rem;
    font-weight: lighter;
    color: var(--black);
    line-height: 1.2;
    margin-right: 15px;
    margin-bottom: 0.8571428571rem;
}

/* style form and entity list */
.entitylist {
    background-color: var(--white) !important;
    box-shadow: 0px 0px 4px var(--grey-75);
    border: .0714285714rem solid var(--grey-200) !important;
    border-radius: .5714285714rem;
    padding-top: 1.4285714286rem;
    .entity-grid {
        border: none !important; 
        box-shadow: none !important;
        padding: 0;
    }
}
.crmEntityFormView {
    border: 1px solid var(--grey-200) !important;
    box-shadow: 0px 0px 4px var(--grey-75);
    border-radius: 8px;
    padding-top: 20px;
    padding-bottom: 20px;
    .form-custom-actions {
        padding: 0 28px;
        margin-left: 0px;
    }
}
.crmEntityFormView .cell.boolean-radio-cell input[type=radio] {
    vertical-align: middle !important;
}
.crmEntityFormView .actions {
    border-top: none !important;
    margin: 0;
    padding-left: 30px;
}
.crmEntityFormView .subgrid .modal[aria-hidden="true"] {
    display: none !important;
}
.entitylist .view-toolbar{
    border-bottom: none;
    padding-right: 1.5rem;
    .create-action {
        min-height: 3.1428571429rem;
        min-width: max-content;
        display: inline-flex;
        align-items: center;
        color: var(--grey-800) !important;
        border-color: var(--grey-300) !important;
        border-style: solid;
        background-color: var(--white) !important;
        &:hover, &:focus, &:active {
            background-color: var(--grey-50) !important;
            border-color: var(--grey-300) !important;
        }
        span.fa {
            margin-right: 5px;
        }
    }
}
.entitylist th:hover,
.entitylist th:focus,
.entitylist th:active {
    background-color: var(--grey-50);
}
.entitylist th a,
.entitylist th a:hover, 
.entitylist th a:focus, 
.entitylist th a:active {
    color: var(--grey-900) !important;
    font-weight: 500;
    text-decoration: none !important;
}
.entitylist .filter-vertical {
    margin-top: -20px;
}
.entitylist .entitylist-filter.card {
    box-shadow: 5px 0px 5px -5px rgba(0, 0, 0, 0.12) !important;
    border: none;
    border-radius: 0px;
    padding-top: 20px !important;
    border-right: 1px solid var(--grey-75);
    margin-left: 10px;
    margin-bottom: 10px;
    min-height: 100%;
    height: fit-content;
    width: 100%;
    .card-body {
        padding: 10px;
        .entitylist-filter-option-group {
            width: 100%;
            label {
                font-size: 18px !important;
            }
            .entitylist-filter-option-text {
                flex-wrap: nowrap;
                span.input-group-text {
                    min-height: 50px;
                }
            }
            .radio label {
                font-size: 16px !important;
                vertical-align: middle;
                input {
                    vertical-align: middle;
                }
            }
        }
        .float-end {
            margin-bottom: 10px;
        }
    }
}

.pages-chatbot-header-minimize-button {
    overflow: visible;
    border-radius: 5px !important;
    height: 36px;
    font-weight: bold;
    width: 20px !important;
}

.pva-embedded-web-chat-widget {
    height: 43px !important;
}

.pva-embedded-web-chat[data-minimized='false'] {
    height: 80%;
    width: 40%;
    /*max-width: 400px;
    max-height: 740px;*/
}

.pagination> li > a {
    color: var(--grey-900) !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {
    background-color: transparent !important;
    border-radius: 0% !important;
    border: none;
    color: var(--grey-900);
    text-decoration: underline !important;
}
.pagination> li > a:hover, 
.pagination> li > a:focus, 
.pagination > li:last-child > a:hover, 
.pagination > li:last-child > span:hover {
    background-color: var(--grey-200);
    border-radius: 0px;
    text-decoration: none !important;
}
.pagination-buttons {
    position: absolute;
    bottom: 0.857143rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 14.2857rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pagination-buttons-default {
    background-color: var(--carousel-dot-line-group-bg-color);
}
.pagination-buttons-md {
    gap: 0.857143rem;
    padding: 0.571429rem;
}
.pagination-button {
    border: none;
    cursor: pointer;
    padding: 0px;
    &.dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50%;
    }
    &.active {
        background-color: var(--grey-900);
    }
}

div:has(> iframe) {
    padding: 0px !important;
}
iframe {
    /*height: calc(100vw * 0.53) !important;
    width: 100% !important;*/
    box-sizing: border-box;
}
div.message.success {
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
    color: #323130 !important;
}

div#galleryIntersectionObserverParent {
    height: auto !important;
}


/* icons in the list table, search icon, action icons, filter exit icon */
.ms-List .ms-Button-icon,
.ms-List .ms-Link,
.ms-Stack .ms-SearchBox-iconContainer,
.ms-Stack .ms-Icon,
.ms-ContextualMenu-icon,
.root-109 {
    color: var(--grey-500) !important;
}


/* background color of exception list banned rows */
.root-224{
    background-color:  var(--portalThemeColor11);
}

/* background color for hovered list rows */
.ms-DetailsRow:hover  {
    background-color:  var(--grey-200);
}

/* search box focused, filter dropdown focused */
/*.root-237::after,
.root-250::after,*/
.ms-SearchBox::after,
.ms-Dropdown:focus::after {
    border: 2px solid var(--grey-400) !important;
}

/* Apply filter buttons */
.ms-Button--primary {
    color: var(--grey-500) !important;
}
.ms-Button--primary:hover {
    color: var(--white) !important;
    background-color: var(--grey-500) !important;
    border-color: var(--grey-500) !important;
}

/* Input of filters */
.ms-TextField-fieldGroup,
.ms-TextField-fieldGroup::after {
    border: none !important;
}

/* remove double scroll bar of the edit form modal */
iframe[title="Edit record"]  {
    height: 100% !important;
}

.ms-Image-image.is-loaded.ms-Image-image--portrait.is-fadeIn.image-239{
    width: 80px;
    height: 80px;
    background: grey;
    border-radius: 50%;
    align-items: center;
    text-align: center;
    color: #fff;
}

/* Icon CSS**/

.naviconey {
    padding-bottom: 5px;
    margin-right: 5px;
    height: 27px !important;
    width: 27px !important;
}
.backgroundImage .imageContainer .naviconey,
.headiconey {
    margin-right: 10px !important;
    padding-bottom: 4px !important;
    height: 35px !important;
    width: 35px !important;
    fill: var(--grey-900) !important;
}

/* For profile pics */
.profile-pic-onmodal {
    min-width: 43% !important;
    max-width: 100% !important;
    height: 173px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
}

/* EY MOTIF DESIGN upload CSS */
.motif-file-uploader {
    display: flex;
    flex-direction: column;
    gap: 1.14286rem !important;
    width: 100% !important;
    text-align: center;
    position: relative;

    &:hover, &:focus-visible  {
      color: var(--grey-700);
      box-shadow: var(--grey-300);
    }
    .motif-file-uploader-label-text,
    .motif-file-uploader-label-description {
      font-family: EYInterstate;
      color: var(--grey-700);
      line-height: 1.42857rem;
    }
    .motif-file-uploader-label-description {
      font-weight: lighter;
    }
  
    .motif-icon {
        color: var(--grey-700);
        display: flex;
        background-color: var(--grey-50);
        padding: .5714285714rem;
        border-radius: 100%;
        svg {
            width: 1.4285714286rem;
            height: 1.4285714286rem;
        }
        &:hover {
            color: var(--grey-800);
        }
        &:focus-visible {
            color: var(--grey-800);
        }
    }
  
    &.motif-invalid {
      .dropzone-container {
        border: 1px dashed var(--grey-300);
        background-color: var(--grey-200);
        box-shadow: var(--grey-300);
      }
  
      .motif-file-uploader-icon,
      .motif-file-uploader-icon:hover {
        padding: 10px;
        color: var(--grey-800);
        background-color: transparent;
        svg path {
          stroke-width: 1.75;
        }
      }
  
      .motif-file-uploader-label-text,
      .motif-file-uploader-label-description {
        color: var(--grey-800);
      }
    }
  
    &.motif-disabled {
      background-color: var(--grey-75);
      box-shadow: var(--grey-100);
  
      cursor: not-allowed;
      .dropzone-container {
        cursor: not-allowed;
        border-color: var(--grey-300);
        background-color: var(--grey-300);
        outline: none;
      }
      > div {
        pointer-events: none;
      }
  
      .motif-icon {
        color: var(--grey-100);
      }

      .motif-avatar svg {
        background-color: var(--grey-75) !important;
        border-color: var(--grey-200) !important;
        margin-bottom: 5px;
      }
  
      .motif-file-uploader-label-text,
      .motif-file-uploader-label-description {
        color: var(--grey-200);
      }
    }
  }
  
  .dropzone-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 9rem !important;
    border-color: var(--grey-300) !important;
    border-style: dashed !important;
    border-width: 1px !important;
    border-radius: 4px !important;
    padding: 1.42857rem !important;
    cursor: pointer;
    &.motif-drag-active {
      background-color: var(--grey-100);
    }
    &.motif-invalid {
      background-color: var(--grey-100);
    }
    &:hover {
        background-color: var(--grey-50);
        color: var(--grey-800);
    }
    &:focus-visible {
      background-color: var(--grey-200);
    }
    input[type="file"] {
        position: absolute;
        width: 100% !important;
        height: 100% !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }
  }
  
  .motif-file-uploader-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.857143rem;
  }


div.message.success {
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
    color: #323130 !important;
}

/* MOTIF tab list */
.motif-tab-navigation-horizontal {
    border-radius: .1428571429rem .1428571429rem 0 0;
    border-color: var(--grey-100);
    border-style: solid;
    border-width: 0 0 1px 0;
    min-height: 44px;
}
.motif-tab-navigation-sm .motif-tab-button {
    font-size: 1rem;
    line-height: 1.5714285714rem;
    padding: .5714285714rem .2857142857rem .7142857143rem;
}
.motif-tab-navigation-horizontal .motif-tab-button {
    height: 100% !important;
    border-color: transparent !important;
    border-style: solid !important;
    border-width: 0 0 .1428571429rem 0 !important;
    border-radius: .1428571429rem .1428571429rem 0 0 !important;
    &:hover, &:active, &.active {
        border-color: var(--grey-900) !important;
    }
}
.motif-tab-navigation .motif-tab-button:hover {
    background-color: var(--grey-100);
    color: var(--grey-900);
    box-shadow: none;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
}
.tab-content .tab-pane table {
    width: 100%;
}

.modal {
    .motif-tab-navigation, 
    .tab-content {
        background-color: var(--white);
    }
    .motif-tab-navigation-horizontal {
        justify-content: space-between;
        height: 4rem;
        .motif-tab-button {
            height: 100% !important;
            width: 100% !important;
        }
    }
    .table {
        tr.header-dark th[scope="col"] {
            background-color: var(--grey-200);
            min-height: 76px;
        }
        tr {
            border-width: 0 0 0.0714285714rem 0;
        }
        tr th, tr td, tr td:first-child {
            padding: 15px 29px;
        }
        tr td:has(a) {
            padding: 0px;
            a {
                display: block;
                line-height: 79px;
                width: 100%;
                text-align: center;
            }
        }
    }
}

/* 
CSS for new login page 
*/

#content-container.signinpage {
    background-image: url(/login-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 40%;
    margin-top: -20px;
    min-height: 100vh;
    background-attachment: fixed;
    #content .nav.nav-tabs {
        display: none !important;
    }
}

#content-container.signinpage .page-content.row {
    display: flex;
    flex-direction: column;
    .admin-heading {
        color: #ffffff;
        display: block;
        font-size: 62px;
        letter-spacing: 0.86px;
        margin-top: 10.6vh;
        min-height: 93px;
        line-height: 93px;
        font-weight: lighter;
        text-align: center;
    }
    .sub-text-container {
        font-size: 16px;
        color: #ffffff;
        width: 100%;
        .sub-text {
            padding-bottom: 30px;
            line-height: 2;
            text-align: center;
        }
    }
}

/* Sign In form */
/* If local log-in is enabled, set background to white! */
#content-container.signinpage .page-content.row .row {
    background: transparent; /* for only external login */
    border-radius: .25rem !important;
    margin: 20px auto;
    margin-bottom: 100px;
    padding-left: 2.14rem !important;
    padding-right: 2.14rem !important;
}

@media (min-width: 992px) {
    #content-container.signinpage .page-content.row .row {
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 100%;
    }
}

@media (max-width: 1500px) {
    #content-container.signinpage .page-content.row .row {
        .col-md-6 button.btn[title*="Microsoft Entra ID"],
        form[action*="SignIn"]:has(#local-login-heading) .portal-form {
            min-width: 30vw !important;
        }
    }
}

@media (max-width: 1300px) {
    #content-container.signinpage .page-content.row .row {
        .col-md-6 button.btn[title*="Microsoft Entra ID"],
        form[action*="SignIn"]:has(#local-login-heading) .portal-form {
            min-width: 40vw !important;
        }
    }
}

@media (max-width: 992px) {
    #content-container.signinpage .page-content {
        flex-direction: column-reverse;
    }
    #content-container.signinpage .page-content.row .row {
        .col-md-6 button.btn[title*="Microsoft Entra ID"],
        form[action*="SignIn"]:has(#local-login-heading) .portal-form {
            min-width: 50vw !important;
        }
    }
}

#content-container.signinpage .page-content.row .row .col-md-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    form {
        margin-bottom: 30px;
    }
    .portal-form .col-form-label {
        text-align: left;
        width: 100%;
        color: var(--white);
    }
    .portal-form .login-heading-section {
        color: var(--white) !important;
        margin: 0 10px 0 10px;
    }
    .portal-form .checkbox .span {
        color: var(--white) !important;
        margin-left: 5px;
    }
    .portal-form .row .col-md-8 {
        display: flex;
        flex-direction: column;  /* use row for login buttons beside each other*/
        gap: 5px;
        width: 100%;
        justify-content: center;
        margin-left: 0px;
        align-items: center;
        .checkbox {
            color: var(--white);
        }
    }
    #external-login-heading {
        display: none;
    }
    form[action*="Account/Login/ExternalLogin"],
    form[action*="SignIn"]:has(#local-login-heading) {
        display: flex;
        justify-content: center;
    }
    form[action*="SignIn"]:has(#local-login-heading) .portal-form {
        min-width: 25vw;
        background: rgba(0, 0, 0, 0.3);
    }
}

#content-container.signinpage .page-content #submit-signin-local,
#content-container.signinpage .page-content .row a[href*="ForgotPassword"] {
    width: 100% !important;
}

#content-container.signinpage .page-content.row .row .col-md-6 button.btn[name='provider'] {
    margin: 5px auto !important;
    width: 100%;
    padding: 1rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
    flex: 0 0 auto;
}
#content-container.signinpage .page-content.row .row .col-md-6 button.btn[title*="Microsoft Entra ID"] {
    color: var(--grey-900) !important;
    border-color: var(--white) !important;
    background-color: var(--white) !important;
    min-width: 25vw;
    height: 54px !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    margin-top: 4.3vh !important;
    &:hover {
        background-color: transparent !important;
        color: var(--white) !important;
    }
}

/* Redeem Invitation Code Page 
#content-container.signinpage.redeem {
    z-index: 1;
}*/

#content-container.signinpage.redeem #content .page-content form,
#ContentContainer_MainContent_MainContent_LocalLogin,
#ContentContainer_MainContent_MainContent_ExternalLogin {
    background: transparent; /* for only external login */
    border-radius: .25rem !important;
    margin-top: 50px;
    margin-bottom: 30px;
    padding-left: 2.14rem !important;
    padding-right: 2.14rem !important;

    padding-top: 2.85rem !important;
    padding-bottom: 2.85rem !important;
    display: flex;
    justify-content: center;
    .portal-form {
        padding-top: 10px;
        min-width: 25vw;
        width: fit-content;
        background: rgba(0, 0, 0, 0.3);
        .col-form-label {
            text-align: left;
            width: 100%;
            color: var(--white);
        }
        .login-heading-section {
            color: var(--white) !important;
            margin: 0 10px 0 10px;
        }
        .checkbox span {
            color: var(--white);
            margin-left: 5px;
        }
        .row .col-md-10,
        .row .col-md-8 {
            width: 100% !important;
        }
        .row .offset-md-2 {
            margin-left: 0 !important;
        }
        .RadCaptcha a, .RadCaptcha label {
            color: var(--white) !important;
            margin: 5.25px 10px 5.25px 10px;
        }
        .rcCaptchaAudioLink {
            margin-bottom: 15px !important;
        }
    }
}

#content-container.signinpage.redeem #content .page-content form {
    margin-bottom: 0px; /* set bottom margin to 0 due to the added div for invite request*/
}

@media (min-width: 992px) {
    #content-container.signinpage.redeem #content .page-content form {
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 58.33333333%;
    }
}

#content-container.signinpage.redeem #content .page-content form legend span {
    padding: 0px 10px;
}

input#InvitationCode,
label[for*="InvitationCode"] {
    width: 100%;
    display: block;
    word-break: normal;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

button#submit-redeem-invitation,
input#SubmitButton,
#ContentContainer_MainContent_MainContent_ExternalLoginButtons > button {
    margin: 5px auto 30px !important;
    width: 100% !important;
}


/* Register */
#ContentContainer_MainContent_PageCopy_PageCopy {
    margin: 0px;
}


@media (min-width: 2000px) {
    .signinpage {
        .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            max-width: 70%;
        }
    }
}

@media (min-width: 992px) {
    #ContentContainer_MainContent_MainContent_LocalLogin {
        margin-bottom: 30px;
    }
}

@media (max-width: 992px) {
    #ContentContainer_MainContent_MainContent_SecureRegister .alert {
        margin: 20px 19% 0;
    }
}

@media (max-width: 768px) {
    #ContentContainer_MainContent_MainContent_SecureRegister .alert {
        margin: 20px 10% 0;
    }
}

/*#Register {
    width: 100%;
}*/

#ContentContainer_MainContent_MainContent_LocalLogin,
#ContentContainer_MainContent_MainContent_ExternalLogin {
    margin-top: 0px;
}

#ContentContainer_MainContent_MainContent_ExternalLoginButtons {
    padding: 15px 2.14rem 0px;
}

#ContentContainer_MainContent_MainContent_ExternalLogin {
    .login-heading-section {
        color: var(--white) !important;
        margin: 0 10px 0 10px;
    }
}

#ContentContainer_MainContent_MainContent_SecureRegister .alert {
    margin: 50px 6% 0;
}


/* For Contract Review Tracker page */
.table tr.selected-for-comparison td,
.table tr.selected-for-comparison:hover td,
.table-striped > tbody > tr.selected-for-comparison:nth-of-type(odd),
.table-striped > tbody > tr.selected-for-comparison:nth-of-type(odd) > td,
.table-striped > tbody > tr.selected-for-comparison:nth-of-type(odd) > td:hover {
  background-color: #D7D7DC !important; 
}