/* using vars to allow changing the values easily. If just the values of the vars change then everything should remain in step, especially if the changes are in client specific css files like this one so merging just works...*/
body, .app-content *:not(i):not(.fa):not(.rz-icon) {
    font-family: 'Inter', sans-serif !important;
}

:root {
    --main-colour1: #FFFFFF !important;
    --main-colour2: #888 !important;
    --main-colour3: rgba(153, 153, 153, 1) !important;
    --main-colour4: #FFFFFF !important;
    --background-colour: rgb(255, 255, 255) !important;
    --main-text: white !important;
    --text-colour: #343434 !important;
    --mandatory-tag-colour: rgb(177, 221, 140) !important;
    --mandatory-tag-text-colour: rgb(255, 255, 255) !important;
    --tag-colour: #C4C4C4 !important;
    --tag-text-colour: #000 !important;
    --tag-un-approved-colour: #808080;
    --tag-un-approved-text-colour: #FFF;
    --tag-un-approved-border: dashed 1px #404040;
    --rz-menu-item-hover-color: var(--main-colour2) !important;
    --loading-logo-width: 300 !important;


    /*NEW VARIABLES FOR SOLUTION LAB RAW HTML*/
    --primary: rgba(0, 163, 224, 1);
    --secondary: rgba(132, 189, 0, 1);
    --tertiary: rgba(255, 200, 70, 1);
    --dark: rgba(95, 99, 105, 1);
    --deepdark: rgba(50, 50, 50, 1);
    --pressed: rgba(0, 163, 224, 1);
    --dark-grey: rgba(192, 192, 192, 1);
    --middle-grey: rgba(218, 218, 218, 1);
    --light-grey: rgba(218, 218, 218, 1);
    --digiworkz-dark-blue: rgba(4, 96, 142, 1);
    --digiworkz-bright-blue: rgba(43, 180, 249, 1);
    --neutralwhite: rgba(255, 255, 255, 1);
    --heading-sm-bold-font-family: "Inter", Helvetica;
    --heading-sm-bold-font-weight: 700;
    --heading-sm-bold-font-size: 25px;
    --heading-sm-bold-letter-spacing: 0px;
    --heading-sm-bold-line-height: 120.00000476837158%;
    --heading-sm-bold-font-style: normal;
    --heading-sm-semi-bold-font-family: "Inter", Helvetica;
    --heading-sm-semi-bold-font-weight: 600;
    --heading-sm-semi-bold-font-size: 25px;
    --heading-sm-semi-bold-letter-spacing: 0px;
    --heading-sm-semi-bold-line-height: 120.00000476837158%;
    --heading-sm-semi-bold-font-style: normal;
    --heading-sm-midium-font-family: "Inter", Helvetica;
    --heading-sm-midium-font-weight: 500;
    --heading-sm-midium-font-size: 25px;
    --heading-sm-midium-letter-spacing: 0px;
    --heading-sm-midium-line-height: 120.00000476837158%;
    --heading-sm-midium-font-style: normal;
    --heading-sm-regular-font-family: "Inter", Helvetica;
    --heading-sm-regular-font-weight: 400;
    --heading-sm-regular-font-size: 25px;
    --heading-sm-regular-letter-spacing: 0px;
    --heading-sm-regular-line-height: 120.00000476837158%;
    --heading-sm-regular-font-style: normal;
    --heading-md-bold-font-family: "Inter", Helvetica;
    --heading-md-bold-font-weight: 700;
    --heading-md-bold-font-size: 31px;
    --heading-md-bold-letter-spacing: 0px;
    --heading-md-bold-line-height: 120.00000476837158%;
    --heading-md-bold-font-style: normal;
    --heading-md-semi-bold-font-family: "Inter", Helvetica;
    --heading-md-semi-bold-font-weight: 600;
    --heading-md-semi-bold-font-size: 31px;
    --heading-md-semi-bold-letter-spacing: 0px;
    --heading-md-semi-bold-line-height: 120.00000476837158%;
    --heading-md-semi-bold-font-style: normal;
    --heading-md-medium-font-family: "Inter", Helvetica;
    --heading-md-medium-font-weight: 500;
    --heading-md-medium-font-size: 31px;
    --heading-md-medium-letter-spacing: 0px;
    --heading-md-medium-line-height: 120.00000476837158%;
    --heading-md-medium-font-style: normal;
    --heading-md-regular-font-family: "Inter", Helvetica;
    --heading-md-regular-font-weight: 400;
    --heading-md-regular-font-size: 31px;
    --heading-md-regular-letter-spacing: 0px;
    --heading-md-regular-line-height: 120.00000476837158%;
    --heading-md-regular-font-style: normal;
    --heading-lg-regular-font-family: "Inter", Helvetica;
    --heading-lg-regular-font-weight: 400;
    --heading-lg-regular-font-size: 39px;
    --heading-lg-regular-letter-spacing: 0px;
    --heading-lg-regular-line-height: 120.00000476837158%;
    --heading-lg-regular-font-style: normal;
    --heading-lg-medium-font-family: "Inter", Helvetica;
    --heading-lg-medium-font-weight: 500;
    --heading-lg-medium-font-size: 39px;
    --heading-lg-medium-letter-spacing: 0px;
    --heading-lg-medium-line-height: 120.00000476837158%;
    --heading-lg-medium-font-style: normal;
    --heading-lg-semi-bold-font-family: "Inter", Helvetica;
    --heading-lg-semi-bold-font-weight: 600;
    --heading-lg-semi-bold-font-size: 39px;
    --heading-lg-semi-bold-letter-spacing: 0px;
    --heading-lg-semi-bold-line-height: 120.00000476837158%;
    --heading-lg-semi-bold-font-style: normal;
    --heading-lg-bold-font-family: "Inter", Helvetica;
    --heading-lg-bold-font-weight: 700;
    --heading-lg-bold-font-size: 39px;
    --heading-lg-bold-letter-spacing: 0px;
    --heading-lg-bold-line-height: 120.00000476837158%;
    --heading-lg-bold-font-style: normal;
    --text-md-regular-font-family: "Inter", Helvetica;
    --text-md-regular-font-weight: 400;
    --text-md-regular-font-size: 13px;
    --text-md-regular-letter-spacing: 0px;
    --text-md-regular-line-height: 120.00000476837158%;
    --text-md-regular-font-style: normal;
    --text-md-medium-font-family: "Inter", Helvetica;
    --text-md-medium-font-weight: 500;
    --text-md-medium-font-size: 13px;
    --text-md-medium-letter-spacing: 0px;
    --text-md-medium-line-height: 120.00000476837158%;
    --text-md-medium-font-style: normal;
    --text-md-semi-bold-font-family: "Inter", Helvetica;
    --text-md-semi-bold-font-weight: 600;
    --text-md-semi-bold-font-size: 13px;
    --text-md-semi-bold-letter-spacing: 0px;
    --text-md-semi-bold-line-height: 120.00000476837158%;
    --text-md-semi-bold-font-style: normal;
    --text-md-bold-font-family: "Inter", Helvetica;
    --text-md-bold-font-weight: 700;
    --text-md-bold-font-size: 13px;
    --text-md-bold-letter-spacing: 0px;
    --text-md-bold-line-height: 120.00000476837158%;
    --text-md-bold-font-style: normal;
    --text-lg-regular-font-family: "Inter", Helvetica;
    --text-lg-regular-font-weight: 400;
    --text-lg-regular-font-size: 16px;
    --text-lg-regular-letter-spacing: 0px;
    --text-lg-regular-line-height: 120.00000476837158%;
    --text-lg-regular-font-style: normal;
    --text-lg-medium-font-family: "Inter", Helvetica;
    --text-lg-medium-font-weight: 500;
    --text-lg-medium-font-size: 16px;
    --text-lg-medium-letter-spacing: 0px;
    --text-lg-medium-line-height: 120.00000476837158%;
    --text-lg-medium-font-style: normal;
    --text-lg-semi-bold-font-family: "Inter", Helvetica;
    --text-lg-semi-bold-font-weight: 600;
    --text-lg-semi-bold-font-size: 16px;
    --text-lg-semi-bold-letter-spacing: 0px;
    --text-lg-semi-bold-line-height: 120.00000476837158%;
    --text-lg-semi-bold-font-style: normal;
    --text-lg-bold-font-family: "Inter", Helvetica;
    --text-lg-bold-font-weight: 700;
    --text-lg-bold-font-size: 16px;
    --text-lg-bold-letter-spacing: 0px;
    --text-lg-bold-line-height: 120.00000476837158%;
    --text-lg-bold-font-style: normal;
    --text-sm-regular-font-family: "Inter", Helvetica;
    --text-sm-regular-font-weight: 400;
    --text-sm-regular-font-size: 10px;
    --text-sm-regular-letter-spacing: 0px;
    --text-sm-regular-line-height: 120.00000476837158%;
    --text-sm-regular-font-style: normal;
    --text-sm-medium-font-family: "Inter", Helvetica;
    --text-sm-medium-font-weight: 500;
    --text-sm-medium-font-size: 10px;
    --text-sm-medium-letter-spacing: 0px;
    --text-sm-medium-line-height: 120.00000476837158%;
    --text-sm-medium-font-style: normal;
    --text-sm-semi-bold-font-family: "Inter", Helvetica;
    --text-sm-semi-bold-font-weight: 600;
    --text-sm-semi-bold-font-size: 10px;
    --text-sm-semi-bold-letter-spacing: 0px;
    --text-sm-semi-bold-line-height: 120.00000476837158%;
    --text-sm-semi-bold-font-style: normal;
    --text-sm-bold-font-family: "Inter", Helvetica;
    --text-sm-bold-font-weight: 700;
    --text-sm-bold-font-size: 10px;
    --text-sm-bold-letter-spacing: 0px;
    --text-sm-bold-line-height: 120.00000476837158%;
    --text-sm-bold-font-style: normal;
    --button-small-font-family: "Poppins", Helvetica;
    --button-small-font-weight: 600;
    --button-small-font-size: 12px;
    --button-small-letter-spacing: 0.20000000298023224px;
    --button-small-line-height: 16px;
    --button-small-font-style: normal;
}

