@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-v23-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-v23-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

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 h5 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
}

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

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

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

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

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

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

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

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

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

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

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

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

body.no-scroll {
    overflow: hidden;
}

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

:root {
  --primary-color: #1F3665;
  --secondary-color: #38B6FF;
  --green-color: #558815;
  --green-color-hover: #558815; 
  --yellow-color: #f3db00;
  --yellow-color-hover: #f3db00;
  --orange-color: #f46420;
  --orange-color-hover: #f0550d;
}


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

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

.text-warning {
    color: #ffc107 !important;
}

hr {
    margin: 1rem 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: .25;
}

.primary-background {
    background: linear-gradient(90deg, rgb(56 86 19) 0%, rgb(79 132 9) 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;
}

table.dataTable tfoot th, table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #efefef;
}

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


/**** Module / Tool Header START ****/

.header-section {
    padding: 0px;
    border-radius: 0px;
        padding: 25px 20px 20px;
    background: #fff;
    margin-bottom: 20px;
}
.header-section .title {
    color: #1F3665;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 2px;
}
.header-section .description {
    font-weight: 300;
    font-size: 16px;
    color: #1F3665;
}
.lessons-buttons-section form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-right-buttons {
    float: right;
    margin-left: 5px;
}

.header-btn p {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 500;
    margin-left: 5px;
}
.header-btn {
    padding: 10px 15px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 20px;
    display: -webkit-inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--primary-color);
    margin-right: 5px;
}
.header-btn {
    padding: 16px 15px;
}
.header-btn.add-account-btn {
    background: var(--green-color);
    color: #fff;
}
.header-btn p {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 500;
    margin-left: 5px;
}

/**** Module / Tool Header END ****/


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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: 200px;
}

.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 #558815;
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: 100%;
}

.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: 100%;
margin: 0px auto;
display: block;
}

.sb-link-header {
color: #558815;
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: #fff;
  background-color: #558815;
  border-radius: 32px;
  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 {
color: #fff;
background-color: #ffcd30;
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: #d34503;
background-size: cover;
}

.sb-link.logout-btn:hover {
  background: rgb(255 0 0);
}

.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: 13px;
display: flex;
align-items: center;
width: 100%;
position: relative;
}

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

.sb-icon {
padding: 5px 0px;
font-size: 20px;
line-height: 20px;
display: -webkit-inline-box;
/* border-right: 1px solid rgb(242 101 32 / 45%); */
/* padding-right: 10px; */
margin-right: 10px;
}

/**** Page ****/

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

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

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

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

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

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

.main-content.with-header .page-header {
padding: 60px 30px;
margin-bottom: 30px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.05);
background-color: rgba(31, 54, 101, 0.08);
}

.main-content .page-header.primary {
padding: 50px;
border-radius: 10px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.03);
background-color: #fff;
background-size: cover;
color: #558815;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.section-header h2 {
font-size: 16px;
font-weight: 400;
opacity: 0.3;
color: #1f3665;
}


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


.form-switch .form-check-input {
    width: 2em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
}

.form-switch {
    padding-left: 2.5em;
}

