/*VARIABLES*/
:root {
    --primary-color: #00B5E2;
    --primary-color-light: #f1fcff;
    --primary-color-extra-light: #f9feff;
    --tertiary-color: #2B557E;
}
/*END OF VARIABLES*/

/* COLORS */

.bg-red {
    background-color: #C62828;
}

.bg-green {
    background-color: #2E7D32;
}

.bg-grey {
    background-color: #424242;
}

.bg-blue {
    background-color: #1565C0;
}

.bg-jazzberry-jam {
    background-color: #AD1457;
}

.bg-purple {
    background-color: #4527A0;
}

.bg-orange {
    background-color: #EF6C00;
}

/* END OF COLORS */

/*FONTS*/
@font-face {
    font-family: montserrat-regular;
    src: url(../fonts/montserrat/Montserrat-Regular.ttf)
}

@font-face {
    font-family: montserrat-extrabold;
    src: url(../fonts/montserrat/Montserrat-ExtraBold.ttf);
}

@font-face {
    font-family: montserrat-bold;
    src: url(../fonts/montserrat/Montserrat-Bold.ttf);
}

@font-face {
    font-family: montserrat-semibold;
    src: url(../fonts/montserrat/Montserrat-SemiBold.ttf);
}

@font-face {
    font-family: montserrat-medium;
    src: url(../fonts/montserrat/Montserrat-Medium.ttf);
}
/*END OF FONTS*/

/*BODY*/
html {
    height: 100%;
    width: 100%;
    position: relative;
    min-height: 100%;
}

body {
    background-color: var(--primary-color-extra-light);
    font-family: montserrat-regular;
    position: relative;
    height: 100%;
    width: 100%;
}

#glass-body {
    position: fixed;
    min-height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
}
/*END OF BODY*/

/*OVERLAYS*/

.dx-popup-wrapper {
    background-color: transparent;
}

/*END OF OVERLAYS*/

/*DESKTOP SIDE NAV*/

.bpi-desktop-side-nav {
    height: 95vh;
    width: 104px;
    position: fixed;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    left: 25px;
    top: 20px;
    z-index: 99;
    overflow-y: scroll;
    scrollbar-width: none;
}

.bpi-desktop-side-nav::-webkit-scrollbar {
    display: none;
}

.bpi-desktop-side-nav .logo {
    width: 100%;
    padding: 10px;
}

.bpi-desktop-side-nav .logo img {
    width: 100%;
}

.bpi-desktop-side-nav .nav-link {
    min-height: 80px;
    width: 90%;
    margin: auto;
    border-radius: 10px;
    padding-top: 15px;
    padding-left: 3px;
    padding-right: 3px;
    margin-bottom: 5px;
}


.bpi-desktop-side-nav .nav-link svg {
    margin: auto;
    display: block;
    width: 25px;
    height: 25px;
    fill: #585858;
}

.bpi-desktop-side-nav .nav-link span {
    font-size: 0.55rem;
    font-family: montserrat-semibold;
    text-transform: uppercase;
    word-break: break-word;
    text-align: center;
    display: block;
    margin-top: 8px;
}


.bpi-desktop-side-nav .nav-link:hover {
    background-color: var(--primary-color);
}


.bpi-desktop-side-nav .nav-link:hover svg {
    fill: #ffffff;
}

.bpi-desktop-side-nav .nav-link:hover span {
    color: #ffffff;
}


.bpi-desktop-side-nav .nav-link.current, .services.nav-link.current {
    background-color: var(--primary-color);
}


.bpi-desktop-side-nav .nav-link.current svg, .services.nav-link.current svg {
    fill: #ffffff;
}

.bpi-desktop-side-nav .nav-link.current span, .services.nav-link.current span {
    color: #ffffff;
}

/*END OF DESKTOP SIDE NAV*

/* DESKTOP MAIN NAV */

.bpi-desktop-main-nav {
    background-color: #000;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    border-radius: 25px;
    margin-bottom: 10px;
    margin-left: 0px;
}

.bpi-desktop-main-nav .bpi-app-name {
    color: #fff;
    font-family: montserrat-bold;
    font-size: 1.1rem;
    margin-bottom: 0;
}

.bpi-desktop-main-nav .bpi-name-dropdown ul  {
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: 1px solid #fff;
} 

.bpi-desktop-main-nav .bpi-name-dropdown ul .dropdown-item {
    padding: 20px 20px;
} 

.bpi-desktop-main-nav .bpi-name-dropdown ul .dropdown-item:hover {
    background-color: var(--primary-color);
    color: #ffffff;
}

.bpi-desktop-main-nav .bpi-name-dropdown .name {
    display: block;
    font-family: montserrat-bold;
    font-size: 1.4rem;
}

.bpi-desktop-main-nav .bpi-name-dropdown .email {
    font-family: montserrat-medium;
    font-size: 0.9rem;
    display: block;
}

.bpi-desktop-main-nav .bpi-name-dropdown .company {
    font-family: montserrat-medium;
    font-size: 0.9rem;
    display: block;
}


.bpi-desktop-main-nav .bpi-name-dropdown a {
    background-color: #fff0;
    border: none;
    padding: 0;
}

.bpi-desktop-main-nav .bpi-name-dropdown a::after {
    margin-top: 18px;
    color: #fff;
}

.bpi-desktop-main-nav .bpi-name-dropdown .icon-text-dropdown-item {
    font-family: montserrat-medium;
    font-size: 0.9rem;
    margin-left: 0px;
}