.page-header-text {
    color: var(--text-colour);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-colour);
}

.loop-item-tag {
    background-color: var(--main-colour2);
    color: var(--main-text);
}

.loop-item-hashtag {
    background-color: var(--tag-colour);
    color: var(--tag-text-colour);
}

.tagify {
    --tag-text-color: var(--main-text);
    --tag-bg: var(--main-colour2);
    --tag-hover: var(--main-colour3);
    --tag-remove-bg: var(--main-colour3);
    --tag-remove-btn-color: var(--main-text);
}


a {
    color: var(--text-colour);
}

    a:hover {
        color: var(--main-colour3);
    }

html {
    color: var(--text-colour);
}

.navbar-nav .nav-item .nav-link, .nav-link-text {
    color: var(--main-text) !important;
    margin: 0px 20px;
    cursor: pointer;
}

    .navbar-nav .nav-item .nav-link.active {
        color: var(--main-colour2) !important;
    }

.navbar-vertical .navbar-collapse, div#navbarVerticalCollapse {
    background-color: var(--main-colour1) !important;
}

.dropdown-indicator:after {
    border-color: var(--main-text);
}

.navbar-vertical .navbar-nav .nav-link:hover.dropdown-indicator:after, .navbar-vertical .navbar-nav .nav-link:focus.dropdown-indicator:after {
    border-color: var(--main-text);
}

