/****** 		MAIN Styles 	*******/

/* 
This is the structured CSS that make up the graphical framework

| Color              | HEX     | RGBA             | Use                       |
|--------------------|---------|------------------|---------------------------|
| Dark Gray          | #1e1e1e | 30, 30, 30, 1    | Body Text                 |
| Lighter Dark Gray  | #4d5358 | 77, 83, 88, 1    | Label Text                |
| Gray Hover Overlay | #efefef | 239, 239, 239, 1 | Left Menu Overlat         |
| Red Cross Red      | #D52B1E | 213, 43, 30, 1   | Red Link Text             |
| Light Pink         | #fff9f9 | 255, 249, 249, 1 | Main Background           |
| Medium Gray        | #ccced1 | 204, 206, 209, 1 | Card Border               |
| Light blue         | #cddde7 | 205, 221, 231, 1 | Profile Avatar Background |
| Light Pink         | #fef1f1 | 254, 241, 241, 1 | Button Background         |
| Light Bright Pink  | #ffe7e7 | 255, 231, 231, 1 | Button Background  Hover  |
| Link Red           | #96171a | 150, 23, 26, 1   | Button Text               |

*/

/******************************** GLOBAL STYLES *************************/

:root {
    --nrx-rust:         #96171a;
    --nrx-frost:        #cddde7;
    --nrx-gray-darker:  #1e1e1e;
    --nrx-gray-dark:    #343a3f; 
    --nrx-gray-medium:  #4d5358;
    --nrx-gray-light:   #ccced1; /* Gray-35 */ 
    --nrx-gray-hover-overlay: #efefef;
    --nrx-gray-hover-bg:rgb(135, 141, 150, 0.10); /* Button Outlined Hover Bg */
    --nrx-gray-90:      #21272a; /* Button Secondary Outline */
    --nrx-gray-80:      #343a3f; /* Button Secondary Outline */
    --nrx-gray-60:      #697077; /* Disabled text and border */
    --nrx-gray-40:      #a2a9b0; /* Diabled outline button border and text */
    --nrx-gray-30:      #e1e1e1; /* Diabled bg */
    --nrx-gray-10:      #f8f8f8; /* Disabled outline button bg */
    --nrx-red:          #d52b1e;
    --nrx-pink:         #f8b8b8; 
    --nrx-pink-light:   #fef1f1; 
    --nrx-pink-bright:  #ffe7e7;
    --nrx-jord:         #710000; /* Card title */ 
    --nrx-white:        #ffffff; 

    --signalfarger-mrk-new-light-green: #3A6B35;
    --signalfarger-mrk-new-light-green-15: #E3F3E6;
    
    --nrx-gap: 2em; /*24px*/
    --nrx-border-radius: 0.25em;
    --nrx-font-weight: 400;
    --nrx-font-weight-bold: 600;
    --nrx-font-weight-bolder: 700;
    --nrx-font-size: 16px;
    --nrx-font-size-xs: 12px; /*0.75em*/
    --nrx-font-size-sm: 14px; /*0.875em*/
    --nrx-font-size-md: 18px; /*1.125em*/
    --nrx-font-size-lg: 22px; /*1.375em*/
    --nrx-font-size-xl: 26px; /*1.625em*/
    --nrx-font-size-title: 48px;
    --bs-font-sans-serif: Myriad-Pro, sans-serif;
    --bs-modal-width: 680px;

    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--nrx-red);
    --bs-btn-border-color: var(--nrx-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--nrx-rust);
    --bs-btn-hover-border-color: var(--nrx-rust);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--nrx-rust);
    --bs-btn-active-border-color: var(--nrx-rust);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--nrx-gray-60);
    --bs-btn-disabled-bg: var(--nrx-gray-30);
    --bs-btn-disabled-border-color: var(--nrx-gray-60);

    --bs-secondary-rgb: var(--nrx-gray-80);
}

/****************************** END GLOBAL STYLES ***********************/

/* FONTS */
/* Imported in the Head/Fonts content snippet */
body {
    font-family: var(--bs-font-sans-serif);
    font-weight: var(--nrx-font-weight);
    font-style: normal;
    font-size: var(--nrx-font-size);
    font-size: 1em; 
}