/**** 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 .title {
font-size: 14px;
font-weight: 600;
margin-bottom: -5px;
}

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


.large-description {
font-size: 20px !important;
font-weight: 400;
opacity: 0.5;
}

.small-description {
font-size: 12px;
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: #f46420;
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;
}



/* 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-page {
background: #fff;
padding: 30px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005)!important;
border-radius: 8px;
margin-bottom: 20px;
}

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

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

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

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

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

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

.btn-blocks {
display: flex;
}

.login-page .forgot-password-section .back-login-btn, .login-page .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-page .forgot-password-section .back-login-btn:hover, .login-page .reset-password-section .back-login-btn:hover {
background: rgba(31, 54, 101, 0.2);
}

.login-page .forgot-password-section .reset-btn, .login-page .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-page .forgot-password-section .reset-btn:hover, .login-page .reset-password-section .reset-btn:hover {
background: var(--green-color-hover);
border: 1px solid var(--green-color-hover);
color: #fff;
}


.login-page .login-btn {
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #47740c;
    background: #47740c;
    font-weight: 500;
    color: #fff;
    width: 100%;
    font-size: 14px;
}

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

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

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

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

.login-page .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-page .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-page .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-page .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: #fff;
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;
}



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

.user-page .main-content {
  padding: 0px;
  }
  
  .user-page .main-content .page-header {
  border-radius: 0px;
  }
  
  .user-member-modal .modal-content {
  border-radius: 8px;
  background: none;
  border: 0px solid #fff;
  padding: 0px;
  }
  
  .user-member-modal .modal-header {
  border-bottom: 0px solid #fff;
  text-align: center;
  display: block;
  background-color: #f46420;
  background-size: cover;
  color: #fff;
  padding: 20px;
  margin-bottom: 0px;
  border-radius: 0px;
  }
  
  .user-member-modal .modal-header p {
  font-size: 14px;
  margin-bottom: 0px;
  font-weight: 200;
  opacity: 0.7;
  }
  
  .user-member-modal .modal-body {
  background: #fff;
  color: var(--primary-color);
  padding: 20px;
  }
  
  .user-member-modal .modal-title {
  margin-bottom: 0;
  line-height: 1.5;
  font-weight: 700;
  font-size: 22px;
  }
  
  .user-member-modal .modal-footer {
  border-top: 0px solid #fff;
  background: rgba(242, 242, 242, 1);
  text-align: center;
  display: block;
  }
  
  .user-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;
  }
  
  .user-member-modal .btn-close-modal:hover {
  font-weight: 600;
  background: #b51b1b;
  }
  
  .user-member-modal .btn-success-modal {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #f46420;
  border: 1px solid var(--green-color);
  border-radius: 100px;
  }
  
  .user-member-modal .btn-modal {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #f46420;
  border: 1px solid #fff;
  border-radius: 100px;
  }
  
  .user-member-modal .btn-modal:hover {
  font-weight: 600;
  color: #fff;
  background: #f45003;
  }
  
  .user-member-modal .form-label {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 14px;
  }
  
  .user-member-modal .form-control {
  border-radius: 4px;
  }
  
  .user-page .block p {
  font-weight: 400;
  font-size: 18px;
  opacity: 0.8;
  margin-bottom: 0px;
  color: var(--primary-color);
  }
  
  .user-page .block a {
  color: var(--green-color);
  font-weight: 500;
  }
  
  .user-page .block {
  -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  }
  
  .user-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;
  }
  
  .user-page .block .header h2 {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 0px;
  }
  
  .user-page .block .header p {
  font-weight: 300;
  font-size: 14px;
  margin-bottom: 0px;
  color: #fff;
  }
  
  .user-page .block .header .content {
  padding: 20px;
  background: #fff;
  border-radius: 0px 0px 8px 8px;
  }
  
  .user-page .block .content {
  padding: 20px;
  background: #fff;
  border-radius: 8px 8px 8px 8px;
  }
  
  .user-page .progress-label {
  font-size: 14px!important;
  margin-bottom: 5px!important;
  font-weight: 600!important;
  }
  
  .user-page .progress-footer {
  font-size: 14px!important;
  margin-bottom: 0px!important;
  font-weight: 400!important;
  font-style: italic!important;
  }
  
  .user-page .progress {
  display: flex;
  height: 40px;
  overflow: hidden;
  font-size: .75rem;
  background-color: #e9ecef;
  border-radius: .25rem;
  margin-bottom: 10px;
  }
  
  .user-table {
  border-radius: 8px;
  width: 100%;
  -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  }
  
  .user-table th:first-child {
  border-radius: 8px 0px 0px 0px;
  }
  
  .user-table th {
  background: rgba(31, 54, 101, 0.05);
  color: var(--primary-color);
  padding: 20px;
  border-bottom: none;
  }
  
  .user-table th:last-child {
  border-radius: 0px 8px 0px 0px;
  }
  
  .user-table td {
  padding: 20px;
  border-bottom-width: 0px;
  box-shadow: none;
  }
  
  .user-table tr {
  background: rgba(31, 54, 101, 0.05);
  }
  
  .user-table tr:nth-child(even) {
  background: rgba(31, 54, 101, 0.02);
  }
  
  .user-table tr:last-child td:first-child {
  border-radius: 0px 0px 0px 8px;
  }
  
  .user-table tr:last-child td:last-child {
  border-radius: 0px 0px 8px 0px;
  }
  
  .user-table tbody {
  background: #fff;
  }
  
  .user-page .dataTables_filter {
  margin-bottom: 15px;
  }
  
  .user-page .dataTables_paginate {
  margin-top: 15px;
  }
  
  .user-page table.dataTable thead th {
  padding: 20px;
  border-bottom: 0px solid #fff;
  }
  
  .user-page table.dataTable tbody td {
  padding: 20px;
  border-bottom: 0px solid #fff;
  background: rgba(31, 54, 101, 0.02);
  white-space: nowrap;
  }
  
  .user-page table.dataTable.no-footer {
  border-bottom: 0px solid #fff;
  }
  
  .user-page .dataTables_wrapper .dataTables_filter {
      float: none;
      text-align: center;
  }
  
  .user-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;
  }
  
  .user-page .add-user-btn {
  background: var(--green-color);
  color: #fff;
  padding: 10px 20px;
  border: 1px solid var(--green-color);
  border-radius: 4px;
  font-size: 14px;
  }
  
  .user-page .add-user-btn:hover {
  color: #fff;
  background-color: var(--green-color-hover);
  border-color: var(--green-color-hover);
  }
  
  .user-page .paginate_button.previous {
  padding: 10px!important;
  background: rgb(236, 219, 219);
  border-radius: 4px!important;
  color: var(--primary-color)!important;
  }
  
  .user-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;
  }
  
  
  .user-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);
  }
  
  .user-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;
  }
  
  .user-page  .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .user-page  .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border: 1px solid rgba(31, 54, 101, 0.15);
  background: rgba(31, 54, 101, 0.15);
  }
  
  .user-page .edit-user-member-btn {
  cursor: pointer;
  padding: 6px 8px;
  background: rgb(233, 233, 233);
  border-radius: 4px;
  }
  
  .user-page .edit-user-member-btn:hover {
  background: rgb(215, 215, 215);
  }
  
  .user-page .c-edit-user-member-btn:hover {
  background: rgb(215, 215, 215);
  }


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

/**** 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: #558815;
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-modal {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--orange-color);
border: 1px solid var(--orange-color);
border-radius: 100px;
}

.global-modal .btn-modal.round {
border-radius: 4px;
}

.global-modal .btn {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 100px;
}


.global-modal .btn-success-modal {
  color: #fff;
  background: var(--green-color);
  border: 1px solid var(--green-color);
}

.global-modal .btn-warning-modal {
  background: var(--yellow-color);
  border: 1px solid var(--yellow-color);
}

.global-modal .btn-modal:hover {
font-weight: 600;
background: #f85000;
border-color: 1px #f85000;
color: #fff;
}

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

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

.global-modal .input-error {
font-size: 12px;
margin-top: 5px;
color: rgb(242, 19, 19);
font-weight: 400;
display: none;
}

.global-modal .content h5 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
}

.global-modal .content h6 {
margin-bottom: 10px;
font-size: 18px;
font-weight: 600;
}

.global-modal .content h6 span {
font-size: 12px;
font-weight: 400;
}

.global-modal .content p {
font-size: 13px;
font-weight: 400;
opacity: 0.8;
}

.global-modal .content p:last-child {
margin-bottom: 0px;
}

/**** Implementation Page  ****/