.header-icon {
    color: var(--main-colour1) !important;
    transform: scale(1.1,1.1);
}

.colour-icon {
    color: var(--main-colour2) !important;
}

.main-colour-title {
    color: var(--main-colour2) !important;
    font-family: inter !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.text-main-colour-1 {
    color: var(--main-colour1) !important;
}

.text-main-colour-2 {
    color: var(--main-colour2) !important;
}

.badge-main-colour {
    background: var(--main-colour2) !important;
}

.badge-second-colour {
    background: var(--main-colour2) !important;
}

.badge-grey {
    background: #C4C4C4 !important;
    color: black;
}

.explore-btn {
    background: var(--main-colour1) !important;
    color: var(--main-text) !important;
}

.content-loading-spinner {
    --sk-color: var(--main-colour2) !important;
}
/*RADZEN ELEMENTS*/
.rz-progressbar {
    height: 0.4rem !important;
}

.rz-progressbar-determinate-primary .rz-progressbar-value {
    background-color: var(--main-colour1) !important;
}

.rz-sidebar {
    background-color: var(--main-colour2) !important;
}

.rz-panel-menu {
    background-color: var(--main-colour2) !important;
}

    .rz-panel-menu .rz-navigation-item {
        border-bottom: solid 1px #363d40;
    }

    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
        background-color: var(--main-colour2) !important;
    }

    .rz-panel-menu .rz-navigation-item-wrapper:hover {
        background-color: var(--main-colour2) !important;
        color: var(--main-text);
    }

