@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html,
body {
font-family: 'Poppins', sans-serif;
background: #f9f9f9;
overscroll-behavior: none;
color: #081c3e;
touch-action: manipulation;
}

.temp-notice {
padding: 15px 20px;
background: rgb(255, 234, 93);
color: #000;
margin-bottom: 20px;
font-size: 14px;
border-radius: 8px;
font-weight: 400;
display: flex;
align-items: center;
}

.temp-notice-danger {
  background: #ff5d5d !important;
  color: #fff !important;
}

.temp-notice-success {
  background: var(--green-color) !important;
  color: #fff !important;
}

.temp-notice span, .temp-notice b {
display: contents;
}

.temp-notice h5 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
}

.temp-notice h6 {
margin-bottom: 2px;
font-size: 16px;
font-weight: 600;
}

.temp-notice h6 span {
font-size: 12px;
font-weight: 400;
}

.temp-notice p {
font-size: 12px;
font-weight: 400;
opacity: 0.8;
}

.temp-notice p:last-child {
margin-bottom: 0px;
}

.temp-notice.success {
background: var(--green-color);
color: #fff;
}

.temp-notice.red {
background: rgba(255, 93, 93, 1);
color: #fff;
}

.temp-notice.target {
background: rgba(74, 193, 134, 0.27);
color: rgba(34, 116, 75, 1);
}

.temp-notice.under-target {
background: rgba(255, 0, 0, 0.05);
color: rgba(184, 59, 59, 1);
}

.temp-notice.primary {
background: rgba(31, 54, 101, 0.1);
color: #1F3665;
}

.temp-notice.smaller {
padding: 10px 20px;
font-size: 12px;
}

.temp-notice.smaller .bi {
font-size: 20px;
}

.temp-notice .bi {
font-size: 28px;
margin-right: 10px;
}

.temp-notice a {
display: contents;
font-weight: 500;
}

body.no-scroll {
    overflow: hidden;
}

/**** Root Styles ****/

:root {
  --primary-color: #1F3665;
  --secondary-color: #38B6FF;
  --green-color: #4ac186;
  --green-color-hover: #35a46d;
}


.green-text {
color: var(--green-color);
}


.primary-background {
background: linear-gradient(90deg, rgba(140,200,170,0.20) 0%, rgba(160,144,223,0.1) 100%);
position: relative;
}

.primary-background-old {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 200 200'%3E%3Cpolygon fill='%23153365' fill-opacity='0.02' points='100 0 0 100 100 100 100 200 200 100 200 0'/%3E%3C/svg%3E");
}

.primary-background-image::before {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/running-logo.png');
  background-repeat: repeat;
  background-size: auto 400px;
  background-position: 0 50px; /* Adjust the spacing (10px in this example) */
  opacity: 0.05; /* Set the opacity to 0.2 for the image */
  z-index: -1;
}

.running-background::before {
content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/running-logo.png');
  background-repeat: repeat;
  background-size: auto 400px;
  background-position: 0 50px; /* Adjust the spacing (10px in this example) */
  opacity: 0.04; /* Set the opacity to 0.2 for the image */
  z-index: -1;
}

/* Custom Scrollbar */

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 4px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/**** Bootstrap Override START ****/

body.scroll-disabled {
  overflow: hidden;
}

a {
color: inherit;
text-decoration: none;
}

a:hover {
color: inherit;
text-decoration: none;
}

.text-success {
color: var(--green-color)!important;;
}

.bg-success {
background-color: var(--green-color)!important;
}

.btn-success {
color: #fff;
background-color: var(--green-color);
border-color: var(--green-color);
}

.btn-success:hover {
color: #fff;
background-color: var(--green-color-hover);
border-color: var(--green-color-hover);
}


.form-control {
border-radius: 4px;
background: rgb(252, 252, 252);
font-size: 14px;
}

.form-select {
font-size: 14px;
}

.tags-hover {
cursor: pointer;
}

.tag-tooltip {
font-size: 10px;
}

.modal-backdrop.show {
opacity: 0.9;
background: #000;
}

.how-to-modal .modal-content {
border-radius: 8px;
background: none;
border: 0px solid #fff;
padding: 0px;
}

.how-to-modal .image-slider {
margin:0px auto;
position: relative;
}

.how-to-modal .slide-arrow.prev-arrow {
position: absolute;
z-index: 1;
height: 80px;
background: rgba(31, 54, 101, 0.8);
color: #fff;
padding: 15px;
border: none;
border-radius: 0px 10px 10px 0px;
top: 50%;
transform: translate(-0%, -50%);
}

.how-to-modal .slide-arrow.next-arrow {
position: absolute;
z-index: 1;
height: 80px;
background: rgba(31, 54, 101, 0.8);
color: #fff;
padding: 15px;
border: none;
border-radius: 10px 0px 0px 10px;
top: 50%;
right: 0%;
transform: translate(-0%, -50%);
cursor: pointer;
}

.how-to-modal .slide-arrow.prev-arrow:hover, .how-to-modal .slide-arrow.next-arrow:hover {
background: rgba(31, 54, 101, 1);  
}

.how-to-modal .slick-slide{
  margin:10px;
}
.how-to-modal .slick-slide img{
  width:100%;
  border: 2px solid #fff;
}

.how-to-modal .image-item {
padding-top: 56%;
background: no-repeat center center / cover;
position: relative;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.how-to-modal .image-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding-top: 56%;
background: no-repeat center center / cover;
position: relative;
    border-radius: 4px;
    position: relative;
}

.how-to-modal .modal-header {
border-bottom: 0px solid #fff;
text-align: center;
display: block;
padding: 20px;
margin-bottom: 0px;
border-radius: 0px;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
}

.how-to-modal .modal-header .top-close-btn {
position: absolute;
top: 0px;
right: 0px;
background: #f53e3e;
color: #fff;
padding: 10px 15px;
border-radius: 0px 4px 0px 4px;
cursor: pointer;
font-weight: 600;
}

.how-to-modal .modal-header .top-close-btn:hover {
background: #b51b1b;
}

.how-to-modal .modal-footer {
border-top: 0px solid #fff;
background: rgba(242, 242, 242, 1);
text-align: center;
display: block;
}

.how-to-modal .btn-close-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #f53e3e;
border: 1px solid #fff;
border-radius: 100px;
}

.how-to-modal .btn-close-modal:hover {
font-weight: 600;
background: #b51b1b;
}

.how-to-modal .btn-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
background: #fff;
border: 1px solid #fff;
border-radius: 100px;
}

.how-to-modal .btn-modal:hover {
font-weight: 600;
background: var(--primary-color);
color: #fff;
}

.how-to-modal .modal-title {
margin-bottom: 0;
line-height: 1.5;
font-weight: 600;
font-size: 20px;
}

.how-to-modal .modal-close-btn {
font-size: 24px;
background: rgb(255, 70, 70);
display: inline-table;
padding: 4px 8px;
position: absolute;
margin-bottom: 15px;
border-radius: 0px 0px 0px 4px;
cursor: pointer;
float: right;
z-index: 999999;
color: #fff;
top: 0px;
right: 0;
}

.how-to-modal .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border: 0px solid transparent; }
.how-to-modal .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.how-to-modal .modal-close-btn:hover {
background: rgb(218, 40, 40);
color: #fff;
}

.how-to-modal .modal-header p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 200;
opacity: 0.7;
}

.how-to-modal .modal-body {
background: #fff;
color: var(--primary-color);
padding: 0px;
}

.how-to-modal .modal-body .content {
padding: 20px;
}

.how-to-modal .modal-body .video {
padding: 20px;
}

.how-to-modal .modal-body .video-section {
background: #fff;
}

.how-to-modal .modal-body .content-section {
font-size: 14px;
background: #fff;
}

.how-to-modal .modal-body .content-section h5 {
font-weight: 600;
font-size: 18px;
}

.how-to-modal .modal-body .content-section h2 {
font-size: 20px;
font-weight: 600;
}

.how-to-modal .modal-body .content-section h3 {
font-size: 20px;
font-weight: 600;
}

.how-to-modal .modal-body .content-section h3.tick-before::before {
    content: '\2713';
    margin-right: 8px; 
    color: var(--green-color); 
}

.how-to-modal .modal-body .content-section p {
opacity: 1;
}

.how-to-modal .modal-body .content-section ul:last-child {
margin-bottom: 0px;
}

.how-to-modal .modal-body .content-section p:last-child {
margin-bottom: 0px;
}

.how-to-library-modal .nav-pills .nav-link {
color: #fff;
background-color: rgba(255, 255, 255, 0.11);
border: 1px solid rgba(255, 255, 255, 0);
border-radius: 0px;
font-weight: 600;
}

.how-to-library-modal .nav-pills .nav-link.active {
color: #fff;
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
}

.how-to-library-modal .nav {
gap: 10px;
}

.modal-filter .modal-body {
background: #fff;
padding: 20px;
border-radius: 10px;
}

.modal-filter .modal-body p:last-child {
margin-bottom: 0px;
}

.modal-filter .modal-body .title {
text-transform: uppercase;
font-weight: 600;
opacity: 1;
color: var(--primary-color);
font-size: 16px;
margin-bottom: 0px;
}

.modal-filter .modal-body .subtitle {
margin-bottom: 10px;
color: var(--primary-color);
opacity: 0.5;
font-size: 14px;
}

.modal-filter .modal-body .form-control {
background: rgba(31, 54, 101, 0.07);
border: 1px solid rgba(31, 54, 101, 0.12);
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
color: var(--primary-color);
}

.modal-filter .modal-body .form-control::placeholder {
color: var(--primary-color);
opacity: 0.3;
}

.modal-filter .modal-body .btn-filter-search {
padding: 15px 30px;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
font-size: 14px;
color: #fff;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.modal-filter .modal-body .btn-filter-reset {
padding: 15px 30px;
background: rgb(255, 255, 255);
border: 1px solid var(--primary-color);
border-radius: 4px;
font-size: 14px;
color: var(--primary-color);
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.modal-filter .modal-body .filter-input {
margin-bottom: 25px;
}

.btn-category {
background: rgba(31, 54, 101, 0.09);
border: 2px solid rgba(31, 54, 101, 0);
color: var(--primary-color);
font-weight: 400;
font-size: 14px;
margin-bottom: 5px;
}

.btn-check:checked+.btn-category {
border-color: rgba(31, 54, 101, 1);
}

.subcategory-section {
display: none;
}

li.dropdown:last-child .dropdown-menu {
right: 0;
left: auto;
top: 79px;
}

.navbar .dropdown-menu {
z-index: 1000;
min-width: 250px;
padding: 10px 0px;
margin: 0;
font-size: 14px;
color: var(--primary-color);
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 0px solid rgba(0,0,0,.15);
border-radius: 0px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.navbar .dropdown-menu .dropdown-item {
display: block;
width: 100%;
padding: 8px 16px;
color: var(--primary-color);
}

.navbar .dropdown-menu .dropdown-item:hover {
color: var(--primary-color);
background-color: rgba(31, 54, 101, 0.1);
font-weight: 600;
}

.navbar .dropdown-menu .dropdown-item.active {
text-decoration: none;
background-color: rgba(31, 54, 101, 0.1);
font-weight: 600;
}

.navbar .dropdown-menu .dropdown-header {
font-weight: 600;
color: var(--primary-color);
opacity: 0.4;
font-size: 14px;
}

/**** Bootstrap Override END ****/

/**** Move to Top Start ****/

#move-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none; /* Hidden by default */
  background-color: #1e3464;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s, transform 0.3s;
}

#move-to-top:hover {
  background-color: #1e3464;
  transform: scale(1.1);
}

/**** Move to Top End ****/

.how-to-library-page .library-category-btn {
padding: 16px 15px;
}

.how-to-library-page .main-btn-primary {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.how-to-library-page .main-btn-primary-outline {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: rgba(31, 54, 101, 1);
background: rgba(31, 54, 101, 0.02);
border: 1px solid rgba(31, 54, 101, 1);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.how-to-library-page .main-btn-primary-outline:hover {
background: rgba(31, 54, 101, 1);
border: 1px solid rgba(31, 54, 101, 1);
color: #fff;
}

.main-content-section {
position: relative;
}

.main-content {
padding: 20px 5px;
width: calc(100% - 340px);
min-height: 100vh;
margin: 0 auto;
position: relative;
margin-left: 340px;
}

.home-page .page-header .image {
width: 100%;
aspect-ratio: 4 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
background-position: top;
position: relative;
overflow: hidden;
cursor: pointer;
}

.home-page .page-header .image::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(31, 54, 101, 0.05);
z-index: 1;
}

.home-page .page-header .image.locked::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}

.home-page .page-header .image .middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
z-index: 2;
width: 80%;
margin: 0px auto;
}

.home-page .page-header .image .middle .middle-btn {
background: rgba(74, 193, 134, 0.8);
padding: 6px 14px;
border-radius: 100px;
color: #fff;
font-size: 28px;
font-weight: 500;
cursor: pointer;
display: inline-block;
border:none;
}

.home-page .page-header .image .middle .locked-btn {
background: rgba(255, 93, 93, 0.8);
padding: 14px 24px;
border-radius: 100px;
color: #fff;
font-size: 40px;
font-weight: 500;
pointer-events: none;
display: inline-block;
}

.home-page .btn-white {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: var(--primary-color);
background: #fff;
border: 1px solid #fff;
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.home-page .btn-green {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.home-page .btn-white-outline {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.home-page .btn-white-outline:hover {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: var(--primary-color);
background: #fff;
border: 1px solid #fff;
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.home-page .btn-outline {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: rgba(31, 54, 101, 1);
background: rgba(31, 54, 101, 0.02);
border: 1px solid rgba(31, 54, 101, 1);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.home-page .btn-outline:hover {
background: rgba(31, 54, 101, 1);
border: 1px solid rgba(31, 54, 101, 1);
color: #fff;
}

.new-library-page .main-content {
min-height: 100%!important;
}

.body-overlay {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 900; /* Ensure it's below the sidebar */
}

.body-overlay.show {
    display: block;
    z-index: 99999;
}

.main-content.with-header {
padding: 0px 0px 30px 0px;
}

.main-content.with-header .main-content-area {
padding: 0px 20px;
} 

.container {
margin: 0 auto;
max-width: 1380px;
}

.breadcrumb {
padding: 15px 30px;
background: rgba(31, 54, 101, 0.03);
font-size: 14px;
border-radius: 4px;
}

.breadcrumb li a {
text-decoration: none;
color: var(--primary-color);
}

.form-check-input:checked {
background-color: var(--green-color);
border-color: var(--green-color);
}

/**** Navbar ****/

.navbar {
z-index: 9;
background: var(--primary-color);
padding: 4px;
display: none;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
}

.logo-section {
    display: flex;
    align-items: center; /* Vertical alignment */
}

.logo-icon {
background: rgba(255, 255, 255, 0.15);
padding: 2px;
border-radius: 100px;
}

.logo-icon.navbar-logo {
width: 80px;
}

.login-icon-logo {
background: rgba(255, 255, 255, 1);
padding: 2px;
border-radius: 100px;
margin-bottom: 20px;
}

.login-icon-logo.login-logo {
width: 100px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-header {
    font-size: 12px;
    margin-bottom: -6px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 3px;
    color: #fff;
}

.logo-header span {
color: var(--green-color);
}

.logo-title {
    font-size: 20px;
    margin-bottom: -5px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
}

.logo-tagline {
    font-size: 10px;
    margin-bottom: 0px;
    font-weight: 500;
    opacity: 0.6;
    font-style: italic;
}

.navbar .nav-link {
font-size: 26px;
color: rgba(255,255,255,.55);
padding: 10px 20px!important;
background: rgba(255, 255, 255, 0.04);
margin: auto 2px;
border-radius: 4px;
}

.navbar .dropdown-toggle::after {
display: none;
}

/**** Sidebar ****/

.sidebar .sidebar-box {
background: #f7f7f7;
padding: 15px;
margin-bottom: 15px;
border-radius: 4px;
}

.sidebar .sidebar-box.cliniko {
background: #f4f6fe;
}

/* Hide scrollbar for WebKit browsers */
.sidebar .sidebar-content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Internet Explorer, Edge */
.sidebar .sidebar-content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.sidebar {
position: fixed;
z-index: 105;
top: 0;
bottom: 0;
left: 0;
background: #fff;
display: flex;
flex-shrink: 0;
width: 340px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
flex-direction: column!important;
-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.03);
padding-bottom: 0px;
}

.sidebar-close {
position: absolute;
z-index: 105;
top: 0px;
right: 0px;
padding: 10px 15px;
background: rgb(255, 93, 93);
border-radius: 0px 0px 0px 8px;
color: #fff;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.05);
display: none;
z-index: 999999;
cursor: pointer;
}

.sidebar-header {
width: 100%;
display: inline-table;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
padding: 15px;
border-bottom: 3px dashed rgba(31, 54, 101, 0.08);
margin-bottom: 5px;
}

.sidebar-header .logo {
font-size: 26px;
color: #fff;
text-align: center;
font-weight: 900;
text-transform: uppercase;
margin-bottom: -5px;
}

.sidebar-header .logo img {
width: 80px;
}

.sidebar-header .logo span {
  font-weight: 900;
  color: var(--primary);
}

.sidebar-header .tagline {
font-size: 10px;
opacity: 0.5;
letter-spacing: 1px;
color: #fff;
text-align: center;
font-weight: 300;
text-transform: uppercase;
margin-bottom: 0px;
}

.sidebar-content {
overflow: hidden;
flex: 1 0 auto;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 0px!important;
height: 80vh;
overflow-y: scroll;
position: relative;
}

.sidebar-footer {
flex: none;
padding: 20px;
background: rgba(31, 54, 101, 0.11);
}

.sidebar-footer .footer-btn {
color: #fff;
background-color: rgb(255, 93, 93);
padding: 15px;
font-weight: 500;
border-radius: 4px;
text-align: center;
font-size: 12px;
cursor: pointer;
display: block;
width: 100%;
}

.sidebar-footer .footer-btn:hover {
background-color: rgb(255, 93, 93);
}


.sidebar .sidebar-header .logo {
border-radius: 100px;
width: 80px;
margin: 0px auto;
display: block;
}

.sb-link-header {
color: var(--primary-color);
letter-spacing: 0px;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 10px;
}

.sb-link-header .soon-text {
color: rgb(255, 83, 83);
font-size: 10px;
opacity: 0.8;
}

.sb-links {
margin-left: 0px;
padding-left: 0px;
}

.sb-link {
font-weight: 400;
padding: 10px 15px;
color: var(--primary-color);
background-color: rgba(31, 54, 101, 0.07);
border-radius: 4px;
margin-bottom: 10px;
cursor: pointer;
display: -webkit-flex;
}

.sb-link.exit-adm-panel {
font-weight: 400;
padding: 10px 15px;
color: #fff;
background-color: #000;
border-radius: 4px;
margin-bottom: 10px;
cursor: pointer;
display: -webkit-flex;
}

.sb-link.logout-btn {
background: rgb(255, 93, 93);
color: #fff;
}

.sb-link.active {
background: var(--primary-color);
color: #fff;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
}

.sb-link.locked {
pointer-events: none;
opacity: 0.5;
}

.sb-link.inactive {
pointer-events: none;
opacity: 0.5;
}

.sb-link:not(.active):hover {
background-color: var(--primary-color);
color: #fff;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
}

.sb-link.logout-btn:hover {
background: rgb(227, 57, 57);
}

.sb-link.exit-adm-panel:not(.active):hover {
color: #fff!important;
background: #000!important;
}

.sb-link:last-child {
margin-bottom: 30px;
}

.sb-title {
font-size: 12px;
display: flex;
align-items: center;
width: 100%;
position: relative;
}

.sb-title .counter {
position: absolute;
right: 0px;
padding: 5px 10px;
background: rgba(74, 193, 134, 1);
color: #fff;
border-radius: 4px;
font-weight: 500;
}

.sb-icon {
padding: 5px 0px;
font-size: 20px;
line-height: 20px;
display: -webkit-inline-box;
border-right: 1px solid rgba(223, 224, 230, 0.5);
padding-right: 10px;
margin-right: 10px;
}

/**** Page ****/

.page-header {
margin-bottom: 20px;
display: flex;
align-items: center;
color: #1f3665;
}

.page-header.no-flex {
display: block;
align-items: center;
}

.page-header h2 {
font-weight: 500;
font-size: 40px;
margin-bottom: 0px;
}

.page-header p {
margin-bottom: 0px;
opacity: 0.6;
font-size: 20px;
font-weight: 400;
}

.page-header p.content {
margin-bottom: 0px;
opacity: 0.6;
font-size: 16px;
line-height: 22px;
}

.page-header .header-icon {
font-size: 50px;
margin-right: 15px;
}

.main-content.with-header .page-header {
padding: 60px 30px;
margin-bottom: 30px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.05);
background-color: rgba(31, 54, 101, 0.08);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 200 200'%3E%3Cpolygon fill='%23153365' fill-opacity='0.02' points='100 0 0 100 100 100 100 200 200 100 200 0'/%3E%3C/svg%3E");
}

.main-content .page-header.primary {
padding: 50px;
border-radius: 10px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.03);
background-color: #fff;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
}

.main-content .page-header .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border: 0px solid transparent; }
.main-content .page-header .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.main-content .page-header.light {
padding: 50px;
border-radius: 10px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.03);
height: 100%;
background-color: rgba(31, 54, 101, 0.08);
color: var(--primary-color);
}

.main-content .page-header .header-text {
width: 100%;
}

.main-content .page-header .header-buttons {
margin-top: 20px;
}

.main-content .page-header .header-btn {
background: rgba(255, 255, 255, 0.11);
font-size: 14px;
padding: 15px 20px;
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.main-content .page-header .header-btn:hover {
background: #fff;
color: var(--primary-color);
}

.main-content .page-header .header-btn.green {
background: var(--green-color);  
}

.main-content .page-header .header-btn.green:hover {
background: var(--green-color-hover);  
color: #fff;
}

.main-content .page-header .page-header-btn {
float: right;
padding: 20px 30px;
background: rgba(255, 0, 0, 0.05);
border-radius: 8px;
cursor: pointer;
text-align: center;
color: rgba(255, 0, 0, 0.5);
}

.main-content .page-header .page-header-btn:hover {
background: rgba(255, 0, 0, 0.5);
color: #fff;
}

.main-content .page-header .page-header-btn i {
font-size: 30px;
}

.main-content .page-header .page-header-btn p {
font-size: 14px;
margin-bottom: 0px;
}

.main-content .dashboard-time-block {
padding: 20px;
border-radius: 10px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.03);
background-color: rgba(31, 54, 101, 0.05);
color: #1f3665;
height: 100%;
font-size: 50px;
font-weight: 600;
text-align: center;
display: grid;
align-items: center;
position: relative;
overflow: hidden;
}

.main-content .dashboard-time-block .time {
font-size: 60px;
font-weight: 600;
text-align: center;
margin: auto;
margin-bottom: -15px;
}

.main-content .dashboard-time-block .date {
font-size: 18px;
font-weight: 400;
text-align: center;
margin: auto;
}

.main-content .dashboard-time-block .time-icon {
position: absolute;
top: 53%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 140px;
opacity: 0.08;
}

.section-header h2 {
font-size: 16px;
font-weight: 500;
opacity: 0.8;
color: #1f3665;
margin-bottom: 2px;
}

.section-header p {
font-size: 13px;
font-weight: 400;
opacity: 0.4;
color: #1f3665;
}


.footer {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    opacity: 0.5;
    font-size: 12px;
    text-align: center;
}

/**** Dashboard ****/


.home-page .upcoming-events-box {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.025);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  min-height: 165px;
  max-height: 165px;
  position: relative; /* Needed for absolute positioning */
  overflow-y: scroll;
}

.home-page .no-upcoming-events {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%; /* Optional, for multiline centering */
}

.home-page .no-upcoming-events p {
font-size: 14px;
opacity: 0.6;
}

.home-page .no-upcoming-events .icon {
font-size: 30px;
opacity: 0.6;
color: rgba(255, 93, 93, 1);
}

.home-page .upcoming-events-box .view-events-btn {
padding: 10px 20px;
font-size: 12px;
font-weight: 500;
color: rgba(31, 54, 101, 0.8);
background: rgba(31, 54, 101, 0.05);
border: 1px solid rgba(31, 54, 101, 0.1);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.home-page .upcoming-events-box .view-all-events-text {
font-size: 13px;
opacity: 0.8;
color: #1f3665;
text-align: center;
display: block;
margin-top: 10px;
margin-bottom: 5px;
}

.home-page .upcoming-events-box .event-block {
display: flex;
align-items: center;
background: rgba(31, 54, 101, 0.05);
border-radius: 8px;
padding: 10px;
margin-bottom: 5px;
width: 100%;
}

.home-page .upcoming-events-box .event-block:last-child {
margin-bottom: 0px;
}

.home-page .upcoming-events-box .event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
background: var(--primary-color);
color: #fff;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
padding: 5px 10px;
border-radius: 8px;
}

.home-page .upcoming-events-box .event-day {
font-size: 20px;
font-weight: 600;
color: #fff;
margin-bottom: -6px;
}

.home-page .upcoming-events-box .event-month {
  font-size: 13px;
  text-transform: uppercase;
color: #fff;
opacity: 0.6;
}

.home-page .upcoming-events-box .event-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-page .upcoming-events-box .event-title {
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0px;
}

.home-page .upcoming-events-box .event-time {
  font-size: 12px;
color: var(--primary-color);
opacity: 0.6;
}


.home-page .tool-item-box {
box-shadow: 0 .125rem .25rem rgba(0,0,0,.025);
border-radius: 8px;
background: #fff;
padding: 20px;
}

.home-page .tool-item-box h5 {
font-size: 15px;
margin-bottom: 5px;
font-weight: 600;
}

.home-page .tool-item-box p {
font-size: 13px;
opacity: 0.7;
}

.home-page .tool-item-box .image {
width: 100%;
aspect-ratio: 4 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
background-position: center;
position: relative;
overflow: hidden;
}

.home-page .tool-item-btn {
padding: 10px;
font-size: 13px;
font-weight: 500;
color: rgba(31, 54, 101, 1);
background: rgba(31, 54, 101, 0.02);
border: 1px solid var(--green-color);
border-radius: 4px;
display: flex;
align-items: center;
cursor: pointer;
gap: 10px;
}

.home-page .tool-item-btn i {
  font-size: 16px; /* Optional: adjust icon size */
  border-radius: 4px;
background: var(--green-color);
padding: 5px 10px;
color: #fff;
}

.home-page .tool-item-btn p {
  margin-bottom: 0px;
  opacity: 0.6;
  font-size: 12px;
  margin-top: 2px; /* optional for spacing under "Locked" */
}

.home-page .tool-item-btn > div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}


.home-page .tool-item-locked {
padding: 10px;
font-size: 13px;
font-weight: 500;
color: rgba(193, 42, 42, 1);
background: rgba(223, 78, 77, 0.05);
border: 1px solid rgba(255, 93, 93, 1);
border-radius: 4px;
display: flex;
align-items: center;
cursor: default;
gap: 10px;
}

.home-page .tool-item-locked i {
  font-size: 16px; /* Optional: adjust icon size */
  border-radius: 4px;
background: rgba(255, 93, 93, 1);
padding: 5px 10px;
color: #fff;
}

.home-page .tool-item-locked p {
  margin-bottom: 0px;
  opacity: 0.6;
  font-size: 12px;
  margin-top: 2px; /* optional for spacing under "Locked" */
}

.home-page .tool-item-locked > div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}


.home-page .clinical-tools-slides .slick-slide {
  padding: 0 0px; /* 15px on left and right = 30px total space between slides */
  box-sizing: border-box; /* Makes sure padding doesn't break layout */
  border: 2px solid rgba(31, 54, 101, 0.02);
  border-radius: 8px;
  margin: 0px 6px;
}

/* Optional: add scaling/fading effect as before */
.home-page .clinical-tools-slides .slick-slide {
  opacity: 1;
  transition: all 0.3s ease;
}

.home-page .clinical-tools-slides .slick-center {
  opacity: 1;
  margin: 0px 6px;
  padding: 0 0px;
  border: 2px solid rgba(31, 54, 101, 0.02);
  border-radius: 8px;
}

.tools-box {
box-shadow: 0 .125rem .25rem rgba(0,0,0,.025);
text-align: center;
}

.tools-box .header {
padding: 20px;
background: rgba(31, 54, 101, 0.05);
border-radius: 8px 8px 0px 0px;
}

.tools-box .header h5 {
font-size: 18px;
text-align: center;
font-weight: 600;
margin-bottom: 2px;
}

.tools-box .header p {
font-size: 14px;
text-align: center;
font-weight: 400;
margin-bottom: 0px;
}

.tools-box .header p.coming-soon {
font-size: 14px;
text-align: center;
font-weight: 400;
margin-bottom: 0px;
padding: 4px;
background: yellow;
color: #fff;
}

.tools-box .content {
padding: 20px;
background: #fff;
border-radius: 0px 0px 8px 8px;
}

.tools-box .content p {
margin-bottom: 0px;
font-size: 14px;
}

.tools-box .content .image {
width: 100%;
aspect-ratio: 4 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
background-position: center;
position: relative;
overflow: hidden;
}

.tools-box .content .image::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(31, 54, 101, 0.05);
z-index: 1;
}

.tools-box .content .image.locked::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}

.tools-box .content .image .middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
z-index: 2;
width: 80%;
margin: 0px auto;
}

.tools-box .content .image .middle .middle-btn {
background: var(--green-color);
padding: 14px 24px;
border-radius: 100px;
color: #fff;
font-size: 40px;
font-weight: 500;
cursor: pointer;
display: inline-block;
}

.tools-box .content .image .middle .locked-btn {
background: rgba(255, 93, 93, 0.8);
padding: 14px 24px;
border-radius: 100px;
color: #fff;
font-size: 40px;
font-weight: 500;
pointer-events: none;
display: inline-block;
}

.dashboard-block {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    position: relative; /* added */
    cursor: pointer;
}

.dashboard-block.has-image {
    padding: 0px;
}

.dashboard-block .image {
    width: 100%;
    aspect-ratio: 2 / 2;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    background-position: center;
    position: relative; /* added */
    overflow: hidden; /* added */
}

.dashboard-block .image.wider {
    width: 100%;
    aspect-ratio: 4 / 2;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    background-position: center;
    position: relative; /* added */
    overflow: hidden; /* added */
}

.dashboard-block .image::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(31, 54, 101, 0.7);
z-index: 1;
}

.dashboard-block:hover .image::before {
background-color: rgba(31, 54, 101, 0.8);
}

.dashboard-block .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; /* text color */
    text-align: center; /* center text horizontally */
    z-index: 2; /* ensure the text is above the overlay */
    width: 80%;
    margin:0px auto;
}

.dashboard-block .text h4.icon {
padding: 15px 17px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
display: inline-block;
border-radius: 100px;
}

.dashboard-block .text h2 {
font-size: 30px;
margin-bottom: 5px;
font-weight: 600;
}

.dashboard-block .text p {
font-size: 14px;
line-height: 18px;
margin: 0;
font-weight: 400;
opacity: 0.8;
}

.page-divider {
border-top: 3px solid rgba(236, 236, 236, 0.37);
margin: 20px 0px;
}

.progress-block p.title {
font-weight: 500;
margin-bottom: 2px;
font-size: 14px;
}

.progress-block p.content {
font-weight: 500;
margin-bottom: 10px;
font-size: 12px;
opacity: 0.6;
}

.dashboard-stat-block {
padding: 10px;
border-radius: 8px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.03);
background-color: #fff;
height: 100%;
position: relative;
color: #1f3665;
display: flex;
align-items: center;
}

.dashboard-stat-block .number {
font-size: 22px;
font-weight: 600;
margin-bottom: -5px;
}

.dashboard-stat-block .description {
font-size: 13px;
font-weight: 400;
opacity: 0.5;
}

.dashboard-stat-block .icon {
display: inline-block;
margin-right: 15px;
}

.dashboard-stat-block .content {
display: inline-block;
}

.dashboard-stat-block .stat-icon {
display: block;
background: rgba(31, 54, 101, 0.05);
padding: 8px 15px;
border-radius: 8px;
font-size: 28px;
font-weight: bold;
color: var(--primary-color);
}

.dashboard-stat-block .stat-icon.green {
  background:
   radial-gradient(50% .2em at top,#000a,#0000) border-box,
   var(--green-color) padding-box;
}

.dashboard-stat-block .stat-icon.orange {
  background:
   radial-gradient(50% .2em at top,#000a,#0000) border-box,
   #ff801f padding-box;
}

.dashboard-stat-block .stat-icon.purple {
  background:
   radial-gradient(50% .2em at top,#000a,#0000) border-box,
   #A090DF padding-box;
}





/**** Animations ****/


#loading-container {
width: 100%;
background-color: rgba(31, 54, 101, 0.05);
height: 60px;
overflow: hidden;
border-radius: 4px;
margin-bottom: 15px;
position: relative;
display: none;
}

#loading-container p.loading-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--primary-color);
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.2;
}

#loading-bar {
width: 100%;
height: 100%;
background-color: var(--green-color);
animation: loadingAnimation 3s linear infinite;
}

@keyframes loadingAnimation {
0% {
width: 0%;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}

.loading-circle {
position: fixed;
z-index: 9999;
background: rgba(255, 255, 255, 0.9);
width: 100%;
height: 100%;
left: 0px;
top: 0px;
display: none;
}

.loading-circle-item {
width: 40px;
height: 40px;
border: 8px solid rgba(31, 54, 101, 0.29);
border-top: 8px solid var(--green-color);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: spin 1s linear infinite;
z-index: 2;
}

.loading-circle-text {
  border-radius: 50%;
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -56%);
  z-index: 2; /* Ensure the loading circle is above the overlay */
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

.loading-circle-content {
  border-radius: 50%;
  position: absolute;
  top: 59%;
  left: 50%;
  transform: translate(-50%, -59%);
  z-index: 2; /* Ensure the loading circle is above the overlay */
  font-size: 12px;
  font-weight: 300;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}


.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
  animation-iteration-count: infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}