.implementation-page .content-box
{
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.implementation-page .navigation-title {
  font-size: 14px;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 0px;
}

.implementation-page .content-box h2 {
  font-weight: 600;
}

.implementation-page .content-box p  {
  font-size: 14px;
  font-weight: 400;
}

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

.implementation-page .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.implementation-page .right-buttons {
  display: flex;
  gap: 10px; /* Space between the buttons */
}



.implementation-page .header-above-box {
  padding: 20px 20px;
  background: rgba(31, 54, 101, 0.06);
  align-items: center;
  border-radius: 4px 4px 0px 0px;
  text-decoration: none;
}

.implementation-page .header-above-box h5 {
  font-size: 20px;
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 0px;
  }
  
.implementation-page .header-above-box p {
font-size: 14px;
color: var(--primary-color);
font-weight: 400;
margin-bottom: 0px;
opacity: 0.6;
}

.implementation-page .content-box label {
  font-size: 16px;
  font-weight: 600;
}

.implementation-page .smart-goal {
  background-color: #ecedf073;
  padding: 20px 30px 10px 30px;
  border-radius: 5px;
}

.implementation-page .smart-goal .design-table td {
  padding: 5px 0px;
}

.implementation-page .smart-goal table td.input {
  width: 70% !important;
}

.implementation-page .smart-goal table td.select {
  width: 30% !important;
}

.implementation-page .btn-submit-form {
padding: 15px 30px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--green-color);
border: 1px solid var(--green-color);
border-radius: 4px;
display: none;
}

.implementation-page table .bin {
padding: 5px 10px;
background: rgba(255, 93, 93, 1);
display: inline-block;
border-radius: 4px;
cursor: pointer;
color: #fff;
}


/**** Admin Bar ****/

.admin-bar {
padding: 20px;
background: red;
width: calc(100% - 340px);
margin: 0 auto;
position: -webkit-sticky;
margin-left: 340px;
display: flex;
top: 0;
z-index: 99999;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.03);
}

.admin-bar p.title {
font-size: 14px;
color: #fff;
font-weight: 600;
margin-bottom: 0px;
text-transform: uppercase;
opacity: 1;
}

.admin-bar p {
font-size: 12px;
color: #fff;
font-weight: 400;
margin-bottom: 0px;
opacity: 0.8;
}

.admin-bar .left {
width: 50%;
text-align: left;
}

.admin-bar .right {
width: 50%;
text-align: right;
}

.admin-bar .admin-exit-btn {
padding: 10px 20px;
background: #fff;
display: inline-block;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
border: 1px solid #fff;
color: #000;
cursor: pointer;
}

/**** Mobile Navbar ****/

.mobile-sidebar-btn {
display: none;
font-size: 26px;
color: rgba(255,255,255,1);
padding: 10px 20px!important;
background: rgba(255, 255, 255, 0.04);
margin: auto 2px;
border-radius: 4px;
cursor: pointer;
}

/**** Sidebar Footer ****/

.sb-footer hr {
height: 2px;
color: rgb(233, 233, 233);
margin-bottom: 25px;
}

.sb-footer .copyright {
font-size: 12px;
opacity: 0.4;
margin-bottom: 2px;
}

.sb-footer .version {
font-size: 10px;
opacity: 0.4;
margin-bottom: 0px;
}

/**** How-To Library Search Results ****/

.category-info-box.search-results {
display: block;
}

.category-info-box.search-results .content {
border-radius: 8px;
}

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

.library-heading {
padding: 10px 0px;
border-radius: 8px;
margin-bottom: 20px;
color: #1F3665;
}

.library-heading .library-title-section .first-item {
color: #1F3665;
}

.library-heading .library-title-section .item {
color: #1F3665;
}

.category-info-box .exercise-list {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
}

.category-info-box .hwtl-exercise .view-exercise {
text-decoration: none;
}

.category-info-box .hwtl-exercise {
text-decoration: none;
margin-bottom: 4px;
}

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

.category-info-box .hwtl-exercise .favourite-exercise {
padding: 3px 6px;
background: rgba(31, 54, 101, 0.03);
color: #1F3665;
border-radius: 4px;
display: inline-block;
margin-right: 5px;
cursor: pointer;
}