body .headings, body .light, body .bold, body .italic {
    font-family: var(--bs-font-sans-serif);
    font-weight: var(--nrx-font-weight-bold);
}
body label:not(.form-check-label):not(.field-label):not(.form-label):not(.lowercase-label) {
    text-transform: uppercase;
    font-weight: var(--nrx-font-weight-bold);
    font-size: inherit;
}
body p {line-height: 1.7em;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {line-height: 1.45em; margin-bottom: 1em;}
h1, .h1 {   font-size: var(--nrx-font-size-xl);     /*26px*/    }
h2, .h2 {   font-size: var(--nrx-font-size-lg);     /*22px*/    }
h3, .h3 {   font-size: var(--nrx-font-size-md);     /*18px*/    }
h4, .h4 {   font-size: var(--nrx-font-size);        /*16px*/    font-weight: var(--nrx-font-weight);}
h5, .h5 {   font-size: var(--nrx-font-size-sm);     /*14px*/    font-weight: var(--nrx-font-weight);}
h6, .h6 {   font-size: var(--nrx-font-size-xs);     /*12px*/    }
.title {    font-size: var(--nrx-font-size-title);              font-weight: var(--nrx-font-weight-bold);}
.lead {     font-size: var(--nrx-font-size-md);                 font-weight: var(--nrx-font-weight-bold);}     
.ingress {  font-size: var(--nrx-font-size-md);}
.uppercase {text-transform: uppercase;}
.bold { font-weight: var(--nrx-font-weight-bold);}
.bolder { font-weight: var(--nrx-font-weight-bolder);}
/* END FONTS */

/* COLOR COMBI's*/ 
body .text-color-bright, body .btn.text-color-bright {background-color: var(--nrx-pink-bright);  border-color: var(--nrx-pink-bright); color: var(--nrx-jord);}
body .text-color-emphasis {color: var(--nrx-jord);}
body .text-color-gray {background-color: var(--nrx-gray-hover-overlay); color: var(--nrx-gray-medium);}
body .text-color-fail {background-color: var(--nrx-pink-light); color: var(--nrx-rust);}
body .text-color-gray-medium  {color: var(--nrx-gray-medium);}
body .text-color-gray-60 {color: var(--nrx-gray-60);}

/******************************** FIXES *************************/

/* FIX for Bootstrap */ 
/* These styles are initially set to !important by Bootstrap Contrast Utility SCSS function */
body .text-primary {color: var(--nrx-gray-darker)!important;}
body .text-secondary {color: var(--nrx-gray-medium)!important;}
body .text-bg-light {background-color: var(--nrx-gray-10)!important; color: #000!important; border-color: var(--nrx-gray-light)!important;} /* Used for notifications */ 
body .text-bg-success  {background-color: var(--signalfarger-mrk-new-light-green-15)!important; color: var(--signalfarger-mrk-new-light-green)!important;} /* Toast Icon Success */ 
.shadow {box-shadow: 0px 4px 17px 0px rgba(30, 30, 30, 0.14)!important;}
.border-top {border-top: 1px solid var(--nrx-gray-light)!important}
.border-bottom {border-bottom: 1px solid var(--nrx-gray-light)!important}
.border-right {border-right: 1px solid var(--nrx-gray-light)!important}
.border-left {border-left: 1px solid var(--nrx-gray-light)!important}
body .table-info {
    --bs-table-color: #000;
    --bs-table-bg: transparent;
    --bs-table-border-color: transparent;
    --bs-table-striped-bg: #c5e8ef;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #badce3;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfe2e9;
    --bs-table-hover-color: #000;
}
/* End FIX for Boostrap */ 

/* FIX for portalbasictheme.css */
body footer,body .navbar-static-top.navbar .menu-bar>.navbar-nav>li>a,
body .navbar-inverse .navbar-nav>li>a,body a,body .a, body .poll .poll-tags h4,
body h5,body .h5,body p,body .p,body p.smallText body .page_section p,
body .section-diagonal-left p,body .section-diagonal-right p, body .p2,body .button1,body .button2,
body .section-landing .row>div .section-landing-sub-heading, 
body .static-top.navbar .navbar-brand a .siteTitle>span, body .siteTitle, 
.static-top.navbar .navbar-brand a .siteTitle,.static-top .navbar-brand,
body .btn, body .btn-default, body .btn-primary,  body .btn-secondary, 
body .btn-outline-primary, body .btn-outline-secondary
{
    font-family: var(--bs-font-sans-serif);
    font-size: var(--nrx-font-size);
}
body h1,.h1,body .section-landing-heading,body .section-landing .row>div .section-landing-heading,
body .section-inline-search .row>div h1,body .section-landing h1,body .section-search .header-search h1,
body .page_section h1,body .color-inverse h1,body h1 p,
body h2,body .h2,body .page_section h2,body .color-inverse h2,body h2 p,
body h3,body .h3,body .page_section h3,body .color-inverse h3,body .sidebar-home h3,
body h4,body .h4,body .poll .poll-header h4,
body .static-top.navbar .menu-bar > .navbar-nav > li > a
{
    font-family: var(--bs-font-sans-serif);
}
body .columnBlockLayout {margin-top: 0; margin-bottom: 0; padding: 1em;}
body .modal-content {background-color: var(--nrx-white); border-color: var(--nrx-gray-light);}
body .crmEntityFormView, body .entitylist, body .crmEntityFormView label {background-color: transparent; border: none;}
body .form-control {background-color: transparent!important;border-color: var(--nrx-gray-40);border-radius: var(--nrx-border-radius);}
/* END FIX for portalbasictheme.css */

/* Fix for theme.css */ 
footer .footer-bottom ul li a, footer .footer-bottom ul li a:hover, footer .footer-bottom ul li a:focus, footer .footer-bottom ul li a:active, footer .footer-bottom ul li a.active 
{color: inherit;font-size: inherit;}
body a,
body a:active
/* body a:visited { */
{
    color: inherit;
    text-decoration: underline;
}
a:hover:not(.stretched-link):not(.btn):not(.nav-link){
    color: var(--nrx-red);
    text-decoration: underline;
}
a:not(.btn):not(.stretched-link):not(.nav-link):not(.custom-expense-list):not(.pagination .page-link) {text-decoration: underline;}
/* END fix for theme.css */ 




/******************************** LAYOUT *************************/

/* BODY */
body {display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; }
body .wrapper-body {min-height: auto; margin-bottom: auto; flex-grow: 1}


/* BREAKPOINTS *//*
// X-Small devices  (portrait phones, less than 576px)  No media query for `xs` since this is the default in Bootstrap
// Small devices    (landscape phones, 576px and up)    @media (min-width: 576px) { ... }
// Medium devices   (tablets, 768px and up)             @media (min-width: 768px) { ... }
// Large devices    (desktops, 992px and up)            @media (min-width: 992px) { ... }
// X-Large devices  (large desktops, 1200px and up)     @media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)    @media (min-width: 1400px) { ... }                          */

/* Keep main content narrow as designed through the bigger breakpoints */ 
@media (min-width: 905px){
    .container
    .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-lg, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm {
        max-width: 840px; /* 780px + (16px gap x 2) + (1px border x 2)*/
    }
}
@media (min-width: 1240px){
    .container
    .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-lg, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm {
        max-width: 840px; /* 780px + (16px gap x 2) + (1px border x 2)*/
    }
}
@media (min-width: 1439px){
    .container,
    .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm{
        max-width: 840px; /* 780px + (16px gap x 2) + (1px border x 2)*/
    }
}
@media (min-width: 1439px){
    .container-lg, .container-md, .container-sm, .container-xl, .container-xxl,
    .row.sectionBlockLayout > .container-xxl {
        max-width: 1240px;
    }
}

/* HEADER */
body .navbar.static-top {
    z-index: 1;
    background: #ffffff;
    border-bottom: 1px solid var(--nrx-gray-light);
    position: sticky;
    top: 0;
}
body .navbar.static-top .navbar-brand {
    line-height: normal;
    padding: 0px 1em;
}
body .navbar.static-top .navbar-brand .siteTitle {
    margin-bottom: 0px;
    text-decoration: none;
}
@media (max-width: 1200px) {
    .navbar-static-top .navbar-brand {
        height: auto;
    }
}
body {
    height: fit-content;
}

/* Nav */
body #navbar li {
    list-style: none;
}

body .nav-link {
    color: inherit;
    text-decoration: none;
}

body .nav-link:hover {
    color: inherit;
    text-decoration: none;
}

/* Dropdown menu */
.dropdown-menu {
    background-color: #ffffff;
    width: 227px;
}

.nav-item.dropdown .dropdown-menu {
    background-color: #ffffff;
  }

.dropdown-menu > li > a {
    padding: 6px 20px !important;
}

.dropdown-item:hover,
.dropdown-item:hover{
    background-color: var(--nrx-pink-light) !important;
    font-weight: var(--nrx-font-weight-bolder);
    border-radius: 6px !important;
}

html[dir=ltr] li a.dropdown-item {
    margin-left: 8px !important;
    margin-right: 8px !important;
    text-decoration: none !important;
}

.dropdown-item {
    border-radius: 6px !important;
    margin: 0px 8px !important;
}

.dropdown-container.show .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
}

