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

body {
   padding: 0;
   margin: 0 0 30px;
   background: white;
   font-family: "Open Sans", serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-variation-settings:
      "wdth" 100;
   font-size: 10pt;
   display: flex;
   color: #595959;
   flex-direction: column;
}

input,
select,
textarea {
   font-family: inherit;
}

/* Target the date input specifically */
input[type="date"] {
   /* This helps ensure the placeholder is treated correctly */
   -webkit-appearance: none;
   display: block;
}

/* Style the placeholder text (e.g., "mm/dd/yyyy") for WebKit browsers */
input[type="date"]::-webkit-datetime-edit-text {
   color: #999; /* A visible gray color for the placeholder */
   padding: 0 0.2em;
}

/* Style the text *after* a date has been selected */
input[type="date"]:valid::-webkit-datetime-edit-text {
   color: #000000; /* Black for the actual date value */
}

body>header>section.top {
   background-color: white;
   height: 50px;
}

body>header>section.top>.left {
   float: left;
   width: 50%;
   background-image: url('images/empact_logo.svg');
   background-repeat: no-repeat;
   background-position: 20px center;
   height: 50px;
   background-color: white;
   background-size: 80px;
}

body>header>section.top>.right {
   background-color: #ffffff;
   padding: 7px;
   height: 50px;
}

body>header>section.bottom {
   color: white;
   height: 60px;
}

body>header>section.bottom>.left {
   float: left;
   width: 50%;
   background-color: var(--primary);
   height: 60px;
   display: table;
}

body.anonymous>header>section.bottom>.left {
   width: auto;
   float: none;
}

body.anonymous>header>section.top>.left {
   width: 100%;
   background-color: #E0E0E0;
}

body.anonymous>header>section.top>.left .description {
   margin-left: 130px;
   display: inline-block;
   color: transparent;
   /* make invisible against background color */
}

body.anonymous>header>section.top>.left>h1 {
   text-align: right;
   padding-right: 20px;
}

body>header>section.bottom>.right {
   background-color: var(--primary);
   height: 60px;
   display: table;
   width: 50%;
}

body>header>section.bottom>.left .page_heading {
   _font-size: 25px;
   _line-height: 60px;
   padding-left: 20px;
   white-space: nowrap;
   font-size: calc(5px + 1vw);
   display: table-cell;
   vertical-align: middle;
}

body>header>section.bottom>.left .page_heading .page_subheading {
   font-weight: bold;
   font-size: calc(5px + 0.5vw);
}

body>header>section.bottom>.right .login_user {
   text-align: right;
   padding-right: 20px;
   display: table-cell;
   vertical-align: middle;
   font-size: calc(5px + 0.8vw);
}

body>header>section.bottom>.right .login_user .user_name .user_id {
   margin-left: 10px;
   display: none;
}

.footer {
   margin: auto;
   text-align: center;
}

footer {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   text-align: center;
   box-shadow: 0px 5px 10px 0px #888888;
   z-index: 1000;
}

footer .content {
   line-height: 30px;
   height: 30px;
}

footer .sub-menu>li>a {
   margin-left: 20px;
}

footer .sub-menu>li.overflow-header>a {
   margin-left: 0px;
}

.page-pre-loader {
   background: url(images/empact_loading.gif) center no-repeat var(--primary);
   background-size: 200px;
}

a {
   color: #595959;
}

a:hover {
   color: var(--primary);
}

a.task_open {
   color: #FFFFFF;
}

a.task_open:hover {
   color: #ce0000;
}

a.disabled {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
}

.login_banner {
   background-image: url('images/empact_logo.svg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   height: 130px;
   width: 350px;
   _border-radius: 12px;
   margin: auto;
   _margin-left: -50px;
   _margin-right: -50px;
   _margin-top: 0;
   background-color: transparent;
   _box-shadow: 0px 0px 5px 0px #888;
}

body>header a {
   color: white;
}

main {
   _padding-top: 130px;
   margin-left: 10px;
   margin-right: 10px;
   _margin: 0;
}

a.edit {
   display: inline-block;
   cursor: pointer;
   height: 30px;
   width: 30px;
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url('images/edit.svg');
}

.allow-push-notification-bar {
   display: block;
   position: fixed;
   top: 5rem;
   align-self: center;
   border: 1px solid var(--primary);
   padding: 1rem;
   text-align: center;
   border-radius: 1rem;
   background-color: white;
}

/* --- Notification Mockup Styles --- */

.notification-mockup {
   display: flex;
   align-items: flex-start;
   padding: 12px;
   border-radius: 8px;
   background-color: #f0f2f5;
   /* Light grey background, similar to OS notifications */
   border: 1px solid #e0e0e0;
   max-width: 400px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   margin-bottom: 8px;
}

.notification-icon {
   flex-shrink: 0;
   margin-right: 12px;
}

.notification-icon img {
   width: 48px;
   height: 48px;
   border-radius: 6px;
   object-fit: cover;
   background-color: #fff;
}

.notification-content {
   flex-grow: 1;
   min-width: 0;
   /* Prevents text from overflowing */
}

.notification-title {
   font-weight: 600;
   font-size: 15px;
   color: #1c1e21;
   margin-bottom: 2px;
}

.notification-body {
   font-size: 14px;
   color: #333;
   line-height: 1.4;
   white-space: normal;
   /* Allow text to wrap */
}

.notification-url {
   font-size: 12px;
   color: #65676b;
   margin-top: 4px;
   font-weight: 500;
}

/* --- Toggle Link Styles --- */
.toggle-raw-payload {
   font-size: 12px;
   color: #007bff;
   text-decoration: none;
   cursor: pointer;
}

.toggle-raw-payload:hover {
   text-decoration: underline;
}

/* --- Raw Payload Pre-Block Style --- */
pre {
   margin-top: 8px;
   background-color: #2d2d2d;
   color: #f8f8f2;
   padding: 10px;
   border-radius: 5px;
   white-space: pre-wrap;
   /* Wrap long lines */
   word-break: break-all;
}

/*
 * nosession template
 */
body>header.nosession {
   _position: absolute;
}

body>header.nosession .banner {
   background-image: url('images/empact_logo.svg');
   background-repeat: no-repeat;
   background-position: center center;
   height: 150px;
   background-size: auto 130px;
}

main.nosession .content {
   width: 80%;
   margin: auto;
}

main.nosession .content h1 {
   font-size: 16pt;
   border-bottom: 2px solid #D0D0D0;
   padding-bottom: 5px;
}

#page_heading {
   line-height: 50px;
   font-style: italic;
   font-weight: bold;
   font-size: 12pt;
   margin-left: 60px;
   display: inline-block;
   _color: #595959;
   height: 20px;
   line-height: 20px;
   padding: 5px;
   border-radius: 15px;
   vertical-align: middle;
   top: 10px;
   position: absolute;
   padding-left: 10px;
   padding-right: 10px;
   _background: linear-gradient(#D0D0D0, #EEE);
   _min-width: 400px;
   background-color: #555;
   color: white;
}

nav {
   background: #25386B;
   padding: 10px;
   padding-top: 5px;
   color: white;
   border-radius: 5px;
   background: linear-gradient(#D0D0D0, #8C8C8C);
   background: transparent;
   float: right;
}

nav a {
   color: white;
   vertical-align: middle;
}

#nav_login_user {
   float: left;
   _text-shadow: 1px 1px 2px #333;
   text-align: right;
   padding-right: 10px;
   color: #595959;
   padding-top: 3px;
}

#nav_login_user .user_name {
   font-weight: bold;
}

#nav_login_user .role_name {
   font-size: 80%;
}

#nav_menu_container {
   float: right;
}

#nav_menu_container>ul>li>a {
   height: 30px;
   width: 30px;
}

#nav_menu>li {
   width: 35px;
   height: 35px;
}

#nav_menu_admin {
   background-image: url('images/navbar_admin.svg');
}

#nav_menu_assessment_index {
   background-image: url('images/navbar_assessments.svg');
}

#nav_menu_account {
   background-image: url('images/navbar_account.svg');
}

#nav_menu_help {
   background-image: url('images/navbar_help.svg');
}

#nav_menu_report_type_index {
   background-image: url('images/navbar_reports.svg');
}

#nav_menu_chat_to_ai {
   background-image: url('images/navbar_chat_to_ai.svg');
}

#nav_menu_dashboard_index,
#nav_menu_dashboard_admin,
#nav_menu_dashboard_org_admin,
#nav_menu_dashboard_service_provider,
#nav_menu_dashboard_business {
   background-image: url('images/navbar_home.svg');
}

/* Bottom Navigation Bar Styles */
#bottom-navbar {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: space-around;
   align-items: center;
   background-color: #ffffff;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   height: 60px;
   padding: 5px 0;
}

/* For larger screens, limit the width */
@media (min-width: 768px) {
   #bottom-navbar {
      max-width: 600px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 20px 20px 0 0;
   }
}

.bottom-nav-item {
   flex: 1;
   text-align: center;
   padding: 5px;
   max-width: 80px;
}

.bottom-nav-home {
   transform: translateY(-15px);
   background-color: #ffffff;
   border-radius: 50%;
   box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
   padding: 10px;
   margin-top: -20px;
}

.bottom-nav-icon {
   height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.bottom-nav-icon img {
   max-height: 24px;
   max-width: 24px;
}

.bottom-nav-label {
   font-size: 12px;
   margin-top: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.bottom-nav-item a {
   text-decoration: none;
   color: #555;
   display: block;
}

.bottom-nav-home a {
   color: #007bff;
   /* Make the home button text stand out with a different color */
}

/* Make the nav disappear when keyboard appears on mobile */
@media (max-height: 400px) {
   #bottom-navbar {
      display: none;
   }
}

.login_container {
   margin: auto;
   margin-top: 30px;
   border: 0;
   border-top: 0;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   display: table;
   font-size: 15pt;
}

#login_select_user_role,
#activation_container {
   margin: auto;
   padding: 10px;
   background: white;
   border: 2px solid #D0D0D0;
   border-top: 0;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   display: table;
   width: clamp(30rem, 30%, 40rem);
}

#register_form_container,
#register_request_form_container,
#password_reset_form_container,
#self_register_form_container,
#self_register_confirm_form_container,
#user_activate_form_container {
   width: 600px;
   font-size: 12pt;
}

.invite_code_message {
   max-width: 270px;
}
.invite_code_message.success {
   max-width: 270px;
   margin: 5px;
}

#register_form>table {
   width: 100%;
}

#user_activate_form_container .user_details {
   text-align: center;
   font-weight: bold;

}

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

.login_container h1 {
   text-align: center;
   font-size: 16pt;
   border-bottom: 2px solid #D0D0D0;
   padding-bottom: 5px;
   font-style: italic;
}