.category-info-box .hwtl-exercise .favourite-exercise:hover {
background: rgb(255, 87, 87);
color: #fff;
}

.category-info-box .hwtl-exercise .favourite-exercise.favourited {
background: rgb(255, 87, 87);
color: #fff;
}


/**** Rehab Builder ****/

.rehab-builder-page .block .content {
padding: 20px;
background: #fff;
border-radius: 8px 8px 8px 8px;
margin-bottom: 15px;
}

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

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

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

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

.rehab-builder-page .heading .icon {
font-size: 40px;
padding: 5px 15px;
background: rgba(255, 255, 255, 0.06);
display: inline-block;
border-radius: 100px;
margin-bottom: 10px;
}

.rehab-builder-page .heading h2 {
color: #fff;
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.rehab-builder-page .heading p {
color: #fff;
font-size: 16px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.rehab-builder-page .heading .rehab-builder-examples {
margin-top: 15px;
}

.rehab-builder-page .heading .rehab-builder-examples h6 {
font-size: 18px;
font-weight: 600;
}

.rehab-builder-page .heading .rehab-builder-examples ul {
list-style: none;
 padding-left: 0; 
}

.rehab-builder-page .heading .rehab-builder-examples ul li {
position: relative;
padding-left: 20px; 
font-size: 14px;
font-weight: 400;
cursor: pointer;
}

.rehab-builder-page .heading .rehab-builder-examples ul li::before {
content: '\2192'; 
position: absolute;
left: 0;
color: var(--green-color); 
font-size: 14px;
}


.rehab-builder-page .heading .rehab-builder-examples ul li:hover {
color: var(--green-color);
}

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


/**** Rehab Builder view ****/

.rehab-builder-view-page .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: #f46420;
padding: 20px;
border-bottom: none;
font-size: 16px;
vertical-align: middle;
}

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

.design-table td {
padding: 20px;
border-bottom-width: 0px;
box-shadow: none;
font-size: 14px;
vertical-align: middle;
}

.design-table .clickable-td {
cursor: pointer;
}

.design-table td p.title {
font-weight: 600;
margin-bottom: 5px;
}

.design-table td p.smaller-text {
font-weight: 400;
font-size: 10px;
opacity: 0.8;
margin-bottom: 0px;
}

.design-table .buttons {
display: inline-flex;
}

.design-table .buttons .buttons-item {
    margin-right: 10px; /* Adjust the spacing as needed */
}

/* Optional: Remove margin from the last button */
.design-table .buttons .buttons-item:last-child {
    margin-right: 0;
}

.design-table .table-click-arrow {
font-size: 14px!important;
cursor: pointer;
padding: 10px 15px;
background: rgba(31, 54, 101, 0.05);
border-radius: 4px;
border: 1px solid rgba(31, 54, 101, 0.05);
display: inline-block;
}

.design-table .table-click-arrow:hover {
background: rgba(31, 54, 101, 0.08);
}

.design-table .table-delete-icon {
font-size: 20px!important;
cursor: pointer;
padding: 10px 15px;
background: rgba(255, 93, 93, 0.8);
color: #fff;
border-radius: 4px;
border: 1px solid rgba(31, 54, 101, 0.05);
display: inline-block;
}

.design-table .table-delete-icon:hover {
background: rgba(255, 93, 93, 1);
color: #fff;
}

.design-table tr {
background: rgb(250 230 221);
}

.design-table tr:nth-child(even) {
  background: rgb(253 244 241);
}

.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 table.dataTable tbody td {
  padding: 15px;
} */

.design-table .add-btn,
.design-table .add-user-btn {
background: var(--green-color);
color: #fff;
padding: 15px 20px;
border: 1px solid var(--green-color);
border-radius: 4px;
font-size: 14px;
}

.design-table .add-btn:hover {
color: #fff!important;
background-color: var(--green-color-hover)!important;
border: 1px solid var(--green-color-hover)!important;
}

.design-table .filter-btn {
background: #ffc107;
color: rgba(31, 54, 101, 1);
padding: 15px 20px;
border: 1px solid #ffc107;
border-radius: 4px;
font-size: 14px;
margin-left: 10px;
}

.design-table .filter-btn:hover {
color: #fff;
background-color: var(yellow-color-hover);
border-color: var(yellow-color-hover);
}

.design-table .filter-btn.active {
color: #fff;
background-color: var(--yellow-color-hover);
border-color: var(--yellow-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;
}


/**** User Management ****/

.design-table #users-tbl_info {
    font-size: 14px;
    padding-left: 10px;
    opacity: 0.6;
}

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

.form-check-input:checked {
    background-color: #f46420;
    border-color: #f46420;
}

.btn-primary2 {
    background-color: #f46420;
    color: #fff;
}


/**** Loan Applicaiton ****/

.design-table #sales-book-tbl_info {
    font-size: 14px;
    padding-left: 10px;
    opacity: 0.6;
}

.main-btn#clear-filter{
    background: #ffc107;
    border: 1px solid #ffc107;
}

.main-btn-primary.reorder
 {
    background: #ffc107;
    border: 1px solid #ffc107;
}