.dropdown-wrapper {
    position: relative;
  }
  
.dropdown-wrapper.open .dropdown-menu {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    z-index: 1000;
    overflow-y: auto;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--nrx-pink-light) !important;
    font-weight: var(--nrx-font-weight-bolder);
    border-radius: 6px !important;
}

.login-link:hover {
    background-color: #fff !important;
}

.dropdown-icon {height:16px; width:16px; color:#343A3F;}

/* NAV Underline = TABS */
 
.nav-underline {
    --bs-nav-underline-gap: var(--nrx-gap);
    --bs-nav-underline-border-width: 2px;
    --bs-nav-underline-link-active-color: var(--nrx-red);
    gap: var(--nrx-gap);
  }
  .nav-underline .nav-link {
      padding-right: 0;
      padding-left: 0;
      border-bottom: 2px solid transparent;
  }
  .nav-underline .nav-link:hover, .nav-underline .nav-link:focus { border-bottom-color: var(--nrx-red);}
  
  .nav-underline .nav-link.active, .show > .nav-link {
      font-weight: var(--nrx-font-weight-bold);
      color: var(--nrx-rust);
      border-bottom-color: var(--nrx-red);
  }
  
.my-page__nav {
    border-bottom: 1px solid var(--nrx-gray-light);
}

.my-page__nav .nav-link:first-child {
    padding-left: 0;
    color: inherit;
}

.my-page__nav .nav-link.active span {
    padding-bottom: calc(var(--bs-nav-link-padding-y) + 1px);
    border-bottom: 2px solid var(--nrx-red);
    color: var(--nrx-rust);
}

.my-page__nav .nav-link:not(.active):hover span {
    padding-bottom: calc(var(--bs-nav-link-padding-y) + 1px);
    border-bottom: 2px solid var(--nrx-red);
}

/* END HEADER */

/* FOOTER */ 
body footer .footer-bottom {
    background-color: inherit; /* make footer overlay maincontent sticky to the bottom */ 
    color: var(--nrx-gray-dark);
    padding: 0px;
}
body footer .footer-bottom .nav-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    padding: 0.25em;
}
body footer .footer-bottom a {text-decoration: underline;}


/* END FOOTER */ 

/******************************** CONTENT STYLES *************************/

/* MODALS */ 

body .modal-title {margin-top: 0;}

@media (min-width: 576px){
    body .modal-dialog {
        max-width: var(--bs-modal-width);
        margin-right: auto;
        margin-left: auto;
    }
}
@media (min-width: 990px){
    body .modal-dialog {
        max-width: 680px;
        margin-right: auto;
        margin-left: auto;
    }
}
body .modal-header, body .modal-body, body .modal-footer {padding: 1em 1.5em;}

@media (max-width: 575.98px) {
    .bottom-modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
    }
}

/* end MODALS */