.login_container .button_container {
   text-align: center;
   padding: 5px;
}

div.button_container a.reject.clicked {
   background-color: lightgray;
   color: gray;
   border-color: lightgray;
}

.login_container .instructions {
   font-size: 80%;
   width: auto;
   min-width: 400px;
   margin: 10px;
}

.login_container .tabular-form {
   margin: auto;
}

#login_form {
   text-align: center;
   margin-top: 30px;
   margin-left: 50px;
   margin-right: 50px;
   max-width: 450px;
}

#login_form .tabular-form {
   margin: 3rem auto;
}

#login_form .tabular-form tr td:first {
   padding: 0;
}

#login_form input[type="text"],
#login_form input[type="password"] {
   box-shadow: 0px 0px 10px 0px #DDD;
   border-radius: 2rem;
   padding: 0.6rem 1.5rem;
   color: black;
   border: none;
   margin-bottom: 0.5rem;
   font-size: 16pt;
   background-color: #fff;
}

#login_form input::placeholder {
   color: #B3B3B3;
}

#login_form .forgot_password {
   margin-top: 10px;
}

#login_form .footer {
   margin-top: 30px;
   /* background-color: #DDD; */
   padding: 15px;
   text-align: center;
}

button.login {
   font-size: 14pt;
   box-shadow: 0px 0px 2px 0px #555;
}

#activation_container {
   width: 80%;
   max-width: 500px;
}

#activation_instructions {
   margin: 10px;
}

.otp_instructions {
   font-size: 12pt;
}

.otp_timer {
   text-align: center;
   background-color: #F0F0F0;
   padding: 5px;
   border-radius: 5px;
}

button.otp_alt_actions {
   border: 0;
   font-weight: bold;
   /* color: #555; */
   margin: 0px;
   font-size: 9pt;
   cursor: pointer;
}

.download_link {
   text-decoration: underline;
   cursor: pointer;
}
.download_link:hover {
   font-weight: bold;
}

button.otp_alt_actions:hover {
   text-decoration: underline;
}

#search_entity {
   overflow: auto;
}

div.pager {
   text-align: right;
   border: 0;
}

div.pager.top {
   margin-top: 20px;
}

div.pager .page_controls .page_selector {
   height: 26px;
   width: 22px;
   border: 0;
   background-color: #CCC;
   vertical-align: sub;
   border-radius: 3px;
   vertical-align: bottom;
}

/*
 * generic terms container
 */
.terms_container {
   text-align: center;
   background-color: #DDD;
   border-radius: 20px;
   width: 50%;
   margin: auto;
   margin-top: 20px;
   padding: 20px;
}

.terms {
   _margin: auto;
   _margin-top: 20px;
   _width: 50%;
   text-align: left;
}

.pdf_container {
   border: 5px solid #CCC;
   border-radius: 5px;
}

.pdf_container a {
   margin: 10px;
}

table.tabular-form {
   background: transparent;
}

table.mvc-report tr.selected {
   background-color: #EEE;
}

table.mvc-report>tbody td input[type="checkbox"] {
   vertical-align: super;
}

#toggle_search_form,
#toggle_report_filters_form {
   background: none;
   background-image: url('images/open_search_dialog.svg');
   background-repeat: no-repeat;
   background-position: center center;
   height: 33px;
   width:50px;
   padding:0;
}

input,
select,
textarea {
   font-size: 10pt;
   background: #F7F7F7;
   box-shadow: 0px 0px 10px 0px #DDD;
   border-radius: 2rem;
   padding: 0.6rem 1.5rem;
   color: black;
   border: none;
   margin-bottom: 0.5rem;
   background-color: #fff;
   /* max-width: 450px; */
   width: 100%;
}

textarea.success,
input.success,
select.success,
textarea.error,
input.error,
select.error {
   padding: 0.6rem 1.5rem !important;
}

select {
   /* background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%, white; */
   padding: 0.6rem 2rem 0.6rem 1.5rem;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 10px 12px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

[type="checkbox"],
[type="radio"] {
   width: auto;
}

div.shuttlebox select {
   padding: 10px !important;
   background: white;
}

div.shuttlebox_left_input_container {
   background: white;
   border-radius: 1rem;
   box-shadow: 0px 0px 10px 0px #DDD;
   margin: 2px 2px 5px 2px;
}

div.shuttlebox_left_input_container>* {
   box-shadow: none;
   margin: 0;
}

div.shuttlebox_left_input_container .shuttlebox_left_filter {
   float: left;
   display: block;
   width: 100%;
   height: 30px;
   border-bottom: solid 2px #EEE;
}


.multi-select {
   display: flex;
   box-sizing: border-box;
   flex-direction: column;
   position: relative;
   width: 100%;
   user-select: none;
}

.multi-select .multi-select-header {
   border: 1px solid #dee2e6;
   padding: 7px 30px 7px 12px;
   overflow: hidden;
   gap: 7px;
   min-height: 45px;
}

.multi-select .multi-select-header::after {
   content: "";
   display: block;
   position: absolute;
   top: 50%;
   right: 15px;
   transform: translateY(-50%);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
   height: 12px;
   width: 12px;
}

.multi-select .multi-select-header.multi-select-header-active {
   border-color: #c1c9d0;
}

.multi-select .multi-select-header.multi-select-header-active::after {
   transform: translateY(-50%) rotate(180deg);
}

.multi-select .multi-select-header.multi-select-header-active+.multi-select-options {
   display: flex;
}

.multi-select .multi-select-header .multi-select-header-placeholder {
   color: #65727e;
}

.multi-select .multi-select-header .multi-select-header-option {
   display: inline-flex;
   align-items: center;
   background-color: #f3f4f7;
   font-size: 14px;
   padding: 3px 8px;
   border-radius: 5px;
}

.multi-select .multi-select-header .multi-select-header-max {
   font-size: 14px;
   color: #65727e;
}

.multi-select .multi-select-options {
   display: none;
   box-sizing: border-box;
   flex-flow: wrap;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 999;
   margin-top: 5px;
   padding: 5px;
   background-color: #fff;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
}

.multi-select .multi-select-options::-webkit-scrollbar {
   width: 5px;
}

.multi-select .multi-select-options::-webkit-scrollbar-track {
   background: #f0f1f3;
}

.multi-select .multi-select-options::-webkit-scrollbar-thumb {
   background: #cdcfd1;
}

.multi-select .multi-select-options::-webkit-scrollbar-thumb:hover {
   background: #b2b6b9;
}

.multi-select .multi-select-options .multi-select-option,
.multi-select .multi-select-options .multi-select-all {
   padding: 4px 12px;
   height: 42px;
}

.multi-select .multi-select-options .multi-select-option .multi-select-option-radio,
.multi-select .multi-select-options .multi-select-all .multi-select-option-radio {
   margin-right: 14px;
   height: 16px;
   width: 16px;
   border: 1px solid #ced4da;
   border-radius: 4px;
}

.multi-select .multi-select-options .multi-select-option .multi-select-option-text,
.multi-select .multi-select-options .multi-select-all .multi-select-option-text {
   box-sizing: border-box;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: inherit;
   font-size: 16px;
   line-height: 20px;
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio {
   border-color: #40c979;
   background-color: #40c979;
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio::after,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio::after {
   content: "";
   display: block;
   width: 3px;
   height: 7px;
   margin: 0.12em 0 0 0.27em;
   border: solid #fff;
   border-width: 0 0.15em 0.15em 0;
   transform: rotate(45deg);
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-text,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-text {
   color: #40c979;
}

.multi-select .multi-select-options .multi-select-option:hover,
.multi-select .multi-select-options .multi-select-option:active,
.multi-select .multi-select-options .multi-select-all:hover,
.multi-select .multi-select-options .multi-select-all:active {
   background-color: #f3f4f7;
}

.multi-select .multi-select-options .multi-select-all {
   border-bottom: 1px solid #f1f3f5;
   border-radius: 0;
}

.multi-select .multi-select-options .multi-select-search {
   padding: 7px 10px;
   border: 1px solid #dee2e6;
   border-radius: 5px;
   margin: 10px 10px 5px 10px;
   width: 100%;
   outline: none;
   font-size: 16px;
}

.multi-select .multi-select-options .multi-select-search::placeholder {
   color: #b2b5b9;
}

.multi-select .multi-select-header,
.multi-select .multi-select-option,
.multi-select .multi-select-all {
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
   align-items: center;
   border-radius: 5px;
   cursor: pointer;
   display: flex;
   align-items: center;
   width: 100%;
   font-size: 16px;
   color: #212529;
}

input.ajax_spinner {
   background-image: url('images/ajax_loader-indicator-16px.gif');
   background-repeat: no-repeat;
   background-position: right center;
}

.role_added_user {
   color: green;
   text-decoration: none;
}

.role_deleted_user {
   text-decoration: line-through;
   color: red;
}

form.data_input,
.form_container {
   border: 1px solid lightgray;
   border-top: 0px;
   _display: table;
   margin: auto;
   padding: 10px;
   border-radius: 10px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   background: #F8F8F8;
   _overflow: auto;
}

.form_container.read {
   border: 1px solid lightgray;
   border-radius: 0;
}

form.data_input.noborder {
   border: 0;
}

form.data_input .instructions,
.form_container .instructions {
   /* an instructions container within a form container */
   _width: 500px;
   margin: 10px;
}

td>img {
   vertical-align: middle;
}

#nav_menu #nav_menu_page_settings {
   width: 30px;
   height: 30px;
}

#nav_menu_container ul li {
   padding: 0;
}

#nav_menu_container ul li ul {
   top: 50px;
   right: 0;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   background: #ffffff9e;
   box-shadow: 0px 4px 12px -5px #888;
}

#nav_menu_container ul li ul li {
   padding: 5px 10px;
   border-radius: 25px;
   background-color: var(--primaryLight);
   margin: 5px 0px;
}

#cpanel_container.open {
   top: 130px;
}



/*
 * buttons
 */
button.accept,
button.decline,
button.defer {
   color: white;
   font-weight: bold;
   cursor: pointer;
   height: 24px;
   border-radius: 12px;
   border: 0;
   _line-height: 20px;
   _vertical-align: middle;
   min-width: 50px;
   padding: 0px 10px;
   font-size: 10pt;
}

button.accept {
   background: #1B8C35;
}

button.decline {
   background: #BA3213;
}

button.defer {
   background: #666;
}

button.delete {
   border: 0;
   height: 25px;
   width: 25px;
   background: none;
   background-image: url('images/delete_row.svg');
   cursor: pointer;
}

button.calltoaction {
   padding: 0.5rem 5rem;
   text-transform: uppercase;
}