.bg-light-blue {
  background-color: #cfe6fc;
  padding: 10px;
  border-radius: 5px; 
}
.bg-light-green {
  background-color: #cef2ce;
  padding: 10px;
  border-radius: 5px;
}

.group-title {
  font-size: 15px;
  font-weight: 500;
}

.group-sub-title {
  font-size: 12px;
  margin-bottom: 0.5rem;
}


.list-group { min-height: 200px; }
.list-group strong, .list-group span { font-size: 10px; }
.list-group small { font-size: 10px }
.list-group-item { cursor: move; }
.placeholder-highlight { border: 2px dashed #6c757d; background: #e9ecef; }

/**** 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 .edit-btn {
background: rgba(74, 193, 134, 0.15);
color: #1d6a44;
}

.admin-page .back-btn {
background: rgba(31, 54, 101, 0.1);
color: #1F3665;
}

.admin-page .navigation-title {
font-size: 14px;
opacity: 0.6;
font-weight: 500;
margin-bottom: 0px;
}

.admin-page .content-box h2 {
  font-weight: 600;
}

.admin-page .content-box p {
  font-size: 14px;
  font-weight: 400;
}

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

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

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

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


.admin-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.admin-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.admin-page .tab-navigation .tab-item:hover {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}

.admin-page .tab-navigation .tab-item.active {
background: var(--green-color);
border: 1px solid var(--green-color);
color: #fff;
}

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

.admin-page .heading .icon {
font-size: 40px;
padding: 5px 15px;
background: rgba(255, 255, 255, 0.06);
display: inline-block;
border-radius: 100px;
margin-bottom: 10px;
}

.admin-page .heading h2 {
color: #fff;
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.admin-page .heading p {
color: #fff;
font-size: 16px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.admin-page .title .small-title {
color: var(--primary-color);
font-size: 14px;
margin-bottom: 5px;
font-weight: 400;
opacity: 0.5;
}

.admin-page .title h2 {
font-weight: 700;
font-size: 30px;
margin-bottom: 15px;
}

.admin-page .title h3 {
color: #fff;
font-weight: 400;
font-size: 16px;
margin-bottom: 2px;
}

.admin-page .title h4 {
color: #fff;
font-weight: 400;
font-size: 12px;
margin-bottom: 0px;
}

.admin-page .title p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.admin-page .header-above-box {
    padding: 15px 20px;
    background: rgba(31, 54, 101, 0.06);
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

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

.admin-page .content-box.bigger-padding {
padding: 50px 20px;
}

.admin-page .content-box.primary-header .title h2, .admin-page .content-box.primary-header .title p {
color: #fff;
}

.admin-page .content-box {
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.admin-page .content-box.no-header {
border-radius: 4px;
}

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

.admin-page .card-box {
padding: 20px;
background: #fff;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005);
margin-bottom: 10px;
}

.admin-page .card-box.with-header {
border-radius: 0px 0px 4px 4px;
}

.admin-page .header-above-box  {
display: block;
}

.admin-page .header-above-box h3 {
font-weight: 600;
margin-bottom: 0px;
font-size: 20px;
}

.admin-page .header-above-box p {
font-weight: 400;
margin-bottom: 15px;
opacity: 0.5;
font-size: 14px;
}

.admin-page .header-above-box p:last-child {
margin-bottom: 0px;
}

.admin-page .card-box .header h3 {
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0px;
font-size: 20px;
}

.admin-page .card-box .header p {
font-weight: 400;
color: var(--primary-color);
margin-bottom: 15px;
opacity: 0.5;
font-size: 14px;
}

.admin-page .card-box .targets p {
font-weight: 400;
font-size: 14px;
}

.admin-page .card-box .content {
padding: 20px;
background: #f9f9f9;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005);
margin-bottom: 0px;
color: #000;
border-left: 8px solid rgba(220, 53, 69, 1);
}

.admin-page .card-box .content.under-target {
border-left: 8px solid rgba(220, 53, 69, 1);
}

.admin-page .card-box .content.target {
border-left: 8px solid var(--green-color);
}

.admin-page .card-box .content p {
font-weight: 400;
font-size: 14px;
}

.admin-page .card-box .content p:last-child {
margin-bottom: 0px;
}

.admin-page .card-box .income {
padding: 20px;
background: #f9f9f9;
border-radius: 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005);
margin-bottom: 0px;
color: #000;
}

.admin-page .card-box .income h6 {
font-weight: 600;
font-size: 16px;
}

.admin-page .card-box .income p {
font-weight: 400;
font-size: 14px;
}

.admin-page .card-box .income p:last-child {
margin-bottom: 0px;
}

.admin-page .counter-box {
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.005);
margin-bottom: 10px;
text-align: center;
color: var(--primary-color);
position: relative;
}

.admin-page .counter-box .counter {
font-size: 28px;
font-weight: 700;
margin-bottom: 0px;
}

.admin-page .counter-box .text {
font-size: 14px;
font-weight: 500;
margin-bottom: 0px;
text-transform: uppercase;
opacity: 0.5;
}

.counter-box-icon {
position: absolute;
font-size: 60px;
top: 50%;
transform: translateY(-50%);
opacity: 0.05;
right: 15px;
}

.admin-page .counter-box.bg-active {
background: rgba(74, 193, 134, 0.09);
}

.admin-page .counter-box.bg-overdue {
background: rgba(255, 0, 0, 0.05);
}

.admin-page .products-refresh-btn {
padding: 10px 20px;
background: rgba(31, 54, 101, 0.08);
display: inline-block;
border-radius: 4px;
font-size: 30px;
float: right;
cursor: pointer;
}

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

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

.design-page .heading .icon {
font-size: 40px;
padding: 5px 15px;
background: rgba(255, 255, 255, 0.06);
display: inline-block;
border-radius: 100px;
margin-bottom: 10px;
}

.design-page .heading h2 {
color: #fff;
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.design-page .heading p {
color: #fff;
font-size: 16px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.design-page .title .small-title {
color: var(--primary-color);
font-size: 14px;
margin-bottom: 5px;
font-weight: 400;
opacity: 0.5;
}

.design-page .title h2 {
font-weight: 700;
font-size: 30px;
margin-bottom: 15px;
}

.design-page .title h3 {
color: #fff;
font-weight: 400;
font-size: 16px;
margin-bottom: 2px;
}

.design-page .title h4 {
color: #fff;
font-weight: 400;
font-size: 12px;
margin-bottom: 0px;
}

.design-page .title p {
font-size: 14px;
margin-bottom: 0px;
font-weight: 300;
opacity: 0.6;
}

.design-page .header-above-box {
    padding: 15px 20px;
    background: rgba(31, 54, 101, 0.06);
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

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

.design-page .content-box.bigger-padding {
padding: 50px 20px;
}

.design-page .content-box.primary-header .title h2, .admin-page .content-box.primary-header .title p {
color: #fff;
}

.design-page .content-box {
padding: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
margin-bottom: 20px;
}

.design-page .content-box.header-block h2 {
font-size: 34px;
font-weight: 700;
margin-bottom: 4px;
}

.design-page .content-box.header-block p {
font-size: 16px;
font-weight: 300;
margin-bottom: 0px;
opacity: 0.8;
}

.design-page .patient-info-header {
padding: 40px 20px;
color: var(--primary-color);
}

.design-page .patient-info-header h2 {
font-size: 34px;
font-weight: 700;
margin-bottom: 4px;
}

.design-page .patient-info-header p {
font-size: 16px;
font-weight: 300;
margin-bottom: 0px;
opacity: 0.8;
}

.design-page .patient-info-header p.comments {
font-size: 14px;
font-weight: 300;
margin-bottom: 0px;
opacity: 0.8;
line-height: 16px;
margin-top: 10px;
}

.design-page .content-box.no-header {
border-radius: 4px;
}

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


.design-page .edit-btn {
background: rgba(74, 193, 134, 0.15);
color: #1d6a44;
}

.design-page .back-btn {
background: rgba(31, 54, 101, 0.1);
color: #1F3665;
}

.design-page .tab-navigation.no-header {
border-radius: 4px;
}

.design-page .tab-navigation {
padding: 20px;
margin-bottom: 20px;
background: #fff;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
}

.design-page .tab-navigation .tab-item {
padding: 15px 20px;
background: rgba(31, 54, 101, 0.02);
border: 1px solid #1F3665;
color: #1F3665;
display: block;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.design-page .tab-navigation .tab-item:hover {
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
}

.design-page .tab-navigation .tab-item.active {
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
}

.design-page .navigation-title {
font-size: 14px;
opacity: 0.6;
font-weight: 500;
margin-bottom: 0px;
}

.design-page .header-above-box {
    padding: 15px 20px;
    background: rgba(31, 54, 101, 0.06);
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.design-page .header-above-box .actions {
display: inline-block;
margin-left: auto;
}

.design-page .header-above-box .edit-item-btn {
border-radius: 4px;
background: #000;
padding: 10px 20px;
display: inline-block;
cursor: pointer;
font-size: 14px;
color: #fff;
}

.design-page .header-above-box .edit-item-btn.save-item {
background: var(--green-color);
color: #fff;
}

.design-page .header-above-box .edit-item-btn.save-item:hover {
background: var(--green-color-hover);
color: #fff;
}


.design-table #custom-exercises-list_info {
font-size: 14px;
padding-left: 10px;
opacity: 0.6;
}

/**** Toast Notifications ****/

.toast-container {
  position: fixed;
  bottom: 20px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  z-index: 1050; /* Bootstrap toast default z-index */
  width: 300px; /* Adjust width as needed */
}

.toast {
background-color: #fff;
border: 0px solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

.toast.success-toast .toast-header {
background-color: var(--green-color);  
color: #fff;
padding: 12px 15px;
font-weight: 500;
}

.toast-body {
padding: 12px;
font-size: 12px;
}


/**** FEATURES ****/



/**** Breadcrumb container ****/

.custom-breadcrumb {
  font-size: 14px;
  font-weight: 500;
  color: #6c757d;
}

/* Links */
.custom-breadcrumb a {
  text-decoration: none;
  color: #757171;
  transition: color 0.2s;
}

.custom-breadcrumb a:hover {
  color: var(--green-color);
  text-decoration: none;
}

/* Separator between items */
.custom-breadcrumb .separator {
  margin: 0 6px;
  color: #999;
}

/* Current page (not clickable) */
.custom-breadcrumb .current {
  color: #939495;
}

/**** Breadcrumb container ****/



/**** BUTTON STYLES ****/

.action {
  display: flex;
}

.tbl-btn {
  padding: 3px 9px;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}

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

.btn-warning {
  background: #ffe91f !important;
  color: #000 !important;
}

.btn-danger {
  background: #d51010 !important;
}

/**** BUTTON STYLES ****/

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

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

/**** Books of Account ****/
.books-of-account-view .dashboard-stat-block:hover {
  background-color: #e8f8ff;
  transition: background-color 0.5s ease, transform 0.3s ease;
}

.books-of-account-data-tbl tr th{
  font-size: 15px;
}

.books-of-account.cash-receipt #cash-receipt-tbl{
  width: 1700px;
}

/* .books-of-account.purchase-book #purchase-book-tbl{
  width: 1700px;
} */

/* .books-of-account.cash-disbursement #cash-disbursement-tbl{
  width: 7000px;
} */

/* Fix the first column */
.books-of-account .books-of-account-data-tbl th:first-child,
.books-of-account .books-of-account-data-tbl td:first-child {
    position: sticky;
    left: 0;
    z-index: 2; /* Ensure it stays on top */
    background-color: #eeeff1;
}

/* Ensure first column keeps the same row color */
.books-of-account .books-of-account-data-tbl tr:nth-child(even) td:first-child {
  background-color: #f9f9f9;
}

.books-of-account .books-of-account-data-tbl tr:nth-child(odd) td:first-child {
  background-color: #f4f5f7;
}

.books-of-account .books-of-account-data-tbl th:first-child {
  background-color: #e4e6ea !important;  
}


.books-of-account .books-of-account-data-tbl tfoot tr td:first-child {
  background-color: #eeeff1 !important;  
}


/* Tools General Style  */

.tools-bg-primary {
  background-color: var(--primary-color) !important;
}

.tools-bg-yellow {
  background-color: #ffe91f !important;
}

.tools-btn-warning {
  color: #fff;
  background-color: #f3db00;
  border-color: #f3db00;
}

.tools-btn-danger {
  color: #fff;
  background-color: rgba(255, 93, 93, 1);
  border-color: rgba(255, 93, 93, 1);
}

.tools-btn-primary {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}


/**** 3 Year Had ****/

.txt-primary {
  color: #558815;
}

 .navigation-title {
font-size: 14px;
opacity: 0.6;
font-weight: 500;
margin-bottom: 0px;
}

 .header-above-box {
padding: 20px 20px;
background: rgba(31, 54, 101, 0.06);
align-items: center;
border-radius: 4px 4px 0px 0px;
text-decoration: none;
}

 .header-above-box h5 {
font-size: 18px;
color: var(--primary-color);
font-weight: 600;
margin-bottom: 0px;
}

 .header-above-box p {
font-size: 14px;
color: var(--primary-color);
font-weight: 400;
margin-bottom: 0px;
opacity: 0.6;
}

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

 .content-box h2 {
font-weight: 600;
}

 .content-box h5 {
font-size: 16px;
font-weight: 600;
}

 .content-box p {
font-size: 14px;
font-weight: 400;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 .video-modalhr {
color: rgb(219, 219, 219);
height: 2px!important;
}

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

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


 .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; }
 .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


 .small-form-label {
font-weight: 500;
margin-bottom: 4px;
opacity: 0.7;
font-size: 14px;
}

 .small-form-label-text {
font-weight: 400;
margin-bottom: 10px!important;
opacity: 0.5;
font-size: 12px!important;
}

 .action-steps-block {
padding: 15px;
background: rgba(221, 53, 69, 0.06);
border-radius: 4px;
}

 .numbers-analysis-block {
padding: 15px;
background: rgba(185, 172, 0, 0.3);
border-radius: 4px;
}

 .numbers-analysis-block .header h6 {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}

 .numbers-analysis-block .header p {
font-size: 12px;
font-weight: 400;
margin-bottom: 0px;
}

 .numbers-analysis-block .header .check-gold-standard {
padding: 6px 12px;
background: rgba(185, 172, 0, 0.3);
border-radius: 4px;
cursor: pointer;
font-size: 28px;
}

 .numbers-analysis-block .analysis {
margin-top: 10px;
display: none;
}

 .numbers-analysis-block .analysis p {
font-size: 14px;
font-weight: 400;
margin-bottom: 4px;
vertical-align: middle;
}

 .bg-gold {
background: rgba(185, 172, 0, 0.5);
}

 .numbers-analysis-block .analysis b {
font-weight: 500;
vertical-align: middle;
}

 .numbers-analysis-block .review {
background: rgba(185, 172, 0, 0.1);
padding: 15px;
border-radius: 4px;
}

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

 .button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
}

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