.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-bottom-color: var(--main-text);
    margin-bottom: -1px;
    border-top-color: var(--main-colour2) !important;
}

.rz-tabview-top > .rz-tabview-nav li {
    border-top-width: 2px;
    border-bottom-color: #e6ecef;
    border-radius: 0.25rem 0.25rem 0 0 !important;
}

.rz-tabview-nav li a {
    display: flex;
    align-items: center;
    color: var(--main-colour3);
    padding: 0.375rem 1.875rem;
    font-size: inherit;
    font-weight: 600;
}

.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    border-top-color: var(--main-colour1);
}

.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) a {
    color: var(--main-colour1) !important;
}

.rz-header {
    border-bottom: none !important;
    box-shadow: none !important;
}

.rz-layout {
    background-color: transparent !important;
}

.rz-navigation-menu {
    border-radius: 8px !important;
}

.rz-tabview-title {
    display: flex;
    align-items: center;
    color: var(--text-colour);
    border-top-width: 2px;
    font-size: inherit;
    font-weight: 600;
}

.rz-switch.rz-switch-checked .rz-switch-circle {
    background: var(--main-colour2);
}

/*RADZEN ELEMENTS END*/

/*TOP NAV BAR ELEMENTS*/

hr.separator {
    width: 100%;
    margin: 1px;
    border-top: 1px solid rgba(153, 153, 153, 1);
}

.topbar {
    background: var(--main-colour1) !important;
    margin: 0px 20px;
    height: 60px;
}

.topbar-icons {
    color: var(--main-colour3) !important;
}

.main-logo {
    max-width: 140px;
}

.switch-community {
    color: var(--main-text) !important;
}

.switch-community-badge {
    background: var(--main-colour2);
    border-radius: 0.25rem;
}

.switch-community-text {
    color: var(--main-text);
    font-size: 16px;
}

.navbar {
    background: var(--main-colour2);
    margin: 0px 20px;
    border-radius: 10px;
    height: 50px;
}

    .navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
        background-color: var(--main-colour2) !important;
        color: var(--main-colour1) !important;
    }

.top-nav-item {
    padding: 10px 10px 10px 10px !important;
}

.dropdown-menu-end {
    left: 0 !important;
}

.profile-menu-dropdown {
    text-align: left;
    padding: 10px;
    width: 220px;
}