/* CRM FORMS */ 
body .crmEntityFormView .tab-title {border: none; font-weight: 700; font-size: var(--nrx-font-size);}
body .crmEntityFormView .cell.clearfix {padding:0px;}
body .crmEntityFormView .cell.clearfix.form-control-cell {padding:0 16px 20px 0px;} 
body .crmEntityFormView .cell .field-label {text-transform: unset;font-weight: var(--nrx-font-weight);}
body .crmEntityFormView div.description {font-size: var(--nrx-font-size-sm); color: var(--nrx-gray-medium);}

/* Remove spacing on empty headings */
body .crmEntityFormView .section-title:empty, body .tab-title:empty, body .section-title h3:empty {margin-top:0px;margin-bottom:0px;}

/* Form fields */ 
.form-check .form-check-label {font-weight: var(--nrx-font-weight); text-transform: none;}
.form-check .form-check-input[type=checkbox] {
    border-radius: var(--nrx-border-radius);
    height: 24px;
    width: 24px;
    margin-right: 0px; /* Fix for checkbox alignment on mobile */
    margin-top: 2px;;
    padding: 2px;
}

body .form-title {
    margin-bottom: -6px;
}

@media (max-width: 800px) {
    body .crmEntityFormView .cell.clearfix.form-control-cell {padding:0 16px 15px 0px;} 
    body .form-title {
        margin-bottom: -15px;
        }
}

select option:checked:hover {
    background-color: red;
}
.form-select option[data-selected='true']::before {
    content: "✔";
    float: right;
  }
form legend {border-bottom: none; font-weight: var(--nrx-font-weight-bolder); font-size: var(--nrx-font-size-lg);}
form label.form-label {font-weight: var(--nrx-font-weight);color: var(--nrx-gray-dark);margin-bottom: 0px;}

.crmEntityFormView .cell div.table-info.required label:after {
    display: none;
}


/* Counter */ 
.counter-wrapper {display:flex;}
input#counter {appearance: none;max-width: 40px; border:none; text-align: center; font-size: var(--nrx-font-size-lg); font-weight: var(--nrx-font-weight-bold); padding: 4px 6px;}
#decrement, #increment {width: 32px; height: 32px;}

/* Birth Date 3-fields */ 
input.birthDay, input.birthMonth {width: 65px;} /* From figma sketches */
input.birthYear {width: 100px;} /* From figma sketches */

/* end FORMS */

/* Buttons */
body .btn {
    border-radius: 6px;
    padding: 0.45em 0.9em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5em;
    border: 1px solid transparent;
    font-weight: var(--nrx-font-weight-bold);
    font-size: var(--nrx-font-size-sm);
    width: fit-content;
    text-decoration: none;
}
body a.btn {text-decoration: none;}
body .btn.btn-sm, body .card .btn {font-size:var(--nrx-font-size-xs);font-weight:var(--nrx-font-weight-bold);} /* Smaller button */
body .btn.btn-lg {font-size: var(--nrx-font-size-sm);padding: 8px 24px;}

body .btn-check:checked+.btn, body .btn.active, body .btn.show, body .btn:first-child:active, body :not(.btn-check)+.btn:active,
body .btn.btn-link:hover {
    color: inherit;
    background-color: inherit;
    border-color: inherit;
}

.btn:hover{
background-color: #878D961A;
color: var(--nrx-gray-darker);
}

body .btn.btn:active{
    background-color: #878D9626;
    color: var(--nrx-gray-darker);
    border-color: transparent;
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--nrx-red);
    --bs-btn-border-color: var(--nrx-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--nrx-rust);
    --bs-btn-hover-border-color: var(--nrx-rust);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--nrx-rust);
    --bs-btn-active-border-color: var(--nrx-rust);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--nrx-gray-60);
    --bs-btn-disabled-bg: var(--nrx-gray-30);
    --bs-btn-disabled-border-color: var(--nrx-gray-60);
}

body .btn-primary {
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}
body .btn-primary:hover, body .btn-primary:focus {
    background-color: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
}

body .btn.btn-primary:active {
    background-color: var(--nrx-jord);
    color: var(--bs-btn-color);
    border: none;
}

body .btn.btn-secondary{
    background-color: var(--nrx-pink-light);
    color: var(--nrx-rust);
    border-color: var(--nrx-pink-light);
}

body .btn.btn-secondary:active{ 
    color: var(--nrx-jord);
    background-color: var(--nrx-pink-bright);
}

body .btn-secondary:hover, body .btn-secondary:focus,
    /* Fix for portalbasictheme.css */ .button2:not(.gjs-selected):hover, .btn-secondary:not(.gjs-selected):hover, .btn-default:not(.gjs-selected):hover {
    background-color: var(--nrx-pink-bright);
    color: var(--nrx-rust);
    border-color: transparent;
}


.btn-outline-primary {
    --bs-btn-bg: #ffffff;
    --bs-btn-color: var(--nrx-red);
    --bs-btn-border-color: var(--nrx-red);
    --bs-btn-hover-color: var(--nrx-rust);
    --bs-btn-hover-bg: var(--nrx-gray-hover-bg);
    --bs-btn-hover-border-color: var(--nrx-rust);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: var(--nrx-rust);
    --bs-btn-active-bg: var(--nrx-gray-hover-bg);
    --bs-btn-active-border-color: var(--nrx-rust);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--nrx-gray-60);
    --bs-btn-disabled-bg: var(--nrx-gray-10);
    --bs-btn-disabled-border-color: var(--nrx-gray-40);
    --bs-gradient: none;
}
body .btn-outline-primary{
    background-color: var(--bs-btn-bg);
    border: 1px solid var(--bs-btn-border-color);
    color: var( --bs-btn-color);
}
body .btn-outline-primary:hover, body .btn-outline-primary:focus {
    background-color: var(--nrx-gray-hover-bg);
    border-color: var(--nrx-rust);
    color: var(--nrx-rust);
}

