/*
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}*/

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

:root {
    --vz-vertical-menu-hover-and-active: #6674A1;
    --vz-vertical-menu-hover-and-active-dark: #32373D;
}

.navbar-menu .navbar-nav .nav-sm {
    padding-left: 0;
}

.form-switch input[type="checkbox"]:not(:checked) + span:before {
    content: attr(data-off);
}

.form-switch input[type="checkbox"]:checked + span:before {
    content: attr(data-on);
}
/* light mode nav menu styling */
/*main menu item vertical line when active*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:not(.active) + .collapse.show + .nav-item > .nav-link.active::before,
[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true].active::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 4px;
    background-color: #fff;
}*/
/*main menu item background-colour when active*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:not(.active) + .collapse.show + .nav-item > .nav-link.active,
[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true].active {
    background-color: var(--vz-vertical-menu-hover-and-active);
}*/
/*sub menu item background-colour when active*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-sm .nav-link.active {
    background-color: var(--vz-vertical-menu-hover-and-active);
}*/
/*main menu item when the menu is closed but there is an active tab inside of it background-colour*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link.active {
    background-color: var(--vz-vertical-menu-hover-and-active);
}*/
/*main menu item when the menu is closed but there is an active tab inside of it - vertical line*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=light] .navbar-nav .nav-link.active:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 4px;
        background-color: #fff !important;
    }*/
/*all menu items hover background colour*/
/*[data-layout-mode=light] .nav-link:not(.active):hover {
    background-color: var(--vz-vertical-menu-hover-and-active);
    color: #fff !important;
}*/
/*all menu items hover vertical line*/
/*[data-layout-mode=light] .nav-link:not(.active):hover:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 4px;
        background-color: #fff !important;
    }*/
/* dark mode nav menu styling */
/*main menu item vertical line when active*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:not(.active) + .collapse.show + .nav-item > .nav-link.active::before,
[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true].active::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 4px;
    background-color: #fff;
}*/
/*main menu item background-colour when active*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:not(.active) + .collapse.show + .nav-item > .nav-link.active,
[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true].active {
    background-color: var(--vz-vertical-menu-hover-and-active-dark);
}*/
/*sub menu item background-colour when active*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-sm .nav-link.active {
    background-color: var(--vz-vertical-menu-hover-and-active-dark);
}*/
/*main menu item when the menu is closed but there is an active tab inside of it background-colour*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link.active {
    background-color: var(--vz-vertical-menu-hover-and-active-dark);
}*/
/*main menu item when the menu is closed but there is an active tab inside of it - vertical line*/
/*[data-layout=vertical][data-sidebar=dark][data-layout-mode=dark] .navbar-nav .nav-link.active:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 4px;
        background-color: #fff !important;
    }*/
/*all menu items hover background colour*/
/*[data-layout-mode=dark] .nav-link:not(.active):hover {
    background-color: var(--vz-vertical-menu-hover-and-active-dark);
    color: #fff !important;
}*/
.nav-link:not(.active):hover {
    color: #495057 !important;
    font-weight: 700;
}

.nav-link.active {
    color: #495057 !important;
    font-weight: 700;
}

.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true] {
    color: #495057;
}

/*all menu items hover vertical line*/
/*[data-layout-mode=dark] .nav-link:not(.active):hover:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 4px;
        background-color: #fff !important;
    }*/
.page-title-left {
    flex: 1;
    margin-left: 10px;
}

/*Upload file css*/

#dropzone-external {
    width: 200px;
    height: 200px;
    background-color: rgba(183, 183, 183, 0.1);
    border-width: 2px;
    border-style: dashed;
    padding: 10px;
}

    #dropzone-external > * {
        pointer-events: none;
    }

    #dropzone-external.dropzone-active {
        border-style: solid;
    }

.widget-container > span {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 16px;
}

#dropzone-image {
    max-width: 100%;
    max-height: 100%;
    align-self: center;
}

#dropzone-text > span {
    font-weight: 100;
    opacity: 0.5;
}

#upload-progress {
    display: flex;
    margin-top: 10px;
}

#privacyMail a {
    text-decoration: underline;
    color: black;
}

.flex-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#dropzone-text {
    text-align: center;
}

/*Dropdown arrow*/
.dropdown-arrow {
    /* Add any necessary styles for the dropdown arrow */
    /* For example: */
    background-image: url("path-to-dropdown-arrow-image.png");
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 20px; /* Adjust as needed */
}

#preview {
    color: white; /* Change this if you need different text color */
    text-align: center;
    font-size: 20px;
    line-height: 200px; /* Adjust according to the height of your circle */
}

.flex {
    display: flex;
}