.button_WHERAMI {
   background-color: rgb(85, 85, 85);
   color: white;
   font-weight: bold;
   display: inline-block;
   _width: 70px;
   text-align: center;
   padding: 2px;
   border-radius: 5px;
   margin: 3px;
   padding-left: 4px;
   padding-right: 4px;
   cursor: pointer;
}

button.ajax_spinner,
button.ajax_spinner:hover {
   transition: none;
   background-color: #EEE;
   color: #BBB;
   border-color: #BBB;
   background-image: url('images/ajax_loader-indicator-16px.gif');
   background-repeat: no-repeat;
   background-position: center center;
}

.action-buttons {
   /* margin-bottom: 20px; */
   display: flex;
   justify-content: end;
}

.action-buttons .btn {
   margin-right: 10px;
   padding: 10px 15px;
   color: #fff;
   cursor: pointer;
}

.action-buttons .btn-group .btn,
.btn-group .btn {
   margin-left: 0;
   margin-right: 0;
   border-radius: 0;
   padding: 10px 15px;
   color: #fff;
   cursor: pointer;
   float: left;
}

.action-buttons .btn-group:after,
.btn-group:after {
   content: "";
   clear: both;
   display: table;
}

.action-buttons .btn-group .btn:not(:last-child),
.btn-group .btn:not(:last-child) {
   border-right: none;
}

.action-buttons .btn-group .btn:first-child,
.btn-group .btn:first-child {
   border-radius: 25px 0px 0px 25px;
}

.action-buttons .btn-group .btn:last-child,
.btn-group .btn:last-child {
   border-radius: 0px 25px 25px 0px;
}

.action-buttons .btn-group .btn:only-child,
.btn-group .btn:only-child {
   border-radius: 25px;
}

/*
 * messages
 */
.app_messages {
   font-size: 9pt;
}

.app_messages ul {
   list-style: none;
   padding: 0;
}

.thumbnail:not(td) {
   border: 3px solid #CCC;
   border-radius: 5px;
   background-color: white;
   background-repeat: no-repeat;
   background-position: center center;
   box-shadow: 0px 0px 5px 0px #555;
   min-width: 100px;
   min-height: 100px;
   margin: 5px;
   vertical-align: middle;
}

.loading {
   background-image: url('images/ajax_loader-indicator-32px.gif');
   background-repeat: no-repeat;
   background-position: center center;
   min-height: 35px;
}

.app_overlay,
.dashboard_overlay {
   background-color: #69809233;
   background-image: url('images/ajax_loader-indicator-32px.gif');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 32px;
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   display: none;
   animation: opac 0.8s;
}

/*
 * role accept
 */
.role_accept h1 {
   text-align: center;
   width: 80%;
   margin: auto;
   margin-top: 20px;
   padding: 10px;
   border-bottom: 2px solid #DDD;
}

.role_terms .button_container {
   margin: 20px;
   text-align: center;
}

/*
 * dashboard
 */
.dashboard {
   overflow: auto;
   _border: 1px solid #CCC;
   background-color: #F0F0F0;
   padding: 20px;
   margin: 10px;
}

.dashboard #entity_search_results {
   background: beige;
}

.dashboard>h1 {
   padding: 10px;
   font-size: 14pt;
   font-style: italic;
   cursor: pointer;
   margin: 0;
   color: var(--primary);
   border: 2px solid #dadada;
   background-color: var(--primaryLight);
   background-image: url('images/minimize.svg');
   background-repeat: no-repeat;
   background-position: 5px center;
   background-size: 25px;
   padding-left: 35px;
   border-radius: 30px 30px 0 0;
   border-bottom: none;
}

.dashboard>h1.minimized {
   border-radius: 30px;
   border-bottom: 2px solid #dadada;
   background-image: url('images/maximize.svg');
}

.dashboard .grid-item-container.minimized {
   border: none;
   border-radius: 0;
}

.dashboard .grid-item-container {
   border: 2px solid #dadada;
   border-top: none;
   border-radius: 0 0 30px 30px;
}

.dashboard div.grid-item {
   _float: left;
   min-height: 40px;
   min-width: 250px;
   padding: 15px;
   background-color: white;
   margin-bottom: 10px;
   _box-shadow: 0px 0px 5px 0px #888;
   _border: 1px solid #CCC;
   border-radius: 15px;
   overflow: auto;
}

.dashboard div.grid-item h1 {
   margin-top: 0;
   font-style: italic;
}

.dashboard div.grid-item h1.show {}

.dashboard div.grid-item h1.hide {}

.dashboard div.grid-item>div {
   max-height: 400px;
   overflow: auto;
}

.flex-parent {
   display: flex !important;
   flex-wrap: wrap;
   justify-content: center;
}

.flex-box {
   flex: 0 1 170px;
   /*  No stretching: */
   margin: 5px;
}

.flex-parent.stretch .flex-box {
   flex: 1 1 500px;
   /*  Stretching: */
   margin: 5px;
}

div.dashboard {
   padding: 0;
   margin: auto;
   display: block;
   margin-top: 25px;
   background-color: transparent;
}

div.dashboard.outstanding {
   margin: 0 0 15px 0;
}

div.dashboard li {
   display: inline-block;
}

div.dashboard.master-admin>div {
   display: inline-block;
   margin: 5px;
   background-color: var(--primary);
   border-radius: 10px;
   width: 170px;
   margin-bottom: 30px;
   margin-right: 30px;
}

div.dashboard.master-admin>div>h1 {
   color: white;
   margin: 0;
   margin-left: 10px;
   margin-bottom: 7px;
   margin-top: 5px;
   border-bottom: 1px solid white;
   margin-right: 10px;
   font-size: 10pt;
   height: 38px;
}

div.dashboard.master-admin>div::after {
   content: "";
   background-repeat: no-repeat;
   background-position: center 0;
   background-size: contain;
   display: block;
   height: 64px;
   width: 64px;
   position: relative;
   right: -110px;
   top: 20px;
   border: 4px solid white;
   border-radius: 64px;
   margin-top: -30px;
}

div.dashboard.master-admin>div.dashboard-content::after {
   background-image: url('images/dashboard-content.svg');
}

div.dashboard.master-admin>div.dashboard-surveys::after {
   background-image: url('images/dashboard-surveys.svg');
}

div.dashboard.master-admin>div.dashboard-users::after {
   background-image: url('images/dashboard-users.svg');
}

div.dashboard.master-admin>div.dashboard-roles::after {
   background-image: url('images/dashboard-roles.svg');
}

div.dashboard.master-admin>div.dashboard-orgs::after {
   background-image: url('images/dashboard-orgs.svg');
}

div.dashboard.master-admin>div.dashboard-chat::after {
   background-image: url('images/dashboard-chat.svg');
}

div.dashboard.master-admin>div>ul {
   padding-left: 10px;
}

div.dashboard.master-admin>div>ul>li {
   display: inline-block;
   height: 30px;
   width: 30px;
   background-repeat: no-repeat;
   background-position: center 0;
   background-size: contain;
   cursor: pointer;
   margin-right: 5px;
}

div.dashboard.master-admin>div>ul>li a {
   display: inline-block;
   height: 30px;
   width: 30px;
}

div.dashboard.master-admin>div>ul>li.search {
   background-image: url('images/dashboard-search.svg');
}

div.dashboard.master-admin>div>ul>li.add {
   background-image: url('images/dashboard-add.svg');
}

div.dashboard.master-admin>div>ul>li.bulk_import {
   background-image: url('images/dashboard-bulk_import.svg');
}

div.dashboard.master-admin>div>ul>li.reports {
   background-image: url('images/dashboard-graphs.svg');
}

div.dashboard.master-admin>div>ul>li.chat-to-ai {
   background-image: url('images/dashboard-chat-to-ai.svg');
}

div.dashboard.master-admin>div>ul>li.chat-to-user {
   background-image: url('images/dashboard-chat-to-user.svg');
}

div.outstanding_tasks>table {
   width: 100%;
   border-collapse: collapse;
}

div.outstanding_tasks>table>tbody>tr {
   border-bottom: 1px dotted #939393;
}

div.outstanding_tasks>table>tbody>tr:last-child {
   border-bottom: 0;
}

div.outstanding_tasks>table>tbody>tr:hover {
   background-color: #F5F5F5;
}

div.outstanding_tasks>table>tbody>tr>td {
   padding: 5px
}

div.outstanding_tasks>table>tbody>tr>td.update {
   width: 40px;
}

div.outstanding_tasks>table>tbody>tr>td.entity {
   width: 1%;
   white-space: nowrap;
}

div.outstanding_tasks>table>tbody>tr>td.entity>div {}

div.outstanding_tasks td.task_name a {
   font-weight: bold;
   _font-style: italic;
}

div.outstanding_tasks td.entity>div.task_name,
div.outstanding_tasks td.entity>div.category_name {
   font-size: 8pt;
   _font-weight: bold;
}

div.outstanding_tasks td.entity>div.entity_name {
   _font-size: 12pt;
   _font-weight: bold;
}

div.outstanding_tasks>table td.update>a {
   background-image: url('images/cpanel_widget_edit.svg');
   background-repeat: no-repeat;
   background-position: center center;
   display: inline-block;
   width: 40px;
   height: 40px;
}

div.outstanding_tasks>table td.workflow_message>div {
   border-left: 4px solid #DDD;
   padding: 10px;
}

div.outstanding_tasks>table td.workflow_message .date_queued {
   font-size: 8pt;
}

div.outstanding_tasks>table td.workflow_message .author {
   margin-top: 10px;
   font-style: italic;
   font-weight: bold;
}

div.outstanding_tasks>table td.workflow_message .message_text p {
   margin: 0;
}

div.outstanding_tasks>table td.workflow_message .message_text ul {
   margin: 0;
   padding-left: 1em;
}

span.outstanding_task_count {
   display: inline-block;
   margin: 0px 10px;
   border: solid 3px;
   padding: 0px 10px;
   background: var(--secondaryDarkBlueOpacity);
   border-radius: 15px !important;
   color: var(--secondaryDarkBlue);
}

.service-provider #outstanding_tasks_section {
   padding: 10px;
}

.service-provider #assigned_orgs {
   padding: 10px;
}

.service-provider #assigned_orgs ul>li {
   border-radius: 25px 0 0 25px;
   margin-bottom: 5px;
   cursor: pointer;
}

.service-provider #assigned_orgs ul>li:hover {
   background-color: var(--secondaryGreenOpacity);
   color: var(--primary);
   border-color: var(--green);
}

.service-provider #assigned_orgs ul>li.selected {
   background-color: var(--primary);
   color: var(--white);
   border-color: var(--darkBlueBorder);
}