.bpi-desktop-main-nav .bpi-name-dropdown .icon-text-dropdown-item svg {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    margin-bottom: 2px;
}

.bpi-desktop-main-nav .name-bubble {
    background-color: #fff;
    border-radius: 25px;
    color: var(--tertiary-color);
    padding: 7px;
    font-family: montserrat-bold;
    float: left;
}

.bpi-desktop-main-nav .name-bubble svg {
    fill: var(--tertiary-color);
    width: 25px;
    height: 25px;
}

/* END OF DESKTOP MAIN NAV */

/*SIDE NAVIGATION*/
.bpi-side-nav-overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
}

.bpi-side-nav {
    height: calc(100vh - 50px);
    width: 0px;
    position: fixed;
    z-index: 3;
    top: 50px;
    left: 0;
    background-color: #ffffff;
    overflow-x: hidden;
    transition: 0.5s;
}

.bpi-side-nav a {
    display: block;
    padding: 10px 20px;
    background-color: #ffffff;
    text-decoration: none;
    font-family: montserrat-semibold;
    text-transform: uppercase;
    color: #9B9B9B;
    letter-spacing: 1px;
    position:relative;
    white-space: nowrap;
}

.bpi-side-nav a svg {
    margin-right: 20px;
}


.bpi-side-nav a.current {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}


.bpi-side-nav a.current::after {
    content: "";
    background-color: var(--primary-color);
    height: 100%;
    width: 5px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

.bpi-side-nav a:hover {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}

.bpi-side-nav a:hover::after {
    content: "";
    background-color: var(--primary-color);
    height: 100%;
    width: 5px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}


.bpi-side-nav a.pseudo-link > span{
    display:grid;
    grid-template-columns:1fr 6fr;
    align-items:center;
}
     
.bpi-side-nav a.pseudo-link > span > span{
    display:block;
    text-wrap:wrap;
    word-break:break-all;
}

.bpi-side-nav::after {
  content: "";
  display: block;
  height: 7%;
}
/*END OF SIDE NAVIGATION*/

/*MAIN NAVIGATION*/
.bpi-main-nav {
    background-color: var(--primary-color);
    height: 50px;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
}

.bpi-main-nav .col {
    padding-left: 0px;
    padding-right: 0px;
}


.bpi-main-nav .hamburger-icon, .bpi-main-nav .close-icon{
    display: inline;
}

.bpi-main-nav .hamburger-icon svg, .bpi-main-nav .close-icon svg {
    fill:#ffffff;
    cursor:pointer;
}


.bpi-main-nav .bpi-app-name {
    display: inline-block;
    font-family: montserrat-bold;
    color: #ffffff;
    font-size: 1.2rem;
    margin-left: 15px;
}
/*END OF MAIN NAVIGATION*/


/*MAIN CONTAINER*/
.bpi-main-container {
    padding: 20px 35px;
}

.bpi-main-container .dx-widget input  {
    font-family: montserrat-regular;
}
/*END OF MAIN CONTAINER*/


/*PAGE TITLE*/
.bpi-page-title-row {
    margin-bottom: 10px;
}

.bpi-page-title-row h1 {
    font-family: montserrat-extrabold;
    text-transform: capitalize;
    font-size: 1.7rem;
    color: #ffffff;
}

.bpi-page-title-row .bpi-button {
    width: 100%;
    margin-bottom: 10px;
}

.bpi-page-title-row h2 {
    font-family: montserrat-extrabold;
    font-size: 1.5rem;
    color: #ffffff;
}
/*END OF PAGE TITLE*/


/*DATAGRID*/
.bpi-datagrid {
    font-family: montserrat-regular;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0px 0px 8px 1px #c1c1c1c2;
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    margin-bottom: 15px;
}

.bpi-datagrid::ng-deep .dx-adaptive-item-text {
    white-space: pre-line;
}

.bpi-datagrid .dx-field-item-content.dx-field-item-content-location-right {
    margin-top: 15px;
}

.bpi-datagrid .dx-field-item-label-content {
    display: inline-block;
}

.bpi-datagrid .dx-field-item-label-text {
    white-space: normal;
}

.bpi-datagrid .cell-bubble {
    background-color: var(--primary-color);
    color: #ffffff;
    font-family: montserrat-bold;
    font-size: 0.8rem;
    padding: 10px;
    border-radius: 25px;
}

.rounded-card .bpi-datagrid {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 0;
}

.bpi-datagrid .dx-datagrid{
    background-color: #ffffff00 ;
}

.bpi-datagrid .dx-datagrid-header-panel {
    background-color: #fff0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
}

.bpi-datagrid .dx-datagrid-header-panel  .dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection  {
    background-color: #ffffff0a;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.bpi-datagrid .dx-datagrid-rowsview {
    background-color: transparent;
}

.bpi-datagrid .dx-command-edit svg {
    color: var(--tertiary-color);
    fill: var(--tertiary-color);
}

.bpi-datagrid .dx-data-row td .dx-svg-icon {
    position: relative;
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin-left: 3px;
    margin-right: 3px;
}

.bpi-datagrid .dx-data-row td .dx-svg-icon svg, .bpi-datagrid .dx-data-row td .dx-svg-icon svg path {
    position: absolute;
    top: 0px;
    left: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    color: var(--tertiary-color) !important;
    fill: var(--tertiary-color) !important;
}

.bpi-datagrid .dx-data-row.dx-selection td .dx-svg-icon svg, .bpi-datagrid .dx-data-row.dx-selection td .dx-svg-icon svg path, .bpi-datagrid .dx-data-row.dx-selection td svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.bpi-datagrid .dx-data-row.dx-selection td .dx-svg-icon svg, .bpi-datagrid .dx-data-row.dx-selection td .dx-svg-icon svg path, .bpi-datagrid .dx-data-row.dx-selection td svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}