.check-in-block-button {
    display: flex;
    height: 100%;
    color: #fff;
    font-size: 22px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background: linear-gradient(180deg, #45C7F1 0%, #A583FD 0.01%, #8257FD 100%);
    /* Purple blur */
    box-shadow: 7px 7px 35px 0px rgba(89, 85, 179, 0.50);
}

    .check-in-block-button:hover {
        color: #fff;
    }

.check-in-menu-button {
    display: flex;
    height: 48px;
    color: #fff;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 45px;
    background: linear-gradient(180deg, #45C7F1 0%, #A583FD 0.01%, #8257FD 100%);
    /* Purple blur */
    box-shadow: 4px 4px 15px 0px rgba(89, 85, 179, 0.50);
}

    .check-in-menu-button:hover {
        color: #fff;
    }

.alert-menu-button {
    display: flex;
    height: 48px;
    color: #fff;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 45px;
    background: linear-gradient(180deg, #E94989 0%, #C2529D 100%);
    /* Purple blur */
    box-shadow: 4px 4px 15px 0px rgba(89, 85, 179, 0.50);
}

.chat-menu-button {
    display: flex;
    height: 48px;
    color: #fff;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 45px;
    background: linear-gradient(180deg, #fb822e 0%, #f67a5a 100%);
    /* Purple blur */
    box-shadow: 4px 4px 15px 0px rgba(89, 85, 179, 0.50);
}

.alert-menu-button:hover {
    color: #fff;
}

.chat-menu-button:hover {
    color: #fff !important;
}

.sidebar-buttons {
    margin-top: -160px;
}

.create-alert-block-button {
    display: flex;
    height: 100%;
    color: #fff;
    font-size: 22px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background: linear-gradient(180deg, #E94989 0%, #C2529D 100%);
    box-shadow: 7px 7px 35px 0px rgba(89, 85, 179, 0.50);
}

    .create-alert-block-button:hover {
        color: #fff;
    }

.padded-container {
    padding: 10px; /* Adjust the value to your desired padding size */
    margin: 5px;
}

.square-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.square-block {
    border-radius: 50%;
    width: 100%;
    padding-top: 100%; /* Set the height equal to the width */
    background-color: white;
    box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    color: #fff;
    font-size: 17px;
}

.square-inner {
    flex: 0 0 calc(15% - 20px); /* Set the width of each square with margin */
    margin: 10px; /* Add margin to create space between squares */
    display: flex;
    align-items: center;
    justify-content: center;
}

.square-block span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.square-block:hover {
    transform: translateY(-5px);
}

.circle-outline {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    padding: 20px;
    background: white;
    background-clip: padding-box;
    border: 16px solid transparent; /* Adjust the border width to make the outline thicker */
}

.emotion-icon {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.emotion-name {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.emotion-item {
    flex: 0 0 calc(20% - 20px); /* 20% width with 20px spacing between items */
    margin: 10px; /* Add some spacing between items */
    box-sizing: border-box; /* Include padding and border in the width calculation */
}

/**/

.discover-item {
    flex: 0 0 calc(20% - 20px); /* 20% width with 20px spacing between items */
    margin: 10px; /* Add some spacing between items */
    box-sizing: border-box; /* Include padding and border in the width calculation */
}

.discover-blocks {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row when there's not enough space */
}

.discover-block {
    /*border-radius: 10px;*/
    border-radius: 30px;
    width: 100%;
    padding-top: 100%; /* Set the height equal to the width */
    background-color: white;
    /*box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.09);*/
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    color: #fff;
    font-size: 17px;
}

.discover-inner {
    flex: 0 0 calc(15% - 20px); /* Set the width of each square with margin */
    margin: 10px; /* Add margin to create space between squares */
    display: flex;
    align-items: center;
    justify-content: center;
}

.discover-block span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.discover-block:hover {
    transform: translateY(-5px);
}

.discover-icon {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.discover-name {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
}

.form-switch {
    margin-bottom: 0px !important;
}

.form-group {
    padding-bottom: 8px;
}

.space-between {
    justify-content: space-between;
}

.center-text {
    text-align: center;
}

.block-button {
    margin-bottom: 1.5rem;
    height: 300px;
}

.move {
    cursor: move;
}

.inline-block {
    display: inline-block;
}

/*chat*/

.chat-conversation {
    height: 300px;
}

.checklist-message {
    position: absolute;
    z-index: 999;
}

.note-message {
    color: #6E7287;
}

.purple-note {
    color: #825CC9;
    font-style: italic;
}

.alert-actions {
    width: 150px;
    padding-right: 6px;
}

.r-article {
    background-color: #F3EFFA;
    border: 1px solid var(--purple-2, #825CC9);
    color: #825CC9 !important;
}

    .r-article h6 {
        color: #825CC9 !important;
    }

.r-video {
    background-color: #FDEFEC;
    border: 1px solid var(--purple-2, #F16D5C);
    color: #F16D5C !important;
}

    .r-video h6 {
        color: #F16D5C !important;
    }

.r-website {
    background-color: #FEF8ED;
    border: 1px solid var(--purple-2, #F7B84B);
    color: #F7B84B !important;
}

    .r-website h6 {
        color: #F7B84B !important;
    }

.r-pdf {
    background-color: #E1EDF3;
    border: 1px solid var(--purple-2, #299CDB);
    color: #299CDB !important;
}

    .r-pdf h6 {
        color: #299CDB !important;
    }

.resource-block {
    padding: 14px;
    border-radius: 4px;
    height: 100%;
}

.resource-outer {
    padding-left: 7px;
    padding-right: 7px;
}

.resource-block p {
    margin-top: 2px;
    margin-bottom: 0px;
    text-transform: uppercase;
}

.resource-block h6 {
    font-size: 14px;
    margin: 0px;
}

.form-section {
    display: flex;
    margin-bottom: 5px;
}

.form-heading {
    flex: 0 0 150px; /* Adjust the width as needed */
    font-weight: 600;
}

.form-info {
    flex: 1;
    overflow-x: auto;
}

.hide-heading .col-form-label {
    display: none;
}

.bottom-menu {
    display: none;
}

.block-button-mb {
    /* Add any necessary styling for the container div */
}

.custom-block-button {
    display: flex;
    flex-direction: column;
    align-items: center; /* To center the items horizontally */
    text-align: center; /* To center the text horizontally */
    /* Add any necessary styling for the anchor tag */
}

/* Styles for the container div of the small button */
.small-block-button {
    padding-bottom: 10px;
}

.custom-small-block-button {
    padding: 5px;
}

/* Styles for the anchor tag of the small button */
.custom-small-block-button {
    display: flex;
    height: 100%;
    color: #fff !important;
    justify-content: center;
    align-items: center;
    border-radius: 45px;
    background: linear-gradient(180deg, #E94989 0%, #C2529D 100%);
    box-shadow: 7px 7px 35px 0px rgba(89, 85, 179, 0.50);
    width: inherit;
}

.small-block-button a:hover {
    color: #fff;
}

/* Styles for the image inside the small button */
.custom-small-block-button img {
    max-width: 30px; /* Set the desired width for the image */
    margin-right: 10px; /* Add some spacing between the image and text */
    margin-bottom: 4px;
}

.custom-small-block-button p {
    font-size: 15px !important;
}

/* Styles for the text inside the small button */
.custom-small-block-button p {
    margin: 0; /* Remove any default margins for the paragraph */
}

.button-container {
    position: relative;
}

    .button-container button {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 999;
        background: #fff;
    }

    .button-container .fav-btn {
        background-color: #fff !important;
        color: #495057;
    }

        .button-container .fav-btn:hover {
            color: #495057;
        }

    .button-container .active {
        background-color: #FF4097 !important;
        color: #fff !important;
    }

.inspo-button-container .nav-link:not(.active):hover {
    background: transparent;
    color: #405189 !important;
}

.inspo-button-container .nav-link:hover::before {
    content: none;
}

/*.gallery-container {
    height: 250px;*/ /* Set the desired fixed height for the thumbnail container */
/*overflow: hidden;*/ /* Hide any overflowing content */
/*}*/

.gallery-box::before {
    display: none;
}

.gallery-img {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    object-position: center;
}

.inspo-button-container {
    display: flex;
    justify-content: center;
}

.resource-image-container {
    height: 200px;
    overflow: hidden;
    position: relative;
}

    .resource-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        position: absolute;
        top: 0;
        left: 0;
    }

.search-wrapper {
    padding: 0 30px;
}

.search-bar {
    width: 500px;
    border-radius: 20px;
}

.chat-bubble-creator {
    background-color: #d8d9ff !important;
}

.chat-bubble-creator-chat {
    background-color: #ECDDFF !important;
    color: black;
    border-radius: 30px !important;
}

.large-checkbox {
    width: 23px;
    height: 23px;
}

.delete-button {
    padding-left: 10px;
}

    .delete-button a:active {
        color: #fff !important;
        border-color: #00000000 !important;
        background-color: #f06548 !important;
    }

    .delete-button a:hover {
        color: #fff !important;
        border-color: #00000000 !important;
        background-color: #f06548 !important;
    }

    .delete-button a:focus {
        color: #f06548 !important;
    }

.mobile {
    display: none;
}

.browser {
    display: inline-flex;
}

.bottom-menu a {
    color: #212529;
}

.microsoft-custom-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4e4e4e;
    border-color: #4e4e4e;
}

.microsoft-button-content {
    display: flex;
    align-items: center;
}

.microsoft-logo-img {
    width: 20px; /* Adjust the width of the logo as needed */
    height: auto;
    margin-right: 10px; /* Adjust this value to control the space between the image and text */
}

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.alert-institution-logo {
    width: 65px;
}

.hamburger-icon {
    width: 20px;
    height: 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

    .hamburger-icon span {
        background-color: #878a99;
        position: absolute;
        border-radius: 2px;
        transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
        width: 100%;
        height: 2px;
        display: block;
        left: 0px;
    }

        .hamburger-icon span:nth-child(1) {
            top: 0;
            width: 80%;
        }

        .hamburger-icon span:nth-child(2) {
            top: 6px;
        }

        .hamburger-icon span:nth-child(3) {
            bottom: 0;
            width: 60%;
        }

.vertical-menu-btn:hover .hamburger-icon:not(.open) span:nth-child(1) {
    top: -1px;
}

.vertical-menu-btn:hover .hamburger-icon:not(.open) span:nth-child(3) {
    bottom: -1px;
}

.hamburger-icon.open {
    transform: rotate(90deg);
}

    .hamburger-icon.open span:nth-child(1) {
        left: -3px;
        top: 13px;
        width: 20px;
        transform: rotate(90deg);
        transition-delay: 150ms;
    }

    .hamburger-icon.open span:nth-child(2) {
        left: 3px;
        top: 13px;
        width: 20px;
        transform: rotate(90deg);
        transition-delay: 50ms;
    }

    .hamburger-icon.open span:nth-child(3) {
        left: 9px;
        top: 13px;
        width: 20px;
        transform: rotate(90deg);
        transition-delay: 100ms;
    }

.terms-and-conditions {
    color: #405189 !important;
}

.nav-pills {
    cursor: pointer;
}

.fav-nav-link.active {
    color: #fff !important;
    font-weight: inherit;
}

.fav-nav-link {
    font-weight: inherit;
}

    .fav-nav-link:hover {
        font-weight: inherit !important;
    }

    .fav-nav-link::before {
        border: none;
    }

    .fav-nav-link:hover:before {
        width: 0px !important;
    }

.terms-and-conditions {
    cursor: pointer;
}

.password-reset-pop {
    align-self: center;
}

    .password-reset-pop a {
        width: 100%;
    }

.legend span {
    border: 1px solid #ccc;
    float: left;
    width: 15px;
    height: 15px;
    margin: 2px 4px;
}

.legend-block {
    background-color: #eff2f7;
}

.legend {
    list-style: none;
}

    .legend li {
        margin-left: 10px;
        float: left;
    }

/*alerts grid styling*/

.alert-table .dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-menu {
    background-color: transparent;
}

.alert-table .dx-datagrid-rowsview .dx-row > td {
    border-bottom: none;
    border-right: none;
}

.alert-table .dx-datagrid .dx-column-lines > td {
    border-left: none;
    border-right: none;
}

.alert-table .dx-datagrid-rowsview .dx-datagrid-table {
    border-collapse: separate !important;
    border-spacing: 0 15px !important;
}

.alert-table .dx-datagrid-rowsview {
    border-left: none;
    border-right: none;
}

.alert-table .dx-data-row {
    height: 50px;
    -webkit-filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.09));
    /*box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09);*/
    background-color: #fff;
}

.alert-table td {
    vertical-align: middle !important;
    text-align: left !important;
}

.alert-table .dx-datagrid {
    background-color: transparent;
}

.alert-table .dx-datagrid-text-content {
    font-size: 14px;
}

.alert-table .dx-datagrid .dx-row-lines > td {
    font-size: 12px;
    text-align: left !important;
}

.alert-table .dx-datagrid-rowsview .dx-datagrid-table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    padding-right: 10px;
    padding-left: 10px;
}

/*table header*/
.alert-table .dx-datagrid-headers {
    background-color: #fff;
    border-top: none !important;
    border-bottom: none !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09);
    /*box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);*/
    border-left: none;
    border-right: none;
    background-color: #f9fbfc;
}

    .alert-table .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
        border-bottom: none !important
    }

.alert-table .dx-datagrid-borders .dx-datagrid-rowsview, .dx-datagrid-headers + .dx-datagrid-rowsview, .dx-datagrid-rowsview.dx-datagrid-after-headers {
    border-top: none !important;
}

.alert-table .dx-editor-cell .dx-texteditor, .dx-editor-cell .dx-texteditor .dx-texteditor-input {
    background-color: transparent !important;
}

/*footer part*/
.alert-table .dx-datagrid-borders > .dx-datagrid-filter-panel {
    border-top-width: 0;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.alert-table .dx-datagrid-pager {
    border-top: none;
}

.alert-table .dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > .dx-datagrid-total-footer {
    border-bottom: none;
}

.page-title-box {
    margin: -23px -1.5rem 0rem -1.5rem;
}

/*alert grid badges*/

.open-badge {
    outline-color: #FF4097 !important;
    background-color: #FF4097;
}

.archived-badge {
    outline-color: #9747FF !important;
    background-color: #9747FF;
}

.closed-badge {
    outline-color: #00BEFF !important;
    background-color: #00BEFF;
}

.in-progress-badge {
    outline-color: #FFC60E !important;
    background-color: #FFC60E;
}

.no-messages-badge {
    outline-color: #CED4DA !important;
    background-color: #CED4DA;
}

.unread-messages-badge {
    outline-color: #65D382 !important;
    background-color: #65D382;
}

.new-alert-badge {
    outline-color: #5072EA !important;
    background-color: #5072EA;
}

.alert-badge {
    color: #fff;
    outline: solid;
    font-weight: 700;
    outline-width: 2px;
    font-size: 10px;
    border-radius: 8px;
    text-transform: uppercase;
}

.user-alert-card .card {
    background-color: transparent;
    box-shadow: none;
}

.user-alert-card .card-header {
    background-color: transparent;
    border-bottom: none;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td {
    background-color: transparent !important;
}

.dx-datagrid-filter-panel .dx-datagrid-filter-panel-clear-filter, .dx-datagrid-filter-panel .dx-datagrid-filter-panel-text, .dx-datagrid-filter-panel .dx-icon-filter {
    color: #9747FF;
}

.dx-checkbox-checked .dx-checkbox-icon {
    color: #9747FF;
}

.link-secondary {
    color: #9747FF !important;
}

.bg-pink {
    background-color: #FF4097 !important;
    border-radius: 20px;
}

.bg-purple {
    background-color: #9747FF !important;
    border-radius: 20px;
}

.bg-green {
    background-color: #65D382 !important;
    border-radius: 20px;
}

.btn-pink {
    color: #fff !important;
    background-color: #FF4097;
    border-color: #FF4097;
    transition: background-color 0.3s, border-color 0.3s;
}

    .btn-pink:hover,
    .btn-pink:focus,
    .btn-pink:active {
        background-color: #EC1D7B !important;
        border-color: #EC1D7B !important;
        color: #fff !important;
    }

.text-purple {
    color: #9747FF !important;
}

.text-red {
    color: #FF0000 !important;
}

.text-green {
    color: #65D382 !important;
}

.text-pink {
    color: #FF4097 !important;
}

.text-yellow {
    color: #FFC60E !important;
}

.text-blue {
    color: #00BEFF !important;
}

.btn-outline-purple {
    color: #9747FF;
    border-color: #9747FF;
    transition: background-color 0.3s, border-color 0.3s;
}

    .btn-outline-purple:hover,
    .btn-outline-purple:focus,
    .btn-outline-purple:active {
        background-color: #9747FF;
        border-color: #9747FF;
        color: #fff;
    }

.btn-purple {
    color: #fff !important;
    background-color: #9747FF;
    border-color: #9747FF;
    transition: background-color 0.3s, border-color 0.3s;
}

    .btn-purple:hover,
    .btn-purple:focus,
    .btn-purple:active {
        background-color: #7D26EE !important;
        border-color: #7D26EE !important;
        color: #fff !important;
    }

.badge-soft-purple {
    color: #9747FF;
    background-color: #9747ff21;
    border-color: #9747ff21;
}

.btn-soft-purple {
    color: #9747FF;
    background-color: #9747ff21;
    border-color: #9747ff21;
    transition: background-color 0.3s, border-color 0.3s;
}

    .btn-soft-purple:hover,
    .btn-soft-purple:focus,
    .btn-soft-purple:active {
        background-color: #9747FF !important;
        border-color: #9747FF !important;
        color: #fff !important;
    }

.soft-purple-active {
    background-color: #9747FF !important;
    border-color: #9747FF !important;
    color: #fff !important;
}

.form-check-input:checked {
    background-color: #9747FF !important;
    border-color: #9747FF !important;
}

.form-check-success .form-check-input:checked {
    background-color: #9747FF !important;
    border-color: #9747FF !important;
}

.bin {
    display: flex;
    align-items: flex-end;
}

.card {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 30px;
}

.card-header {
    border-radius: 30px 30px 0 0 !important;
    border-bottom: 1px solid #f1e6ff !important;
}

.card-footer {
    border-radius: 0 0 30px 30px !important;
    border-top: 1px solid #f1e6ff;
}

.btn {
    border-radius: 20px !important;
}

a {
    color: #9747FF !important;
}

    a:focus, a:hover, a:active {
        color: #9747FF;
    }

.dashboard-icon {
    width: 35px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #9747FF;
}

.menu-b {
    background-color: #fff !important;
}

.menu-text {
    color: #6d7080;
}

.ri-settings-2-line {
    color: #6d7080;
}

.inspo-block {
    padding-right: 0px;
    padding-left: 0px;
}

.rounded-n {
    border-radius: 50% !important;
}

.bg-soft-purple {
    background-color: rgba(151, 71, 255, 0.18);
}

.bg-soft-green {
    background-color: rgba(101, 211, 130, 0.18);
}

.bg-soft-pink {
    background-color: rgba(255, 64, 151, 0.18);
}

.bg-soft-yellow {
    background-color: rgba(255, 198, 14, 0.18);
}

.bg-soft-blue {
    background-color: rgba(0, 190, 255, 0.18);
}

.alert-purple {
    color: #9747FF;
    background-color: #ECDEFF;
    border-color: #DBBFFF;
    border-radius: 30px;
}

.chat-input {
    border-radius: 20px;
}

.alert-yellow {
    color: #d69628;
    background-color: #FFF5D4;
    border-color: #fdeac9;
    border-radius: 30px;
}

.alert-green {
    color: #33c359;
    background-color: #E3F7E9;
    border-color: #9de7b3;
    border-radius: 30px;
}

.alert-pink {
    color: #FF4097;
    background-color: #FFDDEC;
    border-color: #FAB4D3;
    border-radius: 30px;
}

.menu-logo {
    padding: 4px;
}

.check-in-icon {
    width: 166px;
}

.create-alert-icon {
    width: 166px;
}

.legend {
    background-color: #fff;
    float: right;
    padding: 8px 6px;
    border-radius: 6px;
}

.spinner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .spinner-card p {
        color: #cdbce3;
        font-size: 12px;
        font-style: italic;
        width: 60%;
        text-align: center;
    }

.alert-menu-button:active {
    color: #fff;
}

.chat-menu-button:active {
    color: #fff !important;
}

.check-in-menu-button:active {
    color: #fff;
}

.chat-attachment {
    max-width: 150px;
}

.pdf-icon {
    width: 50px;
}

.pdf-icon-preview {
    width: 50%
}

#filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* or whatever max-width you prefer */
}

.width-100 {
    width: 100%;
}

.safety-name-field {
    margin-right: 10px;
}

.safety-icon {
    font-size: 40px;
}

.circle-icon-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* This makes the container circular */
    width: 53px; /* Adjust as per your needs */
    height: 53px; /* Adjust as per your needs */
    border: 3px solid #9747FF;
}

.safety-space-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.form-hidden {
    border: none;
}

#safetySpaceApp input[readonly]:focus,
textarea[readonly]:focus {
    outline: none;
}

#safetySpaceApp input[readonly]:hover,
textarea[readonly]:hover {
    cursor: default !important;
}

#safetySpaceApp .form-control-sm {
    transition: none !important;
}

#safetySpaceApp textarea {
    width: 100%;
}

.icon-input-wrapper {
    display: flex;
    width: 100%;
    /*align-items: center;*/
}

    .icon-input-wrapper i {
        font-size: 18px;
        padding-right: 6px;
        padding-top: 1px;
        color: #9747FF;
    }

#safetySpaceApp input {
    font-size: 11px;
    background-color: transparent;
}

#safetySpaceApp .btn-soft-purple:hover, #safetySpaceApp .btn-soft-purple:focus, #safetySpaceApp .btn-soft-purplee:active {
    color: #9747FF !important;
    background-color: #9747ff21 !important;
    border-color: #9747ff21 !important;
}

#safetySpaceApp textarea {
    font-size: 11px;
    resize: none;
}

#safetySpaceApp textarea {
    height: 25.5px;
}
/*html, body {
    overflow-x: hidden;
}

body {
    position: relative
}*/
.journal-entry-section .dx-htmleditor-content {
    font-size: 9pt;
}

.flatpickr-calendar {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.flatpickr-input {
    border-radius: 50px;
}

.flatpickr-months {
    background-color: #9747ff;
}

.flatpickr-weekdays {
    background-color: #9747ff;
}

span.flatpickr-weekday {
    background-color: #9747ff;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #9747ff !important;
    border-color: #9747ff !important;
}

.flatpickr-day.inRange {
    box-shadow: -5px 0 0 #f1ebf9, 5px 0 0 #f1ebf9;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    background-color: #f1ebf9;
    border-color: #f1ebf9;
}

.flatpickr-day.today {
    border-color: #9747ff;
    background-color: rgb(241 235 249);
}

    .flatpickr-day.today:hover, .flatpickr-day.today:focus {
        border-color: #ff4097;
        background-color: rgb(241 235 249);
    }

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 #9747ff;
}

.check-in-section .card-footer .row > * {
    width: auto !important;
}

.width-auto {
    width: auto;
}

.flatpickr-input {
    border: 1px solid #d2b7f5;
}

#checkListApp .form-hidden {
    width: 100%;
    padding-left: 6px;
}