.button-danger {
background: #dc3545;
color: #fff;
}

.button-warning {
background: #ffc107;
color: #fff;
}

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

.button-primary {
  background: var(    --primary-color);
  color: #fff;
}

 .edit-btn {
background: rgba(74, 193, 134, 0.15);
color: #1d6a44;
}

 .back-btn {
background: rgba(31, 54, 101, 0.1);
color: #1F3665;
}

 .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);
  }
  
   .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;
  }
  
   .tab-navigation .tab-item:hover {
  background: #4ac186;
  border: 1px solid #4ac186;
  color: #fff;
  }
  
   .tab-navigation .tab-item.active {
    background: #4ac186;
    border: 1px solid #4ac186;
    color: #fff;
  }

   .btn-danger {
    padding: 3px 9px;
    background: #dc3545;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
  }

   .btn-success {
    padding: 3px 9px;
    background: --green-color;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
  }
  
   .btn-primary {
    padding: 3px 9px;
    background: --primary-color;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
  }
  
   .card-header-primary {
    background-color: #1e3464 !important;
    color: #fff !important;
  }
  
   .fixed-content {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }

  .add_row, .reload_rows {
    padding: 5px 10px;
    
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
  }

  .add_row.success {
    background: var(--green-color);
  }

  .add_row.primary {
    background: var(--primary-color);
  }

  .add_row.secondary {
    background: var(--secondary-color);
  }

  .reload_rows{
    background-color: #ffc107;
  }