body .btn.btn-outline-primary:active {
    background-color: #878D9626;
    border: 1px solid var(--nrx-jord);
    color: var(--nrx-jord);
}
.btn-outline-secondary {
    --bs-btn-color: var(--nrx-gray-80);
    --bs-btn-border-color: var(--nrx-gray-80);
    --bs-btn-hover-color: var(--nrx-gray-90);
    --bs-btn-hover-bg: var(--nrx-gray-hover-bg);
    --bs-btn-hover-border-color: var(--nrx-gray-90);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: var(--nrx-gray-90);
    --bs-btn-active-bg: var(--nrx-gray-hover-bg);
    --bs-btn-active-border-color: var(--nrx-gray-90);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--nrx-gray-60);
    --bs-btn-disabled-bg: var(--nrx-gray-10);
    --bs-btn-disabled-border-color: var(--nrx-gray-40);
    --bs-gradient: none;
}
body .btn-outline-secondary{
    border: 1px solid var(--nrx-gray-dark);
    color: var(--nrx-gray-dark);
}
body .btn-outline-secondary:hover, body .btn-outline-secondary:focus {
    background-color: #ffffff;
    border-color: var(--nrx-gray-darker);
    color: var(--nrx-gray-darker);
}

body .btn.btn-outline-secondary:active{ 
    background-color: #878D9626;
}

body .btn-link {
    color: var(--nrx-gray-80);
}
body .btn.btn-link:hover, body .btn.btn-link:focus, body .btn.btn-link:active {text-decoration: underline; border-color:transparent;}

body .btn-close {
    height: auto; width: auto;
    opacity: 1;
    color: var(--nrx-gray-80);
}

body .btn-close#btnCloseMessage {
    height: 1em;
    width: 1em;
}


body .modal .btn {
    padding: 8px 24px;
}
body .modal .btn-close {
    height: auto; width: auto;
    border: 1px solid var(--nrx-gray-80);
    opacity: 1;
    color: var(--nrx-gray-80);
}

body .faq-btn {
    padding: 1em; 
    text-transform: none; 
    border-color: var(--nrx-gray-light); 
    font-weight: 400; 
    width: 704px; 
    max-width: 100%; 
    justify-content: space-between;
}

.arrow-faq {
    color: var(--nrx-red); 
    width: 32px; 
    height: 32px;
}

body .btn.btn-disabled {
    background-color: #EFEFEF;
    color: #697077;
    border: none;
}

body .btn.feedback-btn {
    background-color: #FFF9F9;
}
/* END Buttons */

/* Badges */
body .badge {
    border-radius: 5px;
    padding: 0.25em 0.5em; /*4px 8px*/
    font-size: var(--nrx-font-size-sm); /* 14px*/
    font-weight: var(--nrx-font-weight);
}
/* END Badges */

/* ICONS */ 
body .btn .feather      {width:14px;height:14px;}           /* Button with icon */ 
body .icon-sm .feather  {width:12px;height:12px}            /* Small icons */
body .icon-md .feather  {width: 24px; height: 24px;}        /* Reset icon size if needed */ 
body .icon-lg .feather  {width: 32px; height: 32px; stroke-width: 1;}
body .icon-xl           {padding: 1em;}
body .icon-xl .feather  {width:40px; height: 40px; stroke-width: 1;} /* Reset icon size if needed */ 
body .icon-link .feather{height:14px;width:14px;}
body ul li .feather     {margin-left: 0.5em}


/* End ICONS */ 

/* CARDS */

body .card {
    box-shadow: none;
    border-color: var(--nrx-gray-light);
    border-radius: 6px;
    background-color: var(--bs-white);
    margin-bottom: 0px;
}

body .card .card-header,
body .card .card-footer {
    background-color: transparent;
    color: inherit;
    padding: 1em 1.5em;
}
body .card .card-header {
    padding-bottom: 0px;
    margin-top: 0.5em;
    font-weight: 700;
}
body .card .card-title{
    font-weight: 700;
    margin-top: 0;
    font-size: var(--nrx-font-size-md); /* 18px */
    margin-bottom: 1em;
} 
body .card .card-title .text-secondary {
    font-weight: var(--nrx-font-weight);
    color: var(--bs-secondary-rgb);
    padding-left: 0.5em;
}
body .card .text-end {
    display: flex; justify-content: flex-end;
}
body .card .card-body {
    background-color: transparent;
    color: inherit;
    padding: 1.5em 1.5em;
}
body .card.card-body-flush .card-body, body .card.card-header-flush .card-header, body .card.card-footer-flush .card-footer {
    padding: 0px; margin: 0;
}
body .card .card-text {line-height: 1.4em;}
body .card .card-text label {color: var(--nrx-gray-medium);font-weight: inherit; text-transform: unset; padding-right: 4px}

.my-page__card__title {
    width: 100%;
    margin-bottom: -0.7em;
}

.my-page__card__subtitle {
    width: 100%;
    font-weight: var(--nrx-font-weight-bold);
    font-size: var(--nrx-font-size);
    margin-bottom: 0.5em;
}

.my-page__card__footer {
    float: inline-end;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
}

.my-page__card__footer button {
    font-size: var(--nrx-font-size-xs);
    padding: 0.45em 0.9em;
}