#checkListApp .form-control-sm {
    transition: none !important;
}

#checkListApp input {
    font-size: 11px;
    background-color: transparent;
}

    #checkListApp input.form-hidden[readonly]:focus,
    #checkListApp textarea.form-hidden[readonly]:focus {
        outline: none;
    }

    #checkListApp input.form-hidden[readonly]:hover,
    #checkListApp textarea.form-hidden[readonly]:hover {
        cursor: default !important;
    }

.checklist-heading {
    font-size: 16px !important;
    color: #495057 !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: 500 !important;
}

#checkListApp .move-icon {
    font-size: 18px;
    touch-action: none;
    padding-right: 6px;
}

.dragging {
    opacity: 0.5;
    transform: scale(1.1);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px dashed #9747FF;
}

#checkListApp .form-group {
    padding-bottom: 0px;
}

#checkListApp .checklist-heading {
    transition: none !important;
}

.move-div {
    display: flex;
    align-items: center;
}

#journalApp input::-webkit-date-and-time-value {
    margin-top: 0px;
    text-align: left;
    width: 100%;
}

.form-hidden-calendar {
    border: none !important;
}

    .form-hidden-calendar input {
        padding-left: 3px;
        padding-top: 0px;
    }

#journalApp .dx-state-disabled .dx-widget, .dx-state-disabled.dx-widget {
    opacity: 1 !important;
}