.content-box .updated {
  color: var(--primary-color);
  font-size: 12px;
  margin-bottom: 0px;
  font-weight: 500;
  opacity: 0.6;
}

/**** Form ****/


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

/**** Select 2 ****/
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  line-height: 2.6 !important;
}

.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(2.6em + .75rem + 2px) !important;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    line-height: 6.5 !important;
}

.select2-container--bootstrap-5 .select2-selection--single {
    background-position: left 97% center !important;
}

select+.select2-container--bootstrap-5 {
    width: 100% !important;
}

/**** Liquidation Page ****/
.liquidation-page .form-label {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 14px;
}

/**** Mobile ****/

@media (max-width: 768px) {


.admin-bar { width: calc(100%); margin-left: 0px; }

.sidebar { display: none; }
.main-content { padding: 30px 20px; width: calc(100%); }

.page-header h2 { font-size: 24px; }
.page-header p { font-size: 18px; }
.page-header .header-icon { font-size: 40px; }

/*** Library Mobile ***/
.library-category-block .image .text { font-size: 12px; }
.library-category-block .image .overlay { padding: 10px; }
.library-category-block .cat-stats .stat { font-size: 10px; }

.library-title-section .item { font-size: 10px; }
.library-title-section .icon-divider { font-size: 10px; margin: 0px 2px; }

.mobile-sidebar-btn { display: inline-block; }

.main-content .page-header .header-btn { font-size: 12px; padding: 10px 15x; }
.main-content .page-header.primary { padding: 40px; }

.dashboard-stat-block { padding: 15px; }
.dashboard-stat-block .stat-icon { padding: 4px 10px; font-size: 20px; }
.dashboard-stat-block .number { font-size: 20px; }
.dashboard-stat-block .description { font-size: 12px; }

.strategic-planning-page table td .action_steps { width: 200px; /* Set to 150px for small screens */ }

.financial-tracker-page table.monthly-financial-datatable th:first-child, 
.financial-tracker-page table.monthly-financial-datatable td:first-child,
.financial-tracker-page table.quarterly-financial-datatable th:first-child,
.financial-tracker-page table.quarterly-financial-datatable td:first-child {
    position: static; /* Reset position */
    left: auto; /* Reset left positioning */
    z-index: auto; /* Reset z-index */
}

.ethical-growth-calculator-page .btn-text {
  display: none; /* Hide text */
}

.ethical-growth-calculator-page .main-btn-primary, 
.ethical-growth-calculator-page .main-btn {
  justify-content: center; /* Center the icon */
}

}

