:root {
    --cfds-blue: #1565c0;
    --cfds-blue-rgb: 21, 101, 192;

    --cfds-grey: #e0e3e9;
    --cfds-grey-rgb: 224, 227, 233;

    --cfds-grey-alpha: #f0f1f4;
    --cfds-grey-alpha-rgb: 240, 241, 244;

    --cfds-orange: #e65100;
    --cfds-orange-rgb: 230, 81, 0;

    --cfds-orange-alpha: #fdeee6;
    --cfds-orange-alpha-rgb: 253, 238, 230;

    --cfds-light: #fff;
    --cfds-light-rgb: 255, 255, 255;

    --cfds-dark: #212529;
    --cfds-dark-rgb: 33, 37, 41;

    --cfds-dark-alpha: #d1d4d6;
    --cfds-dark-alpha-rgb: 209, 212, 214;

    --cfds-blue-2: #0d47a1;
    --cfds-blue-2-rgb: 13, 71, 161;

    --cfds-blue-2-alpha: #c2d1e7;
    --cfds-blue-2-alpha-rgb: 194, 209, 231;

    --cfds-blue-3: #2196f3;
    --cfds-blue-3-rgb: 33, 150, 243;

    --cfds-blue-3-alpha: #bcdaf5;
    --cfds-blue-3-alpha-rgb: 188, 218, 245;

    --cfds-yellow: #ffb514;
    --cfds-yellow-rgb: 255, 181, 20;

    --cfds-yellow-alpha: #ffecc4;
    --cfds-yellow-alpha-rgb: 255, 236, 196;

    --cfds-green: #4caf50;
    --cfds-green-rgb: 76, 175, 80;

    --cfds-green-alpha: #b2eab5;
    --cfds-green-alpha-rgb: 178, 234, 181;

    --cfds-purple: #723ecc;
    --cfds-purple-rgb: 114, 62, 204;

    --cfds-purple-alpha: #d0c4eb;
    --cfds-purple-alpha-rgb: 208, 196, 235;

    --cfds-red: #de1515;
    --cfds-red-rgb: 222, 21, 21;

    --cfds-red-alpha: #f6b9b9;
    --cfds-red-alpha-rgb: 246, 185, 185;

    --gap-1: 4px;
    --gap-2: 8px;
    --gap-3: 12px;
    --gap-4: 16px;

    --rounded-0: 0px;
    --rounded-1: 4px;
}

html {
    height: 100vh;
}

body {
    font-family: 'Ubuntu', sans-serif !important;

    --header-font-size: 26px;
    --header-font-weight: bold;

    --box-border: 1px solid var(--cfds-grey);
    --box-border-radius: 0 0 8px 8px;
    --box-box-shadow: 0px 4px 16px 0px #21252919;
    --box-padding-top: 12px;
    --box-padding-right: 24px;
    --box-padding-bottom: 12px;
    --box-padding-left: 24px;
    --box-padding: var(--box-padding-top) var(--box-padding-right);
    height: 100%;
}

.body {
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

*[role=button] {
    cursor: pointer;
}

/* CUSTOM INPUT FORM */

.s-md-form {
    margin-top: 10px;
    margin-bottom: 0;
    display: flex;
}

.s-md-form input.form-control {
    height: 18px;
    margin-bottom: 0;
    padding: 7px 5px !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 0 rgba(var(--cfds-dark-rgb), 0.25) !important
}

.s-md-form label {
    font-family: Ubuntu;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: normal;
    letter-spacing: normal;
    color: rgba(var(--cfds-dark-rgb), 0.8);
    transform: translateY(7px) translateX(5px);
}

.s-md-form label.active {
    font-style: normal;
    color: rgba(var(--cfds-dark-rgb), 0.5);
    transform: translateY(-16px) translateX(calc(5px - 5px * 0.25)) scale(0.75);
}

.md-form input:not([type]):focus:not([readonly]), .md-form input[type="text"]:not(.browser-default):focus:not([readonly]), .md-form input[type="password"]:not(.browser-default):focus:not([readonly]), .md-form input[type="email"]:not(.browser-default):focus:not([readonly]), .md-form input[type="url"]:not(.browser-default):focus:not([readonly]), .md-form input[type="time"]:not(.browser-default):focus:not([readonly]), .md-form input[type="date"]:not(.browser-default):focus:not([readonly]), .md-form input[type="datetime"]:not(.browser-default):focus:not([readonly]), .md-form input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), .md-form input[type="tel"]:not(.browser-default):focus:not([readonly]), .md-form input[type="number"]:not(.browser-default):focus:not([readonly]), .md-form input[type="search"]:not(.browser-default):focus:not([readonly]), .md-form input[type="phone"]:not(.browser-default):focus:not([readonly]), .md-form input[type="search-md"]:focus:not([readonly]), .md-form textarea.md-textarea:focus:not([readonly]) {
    box-shadow: 0 1px 0 0 var(--cfds-blue-3) !important
}