#journalApp .checklist-heading {
    transition: none !important;
}

#journalApp .journal-title-padding {
    padding-left: 3px;
    margin-bottom: 0px !important;
}

#journalApp input {
    font-size: 11px;
    background-color: transparent;
}

#journalApp .date-input input {
    color: #7D26EE;
}

#journalApp input.form-hidden[readonly]:focus,
#journalApp textarea.form-hidden[readonly]:focus {
    outline: none;
}

#journalApp input.form-hidden[readonly]:hover,
#journalApp textarea.form-hidden[readonly]:hover {
    cursor: default !important;
}

.form-hidden-calendar .dx-texteditor-buttons-container {
    display: none;
}

#journalApp .journal-area .dx-htmleditor {
    border: none;
}

#journalApp .journal-area .dx-htmleditor-content {
    padding: 12px 3px !important;
}

    #journalApp .journal-area .dx-htmleditor-content.ql-blank::before {
        left: 0px;
    }

.purple-line {
    color: #9747FF;
}

.chat-conversation .chat-avatar img {
    object-fit: cover;
}

.bg-purple-subtle {
    background-color: #fcf9ff;
}

.light-purple-card {
    background: #f8f3ff;
    outline: solid;
    outline-width: 1px;
    outline-color: #ddc3ff;
}

    .light-purple-card .card-header {
        background: #f7efff;
    }