.dashboard .workflow_task .speech {
   max-width: 250px;
}

.dashboard .workflow_task .speech_bubble {
   width: 300px;
}

/*
 * workflow_task
 */
.workflow_task .header .speech_bubble {
   width: auto;
}

.workflow_task .header .speech {
   max-width: none;
}

div.workflow_task {
   border: 2px solid lightgray;
   border-top: 0px;
   margin: auto;
   padding: 10px;
   border-radius: 10px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   background: white;
}

div.workflow_task div.header h1 {
   font-style: italic;
   _border-bottom: 1px solid #555;
   float: none;
   margin-bottom: 8px;
}

div.workflow_task .header .instructions {
   margin: 10px;
   _border: 1px solid #CCC;
   padding: 5px;
   _background-color: cornsilk;
   font-style: italic;
   _border-bottom: 1px solid #DDD;
}

div.workflow_task .header .instructions h2,
div.workflow_task .header .message h2 {
   margin: 0;
}

div.workflow_task .header .message {
   margin: 10px;
   _border: 1px solid #CCC;
   padding: 5px;
   background-color: cornsilk;
   font-style: italic;
   border-radius: 5px;
   box-shadow: 0px 0px 5px 0px #888;
   background-image: url('images/user.svg');
   background-repeat: no-repeat;
   background-position: 7px center;
   min-height: 70px;
   padding: 5px 5px 5px 65px;
}

div.workflow_task .header .message p {
   margin: 0;
}

div.workflow_task .header .message ul {
   margin: 0;
}

div.workflow_task .header .dates {
   font-size: 9pt;
}

div.workflow_task .header .days_due_text {
   background-color: none;
   color: #AA0000;
   font-weight: bold;
   padding: 5px;
   border-radius: 4px;
   text-transform: uppercase;
   font-size: 11pt;
}

div.workflow_task .header .alert {
   _border: 2px solid;
   margin: 10px;
   padding: 12px 5px 12px 45px;
   background-repeat: no-repeat;
   background-position: 7px center;
   border-radius: 5px;
   text-align: left;
   color: white;
   font-style: italic;
   font-weight: bold;
   background-color: firebrick;
   background-image: url('images/feedback_warning.svg');
}

div.workflow_task_message_text {
   padding: 5px;
   border-left: 1px solid #CCC;
   border-right: 1px solid #CCC;
}

div.workflow_task_message_text p {
   margin: 0;
}

div.workflow_task_message_text ul {
   margin: 0;
   padding-left: 1em;
}

div.workflow_task_message_text .author {
   font-style: italic;
   font-size: 80%;
}

div.workflow_task form.data_input {
   border: 0;
}

div.workflow_task .button_container {
   padding: 5px;
   background-color: #DDD;
}

.workflow_task_due_days {
   font-weight: bold;
   color: white;
   padding: 2px;
   padding-left: 5px;
   padding-right: 5px;
   border-radius: 3px;
   display: inline-block;
   margin: 3px;
   text-transform: uppercase;
}

.workflow_task_due_days.over {
   background-color: #AA0000;
}

.workflow_task_due_days.today {
   background-color: orange;
}

.workflow_task_due_days.under {
   background-color: cornflowerblue;
}

.task_outstanding,
.task_done {
   display: block;
   color: white;
   font-weight: bold;
   font-style: italic;
   padding: 4px;
   border-radius: 4px;
   text-align: center;
}

.task_outstanding {
   background-color: #AA0000;
}

.task_done {
   background-color: forestgreen;
}

.task_outstanding a,
.task_done a {
   color: white;
   font-weight: bold;
   font-style: italic;
}

.cm_override_pricing {
   _display: inline-block;
   background-color: #AA0000;
   padding: 7px;
   color: white;
   border-radius: 4px;
   font-weight: bold;
   text-transform: uppercase;
}

.cm_override_pricing input {
   vertical-align: sub;
}

.reject_reason_input {
   padding: 10px;
   line-height: 2em;
}

.workflow_task {
   background-color: #F0F0F0;
   padding: 10px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

.workflow_task .selected {
   background-color: cornflowerblue;
   color: white;
}

.workflow_task .viewing {
   background-color: lightgoldenrodyellow;
   color: inherit;
}

.workflow_task td.name {
   cursor: pointer;
   text-decoration: underline;
}

.workflow_task table,
.workflow_task table {
   /* border: 1px solid lightgray; */
}

.workflow_task table.uom_identifiers tr.uom td,
.workflow_task table.uom_identifiers tr.uom td {
   font-weight: bold;
}

.workflow_task table.uom_identifiers td,
.workflow_task table.uom_identifiers td {
   padding: 2px;
}

.workflow_task div.matching_identifier,
.workflow_task div.matching_identifier {
   cursor: pointer;
   text-decoration: underline;
   margin-bottom: 5px;
}

.workflow_task tr.selected {
   background-color: darkseagreen;
   color: white;
   font-weight: bold;
}

.workflow_task tr.selected:hover {}

.workflow_task h1 {
   margin-top: 0;
}

#workflow_task a.task_name,
#entity_search_results a.task_name {
   font-weight: bold;
   _font-style: italic;
}

#dialog_workflow_task_rollback div.confirm {
   background-color: whitesmoke;
}

#dialog_workflow_task_rollback table.mvc-report-attr-value {}

div.workflow_task .button_container .item_name {
   margin-left: 10px;
}

div.workflow_task .page_block .rejected_comment {
   display: none;
}

.cpanel_button.workflow_task {
   margin: 0;
   padding: 0;
   background: none;
   background-image: url('images/cpanel_button.svg');
   background-repeat: no-repeat;
   background-position: center center;
}

/*
 * entity_preview_dialog
 */
.load_entity_preview_dialog {
   line-height: 20px;
   _background-color: #E0E0E0;
   _padding: 5px;
   min-width: 2em;
   display: inline-block;
   text-align: center;
   _border-radius: 5px;
   white-space: nowrap;
   _background-image: url('images/load_entity_preview_dialog.svg');
   _background-size: 5px;
   _background-repeat: no-repeat;
   _background-position: right center;
   _padding-right: 18px;
   _padding-left: 0px;
   cursor: pointer;
   text-decoration: underline;
}

.load_entity_preview_dialog:hover {
   _background-color: #F0F0F0;
}

.entity_preview_dialog {
   padding: 10px;
   background-color: white;
   border-radius: 10px;
   box-shadow: 0px 0px 10px 0px #AAA;
   margin-top: 10px;
   margin-bottom: 10px;

}

.entity_preview_dialog .data {
   max-height: 400px;
   overflow: auto;
}

/*
 * fine-uploader
 */
.qq-uploader {
   max-height: none;
}

.qq-upload-list {
   max-height: none;
}

.qq-upload-file {
   height: auto;
}

.qq-thumbnail-selector {
   vertical-align: bottom;
}

#tabs-attachments .qq-thumbnail-selector {
   cursor: pointer;
}

li .qq-thumbnail-selector.tiny {
   border-width: 0;
   background: none;
   box-shadow: none;
   margin: 0;
   vertical-align: bottom;
}

.qq-upload-size-selector.qq-upload-size {
   _width: 50px;
   display: block;
}

.qq-upload-file-selector.qq-upload-file {
   width: auto;
   display: block;
   text-overflow: initial;
}

.qq-upload-button-selector.qq-upload-button {
   width: auto;
   border: 0;
   margin-right: 20px;
   box-shadow: none;
   border-radius: 5px;
   text-transform: uppercase;
}

.qq-upload-button-selector.qq-upload-button.required {
   background-color: #AA0000;
}

.qq-upload-button-selector.qq-upload-button.required.uploaded,
.qq-upload-button-selector.qq-upload-button.single.uploaded {
   display: none !important;
   /* make sure we override display:block added by hide() method */
}

#extra_upload_buttons {
   overflow: auto;
}

.qq-upload-list li {
   line-height: normal;
}

.qq-upload-size {
   cursor: auto;
}

/*
 * attachments
 */
#attachments .thumbnail {
   display: inline-block;
   text-align: center;
   border: 0;
   padding: 5px;
   margin-right: 20px;
}

#attachments .thumbnail img {
   height: 150px;
   display: block;
   margin: auto;
   cursor: pointer;
}

#attachments .thumbnail .type {
   font-weight: bold;
   background-color: #CCC;
   margin-bottom: 5px;
}

/*
 * template
 */
#template_subs_ref {
   background-color: #F0F0F0;
   padding: 10px;
}

#entity_search_results.template #entity_report>tbody>tr>td:nth-child(3)>div {
   white-space: normal;
   min-height: 200px;
   max-height: 400px;
   overflow-y: auto;
   border: 1px dashed #E0E0E0;
   padding: 5px;
   background-color: ivory;
}

/*
 * email_queue
 */
#entity_search_results.email_queue #entity_report>tbody>tr>td.data_html>div {
   white-space: normal;
   max-height: 300px;
   overflow-y: auto;
   border: 1px dashed #E0E0E0;
   padding: 5px;
   background-color: ivory;
   width: 600px;
   font-size: 80%;
}

#entity_search_results.email_queue #entity_report>tbody>tr>td.data_html>div td,
#entity_search_results.email_queue #entity_report>tbody>tr>td.data_html>div th {
   padding: 2px;
}

#entity_search_results.email_queue #entity_report>tbody>tr>td.subject {
   white-space: normal;
}

/*
 * role_delegate
 */
#delegate_roles table {
   _border-collapse: collapse;
}

#delegate_roles table>tbody>tr.pending {
   background-color: palegoldenrod;
   border-bottom: 2px solid white;
}

#delegate_roles table>tbody>tr.pending input {
   border-color: #bcb786;
}

#delegate_roles table>tbody>tr.pending td:first-child {
   color: #5a5740;
}

#delegate_roles table>tbody>tr.active {
   background-color: darkseagreen;
   border-bottom: 2px solid white;
}

#delegate_roles table>tbody>tr.active input {
   border-color: #83ac83;
}

#delegate_roles table>tbody>tr.active td:first-child {
   color: #415641;
}

#delegate_roles table>tbody>tr.current {}

#delegate_roles table>tbody td .update_status {
   padding: 0 !important;
   height: 30px;
   width: 30px;
   margin: 0;
   border: 0;
   background-color: transparent;
   background-position: center center;
   background-size: contain;
}

#login_select_user_role table.tabular-form td:nth-child(2) {
   display: none;
}

#login_select_user_role table.tabular-form>tbody>tr>td:first-child {
   white-space: normal;
}