.pop {
    transform: scale(1.4); /* You can adjust the scale factor as needed */
    transition: transform 0.3s;
  }

/**** Library ****/

.library-list {
position: relative;
}

.no-more-entries {
padding: 30px;
background: rgba(31, 54, 101, 0.05);
color: #1f3665;
border-radius: 4px;
text-align: center;
}

.no-more-entries.green {
background: rgba(74, 193, 134, 0.05);
color: #174e32;
}

.no-more-entries.green .icon, .no-more-entries.green .title, .no-more-entries.green .content {
opacity: 0.4;
}

.no-more-entries.red {
background: rgba(255, 0, 0, 0.02);
color: rgba(105, 0, 0, 1);
}

.no-more-entries.red .icon, .no-more-entries.red .title, .no-more-entries.red .content {
opacity: 0.4;
}

.no-more-entries .icon {
font-size: 60px;
display: block;
opacity: 0.2;
margin-bottom: -10px;
}

.no-more-entries .title {
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
opacity: 0.2;
margin-bottom: 0px;
}

.no-more-entries .content {
font-size: 16px;
font-weight: 400;
opacity: 0.2;
}

.library-title-section {
padding: 5px 0px 0px;
font-weight: 600;
}

.library-title-section .title {
font-weight: 600;
font-size: 30px;
text-transform: capitalize;
margin-bottom: 2px;
color: #fff;
}

.library-title-section .title .search-term-text {
font-weight: 500;
}

.library-title-section .first-item {
color: #fff;
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.library-title-section .item {
font-weight: 300;
font-size: 14px;
color: #fff;
}

.library-title-section .icon-divider {
font-size: 10px;
margin: 0px 4px;
color: var(--green-color);
}


.category-info-box.dark .title {
background: #000;
color: #fff;
}

.category-info-box.v-three .content {
margin-bottom: 0px;
}

.category-info-box.v-three .subcategory {
margin-bottom: 30px;
}

.category-info-box.v-three .subcategory:last-child {
margin-bottom: 0px;
}

.category-info-box.v-three .not-found-text {
color: rgb(255, 134, 134);
font-weight: 400;
margin-bottom: 15px;
}

.category-info-box.v-three {
  counter-reset: section; /* Initialize the counter */
}

.category-info-box.v-three .outcome-specific-item {
  counter-increment: section; /* Increment the counter */
  position: relative; /* Ensure the numbering appears inside the box */
  color: #000;
  padding: 15px;
  background: rgba(31, 54, 101, 0.05);
  border-left: 5px solid rgba(31, 54, 101, 0.05);
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 12px;
}

.category-info-box.v-three .outcome-specific-item span {
margin-left: 10px;
}

.category-info-box.v-three .outcome-specific-item::before {
  content: counter(section) ". "; /* Display the counter value before the text */
  position: absolute;
  left: 10px; /* Adjust the position as needed */
  font-weight: bold; /* Optional: make the number bold */
}

.category-info-box.v-three .outcome-specific-item:last-child {
  margin-bottom: 0px;
}

.category-info-box.v-three .outcome-specific-item:hover {
  color: #000;
  background: rgba(31, 54, 101, 0.1);
  border-left: 5px solid var(--green-color);
}


.category-info-box.v-three .pathology-specific-item {
  counter-increment: section; /* Increment the counter */
  position: relative; /* Ensure the numbering appears inside the box */
  color: #000;
  padding: 15px;
  background: rgba(31, 54, 101, 0.05);
  border-left: 5px solid rgba(31, 54, 101, 0.05);
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 12px;
}

.category-info-box.v-three .pathology-specific-item span {
margin-left: 10px;
}

.category-info-box.v-three .pathology-specific-item::before {
  content: counter(section) ". "; /* Display the counter value before the text */
  position: absolute;
  left: 10px; /* Adjust the position as needed */
  font-weight: bold; /* Optional: make the number bold */
}

.category-info-box.v-three .pathology-specific-item:last-child {
  margin-bottom: 0px;
}

.category-info-box.v-three .pathology-specific-item:hover {
  color: #000;
  background: rgba(31, 54, 101, 0.1);
  border-left: 5px solid var(--green-color);
}


.category-info-box.v-three .not-found-text:last-child {
    margin-bottom: 0px;
}


.quick-access-box-header {
background: #000;
display: inline-block;
border-radius: 8px;
color: #fff;
font-size: 12px;
padding: 10px 20px;
}

.quick-access-box .content {
padding: 20px;
background: #fff;
border: 1px solid #fff;
border-radius: 8px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02)!important;
}

.quick-access-box .quick-link-item {
display: block;
background: rgba(31, 54, 101, 0.04);
border: 1px solid rgba(31, 54, 101, 1);
color: #1F3665;
font-weight: 500;
text-align: center;
padding: 15px;
font-size: 14px;
border-radius: 8px;
cursor: pointer;
}

.quick-access-box .quick-link-item.active {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}


.quick-access-box .quick-link-item:hover {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}

.category-info-box {
display: none;
}

.category-info-box .content {
padding: 20px;
background: #fff;
border: 1px solid #fff;
border-radius: 0px 0px 8px 8px;
margin-bottom: 20px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02)!important;
}

.category-info-box .content hr {
height: 2px!important;
color: rgba(31, 54, 101, 0.15);
}

.category-info-box .content h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
color: var(--primary-color);
}

.category-info-box .content h3 {
font-size: 16px;
font-weight: 600;
color: rgba(31, 54, 101, 0.7);
}

.category-info-box .content h4 {
font-size: 14px;
font-weight: 500;
color: rgba(31, 54, 101, 0.5);
}

.category-info-box .title {
padding: 20px 20px;
font-weight: 600;
font-size: 16px;
background: rgba(31, 54, 101, 0.09);
border-radius: 8px 8px 0px 0px;
color: var(--primary-color);
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02)!important;
}

.category-info-box h5 {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}

.category-info-box h5.tick-before::before {
    content: '\2713';
    margin-right: 8px; 
    color: var(--green-color); 
}

.category-info-box p {
font-size: 12px;
}

.category-info-box p:last-child {
margin-bottom: 0px;
}

.category-info-box ul li, .category-info-box ol li {
font-size: 12px;
}

.category-info-box ul li:last-child {
margin-bottom: 0px;
}

.category-info-box ul li.hwtl-exercise .view-exercise {
color: #097eeb;
cursor: pointer;
}

.category-info-box ul li.hwtl-exercise .view-exercise:hover {
font-weight: 500;
}

.high-level-box {
display: none;
}

.high-level-box .content {
padding: 20px;
background: #fff;
border: 1px solid #fff;
border-radius: 0px 0px 8px 8px;
margin-bottom: 20px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02)!important;
}

.high-level-box .content hr {
height: 2px!important;
color: rgba(31, 54, 101, 0.15);
}

.high-level-box .content h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
color: var(--primary-color);
}

.high-level-box .content h3 {
font-size: 16px;
font-weight: 600;
color: rgba(31, 54, 101, 0.7);
}

.high-level-box .content h4 {
font-size: 14px;
font-weight: 500;
}

.high-level-box .title {
padding: 20px 20px;
font-weight: 600;
font-size: 16px;
background: rgba(31, 54, 101, 0.09);
border-radius: 8px 8px 0px 0px;
color: var(--primary-color);
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02)!important;
}

.high-level-box h5 {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}

.high-level-box h5.tick-before::before {
    content: '\2713';
    margin-right: 8px; 
    color: var(--green-color); 
}

.high-level-box p {
font-size: 12px;
}

.high-level-box p:last-child {
margin-bottom: 0px;
}

.high-level-box ul:last-child {
margin-bottom: 0px;
}

.high-level-box ul li, .high-level-box ol li {
font-size: 12px;
}

.high-level-box ul li:last-child {
margin-bottom: 0px;
}

.high-level-box ul li.hwtl-exercise .view-exercise {
color: #097eeb;
cursor: pointer;
text-decoration: underline;
}

.high-level-box ul li.hwtl-exercise .view-exercise:hover {
font-weight: 500;
}


.outcome-protocol-box {
display: none;
}

.outcome-protocol-box .content {
padding: 20px;
background: #fff;
border: 1px solid #fff;
border-radius: 0px 0px 8px 8px;
margin-bottom: 20px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02)!important;
}

.outcome-protocol-box .content hr {
height: 2px!important;
color: rgba(31, 54, 101, 0.15);
}

.outcome-protocol-box .content h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
color: var(--primary-color);
}

.outcome-protocol-box .content h3 {
font-size: 16px;
font-weight: 600;
color: rgba(31, 54, 101, 0.7);
}

.outcome-protocol-box .content h4 {
font-size: 14px;
font-weight: 500;
}


.outcome-protocol-box .content .categories {
list-style-type: none;
margin: 0px;
padding-left: 0px;
}

.outcome-protocol-box .content .hwtl-category {
color: #000;
padding: 15px;
background: rgba(31, 54, 101, 0.05);
border-radius: 4px;
margin-bottom: 8px;
cursor: pointer;
}

.outcome-protocol-box .content .hwtl-category:hover {
background: rgba(31, 54, 101, 0.1);
}

.outcome-protocol-box .content .hwtl-category:last-child {
margin-bottom: 0px;
}

.outcome-protocol-box .title {
padding: 20px 20px;
font-weight: 600;
font-size: 16px;
background: rgba(31, 54, 101, 0.09);
border-radius: 8px 8px 0px 0px;
color: var(--primary-color);
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02)!important;
}

.outcome-protocol-box h5 {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}

.outcome-protocol-box h5.tick-before::before {
    content: '\2713';
    margin-right: 8px; 
    color: var(--green-color); 
}

.outcome-protocol-box p {
font-size: 12px;
}

.outcome-protocol-box p:last-child {
margin-bottom: 0px;
}

.outcome-protocol-box ul:last-child {
margin-bottom: 0px;
}

.outcome-protocol-box ul li, .category-info-box ol li {
font-size: 12px;
}

.outcome-protocol-box ul li:last-child {
margin-bottom: 0px;
}

.outcome-protocol-box ul li.hwtl-exercise .view-exercise {
color: #097eeb;
cursor: pointer;
text-decoration: underline;
}

.outcome-protocol-box ul li.hwtl-exercise .view-exercise:hover {
font-weight: 500;
}


.library-category-block {
padding: 0px;
background: #fff;
border-radius: 8px;
height: 100%;
position: relative;
cursor: pointer;
}

.library-category-block:hover .image .overlay {
background: rgba(31, 54, 101, 0.8);
}

.library-category-block:hover .image .text {
color: #fff;
}

.library-category-block .image {
width: 100%;
aspect-ratio: 4 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0;
background-position: center;
border-radius: 8px;
position: relative;
}

.library-category-block .image .overlay {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(233, 233, 233, 0.9);
display: flex;
justify-content: center;
align-items: center;
border-radius: 0px 0px 7px 7px;
padding: 15px 10px;
left: 0;
}

.library-category-block .image-small {
width: 100%;
aspect-ratio: 4 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0;
background-position: center;
border-radius: 8px;
position: relative;
}

.library-category-block .image-small.no-image {
width: 100%;
aspect-ratio: 6 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0;
background-position: center;
border-radius: 8px;
position: relative;
}

.library-category-block .image-small::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(31, 54, 101, 0);
z-index: 1;
border-radius: 4px;
}


.library-category-block.block {
/* border: 2px solid rgba(31, 54, 101, 0.08); */
}

.library-category-block.block:hover {
/* border: 2px solid rgba(31, 54, 101, 1); */
}

.library-category-block.block-popup {
/* border: 2px solid rgba(31, 54, 101, 0.08); */
}

.library-category-block.block-popup:hover {
/* border: 2px solid rgba(31, 54, 101, 1); */
}

.library-category-block .block {
width: 100%;
height: 100%;
aspect-ratio: 4 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0;
background-position: center;
border-radius: 8px;
position: relative;
}

.library-category-block .block .overlay {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(233, 233, 233, 0.9);
display: flex;
justify-content: center;
align-items: center;
border-radius: 0px 0px 7px 7px;
padding: 15px 10px;
left: 0;
z-index: 1;
}

.library-category-block .block.no-image .overlay {
position: absolute;
top: 0;
width: 100%;
background: rgba(233, 233, 233, 1);
display: flex;
justify-content: center;
align-items: center;
border-radius: 7px;
padding: 15px 15px;
left: 0;
z-index: 1;
}

.library-category-block .block.no-image .overlay:hover {
background: var(--primary-color);
}

.library-category-block.no-image:hover .image .text {
color: #fff;
}

.library-category-block .block.no-image .icon {
display: block;
font-size: 30px;
margin-bottom: 0px;
}

.library-category-block .block.no-image .icon .bi {
display: block;
margin-bottom: -8px;
}

.library-category-block .block.no-image .icon-text {
display: inline-block;
font-size: 8px;
margin-bottom: 15px;
background: var(--primary-color);
padding: 2px 4px;
color: #fff;
border-radius: 2px;
}

.library-category-block .block .text {
color: rgba(31, 54, 101, 1);
text-align: center;
font-size: 16px;
z-index: 2;
font-weight: 600;
margin-bottom: 0px;
}

.library-category-block .cat-stats {
position: absolute;
top: 10px;
right: 15px;
display: inline-flex;
display: none;
}

.library-category-block .cat-stats .stat {
margin-right: 5px;
background: #fff;
padding: 5px 10px;
font-size: 12px;
border-radius: 4px;
color: var(--primary-color);
font-weight: 600;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.library-category-block .cat-stats .stat:last-child {
margin-right: 0px;
}

.library-category-block .image .text {
color: var(--primary-color);
text-align: center;
font-size: 14px;
line-height: 18px;
z-index: 2;
font-weight: 500;
margin-bottom: 0px;
}

.library-block {
padding: 15px;
background: #fff;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
height: 100%;
position: relative;
}

.library-block.has-image {
padding: 0px;
}

.library-block .image {
width: 100%;
aspect-ratio: 4 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0;
background-position: center;
border-radius: 4px;
position: relative;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.library-block .image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(31, 54, 101, 0.2); /* Adjust the opacity (last value) as needed */
  z-index: 1;
  border-radius: 4px;
}

.library-block .image i {
  z-index: 2;
}

.library-block .image .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(31, 54, 101, 0.8); /* Red background with 0.5 opacity */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.library-block .image .text {
color: white;
text-align: center;
font-size: 18px;
z-index: 2;
font-weight: 600;
text-transform: uppercase;
}

.library-block .title {
font-weight: 500;
font-size: 14px;
margin-bottom: 5px;
margin-top: 15px;
}

.library-block .content {
font-weight: 400;
font-size: 12px;
margin-bottom: 0px;
opacity: 0.8;
}

.library-block-content {
padding-bottom: 50px;
}


.library-block-content .categories-header {
margin-bottom: 0px;
padding: 10px 15px;
background: rgba(31, 54, 101, 0.15);
color: #000;
font-size: 10px;
display: block;
border-radius: 4px 4px 0px 0px;
font-weight: 500;
}

.library-block-content .categories {
    background: rgba(31, 54, 101, 0.08);
    border-radius: 0px 0px 4px 4px;
    padding: 10px 20px;
    font-size: 9px;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    height: 60px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.library-block-content .categories::-webkit-scrollbar {
    /* display: none; Hide scrollbar for WebKit browsers (like Chrome, Safari) */
}

.library-block-content .categories::-webkit-scrollbar-track {
    background-color: rgba(31, 54, 101, 0.02);
}

.library-block-content .categories::-webkit-scrollbar-thumb {
    background-color: rgba(31, 54, 101, 0.2);
}


.library-block .library-block-content hr {
height: 3px!important;
color: #e4e4e4!important;
}

.library-block-content .categories > ul {
padding-left: 0px;
}

/* Style for the top-level parent categories */
.library-block-content .categories > ul > li {
    padding-left: 0;
    font-weight: 600; /* Bold text */
    font-size: 11px; /* Bigger text */
    list-style-type: none;
}

/* Style for the subcategories */
.library-block-content .categories ul ul {
    padding-left: 10px; /* Adjust padding for better alignment */
    font-weight: 400; /* Regular weight */
    font-size: 9px; /* Smaller text */
    list-style-type: disc; /* Use disc for list style */
    padding-bottom: 5px; /* Space between items */
}

/* Further nesting of subcategories */
.library-block-content .categories ul ul ul {
    padding-left: 15px; /* Increased padding for deeper nesting */
    font-size: 9px; /* Even smaller text for deeper levels */
    list-style-type: circle; /* Different list style */
    padding-bottom: 5px;
}


.library-block .tags-block {
padding: 0px 15px;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}
.library-block .tags {
  font-size: 10px;
  background: #f9f9f9;
  padding: 8px;
  border-radius: 4px;
}

/**** Library Blocks ****/

.library-block .favourite-icon {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
cursor: pointer;
color: #fff;
}

.library-block .favourited {
color: rgb(255, 83, 83);
}

.library-block .exercise-button-block {
padding: 0px 15px;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}

.view-btn {
padding: 10px 20px;
border-radius: 4px;
display: inline-block;
font-size: 12px;
background: var(--green-color);
text-decoration: none;
cursor: pointer;
margin-top: 10px;
color: #fff;
border: 1px solid var(--green-color);
text-align: center;
}

.view-btn:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
color: #fff;
}

.favourites-btn {
font-size: 36px;
background: rgba(31, 54, 101, 0.11);
padding: 8px 20px;
display: inline-grid;
border-radius: 4px;
color: var(--primary-color);
cursor: pointer;
text-align: center;
float: right;
margin-right: 4px;
}

.favourites-btn:hover {
background: rgb(255, 108, 108);
color: #fff;
}

.favourites-btn.selected {
background: rgb(255, 108, 108);
color: #fff;
}

.favourites-btn i {
width: 100%;
display: block;
}

.favourites-btn span {
width: 100%;
display: block;
margin-top: -5px;
position: relative;
font-size: 10px;
}

.filter-btn {
font-size: 36px;
background: rgba(31, 54, 101, 0.11);
padding: 8px 20px;
display: inline-grid;
border-radius: 4px;
color: var(--primary-color);
cursor: pointer;
text-align: center;
float: right;
}

.filter-btn:hover {
background: rgba(31, 54, 101, 1);
color: #fff;
}

.filter-btn i {
width: 100%;
display: block;
}

.filter-btn span {
width: 100%;
display: block;
margin-top: -5px;
position: relative;
font-size: 10px;
}

.library-buttons-section {
padding: 40px;
border-radius: 0px;
margin-bottom: 20px;
margin-top: 10px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02)!important;
position: relative;
top: 0px;
border-top: none;
z-index: 4;
}

.library-buttons-section hr {
height: 4px!important;
color: rgba(233, 233, 233, 0.3);
}

.library-buttons-section form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.library-category-btn {
padding: 10px 15px;
background: #f0f0f0;
border-radius: 4px;
font-size: 20px;
display: -webkit-inline-flex;
align-items: center; /* Align items vertically in the center */
cursor: pointer;
color: var(--primary-color);
margin-right: 5px;
}

.library-category-btn:last-child {
margin-right: 0px;
}

.library-category-btn p {
margin-bottom: 0px;
font-size: 14px;
font-weight: 500;
margin-left: 5px; /* Add some margin for spacing between icon and text */
}

.library-category-btn.disabled-btn {
pointer-events: none;
opacity: 0.3;
cursor: not-allowed;
}

.library-category-btn:hover {
background: var(--green-color);
color: #fff;
}

.library-category-btn.favourites {
float: right;
margin-left: 5px;
padding: 16px 20px;
}

.library-category-btn.reset {
background: rgb(246, 246, 0);
color: #000;
}

.library-category-btn.search {
float: right;
margin-left: auto;
background: #f0f0f0;
border-radius: 0px 4px 4px 0px;
border: 1px solid #f0f0f0;
border-left: none;
font-size: 18px;
color: var(--primary-color);
}

.library-category-btn.favourites:hover {
background: rgb(255, 108, 108);
color: #fff;
}

.library-category-btn.exercises-favourites:hover {
background: rgb(255, 108, 108);
color: #fff;
}

.library-category-btn.exercises-favourites.active {
background: rgb(255, 108, 108);
color: #fff;
}

.library-category-btn.favourites.active {
background: rgb(255, 108, 108);
color: #fff;
}

.library-category-btn.help-btn {
padding: 10px 20px;
background: rgba(31, 54, 101, 0.05);
font-size: 30px;
color: var(--primary-color);
float: right;
margin-right: 10px;
}

.library-category-btn.filter {
padding: 10px 30px;
background: rgb(255, 233, 31);
font-size: 30px;
color: var(--primary-color);
float: right;
}


.library-category-search {
  display: flex;
  flex: 1;
  margin-bottom: 0!important;
  margin-right: 0px;
  position: relative; /* To position the button inside the input field */
}

.library-category-search input {
  width: 100%;
  padding: 20px;
  background: rgba(31, 54, 101, 0.04);
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid rgba(31, 54, 101, 0.04);
  color: var(--primary-color);
  padding-right: 50px; /* Space for the button */
}

.library-category-search input:focus {
  outline: none; 
  background: rgba(31, 54, 101, 0.05);
  border: 1px solid rgba(31, 54, 101, 0.08);
  box-shadow: none;
}

.library-category-btn.search {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--primary-color);
  padding: 0;
  font-size: 24px;
  cursor: pointer;
}

.library-category-btn.search:hover {
color: var(--green-color);
}

.library-category-btn.search i {
  pointer-events: none; /* Makes the icon unclickable, allowing the button to handle the click event */
}



.exercises-page .patient-dropdown {
width: 100%;
z-index: 1000;
background: #ffffff;
border: 1px solid rgba(31, 54, 101, 0.2);
max-height: 150px; 
overflow-y: auto; 
z-index: 1000;
position: absolute!important;
top: 65px!important;
left: 0px!important;
}

.exercises-page .patient-dropdown .no-result {
color: #ff0000;
padding: 5px 15px;
}

.exercises-page .patient-dropdown .no-result:hover {
background: #fff;
pointer-events: none;
cursor: none;
}

.exercises-page .patient-dropdown .dropdown-item {
cursor: pointer;
font-size: 12px;
padding: 5px 15px;
}


.exercises-page .library-content-block h5 {
font-weight: 500;
font-size: 16px;
margin-bottom: 15px;
color: var(--primary-color);
}

.exercises-page .search-patient-title {
background: rgba(31, 54, 101, 0.2);
font-weight: 500;
display: inline-block;
border-radius: 4px 4px 0px 0px;
padding: 8px 16px;
font-size: 14px;
color: var(--primary-color);
}

.library-patient-search {
  display: flex;
  flex: 1;
  margin-right: 0px;
  position: relative; /* To position the button inside the input field */
}

.library-patient-search input {
  width: 100%;
  padding: 20px;
  border-radius: 0px 4px 4px 4px;
  font-size: 14px;
  border: 1px solid #ced4da;
  color: var(--primary-color);
  padding-right: 50px; /* Space for the button */
}


.library-patient-search input:focus {
  outline: none; 
  background: rgba(31, 54, 101, 0.05);
  border: 1px solid rgba(31, 54, 101, 0.08);
  box-shadow: none;
}

.library-patient-search-btn.search {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--primary-color);
  padding: 0;
  font-size: 24px;
  cursor: pointer;
}

.library-patient-search-btn.search:hover {
color: var(--green-color);
}

.library-patient-search-btn.search i {
  pointer-events: none; /* Makes the icon unclickable, allowing the button to handle the click event */
}


.exercises-page .el-steps-container {
align-items: center;
}

.exercises-page .el-steps-container .step {
padding: 5px 15px;
display: -webkit-flex;
align-items: center;
background: rgba(31, 54, 101, 0.03);
border-radius: 4px;
border-left: 5px solid rgba(31, 54, 101, 0.05);
color: var(--primary-color);
}

.exercises-page .el-steps-container .step.active {
background: rgba(74, 193, 134, 0.1);
border-left: 5px solid rgba(31, 54, 101, 0.08);
}

.exercises-page .el-steps-container .step:last-child {
margin-right: 0px;  
}

.exercises-page .el-steps-container .step .number {
font-size: 20px;
align-items: center;
padding: 10px 10px 10px 0px;
}

.exercises-page .el-steps-container .step .description {
vertical-align: middle;
align-items: center;
padding: 10px 10px 10px 5px;
}

.exercises-page .el-steps-container .step .description h6 {
font-size: 16px;
margin-bottom: 2px;
font-weight: 600;
}

.exercises-page .el-steps-container .step .description p {
font-size: 12px;
margin-bottom: 0px;
opacity: 0.8;
}

/**** How-To Library ****/

.library-page .library-title-section .item {
font-size: 16px;
}

.library-page .exercises-controls {
padding: 20px;
background: rgba(255, 255, 255, 1);
margin-bottom: 20px;
}

.library-page .step-block {
  background: #f2f4f7;
  padding: 10px 20px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.library-page .step-block .steps-btn {
  padding: 15px 20px;
  background: #000;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
}

.library-page .step-block .step-info h6 {
font-size: 16px;
margin-bottom: 5px;
font-weight: 700;
color: var(--primary-color);
}

.library-page .step-block .step-info p {
font-size: 16px;
margin-bottom: 0px;
color: var(--primary-color);
opacity: 0.8;
}

.library-page .step-block .step-info p.unselect-text {
font-size: 12px;
cursor: pointer;
display: -webkit-inline-box;
color: rgba(255, 0, 0, 0.8);
}

.library-page .step-block .step-info p.unselect-text:hover {
opacity: 1;    
}

.library-page .step-block .steps-btn p {
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: 400;
  margin-left: 5px;
}

.library-page .step-block .steps-btn.next {
  background: var(--green-color);
  order: 3;
  margin-left: 5px;
}

.library-page .step-block .steps-btn.submit {
  background: var(--green-color);
  order: 3;
}

.library-page .step-block .steps-btn.disabled-btn {
background: var(--primary-color);
pointer-events: none;
opacity: 0.1;
}

.library-page .step-block .steps-btn.back {
  order: 1;
  margin-right: 5px;
}


.library-page .step-block .step-info {
  order: 2;
  flex-grow: 1;
  text-align: center;
}

.library-page .step-items .select-label {
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}

.library-page .step-items p.subtitle {
font-size: 14px;
opacity: 0.6;
}

.library-page .step-items .step-box {
background: #fff;
padding: 20px;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.library-page .step-items hr {
color: rgb(219, 219, 219);
height: 2px!important;
}

.library-page .step-items .form-select {
display: block;
width: 100%;
background-color: rgba(31, 54, 101, 0.02);
font-size: 16px;
padding: 15px;
font-weight: 400;
line-height: 1.5;
color: rgba(31, 54, 101, 1);
border: 1px solid rgba(31, 54, 101, 0.08);
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.library-page .step-items .next-btn {
padding: 15px 30px;
background: var(--green-color);
border-radius: 4px;
font-size: 14px;
display: inline-block;
align-items: center;
cursor: pointer;
color: #fff;
margin-top: 10px;
}



/* Common styles for exercise items */
.library-page .exercise-item {
  background: #fff;
  padding: 15px;
  font-size: 14px;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
  border-radius: 4px;
  border: 2px solid #fff;
  height: 100%;
}

.library-page .exercise-item hr {
color: rgb(219, 219, 219);
height: 2px!important;
}

.library-page .exercise-item.selected {
  border: 2px solid var(--green-color);
}

/* Styles for headings and paragraphs */
.library-page .exercise-item h5 {
  font-size: 14px;
  font-weight: 500;
}

.library-page .exercise-item p {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 0px;
  opacity: 0.6;
}

.library-page .exercise-item .view-exercise-text {
margin-bottom: 0px;
margin-top: 10px;
font-size: 12px;
text-align: center;
}

/* Styles for image container */
.library-page .exercise-item .image {
  width: 100%;
  aspect-ratio: 4 / 2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  margin-bottom: 15px;
}

.library-page .exercise-item .image .view .view-exercise-btn {
position: absolute;
top: 10px;
left: 45px;
cursor: pointer;
padding: 4px 8px;
display: inline-block;
color: var(--primary-color);
font-size: 14px;
border-radius: 8px;
background: #fff;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.025);
}

/* Positioning the favourites container */

.library-page .exercise-item .image .favourite .el-favourited-exercise {
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
padding: 4px 8px;
display: inline-block;
color: #fff;
font-size: 14px;
border-radius: 8px;
background: rgba(255, 0, 0, 0.8);
box-shadow: 0 .125rem .25rem rgba(0,0,0,.025);
}

.library-page .exercise-item .image .favourite .el-fav-pulse {
animation: el-fav-pulse 0.5s ease-in 2;
}

.library-page .exercise-item .image .favourite .el-favourite-exercise {
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
padding: 4px 8px;
display: inline-block;
color: rgba(255, 0, 0, 0.1);
font-size: 14px;
border-radius: 8px;
background: #fff;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.025);
}

@keyframes el-fav-pulse{
  25%  {transform: scale(0.9);}
  75%  {transform: scale(1.1);}
}

/* Positioning the checkbox container */
.library-page .exercise-item .image .check {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Common styles for the checkbox */
.library-page .exercise-item .form-check-input[type=checkbox] {
  height: 29px;
  width: 29px;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  cursor: pointer;
  position: relative;
}

/* Styles for unchecked checkboxes */
.library-page .exercise-item .form-check-input[type=checkbox]::before {
  content: "\2714"; /* Unicode checkmark */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(74, 193, 134, 0.3);
}

/* Styles for checked checkboxes */
.library-page .exercise-item .form-check-input[type=checkbox]:checked::before {
  color: rgba(0, 0, 0, 0);
  opacity: 0;
}


.library-page .exercise-item textarea {
padding: 10px;
background: rgba(31, 54, 101, 0.03);
border: 1px solid rgba(31, 54, 101, 0.1);
color: rgba(31, 54, 101, 1);
font-size: 11px;
}

.library-page .exercise-item .text-label {
font-size: 11px;
font-weight: 400;
margin-bottom: 4px;
opacity: 0.5;
}

.filter-modal .modal-content {
border-radius: 8px;
background: none;
border: 0px solid #fff;
padding: 0px;
}

.filter-modal .filter-footer-buttons {
margin-top: 20px;
}

.filter-modal .modal-content .title-section h5 {
color: #fff;
text-align: center;
margin-bottom: 0px;
font-size: 26px;
font-weight: 700;
}

.filter-modal .modal-content .title-section p.subtitle {
color: #fff;
text-align: center;
margin-bottom: 10px;
font-size: 14px;
font-weight: 400;
opacity: 0.6;
}

.filter-modal .modal-content .select-label {
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}

.filter-modal .modal-content p.subtitle {
font-size: 14px;
opacity: 0.6;
margin-bottom: 10px;
}

.filter-modal .modal-header {
border-bottom: 0px solid #fff;
text-align: center;
display: block;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
padding: 20px;
margin-bottom: 0px;
border-radius: 0px;
}

.filter-modal .modal-header p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 200;
opacity: 0.7;
}

.filter-modal #dropdown-container h6 {
font-size: 16px;
margin-bottom: 0px;
font-weight: 600;
}

.filter-modal #dropdown-container p {
font-size: 12px;
margin-bottom: 8px;
opacity: 0.6;
}

.filter-modal .modal-body {
background: #fff;
color: var(--primary-color);
padding: 20px;
border-radius: 8px;
}

.filter-modal .modal-title {
margin-bottom: 0;
line-height: 1.5;
font-weight: 700;
font-size: 22px;
}

.filter-modal .modal-footer {
border-top: 0px solid #fff;
background: rgba(242, 242, 242, 1);
text-align: center;
display: block;
}

.filter-modal .close-modal-header {
position: absolute;
top: 0px;
right: 0px;
color: #fff;
background: rgba(255, 255, 255, 0.11);
padding: 8px 12px;
border-radius: 100px;
cursor: pointer;
}

.filter-modal .close-modal-header:hover {
background: #f53e3e;
color: #fff;
}

.filter-modal .btn-reset-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #1F3665;
background: rgba(31, 54, 101, 0.05);
border: 1px solid #1F3665;
border-radius: 4px;
display: inline-block;
}

.filter-modal .btn-reset-modal:hover {
font-weight: 500;
color: #fff;
background: #1F3665;
}

.filter-modal .btn-close-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: #f53e3e;
border: 1px solid #fff;
border-radius: 4px;
display: inline-block;
}

.filter-modal .btn-close-modal:hover {
font-weight: 500;
background: #b51b1b;
}

.filter-modal .btn-success-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: inline-block;
}

.filter-modal .btn-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
background: #fff;
border: 1px solid #fff;
border-radius: 4px;
display: inline-block;
}

.filter-modal .btn-modal:hover {
font-weight: 600;
background: var(--primary-color);
color: #fff;
}

.filter-modal .form-label {
margin-bottom: 5px;
font-weight: 600;
font-size: 14px;
}

.filter-modal .form-control {
border-radius: 4px;
}

.filter-modal hr {
color: rgb(219, 219, 219);
height: 2px!important;
}



.library-page .library-buttons-section {
padding: 0px;
border-radius: 0px;
}

.library-page .library-buttons-section .content {
padding: 70px 50px;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
}


/* common */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #4ac186;
}
.ribbon span {
position: absolute;
display: block;
width: 220px;
left: -50px;
top: 35px!important;
padding: 15px 0;
background-color: rgba(255, 93, 93, 1);
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff;
font: 600 14px 'Lato', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
}

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
  top: -10px;
  right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
  bottom: -10px;
  left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.ribbon-bottom-left::before {
  bottom: 0;
  right: 0;
}
.ribbon-bottom-left::after {
  top: 0;
  left: 0;
}
.ribbon-bottom-left span {
  right: -25px;
  bottom: 30px;
  transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
  bottom: -10px;
  right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.ribbon-bottom-right::before {
  bottom: 0;
  left: 0;
}
.ribbon-bottom-right::after {
  top: 0;
  right: 0;
}
.ribbon-bottom-right span {
  left: -25px;
  bottom: 30px;
  transform: rotate(-225deg);
}

/**** Terms and Condition ****/

.terms-and-conditions-page h3 {
  font-weight: 600;
}

.terms-and-conditions-page h4 {
  font-weight: 600;
}

.terms-and-conditions-section {
  background: #fff;
  padding: 30px;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .005) !important;
  border-radius: 8px;
  margin-bottom: 20px;
}