@media print {
    .purple-outline-bubble {
        outline: solid;
        outline-width: 1px;
        outline-color: #825CC9;
    }

    .right .green-outline-bubble {
        outline: solid;
        outline-width: 1px;
        outline-color: #0ab39c;
    }

    .grey-outline-bubble {
        outline: solid;
        outline-width: 1px;
        outline-color: #c3c3c3;
    }
}

@media (max-width: 991.98px) {
    #back-to-top {
        bottom: 100px;
    }

    .form-control-sm-cancel .form-control-sm {
        font-size: 9pt !important;
    }

    .password-reset-pop {
        width: 100% !important;
    }

    .modal-content {
        max-width: max-content;
    }

    .details-section {
        display: block;
    }

    .mobile {
        display: block;
    }

    .browser {
        display: none;
    }

    .search-bar {
        width: 100%;
    }

    .user-chat {
        transform: inherit;
        padding-top: 0px;
        position: inherit;
        visibility: inherit;
    }

    .square-inner {
        flex: 0 0 calc(50% - 20px);
    }

    .discover-item {
        flex: 0 0 calc(50% - 20px); /* 50% width with 20px spacing between items */
    }

    .emotion-item {
        flex: 0 0 calc(50% - 20px); /* 50% width with 20px spacing between items */
    }

    .flex-container {
        display: flex;
        flex-direction: column;
    }

    /* #alertPie {
        height: 200px;
    }*/

    .bottom-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        display: flex;
        justify-content: space-around;
        align-items: center; /* Vertically center the menu items */
        box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Vertically center the content */
        padding: 10px;
        height: 100%; /* Occupy the full height of bottom-menu */
    }

        .menu-item i {
            font-size: 22px;
        }

        .menu-item span {
            font-size: 11px;
            margin-top: 5px;
        }

    .menu-icon {
        font-size: 40px !important;
        color: #FC2686;
    }

    /*#chartContainer {
        height: 200px;
    }*/

    /* Equal width for the <a> items */
    .bottom-menu a {
        flex: 1;
        text-align: center;
    }

    /* Vertically and horizontally align the middle icon */
    .menu-item-centered {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .menu-item-icon {
        font-size: 24px; /* Adjust the icon size as needed */
    }

    .modal-dialog-centered {
        display: flex;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Adjust this selector to target the editor's toolbar specifically */
    .journal-entry-section .dx-htmleditor-toolbar-wrapper {
        order: 2; /* Pushes the toolbar to appear after the content area */
        border-top: 1px solid #ddd;
        border-bottom: none !important;
    }

    .journal-entry-section .dx-quill-container {
        order: 1; /* Ensures content is above the toolbar */
    }

    .page-title-left {
        margin-left: 0px;
    }

    .sidebar-buttons {
        display: none;
    }
}

@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    .open-badge {
        background-color: #FF4097;
    }

    .archived-badge {
        background-color: #9747FF;
    }

    .closed-badge {
        background-color: #00BEFF;
    }

    .in-progress-badge {
        background-color: #FFC60E;
    }

    .no-messages-badge {
        background-color: #CED4DA;
    }

    .unread-messages-badge {
        background-color: #65D382;
    }

    .new-alert-badge {
        background-color: #5072EA;
    }

    .alert-badge {
        color: #fff;
        outline: none;
        font-weight: 700;
        padding: 5.5px 10.2px;
        font-size: 10px;
        border-radius: 10px;
        text-transform: uppercase;
    }
}