.bpi-datagrid .dx-data-row.dx-state-hover td .dx-svg-icon svg, .bpi-datagrid .dx-data-row.dx-state-hover td .dx-svg-icon svg path, .bpi-datagrid .dx-data-row.dx-selection td svg, .bpi-datagrid .dx-data-row.dx-state-hover td svg{
    color: #ffffff !important;
    fill: #ffffff !important;
}

.bpi-datagrid .dx-data-row.dx-row-alt td {
    background-color: rgba(255, 255, 255, 0.6)
}

.bpi-datagrid .dx-data-row.dx-state-hover td {
    background-color: var(--tertiary-color) !important;
}

.bpi-datagrid .dx-data-row.dx-row-focused td {
    background-color: var(--tertiary-color) !important;
}

.bpi-datagrid .dx-data-row.dx-selection td {
    background-color: var(--tertiary-color) !important;
}

.bpi-datagrid .dx-data-row.dx-row-focused .cell-bubble {
    background-color: #ffffff;
    color: var(--primary-color);
}

.bpi-datagrid .dx-data-row.dx-selection .cell-bubble {
    background-color: #ffffff;
    color: var(--primary-color);
}

.bpi-datagrid .dx-data-row td a.dx-link-icon {
    color: var(--tertiary-color);
}

.bpi-datagrid .dx-data-row.dx-row-focused td a.dx-link-icon {
    background-color: transparent !important;
}

.bpi-datagrid .dx-data-row.dx-selection td a.dx-link-icon {
    background-color: transparent !important;
}

.bpi-datagrid .dx-data-row.dx-row-focused td{
    color: #ffffff !important;
}

.bpi-datagrid .dx-data-row.dx-selection td{
    color: #ffffff !important;
}

.bpi-datagrid .dx-data-row.dx-row-focused td a.dx-link-icon {
    color: #ffffff !important;
}

.bpi-datagrid .dx-data-row.dx-selection td a.dx-link-icon {
    color: #ffffff !important;
}

.bpi-datagrid .dx-datagrid-search-panel {
    margin-top: 5px;
    margin-right: 5px;
    border: 1px solid #cacaca;
    font-family: montserrat-regular;
    border-radius: 25px;
}

.bpi-datagrid .dx-datagrid-headers {
    background-color: var(--primary-color);
    border: none;
}

.bpi-datagrid .dx-datagrid-headers td {
    padding-top: 15px;
    padding-bottom: 15px;
    font-family: montserrat-bold;
    font-size: 0.9rem;
    color: #FFFFFF;
    text-transform: uppercase;
}

.bpi-datagrid .dx-datagrid-table .dx-data-row.dx-state-hover {
    background-color: var(--primary-color);
}

.bpi-datagrid .dx-datagrid-table .dx-data-row.dx-state-hover .cell-bubble {
    background-color: #ffffff;
    color: var(--primary-color);
}

.bpi-datagrid .dx-datagrid-table .dx-data-row.dx-state-hover td{
    color: #ffffff !important;
}

.bpi-datagrid .dx-datagrid-table .dx-data-row td {
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: montserrat-medium;
    font-size: 0.8rem;
}

.bpi-datagrid .dx-master-detail-row {
    font-family: montserrat-medium;
    font-size: 0.85rem;
}

