@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 span, .temp-notice b {
display: contents;
}

.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.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 ****/

.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;
}

.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 ****/


/* 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: var(--green-color);
border-radius: 4px;
color: #fff;
font-weight: 600;
}

.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 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;
height: 100%;
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.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.red {
background: rgb(255, 93, 93);  
}

.main-content .page-header .header-btn.red:hover {
background: rgb(230, 81, 81);
color: #fff;
}

.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: 400;
opacity: 0.3;
color: #1f3665;
}


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

/**** Dashboard ****/

.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: 20px;
border-radius: 10px;
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: 26px;
font-weight: 600;
margin-bottom: -5px;
}

.dashboard-stat-block .description {
font-size: 14px;
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);
color: #1F3665;
padding: 8px 15px;
border-radius: 10px;
font-size: 28px;
font-weight: bold;
color: #000;
}

.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-right: 5px;
margin-left: auto;
}

.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.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 */
}


/**** 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;
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);
}

/**** 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 , .login-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 .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-body .comments {
padding: 10px 10px;
background: rgba(31, 54, 101, 0.05);
border: 1px solid rgba(31, 54, 101, 0.1);
border-radius: 4px;
margin-top: 10px;
}

.exercise-modal .modal-body .comments p {
font-size: 12px;
font-weight: 400;
margin-bottom: 0px;
}

.exercise-modal .modal-body .modal-subtitle {
font-size: 12px!important;
font-weight: 500!important;
margin-bottom: 5px!important;
opacity: 0.6;
}

.exercise-modal .modal-body .pain-score-box {
padding: 10px 10px;
background: rgba(31, 54, 101, 0.05);
border: 1px solid rgba(31, 54, 101, 0.1);
border-radius: 8px;
margin-top: 10px;
}

.exercise-modal .modal-body .pain-score-box .modal-subtitle {
margin-bottom: 1px!important;
}

.exercise-modal .modal-body .pain-score-box p {
font-size: 11px;
margin-bottom: 10px;
opacity: 0.8;
}

.exercise-modal .modal-body .pain-score-box .scores {
display: flex;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item {
display: block;
width: 20%;
text-align: center;
background: #fff;
padding: 10px;
cursor: pointer;
border-radius: 4px;
margin-right: 5px;
border: 1px solid #000;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item#zero {
background: #4ac186;
color: #fff;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item#one {
background: #eeeb84;
color: #000;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item#two {
background: #eed9d9;
color: #000;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item#three {
background: #e8c2c2;
color: #000;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item#four {
background: #d59191;
color: #000;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item#five {
background: #e82d2d;
color: #fff;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item:hover {
 border: 1px solid #000;   
 background: #000!important;
 color: #fff!important;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item:last-child {
margin-right: 0px;  
}

.exercise-modal .modal-body .pain-score-box .scores .score-item span {
display: block;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item span.score {
font-size: 16px;
font-weight: 600;
margin-bottom: 0px;
}

.exercise-modal .modal-body .pain-score-box .scores .score-item span.title {
font-size: 10px;
opacity: 0.8;
}

.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%; 
  border-radius: 8px;
} 

.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%; 
}

.exercise-plan-page .content-box .q-box {
  margin-bottom: 20px;
}

.exercise-plan-page .not-answered {
  color: rgb(242, 19, 19);
}

.exercise-plan-page .content-box .q-answer p {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 8px;
}

.exercise-plan-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;
}

.exercise-plan-page .content-box {
  counter-reset: question-counter;
}

.exercise-plan-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;
}

.exercise-plan-page .modal-body .content-box{
  padding: 2px !important;
}

.exercise-plan-page .content-box .q-label {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: capitalize;
  color: var(--primary-color);
}

/**** 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 */
}


/**** 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 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);
}


/**** 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;
}

/**** 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 .patient-exercise-plan-table .read {
color: var(--green-color);
}

.patients-page .patient-exercise-plan-table .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);
  cursor: pointer;
}

.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;
  position: relative; /* Needed for arrow positioning */
}

.patients-page.patient-plan-page .exercise-item .content h6 .right-arrow {
font-size: 40px;
position: absolute;
right: 10px;
transform: translate(-50%);
opacity: 0.1;
color: var(--primary-color);
}