.my-page__card__footer button svg {
    width: 1.5em;
    height: 1.5em;
}

.card-button:hover {
    box-shadow: 0px 3px 6px 0px rgba(30, 30, 30, 0.14);
}

/* END CARDS */

/* Profile avatar */ 
body .navbar-nav>li>a.nav-link.profile {
    padding: 0px;
    margin: 0px;
    line-height: normal;
    text-decoration: none;
}
.profile-avatar {
    user-select: none;
    text-decoration: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nrx-frost);
    color: var(--nrx-gray-dark);
    font-weight: var(--nrx-font-weight-bold);
    margin: -8.5px -8px;
}

.profile-avatar:hover{
    background-color: #9FC6E2;
}

.avatar-active {
    background-color: #9FC6E2;
}

.my-page__card__profile__contact__body .profile-avatar:hover {
    background-color: var(--nrx-frost);
}
@media (max-width: 800px) {
    .my-page__card__profile__contact__body .profile-avatar {
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    .profile-avatar {
        margin: -8px 4px;
    }
}


/* List Groups */

body .list-group-item {
    background-color: transparent;
}

/* END List Groups */

/* List Volunteer Digital Tools */

.other-services-title {
    font-weight: var(--nrx-font-weight-bold);
    margin-top: 0;
}

.volunteer-tools-description {
    font-size: var(--nrx-font-size-sm);
    margin-bottom: 0;
    padding-left: 10px;
}

.volunteer-tools-title {
    font-weight: var(--nrx-font-weight-bold);
    margin-bottom: 3px;
    margin-top: 0;
}


/* END List Volunteer Digital Tools */

/* Become a Volunteer page mobile responiveness*/

@media (max-width: 800px) {
    .bli-frivillig {
        order: 2;
    }
    .felleskap-illustration {
        order: 1;
    }
}

/* Override portal theme styling
Make last section of Become a Volunteer page fit the footer */
.last-section-container {
    margin-bottom: -48px !important; 
}

/* END Become a Volunteer page mobile responiveness*/ 

/* Accordion */

.accordion {
    --bs-accordion-btn-focus-border-color: none;
    --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%231e1e1e' fill-rule='evenodd' d='M13 13v7a1 1 0 0 1-2 0v-7H4a1 1 0 0 1 0-2h7V4a1 1 0 0 1 2 0v7h7a1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%231e1e1e' fill-rule='evenodd' d='M13 13v7a1 1 0 0 1-2 0v-7H4a1 1 0 0 1 0-2h7V4a1 1 0 0 1 2 0v7h7a1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
    transform: rotate(-45deg);
    transition: transform .5s;
}

.accordion-button:hover {
    color: var(--nrx-red);
    text-decoration: underline;
}

.accordion-item {
    border-bottom: solid 1px var(--nrx-gray-darker);
    max-width: 705px;
    --bs-accordion-btn-icon-width: 16px;
}

.accordion-button:not(.collapsed) {
    background-color: var(--nrx-white);
    color: var(--nrx-red);
    text-decoration: underline;
    box-shadow: none;
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom: solid 1px var(--nrx-gray-darker);
}

.faq-container {
    padding: 1em;
}

/* END Accordion */

/* FAQ mobile responiveness */

@media (max-width: 800px) {
    .faq-qa {
        order: 2;
    }
    .faq-illustration {
        order: 1;
        width: 100%;
    }
    .faq-container {
        min-width: 100%
    }
    .accordion-button.collapsed {
        min-width: 100%
    }
}
/* END FAQ mobile responiveness */

/* DETAILS */ 
body hr {width: 100%; border-color: var(--nrx-gray-light); opacity: 1; margin-top: 0.5em; margin-bottom: 0.5em;}
body .hr .columnBlockLayout {padding-top: 0; padding-bottom:0; margin-top: 0; margin-bottom: 0;}
ul li {line-height: 2.4;}

/* END DETAILS */

/* COOKIES BANNER */ 
#cb-cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; border-radius: 0; display: none; background-color: white;}

.cookies-buttons {
    display: flex;
}

.primary-cookies-btn {
    margin-left: 1em;
}

@media (max-width: 800px) {
    .confirm-information-footer {
        width: 100%;
    }
   body .confirm-information {
        display: block;
        width: 100%;
    }
}

@media (max-width: 800px) {
    .cookie-banner {
        flex-direction: column;
    }
    .cookies-buttons {
        flex-direction: column;
        width: 100%;
    }
    body .btn.outline-cookies-btn {
        order: 2;
        --bs-btn-border-color: none;
        --bs-btn-color: var(--nrx-gray-80);
        width: 100%;
        display: block;
        font-weight: 700;
        padding: 1em;
    }
    body .primary-cookies-btn {
        order: 1;
        width: 100%;
        display: block;
        margin-left: 0;
        font-size: 14px;
        margin-top: 40px;
        
    }
}

@media (max-width: 800px) {
    body .btn.outline-primary-mobile {
        display: block;
        width: 100%;
        --bs-btn-border-color: none;
        --bs-btn-color: var(--nrx-gray-80);
        font-weight: 700;
    }
    body .submit-btn {
        display: block;
        width: 100%; 
    }
}
/* END COOKIES BANNER */ 


/* COOKIES TOGGLE */
.cookies__analysis-toggle {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
  }
  
  .cookies__analysis-toggle-switch {
    margin: 0 !important;
    background-color: transparent !important;
    width: 3em !important;
    height: 1.55em !important;
  }
  
  .cookies__analysis-toggle-switch:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d52b1e'/%3e%3c/svg%3e") !important;
    border-color: var(--bs-btn-border-color) !important;
  }
  
  .cookies__analysis-toggle-state::after {
    content: attr(data-off);
    width: 2ch;
    overflow-x: visible;
    display: block;
    white-space: nowrap;
    font-size: smaller;
  }
  
  .cookies__analysis-toggle-switch:checked ~ .cookies__analysis-toggle-state::after {
    content: attr(data-on);
  }

  /* END COOKIES TOGGLE */