#login_select_user_role .role_name>a {
   display: block;
   background-color: var(--primary);
   color: white;
   padding: 10px;
   text-decoration: none;
   border: 1px solid var(--primaryLight);
   border-radius: 5px;
   padding-right: 30px;
   /* background-image: url('images/login_role.svg');
   background-repeat: no-repeat;
   background-position: right;
   background-size: 20px;
   background-origin: content-box; */
}

#login_select_user_role .role_name:after {
   content: "";
   display: block;
   width: 20px;
   height: 20px;
   background-image: url("images/login_role.svg");
   background-size: 20px;
   background-repeat: no-repeat;
   background-origin: content-box;
   position: relative;
   right: 5px;
   bottom: 30px;
   float: right;
}

#login_select_user_role .role_name>a:hover {
   box-shadow: 0 0 5px 0 var(--secondaryGreen);
   border: 1px solid var(--secondaryGreen);
}

#login_select_user_role .delegate_status.pending>a {
   background-color: #edb;
   border: 1px solid #edb;
   _color: white;
}

#login_select_user_role .delegate_status.pending {
   _border-bottom: 2px solid darkorange;
}

#login_select_user_role .delegate_status.active>a {
   background-color: #8A8;
   border: 1px solid #8A8;
   _color: white;
}

#login_select_user_role .delegate_status.active {
   _border-bottom: 2px solid green;
}

#login_select_user_role .delegate_status_text {
   display: inline-block;
   text-transform: initial;
   font-size: 8pt;
   padding: 5px;
   padding-right: 5px;
   padding-left: 5px;
   padding-right: 5px;
   padding-left: 5px;
   background-color: #FF9595;
   padding-left: 10px;
   padding-right: 10px;
   border: solid 1px white;
   border-radius: 15px;
   color: white;
   left: 10px;
   top: -10px;
   position: relative;
   box-shadow: 0px 1px 4px 0px #aaa;
}

#login_select_user_role .delegate_status_text.pending {
   background-color: darkorange;
}

#login_select_user_role .delegate_status_text.active {
   background-color: green;
}

body>header>section.bottom>.right .delegate_status {
   text-decoration: none;
}

body>header>section.bottom>.right .delegate_status.pending {
   color: orange;
}

body>header>section.bottom>.right .delegate_status.active {
   color: chartreuse;
}

span.delete_delegation {
   background-image: url('images/delete_role_delegation.svg');
   background-repeat: no-repeat;
   background-position: center center;
   height: 20px;
   width: 30px;
   display: block;
   cursor: pointer;
   margin-bottom: 0.5rem;
}

#login_select_user_role .tabular-form {
   width: 100%;
}

#login_select_user_role .tabular-form td:last-child {
   width: 10px;
}

#login_select_user_role .delegate_status.default_role>a {
   /* background-color:#00539B;
   color:white; */
}

#login_select_user_role .default_role {
   _border-bottom: 2px solid #00539B;
}

#login_select_user_role .section.billentity .chat_notification,
#login_select_user_role .section.billentity .notification {
   float: right;
   background: #A00;
   color: white;
   border-radius: 10px;
   width: 20px;
   height: 20px;
   line-height: 25px;
   text-align: center;
   margin-right: 5px;
   border: 2px solid white;
   margin-top: 2px;
}

#login_select_user_role .section.billentity .chat_notification {
   background: #f9d745;
}

#login_select_user_role .user_role .chat_notification,
#login_select_user_role .user_role .notification {
   padding: 0px 2px;
   border-radius: 12px;
   display: inline-block;
   min-width: 24px;
   text-align: center;
   margin-right: 5px;
   border: 2px solid white;
}

#login_select_user_role .user_role .notification {
   background: #A00;
   color: white;
}

#login_select_user_role .user_role .chat_notification {
   background: #f9d745;
   color: #A00;
}

#login_select_user_role .region_open_close {
   padding: 5px;
}

#login_select_user_role .roles_section .user_role {
   margin: 5px;
}

#login_select_user_role .section.region_open_close:hover {
   box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 0px 5px 0 rgba(0, 0, 0, 0.19);
}

div.default_role_text {
   display: inline-block;
   text-transform: initial;
   font-size: 8pt;
   padding: 5px;
   background-color: #00539B;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 15px;
   color: #510707;
   left: 10px;
   top: -10px;
   position: relative;
   box-shadow: 0px 1px 4px 0px #aaa;
}

/*
 * User
 */
#user_profile {
   max-width: 600px;
}

#user_profile table {
   margin: auto;
}

#user_profile table tr td:first-child {
   text-align: right;
}

#user_profile .button_container>button.red {
   background-color: #A00;
   border-color: #A00;
}

.session_terminated .button_container {
   text-align: center;
   margin: 20px 0px;
}

.session_terminated .button_container .button {
   border-color: #A00;
   background-color: #A00;
   border-radius: 20px;
}

/* Nested lists */
/* Note this remove the functionality of start and reversed */
.nested_lists {
   counter-reset: section;
}

.nested_lists .section::before {
   counter-increment: section;
   content: counter(section)". ";
}

.nested_lists ol {
   counter-reset: item;
}

.nested_lists ol li {
   display: block;
   position: relative;
}

.nested_lists ol li:before {
   content: counters(section, ".")"." counters(item, ".")".";
   counter-increment: item;
   position: absolute;
   margin-right: 100%;
   right: 10px;
   /* space between number and text */
}

/*
 * MFA stuff
 */
#validate_mfa_input {
   margin: 10px;
}

.setup_mfa .button_container {
   text-align: center;
   margin: 20px 0px;
}

/* .setup_mfa .button_container>a.button,
.setup_mfa .button_container>button {
   border-color: var(--primary);
   background-color: var(--primary);
   padding: 10px 25px;
}

.setup_mfa .button_container>a.button.secondary,
.setup_mfa .button_container>button.secondary {
   background-color: #e9e9e9;
   border-color: #002B5C;
   color: #002B5C !important;
}

.setup_mfa .button_container>a.button.secondary:hover,
.setup_mfa .button_container>button.secondary:hover {
   background-color: #002B5C;
   color: white !important;
} */

.setup_mfa .secret_mfa {
   inline-size: 100%;
   overflow-wrap: break-word;
}

.explanation_of_mfa .img_setup_mfa {
   width: 100%;
   height: 100px;
   margin-top: 10px;
}

.explanation_of_mfa .mfa_info {
   padding: 1px 25px;
}

.qrcode {
   display: flex;
   justify-content: center;
   padding-bottom: 10px;
}

.otc {
   position: relative;
   width: 100%;
   margin: 0 auto;
}

.otc fieldset {
   border: 0;
   padding: 0;
   margin: 0;
}

.otc fieldset div {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 10px;
}

.otc legend {
   margin: 0 auto 1em;
}

.otc input[type="number"] {
   width: .82em;
   line-height: 1;
   margin: .1em;
   padding: 0px 0 2px;
   font-size: 2.65em;
   text-align: center;
   appearance: textfield;
   -webkit-appearance: textfield;
   border: 2px solid #002B5C;
   color: #002B5C;
   border-radius: 4px;
}

.otc input::-webkit-outer-spin-button,
.otc input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* 2 group of 3 items */
.otc input[type="number"]:nth-child(n+4) {
   order: 2;
}

.otc div::before {
   content: '';
   height: 2px;
   width: 24px;
   margin: 0 .25em;
   order: 1;
   background: #BBBBFF;
}

/* From: https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 */
.otc label {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
   height: 1px !important;
   margin: -1px !important;
   overflow: hidden !important;
   padding: 0 !important;
   position: absolute !important;
   width: 1px !important;
   white-space: nowrap !important;
}

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

.confirm_dialog button,
.get_input_dialog button {
   border-color: var(--primary);
   background-color: var(--primary);
   padding: 10px 25px;
}

.get_input_dialog button.secondary,
.confirm_dialog button.secondary {
   background-color: white;
   border-color: var(--primary);
   color: var(--primary) !important;
}

.get_input_dialog button.secondary:hover,
.confirm_dialog button.secondary:hover {
   background-color: var(--primary);
   color: white !important;
}

/*
 * Categories
 */
.category-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   padding: 15px;
   padding-top: 5px;
}

.category-card {
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   text-align: center;
   width: clamp(1vw, 95%, 400px);
   padding: 10px;
   transition: transform 0.3s ease;
}

.category-card.small {
   padding: 20px 10px;
   width: clamp(1vw, 95%, 150px);
   height: 170px;
}

.category-card:hover {
   transform: translateY(-5px);
}

.category-card img {
   width: 50px;
   height: 50px;
   margin-bottom: 10px;
   border-radius: 50px;
}

.category-card h3 {
   font-size: 16px;
   font-weight: bold;
   margin: 10px 0;
   padding: 10px;
   border-radius: 25px;
}

.category-card.small h3 {
   padding: 0;
}

.category-card .user_interest_count {
   margin-left: 5px;
   border-radius: 15px;
   background-color: #9CB985;
   padding: 3pt 6pt;
   font-size: 10pt;
   color: white;
}

.category-card button {
   background-color: var(--primary);
   color: white;
   border: none;
   border-radius: 25px;
   padding: 10px 25px;
   cursor: pointer;
   font-size: 10pt;
}

.category-card button:hover {
   background-color: #0056b3;
}

/* Carousel container */
.category-carousel-container {
   display: flex;
   overflow-x: auto;
   padding: 10px;
   gap: 15px;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   max-width: 90%;
   margin: 0 auto;
}

.category-carousel-container .category-card {
   filter: grayscale(100%);
   flex: 0 0 auto;
   min-width: 120px;
   max-width: 120px;
   cursor: pointer;
   justify-content: center !important;
   display: flex !important;
   flex-wrap: wrap !important;
   box-shadow: none;
}

.category-carousel-container .category-card.active {
   filter: none;
}

.category-carousel-container .heading-container {
   min-width: 90px;
}

.category-carousel-container .heading-container h3 {
   font-size: 14px;
   margin: 0;
   padding: 0;
   border-radius: 5px;
}

.carousel-dots-container {
   position: relative;
}

.carousel-dots-container .slick-dots {
   bottom: 10px;
}

.content-grid-container,
.category-grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
   gap: 10px;
   /* padding: 15px; */
   /* Centers the grid container itself */
   margin: 0px auto;
   /* Centers the content horizontally within each grid cell */
   justify-items: center;
}

.content-flex-container,
.category-flex-container {
   display: flex;
   margin: 0px auto;
   justify-content: center;
   flex-wrap: wrap;
}

.content_loading_status {
   text-align: center;
}