.dropdown-menu-end {
    max-height: 300px; /* Adjust this value based on your needs */
    overflow-y: auto; /* Enables vertical scrolling */
}

.completed-icon {
    color: #2bc23a !important;
    font-size: 24px;
    font-weight: bolder;
    margin-left: auto; /* Pushes icon to the right */
}

.redeem-left {
    background-color: #9747FF !important;
    color: white;
    align-content: center;
    justify-content: center;
    padding: 3px;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
}

.redeem-right {
    background-color: white;
    padding: 3px;
    border-color: #9747FF !important;
    border: solid;
    border-width: 3px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    padding: 0.75rem;
}

.bg-purplepink {
    background-color: #9747FF !important;
}

.text-purplepink {
    color: #9747FF !important;
}

.border-purplepink {
    border-color: #9747FF !important;
}

.btn-purplepink {
    background-color: #9747FF;
    color: white;
    border: none;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

    .btn-purplepink:hover {
        background-color: #9747FF;
        color: white;
    }

.greyed-out {
    opacity: 0.5;
    pointer-events: none; /* Prevent interactions */
    position: relative;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8); /* dark overlay */
    z-index: 10;
}

.checklist-locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8); /* dark overlay */
    z-index: 10;
    border-radius: 30px 30px 30px 30px !important;
}