/**** Tablet ****/

@media (max-width: 991px) {


.admin-bar { width: calc(100%); margin-left: 0px; }

.quick-access-box .quick-link-item {  }

.sidebar { display: none; }
.main-content { padding: 30px 0px; width: calc(100%); margin-left: 0px; }
.profile-page .main-content { padding: 10px 0px; width: calc(100%); }

.page-header h2 { font-size: 24px; }
.page-header p { font-size: 18px; }
.page-header .header-icon { font-size: 40px; }

.mobile-sidebar-btn { display: inline-block; }

.sidebar {
 display: block;
position: fixed; /* Keep the sidebar fixed relative to the viewport */
top: 0;
left: -340px; /* Initially position it off-screen to the left */
width: 340px; /* Width of the sidebar */
height: 100%; /* Full height of the viewport */
background-color: #fff; /* Sidebar background color */
z-index: 999999; /* Ensure sidebar appears above other content */
transition: left 0.3s ease; /* Add a smooth transition effect */
}

.sidebar.show {
  left: 0; /* Slide the sidebar into view by setting left to 0 */
}


.library-category-btn.back p { display: none; }

.navbar { display: block; z-index: 999; }

.sidebar.show .sidebar-close { display: block; z-index: 999999; }

.library-buttons-section { top: 0px; } 

.temp-notice { font-size: 12px; }
.admin-page .products-updated-text { font-size: 12px; }

.library-page .library-buttons-section .content { padding: 50px 20px; }
.library-title-section .first-item { font-size: 26px; }
.library-page .library-title-section .item { font-size: 14px; }

}

/**** OVERRIDE ALL ****/

.main-content.no-sidebar {
margin-left: auto;
min-height: auto;
}

.bg-main-blue {
background: var(--primary-color)!important;
}

.steps-btn.submit {
    background-color: #28a745; /* Green background for the submit button */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.steps-btn.submit:hover {
    background-color: #218838; /* Darker green on hover */
}