.md-form input:not([type]):focus:not([readonly])+label, .md-form input[type="text"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="password"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="email"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="url"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="time"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="date"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="datetime"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="datetime-local"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="tel"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="number"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="search"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="phone"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="search-md"]:focus:not([readonly])+label, .md-form textarea.md-textarea:focus:not([readonly])+label {
    color: var(--cfds-blue-3);
}

.s-md-form.dark-mode .form-control:not(.s-text-dark) {
    color: var(--cfds-light) !important;
    box-shadow: 0 1px 0 0 rgba(var(--cfds-light-rgb), 0.5) !important
}

.s-md-form.s-md-form-icon input.form-control {
    padding-right: calc(var(--number-of-icon, 1) * 18px + ((var(--number-of-icon, 1) - 1) * 2px) + 5px) !important;
}

.s-md-form.s-md-form-icon .s-form-icon {
    display: flex;
    justify-content: end;
    gap: 2px;

    width: calc(var(--number-of-icon, 1) * 18px + ((var(--number-of-icon, 1) - 1) * 2px) + 5px);
    height: 18px;

    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    z-index: 5;
}

.s-md-form.s-md-form-icon .s-form-icon .s-icon {
    font-size: 18px;

    width: 18px;
    height: 18px;
    cursor: pointer;
}

.s-md-form .select-wrapper {
    display: flex;
}

.s-md-form .select-wrapper span.caret {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-size: .63rem;
    color: #495057;
}

/* CUSTOM INPUT SEARCH */

.s-form-search .s-search-icon {
    visibility: hidden;
}

.s-form-search:hover .s-search-icon,
.s-form-search:focus-within .s-search-icon {
    visibility: visible;
}

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

/* CUSTOM CHECKBOX INPUT */

.s-form-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 24px;
}

.s-form-check .s-form-label {
    font-size: 16px;
    margin: 0;
    padding-left: 28px !important;
    cursor: pointer;
    text-wrap: wrap;
    min-height: 24px !important;
    height: unset !important;
}