.greyed-out .locked-overlay {
    pointer-events: auto; /* Enable interaction with subscribe button */
}

.subscribeDisplay {
    display: none;
}

.subscribe {
    color: white;
    text-align: center;
    background-color: #9747FF;
    color: #51585e;
    border: none;
    padding: 15px;
    border-radius: 30px;
    font-size: 1.1em;
    width: 150px;
    max-width: 280px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#subscribe:link, #subscribe:visited {
    font-size: medium;
    color: white;
    align-self: center;
}

#privacy {
    list-style-type: none;
}

    #privacy li {
        color: #9747FF;
        text-decoration: underline;
        text-decoration-color: #9747FF;
    }

.btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-purple {
    background-color: #9747FF;
    color: white;
    border: 1px solid #9747FF;
}

.btn-white {
    background-color: white;
    color: #9747FF;
    border: 1px solid #9747FF;
}

.btn-darkgrey {
    background-color: darkgrey;
    color: white !important;
    border: 1px solid darkgrey;
}

.btn-grey {
    background-color: white;
    color: darkgrey;
    border: 1px solid darkgrey;
}

.btn-darkgrey:hover, .btn-darkgrey:focus, .btn-darkgrey:active {
    background-color: darkgrey !important;
    color: white !important;
    border-color: darkgrey !important;
}