.dropdown-menu {
    position: absolute !important;
    top: 43px !important;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0 0;
    margin-top: 0px;
    font-size: 0.8rem;
    color: var(--main-text) !important;
    text-align: left;
    list-style: none;
    background-color: var(--main-colour1) !important;
    background-clip: padding-box;
    border: 0 !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.navbar-admin-btn-item > .dropdown-menu {
    top: 10px !important; /* Different top value for admin dropdown */
}

.dropdown-item {
    color: var(--main-colour2) !important;
}

    .dropdown-item:hover {
        color: var(--main-colour1) !important;
        background-color: var(--main-colour2) !important;
    }

li .nav-item {
    margin: 0 !important;
}

.nav-link {
    font-family: inter;
    font-style: normal;
    font-weight: normal;
    font-size: 14px !important;
    line-height: 20px;
}

.nav-link-icon {
    color: var(--main-text) !important;
    cursor: pointer;
    font-size: 14px !important;
    line-height: 20px;
    display: block;
    padding: 0.5rem 1rem;
}

ul.rz-profile-menu {
    list-style: none;
    margin-bottom: 0;
    padding: 0.5625rem 1.25rem;
    display: inline-block;
    background-color: transparent;
    border: 0 !important;
    position: relative;
    z-index: 3;
}

    ul.rz-profile-menu .rz-navigation-item-icon-children {
        color: var(--main-colour3) !important;
    }

.navbar-btn {
    background: var(--main-colour2) !important;
    color: black;
    font-size: 14px;
}

.navbar-admin-btn {
    background: #18458A !important;
    color: var(--main-text);
    font-size: 14px;
}

.navbar-admin-btn-item {
    padding-right: 10px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

    .navbar-admin-btn-item:hover {
        background-color: transparent !important;
        color: var(--main-colour2);
    }

.main-nav {
    display: flex;
    flex-direction: row;
}

.push {
    margin-left: auto;
}


.navbar {
    padding: 0 !important;
}

.header {
    border: 0 !important;
}

.nav-item.dropdown.show:not(.navbar-admin-btn-item) {
    background: transparent !important;
}


.nav-item.dropdown > ul.dropdown-menu-right {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    margin-top: 3px;
}

    .nav-item.dropdown > ul.dropdown-menu-right > li:last-child > a:hover {
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

/*.nav-item.dropdown > ul > li:last-child.dropdown-menu-right {
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}*/

.nav-item.dropdown > ul > li:last-child > a:hover {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.submenu {
    margin-top: 7px;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}


    .submenu > li:last-child > a:hover {
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        border-bottom-left-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    .submenu > li:first-child > a:hover {
        border-top-left-radius: 10px !important;
        border-top-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

/* SLICK CAROUSEL */

.slick-next:before {
    font: var(--fa-font-solid) !important;
    content: "\f061" !important;
}

.slick-prev:before {
    font: var(--fa-font-solid) !important;
    content: "\f060" !important;
}

.slick-carousel-btn {
    opacity: 50%;
}

    .slick-carousel-btn:hover {
        opacity: 100%;
    }



.slick-carousel-btn-prev, .slick-carousel-btn-next {
    background-color: var(--main-colour2) !important;
    color: var(--main-text) !important;
    position: absolute;
    top: calc(50% - 20px);
    display: block;
    width: 50px !important;
    height: 50px !important;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    border: none;
    outline: none;
    box-shadow: 3px 2px 10px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 3px 2px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 3px 2px 10px 0px rgba(0,0,0,0.3);
    z-index: 2;
    font-size: 16px !important;
}

.slick-carousel-btn-sm-prev, .slick-carousel-btn-sm-next {
    background-color: var(--main-colour2) !important;
    color: var(--main-text) !important;
    position: absolute;
    top: calc(50% - 20px);
    display: block;
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
    padding: 0;
    z-index: 100;
}

.slick-search-btn-prev, .slick-search-btn-next {
    background-color: var(--main-colour2) !important;
    color: var(--main-text) !important;
    position: fixed;
    margin-top: -230px;
    display: inline-block;
    width: 30px !important;
    height: 30px !important;
    padding: 0;
    z-index: 100;
}

.slick-carousel-dots {
    display: block;
    width: 100%;
    padding: 0;
    margin: 10px 0 0 0 !important;
    list-style: none;
    text-align: center;
}

    .slick-carousel-dots li.slick-active button {
        opacity: 0.5;
    }

    .slick-carousel-dots li {
        position: relative;
        display: inline-block;
        width: 2.8125rem !important;
        height: 0.25rem !important;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

        .slick-carousel-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 2.8125rem !important;
            height: 0.25rem !important;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
            border-radius: 50%;
            background-color: var(--main-colour1) !important;
            opacity: 1;
            border-radius: 5px !important;
        }

.slick-dotted.slick-slider {
    margin-bottom: 0px !important;
}

/* SLICK CAROUSEL END */

.rz-progressbar-determinate-primary .rz-progressbar-value {
    background-color: var(--main-colour1) !important;
}

.nexus-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 100vw;
    height: 100vh;
}

.dashboard-heading {
    font-size: 16px !important;
}

.dashboard-heading-icon {
    height: 25px !important;
    width: 25px !important;
}

.dashboard-article-heading {
    font-size: 16px !important;
}

.dashboard-article-body {
    font-size: 14px !important;
}

.see-more-btn {
    border-radius: 0.2rem !important;
    font-size: 12px !important;
}

.tag {
    background-color: var(--tag-colour);
    color: var(--tag-text-color);
    padding: 3px 8px;
    border: 0;
    border-radius: 20px;
    margin-top: 6px;
    margin-right: 6px;
    font-size: 12px;
}

.nexflickz-item {
}

.nexflickz-item-title {
    font-size: 16px !important;
}

.nexflickz-item-description {
    font-size: 14px !important;
}

.nexflickz-item-img {
    height: 200px;
}

.nexflickz-item-body {
    height: 220px;
}

.btn-program:hover {
    background: var(--main-colour1) !important;
    border: 1px solid var(--main-colour1);
}

.btn-program:focus {
    background: var(--main-colour1) !important;
    border: 1px solid var(--main-colour1);
}

.btn-main-colour {
    color: var(--main-text);
    background-color: var(--main-colour2);
    border-color: var(--main-colour2);
    font-size: 12px;
}

.btn-cancel-action {
    color: var(--main-text);
    background-color: grey;
    border-color: grey;
    font-size: 12px;
}
    .btn-cancel-action:hover {
        color: var(--main-text);
        background-color: lightgray;
        border-color: lightgray;
        font-size: 12px;
    }

.item-image-date {
    position: relative;
    bottom: 30px;
    background: rgba(57,68,83, 0.8);
    height: 30px;
    color: white;
    width: 100%;
    height: 30px;
    backdrop-filter: blur(2px);
}

.item-image-date-text {
    line-height: 30px;
    margin-left: 10px;
}

.rz-dropdown {
    min-width: 150px;
}

.position-relative {
    position: relative;
}

.main-app-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 18px;
    z-index: 1000;
}

.main-app-search-bar {
    padding-left: 40px !important; /* Ensure text starts after the icon */
}

/* NEW UI ELEMENTS */


/* NEW UI ELEMENTS END */


/* RADZEN OVERRIDES */

.rz-datepicker-popup-container {
    min-width: 425px !important;
}

/* RADZEN OVERRIDES END */

.btn-goto-group {
    border: none;
    box-sizing: border-box;
    border-radius: 2px;
    font-family: inter;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    color: var(--main-text) !important;
    background-color: var(--main-colour2) !important;
}

    .btn-goto-group:hover {
        color: var(--main-colour2) !important;
        background-color: var(--main-text) !important;
        border: 2px var(--main-colour2) solid;
    }

.page-wrapper {
    padding-left: 10px;
    padding-right: 10px;
}


.rz-carousel-prev,
.rz-carousel-next {
    background-color: var(--main-colour2) !important; /* Customize background */
    color: var(--main-text) !important; /* Icon color */
    border-radius: 25px;
    opacity: 0.5;
    width: 32px;
    height: 32px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rz-carousel-pager-button.rz-state-active {
    background-color: var(--main-colour2) !important;
}

/* NEW BUTTON STYLING */

.btn-standard {
    background-color: color-mix(in srgb, var(--main-colour2) 30%, var(--main-colour4) 70%);
    color: var(--main-colour2);
    border: none;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold !important;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .btn-standard:hover {
        background-color: color-mix(in srgb, var(--main-colour2) 80%, var(--main-colour4) 20%) !important;
        color: var(--main-text) !important;
    }

.btn-gradient {
    background: linear-gradient(133.99deg, var(--main-colour2) 16.37%, color-mix(in srgb, var(--main-colour2) 60%, var(--main-colour4) 40%) 94.77%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .btn-gradient:hover {
        background: var(--main-colour2);
    }

.btn-small {
    padding: 0.3rem 0.8rem !important;
    font-size: 0.875rem !important;
    border-radius: 4px !important;
}

/* --- COLOR VARIANTS --- */
.btn-green {
    --main-colour2: #28a745;
    --main-text: white;
}

.btn-amber {
    --main-colour2: #ffc107;
    --main-text: black;
}

.btn-red {
    --main-colour2: #dc3545;
    --main-text: white;
}

.btn-info {
    --main-colour2: #17a2b8;
    --main-text: white;
}

/* --- DISABLED STATE --- */
button:disabled,
.btn-standard:disabled,
.btn-gradient:disabled,
.btn-standard.disabled,
.btn-gradient.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Optional: visually different look */
.btn-standard:disabled,
.btn-standard.disabled {
    background-color: #e0e0e0 !important;
    color: #999999 !important;
}

.btn-gradient:disabled,
.btn-gradient.disabled {
    background: linear-gradient(133.99deg, #ccc 16.37%, #eee 94.77%) !important;
    color: #999999 !important;
}

.icon-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* NORROW SCROLL BARS CSS START */

/* 1) For WebKit browsers (Chrome, Safari, Edge Chromium) */
.narrow-scroll::-webkit-scrollbar {
    width: 6px; /* total width of the scrollbar */
    height: 6px; /* if you ever have horizontal scrolling */
}

.narrow-scroll::-webkit-scrollbar-track {
    background: transparent; /* or your track color */
}

.narrow-scroll::-webkit-scrollbar-thumb {
    background-color: var(--main-colour2);
    border-radius: 3px;
    border: 1px solid transparent; /* gives a bit of breathing room */
}

    .narrow-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0,0,0,0.5);
    }


/* 2) For Firefox */
.narrow-scroll {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: var(--main-colour2) transparent;
}

/**::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--main-colour2);
    border-radius: 3px;
    border: 1px solid transparent;
}

    *::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0,0,0,0.5);
    }

html, body, * {
    scrollbar-width: thin;
    scrollbar-color: var(--main-colour2) transparent;
}
*/

/* NORROW SCROLL BARS CSS END */


.nexus-btn-std {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(133.99deg, var(--main-colour2) 16.37%, color-mix(in srgb, var(--main-colour2) 60%, #FFF 40%) 94.77%);
    color: #fff;
    font-weight: 400;
    cursor: pointer;
    outline: none !important;
}

.nexus-btn-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background-image: linear-gradient(133.99deg, var(--main-colour2) 16.37%, color-mix(in srgb, var(--main-colour2) 60%, #FFF 40%) 94.77%);
    color: transparent;
    background-clip: text;
    font-weight: 400;
    cursor: pointer;
    outline: none !important;
}

/* FILE TYPE ICON COLOURS */
/* tinted icon/text accents per type (optional but matches your mock) */
.file-type-folders {
    color: #6b7280;
}
/* gray */
.file-type-images {
    color: #60a5fa;
}
/* blue */
.file-type-videos {
    color: #ef4444;
}
/* red */
.file-type-presentations {
    color: var(--main-colour2);
}
/* orange */
.file-type-pdfs {
    color: #f43f5e;
}
/* rose */
.file-type-spreadsheets {
    color: #22c55e;
}
/* green */
.file-type-documents {
    color: #60a5fa;
}
/* blue */