.loading-dots {
   margin: auto;
   width: 56px;
   height: 13.4px;
   background: radial-gradient(circle closest-side, #4b6c32 90%, #0000) 0% 50%,
      radial-gradient(circle closest-side, #4b6c32 90%, #0000) 50% 50%,
      radial-gradient(circle closest-side, #4b6c32 90%, #0000) 100% 50%;
   background-size: calc(100%/3) 100%;
   background-repeat: no-repeat;
   animation: dots-zcf63l 1s infinite linear;
}

@keyframes dots-zcf63l {
   33% {
      background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%;
   }

   50% {
      background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%;
   }

   66% {
      background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%;
   }
}

.sub-category-grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   gap: 10px;
   padding: 15px;
}

.sub-category {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   /* border: 1px solid #ddd; */
   border-radius: 35px;
   padding: 10px 15px;
   background-color: #FAFAFA;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: background-color 0.3s ease, transform 0.3s ease;
   cursor: pointer;
   min-height: 50px;
   margin-bottom: 10px;
}

.sub-category.selected {
   /* border-color: var(--primary); */
   box-shadow: 0 0px 6px var(--primary);
   background-color: #F2F7EB;
}

.sub-category:hover {
   background-color: #e8f8e8;
   transform: translateY(-3px);
}

.sub-category.red {
   background-color: #f8e8e8;
}

.sub-category span {
   font-size: 10pt;
   font-weight: bold;
   /* color: #333; */
}

.sub_category_tag {
   margin: 5px;
   cursor: pointer;
}

.color-select {
   padding: 10px;
   border-radius: 5px;
   font-size: 16px;
   background-color: var(--primaryLight);
   /* Default */
   color: var(--textOnPrimaryLight);
   border: 2px solid var(--gray);
}

/*
 * tinymce
 */
.tox-promotion {
   display: none;
}

.tox .tox-listboxfield .tox-listbox--select,
.tox .tox-textarea,
.tox .tox-textfield,
.tox .tox-toolbar-textfield,
.tox .tox-tbtn--select,
.tox .tox-button--secondary,
.tox .tox-icon,
.tox .tox-mbtn {
   color: #222f3e !important;
}

.tox.tox-tinymce {
   min-height: 350px;
   width: 100%;
}

/*
 * Survey
 */

#survey-builder {
   display: flex;
   gap: 30px;
   margin: 0 auto;
}

#question-types {
   width: 20%;
   background: #fff;
   border-radius: 8px;
   padding: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#question-types h3 {
   margin: 0 0 20px 0;
   font-size: 1.2rem;
   color: #333;
}

#update_survey .question-type-container,
#create_survey .question-type-container {
   display: flex;
   align-items: center;
   margin-bottom: 15px;
   transition: transform 0.2s;
}

#update_survey .question-type-container:hover,
#create_survey .question-type-container:hover {
   transform: translateX(5px);
}

#survey-builder-main input,
#survey-builder-main select,
#survey-builder-main textarea {
   margin: 0.3rem 0px;
}

#update_survey .content-type,
#update_survey .question-type,
#create_survey .content-type,
#create_survey .question-type {
   /* display: flex; */
   /* justify-content: center; */
   padding: 12px 15px;
   background: #f8f9fa;
   border-radius: 6px;
   border: 1px solid #e9ecef;
   cursor: pointer;
   font-size: 0.95rem;
   color: #495057;
   transition: all 0.2s;
}

#update_survey .content-type:hover,
#update_survey .question-type:hover,
#create_survey .content-type:hover,
#create_survey .question-type:hover {
   background: #e9ecef;
   border-color: #dee2e6;
}

#update_survey .text-label,
#update_survey .option-container,
#create_survey .text-label,
#create_survey .option-container {
   display: flex;
   align-items: center;
   gap: 8px;
}

#update_survey .text-label input[type="text"],
#update_survey .option-container input[type="text"],
#create_survey .text-label input[type="text"],
#create_survey .option-container input[type="text"] {
   flex: 1;
   margin-bottom: 0;
}

#update_survey .remove-scale-text-option,
#update_survey .remove-option,
#create_survey .remove-scale-text-option,
#create_survey .remove-option {
   background: none;
   border: none;
   color: #dc3545 !important;
   cursor: pointer;
   font-size: 14px;
   padding: 4px 8px;
   opacity: 0.7;
   transition: all 0.2s;
   border-radius: 4px;
}

#update_survey .remove-scale-text-option:hover,
#update_survey .remove-option:hover,
#create_survey .remove-scale-text-option:hover,
#create_survey .remove-option:hover {
   opacity: 1;
   background: #fee2e2;
}

#survey-area {
   flex: 1;
   flex-grow: 1;
   min-height: 500px;
   /* background: #fff; */
   background-color: #f4f4f4;
   border-radius: 8px;
   padding: 10px 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#survey-builder-main {
   display: flex;
}

#update_survey .survey-content,
#create_survey .survey-content,
#update_survey .survey-question,
#create_survey .survey-question {
   background: #fff;
   border: 1px solid #e9ecef;
   border-radius: 6px;
   margin-bottom: 15px;
   padding: 15px;
   transition: all 0.2s;
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

#update_survey .drag-handle,
#create_survey .drag-handle {
   cursor: grab;
   color: #6c757d;
   font-size: 20px;
   padding: 5px 10px;
   margin-right: 10px;
   display: inline-block;
}

#update_survey .question-actions,
#create_survey .question-actions {
   display: flex;
   gap: 10px;
   margin-top: 10px;
}

#update_survey .add-scale-text-option,
#update_survey .delete-question,
#update_survey .add-option,
#create_survey .add-scale-text-option,
#create_survey .delete-question,
#create_survey .add-option {
   background: none;
   border: solid 1px;
   color: #dc3545 !important;
   cursor: pointer;
   font-size: 0.9rem;
   padding: 5px 10px;
   transition: all 0.2s;
   opacity: 1;
   /* display: inline-flex; */
   align-items: center;
}

#create_surveupdate_survey .add-scale-text-option:hover,
#update_survey .delete-question:hover,
#update_survey .add-option:hover,
#create_survey .add-scale-text-option:hover,
#create_survey .delete-question:hover,
#create_survey .add-option:hover {
   color: #c82333 !important;
   background: #fee2e2;
}

#update_survey .add-scale-text-option,
#update_survey .add-option,
#create_survey .add-scale-text-option,
#create_survey .add-option {
   color: #28a745 !important;
}

#update_survey .add-scale-text-option:hover,
#update_survey .add-option:hover,
#create_survey .add-scale-text-option:hover,
#create_survey .add-option:hover {
   color: #218838 !important;
   background: #e2fee2;
}

#update_survey .options,
#create_survey .options {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin: 10px 0;
}

#update_survey .sortable-placeholder,
#create_survey .sortable-placeholder {
   border: 2px dashed #007bff;
   background: #f8f9fa;
   border-radius: 6px;
   margin-bottom: 15px;
   height: 100px;
}

#survey-preview {
   background: #fff;
   border-radius: 8px;
   padding: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#update_survey .preview-question,
#create_survey .preview-question {
   background: #f8f9fa;
   border-radius: 6px;
   padding: 15px;
   margin-bottom: 15px;
}

#survey-preview-navigation {
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
}

#survey-preview-navigation button {
   padding: 10px 20px;
   border: none;
   border-radius: 6px;
   background: #007bff;
   color: white;
   cursor: pointer;
   transition: all 0.2s;
}

#survey-preview-navigation button:hover:not(:disabled) {
   background: #0056b3;
   transform: translateY(-1px);
}

#survey-preview-navigation button:disabled {
   background: #e9ecef;
   cursor: not-allowed;
}

/* Add styles for the draggable helper */
#update_survey .ui-draggable-dragging,
#create_survey .ui-draggable-dragging {
   background: #fff;
   border: 1px solid #007bff;
   border-radius: 6px;
   padding: 12px 15px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   width: 200px !important;
   z-index: 1000;
   opacity: 0.9;
}

#update_survey .w3-bar .tablink,
#create_survey .w3-bar .tablink {
   border: solid 1px;
   border-radius: 10px 10px 0 0;
   border-color: var(--primary);
   border-bottom: none;
   margin: 0;
   margin-right: 5px;
   background-color: #f1f1f1;
   color: #333;
   transition: background-color .2s, color .2s;
}

#update_survey .w3-bar .tablink:hover,
#update_survey .w3-bar .tablink.active,
#create_survey .w3-bar .tablink:hover,
#create_survey .w3-bar .tablink.active {
   background-color: #fff;
   color: #000;
}

#update_survey .w3-bar .tablink.active,
#create_survey .w3-bar .tablink.active {
   background-color: var(--primary);
   color: var(--white);
   border-color: var(--primary);
}

#update_survey .tab-content,
#create_survey .tab-content {
   display: none;
   padding: 20px;
   border: 1px solid var(--primary);
   border-radius: 0 15px 15px 15px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#update_survey .element_section,
#create_survey .element_section {
   border-radius: 10px;
   box-shadow: 0px 0px 10px 2px #dfdfdf;
   width: 98%;
   margin: auto;
   margin-top: auto;
   margin-top: 10px;
}

#update_survey .element_section_open_close.closed,
#create_survey .element_section_open_close.closed {
   background-image: url('images/region_closed.svg');
}

#update_survey .element_section_open_close.open,
#create_survey .element_section_open_close.open {
   background-image: url('images/region_open.svg');
}

#update_survey .element_section_open_close,
#create_survey .element_section_open_close {
   background-repeat: no-repeat;
   background-position: 5px center;
   padding-left: 35px !important;
   cursor: pointer;
}

#update_survey .remove_element_section,
#create_survey .remove_element_section {
   cursor: pointer;
   float: right;
}

/*
 * Assessments
 */

/* --- Tab Navigation --- */
#update_assessment .w3-bar .tablink,
#create_assessment .w3-bar .tablink {
   border: solid 1px;
   border-radius: 10px 10px 0 0;
   border-color: var(--primary);
   border-bottom: none;
   margin: 0;
   margin-right: 5px;
   background-color: #f1f1f1;
   color: #333;
   transition: background-color .2s, color .2s;
}

#update_assessment .w3-bar .tablink:hover,
#update_assessment .w3-bar .tablink.active,
#create_assessment .w3-bar .tablink:hover,
#create_assessment .w3-bar .tablink.active {
   background-color: #fff;
   color: #000;
}

#update_assessment .w3-bar .tablink.active,
#create_assessment .w3-bar .tablink.active {
   background-color: var(--primary);
   color: var(--white);
   border-color: var(--primary);
}

/* --- Tab Content Panel --- */
#update_assessment .tab-content,
#create_assessment .tab-content {
   padding: 20px;
   border: 1px solid var(--primary);
   border-radius: 0 15px 15px 15px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   background-color: #fdfdfd;
}