/* Activity Card */

  .activity-subtitle {
    color: var(--nrx-rust); 
    font-weight: 600;
    font-size: 14px;
  }

  .activity-card-link:link {
    text-decoration: none;
  }

  .activity-card-link {
    color: var(--nrx-gray-80);
    font-weight: 600;
  }

  .activity-card-link:hover {
    text-decoration: none !important;
  }

  .branch-name {
    color: var(--nrx-gray-medium);
  }

  /* END Activity Card */


   /* Task List Page */
  
   .my-page__card-list .card.active .card-body {
    border-left: 4px solid var(--nrx-rust);
    overflow: hidden;
    border-radius: 4px;
  }

  .card-line {
    border: none;
    border-top: 1px solid var(--nrx-gray-30);
    margin: 8px 0;
  }

  .qualificationTasksContainer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 250px;
    word-break: break-word;
    padding: 16px;
    margin: 60px 0px;
  }
  
  .qualificationTaskTitle {
    font-weight: 400;
  }
  
  .qualificationTaskName {
    font-weight: 400;
  }
  
  .card-line {
    border-top: 1px solid #ddd;
    margin: 8px 0;
  }
  
  .activeTaskIcon {
  background-color: var(--nrx-pink-light);
  border-radius: 5px;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.completedIcon {
    color: var(--signalfarger-mrk-new-light-green); width: 16px; height: 16px;
}
.activeIcon {
    color: var(--nrx-rust); width: 16px; height: 16px;
}
.completedTaskIcon {
    background-color: var(--signalfarger-mrk-new-light-green-15);
    border-radius: 5px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}
  

  .activeTask,
  .completedTask {
    display: flex;
    gap: 3px;
    align-items: center;
    font-weight: 600;
  }

  .card-space {
    margin-bottom: 2em;
  }

    /* END Task List Page */
 
    .update-profile-card {
    background-color: var(--nrx-gray-10);
    }


  /* My schedule */

.my-schedule-title {
    font-size: 1.5rem;
    margin-bottom: -1em;
}

.my-schedule-container {
    background-color: #FFFEFE;
    margin-top: -20px;
}

.activity-tag {
    font-size: var(--nrx-font-size-sm);
    color: var(--nrx-gray-dark);
}

.shift-invite {
    color: var(--nrx-red);
    font-weight: 600;
    margin-top: -0.5em;
}

.filled-unfilled-positions {
    color: var(--nrx-gray-80);
    font-weight: 600;
    margin-top: -0.5em;
}

.shift-title {
    margin-bottom: -10px;
}

.shift-type {
    background-color: var(--nrx-gray-hover-overlay); 
    padding: 3px 8px 2px 8px; 
    border-radius: 5px; 
    color: #121619; 
    font-size: 0.875em; 
    font-weight: 700;
}

.status-registered {
    background-color: #E1E9E1; padding: 0.1875em 0.5em 0.125em 0.5em; border-radius: 0.3125em; color: var(--signalfarger-mrk-new-light-green); font-size: 0.875em;
}

.status-invited {
    background-color: #FFF6D9; padding: 0.1875em 0.5em 0.125em 0.5em; border-radius: 0.3125em; color: #121619; font-size: 0.875em;
}

.status-declined {
    background-color: var(--nrx-gray-hover-overlay); padding: 0.1875em 0.5em 0.125em 0.5em; border-radius: 0.3125em; color: var(--nrx-gray-medium); font-size: 0.875em;
}

.shift-date {
    font-size: 18px;
    color: var(--nrx-gray-darker);
    line-height: normal;
}

.shift-count {
    font-size: 16px;
    color: var(--nrx-gray-90);
}

.empty-state-title {
    font-size: 16px;
}
.empty-state-description {
    font-size: 14px;
}

.empty-state {
    border-style: dashed;
    border-color: var(--nrx-gray-light);
    border-radius: 6px;
    border-width: 1px;
}

.back-to-top-button {
    font-weight: 700;
    color: var(--nrx-gray-80);
    font-size: 14px;
}

  /* Mobile view */
  @media (max-width: 767px) {
    .my-page__card-list .d-flex {
      flex-direction: column;
      
    }
    .my-page__card-list .status-registered,
    .my-page__card-list .status-declined,
    .my-page__card-list .status-invited  {
      order: -1;
      width: fit-content;
      margin-bottom: 1em;
    }

    .bottom-tags,
    .shift-address {
        display: none;
    }

    .filled-unfilled-positions,
    .shift-invite {
        margin-bottom: -0.1em;
    }
  }

  /* END My schedule */


/* Page Not Found */
.page-not-found-container {
    width: 980px;
    background-color: #FFF9F9;
    display: flex;
    height: 30em;
}

.container-error {
    padding-top: 9.5em;
}

.text-not-found-container {
    max-width: 80%;
    padding-top: 5em;
    padding-left: 5em;
}

.not-found-heading {
    font-weight: 600;
    font-size: 36px;
    margin-bottom: 15px;
}

body.white-page {
    background-color: #ffffff;
}

@media (max-width: 767px) {
    .page-not-found-container {
        height: 18em; 
    }

    .container-error {
        padding-top: 2em;
    }

    .text-not-found-container {
        margin-top: 1em;
        margin-left: 2em;
        padding: 0;
        margin-bottom: 0;
    }
    
    .not-found-heading {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .error-text {
        margin-bottom: 2em;
    }
 }


/* Page Not Found */

/* Expenses */
.min-w-fit {
  min-width: fit-content;
}

.custom-expense-list{
    background-color: white !important;
}

.custom-expense-list .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: transparent !important;
    --bs-table-accent-bg: none;
}

.custom-expense-list a {
    text-decoration: none !important;
    font-weight: 600;
}

.custom-expense-list .grid-actions {
    background-color: #FFF9F9;
}


body .btn.outline-btn {
    border: 1px solid var(--nrx-gray-dark);
}

.custom-expense-form .form-control {
    background-color: white !important;
}


.modal-body {
    background-color: white;
}


.tooltip.show {
  opacity: 1 !important; 
}

.tooltip .tooltip-inner {
  background-color: white !important;
  color: black !important;
  border: 1px solid #ccc; 
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); 
  opacity: 1 !important; 
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-color: white !important; 
  opacity: 1 !important; 
}