.bpi-datagrid .dx-master-detail-row .bpi-datagrid {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.bpi-datagrid .dx-master-detail-row.dx-adaptive-detail-row td .dx-widget{
    font-family: montserrat-medium;
    font-size: 0.8rem;
}

.bpi-datagrid .dx-datagrid-group-opened, .bpi-datagrid .dx-datagrid-group-closed {
    margin-top: 15px;
}


.bpi-datagrid .dx-data-row.dx-state-hover .dx-datagrid-group-opened::before, .bpi-datagrid .dx-data-row.dx-state-hover .dx-datagrid-group-closed::before {
    color: #ffffff;
}

.bpi-datagrid .dx-datagrid-pager {
    font-family: montserrat-bold;
    padding-left: 15px;
    padding-right: 15px;
}

.bpi-datagrid .dx-datagrid-pager .dx-page-size.dx-selection {
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 25px
}


.bpi-datagrid .dx-datagrid-pager .dx-page-indexes .dx-page.dx-selection {
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 25px
}

.bpi-datagrid .dx-datagrid-total-footer {
    border-top: 1px solid #ffffff;
}

.dx-popup-content .bpi-datagrid {
    border-radius: 10px;
}

.dx-popup-content .bpi-datagrid .dx-widget.dx-checkbox.dx-select-checkbox {
    display: inline-block;
}

.bpi-datagrid .dx-master-detail-row .dx-item-content.dx-list-item-content {
    font-family: montserrat-medium;
    font-size: 0.8rem;
}

.bpi-datagrid .dx-master-detail-cell {
    background-color: rgba(255,255,255,0.3) !important;
}

.bpi-datagrid .dx-master-detail-cell .dx-list-item.dx-state-hover {
    background-color: var(--primary-color) ;
}

.bpi-datagrid .dx-master-detail-cell .dx-list-item.dx-state-hover .dx-list-item-content {
    color: #ffffff;
}


.bpi-datagrid .dx-master-detail-cell .dx-list-item.dx-state-focused {
    background-color: var(--tertiary-color) !important;
}

.bpi-datagrid .dx-master-detail-cell .dx-list-item.dx-selection {
    background-color: var(--tertiary-color) !important;
}

.bpi-datagrid .dx-master-detail-cell .dx-list-item .dx-list-static-delete-button {
    background: none;
    border: none;
}

.bpi-datagrid .dx-master-detail-cell .dx-list-item.dx-state-hover .dx-list-static-delete-button .dx-icon, .bpi-datagrid .dx-master-detail-cell .dx-list-item.dx-state-focused .dx-list-static-delete-button .dx-icon {
    color: #ffffff;
}

.bpi-datagrid .dx-master-detail-cell .dx-list-item.dx-state-hover .dx-list-static-delete-button .dx-icon, .bpi-datagrid .dx-master-detail-cell .dx-list-item.dx-selection .dx-list-static-delete-button .dx-icon {
    color: #ffffff;
}

.bpi-datagrid .word-wrap-underscore {
    word-break: break-all;
}

.dashboard-card .bpi-datagrid {
    margin-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: transparent !important;
}

.dashboard-card .bpi-datagrid .dx-data-row.dx-row-alt td {
    background-color: rgba(255, 255, 255, 0.35);
}
/*END OF DATAGRID*/



/* TAB PANEL */

.bpi-datagrid .dx-master-detail-cell .dx-tabpanel .dx-tabs .dx-tab-text {
    font-family: montserrat-bold;
}

.bpi-tab-panel {
    font-family: montserrat-regular;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}

.bpi-tab-panel .dx-tabpanel-tabs {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    overflow:hidden;
}

.bpi-tab-panel .dx-tab-text {
    font-family: montserrat-bold;
}

.bpi-tab-panel .dx-tabpanel-tabs::after {
    border-top-left-radius: 25px;
}

.bpi-tab-panel .dx-tabs {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.bpi-tab-panel .dx-tabs .dx-item.dx-tab:nth-child(1) {
    border-top-left-radius: 25px;
}


.bpi-tab-panel .dx-multiview-wrapper {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}


.bpi-tab-panel .bpi-datagrid {
    margin-bottom: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}


/* DX TAB PANEL */

/* SCHEDULER */

.dx-scheduler {
    border-radius: 20px;
    box-shadow: 0px 0px 8px 1px #c1c1c1c2;
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.dx-scheduler .dx-scheduler-container, .dx-scheduler .dx-scheduler-container .dx-scheduler-header {
    background-color: transparent;
}

.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-navigator-caption {
    font-family: montserrat-medium;
}

.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-navigator-next {
    background-color: var(--primary-color) !important;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-navigator-next i {
    color: #ffffff !important;
}


.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-navigator-previous {
    background-color: var(--primary-color) !important;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-navigator-previous i {
    color: #ffffff !important;
}


.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-view-switcher .dx-buttongroup .dx-button {
    font-family: montserrat-medium;
    background-color: var(--primary-color);
    color: #ffffff;
}

.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-view-switcher .dx-buttongroup .dx-button:hover {
    filter: brightness(90%);
}

.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-view-switcher .dx-buttongroup .dx-button.dx-item-selected {
    filter: brightness(90%);
}

.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-view-switcher .dx-buttongroup .dx-button.dx-buttongroup-first-item {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.dx-scheduler .dx-scheduler-container .dx-scheduler-header .dx-scheduler-view-switcher .dx-buttongroup .dx-button.dx-buttongroup-last-item {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.dx-scheduler .dx-scheduler-container .dx-scheduler-header-panel {
    font-family: montserrat-bold;
}


.dx-popup-content .dx-tooltip-appointment-item-marker-body  {
    background: var(--tertiary-color) !important;
}

.dx-popup-content .dx-tooltip-appointment-item-content-subject {
    font-family: montserrat-bold;
}

.dx-popup-content .dx-tooltip-appointment-item-content-date {
    font-family: montserrat-medium;
}

.dx-scheduler .dx-scheduler-work-space {
    background-color: transparent;
}

.dx-scheduler .dx-scheduler-appointment {
    background-color: var(--tertiary-color);
    font-family: montserrat-medium;
}

.dx-scheduler .dx-scheduler-appointment-collector {
    background-color: var(--tertiary-color);
    font-family: montserrat-medium;
}

.dx-scheduler .dx-scheduler-date-table-cell-text {
    font-family: montserrat-regular;
    color: #000;
}

.dx-scheduler .dx-scheduler-time-panel {
    font-family: montserrat-medium;
}

.dx-scheduler .dx-scheduler-all-day-title {
    font-family: montserrat-bold;
}

.dx-scheduler .dx-scheduler-all-day-panel {
    background-color: transparent;
}

.dx-scheduler .dx-scheduler-agenda .dx-scheduler-appointment.dx-scheduler-appointment-horizontal .dx-scheduler-appointment-content .dx-scheduler-appointment-title {
    color: #ffffff;
    font-family: montserrat-bold;
}

.dx-scheduler .dx-scheduler-agenda .dx-scheduler-appointment.dx-scheduler-appointment-horizontal .dx-scheduler-appointment-content .dx-scheduler-appointment-content-details {
    color: #ffffff;
    font-family: montserrat-medium;
}

.dx-scheduler .dx-scheduler-agenda .dx-scheduler-appointment.dx-scheduler-appointment-horizontal .dx-scheduler-appointment-content .dx-scheduler-agenda-appointment-marker {
    background-color: var(--primary-color);
}


.dx-scheduler .dx-scheduler-agenda .dx-scheduler-appointment.dx-scheduler-appointment-horizontal:hover,  .dx-scheduler .dx-scheduler-agenda .dx-scheduler-appointment.dx-scheduler-appointment-horizontal.dx-state-focused {
    background-color: var(--primary-color);
}

.dx-scheduler .dx-scheduler-agenda .dx-scheduler-appointment.dx-scheduler-appointment-horizontal:hover .dx-scheduler-appointment-content .dx-scheduler-agenda-appointment-marker, .dx-scheduler .dx-scheduler-agenda .dx-scheduler-appointment.dx-scheduler-appointment-horizontal.dx-state-focused .dx-scheduler-appointment-content .dx-scheduler-agenda-appointment-marker {
    background-color: var(--tertiary-color);
}

/* END OF SCHEDULER */


/* RADIOGROUP */

.dx-radiogroup .dx-item-content {
    font-family: montserrat-regular;
    margin: 5px 0;
}

/* END OF RADIOGROUP */

/*BUTTONS*/

/* .dx-buttongroup-item.dx-button.dx-button-mode-contained:not(.dx-item-selected) {
    background-color: transparent;
}

.dx-buttongroup-item.dx-button.dx-button-mode-contained.dx-button-normal {
    background-color: transparent;
} */
.bpi-solid-dropdown-button.dx-dropdownbutton {
    display: block;
}

.bpi-solid-dropdown-button.dx-dropdownbutton .dx-button .dx-icon, .bpi-datagrid .dx-dropdownbutton .dx-button .dx-icon  {
    color: #ffffff;
}

.bpi-solid-dropdown-button.dx-dropdownbutton .dx-button:hover .dx-icon, .bpi-datagrid .dx-dropdownbutton .dx-button:hover .dx-icon {
    color: var(--primary-color);
}

.bpi-solid-dropdown-button.dx-dropdownbutton .dx-button, .bpi-datagrid .dx-dropdownbutton .dx-button, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Yes"], .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="No"], .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Save"], .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Cancel"], .bpi-button {
    font-family: montserrat-semibold;
    border-radius: 25px;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.bpi-solid-dropdown-button .dx-buttongroup-item.dx-button.dx-button-mode-contained.dx-button-normal, .bpi-solid-dropdown-button.dx-dropdownbutton .dx-button, .bpi-datagrid .dx-dropdownbutton .dx-button, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Yes"], .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Save"], .bpi-solid-button {
    background-color: var(--primary-color);
    color: #ffffff;
    border: 1px solid var(--primary-color);
}

.bpi-solid-dropdown-button .dx-buttongroup-item.dx-button.dx-button-mode-contained.dx-button-normal:hover, .bpi-solid-dropdown-button.dx-dropdownbutton .dx-button:hover, .bpi-datagrid .dx-dropdownbutton .dx-button:hover, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Yes"]:hover, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Save"]:hover, .bpi-solid-button:hover {
    background-color: #ffffff;
    border: 1px solid var(--primary-color);
    color: var(--primary-color)
}

.bpi-solid-dropdown-button.dx-dropdownbutton .dx-button svg, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Yes"] svg, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Save"] svg, .bpi-solid-button svg {
    fill: #ffffff;
}

.bpi-solid-dropdown-button.dx-dropdownbutton .dx-button:hover svg, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Yes"]:hover svg, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Save"]:hover svg, .bpi-solid-button:hover svg {
    fill: var(--primary-color);
}

.dx-popup-normal .dx-popup-bottom .dx-button[aria-label="No"], .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Cancel"], .bpi-outline-button {
    background-color: #ffffff;
    border: 1px solid var(--primary-color);
    color: var(--primary-color)
}

.dx-popup-normal .dx-popup-bottom .dx-button[aria-label="No"] svg, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Cancel"] svg, .bpi-outline-button svg {
    fill: var(--primary-color);
}