/* --- Journey Step Blocks --- */
#create_assessment .step-block,
#update_assessment .step-block {
   background: #fff;
   border: 1px solid #e9ecef;
   border-radius: 6px;
   margin-bottom: 15px;
   padding: 15px;
   transition: all 0.2s;
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 10px;
   /* Overwrite w3-card-2 to match survey-question */
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* --- Drag Handle for Steps --- */
#create_assessment .handle-step,
#update_assessment .handle-step {
   cursor: grab;
   color: #6c757d;
   font-size: 20px;
   padding: 5px 10px;
   margin-right: 10px;
   display: inline-block;
   background-color: transparent !important;
}

#create_assessment .handle-step:hover,
#update_assessment .handle-step:hover {
   background-color: #f8f9fa !important;
}


/* --- Buttons inside Step Blocks --- */
#create_assessment .remove-step,
#update_assessment .remove-step {
   color: #dc3545 !important;
   opacity: 0.7;
   transition: all 0.2s;
}

#create_assessment .remove-step:hover,
#update_assessment .remove-step:hover {
   opacity: 1;
   background-color: #fee2e2 !important;
}

#create_assessment .select-content-btn,
#update_assessment .select-content-btn {
   font-size: 0.9rem;
   padding: 8px 12px;
}

/* --- Main Action Buttons --- */
#create_assessment #addStepBtn,
#update_assessment #addStepBtn {
   background-color: var(--primary);
   color: white;
   border: none;
   border-radius: 25px;
   padding: 10px 25px;
   cursor: pointer;
   font-size: 10pt;
   transition: background-color 0.3s;
}

#create_assessment #addStepBtn:hover,
#update_assessment #addStepBtn:hover {
   background-color: #0056b3;
   /* A slightly darker shade */
}

/* --- Form element styling within the builder --- */
#assessment_builder input,
#assessment_builder select,
#assessment_builder textarea {
   margin: 0.3rem 0px;
}

/*
 * Content
 */
#update_content .media_section,
#create_content .media_section {
   border-radius: 10px;
   box-shadow: 0px 0px 10px 2px #dfdfdf;
   width: 98%;
   margin: auto;
   margin-top: auto;
   margin-top: 10px;
}

#update_content .media_section_open_close.closed,
#create_content .media_section_open_close.closed {
   background-image: url('images/region_closed.svg');
}

#update_content .media_section_open_close.open,
#create_content .media_section_open_close.open {
   background-image: url('images/region_open.svg');
}

#update_content .media_section_open_close,
#create_content .media_section_open_close {
   background-repeat: no-repeat;
   background-position: 5px center;
   padding-left: 35px !important;
   cursor: pointer;
}

#update_content .remove_media_section,
#create_content .remove_media_section {
   cursor: pointer;
   float: right;
}

.sortable-placeholder {
   background: #f0f0f0;
   border: 2px dashed #ddd;
   height: 50px;
   margin-bottom: 10px;
}

.drag-handle {
   cursor: all-scroll;
}

.media-type-badge {
   display: inline-block;
   padding: 3px 8px;
   background: #f0f0f0;
   border-radius: 3px;
   margin-bottom: 10px;
}

.pdf-preview,
.video-preview,
.audio-preview,
.article-preview,
.generic-preview {
   margin: 10px;
}

.article-preview {
   padding: 10px 10px;
   border-radius: 15px;
   box-shadow: 0px 0px 5px -2px;
}

.audio-player .controls button.secondary {
   padding: 0.5rem 1rem;
   margin: 0;
}

.pdf-preview i {
   margin-right: 5px;
}

.input_file_preview,
.input_image_preview {
   border: solid 2px #CCC;
   border-radius: 10px;
   background-color: #EEE;
   width: 200px;
   /* height: 130px; */
   text-align: center;
   padding: 5px;
}

.input_file_preview>a {
   display: block;
}

.input_file_preview>input,
.input_image_preview>input {
   display: none;
}

.input_file_preview>img,
.input_image_preview>img {
   border-radius: 10px;
   /* height: 90px; */
   width: 150px;
   object-fit: scale-down;
}

.audio-player .player-container {
   position: relative;
   width: 100%;
   max-width: 600px;
}

.waveform-container {
   position: relative;
}

.audio-player .waveform-img {
   width: 100%;
   display: block;
   height: 50px;
}

.audio-player .progress-bar {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 0%;
   background-color: var(--primary);
   opacity: 0.1;
   transition: width 0.1s;
}

.audio-player .controls {
   margin-top: 10px;
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
}

.audio-player {
   position: relative;
   border-radius: 15px;
   box-shadow: 0px 0px 5px -4px;
   padding: 5px;
   overflow: hidden;
}

.audio-player .loading-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.8);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 10;
}

.audio-player .spinner {
   width: 40px;
   height: 40px;
   border: 4px solid #f3f3f3;
   border-top: 4px solid #1CB2AA;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 10px;
}

.audio-player .loading-text {
   font-size: 14px;
   color: #333;
   margin-bottom: 5px;
}

.audio-player .loading-progress {
   font-weight: bold;
   color: #1CB2AA;
}

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

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

.video iframe {
   border-radius: 15px;
   border: solid 1px #CCC;
   background-color: black;
}

.video-js {
   background: #000;
   border-radius: 15px;
   overflow: hidden;
}

.vjs-control-bar {
   background: rgba(0, 0, 0, 0.7);
}

.vjs-button:hover {
   background-color: var(--primary);
   color: var(--white);
}

.video-js ul.vjs-menu-content {
   border-radius: 10px 10px 0 0;
}

.video-js .vjs-playback-rate {
   text-align: center;
   margin: 0;
   padding: 0;
   border-radius: 20px;
}

/*
 * report and report_type views
 */
#report_type_run div.header {
   padding-left: 10px;
   padding-right: 10px;
   overflow: unset;
   border: 0;
   background: none;
   margin: 0;
}

#report_type_run div.header h1 {
   margin-top: 10px;
   margin-bottom: 10px;
   float: none;
}

a.run_report {
   background-image: url('images/run_report.svg');
   background-repeat: no-repeat;
   background-position: center right;
   background-size: contain;
   display: block;
   text-decoration: none;
   height: 25px;
   width: 25px;
}

#report_type_run .warning.nodata {
   width: 300px;
   margin: auto;
   text-transform: uppercase;
   font-weight: bold;
   text-align: center;
}

/*
 * jquery.tablesorter override
 */
.tablesorter-default tbody>tr.selected>td {
   background-color: #C0E4BB;
   color: #000;
}

.tablesorter-default {
   font: inherit;
}

.tablesorter-default th,
.tablesorter-default thead td {
   background-color: var(--darkBlue);
   color: white;
}

.tablesorter-default thead .headerSortUp,
.tablesorter-default thead .tablesorter-headerSortUp,
.tablesorter-default thead .tablesorter-headerAsc {
   border-bottom: initial;
   background-image: url('images/tablesorter/asc.png');
   background-color: var(--secondaryBlue);
}

.tablesorter-default .header,
.tablesorter-default .tablesorter-header {
   background-image: url('images/tablesorter/bg.png');
   padding: 8px 20px 8px 8px;
}

.tablesorter-default thead .headerSortDown,
.tablesorter-default thead .tablesorter-headerSortDown,
.tablesorter-default thead .tablesorter-headerDesc {
   background-image: url('images/tablesorter/desc.png');
   border-bottom: initial;
   background-color: var(--secondaryBlue);
}

.tablesorter-default th {
   position: sticky;
   position: -webkit-sticky;
   position: -moz-sticky;
   position: -ms-sticky;
   position: -o-sticky;
   top: 0;
   border-top: 0;
   border-bottom: 0;
   margin: 0;
}

.tablesorter-default td {
   vertical-align: middle;
}

.tablesorter-default .header,
.tablesorter-default .tablesorter-header {
   white-space: nowrap;
}

/*
 * jquery overrides
 */
.ui-widget {
   font-family: "Noto Sans", "Gotham Rounded A", "Gotham Rounded B", sans-serif;
   font-size: 10pt;
}

.ui-autocomplete-input {
   _width: 20em;
   background-color: #EFF6FF !important;
}

.ui-widget-overlay {
   /*
   opacity: .40;
   filter: Alpha(Opacity=40);
*/
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
   margin-bottom: 0px;
   padding-bottom: 0px;
}

#tabs .ui-corner-all {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}

.ui-dialog.ui-widget {
   box-shadow: 0px 5px 10px 0px #888888;
   border-radius: 0;
}

.ui-dialog-titlebar {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

.ui-widget-content {
   color: #595959;
   border: 1px solid #e6e6e6;
}

.ui-widget-header {
   background: #e3e3e3;
}

.ui-widget input {
   font-family: "Noto Sans", "Gotham Rounded A", "Gotham Rounded B", sans-serif;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
   font-family: inherit;
}

/* CSS for buttons within a jQuery dialog */
.ui-dialog-buttonset button.ui-button {
   border: 0;
   background: #324F7B;
}

.z-index-200 {
   z-index: 200;
}

.ui-datepicker-trigger {
   margin-left: 0.5rem;
   vertical-align: bottom;
   cursor: pointer;
   margin-bottom: 0.8rem;
}

#scrollTopBtn {
   display: none;
   /* hidden at page load */
   position: fixed;
   bottom: 100px;
   right: 30px;
   z-index: 1000;
   width: 50px;
   height: 50px;
   background-color: var(--primary);
   color: var(--primaryLight);
}

.app_body .save_update {
   border: solid 2px white;
   width: 65px;
   height: 65px;
   border-radius: 35px;
   margin: 2px 5px;
   padding: 0px;
   position: fixed;
   bottom: 80px;
   right: 15px;
   background-image: url('theme_faircapewater/save.svg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
}

.app_body {
   margin: 0 0 65px;
}

.app_body table.tabular-form tr.section td,
div.tabular-form .tr.section td {
   padding: 10px;
}

.app_body .section {
   font-size: 16px;
}

.app_body #login_select_user_role .role_name>a {
   padding: 15px;
   background-size: 30px;
   font-size: 17px;
}

.app_footer {
   border-radius: 20px 20px 0px 0px;
   background-color: var(--primary);
   text-align: center;
   position: fixed;
   z-index: 10000;
}

.app_footer #nav_menu_container {
   float: none;
   margin-bottom: 35px;
}

.app_footer #nav_menu_container ul {
   margin-right: 0px;
   padding: 5px 0px 5px 0px;
   margin: 10px 0px 20px 0px;
}

.app_footer #nav_menu_container>ul>li>a {
   width: 65px;
   height: 45px;
   margin: 0px;
}

.app_footer #nav_menu_container ul li {
   width: 65px;
   height: 45px;
   margin: 2px 5px;
}