.content-panel.card.entitylist-filter {
    background: #FFF9F9 !important; 
    border: none !important;        
    box-shadow: none !important;    
    padding: 0 !important;         
    height: auto !important;       
    margin-top: -20px;            
    display: flex;                  
    margin-bottom: 10px !important; 
}

.entitylist-filter {
    display: flex;            
    margin-top: 0;
    padding: 0;
}

.entitylist-filter .status-title,
.entitylist-filter .dropdown-filter {
    margin-right: 10px;             
}

.custom-expense-list .input-group{
    background-color: white !important;
}

.custom-expense-list .entitylist-filter-option-group .h4 {
    margin-bottom: 0.5em;
}

/* Make the entire modal white */
.modal-content {
    background-color: #ffffff !important;  
}


.modal-body {
    background-color: #ffffff !important; 
}


.modal-header, .modal-footer {
    background-color: #ffffff !important;
}

.summary-box {
    border: 1px solid var(--nrx-gray-30);
    border-radius: 6px;
    padding: 2em;
}

[class*="ms-ContextualMenu"][class*="is-open"] {
    background-color: white !important;
}

[class*="ms-Callout-beakCurtain"] {
    background-color: white !important;
}

[class*="ms-Callout-main"] {
    background-color: white !important;
}

/* Make dropdown items white */
[class*="ms-Dropdown-title"],
[class*="ms-TextField-field"] {
    background-color: white !important;
    color: black !important; /* Ensure text remains readable */
}

/* Make button white */
[class*="ms-Button--default"] {
    background-color: white !important;
    color: black !important; /* Adjust text color */
    border: 1px solid #ccc; /* Optional: add a border for contrast */
}

/* Ensure dropdown and text field placeholder text is visible */
[class*="ms-Dropdown-titleIsPlaceHolder"] {
    color: black !important;
}

.ms-Button.ms-Button--default.ms-Button--hasMenu {
    display: none !important;
}

.table-info.form-subgrid-heading {
    display: none;
}

.empty-expenses-text{
    color: var(--nrx-gray-medium);
}

/* Restore default button appearance */
button.btn {
  border: none;
  box-shadow: none;
  color: #000; /* Default text color */
}

/* Optional: restore original background unless overwritten intentionally */
button.btn-primary {
  background-color: #d8262c; /* adjust to your original red tone */
  color: white;
  border: none;
}

/* Fix hover/active state that caused issues */
button.btn:focus,
button.btn:active,
button.btn:focus:active {
  background-color: #d8262c; /* same as base */
  color: white;
  border: none;
  outline: none;
  box-shadow: none;
}


/* Restore default link and label styling */
a,
a:hover,
a:focus {
  color: #000; /* or your desired link color */
  text-decoration: none;
}

label {
  color: #000;
}

/* Pagination */ 
body .view-pagination .pagination {justify-content: center;}
body .view-pagination .pagination .page-item {line-height: 1.5;}
body .view-pagination .pagination .page-link {text-decoration: none; color: var(--nrx-rust)} /* Remember to include the :not styling at the top */
body .view-pagination .disabled>.page-link, body .view-pagination .page-link.disabled {background-color: transparent;}

body .view-pagination .page-link.entity-pager-prev-link {
  font-size: 0; /* hide the '<' */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body .view-pagination .page-link.entity-pager-prev-link::before {
  content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
  width: 16px;
  height: 16px;
}

body .view-pagination .page-link.entity-pager-next-link{
  font-size:0;
  display:inline-flex; align-items:center; justify-content:center;
}
body .view-pagination .page-link.entity-pager-next-link::before{
  content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}
body .view-pagination .pagination>.active>a, body .view-pagination .pagination>.active>a:focus {
    background-color: var(--nrx-rust)!important; /* to override important styling from native Power Pages styling */ 
    border-color: var(--nrx-rust);
    color: var(--bs-btn-active-color);
}
body .view-pagination .pagination>.active>a:focus, body .view-pagination .pagination>.active>a:hover {
    background-color: var(--bs-btn-hover-bg)!important; /* to override important styling from native Power Pages styling */ 
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}


/* END Expenses */