.dx-popup-normal .dx-popup-bottom .dx-button[aria-label="No"]:hover, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Cancel"]:hover, .bpi-outline-button:hover {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #ffffff
}

.dx-popup-normal .dx-popup-bottom .dx-button[aria-label="No"]:hover svg, .dx-popup-normal .dx-popup-bottom .dx-button[aria-label="Cancel"]:hover svg, .bpi-outline-button:hover svg {
    fill: #ffffff;
}

.bpi-filter-modal .modal-footer .bpi-button {
    width: 100%;
    margin-bottom: 10px;
}

.dx-popup-bottom .dx-button[aria-label="OK"] {
    background-color: var(--primary-color);
    color: #ffffff;
    border: 1px solid var(--primary-color);
}

.dx-toolbar-item .dx-button[aria-label="OK"] {
    font-family: montserrat-semibold;
    border-radius: 25px;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #ffffff;
}

.dx-button[aria-label="Today"] {
    font-family: montserrat-semibold;
    border-radius: 25px;
    text-transform: uppercase;
    font-size: 0.75rem;
    background-color: var(--primary-color);
    color: #ffffff;
    border: 1px solid var(--primary-color);
}

/*END OF BUTTONS*/

/* MODALS */
.bpi-modal {

}

.bpi-modal .modal-content{
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bpi-modal .modal-title {
    font-family: montserrat-bold;
}

.bpi-modal .btn-close:focus {
    box-shadow:none;
}

.bpi-modal .bpi-filter-field-header {
    font-family:montserrat-semibold;
    font-size: 0.9rem;
    padding-left: 10px;
}

.bpi-modal .modal-header {
    background-color: var(--tertiary-color);
    color: #fff;
    border-bottom: none;

    /* background: rgba(43, 85, 126, 0);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #000;
    border-bottom: 1px solid #fff; */
}

.bpi-modal .modal-header .btn-close {
    filter: invert(100%) sepia(0%) saturate(7484%) hue-rotate(230deg) brightness(107%) contrast(108%);
    opacity: 1 !important;
}

.bpi-modal .modal-header {
    padding-top: 10px;
    padding-bottom: 10px;
}

.bpi-modal .modal-footer {
    padding-top: 10px;
    padding-bottom: 10px;
}

.dx-popup-normal {
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    font-family: montserrat-medium;
}

.dx-popup-normal .dx-popup-title {
    background-color: var(--tertiary-color);
    color: #fff;
    border-bottom: none;
    font-family: montserrat-bold;
}

.dx-popup-normal .dx-popup-title .dx-icon-close {
    color: #ffffff;
}

/* END OF MODALS */

/*FORM ELEMENTS*/
.bpi-form .dx-field-item-label-text {
    font-family: montserrat-medium;
    font-size: 0.85rem;
    padding-left: 15px;
}

bpi-form .dx-icon {
    font-family: 'DXIcons' !important;
    color: #999 !important;
    font-size: 18px !important;
}


.bpi-form-element-row {
    font-family: montserrat-regular;
}

.bpi-form-element-row .bpi-label-col span{
    font-family: montserrat-medium;
    font-size: 0.85rem;
    padding-left: 15px;
}

.bpi-form-element-row .imo-header{
    font-family: montserrat-bold;
}

.bpi-form-element-row .dx-numberbox, .bpi-form .dx-numberbox, .bpi-form .dx-textbox, .bpi-form-element-row .dx-textbox {
    background-color: #f0f0f0;
    border-color: #f0f0f0;
    border-radius: 25px;
    padding: 2px 5px;
    border: 1px solid #ffffff;
}

.bpi-form .dx-textbox.dx-state-focused, .bpi-form-element-row .dx-textbox.dx-state-focused {
    background-color: #f0f0f0;
    border-color: #f0f0f0;
    border-radius: 25px;
    padding: 2px 5px;
    border: 1px solid #ffffff;
}

.bpi-form .dx-texteditor-input, .bpi-form-element-row .dx-texteditor-input {
    font-family: montserrat-regular;
}


.bpi-form .dx-tagbox, .bpi-form-element-row .dx-tagbox {
    border-radius: 25px;
    padding: 2px 5px;
}


.bpi-form-element-row .dx-datebox{
    border-radius: 25px;
}

.bpi-form-element-row .dx-datebox:hover .dx-dropdowneditor-icon, .bpi-form-element-row .dx-datebox.dx-dropdowneditor-active .dx-dropdowneditor-icon {
    background-color: var(--primary-color) !important;
    border-color: transparent;
    border-radius: 25px;
}

.bpi-form-element-row .dx-datebox:hover .dx-dropdowneditor-icon::before, .bpi-form-element-row .dx-datebox.dx-dropdowneditor-active .dx-dropdowneditor-icon::before {
    color: #ffffff;
}

.bpi-form-element-row .dx-datebox .dx-dropdowneditor-icon:hover {
    background-color: var(--primary-color) !important;
    border-color: transparent;
    border-radius: 25px;
}

.bpi-form .dx-tagbox .dx-tag-content, .bpi-form-element-row .dx-tagbox .dx-tag-content {
    background-color: var(--primary-color);
    font-family: montserrat-medium;
    border-radius: 25px;
    color: #fff;
}

.bpi-form .dx-tagbox .dx-tag-remove-button::before, .bpi-form .dx-tagbox .dx-tag-remove-button::after, .bpi-form-element-row .dx-tagbox .dx-tag-remove-button::before, .bpi-form-element-row .dx-tagbox .dx-tag-remove-button::after {
    background-color: #ffffff;
}


.bpi-form-element-row .dx-placeholder {
    font-family: montserrat-regular;
}

.dx-empty-message {
    font-family: montserrat-medium;
}

.dx-popup-content .dx-list-item-content {
    font-family: montserrat-regular;
}


.bpi-filter-modal .bpi-form-element-row {
    margin-bottom: 15px;
}

.bpi-datagrid .dx-data-row .dx-checkbox-icon, .bpi-datagrid .dx-master-detail-row .dx-checkbox-icon {
    border: 0.5px solid #c1c1c1c2;
}


.bpi-form-element-row .dx-textbox.dx-texteditor {
    border: 1px solid #ffffff;
}

.bpi-form-element-row .dx-selectbox {
    border-radius: 25px;
}

.bpi-form .dx-selectbox .dx-dropdowneditor-icon, .bpi-form-element-row .dx-selectbox .dx-dropdowneditor-icon {
    border-radius: 25px;
}

.bpi-form .dx-selectbox:hover .dx-dropdowneditor-icon, .bpi-form .dx-selectbox.dx-dropdowneditor-active .dx-dropdowneditor-icon, .bpi-form-element-row .dx-selectbox:hover .dx-dropdowneditor-icon, .bpi-form-element-row .dx-selectbox.dx-dropdowneditor-active .dx-dropdowneditor-icon {
    background-color: var(--primary-color) !important;
}

.bpi-form .dx-selectbox:hover .dx-dropdowneditor-icon::before, .bpi-form .dx-selectbox.dx-dropdowneditor-active .dx-dropdowneditor-icon::before,  .bpi-form-element-row .dx-selectbox:hover .dx-dropdowneditor-icon::before, .bpi-form-element-row .dx-selectbox.dx-dropdowneditor-active .dx-dropdowneditor-icon::before {
    color: #ffffff;
}


.bpi-form-element-row .dx-dropdownbox {
    border-radius: 25px;
}

.bpi-form-element-row .dx-dropdownbox .dx-dropdowneditor-icon {
    border-radius: 25px;
}

.bpi-form-element-row .dx-dropdownbox:hover .dx-dropdowneditor-icon, .bpi-form-element-row .dx-dropdownbox.dx-dropdowneditor-active .dx-dropdowneditor-icon {
    background-color: var(--primary-color) !important;
}

.bpi-form-element-row .dx-dropdownbox:hover .dx-dropdowneditor-icon::before, .bpi-form-element-row .dx-dropdownbox.dx-dropdowneditor-active .dx-dropdowneditor-icon::before {
    color: #ffffff;
}


.bpi-form-element-row .dx-numberbox.dx-state-hover, .bpi-form .dx-numberbox.dx-state-hover, .bpi-form .dx-textbox.dx-state-hover, .bpi-form .dx-textbox.dx-state-focused, .bpi-form-element-row .dx-textbox.dx-state-hover, .bpi-form-element-row .dx-textbox.dx-state-focused{
    border-color: var(--primary-color) !important;
}

.dx-overlay-content.dx-popup-normal .dx-list-item.dx-state-active, .dx-overlay-content.dx-popup-normal .dx-list-item.dx-state-focused {
    background-color: var(--primary-color) !important;
}

/*END OF FORM ELEMENTS*/


/*CARDS*/

.dashboard-card {
    border: none;
    box-shadow: 0px 0px 8px 1px #414141c2;
    border-radius: 25px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid #ffffff;
}

.dashboard-card .card-header {
    border: none;
    font-size: 1.1rem;
    font-family: montserrat-bold;
    padding-left: 20px;
    padding-top: 15px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.rounded-card {
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-family: montserrat-regular;
    border-radius: 20px;
    box-shadow: 0px 0px 8px 1px #c1c1c1c2;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    margin-bottom: 15px;
}

.rounded-card .card-header {
    font-family: montserrat-bold;
    font-size: 1.1rem;
    border-bottom: 1px solid #fff;
}

/* .rounded-card .card-body {
    padding-top: 1px;
} */

/* .rounded-card .card-body.no-padding {
    padding: 0 !important;
} */

/* .rounded-card .row {
    margin-bottom: 10px;
} */

.rounded-card .group, .label-value-group {
    margin-bottom:10px;
}

.rounded-card .group h6, .label-value-group h6 {
    font-family: montserrat-semibold;
    color: #777;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.rounded-card .group span, .label-value-group span {
    font-family: montserrat-medium;
    color: rgb(0, 0, 0);
    font-size: 0.88rem;
}

.report-card-col {
    margin-bottom: 20px;
}

.report-card {
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-family: montserrat-regular;
    border-radius: 20px;
    box-shadow: 0px 0px 8px 1px #c1c1c1c2;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    height: 100%;
}

.report-card img {
    max-width: 220px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
}

.report-card a {
    text-decoration: none;
}

.report-card .name-bubble {
    text-align: center;
    text-decoration: none;
    text-transform: none;
    color: #fff;
    background-color: var(--tertiary-color);
    border-radius: 50px;
    font-family: montserrat-bold;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}


.welcome-card {
    background-color: var(--primary-color);
    min-height: 81vh;
    height: 100%;
}

.welcome-card h1{
    font-family: montserrat-extrabold;
    color: #fff;
    font-size: 2.5rem;
}

.welcome-card p{
    color: #fff;
    font-size: 1rem;
    font-family: montserrat-medium;
}



/*END OF CARDS*/

/*TILES*/
.dashboard-tile {
    border: none;
    box-shadow: 0px 0px 8px 1px #414141c2;
    border-radius: 25px;
    margin-bottom: 20px;
    max-width: 1000px;
    width: 100%;
}

.dashboard-tile .circle {
    background-color: rgb(255 255 255 / 50%);
    border-radius: 60%;
    height: 80px;
    width: 80px;
    text-align: center;
    display: flex;
    align-items: center;
}

.dashboard-tile .circle svg {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: block;
    fill: #ffffff;
}

.dashboard-tile .amount {
    font-size: 1.5rem;
    font-family: montserrat-bold;
    color: #ffffff;
}


.dashboard-tile .title {
    font-size: 1rem;
    font-family: montserrat-medium;
    color: rgba(255,255,255,0.8);
}

.dashboard-tile .square {
    background-color: rgb(255 255 255 / 50%);
    border-radius: 20%;
    height: 80px;
    width: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.dashboard-tile .square svg {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: block;
    /*fill: #ffffff;*/
}

/*END OF TILES*/


/*LOADING SPINNERS*/
.loading-container {
    --uib-size: 30px;
    --uib-color: white;
    --uib-speed: 2s;
    --dot-size: calc(var(--uib-size) * 0.20);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--uib-size);
    width: var(--uib-size);
    animation: smoothRotate calc(var(--uib-speed) * 1.8) linear infinite;
    margin:10px 0;
}

.dot {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    width: 100%;
    animation: rotate var(--uib-speed) ease-in-out infinite;
}

    .dot::before {
        content: '';
        height: var(--dot-size);
        width: var(--dot-size);
        border-radius: 50%;
        background-color: var(--uib-color);
        transition: background-color 0.3s ease;
    }

    .dot:nth-child(2),
    .dot:nth-child(2)::before {
        animation-delay: calc(var(--uib-speed) * -0.835 * 0.5);
    }

    .dot:nth-child(3),
    .dot:nth-child(3)::before {
        animation-delay: calc(var(--uib-speed) * -0.668 * 0.5);
    }

    .dot:nth-child(4),
    .dot:nth-child(4)::before {
        animation-delay: calc(var(--uib-speed) * -0.501 * 0.5);
    }

    .dot:nth-child(5),
    .dot:nth-child(5)::before {
        animation-delay: calc(var(--uib-speed) * -0.334 * 0.5);
    }

    .dot:nth-child(6),
    .dot:nth-child(6)::before {
        animation-delay: calc(var(--uib-speed) * -0.167 * 0.5);
    }

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    65%, 100% {
        transform: rotate(360deg);
    }
}

@keyframes smoothRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*END OF LOADING SPINNERS*/


/* LISTS */

.configuration-list {
    
}

.configuration-list .dx-list-group-header h3 {
    font-size: 1.5rem;
    font-family: montserrat-bold;
    margin-bottom: -5px;
}

.configuration-list .dx-list-item .dx-list-item-content h4{
    font-size: 1rem;
    font-family: montserrat-semibold;
    white-space: break-spaces;
}

.configuration-list .dx-list-item .dx-list-item-content .description{
    font-size: 0.8rem;
    font-family: montserrat-medium;
    white-space: break-spaces;
}


.configuration-list .dx-list-item .dx-list-item-content .form-check-input:focus{
    box-shadow: none;
    border-color: var(--primary-color);
}


.configuration-list .dx-list-item .dx-list-item-content .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* figure out a way to use the primary-color variable in the fill section*/
.configuration-list .dx-list-item .dx-list-item-content .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url(data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%2386b7fe%27/%3e%3c/svg%3e);
}