.terms-and-conditions-page  .ps-10 {
  padding-left: 6rem !important;
}

.terms-and-conditions-page  .ps-15 {
  padding-left: 9rem !important;
}

/**** Login ****/

.login-logo-section {
    display: block;
    align-items: center; /* Vertical alignment */
}

.login-logo-section .logo-icon {
font-size: 40px !important;
display: block;
margin-right: 10px;
color: var(--primary-color);
border-radius: 4px;
}

.login-logo-section .logo-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.login-logo-section .logo-header {
    font-size: 20px;
    margin-bottom: -10px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--primary-color);
}

.login-logo-section .logo-header span {
color: var(--green-color);
}

.login-logo-section .logo-title {
    font-size: 36px;
    margin-bottom: -5px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--primary-color);
}

.login-section {
background: #fff;
padding: 30px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005)!important;
border-radius: 8px;
margin-bottom: 20px;
}

.login-section .form-floating>.form-control:not(:placeholder-shown) {
padding-top: 1.625rem;
padding-bottom: .625rem;
color: var(--primary-color);
}

.login-section .form-floating>.form-control {
border-radius: 8px;
}

.login-section .forgot-password {
cursor: pointer;
}

.login-section .forgot-password-section h4, .login-section .reset-password-section h4 {
font-weight: 600;
margin-bottom: 5px;
text-align: center;
}

.login-section .forgot-password-section p, .login-section .reset-password-section p {
font-weight: 400;
opacity: 0.8;
text-align: center;
}

.login-section .forgot-password-section hr, .login-section .reset-password-section hr {
color: rgb(219, 219, 219);
height: 2px!important;
}

.btn-blocks {
display: flex;
}

.login-section .forgot-password-section .back-login-btn, .login-section .reset-password-section .back-login-btn {
padding: 15px;
border-radius: 8px;
border: 1px solid rgba(31, 54, 101, 0);
background: rgba(31, 54, 101, 0.1);
font-weight: 500;
color: rgba(31, 54, 101, 1);
width: 100%;
font-size: 14px;
display: inline-block;
margin-right: 10px;
text-align: center;
}

.login-section .forgot-password-section .back-login-btn:hover, .login-section .reset-password-section .back-login-btn:hover {
background: rgba(31, 54, 101, 0.2);
}

.login-section .forgot-password-section .reset-btn, .login-section .reset-password-section .reset-btn {
padding: 15px;
border-radius: 8px;
border: 1px solid var(--green-color);
background: var(--green-color);
font-weight: 500;
color: #fff;
width: 100%;
font-size: 14px;
display: inline-block;
text-align: center;
}

.login-section .forgot-password-section .reset-btn:hover, .login-section .reset-password-section .reset-btn:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
color: #fff;
}


.login-section .login-btn {
padding: 15px;
border-radius: 8px;
border: 1px solid var(--green-color);
background: var(--green-color);
font-weight: 500;
color: #fff;
width: 100%;
font-size: 14px;
}

.login-section .forgot-password-btn {
padding: 15px;
border-radius: 8px;
border: 1px solid rgba(31, 54, 101, 0.02);
background: rgba(31, 54, 101, 0.1);
font-weight: 500;
color: var(--primary-color);
width: 100%;
font-size: 14px;
display: block;
text-align: center;
margin-top: 10px;
}

.login-section .forgot-password-btn:hover {
background: rgba(31, 54, 101, 0.15);
}

.login-section .forgot-password-btn span {
display: block;
font-size: 10px;
font-weight: 400;
opacity: 0.8;
}

.login-section .login-message {
display: none;
}

.login-section .login-message .error {
background: rgb(255, 83, 83);
color: #fff;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
font-size: 14px;
text-align: center;
font-weight: 500;
}

.login-section .login-message .success {
background: var(--green-color);
color: #fff;
padding: 15px;
border-radius: 0px;
margin-bottom: 15px;
font-size: 14px;
text-align: center;
font-weight: 500;
}

.login-section .login-message .light {
background: #fafafa;
color: var(--primary-color);
padding: 15px;
border-radius: 0px;
margin-bottom: 15px;
font-size: 14px;
text-align: center;
font-weight: 700;
border: 1px solid var(--primary-color);
}

.login-section .logout-message .light {
background: rgba(31, 54, 101, 0.05);
color: var(--primary-color);
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
font-size: 14px;
text-align: center;
font-weight: 500;
border: 1px solid var(--primary-color);
}

.footer-text {
color: var(--primary-color);
font-size: 12px;
opacity: 0.5;
text-align: center;
margin-bottom: 5px;
}

.footer-text-below {
color: var(--primary-color);
font-size: 12px;
opacity: 0.3;
text-align: center;
}

/**** Account ****/

.account-page .main-content {
padding: 0px;
}

.account-page .main-content .page-header {
border-radius: 0px;
}

.account-block {
padding: 20px;
background: #fff;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.025)!important;
height: 100%;
}

.account-block .header {
margin-bottom: 10px;
background: rgba(31, 54, 101, 0.08);
padding: 15px 20px;
cursor: pointer;
border-radius: 4px;
}

.account-block .header.show {
background: rgba(31, 54, 101, 0.15);
}

.account-block .header:hover {
background: rgba(31, 54, 101, 0.15); 
}

.account-block .header .account-dropdown-action {
float: right;
display: block;
font-size: 40px;
opacity: 0.2;
}

.account-block .header .title {
font-size: 20px;
font-weight: 600;
margin-bottom: 2px;
}

.account-block .header .subtitle {
font-weight: 400;
margin-bottom: 0px;
font-size: 14px;
opacity: 0.8;
}

.account-form-section .content {
display: none;
margin-bottom: 10px;
}

.account-form-section .content.not-fullwidth {
padding: 5px 15px;
}

.account-form-section .content.show {
display: block;
}

.save-btn {
padding: 15px 30px;
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
font-weight: 600;
border-radius: 4px;
}

.save-btn:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
}

.form-check-label-info {
font-size: .675em;
opacity: 0.6;
}

/**** Profile ****/

.profile-header {
padding: 20px;
background: rgba(31, 54, 101, 1);
color: #fff;
border-radius: 8px 8px 0px 0px;
display: flex;
align-items: center;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.profile-header .profile-details {
max-width: 600px;
}

.profile-header .name {
font-weight: 600;
margin-bottom: 2px;
display: inline-flex;
font-size: 26px;
}

.profile-header .location {
font-weight: 500;
margin-bottom: 10px;
opacity: 0.7;
font-size: 14px;
}

.profile-header .bio {
font-weight: 500;
margin-bottom: 10px;
opacity: 1;
font-size: 14px;
}

.profile-header .profile-image {
width: 100px;
aspect-ratio: 1 / 1;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0;
background-position: center;
border-radius: 4px;
margin-right: 20px;
position: relative;
}

.profile-header .profile-badges {
display: flex;
align-items: center;
}

.profile-header .profile-badges .profile-badge {
width: 30px;
aspect-ratio: 2 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0;
background-position: center;
border-radius: 4px;
margin-right: 4px;
}

.profile-header .verified-badge {
width: 30px;
aspect-ratio: 1 / 1;
background-repeat: no-repeat;
background-size: contain;
border-radius: 0;
background-position: center;
margin-left: 8px;
top: -10px;
right: -10px;
position: absolute;
}


.profile-page .nav-tabs {
border-bottom: 0px solid #dee2e6;
margin-bottom: 20px;
}

.profile-page .nav-tabs .nav-link {
margin-bottom: 0px;
border-radius: 0px 0px 4px 4px;
border: 0px solid var(--primary-color);
border-top: 0px;
background: #fff;
margin-right: 5px;
color: var(--primary-color);
font-size: 14px;
font-weight: 500;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
padding: 10px 20px;
}

.profile-page .nav-tabs .nav-link.active {
color: #fff;
background-color: var(--primary-color)!important;
}

.profile-page .tab-content {
padding: 20px;
background: #fff;
border-radius: 4px;
}

.profile-page .tab-content hr {
color: var(--primary-color);
height: 3px!important;
opacity: 0.05;
}

.profile-page .tab-content p {
font-size: 14px;
}

.profile-page .tab-content p:last-child {
margin-bottom: 0px;
}

.profile-page .achievements {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Allow achievement blocks to wrap to a new line */
}

.profile-page .tab-content .title {
font-size: 20px;
font-weight: 500;
margin-bottom: 0px;
}

.profile-page .tab-content .content {
font-size: 14px;
font-weight: 300;
margin-bottom: 10px;
opacity: 0.7;
}

.profile-page .achievements .achievement-block {
  padding: 10px;
  border: 1px dashed rgba(31, 54, 101, 0.2);
  width: 105px; /* Set a fixed width */
  border-radius: 4px;
  margin-right: 10px;
  margin-bottom: 10px;
  background: rgba(31, 54, 101, 0.02);
  cursor: pointer;
}


.profile-page .achievements .achievement-block .achievement-image {
aspect-ratio: 2 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0;
background-position: center;
}

.profile-page .achievements .achievement-block .achievement-image {
opacity: 0.08;
}

.profile-page .achievements .achievement-block .achievement-image.achieved {
opacity: 1;
}

.achievement-badge-tooltip {
font-size: 10px;
}

.badge-popup-content {
text-align: center;
}

.badge-popup-content .jconfirm-title-c {
padding-bottom: 8px!important;
line-height: 26px!important;
}

.badge-popup-content p {
margin-bottom: 0px;
opacity: 0.7;
font-size: 14px;
line-height: 20px;
}

.badge-popup-content .badge-popup {
width: 150px;
aspect-ratio: 1 / 1;
background-repeat: no-repeat;
background-size: contain;
border-radius: 0;
background-position: center;
margin-bottom: 10px;
opacity: 0.2;
}

.badge-popup-content .badge-popup.achieved {
opacity: 1;
}

.badge-popup-content .achievement-value {
padding: 5px 10px;
background: rgba(31, 54, 101, 0.1);
display: -webkit-inline-box;
border-radius: 4px;
font-weight: 500;
font-size: 12px;
margin: 0px 2px;
margin-bottom: 8px;
}

/**** Exercises Page ****/

.exercises-page .library-title-section .item {
font-size: 16px;
}

.exercises-page .exercises-controls {
padding: 20px;
background: #fff;
margin-bottom: 20px;
}

.exercises-page .library-buttons-section {
padding: 0px;
border-radius: 0px;
}

.exercises-page .library-buttons-section .content {
padding: 40px;
}

.exercises-page .library-header-block {
padding: 20px;
background: rgba(31, 54, 101, 1);
margin-bottom: 0px;
border-radius: 8px 8px 0px 0px;
color: #fff;
font-size: 16px;
font-weight: 500;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
}

.exercises-page .library-header-block span {
color: var(--green-color);
font-weight: 700;
}

.exercises-page .library-content-block {
background: #fff;
padding: 20px;
font-size: 14px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
border-radius: 8px;
border: 2px solid #fff;
margin-bottom: 20px;
}

.exercises-page .library-content-block hr {
color: var(--primary-color);
height: 3px!important;
opacity: 0.05;
}

.exercises-page .library-content-block.with-header {
border-radius: 0px 0px 8px 8px;
}

.exercises-page .library-content-block .form-control {
background: rgba(31, 54, 101, 0.03);
}


.exercises-page .library-content-block .exercise-block {
display: block;
padding: 15px;
background: rgba(31, 54, 101, 0.05);
margin-bottom: 10px;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
border: 1px solid rgba(31, 54, 101, 0.1);
}

.exercises-page .library-content-block .exercise-block:last-child {
margin-bottom: 0px;
}

.exercises-page .library-content-block .exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exercises-page .library-content-block .exercise-controls {
    display: flex;
    gap: 4px; /* Optional: space between buttons */
}

.exercises-page .library-content-block .exercise-header h5 {
margin: 0;
flex-grow: 1;
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
}

.exercises-page .library-content-block .exercise-comments p {
font-size: 10px;
font-weight: 300;
margin-bottom: 2px;
}

.exercises-page .library-content-block .exercise-controls button {
    margin-left: 0px;
}

.exercises-page .library-content-block .exercise-controls .move-exercise-up,
.exercises-page .library-content-block .exercise-controls .move-exercise-down,
.exercises-page .library-content-block .exercise-controls .remove-exercise {
padding: 5px 10px;
background: rgba(31, 54, 101, 0.1);
border-radius: 4px;
cursor: pointer;
border: 0px solid rgba(31, 54, 101, 0.1);
font-size: 10px;
}

.exercises-page .library-content-block .exercise-controls .remove-exercise {
background: #dc3545;
color: #fff;
}

.exercises-page .library-content-block .chosen-exercises-text {
opacity: 0.8;
font-size: 12px;
}

.exercises-page .library-content-block textarea.exercise-comment {
font-size: 10px;
background: #fff;
}

.exercise-modal .modal-content {
border-radius: 8px;
background: none;
border: 0px solid #fff;
padding: 0px;
}

.exercise-modal .filter-footer-buttons {
margin-top: 20px;
}

.exercise-modal .modal-content .title-section h5 {
color: #fff;
text-align: center;
margin-bottom: 5px;
font-size: 18px;
font-weight: 700;
}

.exercise-modal .modal-content .title-section p.subtitle {
color: #fff;
text-align: center;
margin-bottom: 15px;
font-size: 12px;
font-weight: 400;
opacity: 0.6;
}

.exercise-modal .modal-content .select-label {
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}

.exercise-modal .modal-content p.subtitle {
font-size: 14px;
opacity: 0.6;
margin-bottom: 10px;
}

.exercise-modal .modal-header {
border-bottom: 0px solid #fff;
text-align: center;
display: block;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
padding: 20px;
margin-bottom: 0px;
border-radius: 0px;
}

.exercise-modal .modal-header p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 200;
opacity: 0.7;
}

.exercise-modal .modal-body {
background: #fff;
color: var(--primary-color);
padding: 8px;
border-radius: 8px;
}

.exercise-modal .modal-title {
margin-bottom: 0;
line-height: 1.5;
font-weight: 700;
font-size: 22px;
}

.exercise-modal .modal-footer {
border-top: 0px solid #fff;
background: rgba(242, 242, 242, 1);
text-align: center;
display: block;
}

.exercise-modal .close-modal-header {
position: absolute;
top: 0px;
right: 0px;
color: #fff;
background: rgba(255, 255, 255, 0.11);
padding: 8px 12px;
border-radius: 100px;
cursor: pointer;
}

.exercise-modal .close-modal-header:hover {
background: #f53e3e;
color: #fff;
}

.exercise-modal .btn-close-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: #f53e3e;
border: 1px solid #fff;
border-radius: 4px;
display: inline-block;
}

.exercise-modal .btn-close-modal:hover {
font-weight: 500;
background: #b51b1b;
}

.exercise-modal .btn-success-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: inline-block;
}

.exercise-modal .btn-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
background: #fff;
border: 1px solid #fff;
border-radius: 4px;
display: inline-block;
}

.exercise-modal .btn-modal:hover {
font-weight: 600;
background: var(--primary-color);
color: #fff;
}

.exercise-modal hr {
color: rgb(219, 219, 219);
height: 2px!important;
}

.exercise-modal .embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; overflow: hidden; 
  max-width: 100%; 
} 

.exercise-modal .embed-container iframe, 
.exercise-modal .embed-container object, 
.exercise-modal .embed-container embed { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
}

/**** Library Page ****/

.library-page .main-content {
padding: 0px;
}

.library-page .main-content .page-header {
border-radius: 0px;
}


/**** Company Page ****/

.company-page .main-content {
padding: 0px;
}

.company-page .main-content .page-header {
border-radius: 0px;
}

.company-page .form-label {
margin-bottom: 5px;
font-weight: 600;
font-size: 14px;
}

.company-page .current-logo {
    width: 100%;           /* Make the logo take up full width of its container */
    max-width: 120px;       /* Set the maximum width to 120px */
    height: auto;           /* Maintain the aspect ratio of the image */
}

.company-page .hidden {
display: none;
}


.company-page .bg-light-gray{
  background-color: #f9f9f9;
}

.company-page .email-smtp-integration .title-box{
  background-color: #f5f5f5;
}

.company-page .help{
  cursor: pointer;
  font-size: 30px !important;
  color: #2f83ff !important;
}

.company-page .btn-primary {
    color: #fff;
    background-color: #213766 !important;
    border-color: #213766 !important;
}

.company-page .email-smtp-item,
.company-page .send-test-email-container {
  background: #fff;
  padding: 15px;
  font-size: 14px;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .02);
  border-radius: 4px;
  border: 2px solid #fff;
  height: 100%;
}

.company-page .title-box {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  padding: 9px 12px;
  width: 100%;
  aspect-ratio: 14 / 2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  margin-bottom: 15px;
}

.company-page .title-box h5 {
  margin: 0;
}

.company-page .email-smtp-item .form-check-input[type=checkbox] {
    height: 29px;
    width: 29px;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 .125rem .25rem rgb(0 0 0 / 9%);
    cursor: pointer;
    position: relative;
}

.company-page .email-smtp-item h5 {
    font-size: 14px;
    font-weight: 500;
}

.company-page .email-smtp-item .text-label {
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 4px;
    opacity: 0.5;
}

.company-page .email-smtp-item textarea {
    padding: 10px;
    background: rgba(31, 54, 101, 0.03);
    border: 1px solid rgba(31, 54, 101, 0.1);
    color: rgba(31, 54, 101, 1);
    font-size: 11px;
}
 
.company-page .email-smtp-item.selected {
    border: 2px solid var(--green-color);
    box-shadow: 0 .125rem .25rem rgb(74 193 134 / 50%);
}

.company-page .email-smtp-item.selected-error {
    border: 2px solid red !important;
    box-shadow: 0 .125rem .25rem rgb(231 70 70 / 50%);
}

.company-page .email-smtp-item .form-check-input[type=checkbox]::before {
    content: "\2714";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(74, 193, 134, 0.3);
}

/**** Team Page ****/

.team-page .main-content {
padding: 0px;
}

.team-page .main-content .page-header {
border-radius: 0px;
}

.add-team-member-modal .modal-content {
border-radius: 8px;
background: none;
border: 0px solid #fff;
padding: 0px;
}

.add-team-member-modal .modal-header {
border-bottom: 0px solid #fff;
text-align: center;
display: block;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
padding: 20px;
margin-bottom: 0px;
border-radius: 0px;
}

.add-team-member-modal .modal-header p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 200;
opacity: 0.7;
}

.add-team-member-modal .modal-body {
background: #fff;
color: var(--primary-color);
padding: 20px;
}

.add-team-member-modal .modal-title {
margin-bottom: 0;
line-height: 1.5;
font-weight: 700;
font-size: 22px;
}

.add-team-member-modal .modal-footer {
border-top: 0px solid #fff;
background: rgba(242, 242, 242, 1);
text-align: center;
display: block;
}

.add-team-member-modal .btn-close-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #f53e3e;
border: 1px solid #fff;
border-radius: 100px;
}

.add-team-member-modal .btn-close-modal:hover {
font-weight: 600;
background: #b51b1b;
}

.add-team-member-modal .btn-success-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 100px;
}

.add-team-member-modal .btn-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
background: #fff;
border: 1px solid #fff;
border-radius: 100px;
}

.add-team-member-modal .btn-modal:hover {
font-weight: 600;
background: var(--primary-color);
color: #fff;
}

.add-team-member-modal .form-label {
margin-bottom: 5px;
font-weight: 600;
font-size: 14px;
}

.add-team-member-modal .form-control {
border-radius: 4px;
}

.team-page .block p {
font-weight: 400;
font-size: 18px;
opacity: 0.8;
margin-bottom: 0px;
color: var(--primary-color);
}

.team-page .block a {
color: var(--green-color);
font-weight: 500;
}

.team-page .block {
-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);
margin-bottom: 20px;
}

.team-page .block .header {
padding: 20px;
background: var(--primary-color);
border-radius: 8px 8px 0px 0px;
font-weight: 600;
font-size: 30px;
color: #fff;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
}

.team-page .block .header h2 {
font-weight: 600;
font-size: 24px;
margin-bottom: 0px;
}

.team-page .block .header p {
font-weight: 300;
font-size: 14px;
margin-bottom: 0px;
color: #fff;
}

.team-page .block .header .content {
padding: 20px;
background: #fff;
border-radius: 0px 0px 8px 8px;
}

.team-page .block .content {
padding: 20px;
background: #fff;
border-radius: 8px 8px 8px 8px;
}

.team-page .progress-label {
font-size: 14px!important;
margin-bottom: 5px!important;
font-weight: 600!important;
}

.team-page .progress-footer {
font-size: 14px!important;
margin-bottom: 0px!important;
font-weight: 400!important;
font-style: italic!important;
}

.team-page .progress {
display: flex;
height: 40px;
overflow: hidden;
font-size: .75rem;
background-color: #e9ecef;
border-radius: .25rem;
margin-bottom: 10px;
}

.team-table {
border-radius: 8px;
width: 100%;
-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.team-table .small-text {
font-weight: 400;
font-size: 11px;
opacity: 0.6;
}

.team-table th:first-child {
border-radius: 8px 0px 0px 0px;
}

.team-table th {
background: rgba(31, 54, 101, 0.05);
color: var(--primary-color);
padding: 20px;
border-bottom: none;
}

.team-table th:last-child {
border-radius: 0px 8px 0px 0px;
}

.team-table td {
padding: 20px;
border-bottom-width: 0px;
box-shadow: none;
}

.team-table tr {
background: rgba(31, 54, 101, 0.05);
}

.team-table tr:nth-child(even) {
background: rgba(31, 54, 101, 0.02);
}

.team-table tr:last-child td:first-child {
border-radius: 0px 0px 0px 8px;
}

.team-table tr:last-child td:last-child {
border-radius: 0px 0px 8px 0px;
}

.team-table tbody {
background: #fff;
}

.team-page .dataTables_filter {
margin-bottom: 15px;
}

.team-page .dataTables_paginate {
margin-top: 15px;
}

.team-page table.dataTable thead th {
padding: 20px;
border-bottom: 0px solid #fff;
}

.team-page table.dataTable tbody td {
padding: 20px;
border-bottom: 0px solid #fff;
background: rgba(31, 54, 101, 0.02);
white-space: nowrap;
}

.team-page table.dataTable.no-footer {
border-bottom: 0px solid #fff;
}

.team-page .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center;
}

.team-page .dataTables_wrapper .dataTables_filter input {
border: 1px solid #ececec;
border-radius: 4px;
padding: 10px;
background: rgba(31, 54, 101, 0.04);
margin-left: 0px;
width: 100%;
outline: none;
box-shadow: none;
}

.team-page .add-team-btn {
background: var(--green-color);
color: #fff;
padding: 10px 20px;
border: 1px solid var(--green-color);
border-radius: 4px;
font-size: 14px;
}

.team-page .add-team-btn:hover {
color: #fff;
background-color: var(--green-color-hover);
border-color: var(--green-color-hover);
}

.team-page .paginate_button.previous {
padding: 10px!important;
background: rgb(236, 219, 219);
border-radius: 4px!important;
color: var(--primary-color)!important;
}

.team-page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
color: rgba(31, 54, 101, 1)!important;
border: 1px solid rgba(31, 54, 101, 0.05);
background: rgba(31, 54, 101, 0.05);
box-shadow: none;
padding: 10px 20px!important;
font-size: 14px;
}


.team-page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
color: rgba(31, 54, 101, 1)!important;
border: 1px solid rgba(31, 54, 101, 0.05);
background: rgba(31, 54, 101, 0.05);
}

.team-page  .dataTables_wrapper .dataTables_paginate .paginate_button {
color: rgba(31, 54, 101, 1)!important;
border: 1px solid rgba(31, 54, 101, 0.05);
background: rgba(31, 54, 101, 0.05);
box-shadow: none;
padding: 10px 20px!important;
font-size: 14px;
}

.team-page  .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .team-page  .dataTables_wrapper .dataTables_paginate .paginate_button.current {
border: 1px solid rgba(31, 54, 101, 0.15);
background: rgba(31, 54, 101, 0.15);
}

.team-page .edit-team-member-btn {
cursor: pointer;
padding: 6px 8px;
background: rgb(233, 233, 233);
border-radius: 4px;
}

.team-page .edit-team-member-btn:hover {
background: rgb(215, 215, 215);
}

.team-page .c-edit-team-member-btn {
cursor: pointer;
padding: 6px 8px;
background: rgb(233, 233, 233);
border-radius: 4px;
}

.team-page .c-edit-team-member-btn:hover {
background: rgb(215, 215, 215);
}

/**** Integrations Page ****/

.integrations-page .main-content {
padding: 0px;
}

.integrations-page .main-content .page-header {
border-radius: 0px;
}

.integrations-page .block p {
font-weight: 400;
font-size: 18px;
opacity: 0.8;
margin-bottom: 0px;
color: var(--primary-color);
}

.integrations-page .block a {
color: var(--green-color);
font-weight: 500;
}

.integrations-page .block {
-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);
margin-bottom: 20px;
}

.integrations-page .block .header {
padding: 20px;
background: var(--primary-color);
border-radius: 8px 8px 0px 0px;
font-weight: 600;
font-size: 30px;
color: #fff;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
}

.integrations-page .block .header h2 {
font-weight: 600;
font-size: 24px;
margin-bottom: 0px;
}

.integrations-page .block .header p {
font-weight: 300;
font-size: 14px;
margin-bottom: 0px;
color: #fff;
}

.integrations-page .block .header .content {
padding: 20px;
background: #fff;
border-radius: 0px 0px 8px 8px;
}

.integrations-page .block .content .icon {
font-size: 40px;
padding: 4px 14px;
background: rgba(31, 54, 101, 0.05);
display: inline-block;
border-radius: 100px;
margin-bottom: 10px;
}

.integrations-page .block .content .edit-icon {
padding: 6px 10px;
background: rgba(31, 54, 101, 0.05);
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}

.integrations-page .block .content {
padding: 20px;
background: #fff;
border-radius: 8px 8px 8px 8px;
}

.integrations-page .block .content h5 {
font-size: 20px;
font-weight: 600;
}

.integrations-page .block .content p {
font-size: 14px;
font-weight: 300;
}

.integrations-page .block .content .notice {
padding: 10px 20px;
background: rgb(255, 234, 93);
color: #000;
margin-bottom: 0px;
margin-top: 15px;
font-size: 12px;
border-radius: 8px;
font-weight: 400;
display: flex;
align-items: center;
}

.integrations-page .block .content .notice .bi {
font-size: 18px;
margin-right: 10px;
}


/**** Courses Tools ****/

.patients-page .form-check-input[type=checkbox] {
    height: 35px;
    width: 35px;
    font-size: 18px;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 .125rem .25rem rgb(0 0 0 / 9%);
    cursor: pointer;
    position: relative;
}
.patients-page .form-check-input[type=checkbox]::before {
    content: "\2714";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(74, 193, 134, 0.3);
}

.courses .true {
color: var(--green-color);
}
.courses .false {
color: rgba(255, 93, 93, 1);
}
.courses .publish {
color: var(--green-color);
}
.courses .unpublish {
color: rgba(255, 93, 93, 1);
}
.courses #course-table div.select-course, .courses .select-lesson {
  cursor: pointer;
}
.courses #course-table div.title {
  color: var(--primary-color);
}
.courses #course-table .actions {
    display: inline-flex;
}
.courses #course-table i.select-course,
.courses #course-table .actions a {
    padding: 5px 10px;
    background: rgb(255, 233, 31);
    color: var(--primary-color) !important;
    display: inline-block;
    border-radius: 4px;
    margin-right: 5px;
    cursor: pointer;
    color: #fff;
}
.courses #course-table .actions a.view-course-report-btn {
  background: var(--green-color);
  color: #fff !important;
}
    
.courses #course-table .edit-course-btn {
    padding: 5px 10px;
    background: var(--green-color);
    display: inline-block;
    border-radius: 4px;
    margin-right: 5px;
    cursor: pointer;
    color: #fff;
}

.course-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .02);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.courses .course-item .course-item-content {
    padding: 20px;
    background: #fff;
    border-radius: 0px 0px 8px 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.courses .course-item .course-item-content h5 {
    font-size: 18px;
    font-weight: 500;
}
.courses .course-item .course-item-content p {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.8;
}
.courses .course-item .course-item-btn {
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(31, 54, 101, 1);
    background: rgba(31, 54, 101, 0.02);
    border: 1px solid var(--green-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
}
.courses .course-item .course-image {
  width: 100%;
  height: 215px;
  border-radius: 8px 8px 0 0;
}
.courses .course-item .course-item-btn i {
    font-size: 16px;
    border-radius: 4px;
    background: var(--green-color);
    padding: 5px 10px;
    color: #fff;
}
.courses .course-item .course-item-btn > div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.courses .course-item .course-item-btn p {
    margin-bottom: 0px;
    opacity: 0.6;
    font-size: 12px;
    margin-top: 2px;
}
.courses .course-btn {
    background: linear-gradient(135deg, #4e9af1, #3b6ed3);
    color: #fff;
    padding: 11px 22px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 14px !important;
}
.courses .progress-percentage {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.8;
}
.courses .course-btn:hover {
  background: linear-gradient(135deg, #3b6ed3, #4e9af1);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.courses .course-btn i {
  font-size: 1.1rem;
}
.courses .progress {
  background-color: #e9ecef;
}
.courses .progress-bar {
  border-radius: 5px;
}

.courses #course-table .delete-course-btn {
    padding: 5px 10px;
    background: #d51010;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
}
.courses .course-move-up-btn, .course-move-down-btn {
    padding: 5px 10px;
    background: rgba(31, 54, 101, 0.1);
    display: inline-block;
    border-radius: 4px;
    margin-right: 5px;
    cursor: pointer;
}


.courses .course-header-section {
    padding: 0px;
    border-radius: 0px;
}

.courses .course-header {
  padding: 20px 0 27px 20px;
  background: #fff;
  margin-bottom: 20px;
}

.courses.user .course-header {
  background-color: #275FBC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}

.courses .course-details {
    margin-top: 22px;
    padding: 5px 0px 0px;
    font-weight: 600;
}

.courses .course-details .title {
    color: #1F3665;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 2px;
}
.courses .course-details .description {
    font-weight: 300;
    font-size: 16px;
    color: #1F3665;
}

.courses.user .course-details .title,
.courses.user .course-details .description {
  color: #fff;
}

.courses .lesson-reorder-note {
    font-size: 13px;
    opacity: 0.6;
    font-weight: 500;
    margin-bottom: 0px;
}

.courses .lesson-category-btn {
    padding: 10px 15px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 20px;
    display: -webkit-inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--primary-color);
    margin-right: 5px;
}

.courses .course-header-section form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.courses .course-header .btn,
.courses .courses-btn {
    padding: 16px 15px !important;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 20px;
    display: -webkit-inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--primary-color);
    margin-right: 5px;
    
}

.courses .edit-course-btn,
.courses .reorder-course-btn {
  background: var(--primary-color) !important;
  color: #fff !important;
}

.courses .course-header  .btn p,
.courses .courses-btn {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 500;
    margin-left: 5px;
}

.courses .course-header .btn {
  padding: 16px 15px;
}

.courses .course-header .add-course-btn {
  background: var(--green-color);
  color: #fff;
  float: right;
}

.courses .course-header-section .add-lesson-btn {
  background: rgb(255, 233, 31);
  color: var(--primary-color);
}

.courses .course-header-section .delete-course-btn {
  background: #d51010;
  color: #fff;
}

.courses .header-right-buttons {
    float: right;
    margin-left: 5px;
}

.courses .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.courses .embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.courses .show-course-lessons li {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 13px;
  cursor: pointer;
}

.courses .show-course-lessons li span:hover {
  color: #1d3d7f;
  border-color: #1d3d7f; 
  transform: translateX(4px);
}

.courses #lesson-reorder2 hr {
    margin: 10px 0 !important;
    color: #858585 !important;
    background-color: currentColor !important;
}

.courses .show-course-lessons li i {
  font-size: 16px !important;
  transition: transform 0.2s ease;
}
.courses .show-course-lessons li i:hover {
  transform: scale(1.2);
}

/* While dragging, the placeholder where it may drop */
.courses .ui-state-highlight {
  background: #f0f7ff;
  border: 2px dashed #1d3d7f;
  min-height: 35px; /* so it's visible */
  margin: 4px 0;
  border-radius: 6px;
}
/* The element being dragged */
.courses .ui-sortable-helper {
  background: #ffeecf !important;
  border: 2px solid #f0a500;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  opacity: 0.9;
  border-radius: 6px;
}

.courses .complete-btn {
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 4px;
    display: none;
}

/* Green buttons */
.courses .complete-btn {
    background: var(--green-color);
    border: 1px solid var(--green-color);
}

.courses .main-btn-primary {
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 500;
    color: rgb(255 255 255);
    background: rgb(31 54 101);
    border: 1px solid rgba(31, 54, 101, 1);
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
}

.courses .show-course-lessons,
.courses .show-course-lessons ol,
.courses .show-course-lessons ul {
  list-style: none;
  margin: 0; 
  padding-left: 20px; 
}

.courses #lesson-reorder2 li {
  margin: 5px 0;
}

.courses .show-course-lessons ul li span,
.courses .show-course-lessons ol li span {
    display: inline-block; /* or block */
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

.courses .lesson-info-box li i {
  color: var(--green-color);
  font-size: 14px;
  margin-bottom: 10px;
}

.courses .lesson-info-box .title {
  padding: 14px 20px;
  font-weight: 600;
  font-size: 20px;
  background: rgba(31, 54, 101, 0.09);
  border-radius: 8px 8px 0px 0px;
  color: var(--primary-color);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .02) !important;
}
.courses .show-lesson.content {
  margin-bottom: 0px;
}
.courses .show-lesson .content {
  padding: 20px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 0px 0px 8px 8px;
  margin-bottom: 20px;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .02) !important;
}
.courses .show-lesson .show-course-lessons .content {
  padding: 20px 20px 20px 0px !important;
}