.btn-white:hover, .btn-white:focus, .btn-white:active {
    background-color: white;
    color: #9747FF;
    border: 1px solid #9747FF;
}

.btn-grey:hover, .btn-grey:focus, .btn-grey:active {
    background-color: white;
    color: darkgrey;
    border: 1px solid darkgrey;
}

#progressContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    z-index: 100;
}

#progressBar {
    height: 8px;
    width: 0%;
    border-radius: 5px;
    background-color: #9747FF;
    transition: width 0.2s ease-out;
}

.article-content-wrapper {
    overflow: hidden;
}

.page-title-left a {
    color: #9747FF;
}

.btn-purple-custom {
    background-color: #9747FF;
    color: #fff !important;
    border-radius: 30px !important;
    font-weight: 600;
    text-align: left;
/*    padding: 0.75rem 1rem;
*/    /*align-items: center;*/
    justify-content: flex-start;
    transition: background-color 0.3s ease;
/*    font-size: 0.95rem;
*/}

.btn-purple-custom:hover {
    background-color: #9333ea;
    color: #fff;
    text-decoration: none;
}

.btn-green-custom {
    background-color: #83c88b;
    color: #fff !important;
    border-radius: 30px !important;
    font-weight: 600;
    text-align: left;
    /*    padding: 0.75rem 1rem;
*/ /*align-items: center;*/
    justify-content: flex-start;
    transition: background-color 0.3s ease;
}

.chat-button.purple {
    background-color: #9747FF;
    color: white;
}

.btn-green-custom:hover {
    background-color: #83c88b;
    color: white;
}

.btn-green-custom:active {
    background-color: #83c88b !important;
    color: white !important;
}

.points-card {
    background: #A056FF;
    border: none;
    border-radius: 55px;
    box-shadow: 0 8px 32px rgba(142, 103, 253, 0.3);
    animation: slideInDown 0.6s ease-out;
}

    .points-card .card-body {
        padding: 1.5rem;
    }

.points-icon {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .points-icon i {
        font-size: 24px;
        color: #ffd700;
    }

.points-title {
    color: white;
    font-weight: 700;
    font-size: 24.15px;
    margin-bottom: 0.25rem;
}

.emoji {
    position: relative;
    font-size: 3rem;
}

.points-subtitle {
    color: #FFFFFF;
    font-size: 15.51px;
    font-weight: 500;
}

.points-close {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

    .points-close:hover {
        color: white;
        opacity: 1;
    }

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.points-card-fade-out {
    animation: fadeOutUp 0.5s ease-in forwards;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .points-card .card-body {
        padding: 1.25rem;
    }

    .points-icon {
        width: 50px;
        height: 50px;
    }

        .points-icon i {
            font-size: 20px;
        }

    .points-title {
        font-size: 1.1rem;
    }

    .points-subtitle {
        font-size: 0.9rem;
    }
}

.chat-menu-button-nav-link > span, .chat-menu-button-nav-link > i,
.check-in-menu-button-nav-link > span, .check-in-menu-button-nav-link > i,
.alert-menu-nav-link > span, .alert-menu-nav-link > i {
    color: white !important;
}

.menu-item {
    color: #6d7080;
}