.configuration-list .dx-list-item .dx-list-item-content .form-switch .form-check-input {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}


.configuration-list .dx-list-item .dx-list-item-content .setting-value-edit svg {
    height: 16px;
    width: 16px;
    margin-bottom: 1px;
}

.configuration-list .dx-list-item .dx-list-item-content .setting-value-edit .value {
    margin-right: 10px;
    font-size: 0.8rem;
    font-family: montserrat-medium;
}

.configuration-list .dx-list-item.dx-state-hover .dx-list-item-content .setting-value-edit svg {
    fill: var(--primary-color);
}


.search-result-list {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-family: montserrat-regular;
}

.search-result-list .dx-list-group-header {
    font-family: montserrat-medium;
    font-size: 1.5rem;
    color: var(--tertiary-color);
}


.search-result-list .dx-list-search.dx-searchbox {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.search-result-list .dx-texteditor-container {
    background-color: var(--tertiary-color);
    padding: 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.search-result-list .dx-texteditor-container .dx-texteditor-input-container input {
    background-color: #ffffff;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.search-result-list .dx-clear-button-area .dx-icon-clear {
    background-color: #ffffff;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.search-list-search-bar-card {
    background-color: var(--tertiary-color);
    border-radius: 25px;
    border-color: var(--tertiary-color);
    margin-bottom: 15px;
}

/* END OF LISTS */


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .bpi-main-container {
        padding: 20px 35px;
        padding-left: 140px;
    }

    .bpi-page-title-row h1 {
        padding-left: 25px;
    }

    .bpi-page-title-row h2 {
        padding-left: 25px;
    }

    .bpi-main-nav {
        display: none;
    }
}

/* 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) {

}



@include media-breakpoint-up(sm) {
    /*PAGE TITLE*/
    .bpi-page-title-row .bpi-button {
        width: fit-content;
    }
    /*END OF PAGE TITLE*/
}