.courses .content-box {
    padding: 20px;
    background: #fff;
    border-radius: 0px 0px 4px 4px;
    margin-bottom: 20px;
}
.courses .content-box .lesson-content-box {
    margin-bottom: 20px;
}

.courses .header-above-box {
    padding: 15px 20px;
    background: rgba(31, 54, 101, 0.09);
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}
.courses .header-above-box h5 {
    font-size: 20px;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0px;
}
.courses .active-lesson-sub-title {
    font-size: 15px;
    opacity: 0.6;
    font-weight: 500;
    margin-bottom: 0px;
}

.courses .btn-complete,
.courses .edit-lesson-btn,
.courses .delete-lesson-btn {
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border-radius: 4px;
    display: none;
}

.courses .btn-complete,
.courses .edit-lesson-btn {
    background: var(--green-color);
    border: 1px solid var(--green-color);
}

.courses .delete-lesson-btn {
    background: #d51010;
    border: 1px solid #d51010;
}

.courses .main-btn-primary {
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 500;
    color: rgb(255 255 255);
    background: rgb(31 54 101);
    border: 1px solid rgba(31, 54, 101, 1);
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
}

.courses #loading-container {
    width: 100%;
    background-color: rgba(31, 54, 101, 0.05);
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 15px;
    position: relative;
    display: none;
}
.courses .rbuilder-no-sections {
    padding: 60px 40px;
    border: 4px dashed #d4d4d4;
    border-radius: 8px;
    color: #000;
    font-weight: 400;
    text-align: center;
}
.courses .rbuilder-no-sections .icon {
    font-size: 50px;
}
.courses .rbuilder-no-sections .title {
    font-size: 28px;
    font-weight: 500;
}
.courses .rbuilder-no-sections .description {
    font-size: 18px;
}
.courses .rbuilder-no-sections .buttons {
    margin-top: 15px;
}
.courses .rbuilder-btn.add-lesson-btn {
    background: #4ac186;
    color: #fff;
    border: 1px solid #4ac186;
}

/* Force Summernote fullscreen above Bootstrap modals */
.courses .note-editor.note-frame.fullscreen {
  z-index: 9999 !important; 
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  background: #fff;
}
.courses .lesson-content-box :is(h1, h2, h3, h4, h5, h6),
.courses .lesson-modal :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700 !important;
}
/* .courses .global-modal.lesson-modal .content h6 span {
    font-weight: 700 !important;
} */
/* .courses .global-modal.lesson-modal .content h6 span {
    font-size: 1rem !important;
} */
.courses .lesson-content-box p,
.courses .lesson-content-box li{
  font-size: 14px;
  font-weight: 400;
}
.courses .lesson-content-box table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 14px;
}
.courses .lesson-content-box table th,
.courses .lesson-content-box table td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  text-align: left;
}
.courses .lesson-content-box table th {
  font-weight: bold;
}
.courses .lesson-content-box p {
  font-size: 14px !important;
  font-weight: 400 !important;
  margin-bottom: 0px !important;
}
.courses .lesson-modal h6,
.courses .global-modal.lesson-modal .content h6 span {
  margin-bottom: 0 !important;
  font-size: 1rem !important;
}
.courses .lesson-modal h5,
.courses .global-modal.lesson-modal .content h5 span {
  margin-bottom: 0 !important;
  font-size: 1.25rem !important;
}
.courses .lesson-modal h4,
.courses .global-modal.lesson-modal .content h4 span {
  margin-bottom: 0 !important;
  font-size: calc(1.275rem + .3vw) !important;
}
.courses .lesson-modal h3,
.courses .global-modal.lesson-modal .content h3 span {
  margin-bottom: 0 !important;
  font-size: calc(1.3rem + .6vw) !important;
}
.courses .lesson-modal h2,
.courses .global-modal.lesson-modal .content h2 span {
  margin-bottom: 0 !important;
  font-size: calc(1.325rem + .9vw) !important;
}
.courses .lesson-modal h1,
.courses .global-modal.lesson-modal .content h1 span {
  margin-bottom: 0 !important;
  font-size: calc(1.375rem + 1.5vw) !important;
}
.courses .lesson-modal p {
  font-size: 14px !important;
  font-weight: 400 !important;
  margin-bottom: 0px !important;
}


.courses .progress-tracking-count {
    font-size: 13px;
    opacity: 0.6;
    font-weight: 500;
    margin-bottom: 0px;
}

.courses .lesson-completed {
  color: #4ac186 !important;
}
.courses .lesson-completed i {
  color: #4ac186 !important; /* make icon green too */
}

.courses .main-btn-yellow {
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #ffc107;
    border: 1px solid #ffc107;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
}

.courses ul li.category {
  background: rgba(70, 146, 247, 1)!important;
  color: #fff;
  font-weight: bold;
}


/**** Courses Tools ****/


/**** Patient Page ****/

.patient-page .nav-fill .nav-item {
margin-right: 5px;
}

.patient-page .nav-fill .nav-item:last-child {
margin-right: 0px;
}


.patient-page .all-patients-btn {
font-size: 14px;
margin-bottom: 15px;
color: rgba(31, 54, 101, 1);
display: block;
position: relative;
}

.patient-page .all-patients-btn:hover {
font-weight: 600;
}

.patient-header {
padding: 40px 30px;
background: #fff;
color: rgba(31, 54, 101, 1);
border-radius: 8px 8px 0px 0px;
display: flex;
align-items: center;
border: 1px solid #1F3665;
}

.patient-header .patient-details {
max-width: 600px;
}

.patient-header .name {
font-weight: 600;
margin-bottom: 2px;
display: inline-flex;
font-size: 40px;
}

.patient-header .location {
font-weight: 500;
margin-bottom: 0px;
opacity: 0.7;
font-size: 16px;
}

.patient-header .bio {
font-weight: 500;
margin-bottom: 10px;
opacity: 1;
font-size: 14px;
}

.patient-page .nav-tabs {
border-bottom: 0px solid #dee2e6;
margin-bottom: 20px;
}

.patient-page .nav-tabs .nav-link {
margin-bottom: 0px;
border-radius: 0px 0px 4px 4px;
border: 0px solid var(--primary-color);
border-top: 0px;
background: rgba(31, 54, 101, 0.08);
margin-right: 5px;
color: var(--primary-color);
font-size: 12px;
font-weight: 500;
padding: 10px 20px;
}

.patient-page .nav-tabs .nav-link.active {
color: #fff;
background-color: var(--primary-color)!important;
}

.patient-page .tab-content {
padding: 20px;
background: #fff;
border-radius: 4px;
}

.patient-page .tab-content hr {
color: var(--primary-color);
height: 3px!important;
opacity: 0.05;
}

.patient-page .tab-content p {
font-size: 14px;
}

.patient-page .tab-content p:last-child {
margin-bottom: 0px;
}

.patient-page .tab-content .title {
font-size: 20px;
font-weight: 500;
margin-bottom: 0px;
}

.patient-page .tab-content .content {
font-size: 14px;
font-weight: 300;
}

.patients-page .read {
color: var(--green-color);
}

.patients-page .unread {
color: rgba(255, 93, 93, 1);
}

.design-table #patient-exercise-plan-list_info, .design-table #patient-exercise-plan-list_info {
font-size: 14px;
padding-left: 10px;
opacity: 0.6;
}

.patients-page .btn-submit-form {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: inline-block;
}

.patients-page .btn-submit-form:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
}

.patients-page .btn-outline {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: rgba(31, 54, 101, 1);
background: rgba(31, 54, 101, 0.02);
border: 1px solid rgba(31, 54, 101, 1);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.patients-page .btn-outline:hover {
background: rgba(31, 54, 101, 1);
border: 1px solid rgba(31, 54, 101, 1);
color: #fff;
}


.patients-page.patient-plan-page .exercise-item {
  display: flex;
  width: 100%;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.025)!important;
  margin-bottom: 10px;
  align-items: center; /* Ensures items are aligned centrally */
  background: rgba(227, 229, 235, 1);
  border-radius: 4px;
  color: var(--primary-color);
}

.patients-page.patient-plan-page .exercise-item .counter {
  padding: 5px 15px;
  text-align: center;
  background: rgba(227, 229, 235, 1);
  border-radius: 4px 0px 0px 4px;
  font-size: 18px;
  flex: 0 0 60px; /* Fixed width for counter */
  font-weight: 600;
  color: var(--primary-color);
}

.patients-page.patient-plan-page .exercise-item .counter span {
font-size: 10px;
display: block;
font-weight: 400;
opacity: 0.6;
}

.patients-page.patient-plan-page .exercise-item .content {
  padding: 15px;
  border-radius: 0px 4px 4px 0px;
  background: #fff;
  flex-grow: 1; /* Fills remaining space */
  width: auto;
}

.patients-page.patient-plan-page .exercise-item .content h6 {
  font-size: 14px;
  font-weight: 600;
}

.patients-page.patient-plan-page .exercise-item .content p.title {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.6;
}

.patients-page.patient-plan-page .exercise-item .content p {
  margin-bottom: 0px;
  font-size: 10px;
  font-weight: 400;
}

.patients-page.patient-plan-page .exercise-item .content p span {
color: rgba(255, 93, 93, 1);
opacity: 0.5;
}


.patients-page.patient-plan-page .exercise-item .arrows {
margin-top: 15px;
}

.patients-page.patient-plan-page .exercise-item .move-exercise.up, .patients-page.patient-plan-page .exercise-item .move-exercise.down, .patients-page.patient-plan-page .exercise-item .delete-exercise {
padding: 5px 10px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
margin-right: 5px;
cursor: pointer;
font-size: 10px;
}

.patients-page.patient-plan-page .exercise-item .delete-exercise {
background: rgba(255, 93, 93, 0.8);
color: #fff;
}

.patients-page .content-box.chat-box {
    min-height: 300px;
    max-height: 300px; /* Set a max height to control the vertical space */
    overflow-y: auto;  /* Enables vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    margin-bottom: 0px;
    border-radius: 4px 4px 0px 0px!important;
    display: flex;
    flex-direction: column-reverse; 
}

.patients-page .chat-box-footer {
padding: 15px;
background: rgba(31, 54, 101, 0.04);
border-radius: 0px 0px 4px 4px;
}

.patients-page .chat-box-footer textarea {
    border: 1px solid transparent;
}

.patients-page .chat-box-footer #charCount {
font-size: 10px;
color: var(--primary-color);
font-weight: 400;
opacity: 0.6;
}

.patients-page .content-box.chat-box .chat-messages {
padding-left: 0;
list-style: none;
display: grid;
padding: 30px 0px 0px;
}

.patients-page .content-box.chat-box .chat-messages li {
margin-bottom: 10px;
}

.patients-page .content-box.chat-box .chat-messages .no-messages {
font-size: 14px;
opacity: 0.6;
color: rgba(255, 93, 93, 0.8);
}

.patients-page .content-box.chat-box .chat-messages .left-message {
float: left;
max-width: 80%;
display: inline-block;
position: relative;
}

.patients-page .content-box.chat-box .chat-messages .left-message .bubble {
    background: #f6f6f6;
    color: #333;
    font-size: 12px;
    padding: 15px 15px;
    border-radius: 8px;
    position: relative; 
    margin-bottom: 10px;
}

.patients-page .content-box.chat-box .chat-messages .left-message .bubble:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 15px;
    border-width: 10px;
    border-style: solid;
    border-color: #f6f6f6 transparent transparent transparent; 
}


.patients-page .content-box.chat-box .chat-messages .left-message .info {
float: left;
}

.patients-page .content-box.chat-box .chat-messages .right-message .info {
float: right;
text-align: right;
}

.patients-page .content-box.chat-box .chat-messages .info .name {
font-size: 10px;
margin-top: 5px;
margin-bottom: 0px;
font-weight: 500;
}

.patients-page .content-box.chat-box .chat-messages .info .time {
font-size: 10px;
margin-top: 0px;
opacity: 0.5;
}

.patients-page .content-box.chat-box .chat-messages .info .status {
font-size: 10px;
margin-top: 0px;
opacity: 0.5;
}

.patients-page .content-box.chat-box .chat-messages .info .patient-chat-mark-unread {
cursor: pointer;
}

.patients-page .content-box.chat-box .chat-messages .right-message {
float: right;
max-width: 80%;
display: inline-block;
position: relative;
}

.patients-page .content-box.chat-box .chat-messages .right-message .bubble {
background: rgba(115, 214, 255, 0.2);
color: #333;
font-size: 12px;
padding: 15px 15px;
border-radius: 8px;
position: relative; 
margin-bottom: 10px;
}

.patients-page .content-box.chat-box .chat-messages .right-message .bubble:after {
    content: "";
    position: absolute;
    bottom: -20px;
    right: 15px;
    border-width: 10px;
    border-style: solid;
    border-color: rgba(115, 214, 255, 0.2) transparent transparent transparent; 
}

.patients-page .delete-patient-btn {
    padding: 15px 30px;
    background: #dc3545;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; 
}




/**** Patient Page END ****/

.pre-assessments-list {
    margin-top: 20px;
    display: block;
  }

  .pre-assessments-list .item {
    background: rgba(31, 54, 101, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align content and actions */
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
  }

  .pre-assessments-list .counter {
    padding: 10px 15px;
    font-size: 30px;
    background: rgba(31, 54, 101, 0.03);
  }

  .pre-assessments-list .counter span {
    opacity: 0.2;
  }

  .pre-assessments-list .content {
    padding: 10px;
    flex-grow: 1; 
  }

  .pre-assessments-list .content .date {
    font-size: 14px;
    margin-bottom: 0px;
    font-weight: 500;
    opacity: 0.8;
  }

  .pre-assessments-list .content .time {
    font-size: 12px;
    margin-bottom: 0px;
    opacity: 0.7;
  }

  .pre-assessments-list .actions {
    float: right;
  }


  .pre-assessments-list .actions .action {
    padding: 10px 15px;
    font-size: 30px;
    opacity: 0.2;
}

/**** Course Page ****/

.course-section .course-block {
padding: 10px;
background: #fff;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.025)!important;
border-radius: 4px;
margin-bottom: 15px;
}

.course-section .course-block .header {
padding: 10px;
background: var(--primary-color);
border-radius: 4px 4px 0px 0px;
color: #fff;
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
text-align: center;
}

.course-section .course-block .title {
font-size: 20px;
font-weight: 600;
margin-top: 15px;
margin-bottom: 10px;
}

.course-section .course-block .content {
font-size: 14px;
font-weight: 500;
margin-bottom: 0px;
}

.course-section .course-block .lesson-link-item {
display: block;
padding: 8px 16px;
background: rgba(31, 54, 101, 0.05);
margin-bottom: 5px;
border-radius: 4px;
font-size: 14px;
}

.course-section .course-block .lesson-link-item:hover {
background: rgba(31, 54, 101, 0.1);
}

.course-section .course-block .lesson-link-item:last-child {
margin-bottom: 0px;
}

.lesson-link-item .completed {
color: var(--green-color);
}

.course-section .nav-fill .nav-item {
margin-right: 4px;
}

.course-section .nav-pills .nav-link {
background: rgb(236, 236, 236);
border: 1px solid rgb(236, 236, 236);
border-radius: 4px;
color: var(--primary-color);
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
}

.course-section .nav-pills .nav-link.inactive {
opacity: 0.3;
}

.course-section .nav-pills .nav-link.courses {
background: #fff;
color: var(--primary-color);
border: 1px solid var(--primary-color);
}

.course-section .nav-fill .nav-item:last-child {
margin-right: 0px;
}


/**** Popups ****/

.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons {
float: left!important;
}

.jconfirm .jconfirm-box .jconfirm-buttons button {
padding: 12px 20px!important;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
font-weight: 700!important;
padding-top: 5px!important;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane {
margin-bottom: 10px!important;
}

 .jconfirm.jconfirm-light .jconfirm-bg {
background-color: #000!important;
opacity: .8!important;
}


/**** TinyMCE ****/


.tox-tinymce {
border: 0px solid #fff!important;
}

/**** 404 Page ****/

.not-found-block {
padding: 0px 10px;
text-align: center;
}

.not-found-block h1 {
font-weight: 700;
opacity: 0.2;
color: #000;
text-transform: uppercase;
}

.not-found-block p {
font-weight: 400;
opacity: 0.2;
color: #000;
font-size: 20px;
}

.not-found-block .btn {
padding: 20px 40px;
background: #000;
color: #fff;
font-weight: 400;
cursor: pointer;
border-radius: 100px;
display: inline-block;
font-size: 14px;
}

/**** Video ****/


/**** Global Modal ****/

.global-modal .modal-content {
border-radius: 8px;
background: none;
border: 0px solid #fff;
padding: 0px;
}

.global-modal .modal-header {
border-bottom: 0px solid #fff;
text-align: center;
display: block;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
padding: 20px;
margin-bottom: 0px;
border-radius: 0px;
}

.global-modal .modal-header .top-close-btn {
position: absolute;
top: 10px;
right: 10px;
background: #f53e3e;
color: #fff;
padding: 5px 9px;
border-radius: 100px;
cursor: pointer;
font-weight: 600;
}

.global-modal .modal-header .top-close-btn:hover {
background: #b51b1b;
}

.how-to-modal .modal-footer {
border-top: 0px solid #fff;
background: rgba(242, 242, 242, 1);
text-align: center;
display: block;
}

.global-modal .modal-header p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 200;
opacity: 0.7;
}

.global-modal .modal-body {
background: #fff;
color: var(--primary-color);
padding: 20px;
}

.global-modal .modal-title {
margin-bottom: 0;
line-height: 1.5;
font-weight: 700;
font-size: 22px;
}

.global-modal .modal-footer {
border-top: 0px solid #fff;
background: rgba(242, 242, 242, 1);
text-align: center;
display: block;
}

.global-modal .btn-close-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #f53e3e;
border: 1px solid #fff;
border-radius: 100px;
}

.global-modal .btn-close-modal:hover {
font-weight: 600;
background: #b51b1b;
}

.global-modal .btn-success-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 100px;
}

.global-modal .btn-success-modal.round {
border-radius: 4px;
}

.global-modal .btn-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
background: #fff;
border: 1px solid #fff;
border-radius: 100px;
}

.global-modal .btn-modal:hover {
font-weight: 600;
background: var(--primary-color);
color: #fff;
}

.global-modal .form-label {
margin-bottom: 5px;
font-weight: 600;
font-size: 14px;
}

.global-modal .form-control {
border-radius: 4px;
}

.global-modal .input-error {
font-size: 12px;
margin-top: 5px;
color: rgb(242, 19, 19);
font-weight: 400;
display: none;
}

.global-modal .content h5 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
}

.global-modal .content h6 {
margin-bottom: 10px;
font-size: 18px;
font-weight: 600;
}

.global-modal .content h6 span {
font-size: 12px;
font-weight: 400;
}

.global-modal .content p {
font-size: 13px;
font-weight: 400;
opacity: 0.8;
}

.global-modal .content p.small {
font-size: 11px;
}

.global-modal .content p:last-child {
margin-bottom: 0px;
}

/**** Implementation Page  ****/

.implementation-page .content-box
{
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.implementation-page .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.implementation-page .content-box h2 {
  font-weight: 600;
}

.implementation-page .content-box p  {
  font-size: 14px;
  font-weight: 400;
}

.implementation-page .main-btn  {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.implementation-page .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.implementation-page .right-buttons {
  display: flex;
  gap: 10px; /* Space between the buttons */
}


.implementation-page .back-btn,
.implementation-page .delete-btn {
padding: 10px 30px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.implementation-page .delete-btn {
  background: #dc3545;
  color: #fff;
}

.implementation-page .header-above-box {
  padding: 20px 20px;
  background: rgba(31, 54, 101, 0.06);
  align-items: center;
  border-radius: 4px 4px 0px 0px;
  text-decoration: none;
}

.implementation-page .header-above-box h5 {
  font-size: 20px;
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 0px;
  }
  
.implementation-page .header-above-box p {
font-size: 14px;
color: var(--primary-color);
font-weight: 400;
margin-bottom: 0px;
opacity: 0.6;
}

.implementation-page .content-box label {
  font-size: 16px;
  font-weight: 600;
}

.implementation-page .smart-goal {
  background-color: #ecedf073;
  padding: 20px 30px 10px 30px;
  border-radius: 5px;
}

.implementation-page .smart-goal .design-table td {
  padding: 5px 0px;
}

.implementation-page .smart-goal table td.input {
  width: 70% !important;
}

.implementation-page .smart-goal table td.select {
  width: 30% !important;
}

.implementation-page .btn-submit-form {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: none;
}

.implementation-page table .bin {
padding: 5px 10px;
background: rgba(255, 93, 93, 1);
display: inline-block;
border-radius: 4px;
cursor: pointer;
color: #fff;
}

/**** Events Calendar Start ****/

:root {
  --fc-border-color: #ddd;
  --fc-daygrid-event-dot-width: 5px;
  --fc-today-bg-color: rgba(74, 193, 134, 0.1);
}

.fc-button-primary {
background: #000!important;
border: 1px solid #000!important;
}


.calendar-style table td {
border: 0px solid #000!important;
}

.calendar-style table .fc-daygrid-body td {
border: 1px solid #ddd!important;
}

.calendar-style table {
border-color: #000;
border: 0px solid #000!important;
}

.calendar-style .fc th {
background: #000;
color: #fff;
border-color: #000;
padding: 6px;
}

.calendar-style .fc th:first-child {
    border-top-left-radius: 4px;
}

.calendar-style .fc th:last-child {
    border-top-right-radius: 4px; 
}

.calendar-style .fc-day-other {
background: rgb(244, 244, 244);
}

.calendar-style .fc-event.event-default-block {
background: rgba(31, 54, 101, 0.05)!important;
border-color: rgba(31, 54, 101, 1)!important;
padding: 10px!important;
font-size: 12px!important;
cursor: pointer;
font-weight: 500!important;
}

.calendar-style .fc-event .event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; 
    color: var(--primary-color);
}

.event-modal .modal-body {
padding: 0px;
border-radius: 6px;
}

.event-modal .modal-content {
border: 0px solid rgba(0,0,0);  
border-radius: 0px;
background: transparent;
}

.event-modal .event-buttons {
display: -webkit-inline-flex;
width: 100%;
}

.event-modal .event-buttons .event-button {
display: block;
width: 100%;
}

.event-modal .event-buttons .event-button.close-btn {
width: 50%;
}

.event-modal .event-content .close-btn {
padding: 15px;
background: rgba(195, 0, 0, 0.07);
color: rgb(156, 0, 0);
border-radius: 6px;
text-align: center;
font-weight: 500;
font-size: 14px;
cursor: pointer;
border: 1px solid rgb(195, 0, 0);
margin-right: 10px;
}

.event-modal .event-content .close-btn:hover {
background: rgba(195, 0, 0, 1);
color: #fff;
border: 1px solid rgba(195, 0, 0, 1);
}

.event-modal .event-header {
    font-size: 22px!important;
    background: var(--primary-color);
    color: #fff;
    padding: 40px 20px;
    border-radius: 6px 6px 0px 0px;
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2; /* Set a z-index to the header itself */
}

.event-modal .event-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(31, 54, 101, 0.8);
    z-index: 1; /* Ensure the overlay is below the header */
}

.event-modal .event-header h4 {
    margin-bottom: 0px;
    font-weight: 700;
    z-index: 3; /* Make sure the text is above the overlay */
    position: relative; /* Make it respect z-index */
}


.event-modal .event-content {
background: #fff;
padding: 15px;
border-radius: 0px 0px 6px 6px;
}

.event-modal .event-content #modalEventTitle {
font-size: 20px;
opacity: 1;
font-weight: 600;
margin-bottom: 10px;
}

.event-modal .event-content .title {
font-size: 14px;
color: var(--primary-color);
opacity: 0.5;
font-weight: 500;
margin-bottom: 0px;
}

.event-modal .event-content p {
font-size: 14px;
color: #000;
font-weight: 400;
}

.event-modal .event-content p:last-child {
margin-bottom: 0px;
}

.event-modal .event-content .tags {
margin-bottom: 15px;
}

.event-modal .event-content .tag {
padding: 8px 16px;
background: #e7e7e7;
border-radius: 100px;
font-size: 10px;
color: #000;
font-weight: 500;
}

.event-modal .event-content .tag.tag-master-clinician {
background: var(--green-color);
color: #fff;
}

.event-modal .event-content .register-btn {
padding: 15px;
background: var(--green-color);
color: #fff;
border-radius: 6px;
text-align: center;
font-weight: 500;
font-size: 14px;
cursor: pointer;
border: 1px solid var(--green-color);
}

.event-modal .event-content .register-btn:hover {
background: #389a6a;
color: #fff;
border: 1px solid #389a6a;
}

.event-modal .event-content .back-btn {
padding: 15px;
background: #000;
color: #fff;
border-radius: 6px;
text-align: center;
font-weight: 500;
font-size: 14px;
cursor: pointer;
border: 1px solid #000;
}

.event-modal .event-content .small-register-btn {
padding: 8px;
background: #fff;
color: #000;
border-radius: 6px;
text-align: center;
font-weight: 400;
font-size: 10px;
cursor: pointer;
border: 1px solid #000;
}

.event-modal .event-content .small-register-btn:hover {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}

.event-modal .event-content .details-block {
margin-top: 8px;
margin-bottom: 15px;
max-height: 200px;
overflow-y: auto;
background: rgba(31, 54, 101, 0.05);
padding: 15px;
border-radius: 6px;
}

.event-modal .event-content #action-block .error-message {
background: rgba(255, 93, 93, 1);
color: #fff;
padding: 15px;
border-radius: 6px;
font-size: 14px;
font-weight: 400;
}

.event-modal .event-full {
background: rgba(255, 93, 93, 0.1);
color: rgba(162, 32, 32, 1);
padding: 15px;
font-size: 12px;
border-radius: 8px;
margin-bottom: 10px;
margin-top: 5px;
font-weight: 400;
}

.admin-page.event-page .small-register-btn {
padding: 8px;
background: #fff;
color: #000;
border-radius: 6px;
text-align: center;
font-weight: 400;
font-size: 10px;
cursor: pointer;
border: 1px solid #000;
}

.admin-page.event-page .small-register-btn:hover {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}

.admin-page.event-page .form-select {
padding: 15px;
}

.admin-page.event-page .user-dropdown {
width: 100%;
z-index: 1000;
background: #ffffff;
border: 1px solid rgba(31, 54, 101, 0.2);
max-height: 150px; 
overflow-y: auto; 
z-index: 1000;
position: absolute!important;
top: 65px!important;
left: 0px!important;
}

.admin-page.event-page .user-dropdown .no-result {
color: #ff0000;
padding: 5px 15px;
}

.admin-page.event-page .user-dropdown .no-result:hover {
background: #fff;
pointer-events: none;
cursor: none;
}

.admin-page.event-page .user-dropdown .dropdown-item {
cursor: pointer;
font-size: 12px;
padding: 5px 15px;
}


/**** Events Calendar End ****/


/**** Admin Bar ****/

.admin-bar {
padding: 20px;
background: red;
width: calc(100% - 340px);
margin: 0 auto;
position: -webkit-sticky;
margin-left: 340px;
display: flex;
top: 0;
z-index: 99999;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.03);
}

.admin-bar p.title {
font-size: 14px;
color: #fff;
font-weight: 600;
margin-bottom: 0px;
text-transform: uppercase;
opacity: 1;
}

.admin-bar p {
font-size: 12px;
color: #fff;
font-weight: 400;
margin-bottom: 0px;
opacity: 0.8;
}

.admin-bar .left {
width: 50%;
text-align: left;
}

.admin-bar .right {
width: 50%;
text-align: right;
}

.admin-bar .admin-exit-btn {
padding: 10px 20px;
background: #fff;
display: inline-block;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
border: 1px solid #fff;
color: #000;
cursor: pointer;
}

/**** Mobile Navbar ****/

.mobile-sidebar-btn {
display: none;
font-size: 26px;
color: rgba(255,255,255,1);
padding: 10px 20px!important;
background: rgba(255, 255, 255, 0.04);
margin: auto 2px;
border-radius: 4px;
cursor: pointer;
}

/**** Sidebar Footer ****/

.sb-footer hr {
height: 2px;
color: rgb(233, 233, 233);
margin-bottom: 25px;
}

.sb-footer .copyright {
font-size: 12px;
opacity: 0.4;
margin-bottom: 2px;
}

.sb-footer .version {
font-size: 10px;
opacity: 0.4;
margin-bottom: 0px;
}

/**** How-To Library Search Results ****/

.category-info-box.search-results {
display: block;
}

.category-info-box.search-results .content {
border-radius: 8px;
}

.category-info-box.search-results .content ul:last-child {
margin-bottom: 0px;
}

.library-heading {
padding: 10px 0px;
border-radius: 8px;
margin-bottom: 20px;
color: #1F3665;
}

.library-heading .library-title-section .first-item {
color: #1F3665;
}

.library-heading .library-title-section .item {
color: #1F3665;
}

.category-info-box .exercise-list {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
}

.category-info-box .hwtl-exercise .view-exercise {
text-decoration: none;
}

.category-info-box .hwtl-exercise {
text-decoration: none;
margin-bottom: 4px;
}

.category-info-box .hwtl-exercise:last-child {
margin-bottom: 0px;
}

.category-info-box .hwtl-exercise .favourite-exercise {
padding: 3px 6px;
background: rgba(31, 54, 101, 0.03);
color: #1F3665;
border-radius: 4px;
display: inline-block;
margin-right: 5px;
cursor: pointer;
}

.category-info-box .hwtl-exercise .favourite-exercise:hover {
background: rgb(255, 87, 87);
color: #fff;
}

.category-info-box .hwtl-exercise .favourite-exercise.favourited {
background: rgb(255, 87, 87);
color: #fff;
}


/**** Rehab Builder ****/

.rehab-builder-page .block .content {
padding: 20px;
background: #fff;
border-radius: 8px 8px 8px 8px;
margin-bottom: 15px;
}

.rehab-builder-page .progress-label {
font-size: 14px!important;
margin-bottom: 5px!important;
font-weight: 600!important;
}

.rehab-builder-page .progress-footer {
font-size: 14px!important;
margin-bottom: 0px!important;
font-weight: 400!important;
font-style: italic!important;
}

.rehab-builder-page .progress {
display: flex;
height: 40px;
overflow: hidden;
font-size: .75rem;
background-color: #e9ecef;
border-radius: .25rem;
margin-bottom: 10px;
}

.rehab-builder-page .heading {
background: #fff;
padding: 40px 30px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
margin-bottom: 20px;
}

.rehab-builder-page .heading .icon {
font-size: 40px;
padding: 5px 15px;
background: rgba(255, 255, 255, 0.06);
display: inline-block;
border-radius: 100px;
margin-bottom: 10px;
}

.rehab-builder-page .heading h2 {
color: #fff;
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.rehab-builder-page .heading p {
color: #fff;
font-size: 16px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.rehab-builder-page .heading .rehab-builder-examples {
margin-top: 15px;
}

.rehab-builder-page .heading .rehab-builder-examples h6 {
font-size: 18px;
font-weight: 600;
}

.rehab-builder-page .heading .rehab-builder-examples ul {
list-style: none;
 padding-left: 0; 
}

.rehab-builder-page .heading .rehab-builder-examples ul li {
position: relative;
padding-left: 20px; 
font-size: 14px;
font-weight: 400;
cursor: pointer;
}

.rehab-builder-page .heading .rehab-builder-examples ul li::before {
content: '\2192'; 
position: absolute;
left: 0;
color: var(--green-color); 
font-size: 14px;
}


.rehab-builder-page .heading .rehab-builder-examples ul li:hover {
color: var(--green-color);
}

.rehab-builder-page .heading .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border: 0px solid transparent; }
.rehab-builder-page .heading .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/**** Rehab Builder view ****/

.rehab-builder-view-page .not-answered {
color: rgb(242, 19, 19);
}

.rehab-builder-view-page .answer-box {
display: none;
}

.rehab-builder-view-page .btn-submit-form {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: none;
}

.rehab-builder-view-page .btn-submit-form:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
}

.rehab-builder-view-page .navigation-title {
font-size: 14px;
opacity: 0.6;
font-weight: 500;
margin-bottom: 0px;
}