.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: 500px;
    max-height: 70vh; /* 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 .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; 
}



/**** 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;
}


/**** 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: 20px!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;
background-color: var(--green-color-hover);
border-color: var(--green-color-hover);
}

.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 .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 .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);
}

/**** Design Page ****/

.design-page .read {
color: var(--green-color);
}

.design-page .unread {
color: rgba(255, 93, 93, 1);
}

.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 {
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.no-header {
border-radius: 4px;
}

.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;
}


/**** Exercise Plans Page ****/

.exercise-plan-page h3.title {
font-weight: 600;
font-size: 30px;
}

.exercise-plan-page p.time {
font-size: 13px;
margin-bottom: 10px;
}

.exercise-plan-page p.additional_comments {
font-size: 13px;
margin-bottom: 0px;
}

.exercise-plan-page .patient-plan-exercise-list .view-exercise-text {
opacity: 0.6;
font-size: 14px;
}

/**** 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;
}


 .rehab-program-page .rbuilder-section {
  width: 100%;
  overflow-x: auto; 
}

 .rehab-program-page .program-table {
  width: 100%!important;
}

 .rehab-program-page .program-table th,
 .rehab-program-page .program-table td {
  word-wrap: break-word; /* Avoids content overflow */
  white-space: nowrap;   /* Prevents long text from breaking */
}

.rehab-program-page .rbuilder-section th.title-col {
background: #1a2e57;
border-bottom-width: 0px;
border: 1px solid #12213e;
}

.rehab-program-page .rbuilder-section td.category-col {
background: rgb(12, 23, 43);
border-bottom-width: 0px;
border: 1px solid #12213e;
color: #fff;
text-transform: capitalize;
}

.rehab-program-page .rbuilder-section td.category-col.orange {
background: rgb(214, 140, 0);
color: #fff;
}

.rehab-program-page .rbuilder-section td.category-col.blue {
background: rgb(0, 111, 214);
color: #fff;
}

.rehab-program-page .rbuilder-section td.category-col.dark-blue {
background: rgb(0, 24, 214);
color: #fff;
}

.rehab-program-page .rbuilder-section td.category-col.purple {
background: rgb(135, 0, 214);
color: #fff;
}

.rehab-program-page .rbuilder-section td.category-col.green {
background: #45a049;
color: #fff;
}

.rehab-program-page .rbuilder-section tr.table-headings {
background: #12213e;
color: #fff;
font-size: 14px;
border: 1px solid #12213e;
}

.rehab-program-page .rbuilder-section tr.table-headings th {
font-weight: 400;
padding: 10px;
border: 1px solid #12213e;
}

.rehab-program-page .rbuilder-section tbody {
background: #fff;
border: 1px solid #12213e;
}

.rehab-program-page .rbuilder-section tbody td {
font-size: 14px;
border: 1px solid #12213e;
}

.rehab-program-page .rbuilder-section tfoot td {
font-size: 14px;
border: 1px solid #12213e;
}

.rehab-program-page .rbuilder-section tfoot td.blank {
background: #12213e;
}

.rehab-program-page .rbuilder-section .form-control.title,
.rehab-program-page .rbuilder-section .form-control.category {
background: rgba(255, 255, 255, 0.08);
border: none;
color: #fff;
}

.rehab-program-page .program-table .w-30 {
width: 30%!important;
}

 .rehab-program-page .program-table .w-15 {
width: 15%!important;
}

 .rehab-program-page .program-table .w-10 {
width: 10%!important;
}

.rehab-program-page .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-program-page .program-table .watch-exercise-btn:hover {
background: rgba(69, 160, 73, 1);
color: #fff;
border: 1px solid rgba(69, 160, 73, 1);
}


.rehab-program-page .table .actions {
display: inline-flex;
}

.rehab-program-page .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-program-page .table .delete-item-btn {
padding: 5px 10px;
background: rgba(255, 93, 93, 1);
display: inline-block;
border-radius: 4px;
cursor: pointer;
color: #fff;
}

@media (max-width: 767px) {
  /* On mobile, enable horizontal scrolling */
  .rehab-program-page .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

 .rehab-program-page .program-table {
    width: auto; /* Let the table take as much space as it needs */
  }
}




/**** Mobile ****/

@media (max-width: 768px) {

.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; }

}

/**** Tablet ****/

@media (max-width: 991px) {

.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; }

.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;
}



.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 */
}