/* Filter Builder*/
.bpi-filter-builder {
    font-family: montserrat-regular;
    border-radius: 20px;
    box-shadow: 0px 0px 8px 1px #c1c1c1c2;
    background-color: rgba(255, 255, 255, 0.8) !important;
    -webkit-backdrop-filter: blur(5px);
    margin-bottom: 15px;
    padding-top: 5px;
    padding-left: 5px
}

.dx-filterbuilder .dx-popup-normal {
    background: rgba(255, 255, 255, 0.8) !important;
}

.bpi-datagrid .dx-datagrid-filter-panel-text, .dx-datagrid-filter-panel-clear-filter {
    font-family: montserrat-bold;
    font-size: 0.8rem;
    color: var(--tertiary-color) !important;
    text-transform: uppercase;
}

.bpi-datagrid .dx-icon-filter {
    color: var(--tertiary-color);
}

/* Allow wrapping inside filter builder groups */
.dx-filterbuilder .dx-filterbuilder-group,
.dx-filterbuilder .dx-filterbuilder-condition {
    display: flex;
    flex-wrap: wrap; /* enables wrapping */
    align-items: flex-start;
}

/* Let child elements shrink so they don't force horizontal scroll */
.dx-filterbuilder .dx-filterbuilder-text,
.dx-filterbuilder .dx-filterbuilder-operation,
.dx-filterbuilder .dx-filterbuilder-value {
    min-width: 0; /* allow shrinking */
    flex: 1 1 auto; /* allow wrapping and resizing */
    word-break: break-word;
}

.dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-group-item {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    white-space: normal !important;
    padding-bottom: 8px !important;
}
/* End of Filter Builder*/