.rehab-builder-view-page .header-above-box {
    padding: 15px 20px;
    background: rgba(31, 54, 101, 0.06);
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.rehab-builder-view-page .header-above-box .actions {
display: inline-block;
margin-left: auto;
}

.rehab-builder-view-page .header-above-box .edit-item-btn {
border-radius: 4px;
background: #000;
padding: 10px 20px;
display: inline-block;
cursor: pointer;
font-size: 14px;
color: #fff;
}

.rehab-builder-view-page .header-above-box .edit-item-btn.save-item {
background: var(--green-color);
color: #fff;
}

.rehab-builder-view-page .header-above-box .edit-item-btn.save-item:hover {
background: var(--green-color-hover);
color: #fff;
}

.rehab-builder-view-page .title .small-title {
color: var(--primary-color);
font-size: 14px;
margin-bottom: 5px;
font-weight: 400;
opacity: 0.5;
}

.rehab-builder-view-page .title h2 {
color: var(--primary-color);
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.rehab-builder-view-page .title p {
color: var(--primary-color);
font-size: 14px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.rehab-builder-view-page .content-box.primary-header {
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
padding: 50px 20px;
}

.rehab-builder-view-page .content-box.primary-header .title h2, .rehab-builder-view-page .content-box.primary-header .title p {
color: #fff;
}

.rehab-builder-view-page .content-box {
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.rehab-builder-view-page .content-box.no-header {
border-radius: 4px;
}

.rehab-builder-view-page .content-box .q-box {
margin-bottom: 20px;
}

.rehab-builder-view-page .content-box .q-box:last-child {
margin-bottom: 0px;
}

.rehab-builder-view-page .content-box hr {
height: 2px!important;
color: rgba(31, 54, 101, 0.15);
}

.rehab-builder-view-page .content-box {
    counter-reset: question-counter;
}

.rehab-builder-view-page .content-box .question-list-item::before {
counter-increment: question-counter;
content: counter(question-counter);
padding: 2px 12px;
background: rgba(31, 54, 101, 0.15);
border-radius: 4px;
margin-right: 5px;
color: #1F3665;
}

.rehab-builder-view-page .content-box .q-label {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
text-transform: capitalize;
color: var(--primary-color);
}

.rehab-builder-view-page .content-box .q-sub-label {
font-size: 15px;
font-weight: 500;
margin-bottom: 5px;
opacity: 0.8;
text-transform: capitalize;
}

.rehab-builder-view-page .content-box .q-label-description {
font-size: 11px;
font-weight: 400;
margin-bottom: 8px;
opacity: 0.7;
color: var(--primary-color);
font-style: italic;
}

.rehab-builder-view-page .content-box .q-label-description ul {
padding-left: 20px;
}

.rehab-builder-view-page .content-box .q-answer p {
font-size: 12px;
font-weight: 400;
margin-bottom: 8px;
}

.rehab-builder-view-page .content-box .q-answer p:last-child {
margin-bottom: 0px;
}

.rehab-builder-view-page .content-box .q-answer ol li {
font-size: 12px;
font-weight: 400;
}

.rehab-builder-view-page .content-box .disclaimer-text {
font-size: 12px;
font-weight: 400;
opacity: 0.8;
color: rgb(156, 0, 0);
margin-bottom: 10px;
}

.rehab-builder-view-page .button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}

.rehab-builder-view-page .back-btn,
.rehab-builder-view-page .edit-btn,
.rehab-builder-view-page .reload-btn,
.rehab-builder-view-page .download-btn,
.rehab-builder-view-page .delete-btn {
    padding: 10px 30px;
    background: rgba(31, 54, 101, 0.1);
    display: inline-block;
    border-radius: 4px 4px 0px 0px;
    font-size: 12px;
    color: #1F3665;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; 
}

.rehab-builder-view-page .inactive {
pointer-events: none;
}

.rehab-builder-view-page .right-buttons {
    display: flex;
    gap: 10px; /* Space between the buttons */
}

.rehab-builder-view-page .delete-btn {
background: #dc3545;
color: #fff;
}

.rehab-builder-view-page .edit-btn {
background: rgba(74, 193, 134, 0.15);
color: #1d6a44;
}

.rehab-builder-view-page .back-btn {
background: rgba(31, 54, 101, 0.1);
color: #1F3665;
}

.rehab-builder-view-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.rehab-builder-view-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.rehab-builder-view-page .tab-navigation .tab-item:hover {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}

.rehab-builder-view-page .tab-navigation .tab-item.active {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}

.rehab-builder-view-page .rehab-builder-list-table .actions {
display: inline-flex;
}

.rehab-builder-view-page .rehab-builder-list-table .edit-item-btn {
padding: 5px 10px;
background: var(--green-color);
display: inline-block;
border-radius: 4px;
margin-right: 5px;
cursor: pointer;
color: #fff;
}

.rehab-builder-list-table .small-heading {
font-weight: 400;
font-size: 12px;
opacity: 0.6;
}

.rehab-builder-list-table .small-text {
font-weight: 400;
font-size: 11px;
opacity: 0.6;
}

.move-up-btn, .move-down-btn {
padding: 5px 10px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
margin-right: 5px;
cursor: pointer;
}

.rehab-builder-view-page .rehab-builder-list-table .bin-item-btn {
padding: 5px 10px;
background: rgba(255, 93, 93, 1);
display: inline-block;
border-radius: 4px;
cursor: pointer;
color: #fff;
}

.rehab-builder-view-page .rehab-builder-list-table {
border-radius: 12px;
width: 100%;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
border: 1px solid rgba(31, 54, 101, 0.05)!important;
}

.rehab-builder-view-page .rehab-builder-list-table th:first-child {
border-radius: 8px 0px 0px 0px;
}

.rehab-builder-view-page .rehab-builder-list-table th {
background: rgba(31, 54, 101, 0.05);
color: var(--primary-color);
padding: 20px;
border-bottom: none;
font-size: 14px;
}

.rehab-builder-view-page .rehab-builder-list-table th:last-child {
border-radius: 0px 8px 0px 0px;
}

.rehab-builder-view-page .rehab-builder-list-table td {
padding: 20px;
border-bottom-width: 0px;
box-shadow: none;
font-size: 12px;
}

.rehab-builder-view-page .rehab-builder-list-table tr {
background: rgba(31, 54, 101, 0.03);
}

.rehab-builder-view-page .rehab-builder-list-table tr:nth-child(even) {
background: #fff;
}

.rehab-builder-view-page .rehab-builder-list-table tr:last-child td:first-child {
border-radius: 0px 0px 0px 8px;
}

.rehab-builder-view-page .rehab-builder-list-table tr:last-child td:last-child {
border-radius: 0px 0px 8px 0px;
}

.rehab-builder-view-page .rehab-builder-list-table tbody {
background: #fff;
}

.rehab-builder-view-page .dataTables_filter {
margin-bottom: 15px;
}

.rehab-builder-view-page .dataTables_paginate {
margin-top: 15px;
}

.rehab-builder-view-page table.dataTable thead th {
padding: 20px;
border-bottom: 0px solid #fff;
}

.rehab-builder-view-page table.dataTable tbody td {
padding: 20px;
border-bottom: 0px solid #fff;
background: rgba(31, 54, 101, 0.02);
}

.rehab-builder-view-page table.dataTable.no-footer {
border-bottom: 0px solid #fff;
}

.rehab-builder-view-page .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center;
}

.rehab-builder-view-page .dataTables_wrapper .dataTables_filter input {
border: 1px solid #ececec;
border-radius: 4px;
padding: 10px;
background: #fff;
margin-left: 0px;
width: 100%;
outline: none;
box-shadow: none;
}

.rehab-builder-view-page .refresh-table-btn {
background: #fff;
color: #1F3665;
padding: 10px 20px;
border: 1px solid rgba(31, 54, 101, 1);
border-radius: 4px;
font-size: 14px;
}

.rehab-builder-view-page .refresh-table-btn:hover {
color: #fff;
background-color: var(--primary-color);
border-color: var(--primary-color);
}

.rehab-builder-view-page .add-row-btn {
background: var(--green-color);
color: #fff;
padding: 10px 20px;
border: 1px solid var(--green-color);
border-radius: 4px;
font-size: 14px;
}

.rehab-builder-view-page .add-row-btn:hover {
color: #fff;
background-color: var(--green-color-hover);
border-color: var(--green-color-hover);
}

.rehab-builder-view-page .paginate_button.previous {
padding: 10px!important;
background: rgb(236, 219, 219);
border-radius: 4px!important;
color: var(--primary-color)!important;
}

.rehab-builder-view-page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
color: rgba(31, 54, 101, 1)!important;
border: 1px solid rgba(31, 54, 101, 0.05);
background: rgba(31, 54, 101, 0.05);
box-shadow: none;
padding: 10px 20px!important;
font-size: 14px;
}


.rehab-builder-view-page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
color: rgba(31, 54, 101, 1)!important;
border: 1px solid rgba(31, 54, 101, 0.05);
background: rgba(31, 54, 101, 0.05);
}

.rehab-builder-view-page  .dataTables_wrapper .dataTables_paginate .paginate_button {
color: rgba(31, 54, 101, 1)!important;
border: 1px solid rgba(31, 54, 101, 0.05);
background: rgba(31, 54, 101, 0.05);
box-shadow: none;
padding: 10px 20px!important;
font-size: 14px;
}

.rehab-builder-view-page  .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .rehab-builder-view-page  .dataTables_wrapper .dataTables_paginate .paginate_button.current {
border: 1px solid rgba(31, 54, 101, 0.15);
background: rgba(31, 54, 101, 0.15);
}

/**** Nice Table Design ****/

.design-table table {
border-radius: 8px;
width: 100%;
-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.design-table table.no-header thead {
display: none;
}

.design-table .dataTables_empty {
border-radius: 4px!important;
background: rgba(255, 0, 0, 0.02)!important;
color: rgba(105, 0, 0, 1)!important;
padding: 40px 20px!important;
}

.design-table th:first-child {
border-radius: 8px 0px 0px 0px;
}

.design-table th {
background: rgba(31, 54, 101, 0.05);
color: var(--primary-color);
padding: 20px;
border-bottom: none;
font-size: 16px;
vertical-align: middle;
}

.design-table th:last-child {
border-radius: 0px 8px 0px 0px;
}

.design-table td {
padding: 20px;
border-bottom-width: 0px;
box-shadow: none;
font-size: 14px;
vertical-align: middle;
}

.design-table .clickable-td {
cursor: pointer;
}

.design-table td p.title {
font-weight: 600;
margin-bottom: 5px;
}

.design-table td p.smaller-text {
font-weight: 400;
font-size: 10px;
opacity: 0.8;
margin-bottom: 0px;
}

.design-table .buttons {
display: inline-flex;
}

.design-table .buttons .buttons-item {
    margin-right: 10px; /* Adjust the spacing as needed */
}

/* Optional: Remove margin from the last button */
.design-table .buttons .buttons-item:last-child {
    margin-right: 0;
}

.design-table .table-click-arrow {
font-size: 14px!important;
cursor: pointer;
padding: 10px 15px;
background: rgba(31, 54, 101, 0.05);
border-radius: 4px;
border: 1px solid rgba(31, 54, 101, 0.05);
display: inline-block;
}

.design-table .table-click-arrow:hover {
background: rgba(31, 54, 101, 0.08);
}

.design-table .table-delete-icon {
font-size: 20px!important;
cursor: pointer;
padding: 10px 15px;
background: rgba(255, 93, 93, 0.8);
color: #fff;
border-radius: 4px;
border: 1px solid rgba(31, 54, 101, 0.05);
display: inline-block;
}

.design-table .table-delete-icon:hover {
background: rgba(255, 93, 93, 1);
color: #fff;
}

.design-table tr {
background: rgba(31, 54, 101, 0.05);
}

.design-table tr:nth-child(even) {
background: rgba(31, 54, 101, 0.02);
}

.design-table tr:last-child td:first-child {
border-radius: 0px 0px 0px 8px;
}

.design-table tr:last-child td:last-child {
border-radius: 0px 0px 8px 0px;
}

.design-table tbody {
background: #fff;
}

.design-table .dataTables_filter {
margin-bottom: 15px;
}

.design-table .dataTables_paginate {
margin-top: 15px;
}

.design-table table.dataTable thead th {
padding: 20px;
border-bottom: 0px solid #fff;
vertical-align: middle;
}

.design-table table.dataTable tbody td {
padding: 20px;
border-bottom: 0px solid #fff;
background: rgba(31, 54, 101, 0.02);
vertical-align: middle;
}

.design-table table.dataTable.no-footer {
border-bottom: 0px solid #fff;
}

.design-table .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center;
}

.design-table .dataTables_wrapper .dataTables_filter input {
border: 1px solid #e4e5eb;
border-radius: 4px;
padding: 15px;
background: #fff;
margin-left: 0px;
width: 100%;
outline: none;
box-shadow: none;
}

.design-table .add-row-btn {
background: var(--green-color);
color: #fff;
padding: 15px 20px;
border: 1px solid var(--green-color);
border-radius: 4px;
font-size: 14px;
}

.design-table .add-row-btn:hover {
color: #fff;
background-color: var(--green-color-hover);
border-color: var(--green-color-hover);
}

.design-table .paginate_button.previous {
padding: 10px!important;
background: rgb(236, 219, 219);
border-radius: 4px!important;
color: var(--primary-color)!important;
}

.design-table .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
color: rgba(31, 54, 101, 1)!important;
border: 1px solid rgba(31, 54, 101, 0.05);
background: rgba(31, 54, 101, 0.05);
box-shadow: none;
padding: 10px 20px!important;
font-size: 14px;
}


.design-table .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
color: rgba(31, 54, 101, 1)!important;
border: 1px solid rgba(31, 54, 101, 0.05);
background: rgba(31, 54, 101, 0.05);
}

.design-table .dataTables_wrapper .dataTables_paginate .paginate_button {
color: rgba(31, 54, 101, 1)!important;
border: 1px solid rgba(31, 54, 101, 0.05);
background: rgba(31, 54, 101, 0.05);
box-shadow: none;
padding: 10px 20px!important;
font-size: 14px;
}

.design-table .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .design-table .dataTables_wrapper .dataTables_paginate .paginate_button.current {
border: 1px solid rgba(31, 54, 101, 0.15);
background: rgba(31, 54, 101, 0.15);
} 

.design-table .add-btn {
background: var(--green-color);
color: #fff;
padding: 15px 20px;
border: 1px solid var(--green-color);
border-radius: 4px;
font-size: 14px;
}

.design-table .add-btn:hover {
color: #fff!important;
background-color: var(--green-color-hover)!important;
border: 1px solid var(--green-color-hover)!important;
}


.design-table .csv-btn {
background: var(--primary-color);
color: #fff;
padding: 15px 20px;
border: 1px solid var(--primary-color);
border-radius: 4px;
font-size: 14px;
}

.design-table .csv-btn:hover {
color: #fff!important;
background-color: var(--primary-color)!important;
border: 1px solid var(--primary-color)!important;
}

.design-table .filter-btn {
background: #fff;
color: rgba(31, 54, 101, 1);
padding: 15px 20px;
border: 1px solid var(--primary-color);
border-radius: 4px;
font-size: 14px;
margin-left: 10px;
}

.design-table .filter-btn:hover {
color: #fff;
background-color: var(--primary-color);
border-color: var(--primary-color);
}

.design-table .filter-btn.active {
color: #fff;
background-color: var(--primary-color);
border-color: var(--primary-color);
}

.design-table .small-heading {
font-weight: 400;
font-size: 12px;
opacity: 0.6;
}

.design-table .small-text {
font-weight: 400;
font-size: 11px;
opacity: 0.6;
}

.design-table .red-text {
color: rgb(255, 66, 66);
}

.design-table #client-list_info, .design-table #team-list_info {
font-size: 14px;
padding-left: 10px;
opacity: 0.6;
}

.design-table tr.disabled {
background: rgba(255, 41, 41, 0.06)!important;
}


/**** Courses Page ****/

.courses-page .heading {
background: #fff;
padding: 40px 30px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
margin-bottom: 20px;
}

.courses-page .heading .icon {
font-size: 40px;
padding: 5px 15px;
background: rgba(255, 255, 255, 0.06);
display: inline-block;
border-radius: 100px;
margin-bottom: 10px;
}

.courses-page .heading h2 {
color: #fff;
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.courses-page .heading p {
color: #fff;
font-size: 16px;
font-weight: 300;
opacity: 0.6;
}

.courses-page .courses-block {
padding: 15px;
background: #fff;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
height: 100%;
position: relative;
}

.courses-page .courses-block h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
color: var(--primary-color);
}

.courses-page .courses-block p {
font-size: 12px;
font-weight: 400;
opacity: 0.8;
}

.courses-page .courses-block p:last-child {
margin-bottom: 0px;
}

.courses-page .courses-block .image {
width: 100%;
aspect-ratio: 3 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0;
background-position: center;
border-radius: 4px;
position: relative;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
margin-bottom: 16px;
}

.courses-page .courses-block.locked .image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0, 0.5); /* Adjust the opacity (last value) as needed */
  z-index: 1;
  border-radius: 4px;
}

.courses-page .courses-block.locked .image .middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
z-index: 2;
width: 80%;
margin: 0px auto;
}

.courses-page .courses-block.locked .image .middle .icon {
font-size: 50px;
color: #fff;
padding: 10px 20px;
background: rgba(221, 53, 69, 0.8);
border-radius: 100px;
}

.courses-page .courses-block .course-btn {
padding: 15px 30px;
background: #fff;
border: 1px solid var(--primary-color);
color: var(--primary-color);
display: inline-block;
position: relative;
border-radius: 4px;
font-size: 12px;
}

.courses-page .courses-block .course-btn:hover {
background: var(--green-color);
color: #fff;
border: 1px solid var(--green-color);
}


/**** Admin Page ****/

.admin-page .breadcrumb {
padding: 20px 20px;
background: rgba(31, 54, 101, 0.04);
font-size: 14px;
color: #1F3665;
border-radius: 4px;
}

.admin-page .view-members-list {
cursor: pointer;
}

.design-table #course-table_info {
    font-size: 14px;
    padding-left: 10px;
    opacity: 0.6;
}

.admin-page .button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}

.admin-page .back-btn,
.admin-page .edit-btn,
.admin-page .reload-btn,
.admin-page .download-btn,
.admin-page .delete-btn {
    padding: 10px 30px;
    background: rgba(31, 54, 101, 0.1);
    display: inline-block;
    border-radius: 4px 4px 0px 0px;
    font-size: 12px;
    color: #1F3665;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; 
}

.admin-page .inactive {
pointer-events: none;
}

.admin-page .right-buttons {
    display: flex;
    gap: 10px; /* Space between the buttons */
}

.admin-page .delete-btn {
background: #dc3545;
color: #fff;
}

.admin-page .edit-btn {
background: rgba(74, 193, 134, 0.15);
color: #1d6a44;
}

.admin-page .back-btn {
background: rgba(31, 54, 101, 0.1);
color: #1F3665;
}

.admin-page .navigation-title {
font-size: 14px;
opacity: 0.6;
font-weight: 500;
margin-bottom: 0px;
}

.admin-page .content-box h2 {
  font-weight: 600;
}