.s-form-check label.s-form-label:before {
    position: absolute;
    left: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    mask-image: url("Qe3pdwSuc0FC8WJSaenFNoh0TFXkqjTe7hxErGLIyL7.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: currentColor !important;
    font-size: 24px;
    border: none !important;

    cursor: pointer;
}

.s-form-check input[type=checkbox]:checked ~ label.s-form-label:before {
    mask-image: url("BBGb0vWbTRyVB9aoNjmLMPWPHBctXDjkYjrh4yHEPdI.svg");
    transform: none;
    left: 0;
    top: unset;
    width: 1em;
    height: 1em;
}

.s-form-check input[type=checkbox]:disabled ~ label.s-form-label,
.s-form-check input[type=checkbox]:disabled ~ label.s-form-label:before {
    color: rgba(var(--cfds-dark-rgb), 0.5);
    border: none;
    cursor: not-allowed !important;
}

/* CHECKBOX ORANGE COLOR STATE */

.s-form-check.s-orange {
    color: var(--cfds-orange);
}

.s-form-check.s-orange input[type=checkbox]:disabled ~ label.s-form-label,
.s-form-check.s-orange input[type=checkbox]:disabled ~ label.s-form-label:before {
    color: rgba(var(--cfds-orange-rgb), 0.5);
}

/* CUSTOM BUTTON */

.s-btn {
    height: 42px;
    border-radius: 4px;
    box-shadow: none;
    border: none;
    align-items: center;
    gap: var(--gap-2);
    justify-content: center;
    padding: 0 16px;
    margin: 0;
    text-wrap: nowrap;

    font-family: Ubuntu;
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-transform: unset;
}

.s-btn:not(.d-none) {
    display: flex !important;
}

.s-btn.s-state-2 {
    border-radius: 32px;
}

.s-btn.s-circle {
    padding: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.s-btn.s-icon-only {
    padding: 0;
    width: 42px;
    font-size: 18px !important;
}

.s-btn:hover {
    box-shadow: none;
}

.s-btn-blue {
    background-color: var(--cfds-blue);
    color: var(--cfds-light);
}

.s-btn-blue:hover {
    color: var(--cfds-light);
}

.s-btn-orange {
    background-color: var(--cfds-orange);
    color: var(--cfds-light);
}

.s-btn-orange:hover {
    color: var(--cfds-light);
}

.s-btn-green {
    background-color: var(--cfds-green);
    color: var(--cfds-light);
}

.s-btn-green:hover {
    color: var(--cfds-light);
}

.s-btn-dark {
    background-color: var(--cfds-dark);
    color: var(--cfds-light);
}

.s-btn-dark:hover {
    color: var(--cfds-light);
}

.s-btn-outline {
    --box-shadow: inset 0 0 0 2px var(--cfds-blue);

    background-color: unset;
    box-shadow: var(--box-shadow);
}

.s-btn-outline:hover, .s-btn-outline:focus {
    box-shadow: var(--box-shadow);
}

.s-btn-outline.s-dark {
    --box-shadow: inset 0 0 0 2px var(--cfds-dark);
}

.s-btn-outline.s-dark-20-pct {
    --box-shadow: inset 0 0 0 2px rgba(var(--cfds-dark-rgb), 0.2);
}

.s-btn-outline.s-orange {
    --box-shadow: inset 0 0 0 2px var(--cfds-orange);
}

.s-btn-outline.s-grey {
    --box-shadow: inset 0 0 0 2px var(--cfds-grey);
}

/* CUSTOM CHIPS */

.s-chip {
    --s-chip-height: 31px;
    --s-chip-padding: 6px 11px 7px 14px;
    --s-chip-radius: 16px;
    --s-chip-bg: rgba(var(--cfds-dark-rgb), 0.2);
    --s-font-size: 16px;
    --s-font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;

    height: var(--s-chip-height);
    width: fit-content;
    padding: var(--s-chip-padding);
    border-radius:  var(--s-chip-radius);
    background-color:  var(--s-chip-bg);

    font-size:  var(--s-font-size);
    font-weight:  var(--s-font-weight);
}

.s-chip.s-small {
    --s-chip-height: 24px;
    --s-chip-padding: 3px 11px 3px 14px;
    --s-font-size: 14px;
    line-height: 18px;
}

/* CUSTOM TABLE */

table.s-table {
    background-color: var(--cfds-light);
    margin-bottom: 0;
}

table.s-table > thead {
    height: 60px;
    background-color: var(--cfds-grey);
}

table.s-table > thead > tr {
}

table.s-table > thead > tr > th {
    min-height: 60px;
    padding: 8px 16px;
    vertical-align: middle;
}

table.s-table > thead > tr > th,
table.s-table > thead > tr > th * {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: var(--cfds-dark) !important;
}

table.s-table > thead > tr > th *:hover {
    font-weight: 500;
}

table.s-table > :is(tbody,tfoot) > tr > td {
    padding: 18px 16px;
    border-top: none;
    box-shadow: inset 0 -2px 0 0 var(--cfds-grey);
}

table.s-table > :is(tbody,tfoot) > tr > td:before {
    content: "";
    visibility: hidden;
    width: 0;
}

table.s-table > :is(tbody,tfoot) > tr > td,
table.s-table > :is(tbody,tfoot) > tr > td *:not(.svg-icon,.s-checkbox-label,.s-chip) {
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    color: rgba(var(--cfds-dark-rgb), 1);
}

table.s-table > :is(tbody,tfoot) > tr > td > i.svg-icon,
table.s-table > :is(tbody,tfoot) > tr > td > div > i.svg-icon {
    font-size: 24px;
}

table.s-table > tbody > tr[disabled] {
    background-color: rgba(var(--cfds-grey-alpha-rgb), 1);
}

table.s-table > tbody > tr > td[editable] {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* ----- TABLE ROW OOS STATE ----- */
table.s-table > tbody > tr[oos] {
    background-color: rgba(var(--cfds-orange-alpha-rgb), 1);
}

/* ----- TABLE ROW HOVER STATE ----- */

table.s-table > tbody > tr:hover {
    cursor: pointer;
    background-color: rgba(var(--cfds-yellow-alpha-rgb), 1);
}

/* ----- TABLE ROW SELECTED STATE ----- */
table.s-table > :is(tbody,tfoot) > tr[selected] {
    background-color: rgba(var(--cfds-dark-rgb), 1);
}

table.s-table > :is(tbody,tfoot) > tr[selected] > td,
table.s-table > :is(tbody,tfoot) > tr[selected] > td * {
    color: rgba(var(--cfds-light-rgb), 1) !important;
}

/* CUSTOM PAGINATION */
.s-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s-navigation .s-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.s-navigation .s-pagination .s-page-item {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: solid 1px rgba(var(--cfds-dark-rgb), 0.3);

    font-family: Ubuntu;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-navigation .s-pagination .s-page-item[onclick] {
    cursor: pointer;
}

.s-navigation .s-pagination .s-page-item:not([onclick]) {
    cursor: default;
}

.s-navigation .s-pagination .s-page-item.active {
    background-color: var(--cfds-dark);
    color: var(--cfds-light);
}

.s-navigation .s-pagination .s-page-item[onclick]:not(.active):hover {
    background-color: rgba(var(--cfds-light-rgb), 1);
}

.s-navigation .s-pagination .s-page-item .s-page-link {
    width: 100%;
    height: 100%;
    color: var(--cfds-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-navigation .s-dropdown {
    height: 42px;
}

.s-navigation .s-dropdown > a {
    height: 42px;
    border-radius: 4px;
    border: solid 1px var(--cfds-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: transparent;
    padding: 0 16px;

    font-size: 16px;
    font-weight: bold;
    color: var(--cfds-dark);
}

.s-navigation .s-dropdown .dropdown-menu {
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--cfds-light);
}

.s-navigation .s-dropdown .dropdown-menu .dropdown-item {
    height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    color: var(--cfds-dark);
}

.s-navigation .s-dropdown .dropdown-menu .dropdown-item:hover {
    box-shadow: unset;
    border-radius: unset;
    background-color: var(--cfds-grey-alpha) !important;
    color: var(--cfds-dark) !important;
}

.s-navigation .s-dropdown .dropdown-menu .dropdown-item:nth-child(1) {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.s-navigation .s-dropdown .dropdown-menu .dropdown-item:nth-last-child(1) {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* CUSTOM POPOVER */
.s-popover {

}

.s-popover[x-placement=top] > .arrow:before,
.s-popover[x-placement=top] > .arrow:after {
    border-top-color: var(--cfds-dark);
}

.s-popover[x-placement=bottom] > .arrow:before,
.s-popover[x-placement=bottom] > .arrow:after {
    border-bottom-color: var(--cfds-dark);
}

.s-popover > .popover-body {
    padding: 16px 20px;
    background-color: var(--cfds-dark);
}

.s-popover > .popover-body p {
    margin-bottom: 0;
    color: var(--cfds-light) !important;
}

/* CUSTOM FONT SIZE */

.s-h1 {
    font-family: Ubuntu;
    font-size: 44px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-h2 {
    font-family: Ubuntu;
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-h3 {
    font-family: Ubuntu;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 42px;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-sub-h {
    font-family: Ubuntu;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-p-bold {
    font-family: Ubuntu;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-p-medium {
    font-family: Ubuntu;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-p-italic {
    font-family: Ubuntu;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: normal;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-p-regular {
    font-family: Ubuntu;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-p-regular-sml {
    font-family: Ubuntu;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

/* CUSTOM FONT STYLE */

.s-fw-bold {
    font-weight: bold !important;
}

/* CUSTOM BACKGROUND COLOR */

.s-bg-blue {
    background-color: var(--cfds-blue);
}

.s-bg-purple-alpha {
    background-color: var(--cfds-purple-alpha);
}

.s-bg-yellow {
    background-color: var(--cfds-yellow);
}

.s-bg-yellow-alpha {
    background-color: var(--cfds-yellow-alpha);
}

.s-bg-blue-2-alpha {
    background-color: var(--cfds-blue-2-alpha);
}

.s-bg-blue-3 {
    background-color: var(--cfds-blue-3);
}

.s-bg-grey {
    background-color: var(--cfds-grey);
}

.s-bg-grey-50-pct {
    background-color:rgba(var(--cfds-grey-rgb), 0.5);
}

.s-bg-dark {
    background-color: rgba(var(--cfds-dark-rgb), 1);
}

.s-bg-dark-25-pct {
    background-color: rgba(var(--cfds-dark-rgb), 0.25);
}

.s-bg-orange {
    background-color: rgba(var(--cfds-orange-rgb), 1);
}

.s-bg-orange-alpha {
    background-color: var(--cfds-orange-alpha);
}

.s-bg-yellow {
    background-color: rgba(var(--cfds-yellow-rgb), 1);
}

.s-bg-light {
    background-color:rgba(var(--cfds-light-rgb), 1);
}

.s-bg-light-50-pct {
    background-color:rgba(var(--cfds-light-rgb), 0.5);
}

/* CUSTOM TEXT COLOR */

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

.s-text-dark-important {
    color: var(--cfds-dark) !important;
}

.s-text-dark-50-pct {
    color: rgba(var(--cfds-dark-rgb), 0.5) !important;
}

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

.s-text-light {
    color: var(--cfds-light);
}

.s-text-light-50-pct {
    color: rgba(var(--cfds-light-rgb), 0.5);
}

.s-text-orange {
    color: var(--cfds-orange) !important;
}

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

.s-text-blue-2 {
    color: var(--cfds-blue-2) !important;
}

.s-text-blue-3 {
    color: var(--cfds-blue-3) !important;
}

/* CUSTOM SPACING */

.s-gap-1 {
    gap: var(--gap-1);
}

.s-gap-2 {
    gap: var(--gap-2);
}

.s-gap-3 {
    gap: var(--gap-3);
}

.s-gap-4 {
    gap: var(--gap-4);
}

.s-ps-1 {
    padding-left: var(--gap-1);
}

.s-ps-2 {
    padding-left: var(--gap-2);
}

.s-ps-3 {
    padding-left: var(--gap-3);
}

.s-ps-4 {
    padding-left: var(--gap-4);
}

/* CUSTOM ROUNDED */

.s-rounded-0 {
    border-radius: var(--rounded-0);
}

.s-rounded-1 {
    border-radius: var(--rounded-1);
}

/* Custom List View Layout */

.s-list-view {
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}

.s-list-view .s-list-title {
    display: flex;
    gap: 22px;
    align-items: center;
    margin-bottom: 0;

    font-family: Ubuntu;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 42px;
    letter-spacing: normal;
    color: var(--cfds-dark);
}

.s-report-title {
    width: 100%;
    height: 60px;
    padding: 0 13px;
    background-color: var(--cfds-grey);

    display: flex;
    align-items: center;

    font-size: 26px;
    font-weight: bold;
    color: var(--cfds-dark);
}

.s-report-items {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 12px;
    padding: 12px 0;
}

/* Custom Card on Report page */

.s-accordion {
    width: 455px;
}

.s-accordion .s-card {

}

.s-accordion .s-card .s-card-header {
    --s-card-background: var(--cfds-yellow-alpha);
    --s-card-marker: var(--cfds-yellow);

    position: relative;

    min-height: 89px;
    padding: 10px 14px 10px 43px;
    background-color: var(--s-card-background);
    color: var(--cfds-dark);
    border-top: solid 1px var(--cfds-grey);
    border-left: solid 1px var(--cfds-grey);
    border-right: solid 1px var(--cfds-grey);
}

.s-accordion .s-card .s-card-header.s-report-orange {
    --s-card-background: var(--cfds-orange-alpha);
    --s-card-marker: var(--cfds-orange);
}

.s-accordion .s-card .s-card-header.s-report-blue-2 {
    --s-card-background: var(--cfds-blue-2-alpha);
    --s-card-marker: var(--cfds-blue-2);
}

.s-accordion .s-card .s-card-header.s-report-purple {
    --s-card-background: var(--cfds-purple-alpha);
    --s-card-marker: var(--cfds-purple);
}

.s-accordion .s-card .s-card-header.s-report-blue-3 {
    --s-card-background: var(--cfds-blue-3-alpha);
    --s-card-marker: var(--cfds-blue-3);
}

.s-accordion .s-card .s-card-header.s-report-dark {
    --s-card-background: var(--cfds-dark-alpha);
    --s-card-marker: var(--cfds-dark);
}

.s-accordion .s-card .s-card-header:before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 100%;
    background-color: var(--s-card-marker);
}

.s-accordion .s-card .s-card-body {
    padding: 0;
}

.s-accordion .s-card .s-card-body:not(.show) {
    display: unset;
    height: 0;
    border-bottom: solid 1px var(--cfds-grey);
    padding: 0;
    overflow: hidden;
}

.s-accordion .s-card .s-card-body .s-report-form {

}

.s-accordion .s-card .s-card-body .s-report-form .s-form-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.s-accordion .s-card .s-card-body .s-report-form .s-form-actions {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 0 16px;
    background-color: var(--cfds-grey);
    gap: 9px;
}

/* ------------------------------------------------------------------------------------------------------------ */

hr.hr-style {
    margin-top: 0 !important;
    margin-bottom: 0;
}

.md-form:not(.s-md-form) {
    display: flex;
    margin-bottom: 0 !important;
    margin-top: 28px
}

.md-form:not(.s-md-form) .mdb-select {
    width: 100%;
    display: flex;
}

.md-form:not(.s-md-form) .form-control {
    padding-top: 6px !important;
    padding-left: 8px !important;
    padding-bottom: 6px !important;

    min-height: 21px;
    height: 21px;

    line-height: 21px;
    font-size: 16px;

    margin-bottom: 0;
}

.md-form-style {
    line-height: 21px;
    margin-top: 1.5rem;
    padding-left: 8px !important;
    padding-top: 6px;
    padding-bottom: 6px;
}

.md-form-style a {
    display: block;
    height: 21px;
    line-height: 1.44;
    padding-top: 0;
    font-size: 16px;
}

.md-form:not(.s-md-form) .form-link {
    line-height: 21px;
    padding-top: 6px;
    font-size: 16px;
    padding-left: 8px;
    padding-bottom: 6px;
}

/*.md-form:not(.s-md-form) label {*/
/*    padding-left: 8px !important;*/
/*}*/

/*.md-form:not(.s-md-form) label.active {*/
/*    transform: translateY(-16px) scale(0.8) !important;*/
/*    padding-left: 10px !important;*/
/*}*/

/*.md-form:not(.s-md-form) .form-link {*/
/*    padding-left: 8px !important;*/
/*}*/

.md-form.mdb-select:not(.s-md-form) input.form-control {
    margin-bottom: 0;
}

/*.md-form:not(.s-md-form) .select-wrapper > label.active {*/
/*    font-size: 1rem !important;*/
/*    transform: translateY(-16px) scale(0.8) !important;*/
/*    padding-left: 10px !important;*/
/*}*/

.md-form:not(.s-md-form) .icon-left {
    position: absolute;
    padding-left: 7px;
    height: 21px;
    align-content: center;
    top: 50%;
    transform: translateY(-50%);
}

.md-form:not(.s-md-form) .icon-left {
    position: absolute;
    padding-left: 7px;
    height: 21px;
    align-content: center;
    top: 50%;
    transform: translateY(-50%);
}

.md-form:not(.s-md-form) .icon-right {
    position: absolute;
    align-content: center;
    top: 50% !important;
    transform: translateY(-50%);
}

.md-form:not(.s-md-form) .select-wrapper span.caret {
    position: absolute;
    align-content: center;
    top: 50% !important;
    transform: translateY(-50%);
}

.select-wrapper input.select-dropdown {
    height: 21px;
    padding-bottom: 6px !important;
    font-size: 16px;
}

.md-form:not(.s-md-form) label,
.md-form:not(.s-md-form).select-wrapper + label {
    font-size: 16px;
    height: 21px;
    transform: translateY(5px);
    bottom: 0;
    top: 0;
    margin-bottom: 0;
    left: 0;
    padding-left: 8px !important;
}

.md-form:not(.s-md-form) label.active,
.md-form:not(.s-md-form).select-wrapper + label.active {
    font-size: 16px !important;
    transform: translateY(-18px) scale(calc(12/16)) !important;
    padding-left: 10px !important;
    top: 0;
}

.icon-padding {
    padding-right: 1.5rem !important;
}

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

.gap-4 {
    gap: 1.5rem;
}

.gap-3 {
    gap: 1rem;
}

.gap-2 {
    gap: 0.5rem;
}

.box-padding {
    padding: var(--box-padding-top) var(--box-padding-right) var(--box-padding-bottom) var(--box-padding-left);
}

:is(.box-padding, .box-padding-top, .box-padding-y) {
    padding-top: var(--box-padding-top);
}

:is(.box-padding, .box-padding-right, .box-padding-x) {
    padding-right: var(--box-padding-right);
}

:is(.box-padding, .box-padding-bottom, .box-padding-y) {
    padding-bottom: var(--box-padding-bottom);
}

:is(.box-padding, .box-padding-left, .box-padding-x) {
    padding-left: var(--box-padding-left);
}

.bg-page {
    background-color: rgba(var(--cfds-grey-rgb), 0.5)
}

.bg-cfds-grey {
    background: var(--cfds-grey);
}

.row-highlight {
    background-color: rgba(var(--cfds-yellow-rgb), 0.5);
}

.vertical-line {
    height: 8px;
    background-color: black;
}

.h-fit-content {
    height: fit-content;
}

.w-fit-content {
    width: fit-content;
}

.d-grid {
    display: grid;
}

.placeholder-style::placeholder {
    font-style: italic;
    color: var(--cfds-dark);
}

.dropdown-content {
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    min-width: 200px;
}

.dropdown-content li {
    padding: 12px 20px;
}

.dropdown-content li > a, .dropdown-content li > span {
    color: var(--cfds-dark);
    padding: 0;
    display: flex;
    line-height: 24px;
    font-size: 16px;
}

.dropdown-content.multiple-select-dropdown li span input[type=checkbox],
.dropdown-content.multiple-select-dropdown li.select-toggle-all span input[type=checkbox] {
    display: none;
}

.dropdown-content.multiple-select-dropdown li.select-toggle-all span label {
    transform: unset;
    font-size: 16px;
    margin: 0;
    padding: 0 0 0 35px !important;
    cursor: pointer;
    text-wrap: nowrap;
    height: 24px !important;
}

.dropdown-content.multiple-select-dropdown li > span > label {
    transform: unset;
    padding-left: 35px !important;
    height: 24px !important;
}

.dropdown-content.multiple-select-dropdown li.select-toggle-all label:before,
.dropdown-content.multiple-select-dropdown li > span > label:before {
    position: absolute;
    top: unset !important;
    left: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin: 0 !important;
    mask-image: url("Qe3pdwSuc0FC8WJSaenFNoh0TFXkqjTe7hxErGLIyL7.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: currentColor !important;
    font-size: 24px;
    border: none !important;
    transform: unset !important;

    cursor: pointer;
    color: var(--cfds-dark);
}

.dropdown-content.multiple-select-dropdown li.select-toggle-all span input[type=checkbox]:checked + label:before,
.dropdown-content.multiple-select-dropdown li span input[type=checkbox]:checked + label:before {
    mask-image: url("BBGb0vWbTRyVB9aoNjmLMPWPHBctXDjkYjrh4yHEPdI.svg");
}

.dot-style {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(var(--cfds-dark-rgb), 0.2);
}

.btn-circle, .btn-circle:hover {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    height: 42px;
    width: 42px;
    box-shadow: unset;
}

.standard-height {
    min-height: 42px;
}

.btn {
    font-size: 16px;
}

.md-accordion .card .card-body {
    color: var(--cfds-dark);
}

.tab-content.tab-content-style {
    background-color: transparent;
}

.s-btn.s-square {
    padding: 0;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}

.min-h-0 {
    min-height: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.ui-widget.ui-widget-content {
    z-index: 1500;
}