.app_footer #nav_menu_container ul li ul {
   top: auto;
   bottom: 35px;
   padding-bottom: 75px;
   z-index: -1;
   box-shadow: none;
   left: 0px;
   width: 100%;
   background-color: var(--primary);
   border-top: medium solid var(--green);
   /* border-bottom: medium solid var(--green); */
   border-radius: 0;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
}

.app_footer #nav_menu_container ul li ul li:hover {
   background-color: var(--secondaryGreen);
}

.app_footer #nav_menu_container ul li ul li {
   border: none;
   width: auto;
   height: auto;
   color: var(--textOnPrimaryLight);
   background-color: var(--primaryLight);
}

.app_footer #nav_menu_container ul li ul li {
   padding: 1px 10px 5px 10px;
}

.app_footer #nav_menu>li {
   background: none;
}

.app_footer div.menu-item-container {
   /* display: flex; */
   flex-wrap: wrap;
   justify-content: center;
}

/* Navbar container for iOS look */
.app_footer .navbar-menu {
   display: flex;
   justify-content: space-around;
   width: 100%;
}

/* Menu text below the icon */
.menu-item .menu-text {
   display: block;
   font-size: 12px;
   /* margin-top: 5px; */
}

.app_footer .menu-item div.menu-item-container .menu-text {
   margin-top: 0;
   color: white;
}

.app_footer .sub-menu div.menu-item-container {
   display: block;
}

.app_footer .sub-menu div.menu-item-container .menu-text {
   color: black;
   margin-top: 5px;
}

.app_footer #nav_menu_container ul li ul li.overflow-header {
   background-color: inherit;
}

.app_footer .sub-menu .overflow-header div.menu-item-container .menu-text {
   color: white;
   display: inline-block;
   margin-left: 10px;
}

/* Icon size for iOS style */
.app_footer .menu-item i,
.app_footer .menu-item img {
   font-size: 15px;
   margin-bottom: 5px;
}

.app_footer .menu-item div.menu-item-container i {
   margin-right: 10px;
}

.app_footer .menu-item div.menu-item-container img {
   width: 30px;
   height: 30px;
   margin-bottom: 3px;
}

.app_footer #nav_menu_container ul li.menu-item.main-action {
   width: 80px;
}

.app_footer #nav_menu_container ul li.menu-item.main-action>.menu-item-container {
   transform: translateY(-30px);
}

.app_footer .menu-item.main-action>.menu-item-container {
   padding: 10px;
   border: solid 5px white;
   border-radius: 50px;
   padding: 10px;
   background-color: var(--primaryDarker);
   font-weight: bold;
}

/* When the keyboard is open, hide the footer */
body.keyboard-visible .app_footer {
   /* You can use display: none or transform it out of view */
   display: none;
   /* Or alternatively: */
   /* transform: translateY(100%); */
}

/*** ONBOARDING ***/
.onboarding-container {
   margin: 0px auto;
   /* width: 90%; */
   max-width: 600px;
   background: white;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border-radius: 15px;
   overflow: hidden;
}

.onboarding-content {
   /* padding: 20px; */
}

.onboarding-content h2 {
   margin: 0 0 20px;
}

.navigation-container {
   display: flex;
   justify-content: space-between;
   padding: 10px 20px;
   background: var(--primaryLight);
   color: white;
}

/*** CONTENT ***/
.content-preview-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.content-flex-container .content-preview-container,
.content-grid-container .content-preview-container {
   background-color: #fff;
   width: min(100%, 450px);
}

.content-preview-card {
   border: 1px solid #ddd;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   width: 100%;
   margin: 5px;
   position: relative;
   padding-bottom: 50px;
}

.content-preview-card .card-header {
   min-height: 45px;
   position: relative;
}

.content-preview-card .thumbnail {
   border-radius: 15px;
}

.content-preview-card .thumbnail img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 10px;
}

.content-preview-card .category-info {
   position: absolute;
   bottom: 5px;
   right: 10px;
   padding: 5px 10px;
   border-radius: 10px;
   opacity: 0.9;
}

.content-preview-card .card-body {
   padding: 15px;
}

.content-preview-card .heading {
   margin: 0 0 5px 0;
   font-size: 1.5em;
}

.content-preview-card .sub-heading {
   margin: 0 0 15px 0;
   font-size: 1.1em;
   color: #666;
}

.content-preview-card .preview-text {
   margin-bottom: 15px;
}

.content-preview-card .media-types {
   margin-bottom: 15px;
}

.content-preview-card .media-type {
   display: inline-block;
   margin-right: 10px;
   color: #666;
}

.content-preview-card .dismiss-content-btn,
.content-preview-card .read-more-btn {
   display: inline-block;
   padding: 10px 20px;
   text-decoration: none;
   border-radius: 20px;
   font-weight: bold;
}

.content-preview-card .card-footer-container {
   position: absolute;
   bottom: 10px;
   right: 10px;
}

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

/* Full content view styles */
.content-full-view {
   max-width: 1000px;
   /* margin: 10px; */
   padding: 0px 10px;
   /* border: 1px solid #ddd; */
   border-radius: 20px;
   overflow: auto;
   /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
   width: 100%;
}

.content-full-view .content-header {
   text-align: center;
   margin-bottom: 10px;
}

.content-thumbnail {
   border: 3px solid #CCC;
   border-radius: 20px;
   background-color: white;
   background-repeat: no-repeat;
   background-position: center center;
   box-shadow: 0px 0px 5px 0px #555;
   min-width: 100px;
   min-height: 100px;
   margin: 5px;
   vertical-align: middle;
   max-height: 320px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.blurred-background {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-image: url('your-image.jpg');
   background-size: cover;
   background-position: center;
   filter: blur(10px) brightness(0.8);
   transform: scale(1.1);
   /* Prevents blur edges from showing */
}

.content-full-view .content-thumbnail img {
   position: relative;
   z-index: 1;
   width: 100%;
   max-height: 300px;
   object-fit: contain;
   border-radius: 15px;
}

.content-full-view .content-meta {
   padding-top: 10px;
}

.content-full-view .category-info {
   text-align: center;
   border-radius: 15px;
}

.content-full-view .content-body {
   line-height: 1.6;
}

.content-full-view .content-media-item {
   margin-bottom: 30px;
}

.content-full-view .media-container {
   padding: 10px 10px;
   max-width: 900px;
   border-radius: 15px;
   /* box-shadow: 0px 0px 5px -2px; */
   margin: 10px auto;
}

.content-full-view .media-container:has(div.video) {
   /* max-width: 600px; */
}

.content-full-view .article h1,
.content-full-view .article h2,
.content-full-view .article h3,
.content-full-view .article h4,
.content-full-view .article h5,
.content-full-view .article h6 {
   margin: 5px 0;
}

.view_user {
   gap: 8px;
   cursor: pointer;
   transition: opacity 0.2s;
}

.view_user:hover {
   opacity: 0.8;
}

.view_user .sp-view-icon {
   font-size: 0.8em;
   opacity: 0.6;
}

/************************************
 * BREAKPOINT 380px
 ************************************/
@media only screen and (max-width: 380px) {
   .audio-player .controls {
      gap: 1px;
   }
}

/************************************
 * BREAKPOINT 410px
 ************************************/
@media only screen and (max-width: 410px) {
   .audio-player .controls {
      gap: 5px;
   }
}

/************************************
 * BREAKPOINT 550px
 ************************************/
@media only screen and (max-width: 580px) {
   body>header>section.bottom>.left {
      width: 100%;
   }

   body>header>section.bottom>.right {
      display: none;
   }
}

/************************************
 * BREAKPOINT 860px
 ************************************/
@media only screen and (max-width: 860px) {

   /* STACK HEADER SECTIONS UNDERNEATH EACH OTHER */
   /*
   header > section.top {
      height:auto;
   }
   header > section.top > .left,
   header > section.bottom > .left,
   header > section.top > .right,
   header > section.bottom > .right {
      float: none;
      width:100%;
      text-align:center;
      height: 50px;
   }
   header > section.top > .right {
      padding: 10px 0 10px 0;
      height:auto;
   }
   header > section.bottom {
      height:auto;
   }
   header > section.bottom > .right .login_user {
      text-align:center;
      width:100%;
      line-height: 22px;
   }
   header > section.top > .left {
      background-position: center center;
   }
   header > section.bottom > .right .login_user {
      margin:auto;
   }
   header > section.bottom > .left .page_heading {
      font-size: 20px;
   }
   #nav_menu_container {
      float:none;
   }
   */

   button.calltoaction {
      padding: 0.5rem 1rem;
   }

   #user_profile table tr td:first-child {
      text-align: left;
   }

   /* SCALE HEADER SECTIONS AND KEEP STRADDLED LEFT/RIGHT */
   body>header>section.top>.left {
      width: 75px;
      margin-left: 5px;
      background-position: center center;
      background-size: contain;
   }

   body>header>section.top>.right {
      background-color: white;
   }

   body>header>section.bottom,
   body>header>section.bottom>.left,
   body>header>section.bottom>.right {
      height: 45px;
   }

   body>header>section.bottom>.right .login_user,
   body>header>section.bottom>.left .page_heading {
      padding: 0 5px 0 5px;
      _font-size: calc(5px + 0.6vw);
   }

   #nav_menu>li {
      width: 30px;
   }

   .login_banner {
      height: 100px;
   }

   #page_menu_container {
      display: block;
      margin: 0;
   }

   #page_context_menu ul {
      top: 110px;
   }

   main {
      margin: 0;
   }

   form.data_input,
   .form_container {
      border: 0;
   }

   main.nosession .content {
      width: 95%;
   }

   form.data_input,
   .form_container {
      border: 0;
      width: 100%;
      padding: 0;
      background: none;
   }

   .login_container {
      box-shadow: none;
      width: auto;
      border: 0;
      border-radius: 0;
   }

   #login_form input[type="text"],
   #login_form input[type="password"] {
      font-size: 12pt;
   }

   .login_container .instructions,
   #register_form_container,
   #register_request_form_container,
   #self_register_form_container,
   #self_register_confirm_form_container,
   #password_reset_form_container,
   #user_activate_form_container {
      width: auto;
      min-width: auto;
   }

   #login_select_user_role {
      border: 0;
      display: block;
      width: clamp(20rem, 100%, 30rem);
   }

   .otp_alt_actions,
   .footer button,
   .footer .button,
   .footer a.button,
   .footer span.button {
      display: inline-block;
      width: auto;
   }

   .audio-player .controls button.secondary {
      padding: 0.5rem 0.5rem;
   }
}

@media only screen and (min-width: 1600px) {
   body>header>section.bottom>.left .page_heading {
      font-size: 20px;
   }

   body>header>section.bottom>.right .login_user {
      font-size: 20px;
   }
}