.admin-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.admin-page .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.admin-page .main-btn-primary {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.admin-page .main-btn-primary-outline {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: rgba(31, 54, 101, 1);
background: rgba(31, 54, 101, 0.02);
border: 1px solid rgba(31, 54, 101, 1);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.admin-page .main-btn-primary-outline:hover {
background: rgba(31, 54, 101, 1);
border: 1px solid rgba(31, 54, 101, 1);
color: #fff;
}


.admin-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.admin-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.admin-page .tab-navigation .tab-item:hover {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}

.admin-page .tab-navigation .tab-item.active {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}

.admin-page .heading {
background: #fff;
padding: 40px 30px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
margin-bottom: 20px;
}

.admin-page .heading .icon {
font-size: 40px;
padding: 5px 15px;
background: rgba(255, 255, 255, 0.06);
display: inline-block;
border-radius: 100px;
margin-bottom: 10px;
}

.admin-page .heading h2 {
color: #fff;
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.admin-page .heading p {
color: #fff;
font-size: 16px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.admin-page .title .small-title {
color: var(--primary-color);
font-size: 14px;
margin-bottom: 5px;
font-weight: 400;
opacity: 0.5;
}

.admin-page .title h2 {
font-weight: 700;
font-size: 30px;
margin-bottom: 15px;
}

.admin-page .title h3 {
color: #fff;
font-weight: 400;
font-size: 16px;
margin-bottom: 2px;
}

.admin-page .title h4 {
color: #fff;
font-weight: 400;
font-size: 12px;
margin-bottom: 0px;
}

.admin-page .title p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.admin-page .header-above-box {
    padding: 15px 20px;
    background: rgba(31, 54, 101, 0.06);
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.admin-page .content-box.primary-header {
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
padding: 50px 20px;
}

.admin-page .content-box.bigger-padding {
padding: 50px 20px;
}

.admin-page .content-box.primary-header .title h2, .admin-page .content-box.primary-header .title p {
color: #fff;
}

.admin-page .content-box {
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.admin-page .content-box.no-header {
border-radius: 4px;
}

.admin-page .content-box hr {
height: 2px!important;
color: rgba(31, 54, 101, 0.15);
}

.admin-page .card-box {
padding: 20px;
background: #fff;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005);
margin-bottom: 10px;
}

.admin-page .card-box.with-header {
border-radius: 0px 0px 4px 4px;
}

.admin-page .header-above-box  {
display: block;
}

.admin-page .header-above-box h3 {
font-weight: 600;
margin-bottom: 0px;
font-size: 20px;
}

.admin-page .header-above-box p {
font-weight: 400;
margin-bottom: 15px;
opacity: 0.5;
font-size: 14px;
}

.admin-page .header-above-box p:last-child {
margin-bottom: 0px;
}

.admin-page .card-box .header h3 {
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0px;
font-size: 20px;
}

.admin-page .card-box .header p {
font-weight: 400;
color: var(--primary-color);
margin-bottom: 15px;
opacity: 0.5;
font-size: 14px;
}

.admin-page .card-box .targets p {
font-weight: 400;
font-size: 14px;
}

.admin-page .card-box .content {
padding: 20px;
background: #f9f9f9;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005);
margin-bottom: 0px;
color: #000;
border-left: 8px solid rgba(220, 53, 69, 1);
}

.admin-page .card-box .content.under-target {
border-left: 8px solid rgba(220, 53, 69, 1);
}

.admin-page .card-box .content.target {
border-left: 8px solid var(--green-color);
}

.admin-page .card-box .content p {
font-weight: 400;
font-size: 14px;
}

.admin-page .card-box .content p:last-child {
margin-bottom: 0px;
}

.admin-page .card-box .income {
padding: 20px;
background: #f9f9f9;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005);
margin-bottom: 0px;
color: #000;
}

.admin-page .card-box .income h6 {
font-weight: 600;
font-size: 16px;
}

.admin-page .card-box .income p {
font-weight: 400;
font-size: 14px;
}

.admin-page .card-box .income p:last-child {
margin-bottom: 0px;
}

.admin-page .counter-box {
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005);
margin-bottom: 10px;
text-align: center;
color: var(--primary-color);
position: relative;
}

.admin-page .counter-box .counter {
font-size: 28px;
font-weight: 700;
margin-bottom: 0px;
}

.admin-page .counter-box .text {
font-size: 14px;
font-weight: 500;
margin-bottom: 0px;
text-transform: uppercase;
opacity: 0.5;
}

.counter-box-icon {
position: absolute;
font-size: 60px;
top: 50%;
transform: translateY(-50%);
opacity: 0.05;
right: 15px;
}

.admin-page .counter-box.bg-active {
background: rgba(74, 193, 134, 0.09);
}

.admin-page .counter-box.bg-overdue {
background: rgba(255, 0, 0, 0.05);
}

.admin-page .products-refresh-btn {
padding: 10px 20px;
background: rgba(31, 54, 101, 0.08);
display: inline-block;
border-radius: 4px;
font-size: 30px;
float: right;
cursor: pointer;
}

.admin-page .content-box.chat-box {
  min-height: 300px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0px;
  border-radius: 4px 4px 0px 0px !important;
  display: flex;
  flex-direction: column-reverse;
}
.admin-page .content-box.chat-box .chat-messages {
  padding-left: 0;
  list-style: none;
  display: grid;
  padding: 30px 0px 0px;
}
.admin-page .content-box.chat-box .chat-messages .no-messages {
  font-size: 14px;
  opacity: 0.6;
  color: rgba(255, 93, 93, 0.8);
}
.admin-page .content-box.chat-box .chat-messages .left-message {
float: left;
max-width: 80%;
display: inline-block;
position: relative;
}
.admin-page .content-box.chat-box .chat-messages .left-message .bubble {
    background: #f6f6f6;
    color: #333;
    font-size: 12px;
    padding: 15px 15px;
    border-radius: 8px;
    position: relative; 
    margin-bottom: 10px;
}
.admin-page .content-box.chat-box .chat-messages .left-message .bubble:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 15px;
    border-width: 10px;
    border-style: solid;
    border-color: #f6f6f6 transparent transparent transparent; 
}
.admin-page.content-box.chat-box .chat-messages .left-message .info {
float: left;
}
.admin-page .chat-box-footer {
  padding: 15px;
  background: rgba(31, 54, 101, 0.04);
  border-radius: 0px 0px 4px 4px;
}
.admin-page .chat-box-footer #charCount {
  font-size: 10px;
  color: var(--primary-color);
  font-weight: 400;
  opacity: 0.6;
}
.admin-page .btn-submit-form {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
}
.admin-page .btn-outline {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(31, 54, 101, 1);
  background: rgba(31, 54, 101, 0.02);
  border: 1px solid rgba(31, 54, 101, 1);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}
.admin-page .content-box.chat-box .chat-messages .right-message {
  float: right;
  max-width: 80%;
  display: inline-block;
  position: relative;
}
.admin-page .content-box.chat-box .chat-messages .info .name {
  font-size: 10px;
  margin-top: 5px;
  margin-bottom: 0px;
  font-weight: 500;
}
.admin-page .content-box.chat-box .chat-messages .info .time {
  font-size: 10px;
  margin-top: 0px;
  opacity: 0.5;
}
.admin-page .content-box.chat-box .chat-messages .right-message .info {
  float: right;
  text-align: right;
}
.admin-page .content-box.chat-box .chat-messages .right-message .bubble::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 15px;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(115, 214, 255, 0.2) transparent transparent;
}
.admin-page .content-box.chat-box .chat-messages .right-message .bubble {
  background: rgba(115, 214, 255, 0.2);
  color: #333;
  font-size: 12px;
  padding: 15px 15px;
  border-radius: 8px;
  position: relative;
  margin-bottom: 10px;
}
.admin-page .no-feedback-message h3,
.admin-page .no-feedback-message p{
  opacity: 0.4;
}

/**** Action Report Page ****/
.action-report-page .header-above-box {
  padding: 15px 20px;
  background: rgba(31, 54, 101, 0.06);
  display: flex;
  align-items: center;
  border-radius: 4px 4px 0px 0px;
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}
.action-report-page .header-above-box .actions {
  display: inline-block;
  margin-left: auto;
}
.action-report-page .header-above-box .edit-item-btn {
  border-radius: 4px;
  background: #000;
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
}
.action-report-page .answer-box {
  display: none;
}
.action-report-page .content-box .q-box {
  margin-bottom: 20px;
}
.action-report-page .content-box {
  padding: 20px;
  background: #fff;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .02);
  margin-bottom: 20px;
}
.action-report-page  .content-box {
  counter-reset: question-counter;
}
.action-report-page .content-box .question-list-item::before {
  counter-increment: question-counter;
  content: counter(question-counter);
  padding: 2px 12px;
  background: rgba(31, 54, 101, 0.15);
  border-radius: 4px;
  margin-right: 5px;
  color: #1F3665;
}
.action-report-page .content-box .q-label {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: capitalize;
  color: var(--primary-color);
}
.action-report-page .content-box .q-answer p {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 8px;
}
.action-report-page .content-box .q-label {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: capitalize;
  color: var(--primary-color);
}
.action-report-page .not-answered {
  color: rgb(242, 19, 19);
}
.action-report-page .btn-submit-form {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: none;
}
.action-report-page .content-box .updated {
  color: var(--primary-color);
  font-size: 14px;
  margin-bottom: 0px;
  font-weight: 500;
  opacity: 0.6;
}
.action-report-page .content-box .q-label-description {
  font-size: 11px;
  font-weight: 400;
  margin-bottom: 8px;
  opacity: 0.7;
  color: var(--primary-color);
  font-style: italic;
}

/**** Design Page ****/

.design-page .heading {
background: #fff;
padding: 40px 30px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
margin-bottom: 20px;
}

.design-page .heading .icon {
font-size: 40px;
padding: 5px 15px;
background: rgba(255, 255, 255, 0.06);
display: inline-block;
border-radius: 100px;
margin-bottom: 10px;
}

.design-page .heading h2 {
color: #fff;
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.design-page .heading p {
color: #fff;
font-size: 16px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.design-page .title .small-title {
color: var(--primary-color);
font-size: 14px;
margin-bottom: 5px;
font-weight: 400;
opacity: 0.5;
}

.design-page .title h2 {
font-weight: 700;
font-size: 30px;
margin-bottom: 15px;
}

.design-page .title h3 {
color: #fff;
font-weight: 400;
font-size: 16px;
margin-bottom: 2px;
}

.design-page .title h4 {
color: #fff;
font-weight: 400;
font-size: 12px;
margin-bottom: 0px;
}

.design-page .title p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.design-page .header-above-box {
    padding: 15px 20px;
    background: rgba(31, 54, 101, 0.06);
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.design-page .content-box.primary-header {
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
padding: 50px 20px;
color: #fff;
}

.design-page .content-box.bigger-padding {
padding: 50px 20px;
}

.design-page .content-box.primary-header .title h2, .admin-page .content-box.primary-header .title p {
color: #fff;
}

.design-page .content-box {
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.design-page .content-box.header-block h2 {
font-size: 34px;
font-weight: 700;
margin-bottom: 4px;
}

.design-page .content-box.header-block p {
font-size: 16px;
font-weight: 300;
margin-bottom: 0px;
opacity: 0.8;
}

.design-page .patient-info-header {
padding: 40px 20px;
color: var(--primary-color);
}

.design-page .patient-info-header h2 {
font-size: 34px;
font-weight: 700;
margin-bottom: 4px;
}

.design-page .patient-info-header p {
font-size: 16px;
font-weight: 300;
margin-bottom: 0px;
opacity: 0.8;
}

.design-page .patient-info-header p.comments {
font-size: 14px;
font-weight: 300;
margin-bottom: 0px;
opacity: 0.8;
line-height: 16px;
margin-top: 10px;
}

.design-page .content-box.no-header {
border-radius: 4px;
}

.design-page .content-box hr {
height: 2px!important;
color: rgba(31, 54, 101, 0.15);
}

.design-page .button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}

.design-page .back-btn,
.design-page .edit-btn,
.design-page .reload-btn,
.design-page .download-btn,
.design-page .delete-btn {
    padding: 10px 30px;
    background: rgba(31, 54, 101, 0.1);
    display: inline-block;
    border-radius: 4px 4px 0px 0px;
    font-size: 12px;
    color: #1F3665;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; 
}

.design-page .delete-btn {
background: #dc3545;
color: #fff;
}

.design-page .edit-btn {
background: rgba(74, 193, 134, 0.15);
color: #1d6a44;
}

.design-page .back-btn {
background: rgba(31, 54, 101, 0.1);
color: #1F3665;
}

.design-page .tab-navigation.no-header {
border-radius: 4px;
}

.design-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.design-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.design-page .tab-navigation .tab-item:hover {
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
}

.design-page .tab-navigation .tab-item.active {
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
}

.design-page .navigation-title {
font-size: 14px;
opacity: 0.6;
font-weight: 500;
margin-bottom: 0px;
}

.design-page .header-above-box {
    padding: 15px 20px;
    background: rgba(31, 54, 101, 0.06);
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.design-page .header-above-box .actions {
display: inline-block;
margin-left: auto;
}

.design-page .header-above-box .edit-item-btn {
border-radius: 4px;
background: #000;
padding: 10px 20px;
display: inline-block;
cursor: pointer;
font-size: 14px;
color: #fff;
}

.design-page .header-above-box .edit-item-btn.save-item {
background: var(--green-color);
color: #fff;
}

.design-page .header-above-box .edit-item-btn.save-item:hover {
background: var(--green-color-hover);
color: #fff;
}


.design-table #custom-exercises-list_info {
font-size: 14px;
padding-left: 10px;
opacity: 0.6;
}

/**** Toast Notifications ****/

.toast-container {
  position: fixed;
  bottom: 20px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  z-index: 1050; /* Bootstrap toast default z-index */
  width: 300px; /* Adjust width as needed */
}

.toast {
background-color: #fff;
border: 0px solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

.toast.success-toast .toast-header {
background-color: var(--green-color);  
color: #fff;
padding: 12px 15px;
font-weight: 500;
}

.toast-body {
padding: 12px;
font-size: 12px;
}

/**** FEATURES ****/


/**** Vivid Vision ****/

.vivid-vision-page .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.vivid-vision-page .content-box h2 {
  font-weight: 600;
}

.vivid-vision-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.vivid-vision-page .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.vivid-vision-page .not-answered {
color: rgb(242, 19, 19);
}

.vivid-vision-page .answer-box {
display: none;
}

.vivid-vision-page .btn-submit-form {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: none;
}


.vivid-vision-page .btn-submit-form:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
}


.vivid-vision-page .header-above-box {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.06);
display: flex;
align-items: center;
border-radius: 4px 4px 0px 0px;
font-size: 18px;
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
}

.vivid-vision-page .header-above-box .actions {
display: inline-block;
margin-left: auto;
}

.vivid-vision-page .header-above-box .edit-item-btn {
border-radius: 4px;
background: #000;
padding: 10px 20px;
display: inline-block;
cursor: pointer;
font-size: 14px;
color: #fff;
}

.vivid-vision-page .header-above-box .edit-item-btn.save-item {
background: var(--green-color);
color: #fff;
}

.vivid-vision-page .header-above-box .edit-item-btn.save-item:hover {
background: var(--green-color-hover);
color: #fff;
}

.vivid-vision-page .content-box {
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.vivid-vision-page .content-box.no-header {
border-radius: 4px;
}

.vivid-vision-page .content-box .q-box {
margin-bottom: 20px;
}

.vivid-vision-page .content-box .q-box:last-child {
margin-bottom: 0px;
}

.vivid-vision-page .content-box hr {
height: 2px!important;
color: rgba(31, 54, 101, 0.15);
}

.vivid-vision-page .content-box {
counter-reset: question-counter;
}

.vivid-vision-page .content-box .question-list-item::before {
counter-increment: question-counter;
content: counter(question-counter);
padding: 2px 12px;
background: rgba(31, 54, 101, 0.15);
border-radius: 4px;
margin-right: 5px;
color: #1F3665;
}

.vivid-vision-page .content-box .q-label {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
text-transform: capitalize;
color: var(--primary-color);
}

.vivid-vision-page .content-box .q-text-label {
display: none;
}

.vivid-vision-page .content-box .q-sub-label {
font-size: 15px;
font-weight: 500;
margin-bottom: 5px;
opacity: 0.8;
text-transform: capitalize;
}

.vivid-vision-page .content-box .q-label-description {
font-size: 11px;
font-weight: 400;
margin-bottom: 8px;
opacity: 0.7;
color: var(--primary-color);
font-style: italic;
}

.vivid-vision-page .content-box .q-label-description ul {
padding-left: 20px;
}

.vivid-vision-page .content-box .q-answer p {
font-size: 12px;
font-weight: 400;
margin-bottom: 8px;
}

.vivid-vision-page .content-box .q-answer p:last-child {
margin-bottom: 0px;
}

.vivid-vision-page .content-box .q-answer ol li {
font-size: 12px;
font-weight: 400;
}

.vivid-vision-page .content-box .disclaimer-text {
font-size: 12px;
font-weight: 400;
opacity: 0.8;
color: rgb(156, 0, 0);
margin-bottom: 10px;
}

.vivid-vision-page .button-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0px;
}

.vivid-vision-page .download-btn {
padding: 10px 30px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px 4px 0px 0px;
font-size: 12px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.vivid-vision-page .inactive {
pointer-events: none;
}


/**** Time Review Page  ****/

.time-reviews-page .content-box,
.time-review-page .content-box
{
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.time-reviews-page .navigation-title,
.time-review-page .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.time-reviews-page .content-box h2,
.time-review-page .content-box h2 {
  font-weight: 600;
}

.time-reviews-page .content-box p,
.time-review-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.time-reviews-page .main-btn,
.time-review-page .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}


.time-review-page h5 {
font-weight: 600;
font-size: 18px;
}
.time-review-page .time-review-completed {
display: none;
}

.time-review-page .table td {
border: 1px solid #e4e6ea;
}

.time-review-page .btn-submit-form {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: none;
}

.time-review-page .border-checklist {
  background: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #72c147;
  box-shadow: 0px 2px 1px 0px rgba(255, 255, 255, 0.19);
  transition: all 0.25s ease;
}

.time-review-page .label-group p {
  margin: 0px;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-review-page .card-type-icon {
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 16px;
  font-weight: 800;
  color: #333;
  border-radius: 20%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
  transition: all 0.25s ease;
  background-color: #72c147;
  border: 1px solid #eaeaea;
}

.time-review-page .card-type-icon:hover  {
transition: all 0.25s ease;
background-color: #69b83e;
border: 1px solid #69b83e;
}

.time-review-page .btn-submit-form:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
}


.time-reviews-page .header-above-box {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.06);
display: flex;
align-items: center;
border-radius: 4px 4px 0px 0px;
font-size: 18px;
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
}

.time-review-page .header-above-box .actions {
display: inline-block;
margin-left: auto;
}

.time-review-page .header-above-box .edit-item-btn.save-item {
background: var(--green-color);
color: #fff;
}

.time-review-page .header-above-box .edit-item-btn.save-item:hover {
background: var(--green-color-hover);
color: #fff;
}

.time-review-page .title .small-title {
color: var(--primary-color);
font-size: 14px;
margin-bottom: 5px;
font-weight: 400;
opacity: 0.5;
}

.time-reviews-page .main-content .page-header {
  border-radius: 0px;
}

.time-review-page .title h2 {
color: var(--primary-color);
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.time-review-page .title p {
color: var(--primary-color);
font-size: 14px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.time-review-page .content-box .q-box {
margin-bottom: 20px;
}

.time-review-page .content-box .q-box:last-child {
margin-bottom: 0px;
}

.time-review-page .content-box hr {
height: 2px!important;
color: rgba(31, 54, 101, 0.15);
}

.time-review-page .content-box {
counter-reset: question-counter;
}

.time-review-page .content-box .question-list-item::before {
counter-increment: question-counter;
content: counter(question-counter);
padding: 2px 12px;
background: rgba(31, 54, 101, 0.15);
border-radius: 4px;
margin-right: 5px;
color: #1F3665;
}

.time-review-page .content-box .q-label {
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
text-transform: capitalize;
color: var(--primary-color);
}

.time-review-page .content-box .q-sub-label {
font-size: 15px;
font-weight: 500;
margin-bottom: 5px;
opacity: 0.8;
text-transform: capitalize;
}

.time-review-page .content-box .q-label-description {
font-size: 11px;
font-weight: 400;
margin-bottom: 8px;
opacity: 0.7;
color: var(--primary-color);
font-style: italic;
}

.time-review-page .content-box .q-label-description ul {
padding-left: 20px;
}

.time-review-page .content-box .q-answer p {
font-size: 12px;
font-weight: 400;
margin-bottom: 8px;
}

.time-review-page .content-box .q-answer p:last-child {
margin-bottom: 0px;
}

.time-review-page .content-box .q-answer ol li {
font-size: 12px;
font-weight: 400;
}

.time-review-page .content-box .disclaimer-text {
font-size: 12px;
font-weight: 400;
opacity: 0.8;
color: rgb(156, 0, 0);
margin-bottom: 10px;
}

.time-review-page .button-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0px;
}

.time-review-page .back-btn,
.time-review-page .edit-btn,
.time-review-page .reload-btn,
.time-review-page .download-btn,
.time-review-page .delete-btn {
padding: 10px 30px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.time-review-page .delete-btn {
  background: #dc3545;
  color: #fff;
}

.time-review-page .inactive {
pointer-events: none;
}

.time-review-page .right-buttons {
display: flex;
gap: 10px; /* Space between the buttons */
}

.time-review-page .edit-btn {
background: rgba(74, 193, 134, 0.15);
color: #1d6a44;
}

.time-review-page .back-btn {
background: rgba(31, 54, 101, 0.1);
color: #1F3665;
}

.time-review-page .move-up-btn, .move-down-btn {
  padding: 5px 10px;
  background: rgba(31, 54, 101, 0.1);
  display: inline-block;
  border-radius: 4px;
  margin-right: 5px;
  cursor: pointer;
  }

.time-review-page .add {
  padding: 5px 10px;
  background: #4ac186;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  }
  
.time-review-page table .actions {
  display: inline-flex;
}

.time-review-page table .bin {
padding: 5px 10px;
background: rgba(255, 93, 93, 1);
display: inline-block;
border-radius: 4px;
cursor: pointer;
color: #fff;
}

.time-review-page table .edit {
  padding: 5px 10px;
  background: var(--secondary-color);
  display: inline-block;
  border-radius: 4px;
  margin-right: 5px;
  cursor: pointer;
  color: #fff;
}


.time-review-page .notice {
  padding: 15px;
  background-color: #fafafa;
  border-left: 6px solid #7f7f84;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2);
}

.time-review-page .notice-success-thick {
  border-color: #72c147;
  background: #76d046;
  color: #fff;
}


/**** Customer Journey Dashboard Page ****/ 

.customer-journey-dashboard-page .content-box,
.weekly-customer-journey-dashboard-page .content-box {
  padding: 20px;
  background: #fff;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
  margin-bottom: 20px;
}

.customer-journey-dashboard-page .navigation-title,
.weekly-customer-journey-dashboard-page .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.customer-journey-dashboard-page .content-box h2,
.weekly-customer-journey-dashboard-page .content-box h2 {
  font-weight: 600;
}

.customer-journey-dashboard-page .content-box p,
.weekly-customer-journey-dashboard-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.customer-journey-dashboard-page .main-btn,
.weekly-customer-journey-dashboard-page .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.weekly-customer-journey-dashboard-page .main-btn-primary {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.weekly-customer-journey-dashboard-page .main-btn-primary.edit {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.weekly-customer-journey-dashboard-page .main-btn-primary.reorder {
  background: #ffc107;
  border: 1px solid #ffc107;
}

.weekly-customer-journey-dashboard-page h5 {
  font-weight: 600;
  font-size: 18px;
  }
  .weekly-customer-journey-dashboard-page .table td {
  border: 1px solid #e4e6ea;
  }
  
  .weekly-customer-journey-dashboard-page .btn-submit-form {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: none;
  }

  .weekly-customer-journey-dashboard-page .content-box .updated {
    color: var(--primary-color);
    font-size: 14px;
    margin-bottom: 0px;
    font-weight: 500;
    opacity: 0.6;
  }

  .weekly-customer-journey-dashboard-page .label-group p {
    margin: 0px;
    line-height: 21px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .weekly-customer-journey-dashboard-page .btn-submit-form:hover {
  background: var(--green-color-hover);
  border: 1px solid var(--green-color-hover);
  }
  
  .weekly-customer-journey-dashboard-page .header-above-box .actions {
  display: inline-block;
  margin-left: auto;
  }
  
  .weekly-customer-journey-dashboard-page .header-above-box .edit-item-btn.save-item {
  background: var(--green-color);
  color: #fff;
  }
  
  .weekly-customer-journey-dashboard-page .header-above-box .edit-item-btn.save-item:hover {
  background: var(--green-color-hover);
  color: #fff;
  }
  
  .weekly-customer-journey-dashboard-page .title .small-title {
  color: var(--primary-color);
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 400;
  opacity: 0.5;
  }
  
  .customer-journey-dashboard-page.content-box.no-header {
  border-radius: 4px;
  }

  .customer-journey-dashboard-page.content-box.no-header {
  border-radius: 4px;
  }

  .weekly-customer-journey-dashboard-tbl thead .target {
    background-color:#d3f1fb;
  }

  .weekly-customer-journey-dashboard-tbl thead .baseline {
    background-color:#f1f7ae;
  }

  .weekly-customer-journey-dashboard-tbl thead .section {
    background-color:#f7d0ae;
  }

  .weekly-customer-journey-dashboard-page .design-table .column_name {
    font-weight: 700;
    font-size: 15px;
  }

  .weekly-customer-journey-dashboard-page .design-table th p {
    font-weight: 600;
    font-size: 11px;
    opacity: 0.6;
    color: #164083;
  }

  .weekly-customer-journey-dashboard-page  .design-table td:first-child {
    font-weight: 600;
  }

  .weekly-customer-journey-dashboard-page .value-chain-tbl thead .target th:first-child, .baseline th:first-child, .section th:first-child {
    text-align: left;
  }

  .weekly-customer-journey-dashboard-page .value-chain-tbl tbody tr th, 
  .weekly-customer-journey-dashboard-page .value-chain-tbl tbody tr td {
    width: 300px;
  }

  .weekly-customer-journey-dashboard-page .value-chain-tbl tbody tr td input {
    display: none;
  }

  .weekly-customer-journey-dashboard-page .design-table table {
    width:2800px;
  }

  .weekly-customer-journey-dashboard-page .design-table th:first-child {
    border-radius: 0px 0px 0px 0px !important;
  }

  .weekly-customer-journey-dashboard-page  .design-table th:last-child {
    border-radius: 0px 0px 0px 0px;
  }

  .weekly-customer-journey-dashboard-page .design-table .default {
    background-color: #eeeff1;
  }

  /* Fix the first column */
  .weekly-customer-journey-dashboard-page .design-table th:first-child,
  .weekly-customer-journey-dashboard-page .design-table td:first-child {
      position: sticky;
      left: 0;
      z-index: 2; /* Ensure it stays on top */
      background-color: #eeeff1; /* Optional, but recommended */
  }

  .weekly-customer-journey-dashboard-page .design-table .targetSticky {
    background-color: #cae8f3 !important;
  }

  .weekly-customer-journey-dashboard-page .design-table .baselineSticky {
    background-color: #e7edaa !important;
  }

  .weekly-customer-journey-dashboard-page .design-table .sectionSticky {
    background-color: #ecc8aa !important;
  }

  .weekly-customer-journey-dashboard-page .design-table th {
    background: rgba(31, 54, 101, 0.05);
    color: var(--primary-color);
    padding: 8px;
    border-bottom: none;
    font-size: 12px;
    vertical-align: middle;
    font-size: 85% !important;
    font-weight: 600 !important;
  }

  .value-chain-edit-header-btn,.weekly-customer-journey-dashboard-tbl{
    cursor: pointer;
  }

  .weekly-customer-journey-dashboard-page table .bin {
    padding: 5px 10px;
    background: rgba(255, 93, 93, 1);
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
  }

  .weekly-customer-journey-dashboard-page .add_row, .reload_rows {
    padding: 5px 10px;
    background: #4ac186;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
  }

  .weekly-customer-journey-dashboard-page .add_row, .reload_rows {
    padding: 5px 10px;
    background: #4ac186;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
  }

  .weekly-customer-journey-dashboard-page .reload_rows{
    background-color: #ffc107;
  }

  .weekly-customer-journey-dashboard-page .bin {
    background: #4ac186;
  }


.weekly-customer-journey-dashboard-page .back-btn,
.weekly-customer-journey-dashboard-page .edit-btn,
.weekly-customer-journey-dashboard-page .reload-btn,
.weekly-customer-journey-dashboard-page .download-btn,
.weekly-customer-journey-dashboard-page .delete-btn {
padding: 10px 30px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.weekly-customer-journey-dashboard-page .delete-btn {
  background: #dc3545;
  color: #fff;
}

.weekly-customer-journey-dashboard-page .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.weekly-customer-journey-dashboard-page .text-primary-color {
  color: var(--primary-color);
}



/**** Scorecard Page ****/ 

.scorecard-page  .content-box {
  padding: 20px;
  background: #fff;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
  margin-bottom: 20px;
}

.scorecard-page  .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.scorecard-page  .content-box h2 {
  font-weight: 600;
}

.scorecard-page  .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.scorecard-page  .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.scorecard-page .header-above-box {
  padding: 20px 20px;
  background: rgba(31, 54, 101, 0.06);
  align-items: center;
  border-radius: 4px 4px 0px 0px;
  text-decoration: none;
}

.scorecard-page .main-content .page-header {
border-radius: 0px;
}

.scorecard-page .header-above-box .edit-item-btn.save-item {
background: var(--green-color);
color: #fff;
}

.scorecard-page .header-above-box .edit-item-btn.save-item:hover {
background: var(--green-color-hover);
color: #fff;
}


.scorecard-page .header-above-box .actions {
display: inline-block;
margin-left: auto;
}

.scorecard-page .header-above-box .edit-item-btn {
border-radius: 4px;
background: #000;
padding: 10px 20px;
display: inline-block;
cursor: pointer;
font-size: 14px;
color: #fff;
}

.scorecard-page .title h2 {
  font-weight: 700;
  font-size: 40px;
  margin-bottom: 2px;
}

.scorecard-page .header-above-box h5 {
font-size: 20px;
color: var(--primary-color);
font-weight: 700;
margin-bottom: 0px;
}

.scorecard-page  .header-above-box p {
font-size: 14px;
color: var(--primary-color);
font-weight: 400;
margin-bottom: 0px;
opacity: 0.6;
}

.scorecard-page .small-form-label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: 0.8;
}

.scorecard-page .small-form-label-text {
  font-size: 13px !important;
  font-weight: 400;
  margin-bottom: 10px !important;
  opacity: 0.6;
}



.scorecard-page .title p {
  color: var(--primary-color);
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 400;
  opacity: 0.6;
}

.scorecard-page .btn-submit-form {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: none;
}

.scorecard-page .jumbotron {
border-radius: 0.3rem;
}

.scorecard-page .input-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
text-transform: capitalize;
color: var(--primary-color);
}



.scorecard-page .input-description {
font-size: 13px;
font-weight: 400;
margin-bottom: 8px;
opacity: 0.7;
color: var(--primary-color);
}

.scorecard-page .right-buttons {
display: flex;
gap: 10px; /* Space between the buttons */
}

.scorecard-page .button-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0px;
}


.scorecard-page .save-btn,
.scorecard-page .reload-btn,
.scorecard-page .download-btn,
.scorecard-page .delete-btn {
padding: 10px 30px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
font-size: 18px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.scorecard-page .save-btn {
background: #4ac186;
color: #fff;
}

.scorecard-page .delete-responsibility-btn{
  background: #dc3545;
  border: 1px solid #dc3545;
}

.scorecard-page .download-btn {
  padding: 10px 30px;
  background: rgba(31, 54, 101, 0.1);
  display: inline-block;
  border-radius: 4px 4px 0px 0px;
  font-size: 12px;
  color: #1F3665;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}



.scorecard-page th {
background: rgba(31, 54, 101, 0.05);
color: var(--primary-color);
padding: 12px;
border-bottom: none;
font-size: 12px;
vertical-align: middle;
}

.scorecard-page .alert {
background-color: #fffafa;
}

.scorecard-page .alert-text {
font-size: 0.9rem;
}

.scorecard-responsibility .title {
font-size: 1.2rem;
}

.scorecard-page .actions {
display: inline-flex;
}

.scorecard-page .actions .edit {
background: var(--secondary-color);
}

.scorecard-page .actions .bin {
background: var(--bs-danger);
}

.scorecard-page .navigation-title {
font-size: 14px;
opacity: 0.6;
font-weight: 500;
margin-bottom: 0px;
}

.scorecard-page .card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: rgba(31, 54, 101, 0.05);
background-clip: border-box;
border: none;
border-radius: .25rem;
}

.scorecard-page .icon-btn {
padding: 4px 8px;
background: var(--primary-color);
border-radius: 4px;
display: inline-block;
color: #fff;
font-size: 14px;
cursor: pointer;
}


/**** Strategic Planning Page ****/ 

.strategic-planning-page  .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.strategic-planning-page .content-box h2 {
  font-weight: 600;
}

.strategic-planning-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.strategic-planning-page .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.strategic-planning-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.strategic-planning-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.strategic-planning-page .tab-navigation .tab-item:hover {
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
}

.strategic-planning-page .tab-navigation .tab-item.active {
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
}

.strategic-planning-page .header-above-box {
  padding: 15px 20px;
  background: rgba(31, 54, 101, 0.06);
  display: flex;
  align-items: center;
  border-radius: 4px 4px 0px 0px;
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.strategic-planning-page .add {
  background: var(--green-color);
  color: #fff;
  padding: 15px 20px;
  border: 1px solid var(--green-color);
  border-radius: 4px;
  font-size: 14px;
}

.strategic-planning-page .content-box {
  padding: 20px;
  background: #fff;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .02);
  margin-bottom: 20px;
}

.strategic-planning-page .content-box h5 {
  font-size: 16px;
  font-weight: 600;
}

.strategic-planning-page .h-100 {
  height: 100px !important;
}

.strategic-planning-page .title .small-title {
  color: var(--primary-color);
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 400;
  opacity: 0.5;
}

.strategic-planning-page td p.title {
  color: #212529;
  font-weight: 600;
  margin-bottom: 5px;
  opacity: 1;
}

.tools-content-block {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
  flex: 1 1 auto;
  padding: 1rem 1rem;
}

.strategic-planning-page .tools-content-block.dotted {
  border: 1px dotted rgba(0, 0, 0, .125);
}

.strategic-planning-page .design-table .dataTables_empty {
  background: rgb(153 153 153 / 7%) !important;
}


form .form-check-label{
  font-size: 14px;
  letter-spacing: 0.3px;
}

.strategic-planning-page .input-group-text {
  background-color: #f7f7f7;
  font-size: 0.8rem;
}

.strategic-planning-page .card-header {
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.strategic-planning-page .quarterly {
  margin: 2px;
}

.strategic-planning-page .quarterly .card {
  border-radius: 0;
}

.strategic-planning-page .actions {
  display: inline-flex;
}

.move-up-button, .move-down-button {
  padding: 5px 10px;
  background: rgba(31, 54, 101, 0.1);
  display: inline-block;
  border-radius: 4px;
  margin-right: 5px;
  cursor: pointer;
}

.strategic-planning-page table .bin,
.strategic-planning-page table .edit
 {
  padding: 3px 9px;
  background: rgba(255, 93, 93, 1);
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  }

.strategic-planning-page table .bin,
.strategic-planning-page table .edit
{
background: rgba(255, 93, 93, 1);
}
  
.strategic-planning-page table .edit {
background: var(--secondary-color);
}

.strategic-planning-page .delete-monthly-minor {
  padding: .075rem .35rem;
  font-size: 1.11rem;
  background-color: #ff5d5d;
  border-color: #ff5d5d;
}
  
.strategic-planning-page .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.strategic-planning-page .back-btn,
.strategic-planning-page .delete-btn {
padding: 10px 30px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.strategic-planning-page  .delete-btn {
  background: #dc3545;
  color: #fff;
}

.strategic-planning-page .icon-btn-primary {
  background: var(--primary-color);
  color: #fff;
}

.delete-strategy-planning-minor {
  color: #ff5d5d !important;
}

/**** Ethical Growth Calculator Page ****/ 

.ethical-growth-calculator-page .content-box
{
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.ethical-growth-calculator-page .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.ethical-growth-calculator-page .content-box h2 {
  font-weight: 600;
}

.ethical-growth-calculator-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.ethical-growth-calculator-page .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.ethical-growth-calculator-page .main-btn-primary {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}


.ethical-growth-calculator-page .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.ethical-growth-calculator-page .right-buttons {
  display: flex;
  gap: 10px; /* Space between the buttons */
}

.ethical-growth-calculator-page .back-btn,
.ethical-growth-calculator-page .reload-btn {
padding: 10px 30px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.ethical-growth-calculator-page .invalid-input {
  border: 2px solid red;
  outline: none;
}

.ethical-growth-calculator-page table th:first-child {
  width: 800px;
}

.ethical-growth-calculator-page table td span.title {
  font-weight: bold;
  color: #1f3665;
}

.ethical-growth-calculator-page table td input {
  text-align: center;
}

.ethical-growth-calculator-page table td {
  padding: 10px;
}

.ethical-growth-calculator-page table .user-input-td {
  background-color: #fdf7bb;
}

.ethical-growth-calculator-page table .readonly-td {
  background-color: #fbfbfb !important;
  font-weight: bold;
  color: #1e3464;
}

.ethical-growth-calculator-page table td {
  border: 1px solid #e4e6ea;
}

.ethical-growth-calculator-page table td.total_revenue {
  border-top: 2px solid #000; /* Top border */
  border-bottom: 3px solid #000; /* Bottom border */
}

.ethical-growth-calculator-page table td.patients_continuing {
  background-color: #f7f7f7 !important;
}

.ethical-growth-calculator-page .text-right {
  text-align: right;
}

.ethical-growth-calculator-page .text-left {
  text-align: left;
}

.ethical-growth-calculator-page table td.bg-white {
  background-color: #fff !important;
}

/**** Financial Tracker Page ****/ 

.financial-tracker-page table .sub-heading {
  background-color: #e4e6ea !important;
  padding: 14px !important;
}

.financial-tracker-page  .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.financial-tracker-page .content-box h2 {
  font-weight: 600;
}

.financial-tracker-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.financial-tracker-page .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.financial-tracker-page  .main-btn-primary {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.financial-tracker-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.financial-tracker-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.financial-tracker-page .tab-navigation .tab-item:hover {
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
}

.financial-tracker-page .tab-navigation .tab-item.active {
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
}

.financial-tracker-page .header-above-box {
  padding: 20px 20px;
  background: rgba(31, 54, 101, 0.06);
  align-items: center;
  border-radius: 4px 4px 0px 0px;
  text-decoration: none;
}

.financial-tracker-page .header-above-box h5 {
font-size: 20px;
color: var(--primary-color);
font-weight: 700;
margin-bottom: 0px;
}

.financial-tracker-page .header-above-box h6 {
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0px;
  }

.financial-tracker-page .header-above-box p {
font-size: 14px;
color: var(--primary-color);
font-weight: 400;
margin-bottom: 0px;
opacity: 0.6;
}

.financial-tracker-page .add {
  background: var(--green-color);
  color: #fff;
  padding: 15px 20px;
  border: 1px solid var(--green-color);
  border-radius: 4px;
  font-size: 14px;
}

.financial-tracker-page table.monthly-financial-datatable {
  table-layout: fixed;
}

.monthly-financial-datatable td {
  background-color: #fbfbfb;
}


/* Fix the first column */
.financial-tracker-page table.monthly-financial-datatable th:first-child,
.financial-tracker-page table.monthly-financial-datatable td:first-child {
    position: sticky;
    left: 0;
    z-index: 2; /* Ensure it stays on top */
    background-color: #fff;
}

.monthly-financial-datatable th {
  padding: 14px;
  font-size: 14px;
}

.financial-tracker-page .design-table th:first-child {
    background-color: #e4e6ea !important;  
}

.financial-tracker-page table.monthly-financial-datatable th {
  width: 130px;
}

.financial-tracker-page table.monthly-financial-datatable th:first-child {
  width: 300px;
}

/* .financial-tracker-page table.monthly-financial-datatable td {
  border: 1px solid #e4e6ea;
} */

.monthly-financial-datatable .user-input-td,
.financial-tracker-page .allow-user-input {
  cursor: pointer;
  background-color: #fdf7bb;
}

.financial-tracker-page .invalid-input {
  border: 2px solid red;
  outline: none;
}

.financial-tracker-page .user-input-td {
  background-color: #fdf7bb;
}

.monthly-financial-datatable .readonly-td {
  background-color: #fbfbfb;
  font-weight: bold;
  color: #1e3464;
}

.monthly-financial-datatable td.disabled {
  background-color: #e9ecef;
  cursor: default;
}



.financial-tracker-page.data {
  overflow-x: hidden; /* Hides horizontal scrollbar */
}

.financial-tracker-page .design-table .quarterly-financial-datatable thead tr:last-child th:first-child {
  background-color: #ebecee !important;  
}

.design-table .quarterly-financial-datatable  th {
  border-left: 1px solid #ddd; /* Add a left border */
  border-right: 1px solid #ddd; /* Add a right border */
}

.design-table .quarterly-financial-datatable  th:first-child {
  border-radius: 0px 0px 0px 0px !important;
}

.design-table .quarterly-financial-datatable  th:last-child {
  border-radius: 0px 0px 0px 0px !important;
}

.quarterly-financial-datatable .bg-light-gray {
  background-color: #4bbe8826;
}

.quarterly-financial-datatable span.title,
.monthly-financial-datatable span.title {
  font-weight: bold;
  color: #1f3665;
}

.quarterly-financial-datatable span.subtitle {
  font-weight: normal !important;
  color: #6d6d6d;
}

.financial-tracker-page table.quarterly-financial-datatable {
  table-layout: fixed;
}

.quarterly-financial-datatable th.year {
  font-size: 17px;
}

.quarterly-financial-datatable td {
  background-color: #fbfbfc;
}

/* Fix the first column */
.financial-tracker-page table.quarterly-financial-datatable th:first-child,
.financial-tracker-page table.quarterly-financial-datatable td:first-child {
    position: sticky;
    left: 0;
    z-index: 2; /* Ensure it stays on top */
    background-color: #fff;
}

.quarterly-financial-datatable th {
  padding: 14px;
  font-size: 14px;
}

.financial-tracker-page .design-table .monthly-financial-datatable th:first-child {
    background-color: #e4e6ea !important;  
}

.financial-tracker-page table.quarterly-financial-datatable th:first-child {
  background-color: #ebecee !important;  
  width: 300px;
}

.financial-tracker-page table.quarterly-financial-datatable th {
  background-color: #ebecee !important;  
  width: 300px;
}

/* .financial-tracker-page table.quarterly-financial-datatable td {
  border: 1px solid #e4e6ea;
} */

.quarterly-financial-datatable .readonly-td {
  background-color: #fbfbfb;
  font-weight: bold;
  color: #1e3464;
}

.financial-tracker-page .list-group .active {
  background: #1e3464;
}

.financial-tracker-page .content-box {
  padding: 20px;
  background: #fff;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .02);
  margin-bottom: 20px;
}

.financial-tracker-page .jumbotron {
  background-color: #ecedf073;
  padding: 10px 20px 10px 20px;
  border-radius: 5px;
}

.financial-tracker-page .content-box h5 {
  font-size: 16px;
  font-weight: 600;
}

.financial-tracker-page .title .small-title {
  color: var(--primary-color);
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 400;
  opacity: 0.5;
}


.financial-tracker-page td p.title {
  color: #212529;
  font-weight: 600;
  margin-bottom: 5px;
  opacity: 1;
}

.financial-tracker-page .design-table .dataTables_empty {
  background: rgb(153 153 153 / 7%) !important;
}

.financial-tracker-page .input-group-text {
  background-color: #f7f7f7;
  font-size: 0.8rem;
}

.financial-tracker-page .icon-btn {
  padding: 3px 7px;
  background: var(--primary-color);
  border-radius: 4px;
  display: inline-block;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}

.financial-tracker-page .actions {
  display: inline-flex;
}

.financial-tracker-page table .bin,
.financial-tracker-page table .edit
 {
  padding: 3px 9px;
  background: rgba(255, 93, 93, 1);
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  }

.financial-tracker-page table .bin,
.financial-tracker-page table .edit
{
background: rgba(255, 93, 93, 1);
}
  
.financial-tracker-page table .edit {
background: var(--secondary-color);
}

.financial-tracker-page .delete-monthly-minor {
  padding: .075rem .35rem;
  font-size: 1.11rem;
  background-color: #ff5d5d;
  border-color: #ff5d5d;
}
  
.financial-tracker-page .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.financial-tracker-page .back-btn,
.financial-tracker-page .reload-btn,
.financial-tracker-page .delete-btn {
padding: 10px 30px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.financial-tracker-page  .delete-btn {
  background: #dc3545;
  color: #fff;
}

.financial-tracker-page .icon-btn-primary {
  background: var(--primary-color);
  color: #fff;
}

.delete-strategy-planning-minor {
  color: #ff5d5d !important;
}

.financial-tracker-page .modal .label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: capitalize;
  color: var(--primary-color);
}

/**** Head Physio Dashboard Page ****/

.head-physio-dashboard-page .clinic-days-input {
background-color: #fdf7bb !important;
} 

.head-physio-dashboard-page.data .therapist-move-up-btn, 
.head-physio-dashboard-page.data .therapist-move-down-btn {
    padding: 5px 10px;
    background: rgba(31, 54, 101, 0.1);
    display: inline-block;
    border-radius: 4px;
    margin-right: 5px;
    cursor: pointer;
    color: #000;
}

.head-physio-dashboard-page  .content-box
{
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.head-physio-dashboard-page  .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.head-physio-dashboard-page .content-box h2 {
  font-weight: 600;
}

.head-physio-dashboard-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.head-physio-dashboard-page .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.head-physio-dashboard-page  .main-btn-primary {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.head-physio-dashboard-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.head-physio-dashboard-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.head-physio-dashboard-page .tab-navigation .tab-item:hover {
background: #4ac186;
border: 1px solid #4ac186;
color: #fff;
}

.head-physio-dashboard-page .tab-navigation .tab-item.active {
  background: #4ac186;
  border: 1px solid #4ac186;
  color: #fff;
}

.head-physio-dashboard-page .header-above-box {
  padding: 15px 20px;
  background: rgba(31, 54, 101, 0.06);
  display: flex;
  align-items: center;
  border-radius: 4px 4px 0px 0px;
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.head-physio-dashboard-page .header-above-box h5 {
  font-size: 20px;
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 0px;
}

.head-physio-dashboard-page .header-above-box h6 {
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0px;
  }

.head-physio-dashboard-page .header-above-box p {
  font-size: 14px;
  color: var(--primary-color);
  font-weight: 400;
  margin-bottom: 0px;
  opacity: 0.6;
}

.btn-physio {
  color: #fff;
  background-color: #1f3565;
  border-color: #1f3565;
}

.head-physio-dashboard-page .add {
  background: var(--green-color);
  color: #fff;
  padding: 15px 20px;
  border: 1px solid var(--green-color);
  border-radius: 4px;
  font-size: 14px;
}

.head-physio-dashboard-page .card-header {
  background-color: #1e3464 !important;
  color: #fff !important;
}

.head-physio-dashboard-page.data .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.head-physio-dashboard-page.data .back-btn,
.head-physio-dashboard-page.data .filter-week-btn,
.head-physio-dashboard-page.data .filter-quarter-btn,
.head-physio-dashboard-page.data .download-pdf,
.head-physio-dashboard-page.data .delete-btn {
padding: 10px 19px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.head-physio-dashboard-page.data .delete-btn {
  background: #dc3545;
  color: #fff;
}

.head-physio-dashboard-page.data .download-pdf {
  background: #4ac186;
  color: #fff;
}

.head-physio-dashboard-page.data .text-primary-color {
  color: var(--primary-color);
}

.head-physio-dashboard-page.data .filter {
  background: rgb(255, 233, 31);
  color: var(--primary-color);
}

.head-physio-dashboard-page.data table tr td i{
  padding: 3px 9px;
  background: rgba(255, 93, 93, 1);
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}

.head-physio-dashboard-page.data table tr td i.edit-therapist{
  background: var(--green-color);
}
.head-physio-dashboard-page.data table tr td i.edit-therapist-active-dates{
  background: #f3db00;
}
.head-physio-dashboard-page.data table tr td i.delete-therapist{
  background: rgba(255, 93, 93, 1);
}

.head-physio-dashboard-page.data th {
  background: rgba(31, 54, 101, 0.05);
  color: var(--primary-color);
  padding: 12px;
  border-bottom: none;
  font-size: 13px;
  vertical-align: middle;
}

.head-physio-dashboard-page.data .week-datatable {
  table-layout: fixed;
}

/* Fix the first column */
.head-physio-dashboard-page.data .week-datatable td:first-child,
.head-physio-dashboard-page.data .week-datatable th:first-child {
    position: sticky;
    left: 0;
    z-index: 2; /* Ensure it stays on top */
    background-color: #fff;
}

.head-physio-dashboard-page.data .primary-datatable th{
  width: 130px;
  background-color: #1f3565;
  border-color: #1f3565 !important;
  color: #fff !important;
}

.head-physio-dashboard-page.data .week-datatable th:first-child {
  width: 210px;
  background-color: #152b5b;
}

.head-physio-dashboard-page.data .card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px dotted #d0d0d0;
  border-radius: .25rem;
}

.head-physio-dashboard-page.data .week-details {
  font-size: 13px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.head-physio-dashboard-page.data .user-input-td {
  background-color: #fdf7bb !important;
}

.head-physio-dashboard-page.data .week-datatable span.title {
  font-weight: bold;
  color: #1f3665;
}

.head-physio-dashboard-page.data .week-datatable .readonly-td {
  background-color: #fbfbfb;
  font-weight: bold;
  color: #1e3464;
}

.head-physio-dashboard-page.data .week-datatable tr:last-child, .total-row{
  background-color: #1f3565 !important;
  color: #fff !important;
}

.head-physio-dashboard-page.data .week-datatable .clinic-total{
  background-color: #152b5b !important;
}

.head-physio-dashboard-page.data .week-datatable tr:last-child{
  font-weight: bold;
}

.head-physio-dashboard-page.data .table-edit-input {
  display: none;
}

.head-physio-dashboard-page.data .table-edit-input {
  text-align: center;
}

.head-physio-dashboard-page.data tbody tr td:first-child {
  text-align: left !important;
}

.head-physio-dashboard-page.data .user-input-td, .head-physio-dashboard-page.data .readonly-td, .therapist-td {
  border: 1px solid #dfdfdf;
}

.head-physio-dashboard-page.data .design-table .report-datatable th:first-child,
.head-physio-dashboard-page.data .design-table .report-datatable th:last-child {
  border-radius: 0px 0px 0px 0px;
}

.head-physio-dashboard-page.data .bg--primary {
  background-color: var(--primary-color) !important;
  color: #fff;
}

.head-physio-dashboard-page.data  .bg--yellow {
  background-color: #ffe91f !important; 
  color: var(--primary-color) !important;
}

/**** Head Admin Dashboard Page ****/ 

.head-admin-dashboard-page  .content-box
{
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.head-admin-dashboard-page  .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.head-admin-dashboard-page .content-box h2 {
  font-weight: 600;
}

.head-admin-dashboard-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

.head-admin-dashboard-page .main-btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.head-admin-dashboard-page  .main-btn-primary {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.head-admin-dashboard-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.head-admin-dashboard-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.head-admin-dashboard-page .tab-navigation .tab-item:hover {
background: #4ac186;
border: 1px solid #4ac186;
color: #fff;
}

.head-admin-dashboard-page .tab-navigation .tab-item.active {
  background: #4ac186;
  border: 1px solid #4ac186;
  color: #fff;
}

.head-admin-dashboard-page .header-above-box {
  padding: 15px 20px;
  background: rgba(31, 54, 101, 0.06);
  display: flex;
  align-items: center;
  border-radius: 4px 4px 0px 0px;
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.head-admin-dashboard-page .header-above-box h5 {
  font-size: 20px;
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 0px;
}

.head-admin-dashboard-page .header-above-box h6 {
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0px;
  }

.head-admin-dashboard-page .header-above-box p {
  font-size: 14px;
  color: var(--primary-color);
  font-weight: 400;
  margin-bottom: 0px;
  opacity: 0.6;
}

.head-admin-dashboard-page .btn-physio {
  color: #fff;
  background-color: #1f3565;
  border-color: #1f3565;
}

.head-admin-dashboard-page .add {
  background: var(--green-color);
  color: #fff;
  padding: 15px 20px;
  border: 1px solid var(--green-color);
  border-radius: 4px;
  font-size: 14px;
}

.head-admin-dashboard-page .card-header {
  background-color: #1e3464 !important;
  color: #fff !important;
}

.head-admin-dashboard-page.data .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.head-admin-dashboard-page.data .staff-move-up-btn, 
.head-admin-dashboard-page.data .staff-move-down-btn {
    padding: 5px 10px;
    background: rgba(31, 54, 101, 0.1);
    display: inline-block;
    border-radius: 4px;
    margin-right: 5px;
    cursor: pointer;
    color: #000;
}

.head-admin-dashboard-page.data .back-btn,
.head-admin-dashboard-page.data .filter-week-btn,
.head-admin-dashboard-page.data .filter-quarter-btn,
.head-admin-dashboard-page.data .download-pdf,
.head-admin-dashboard-page.data .delete-btn {
padding: 10px 19px;
background: rgba(31, 54, 101, 0.1);
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #1F3665;
font-weight: 500;
cursor: pointer;
text-decoration: none; 
}

.head-admin-dashboard-page.data .delete-btn {
  background: #dc3545;
  color: #fff;
}

.head-admin-dashboard-page.data .download-pdf {
  background: #4ac186;
  color: #fff;
}

.head-admin-dashboard-page.data .text-primary-color {
  color: var(--primary-color);
}

.head-admin-dashboard-page.data .filter {
  background: rgb(255, 233, 31);
  color: var(--primary-color);
}

.head-admin-dashboard-page.data table tr td i{
  padding: 3px 9px;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}

.head-admin-dashboard-page.data table tr td i.edit-staff{
  background: var(--green-color);
}
.head-admin-dashboard-page.data table tr td i.edit-staff-active-dates{
  background: #f3db00;
}

.head-admin-dashboard-page.data th {
  background: rgba(31, 54, 101, 0.05);
  color: var(--primary-color);
  padding: 12px;
  border-bottom: none;
  font-size: 13px;
  vertical-align: middle;
}

.head-admin-dashboard-page.data .week-datatable {
  table-layout: fixed;
}

/* Fix the first column */
.head-admin-dashboard-page.data .week-datatable td:first-child,
.head-admin-dashboard-page.data .week-datatable th:first-child {
    position: sticky;
    left: 0;
    z-index: 2; /* Ensure it stays on top */
    background-color: #fff;
}

.head-admin-dashboard-page.data .primary-datatable th{
  width: 130px;
  background-color: #1f3565;
  border-color: #1f3565 !important;
  color: #fff !important;
}

.head-admin-dashboard-page.data .week-datatable th:first-child {
  width: 210px;
  background-color: #152b5b;
}

.head-admin-dashboard-page.data .card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px dotted #d0d0d0;
  border-radius: .25rem;
}

.head-admin-dashboard-page.data .week-details {
  font-size: 13px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.head-admin-dashboard-page.data .user-input-td {
  background-color: #fdf7bb !important;
}

.head-admin-dashboard-page.data .week-datatable span.title {
  font-weight: bold;
  color: #1f3665;
}

.head-admin-dashboard-page.data .week-datatable .readonly-td {
  background-color: #fbfbfb;
  font-weight: bold;
  color: #1e3464;
}

.head-admin-dashboard-page.data .week-datatable tr:last-child, .total-row{
  background-color: #1f3565 !important;
  color: #fff !important;
}

.head-admin-dashboard-page.data .week-datatable .clinic-total{
  background-color: #152b5b !important;
}

.head-admin-dashboard-page.data .week-datatable tr:last-child{
  font-weight: bold;
}

.head-admin-dashboard-page.data .table-edit-input {
  display: none;
}

.head-admin-dashboard-page.data .table-edit-input {
  text-align: center;
}

.head-admin-dashboard-page.data tbody tr td:first-child {
  text-align: left !important;
}

.head-admin-dashboard-page.data .user-input-td, 
.head-admin-dashboard-page.data .readonly-td, 
.head-admin-dashboard-page.data .therapist-td {
  border: 1px solid #dfdfdf;
}

.head-admin-dashboard-page.data .design-table .report-datatable th:first-child,
.head-admin-dashboard-page.data .design-table .report-datatable th:last-child {
  border-radius: 0px 0px 0px 0px;
}

.head-admin-dashboard-page.data .bg--primary {
  background-color: var(--primary-color) !important;
  color: #fff;
}

.head-admin-dashboard-page.data  .bg--yellow {
  background-color: #ffe91f !important; 
  color: var(--primary-color) !important;
}

.head-admin-dashboard-page.data  .form-check {
  font-size: 17px;
}


/* Tools General Style  */

.tools-bg-primary {
  background-color: var(--primary-color) !important;
}

.tools-bg-yellow {
  background-color: #ffe91f !important;
}

.tools-btn-warning {
  color: #fff;
  background-color: #f3db00;
  border-color: #f3db00;
}

.tools-btn-danger {
  color: #fff;
  background-color: rgba(255, 93, 93, 1);
  border-color: rgba(255, 93, 93, 1);
}

.tools-btn-primary {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}


/**** 3 Year Had ****/

.tools-page .navigation-title {
font-size: 14px;
opacity: 0.6;
font-weight: 500;
margin-bottom: 0px;
}

.tools-page .header-above-box {
padding: 20px 20px;
background: rgba(31, 54, 101, 0.06);
align-items: center;
border-radius: 4px 4px 0px 0px;
text-decoration: none;
}

.tools-page .header-above-box h5 {
font-size: 18px;
color: var(--primary-color);
font-weight: 600;
margin-bottom: 0px;
}

.tools-page .header-above-box p {
font-size: 14px;
color: var(--primary-color);
font-weight: 400;
margin-bottom: 0px;
opacity: 0.6;
}

.tools-page .content-box {
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.tools-page .content-box h2 {
font-weight: 600;
}

.tools-page .content-box h5 {
font-size: 16px;
font-weight: 600;
}

.tools-page .content-box p {
font-size: 14px;
font-weight: 400;
}

.tools-page .main-btn-primary {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.tools-page .main-btn {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.tools-page .main-btn:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
}

.tools-page .main-btn-primary-outline {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: rgba(31, 54, 101, 1);
background: rgba(31, 54, 101, 0.02);
border: 1px solid rgba(31, 54, 101, 1);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

.tools-page .main-btn-primary-outline:hover {
background: rgba(31, 54, 101, 1);
border: 1px solid rgba(31, 54, 101, 1);
color: #fff;
}

.tools-page .video-modal .modal-content {
border-radius: 8px;
background: none;
border: 0px solid #fff;
padding: 0px;
}

.tools-page .video-modal .filter-footer-buttons {
margin-top: 20px;
}

.tools-page .video-modal .modal-content .title-section h5 {
color: #fff;
text-align: center;
margin-bottom: 5px;
font-size: 18px;
font-weight: 700;
}

.tools-page .video-modal .modal-content .title-section p.subtitle {
color: #fff;
text-align: center;
margin-bottom: 15px;
font-size: 12px;
font-weight: 400;
opacity: 0.6;
}

.tools-page .video-modal .modal-content .select-label {
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}

.tools-page .video-modal .modal-content p.subtitle {
font-size: 14px;
opacity: 0.6;
margin-bottom: 10px;
}

.tools-page .video-modal .modal-header {
border-bottom: 0px solid #fff;
text-align: center;
display: block;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
color: #fff;
padding: 20px;
margin-bottom: 0px;
border-radius: 0px;
}

.tools-page .video-modal .modal-header p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 200;
opacity: 0.7;
}

.tools-page .video-modal .modal-body {
background: #fff;
color: var(--primary-color);
padding: 8px;
border-radius: 8px;
}

.tools-page .video-modal .modal-title {
margin-bottom: 0;
line-height: 1.5;
font-weight: 700;
font-size: 22px;
}

.tools-page .video-modal .modal-footer {
border-top: 0px solid #fff;
background: rgba(242, 242, 242, 1);
text-align: center;
display: block;
}

.tools-page .video-modal .close-modal-header {
position: absolute;
top: 0px;
right: 0px;
color: #fff;
background: rgba(255, 255, 255, 0.11);
padding: 8px 12px;
border-radius: 100px;
cursor: pointer;
}

.tools-page .video-modal .close-modal-header:hover {
background: #f53e3e;
color: #fff;
}

.tools-page .video-modal .btn-close-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: #f53e3e;
border: 1px solid #fff;
border-radius: 4px;
display: inline-block;
}

.tools-page .video-modal .btn-close-modal:hover {
font-weight: 500;
background: #b51b1b;
}

.tools-page .video-modal .btn-success-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: inline-block;
}

.tools-page .video-modal .btn-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
background: #fff;
border: 1px solid #fff;
border-radius: 4px;
display: inline-block;
}

.tools-page .video-modal .btn-modal:hover {
font-weight: 600;
background: var(--primary-color);
color: #fff;
}

.tools-page .video-modalhr {
color: rgb(219, 219, 219);
height: 2px!important;
}

.tools-page .video-modal .embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; overflow: hidden; 
  max-width: 100%; 
} 

.tools-page .video-modal .embed-container iframe, 
.tools-page .video-modal .embed-container object, 
.tools-page .video-modal .embed-container embed { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
}


.tools-page .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: 8px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border: 0px solid transparent; }
.tools-page .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.tools-page .small-form-label {
font-weight: 500;
margin-bottom: 4px;
opacity: 0.7;
font-size: 14px;
}

.tools-page .small-form-label-text {
font-weight: 400;
margin-bottom: 10px!important;
opacity: 0.5;
font-size: 12px!important;
}

.tools-page .action-steps-block {
padding: 15px;
background: rgba(221, 53, 69, 0.06);
border-radius: 4px;
}

.tools-page .numbers-analysis-block {
padding: 15px;
background: rgba(185, 172, 0, 0.3);
border-radius: 4px;
}

.tools-page .numbers-analysis-block .header h6 {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}

.tools-page .numbers-analysis-block .header p {
font-size: 12px;
font-weight: 400;
margin-bottom: 0px;
}

.tools-page .numbers-analysis-block .header .check-gold-standard {
padding: 6px 12px;
background: rgba(185, 172, 0, 0.3);
border-radius: 4px;
cursor: pointer;
font-size: 28px;
}

.tools-page .numbers-analysis-block .analysis {
margin-top: 10px;
display: none;
}

.tools-page .numbers-analysis-block .analysis p {
font-size: 14px;
font-weight: 400;
margin-bottom: 4px;
vertical-align: middle;
}

.tools-page .bg-gold {
background: rgba(185, 172, 0, 0.5);
}

.tools-page .numbers-analysis-block .analysis b {
font-weight: 500;
vertical-align: middle;
}

.tools-page .numbers-analysis-block .review {
background: rgba(185, 172, 0, 0.1);
padding: 15px;
border-radius: 4px;
}

.tools-page .content-box hr {
height: 2px!important;
color: rgba(31, 54, 101, 0.15);
}

.tools-page .button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}

.tools-page .back-btn,
.tools-page .edit-btn,
.tools-page .reload-btn,
.tools-page .download-btn,
.tools-page .tools-info-btn,
.tools-page .delete-btn {
    padding: 10px 30px;
    background: rgba(31, 54, 101, 0.1);
    display: inline-block;
    border-radius: 4px 4px 0px 0px;
    font-size: 12px;
    color: #1F3665;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; 
}

.tools-page .delete-btn {
background: #dc3545;
color: #fff;
}

.tools-page .tools-info-btn {
background: var(--primary-color); 
color: #fff;
}

.tools-page .edit-btn {
background: rgba(74, 193, 134, 0.15);
color: #1d6a44;
}

.tools-page .back-btn {
background: rgba(31, 54, 101, 0.1);
color: #1F3665;
}

.tools-page .btn-delete {
  padding: 3px 9px;
  background: #dc3545;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}


.tools-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.tools-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.tools-page .tab-navigation .tab-item:hover {
background: #4ac186;
border: 1px solid #4ac186;
color: #fff;
}

.tools-page .tab-navigation .tab-item.active {
  background: #4ac186;
  border: 1px solid #4ac186;
  color: #fff;
}

.tools-page .card-header-primary {
  background-color: #1e3464 !important;
  color: #fff !important;
}

.tools-page .fixed-content {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}


.tools-page  .border-top {
border-top: 2px solid black !important; /* Adjust thickness and color as needed */
}
.tools-page  .border-bottom {
border-bottom: 2px solid black !important; /* Adjust thickness and color as needed */
}
.tools-page .border-left {
border-left: 2px solid black !important; /* Adjust thickness and color as needed */
}
.tools-page .border-right {
border-right: 2px solid black !important; /* Adjust thickness and color as needed */
}

.tools-page .main-btn-yellow {
padding: 15px 30px;
font-size: 14px;
font-weight: 500;
color: #000;
background: rgb(255, 233, 31);
border: 1px solid rgb(255, 233, 31);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

/**** Monthly KPI's Compare Page ****/

.monthly-kpis-compare-page #reportDropdown {
position: absolute;
top: 100%;
left: 0px;
border-radius: 4px;
border: 1px solid rgb(204, 204, 204);
margin-top: 2px;
max-height: 150px;
overflow-y: auto;
font-size: 12px;
width: 100%;
z-index: 1000;
display: none;
}

.monthly-kpis-compare-page #reportDropdown .report-item {
padding: 15px;
background-color: #fff;
cursor: pointer;
}

.monthly-kpis-compare-page #reportDropdown .report-item:hover {
background-color: #f0f0f0;
}

.monthly-kpis-compare-page #selectedReportList {
display: flex;
flex-wrap: wrap;
}

.monthly-kpis-compare-page .selectedReportList {
padding: 15px 15px 10px;
background: rgba(31, 54, 101, 0.05);
border-radius: 4px;
display: none;
}

.monthly-kpis-compare-page .selectedReportList .remove-report {
cursor: pointer;
color: red;
margin-left: 10px;
}

.monthly-kpis-compare-page .selectedReportList .header {
display: block;
width: 100%;
margin-bottom: 5px;
font-size: 16px;
font-weight: 600;
color: #1F3665;
}

.monthly-kpis-compare-page .selectedReportList p {
font-size: 12px!important;
margin-bottom: 0px;
opacity: 0.6;
}

.monthly-kpis-compare-page .chosen-report-item {
padding: 10px 20px;
background: #fff;
border: 1px solid #e3e4e7;
border-radius: 4px;
font-size: 12px;
margin-right: 10px;
margin-bottom: 5px;
}



.monthly-kpis-compare-page .selectedReportList .report-item:last-child {
    margin-right: 0;
}

.monthly-kpis-compare-page #reportDropdown .report-item.none-found {
padding: 15px;
background-color: rgba(255, 245, 246, 1);
cursor: default;
}

.monthly-kpis-compare-page #kpis-bar-chart {
    height: 100% !important; /* Override any default height */
    width: 100% !important;  /* Override any default width */
}

.monthly-kpis-compare-page .search-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--primary-color);
  padding: 0;
  font-size: 24px;
  cursor: default;
}

.htl-content-image {
width: 100%;
aspect-ratio: 4 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
background-position: center;
position: relative;
overflow: hidden;
}

/**** Budget Tool ****/
.budget-page.data .list-group .active {
  color: #ffffff !important;
  background-color: #1e3464;
  border-color: #1e3464 #1e3464 #fff;
}

.budget-page.data .gut-out-functional-ul.dropdown-menu {
  width: 100% !important; /* Forces full width */
  min-width: 200px !important; /* Ensures it does not shrink */
}

.budget-page.data #step_2 td input.money-format {
  width: 150px !important;
}

.budget-page.data .design-table .small-tbl th{
  font-size: 13px !important; 
}

.budget-page.data .design-table .small-tbl td{
  font-size: 13px !important; 
  padding: 10px 20px;
}

.budget-page.data .border {
  border: 2px solid black !important; /* Adjust thickness and color as needed */
}
.budget-page.data .border-top {
  border-top: 2px solid black !important; /* Adjust thickness and color as needed */
}
.budget-page.data .border-bottom {
  border-bottom: 2px solid black !important; /* Adjust thickness and color as needed */
}
.budget-page.data .border-left {
  border-left: 2px solid black !important; /* Adjust thickness and color as needed */
}
.budget-page.data .border-right {
  border-right: 2px solid black !important; /* Adjust thickness and color as needed */
}

.budget-page.data .list-group button {
  font-size: 14px;
}

.budget-page.data .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #1e3463;
  font-weight: bold;
}
.budget-page.data .nav-link {
  color: #41557d;
}
.budget-page.data .projection-tbl{
  width: 1500px !important;
}

.budget-page.data .gut-out-functional-tbl .edit-description{
  width: 300px !important;
}


.budget-page.data .content-box.chat-box {
  min-height: 300px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0px;
  border-radius: 4px 4px 0px 0px !important;
  display: flex;
  flex-direction: column-reverse;
}

.budget-page.data .content-box.chat-box .chat-messages {
  padding-left: 0;
  list-style: none;
  display: grid;
  padding: 30px 0px 0px;
}

.budget-page.data .content-box.chat-box .chat-messages .no-messages {
  font-size: 14px;
  opacity: 0.6;
  color: rgba(255, 93, 93, 0.8);
}

.budget-page.data .content-box.chat-box .chat-messages .left-message {
float: left;
max-width: 80%;
display: inline-block;
position: relative;
}

.budget-page.data .content-box.chat-box .chat-messages .left-message .bubble {
    background: #f6f6f6;
    color: #333;
    font-size: 12px;
    padding: 15px 15px;
    border-radius: 8px;
    position: relative; 
    margin-bottom: 10px;
}

.budget-page.data .content-box.chat-box .chat-messages .left-message .bubble:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 15px;
    border-width: 10px;
    border-style: solid;
    border-color: #f6f6f6 transparent transparent transparent; 
}


.budget-page.data .content-box.chat-box .chat-messages .left-message .info {
float: left;
}

.budget-page.data .chat-box-footer {
  padding: 15px;
  background: rgba(31, 54, 101, 0.04);
  border-radius: 0px 0px 4px 4px;
}

.budget-page.data .chat-box-footer #charCount {
  font-size: 10px;
  color: var(--primary-color);
  font-weight: 400;
  opacity: 0.6;
}

.budget-page.data .btn-submit-form {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
  border-radius: 4px;
  display: inline-block;
}

.budget-page.data  .btn-outline {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(31, 54, 101, 1);
  background: rgba(31, 54, 101, 0.02);
  border: 1px solid rgba(31, 54, 101, 1);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.budget-page.data .content-box.chat-box .chat-messages .right-message {
  float: right;
  max-width: 80%;
  display: inline-block;
  position: relative;
}

.budget-page.data  .content-box.chat-box .chat-messages .info .name {
  font-size: 10px;
  margin-top: 5px;
  margin-bottom: 0px;
  font-weight: 500;
}

.budget-page.data .content-box.chat-box .chat-messages .info .time {
  font-size: 10px;
  margin-top: 0px;
  opacity: 0.5;
}

.budget-page.data .content-box.chat-box .chat-messages .right-message .info {
  float: right;
  text-align: right;
}

.budget-page.data .content-box.chat-box .chat-messages .right-message .bubble::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 15px;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(115, 214, 255, 0.2) transparent transparent;
}

.budget-page.data .content-box.chat-box .chat-messages .right-message .bubble {
  background: rgba(115, 214, 255, 0.2);
  color: #333;
  font-size: 12px;
  padding: 15px 15px;
  border-radius: 8px;
  position: relative;
  margin-bottom: 10px;
}

/**** Variance Analysis Page ****/
.variance-analysis-page .bg--primary {
  background-color: var(--primary-color) !important;
  color: #fff;
}

.variance-analysis-page.data .week-datatable {
  table-layout: fixed;
}

.variance-analysis-page.data .design-table .report-datatable th:first-child,
.variance-analysis-page.data .design-table .report-datatable th:last-child {
  border-radius: 0px 0px 0px 0px;
}

.variance-analysis-page.data .primary-datatable th{
  width: 130px;
  background-color: #1f3565;
  border-color: #1f3565 !important;
  color: #fff !important;
}

.variance-analysis-page.data .week-datatable th:first-child {
  width: 210px;
  background-color: #152b5b;
}

.variance-analysis-page.data .bg-month-1 {
  background-color: #f0f8ff !important; /* Light blue */
}
.variance-analysis-page.data .bg-month-2 {
background-color: #e6f2e6 !important; /* Light green */
}

.variance-analysis-page.data #variance-analysis-tbl th:first-child,
.variance-analysis-page.data #variance-analysis-tbl td:first-child {
  background-color: #fff;
  width: 300px !important;
}


.variance-analysis-page.data #variance-analysis-tbl {
  width: 4300px !important;
}

.variance-analysis-page.data span.title {
  font-weight: bold;
  color: #1f3665;
}

.variance-analysis-page.data table .sub-heading {
  background-color: #e4e6ea !important;
  padding: 14px !important;
}

/**** Fast Solution Finder Tool ****/
.tools-page.fast-solution-finder-data .title-label {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--primary-color);
}

.tools-page.fast-solution-finder-data .impact-assessment-container {
  background-color: #f0f8ff; 
  border-radius: 10px;
}

.tools-page.fast-solution-finder-data .my-recommendation-container {
  background-color: #e6f2ff; 
  border-radius: 10px;
}

.tools-page.fast-solution-finder-data .impact-assessment-container .design-table tr {
    background: rgb(221 239 255) !important;
}

.tools-page.fast-solution-finder-data 
.impact-assessment-container 
.design-table tr:last-child td:is(:first-child, :last-child) {
    border-radius: 0 !important;
}

.tools-page.fast-solution-finder-data 
.impact-assessment-container 
.design-table tfoot tr td {
    background-color: #d4e6f7 !important;
}


.design-table #solution-finder-table_info {
    font-size: 14px;
    padding-left: 10px;
    opacity: 0.6;
}

/**** Neural Reframe Tool Tool ****/

.design-table #neural-reframe-tools-table_info {
    font-size: 14px;
    padding-left: 10px;
    opacity: 0.6;
}

.neural-reframe-tool-data .title-label {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--primary-color);
}

.neural-reframe-tool-data  .light-gray-container {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 10px;
}

.neural-reframe-tool-data .soft-blue-container {
  background-color: #c7e4f5;
  padding: 20px;
  border-radius: 10px;
}

.neural-reframe-tool-data .soft-green-container {
  background: #d4eddb;
  padding: 14px;
  border: 1.5px solid #269b26b8;
  border-radius: 9px;
}

.neural-reframe-tool-data .yellow-box-label {
    font-weight: 500;
    margin-bottom: 4px;
    font-size: 12px;
    width: 100%;
    background-color: #fff4cd;
    color: #594300;
    padding: 8px;
    border: 1px solid #ebba21;
    border-radius: 5px;
}

.neural-reframe-tool-data .text-success {
  color: #07512c !important;
}


/**** Neural Reframe Tool Tool ****/


/**** Self-Managing Clinic Scorecard Tool ****/

.self-managing-clinic-scorecard-page-data .design-table th:last-child {
    border-radius: 0px 4px 0px 0px !important;
}

.self-managing-clinic-scorecard-page-data .score-box h5.total-score {
  font-size: 22px;
}

.self-managing-clinic-scorecard-page-data .design-table th:first-child {
    border-radius: 0px 0px 0px 0px !important;
}

.self-managing-clinic-scorecard-page-data .activity-text {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
}

.self-managing-clinic-scorecard-page-data .not-started-bg {
  background-color: #ff5d5d;
  color: #fff;
}
.self-managing-clinic-scorecard-page-data .in-progress-to-start-bg {
  background-color: #ff6a3c;
  color: #fff;
}
.self-managing-clinic-scorecard-page-data .started {
  background-color: #f67c00;
  color: #fff;
}
.self-managing-clinic-scorecard-page-data .self-managing {
  background-color: #11734b;
  color: #fff;
}

.self-managing-clinic-scorecard-page-data .form-select {
    font-size: 11px;
}

.self-managing-clinic-scorecard-page-data .col-7 {
    min-width: 0 !important;
}

.self-managing-clinic-scorecard-page-data .h-100 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.self-managing-clinic-scorecard-page-data .border {
  border: 2px solid #2c5aa0 !important;
}

.self-managing-clinic-scorecard-page-data .border-radius {
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
}

.self-managing-clinic-scorecard-page-data .bg-primary {
  background-color: #2c5aa0 !important;
}

.self-managing-clinic-scorecard-page-data .bg-light-blue {
  background: rgb(232 242 255) !important;
}

/**** Monthly Revenue Activity Tracker Tool ****/

.monthly-revenue-activity-tracker-page-data .design-table th:last-child {
    border-radius: 0px 4px 0px 0px !important;
}

.monthly-revenue-activity-tracker-page-data .close-icon {
    position: absolute;
    top: 8px;       /* distance from top */
    right: 8px;     /* distance from right */
    font-size: 1.2rem;
    color: red;   /* or any color */
    font-weight: bold;
}

.monthly-revenue-activity-tracker-page-data .h-100 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.monthly-revenue-activity-tracker-page-data .border {
  border: 2px solid #2c5aa0 !important;
}

.monthly-revenue-activity-tracker-page-data .border-radius {
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
}

.monthly-revenue-activity-tracker-page-data .bg-primary {
  background-color: #2c5aa0 !important;
}

.monthly-revenue-activity-tracker-page-data .bg-orange {
  background-color: #f67c00 !important;
}

.monthly-revenue-activity-tracker-page-data .bg-light-orange {
  background-color: #fbf6e3 !important;
}

.monthly-revenue-activity-tracker-page-data .bg-green {
  background-color: #388e3c !important;
}

.monthly-revenue-activity-tracker-page-data .bg-light-green {
  background-color: #e8f4e9 !important;
}

.monthly-revenue-activity-tracker-page-data .text-primary {
  color: #2c5aa0 !important;
}

.monthly-revenue-activity-tracker-page-data .bg-light-blue {
  background: rgb(232 242 255) !important;
}

.monthly-revenue-activity-tracker-page-data .main-btn-yellow {
  padding: 15px 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-color);
  background: rgb(255, 233, 31);
  border: 1px solid rgb(255, 233, 31);
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

.monthly-revenue-activity-tracker-page-data .block-title {
  font-size: 16px !important;
}

.monthly-revenue-activity-tracker-page-data .block {
  padding: 15px;
  margin-bottom: 30px;
}

.monthly-revenue-activity-tracker-page-data .block-header {
    padding: 20px 20px;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    text-decoration: none;
}

.monthly-revenue-activity-tracker-page-data .block-header h5{
  margin-bottom: 0rem !important;
}

.monthly-revenue-activity-tracker-page-data .add-activity-row {
    padding: 5px 10px;
    background: #4ac186;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
}

.monthly-revenue-activity-tracker-page-data .activity-number {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
}

.monthly-revenue-activity-tracker-page-data .textarea-auto {
    height: 80px; /* adjust as needed */
    resize: vertical;
}

.monthly-revenue-activity-tracker-page-data .bg-light-gray{
  background-color: #f9f9f9;
}

.monthly-revenue-activity-tracker-page-data  table .bin {
  padding: 5px 10px;
  background: rgba(255, 93, 93, 1);
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}

/**** The follow-up focus tool ****/

.the-follow-up-focus-tools.data .header-row{font-weight:600;}
.the-follow-up-focus-tools.data .callout{background:#E9F0FB; border-left:6px solid #174F9C; padding:16px; border-radius:8px}
.the-follow-up-focus-tools.data .step-breadcrumb{background:#f8f9fc; border-radius:8px; padding:12px; box-shadow:0 0 0 1px rgba(0,0,0,0.03)}
.the-follow-up-focus-tools.data .blue-panel{background:#174F9C; color:white; border-radius:10px; padding:18px}
.the-follow-up-focus-tools.data .blue-panel h3{color:white}
.the-follow-up-focus-tools.data .section-number{background:#fff; color:#174F9C; font-weight:700; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;  flex-shrink: 0; }
.the-follow-up-focus-tools.data .card-box{background:#fff; border-radius:8px; padding:16px; box-shadow:0 0 0 1px rgba(0,0,0,0.03)}
.the-follow-up-focus-tools.data textarea{resize:vertical; min-height:110px}
.the-follow-up-focus-tools.data .small-muted{color:#6C757D; font-size:0.9rem}

.the-follow-up-focus-tools.data .text-secondary {
  color: #174f9c !important;
}

.the-follow-up-focus-tools.data .step-breadcrumb {
    flex-wrap: wrap;
    text-align: center;
}

.the-follow-up-focus-tools.data .step-breadcrumb small {
    white-space: nowrap; /* Keep each label in one line */
}

.the-follow-up-focus-tools.data .step-breadcrumb span {
    white-space: nowrap; /* Keep arrows with labels */
}

.the-follow-up-focus-tools.data .label-title {
  font-weight: 700;          /* bold */
  color: #174F9C;            /* same blue as the Transformational block */
  white-space: nowrap;       /* prevent wrapping */
  margin-right: 6px;         /* spacing beside textbox */
}

.the-follow-up-focus-tools.data .input-line {
  border: none;
  border-bottom: 2px solid #174F9C;
  border-radius: 0;
  padding: 2px 4px;
  background: transparent;
  font-size: 0.9rem;
  width: 100%;
}

.the-follow-up-focus-tools.data .input-line:focus {
  outline: none;
  border-bottom-color: #0d3875;
  box-shadow: none;
}

.the-follow-up-focus-tools.data .section-title {
  color: #174F9C;
  font-weight: 800;
}

.the-follow-up-focus-tools.data .section-number-blue {
  background: #174F9C;
  color: #fff;
  font-weight: 700;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #E0E6F2;
}

.the-follow-up-focus-tools.data .osa-box {
  background: #ffffff;
  border: 2px solid #E0E6F2;
  border-radius: 10px;
}

.the-follow-up-focus-tools.data .osa-badge {
  background: #174F9C;
  color: #fff;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.the-follow-up-focus-tools.data .osa-subtext {
  color: #6C757D;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.the-follow-up-focus-tools.data .osa-textarea {
  min-height: 110px;
  resize: vertical;
  border-radius: 8px;
}

.the-follow-up-focus-tools.data .section-title {
  color: #174F9C;
  font-weight: 800;
}

.the-follow-up-focus-tools.data .section-number {
  background: #fff;
  color: #174F9C;
  font-weight: 700;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #E0E6F2;
}

.the-follow-up-focus-tools.data .kpi-box {
  border-radius: 10px;
  background: #fff;
}

.the-follow-up-focus-tools.data .kpi-transactional {
  background: #FFF6D9; 
  border: 2px solid #FFB936; 
}

.the-follow-up-focus-tools.data .kpi-title-orange {
  color: #C96A00;
}

.the-follow-up-focus-tools.data .kpi-transformational {
  background: #D9F6EB;  
  border: 2px solid #0DAA68;
}

.the-follow-up-focus-tools.data .kpi-title-green {
  color: #0C8A55;
}

.the-follow-up-focus-tools.data .kpi-subtitle {
  font-size: 0.85rem;
  color: #6C757D;
  margin-bottom: 4px;
}

.the-follow-up-focus-tools.data .kpi-question {
  font-size: 0.9rem;
  color: #505050;
  margin-bottom: 10px;
}

.the-follow-up-focus-tools.data .kpi-textarea {
  min-height: 110px;
  resize: vertical;
  border-radius: 8px;
}

.the-follow-up-focus-tools.data .sa-box {
  background: #ffffff;
  border: 2px solid #E0E6F2;
  border-radius: 10px;
  width: auto !important;
    flex: 1;
}

.the-follow-up-focus-tools.data .sa-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #174F9C;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.the-follow-up-focus-tools.data .sa-orange-border { border-color: #FFB936; }
.the-follow-up-focus-tools.data .sa-title-orange { color: #C96A00; }
.the-follow-up-focus-tools.data .sa-number-orange { background: #FFB936; }

.the-follow-up-focus-tools.data .sa-green-border { border-color: #0DAA68; }
.the-follow-up-focus-tools.data .sa-title-green { color: #0C8A55; }
.the-follow-up-focus-tools.data .sa-number-green { background: #0DAA68; }

.the-follow-up-focus-tools.data .text-white-muted {
    color: #fff7f7e3;
}

.the-follow-up-focus-tools.data .sa-subtext {
  color: #6C757D;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.the-follow-up-focus-tools.data .sa-textarea {
  min-height: 110px;
  resize: vertical;
  border-radius: 8px;
}

.the-follow-up-focus-tools.data .sa-note {
  color: #174F9C;
  font-weight: 600;
}

.the-follow-up-focus-tools.data .intent-box {
  background: #174F9C;
  color: white;
  border-radius: 10px;
}

.the-follow-up-focus-tools.data .intent-question {
  font-size: 1.1rem;
  font-weight: 700;
}

.the-follow-up-focus-tools.data .intent-check {
  width: 20px;
  height: 20px;
}

.the-follow-up-focus-tools.data .intent-yes {
  color: #9FE6A0;
  font-weight: 600;
}

.the-follow-up-focus-tools.data .intent-no {
  color: #FF9B9B;
  font-weight: 600;
}

/**** The Difficult Patient Problem-Solver tool ****/

.the-difficult-patient-problem-solver.data .header-row{font-weight:600;}
.the-difficult-patient-problem-solver.data .callout{background:#E9F0FB; border-left:6px solid #174F9C; padding:16px; border-radius:8px}
.the-difficult-patient-problem-solver.data .step-breadcrumb{background:#f8f9fc; border-radius:8px; padding:12px; box-shadow:0 0 0 1px rgba(0,0,0,0.03)}
.the-difficult-patient-problem-solver.data .blue-panel{background:#174F9C; color:white; border-radius:10px; padding:18px}
.the-difficult-patient-problem-solver.data .blue-panel h3{color:white}
.the-difficult-patient-problem-solver.data .section-number{background:#fff; color:#174F9C; font-weight:700; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink: 0; font-size: 18px !important;  line-height: 1 !important; }
.the-difficult-patient-problem-solver.data .card-box{background:#fff; border-radius:8px; padding:16px; box-shadow:0 0 0 1px rgba(0,0,0,0.03)}
.the-difficult-patient-problem-solver.data textarea{resize:vertical; min-height:110px}
.the-difficult-patient-problem-solver.data .small-muted{color:#6C757D; font-size:0.9rem}

.the-difficult-patient-problem-solver.data .step-breadcrumb span {
    white-space: nowrap;
}

.the-difficult-patient-problem-solver.data .text-secondary {
    color: #174f9c !important;
}

.the-difficult-patient-problem-solver.data .text-white-muted {
    color: #fff7f7e3;
}

.the-difficult-patient-problem-solver.data .label-title {
    font-weight: 700;
    color: #174F9C;
    white-space: nowrap;
    margin-right: 6px;
}

.the-difficult-patient-problem-solver.data .kpi-box {
    border-radius: 10px;
}

.the-difficult-patient-problem-solver.data .kpi-yellow {
    background: #FFF6D9;
    border: 2px solid #FFB936;
}
.the-difficult-patient-problem-solver.data .kpi-yellow-text {
    color: #C96A00;
}

.the-difficult-patient-problem-solver.data .kpi-green {
    background: #D9F6EB;
    border: 2px solid #0DAA68;
}
.the-difficult-patient-problem-solver.data .kpi-green-text {
    color: #0C8A55;
}

.the-difficult-patient-problem-solver.data .ask-panel {
    background: #20395e;
    border-radius: 12px;
}

.the-difficult-patient-problem-solver.data .ask-box {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.the-difficult-patient-problem-solver.data .ask-subtext {
    font-size: 12px;
    color: #dbe5ff;
    margin-bottom: 8px;
}

.the-difficult-patient-problem-solver.data .ask-textarea {
    height: 70px;
    border-radius: 6px;
}

.the-difficult-patient-problem-solver.data .gap-options label {
    font-size: 13px;
    margin-right: 10px;
}

.the-difficult-patient-problem-solver.data .next-steps {
    background: #f0f4ff;
    border-radius: 10px;
}

.the-difficult-patient-problem-solver.data .step-number {
    width: 26px;
    height: 26px;
    background: #174F9C;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.the-difficult-patient-problem-solver.data .input-line {
    border: none;
    border-bottom: 2px solid #174F9C;
    border-radius: 0;
    padding: 2px 4px;
    background: transparent;
    font-size: 0.9rem;
    width: 100%;
}

.the-difficult-patient-problem-solver.data .confidence-row {
    background: rgba(255, 255, 255, 0.15);
    padding: 14px;
    border-radius: 6px;
}
.the-difficult-patient-problem-solver.data .confidence-label {
    font-size: 14px;
}
.the-difficult-patient-problem-solver.data .score-box {
    width: 50px;
    height: 30px;
    border-radius: 6px;
    border: none;
    text-align: center;
    font-weight: bold;
}

.the-difficult-patient-problem-solver.data .survery-row {
    background: #e6edf4;
    padding: 14px;
    border-radius: 6px;
}
.the-difficult-patient-problem-solver.data .survey-label {
    font-size: 14px;
}
.the-difficult-patient-problem-solver.data .survey-score-box {
    width: 50px;
    height: 30px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    border: 2px solid #174f9c !important;
}

.the-difficult-patient-problem-solver.data .score-max {
    margin-left: 6px;
    font-size: 16px;
    font-weight: bold;
}

.the-difficult-patient-problem-solver.data .section-number-blue {
  background: #174F9C;
  color: #fff;
  font-weight: 700;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #E0E6F2;
}
.the-difficult-patient-problem-solver.data .section-title {
    color: #174F9C;
    font-weight: 800;
}
.the-difficult-patient-problem-solver.data .sa-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #174F9C;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.the-difficult-patient-problem-solver.data .sa-subtext {
    color: #6C757D;
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.the-difficult-patient-problem-solver.data .sa-textarea {
    min-height: 110px;
    resize: vertical;
    border-radius: 8px;
}
.the-difficult-patient-problem-solver.data .sa-box {
    background: #ffffff;
    border: 2px solid #E0E6F2;
    border-radius: 10px;
    width: auto !important;
    flex: 1;
}

/**** Definition Of Success Builder Tool ****/

/* === COLUMN HEADERS === */
.definition-of-success-builder-data .table tr th:nth-child(2) {
  background-color: #ede8a7; /* pale yellow header */
}
.definition-of-success-builder-data .table tr th:nth-child(3) {
  background-color: #b9e1f9; /* soft blue header */
}
.definition-of-success-builder-data .table tr th:nth-child(4) {
  background-color: #aed3b0; /* soft green header */
}

/* === ALTERNATE BODY ROW COLORS === */
/* Column 2: alternate soft and light yellow */
.definition-of-success-builder-data .table tbody tr:nth-child(odd) td:nth-child(2) {
  background-color: #f5f0b2; /* light yellow */
}
.definition-of-success-builder-data .table tbody tr:nth-child(even) td:nth-child(2) {
  background-color: #fbf6bd; /* soft yellow */
}

/* Column 3: alternate soft blue */
.definition-of-success-builder-data .table tbody tr:nth-child(odd) td:nth-child(3) {
  background-color: #c7e4f5; /* light soft blue */
}
.definition-of-success-builder-data .table tbody tr:nth-child(even) td:nth-child(3) {
  background-color: #d6edf9; /* slightly deeper soft blue */
}

/* Column 4: alternate light greens */
.definition-of-success-builder-data .table tbody tr:nth-child(odd) td:nth-child(4) {
  background-color: #badfbc; /* light green */
}
.definition-of-success-builder-data .table tbody tr:nth-child(even) td:nth-child(4) {
  background-color: #c8e6c9; /* soft green */
}

.definition-of-success-builder-data .add_row {
    padding: 5px 10px;
    background: #4ac186;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
}

/* Numbered label with circle number before text */
.numbered-label {
    position: relative;
    padding-left: 40px;       /* space for the number circle */
    font-weight: 600;
    display: inline-block;
}

/* Add the number before the label text */
.numbered-label::before {
    content: attr(data-number);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #007bff;       /* circle color */
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;        /* makes it a circle */
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    font-weight: bold;
}

/**** 10x Problem Solving Tool Tool ****/
.tools-page.problem-solving-10x-data .title-label {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--primary-color);
}

/**** Definition of Done Tool ****/
.tools-page.definition-of-done.data .title-label {
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--primary-color);
}

.tools-page.definition-of-done.data .actions {
  display: inline-flex;
}

.btn-success {
    color: #fff;
    background-color: var(--green-color);
    border-color: var(--green-color);
}

.tools-page.definition-of-done.data .main-btn-yellow {
padding: 15px 15px;
font-size: 14px;
font-weight: 500;
color: var(--primary-color);
background: rgb(255, 233, 31);
border: 1px solid rgb(255, 233, 31);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}


/**** Rehab Builder New ****/

.rehab-builder-tool .main-title {
color: var(--primary-color);
font-weight: 700!important;
font-size: 40px;
margin-bottom: 2px;
}

.rehab-builder-tool .subtitle {
font-size: 16px!important;
color: var(--primary-color);
}

.rehab-builder-tool .rbuilder-section {

}

.rehab-builder-tool .rbuilder-section:last-child {
margin-bottom: 0px;
}


.title-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Ensure vertical alignment */
  width: 100%; /* Ensure the container takes full width */
}

.title-buttons .title-input {
  flex-grow: 1; 
}

.title-buttons .buttons {
  margin-left: 10px;
}

.category-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Ensure vertical alignment */
  width: 100%; /* Ensure the container takes full width */
}

.category-buttons .category-input {
  flex-grow: 1; 
}

.category-buttons .buttons {
  margin-left: 10px;
}

.category-input .form-select {
font-size: 14px;
background-color: rgba(255, 255, 255, 0.08);
border: none;
color: #fff;
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='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.category-input .form-select option {
color: #000;
}


.rehab-builder-tool .rbuilder-section th.title-col {
background: #1a2e57;
border-bottom-width: 0px;
border: 1px solid #12213e;
}

.rehab-builder-tool .rbuilder-section td.category-col {
background: rgb(12, 23, 43);
border-bottom-width: 0px;
border: 1px solid #12213e;
color: #fff;
}

.rehab-builder-tool .rbuilder-section td.category-col.orange {
background: rgb(214, 140, 0);
color: #fff;
}

.rehab-builder-tool .rbuilder-section td.category-col.blue {
background: rgb(0, 111, 214);
color: #fff;
}

.rehab-builder-tool .rbuilder-section td.category-col.dark-blue {
background: rgb(0, 24, 214);
color: #fff;
}

.rehab-builder-tool .rbuilder-section td.category-col.purple {
background: rgb(135, 0, 214);
color: #fff;
}

.rehab-builder-tool .rbuilder-section td.category-col.green {
background: #45a049;
color: #fff;
}

.rehab-builder-tool .rbuilder-section td.category-col.yellow {
background: rgb(190, 165, 0);
color: #fff;
}

.rehab-builder-tool .rbuilder-section td.category-col.pink {
background: rgb(240, 0, 134);
color: #fff;
}

.rehab-builder-tool .rbuilder-section td.category-col.red {
background: rgb(241, 0, 60);
color: #fff;
}

.rehab-builder-tool .rbuilder-section tr.table-headings {
background: #12213e;
color: #fff;
font-size: 14px;
border: 1px solid #12213e;
}

.rehab-builder-tool .rbuilder-section tr.table-headings th {
font-weight: 400;
padding: 10px;
border: 1px solid #12213e;
}

.rehab-builder-tool .rbuilder-section tbody {
background: #fff;
border: 1px solid #12213e;
}

.rehab-builder-tool .rbuilder-section tbody td {
font-size: 14px;
border: 1px solid #12213e;
}

.rehab-builder-tool .rbuilder-section tfoot td {
font-size: 14px;
border: 1px solid #12213e;
}

.rehab-builderv2 .rbuilder-section tfoot td.blank {
background: #12213e;
}

.rehab-builder-tool .rbuilder-section .form-control.title,
.rehab-builder-tool .rbuilder-section .form-control.category {
background: rgba(255, 255, 255, 0.08);
border: none;
color: #fff;
}

.w-30 {
width: 30%!important;
}

.w-15 {
width: 15%!important;
}

.w-10 {
width: 10%!important;
}

.rehab-builder-tool .rbuilder-section .form-floating label {
color: #fff;
font-weight: 400;
}

.rehab-builder-tool .rbuilder-section .table-btn {
padding: 1rem 1.2rem;
background: rgba(255, 255, 255, 0.08);
border: none;
color: #fff;
border-radius: 4px;
height: calc(3.5rem + 2px);
}

.rehab-builder-tool .rbuilder-section .table-btn.delete-section {
background: rgba(255, 93, 93, 1);
color: #fff;
}

.rehab-builder-tool .rbuilder-section .table-btn.delete-category {
background: rgba(255, 93, 93, 1);
color: #fff;
}

.rehab-builder-tool .rbuilder-section .table-btn.add-exercise {
background: #4ac186;
color: #fff;
}

.rehab-builder-tool .rbuilder-section .exercise-btn {
padding: 10px 12px;
background: rgba(0, 0, 0, 0.1);
border: none;
color: #000;
border-radius: 4px;
}

.rehab-builder-tool .rbuilder-section .exercise-btn.delete-exercise {
background: rgba(255, 93, 93, 1);
color: #fff;
}

.rehab-builder-tool .rbuilder-section .exercise-row input, .rehab-builder-tool .rbuilder-section .exercise-row textarea {
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.01);
padding: 10px;
}

.rehab-builder-tool .rbuilder-section #no-exercises-added {
padding: 10px;
background: #fff;
}

.rehab-builder-tool .rbuilder-section .add-exercise-block,
.rehab-builder-tool .rbuilder-section .add-category-block {
padding: 20px;
border: 2px dashed #e0e0e0;
border-radius: 0px;
color: #a4a4a4;
font-weight: 400;
cursor: pointer;
}

.rehab-builder-tool .rbuilder-section .add-exercise-block:hover
.rehab-builder-tool .rbuilder-section .add-category-block:hover {
border: 2px dashed #b1b1b1;
color: #333;
}

.rehab-builder-tool .rbuilder-no-sections {
padding: 60px 40px;
border: 4px dashed #d4d4d4;
border-radius: 8px;
color: #000;
font-weight: 400;
text-align: center;
}

.rehab-builder-tool .rbuilder-no-sections.error {
padding: 60px 40px;
border: 4px dashed #ff5d5d;
border-radius: 8px;
color: #932222;
font-weight: 400;
text-align: center;
background: rgba(255, 93, 93, 0.05);
}

.rehab-builder-tool .rbuilder-no-sections .icon {
  font-size: 50px;
}

.rehab-builder-tool .rbuilder-no-sections .title {
  font-size: 28px;
  font-weight: 500;
}

.rehab-builder-tool .rbuilder-no-sections .content {
  font-size: 18px;
}

.rehab-builder-tool .rbuilder-no-sections .buttons {
margin-top: 15px;
}

.rbuilder-btn {
padding: 15px 30px;
background: #fff;
border: 1px solid #000;
border-radius: 8px;
font-size: 14px;
color: #000;
}

.rbuilder-btn:hover {
color: #000;
}

.rbuilder-btn.red-btn {
background: rgba(255, 93, 93, 1);
border: 1px solid rgba(255, 93, 93, 1);
color: #fff;
}

.rbuilder-btn.green-btn {
background: #4ac186;
border: 1px solid #4ac186;
color: #fff;
}

.rbuilder-btn.add-section {
background: #4ac186;
color: #fff;
border: 1px solid #4ac186;
}

.rbuilder-settings {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Ensure vertical alignment */
  width: 100%; /* Ensure the container takes full width */

}

.rbuilder-settings .left-block {
  flex-grow: 1; 
}

.rbuilder-settings .right-block {
  margin-left: 10px;
}


.rehab-builder-tool .settings-btn {
padding: 15px 30px;
font-size: 14px;
background: rgba(31, 54, 101, 0.03);
border: 1px solid var(--primary-color);
color: var(--primary-color);
border-radius: 4px;
}

.rehab-builder-tool .settings-btn:hover {
background: rgba(31, 54, 101, 1);
color: #fff;
}

.rehab-builder-tool .settings-btn.settings-dropdown-btn {
background: rgb(255, 233, 31);
border: 1px solid rgb(255, 233, 31);
color: var(--primary-color);
}

.rehab-builder-tool .settings-btn.delete-all {
background: rgba(255, 93, 93, 1);
border: 1px solid rgba(255, 93, 93, 1);
color: #fff;
}

.rehab-builder-tool .settings-btn.add-section {
background: #4ac186;
border: 1px solid #4ac186;
color: #fff;
}

.rehab-builder-tool .settings-btn.save-program {
background: #4ac186;
border: 1px solid #4ac186;
color: #fff;
}

.rehab-builder-tool .settings-btn.disabled-btn {
pointer-events: none;
opacity: 0.1;
}

.rehab-builder-tool .remove-exercise-item {
cursor: pointer;
margin-top: 10px;
display: inline-block;
color: rgba(255, 93, 93, 1);
font-size: 12px;
font-weight: 500;
}

.rehab-builder-tool .exercise-dropdown {
  position: absolute;
  display: block;
  background-color: #fff;
  border-radius: 4px;
  overflow-y: auto;
  max-height: 200px;
  z-index: 2;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.1);
  border: 1px solid rgb(236, 236, 236);
}

.rehab-builder-tool .exercise-dropdown.no-exercises-found {
padding: 10px 20px;
color: rgba(255, 93, 93, 1);
}

.rehab-builder-tool .dropdown-item {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.rehab-builder-tool .dropdown-item:hover {
  background-color: #f5f5f5;
}

.rehab-builder-tool .dropdown-item:active {
  background-color: #e0e0e0;
}


.rehab-builder-tool .exercise-dropdown-image {
height: 50px;
width: 50px;
border-radius: 4px;
margin-right: 5px;
}

.rehab-builder-tool .content-box {
background: #fff;
padding: 20px;
font-size: 14px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
border-radius: 0px;
border: 2px solid #fff;
margin-bottom: 20px;
}

.rehab-builder-tool .content-box .form-control {
background: rgba(31, 54, 101, 0.03);
}

.rehab-builder-tool .content-box hr {
color: var(--primary-color);
height: 3px!important;
opacity: 0.05;
}

.rehab-builder-tool .content-box h5 {
font-weight: 500;
font-size: 16px;
margin-bottom: 15px;
color: var(--primary-color);
}

.rehab-builder-tool .search-patient-title {
background: rgba(31, 54, 101, 0.2);
font-weight: 500;
display: inline-block;
border-radius: 4px 4px 0px 0px;
padding: 8px 16px;
font-size: 14px;
color: var(--primary-color);
}

.rehab-builder-tool .rbuilder-patient-search {
position: relative;
}

.rehab-builder-tool .rbuilder-patient-search input {
width: 100%;
padding: 20px;
border-radius: 0px 4px 4px 4px;
font-size: 14px;
border: 1px solid #ced4da;
color: var(--primary-color);
padding-right: 50px;
}


.rehab-builder-tool .patient-dropdown {
width: 100%;
z-index: 1000;
background: #ffffff;
border: 1px solid rgba(31, 54, 101, 0.2);
max-height: 150px; 
overflow-y: auto; 
z-index: 1000;
position: absolute!important;
top: 65px!important;
left: 0px!important;
}

.rehab-builder-tool .patient-dropdown .no-result {
color: #ff0000;
padding: 5px 15px;
}

.rehab-builder-tool .patient-dropdown .no-result:hover {
background: #fff;
pointer-events: none;
cursor: none;
}

.rehab-builder-tool .patient-dropdown .dropdown-item {
cursor: pointer;
font-size: 12px;
padding: 5px 15px;
}

.rehab-builder-tool .send-program-btn {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: inline-block;
}

.rehab-builder-tool .send-program-btn:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
}


.rehab-builder-tool .rbuilder-section {
  width: 100%;
  overflow-x: auto; 
}

.rehab-builder-tool .table {
  width: 100%!important;
}

.rehab-builder-tool .table th,
.rehab-builder-tool .table td {
  word-wrap: break-word; /* Avoids content overflow */
  white-space: nowrap;   /* Prevents long text from breaking */
}

.rehab-builder-tool .table .edit-btn {
cursor: pointer;
padding: 8px 10px;
background: rgb(233, 233, 233);
border-radius: 4px;
}

.rehab-builder-tool .table .edit-btn:hover {
background: rgb(215, 215, 215);
}

.rehab-builder-tool .table .select-btn {
cursor: pointer;
padding: 8px 10px;
background: var(--green-color);
border-radius: 4px;
color: #fff;
}

.rehab-builder-tool .table .select-btn:hover {
background: var(--green-color-hover);
color: #fff;
}

.rehab-builder-tool .table .delete-btn {
cursor: pointer;
padding: 8px 10px;
background: #dc3545;
border-radius: 4px;
}

.rehab-builder-tool .table .delete-btn:hover {
background: #b62331;
color: #fff;
}

.rehab-builder-tool .program-table .watch-exercise-btn {
border-radius: 4px;
background: rgba(69, 159, 73, 0.11);
padding: 8px 16px;
display: inline-block;
cursor: pointer;
font-size: 12px;
color: rgba(28, 79, 30, 1);
border: 1px solid rgba(69, 160, 73, 1);
font-weight: 500;
}

.rehab-builder-tool .program-table .watch-exercise-btn:hover {
background: rgba(69, 160, 73, 1);
color: #fff;
border: 1px solid rgba(69, 160, 73, 1);
}

.rehab-builder-tool .table .edit-item-btn {
padding: 5px 10px;
background: var(--green-color);
display: inline-block;
border-radius: 4px;
margin-right: 5px;
cursor: pointer;
color: #fff;
}

.rehab-builder-tool .table .delete-item-btn {
padding: 5px 10px;
background: rgba(255, 93, 93, 1);
display: inline-block;
border-radius: 4px;
cursor: pointer;
color: #fff;
}

.rehab-builder-tool .edit-program-btn {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #000;
background: rgb(255, 233, 31);
border: 1px solid rgb(255, 233, 31);
border-radius: 4px;
display: inline-block;
}

.rehab-builder-tool .strength-col {
  display: none;
}


/**** Annual Leave ****/

.annual-leave-page .al-requests-stat {
position: relative;
right: 0px;
padding: 5px 10px;
background: rgba(254, 66, 66, 1);
color: #fff;
border-radius: 4px;
font-weight: 500;
}

.calendar-style .fc-event.annual-leave-block {
background: rgba(31, 54, 101, 1)!important;
border-color: rgba(31, 54, 101, 1)!important;
padding: 8px 10px!important;
font-size: 11px!important;
font-weight: 400!important;
}

.calendar-style .fc-event.annual-leave-block.pink {
background: rgba(244, 52, 159, 1)!important;
border-color: rgba(244, 52, 159, 1)!important;
}

.calendar-style .fc-event.annual-leave-block.purple {
background: #4c004c!important;
border-color: #4c004c!important;
}

.calendar-style .fc-event.annual-leave-block.light-purple {
background: rgba(163, 34, 102, 1)!important;
border-color: rgba(163, 34, 102, 1)!important;
}

.calendar-style .fc-event.annual-leave-block.dark-green {
background: rgba(31, 82, 16, 1)!important;
border-color: rgba(31, 82, 16, 1)!important;
}

.calendar-style .fc-event.annual-leave-block.green {
background: rgba(61, 171, 28, 1)!important;
border-color: rgba(61, 171, 28, 1)!important;
}

.calendar-style .fc-event.annual-leave-block.red {
background: rgba(179, 0, 0, 1)!important;
border-color: rgba(179, 0, 0, 1)!important;
}

.calendar-style .fc-event.annual-leave-block.blue {
background: rgba(26, 43, 236, 1)!important;
border-color: rgba(26, 43, 236, 1)!important;
}

.calendar-style .fc-event.annual-leave-block.light-blue {
background: rgba(70, 146, 247, 1)!important;
border-color: rgba(70, 146, 247, 1)!important;
}

.calendar-style .fc-event.annual-leave-block.orange {
background: rgba(254, 148, 85, 1)!important;
border-color: rgba(254, 148, 85, 1)!important;
}

.calendar-style .fc-event.annual-leave-block.dark-orange {
background: rgba(218, 97, 4, 1)!important;
border-color: rgba(218, 97, 4, 1)!important;
}

.calendar-style .fc-event.annual-leave-block.black {
background: rgba(0, 0, 0, 1)!important;
border-color: rgba(0, 0, 0, 1)!important;
}

.calendar-style .fc-event.annual-leave-block .event-title {
color: #fff;
}

.annual-leave-page .edit-your-annual-leave-btn, .annual-leave-page .edit-staff-annual-leave-btn {
cursor: pointer;
padding: 6px 8px;
background: rgb(233, 233, 233);
border-radius: 4px;
}

.annual-leave-page .edit-your-annual-leave-btn:hover, .annual-leave-page .edit-staff-annual-leave-btn:hover {
background: rgb(215, 215, 215);
}

.annual-leave-page .delete-your-annual-leave-btn, .annual-leave-page .delete-staff-annual-leave-btn {
cursor: pointer;
padding: 6px 8px;
background: #dc3545;
border-radius: 4px;
color: #fff;
}

.annual-leave-page .delete-your-annual-leave-btn:hover, .annual-leave-page .delete-staff-annual-leave-btn:hover {
background: #b62331;
}

.annual-leave-page .load-staff-annual-leave-requests .form-select {
padding: 15px;
}


@media (max-width: 767px) {
  /* On mobile, enable horizontal scrolling */
  .rehab-builder-tool .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

 .rehab-builder-tool .table {
    width: auto; /* Let the table take as much space as it needs */
  }
}


/**** Cliniko Reports ****/

.reports-tools .error-message {
background: rgba(255, 93, 93, 0.09);
color: #000;
font-size: 14px;
font-weight: 400;
padding: 20px 20px;
border-radius: 4px;
}

.reports-tools .btn-submit {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: inline-block;
}

.reports-tools .btn-submit:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
}

.reports-tools .dt-button {
background: rgba(31, 54, 101, 0.06)!important;
padding: 10px 20px!important;
border-radius: 4px!important;
color: var(--primary-color)!important;
font-weight: 600!important;
}

.reports-tools .dt-filter-btn {
word-wrap: normal;
position: relative;
display: inline-block;
box-sizing: border-box;
margin-right: .333em;
margin-bottom: .333em;
padding: 0.5em 1em;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
cursor: pointer;
font-size: .88em;
line-height: 1.6em;
color: black;
white-space: nowrap;
overflow: hidden;
height: 44px;
}



.tool-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
  position: relative;

  /* New: Flex layout for vertical alignment */
  display: flex;
  flex-direction: column;

  /* Important: ensures uniform height per column/grid row */
  height: 100%;
}

.tool-item .tool-item-icon {
padding: 10px;
background: var(--primary-color);
color: #fff;
background-color: #275FBC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23153365' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23275FBC' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23265cb7' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23245ab1' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%232357ac' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%232254a7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%232152a1' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23204f9c' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%231f4c97' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%231e4a92' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%231d478d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%231c4588' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%231b4283' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%231a407e' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23193d79' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23183a74' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2317386f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316356a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23153365' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
font-size: 50px;
text-align: center;
color: #fff;
border-radius: 8px 8px 0px 0px;
}

.tool-item-icon img {
width: 50%;
height: auto;
}

.tool-item .tool-item-content {
  padding: 20px;
  background: #fff;
  border-radius: 0px 0px 8px 8px;
  position: relative;

  /* New for vertical layout */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* ensures spacing between content and button */
  height: 100%;
}

.tool-item .tool-item-content .image {
width: 100%;
aspect-ratio: 4 / 2;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
background-position: center;
position: relative;
overflow: hidden;
}

.tool-item .tool-item-content h5 {
font-size: 18px;
font-weight: 500;
}

.tool-item .tool-item-content p {
font-size: 13px;
font-weight: 400;
opacity: 0.8;
}

.tool-item .tool-item-btn,
.tool-item .tool-item-locked {
  margin-top: auto; /* pushes button to bottom */
}

.tool-item .tool-item-btn {
padding: 10px;
font-size: 13px;
font-weight: 500;
color: rgba(31, 54, 101, 1);
background: rgba(31, 54, 101, 0.02);
border: 1px solid var(--green-color);
border-radius: 4px;
display: flex;
align-items: center;
cursor: pointer;
gap: 10px;
}

.tool-item .tool-item-btn i {
  font-size: 16px; /* Optional: adjust icon size */
  border-radius: 4px;
background: var(--green-color);
padding: 5px 10px;
color: #fff;
}

.tool-item .tool-item-btn p {
  margin-bottom: 0px;
  opacity: 0.6;
  font-size: 12px;
  margin-top: 2px; /* optional for spacing under "Locked" */
}

.tool-item .tool-item-btn > div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.tool-item .tool-item-locked {
padding: 10px;
font-size: 13px;
font-weight: 500;
color: rgba(193, 42, 42, 1);
background: rgba(223, 78, 77, 0.05);
border: 1px solid rgba(255, 93, 93, 1);
border-radius: 4px;
display: flex;
align-items: center;
cursor: default;
gap: 10px;
}

.tool-item .tool-item-locked i {
  font-size: 16px; /* Optional: adjust icon size */
  border-radius: 4px;
background: rgba(255, 93, 93, 1);
padding: 5px 10px;
color: #fff;
}

.tool-item .tool-item-locked p {
  margin-bottom: 0px;
  opacity: 0.6;
  font-size: 12px;
  margin-top: 2px; /* optional for spacing under "Locked" */
}

.tool-item .tool-item-locked > div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}



/**** Mobile ****/

@media (max-width: 768px) {


.admin-bar { width: calc(100%); margin-left: 0px; }

.sidebar { display: none; }
.main-content { padding: 30px 20px; width: calc(100%); }

.page-header h2 { font-size: 24px; }
.page-header p { font-size: 18px; }
.page-header .header-icon { font-size: 40px; }

/*** Library Mobile ***/
.library-category-block .image .text { font-size: 12px; }
.library-category-block .image .overlay { padding: 10px; }
.library-category-block .cat-stats .stat { font-size: 10px; }

.library-title-section .item { font-size: 10px; }
.library-title-section .icon-divider { font-size: 10px; margin: 0px 2px; }

.mobile-sidebar-btn { display: inline-block; }

.main-content .page-header .header-btn { font-size: 12px; padding: 10px 15x; }
.main-content .page-header.primary { padding: 40px; }

.dashboard-stat-block { padding: 15px; }
.dashboard-stat-block .stat-icon { padding: 4px 10px; font-size: 20px; }
.dashboard-stat-block .number { font-size: 20px; }
.dashboard-stat-block .description { font-size: 12px; }

.definition-of-success-builder-data #gap-analysis-tbl  { width: 1000px; }

.strategic-planning-page table td .action_steps { width: 200px; /* Set to 150px for small screens */ }

.financial-tracker-page table.monthly-financial-datatable th:first-child, 
.financial-tracker-page table.monthly-financial-datatable td:first-child,
.financial-tracker-page table.quarterly-financial-datatable th:first-child,
.financial-tracker-page table.quarterly-financial-datatable td:first-child {
    position: static; /* Reset position */
    left: auto; /* Reset left positioning */
    z-index: auto; /* Reset z-index */
}

.ethical-growth-calculator-page .btn-text {
  display: none; /* Hide text */
}

.ethical-growth-calculator-page .main-btn-primary, 
.ethical-growth-calculator-page .main-btn {
  justify-content: center; /* Center the icon */
}

}

/**** Tablet ****/

@media (max-width: 991px) {

.budget-page.data #step_1 input,
.budget-page.data #step_1 select,
.budget-page.data #step_2 #gut-out-functional input {
  width: 210px !important;
}

.admin-bar { width: calc(100%); margin-left: 0px; }

.quick-access-box .quick-link-item {  }

.sidebar { display: none; }
.main-content { padding: 30px 0px; width: calc(100%); margin-left: 0px; }
.profile-page .main-content { padding: 10px 0px; width: calc(100%); }

.page-header h2 { font-size: 24px; }
.page-header p { font-size: 18px; }
.page-header .header-icon { font-size: 40px; }

.mobile-sidebar-btn { display: inline-block; }

.sidebar {
 display: block;
position: fixed; /* Keep the sidebar fixed relative to the viewport */
top: 0;
left: -340px; /* Initially position it off-screen to the left */
width: 340px; /* Width of the sidebar */
height: 100%; /* Full height of the viewport */
background-color: #f0f0f0; /* Sidebar background color */
z-index: 999999; /* Ensure sidebar appears above other content */
transition: left 0.3s ease; /* Add a smooth transition effect */
}

.sidebar.show {
  left: 0; /* Slide the sidebar into view by setting left to 0 */
}


.library-category-btn.back p { display: none; }

.navbar { display: block; z-index: 999; }

.sidebar.show .sidebar-close { display: block; z-index: 999999; }

.library-buttons-section { top: 0px; } 

.temp-notice { font-size: 12px; }
.admin-page .products-updated-text { font-size: 12px; }

.library-page .library-buttons-section .content { padding: 50px 20px; }
.library-title-section .first-item { font-size: 26px; }
.library-page .library-title-section .item { font-size: 14px; }

}

/**** OVERRIDE ALL ****/

.main-content.no-sidebar {
margin-left: auto;
min-height: auto;
}

.bg-main-blue {
background: var(--primary-color)!important;
}

.steps-btn.submit {
    background-color: #28a745; /* Green background for the submit button */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.steps-btn.submit:hover {
    background-color: #218838; /* Darker green on hover */
}