@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: #2b602b;
  --secondary-color: #38B6FF;
  --green-color: #4ac186;
  --green-color-hover: #35a46d; 
  --yellow-color: #f3db00;
  --yellow-color-hover: #f3db00;
  --orange-color: #804631;
  --orange-color-hover: #583022;
  --brand-forest: #235f2b;
  --brand-leaf: #3f8a3f;
  --brand-gold: #c9a74f;
  --brand-gold-soft: #fbf4df;
  --brand-earth: #6b4a28;
  --brand-ink: #17321f;
}


.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(157 114 48) 0%, rgb(205 175 110) 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: #2b602b;
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:
linear-gradient(180deg, #245f2c 0%, #1e5127 48%, #173f20 100%);
display: flex;
flex-shrink: 0;
width: 340px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
flex-direction: column!important;
box-shadow: 12px 0 34px rgba(23, 50, 31, 0.16);
padding-bottom: 0px;
}

.sidebar-close {
position: absolute;
z-index: 105;
top: 0px;
right: 0px;
padding: 10px 15px;
background: #b64b3b;
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: 18px 15px 20px;
border-bottom: 1px solid rgba(251, 244, 223, 0.22);
margin-bottom: 5px;
background: linear-gradient(180deg, rgba(251, 244, 223, 0.08), rgba(23, 50, 31, 0));
}

.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: 48%;
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
}

.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(23, 50, 31, 0.18);
}

.sidebar-footer .footer-btn {
color: #fff;
background-color: #b64b3b;
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: #9f3d30;
}


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

.sb-link-header {
color: rgba(251, 244, 223, 0.86);
letter-spacing: 0px;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
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-box {
background: rgba(251, 244, 223, 0.13);
border: 1px solid rgba(251, 244, 223, 0.13);
border-radius: 8px;
padding: 14px;
margin: 18px 0 12px;
}

.sb-box-title {
color: rgba(251, 244, 223, 0.9);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 12px;
}

.sb-box .sb-link {
background: rgba(255, 250, 236, 0.94);
border-radius: 6px;
margin-bottom: 8px;
}

.sb-box .sb-link:last-child {
margin-bottom: 0;
}

.sb-box .sb-link.active {
background: #fff;
}

.sb-link {
  font-weight: 500;
  padding: 11px 15px;
  color: #392816;
  background-color: #fff8e8;
  border: 1px solid rgba(201, 167, 79, 0.24);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  display: -webkit-flex;
  align-items: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.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: #b64b3b;
border-color: rgba(255, 255, 255, 0.14);
color: #fff;
}

.sb-link.active {
color: #17321f;
background: #ffffff;
border-color: rgba(201, 167, 79, 0.42);
box-shadow: inset 4px 0 0 #c9a74f, 0 10px 22px rgba(23, 50, 31, 0.14);
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 {
color: #fff;
background: linear-gradient(135deg, #c9a74f, #8a642d);
border-color: rgba(255, 255, 255, 0.18);
transform: translateX(2px);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
background-size: cover;
}

.sb-link.logout-btn:hover {
  background: #9f3d30;
}

.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: 19px;
line-height: 20px;
display: -webkit-inline-box;
/* border-right: 1px solid rgb(242 101 32 / 45%); */
/* padding-right: 10px; */
margin-right: 10px;
color: currentColor;
}

/**** 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: #2b602b;
}

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

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

/* Corporate dashboard */
.corporate-dashboard {
background:
linear-gradient(180deg, #f7f8f1 0%, #fbfaf4 42%, #ffffff 100%);
color: #17321f;
}

.corporate-dashboard.main-content.with-header {
display: block;
margin-right: 0;
padding-bottom: 46px;
}

.dashboard-hero {
margin: 0;
padding: 38px 38px 32px;
min-height: 300px;
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 28px;
align-items: stretch;
background:
linear-gradient(135deg, rgba(27, 76, 37, 0.98), rgba(38, 92, 45, 0.96) 48%, rgba(117, 87, 40, 0.94)),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: auto, 42px 42px, 42px 42px;
color: #fff;
position: relative;
overflow: hidden;
}

.dashboard-hero::after {
content: "";
position: absolute;
right: -120px;
top: -150px;
width: 420px;
height: 420px;
border-radius: 999px;
background: rgba(201, 167, 79, 0.2);
filter: blur(6px);
}

.dashboard-hero-content,
.dashboard-hero-panel {
position: relative;
z-index: 1;
}

.dashboard-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(251, 244, 223, 0.28);
border-radius: 999px;
background: rgba(251, 244, 223, 0.12);
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}

.dashboard-hero h1 {
font-size: clamp(32px, 4vw, 56px);
line-height: 1.04;
font-weight: 800;
margin: 22px 0 14px;
max-width: 760px;
}

.dashboard-hero p {
font-size: 16px;
line-height: 1.65;
max-width: 680px;
margin: 0;
color: rgba(255, 250, 236, 0.82);
}

.dashboard-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}

.dashboard-primary-action,
.dashboard-secondary-action {
display: inline-flex;
align-items: center;
gap: 9px;
height: 46px;
padding: 0 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.dashboard-primary-action {
background: #ffffff;
color: #17321f;
}

.dashboard-secondary-action {
background: rgba(251, 244, 223, 0.1);
border: 1px solid rgba(251, 244, 223, 0.26);
color: #fff8e8;
}

.dashboard-primary-action:hover,
.dashboard-secondary-action:hover {
transform: translateY(-2px);
}

.dashboard-hero-panel {
align-self: center;
display: grid;
gap: 14px;
padding: 18px;
border: 1px solid rgba(251, 244, 223, 0.2);
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
box-shadow: 0 24px 60px rgba(23, 50, 31, 0.28);
backdrop-filter: blur(12px);
}

.system-status-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border-radius: 8px;
background: rgba(251, 244, 223, 0.15);
}

.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #79d66e;
box-shadow: 0 0 0 6px rgba(121, 214, 110, 0.18);
}

.system-status-card span,
.hero-panel-grid span,
.dashboard-section-title span,
.metric-card span,
.insight-header span {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
opacity: 0.64;
}

.system-status-card strong {
display: block;
font-size: 20px;
line-height: 1.2;
}

.hero-panel-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.hero-panel-grid div {
padding: 14px;
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
min-width: 0;
}

.hero-panel-grid strong {
display: block;
font-size: 14px;
line-height: 1.35;
margin-top: 5px;
word-break: break-word;
}

.dashboard-shell {
padding: 28px 38px 0;
}

.dashboard-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 28px;
}

.metric-card,
.module-card,
.operations-card {
border: 1px solid #e5ddc8;
border-radius: 8px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 12px 32px rgba(57, 40, 22, 0.06);
}

.metric-card {
display: flex;
align-items: center;
gap: 14px;
padding: 18px;
min-height: 92px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.metric-card:hover,
.module-card:hover,
.quick-action:hover {
transform: translateY(-3px);
box-shadow: 0 18px 42px rgba(57, 40, 22, 0.11);
border-color: rgba(201, 167, 79, 0.5);
}

.metric-card strong {
display: block;
font-size: 18px;
line-height: 1.2;
margin-top: 4px;
color: #17321f;
}

.metric-icon,
.module-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 8px;
}

.metric-icon {
width: 46px;
height: 46px;
font-size: 21px;
}

.module-icon {
width: 54px;
height: 54px;
font-size: 24px;
}

.metric-icon.finance,
.module-icon.finance {
background: #e7f7ef;
color: #23602b;
}

.metric-icon.inventory,
.module-icon.inventory {
background: #edf7e8;
color: #3f8a3f;
}

.metric-icon.fleet,
.module-icon.fleet {
background: #fff4d8;
color: #8a642d;
}

.metric-icon.audit,
.module-icon.admin {
background: #f4ecd4;
color: #6b4a28;
}

.module-icon.customer {
background: #eaf6e6;
color: #286b31;
}

.module-icon.supplier {
background: #f6ead8;
color: #70471f;
}

.dashboard-section-title {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 16px;
}

.dashboard-section-title h2 {
font-size: 24px;
font-weight: 800;
line-height: 1.2;
margin: 4px 0 0;
color: #17321f;
}

.dashboard-section-title.compact {
margin-bottom: 14px;
}

.dashboard-section-title.compact h2 {
font-size: 18px;
}

.module-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.module-card {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 16px;
align-items: flex-start;
padding: 20px;
min-height: 150px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.module-copy h3 {
font-size: 17px;
font-weight: 800;
margin: 0 0 8px;
color: #17321f;
}

.module-copy p {
font-size: 13px;
line-height: 1.6;
margin: 0;
color: #64715c;
}

.module-arrow {
font-size: 18px;
color: #b59c60;
}

.dashboard-side-stack {
display: grid;
gap: 16px;
}

.operations-card {
padding: 20px;
}

.quick-action {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 13px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #ffffff;
margin-top: 10px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.quick-action i {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f4ecd4;
color: #23602b;
font-size: 18px;
}

.quick-action span {
font-size: 14px;
font-weight: 700;
color: #17321f;
}

.quick-action strong {
font-size: 12px;
font-weight: 800;
color: #23602b;
}

.insight-card {
background: linear-gradient(135deg, #17321f, #235f2b);
border-color: #235f2b;
color: #ffffff;
}

.insight-header {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 18px;
}

.insight-header i {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
font-size: 20px;
color: #f4d277;
}

.insight-header strong {
display: block;
font-size: 17px;
line-height: 1.25;
margin-top: 3px;
}

.coverage-list {
display: grid;
gap: 10px;
}

.coverage-list div {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 11px 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 13px;
}

.coverage-list b {
color: #f4d277;
}

@media (max-width: 1200px) {
.dashboard-hero {
grid-template-columns: 1fr;
}

.dashboard-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 992px) {
.module-grid {
grid-template-columns: 1fr;
}
}

/* Finance dashboard */
.finance-dashboard-page {
background: linear-gradient(180deg, #f7f8f1 0%, #fbfaf4 45%, #ffffff 100%);
color: #17321f;
}

.finance-dashboard-page.main-content.with-header {
display: block;
margin-right: 0;
padding-bottom: 42px;
}

.finance-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 26px;
align-items: center;
padding: 34px 38px;
background:
linear-gradient(135deg, rgba(27, 76, 37, 0.98), rgba(39, 95, 45, 0.94) 54%, rgba(116, 85, 38, 0.92)),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: auto, 42px 42px, 42px 42px;
color: #ffffff;
}

.finance-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(251, 244, 223, 0.28);
border-radius: 999px;
background: rgba(251, 244, 223, 0.12);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}

.finance-hero h1 {
font-size: clamp(32px, 4vw, 54px);
font-weight: 800;
line-height: 1.05;
margin: 18px 0 12px;
}

.finance-hero p {
max-width: 740px;
margin: 0;
font-size: 15px;
line-height: 1.65;
color: rgba(255, 250, 236, 0.82);
}

.finance-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}

.finance-action {
display: inline-flex;
align-items: center;
gap: 9px;
height: 44px;
padding: 0 16px;
border: 1px solid rgba(251, 244, 223, 0.26);
border-radius: 8px;
background: rgba(251, 244, 223, 0.1);
color: #fff8e8;
font-size: 13px;
font-weight: 800;
transition: transform .18s ease, background .18s ease;
}

.finance-action.primary {
background: #ffffff;
color: #17321f;
}

.finance-action:hover {
transform: translateY(-2px);
}

.finance-health-panel {
padding: 20px;
border: 1px solid rgba(251, 244, 223, 0.2);
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
box-shadow: 0 24px 60px rgba(23, 50, 31, 0.26);
backdrop-filter: blur(12px);
}

.finance-health-panel span,
.finance-panel-header span,
.finance-status-card span {
display: block;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
opacity: 0.64;
}

.finance-health-panel > strong {
display: block;
margin-top: 6px;
font-size: 34px;
line-height: 1.15;
}

.finance-health-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}

.finance-health-grid div {
padding: 12px;
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
}

.finance-health-grid small {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
opacity: .7;
}

.finance-health-grid b {
display: block;
margin-top: 5px;
font-size: 14px;
}

.finance-dashboard-shell {
padding: 28px 38px 0;
}

.finance-status-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 24px;
}

.finance-status-card,
.finance-panel {
border: 1px solid #e5ddc8;
border-radius: 8px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 32px rgba(57, 40, 22, 0.06);
}

.finance-status-card {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 18px;
min-height: 112px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.finance-status-card:hover,
.finance-tool-list a:hover {
transform: translateY(-3px);
box-shadow: 0 18px 42px rgba(57, 40, 22, 0.11);
border-color: rgba(201, 167, 79, 0.5);
}

.finance-status-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 8px;
background: #e7f7ef;
color: #23602b;
font-size: 22px;
}

.finance-status-icon.gold {
background: #fff4d8;
color: #8a642d;
}

.finance-status-icon.earth {
background: #f4ecd4;
color: #6b4a28;
}

.finance-status-icon.alert {
background: #f8e7e2;
color: #9f3d30;
}

.finance-status-card strong {
display: block;
font-size: 22px;
line-height: 1.2;
margin-top: 4px;
color: #17321f;
}

.finance-status-card small {
display: block;
margin-top: 5px;
font-size: 12px;
color: #64715c;
}

.finance-panel {
padding: 20px;
height: 100%;
}

.finance-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}

.finance-panel-header h2 {
font-size: 22px;
font-weight: 800;
line-height: 1.2;
margin: 4px 0 0;
color: #17321f;
}

.finance-panel-header.compact h2 {
font-size: 18px;
}

.finance-panel-total {
text-align: right;
}

.finance-panel-total small {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: #64715c;
}

.finance-panel-total strong {
display: block;
font-size: 18px;
color: #23602b;
}

.accounting-feature-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

.accounting-feature-card {
position: relative;
padding: 16px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #fffdf7;
min-height: 132px;
}

.accounting-feature-card i {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f4ecd4;
color: #23602b;
font-size: 19px;
margin-bottom: 14px;
}

.accounting-feature-card span {
display: block;
font-size: 13px;
font-weight: 800;
color: #17321f;
}

.accounting-feature-card strong {
display: block;
font-size: 24px;
line-height: 1.2;
margin-top: 6px;
color: #17321f;
}

.accounting-feature-card small {
display: block;
font-size: 12px;
font-weight: 700;
color: #23602b;
}

.accounting-feature-card.is-unavailable {
opacity: .72;
}

.feature-status {
display: inline-block;
margin-top: 8px;
font-size: 11px;
font-style: normal;
font-weight: 800;
color: #9f3d30;
}

.finance-tools-panel {
min-height: 100%;
}

.finance-tool-list {
display: grid;
gap: 10px;
}

.finance-tool-list a {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 13px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #ffffff;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.finance-tool-list i {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f4ecd4;
color: #23602b;
font-size: 18px;
}

.finance-tool-list span {
font-size: 14px;
font-weight: 800;
color: #17321f;
}

.finance-tool-list b {
font-size: 12px;
font-weight: 800;
color: #23602b;
white-space: nowrap;
}

.finance-panel .design-table table {
margin-bottom: 0;
}

.finance-panel .design-table thead th {
background: #f4ecd4;
color: #6b4a28;
border-bottom: 0;
}

@media (max-width: 1200px) {
.finance-hero,
.finance-status-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accounting-feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 768px) {
.finance-dashboard-page.main-content.with-header {
padding: 0 0 28px;
}

.finance-hero {
grid-template-columns: 1fr;
padding: 28px 20px;
}

.finance-health-panel > strong {
font-size: 28px;
}

.finance-dashboard-shell {
padding: 20px 15px 0;
}

.finance-status-grid,
.accounting-feature-grid {
grid-template-columns: 1fr;
}

.finance-panel-header {
display: block;
}

.finance-panel-total {
text-align: left;
margin-top: 10px;
}

.finance-tool-list a {
grid-template-columns: 40px minmax(0, 1fr);
}

.finance-tool-list b {
grid-column: 2;
}
}

/* Car dashboard */
.car-dashboard-page {
background: linear-gradient(180deg, #f7f8f1 0%, #fbfaf4 45%, #ffffff 100%);
color: #17321f;
}

.car-dashboard-page.main-content.with-header {
display: block;
margin-right: 0;
padding-bottom: 42px;
}

.car-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 26px;
align-items: center;
padding: 34px 38px;
background:
linear-gradient(135deg, rgba(27, 76, 37, 0.98), rgba(42, 90, 43, 0.95) 54%, rgba(116, 85, 38, 0.92)),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: auto, 42px 42px, 42px 42px;
color: #ffffff;
}

.car-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(251, 244, 223, 0.28);
border-radius: 999px;
background: rgba(251, 244, 223, 0.12);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}

.car-hero h1 {
font-size: clamp(32px, 4vw, 54px);
font-weight: 800;
line-height: 1.05;
margin: 18px 0 12px;
}

.car-hero p {
max-width: 720px;
margin: 0;
font-size: 15px;
line-height: 1.65;
color: rgba(255, 250, 236, 0.82);
}

.car-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}

.car-action {
display: inline-flex;
align-items: center;
gap: 9px;
height: 44px;
padding: 0 16px;
border: 1px solid rgba(251, 244, 223, 0.26);
border-radius: 8px;
background: rgba(251, 244, 223, 0.1);
color: #fff8e8;
font-size: 13px;
font-weight: 800;
transition: transform .18s ease, background .18s ease;
}

.car-action.primary {
background: #ffffff;
color: #17321f;
}

.car-action:hover {
transform: translateY(-2px);
}

.car-health-panel {
padding: 20px;
border: 1px solid rgba(251, 244, 223, 0.2);
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
box-shadow: 0 24px 60px rgba(23, 50, 31, 0.26);
backdrop-filter: blur(12px);
}

.car-health-panel span,
.car-panel-header span,
.car-status-card span {
display: block;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
opacity: 0.64;
}

.car-health-panel > strong {
display: block;
margin-top: 6px;
font-size: 42px;
line-height: 1.05;
}

.car-health-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}

.car-health-grid div {
padding: 12px;
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
}

.car-health-grid small {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
opacity: .7;
}

.car-health-grid b {
display: block;
margin-top: 5px;
font-size: 14px;
}

.car-dashboard-shell {
padding: 28px 38px 0;
}

.car-status-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 24px;
}

.car-status-card,
.car-panel {
border: 1px solid #e5ddc8;
border-radius: 8px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 32px rgba(57, 40, 22, 0.06);
}

.car-status-card {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 18px;
min-height: 112px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.car-status-card:hover,
.car-tool-list a:hover {
transform: translateY(-3px);
box-shadow: 0 18px 42px rgba(57, 40, 22, 0.11);
border-color: rgba(201, 167, 79, 0.5);
}

.car-status-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 8px;
background: #e7f7ef;
color: #23602b;
font-size: 22px;
}

.car-status-icon.gold {
background: #fff4d8;
color: #8a642d;
}

.car-status-icon.leaf {
background: #edf7e8;
color: #3f8a3f;
}

.car-status-icon.earth {
background: #f4ecd4;
color: #6b4a28;
}

.car-status-card strong {
display: block;
font-size: 22px;
line-height: 1.2;
margin-top: 4px;
color: #17321f;
}

.car-status-card small {
display: block;
margin-top: 5px;
font-size: 12px;
color: #64715c;
}

.car-panel {
padding: 20px;
height: 100%;
}

.car-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}

.car-panel-header h2 {
font-size: 22px;
font-weight: 800;
line-height: 1.2;
margin: 4px 0 0;
color: #17321f;
}

.car-panel-header.compact h2 {
font-size: 18px;
}

.fleet-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

.fleet-summary-card {
padding: 16px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #fffdf7;
min-height: 128px;
}

.fleet-summary-card i {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f4ecd4;
color: #23602b;
font-size: 19px;
margin-bottom: 14px;
}

.fleet-summary-card span {
display: block;
font-size: 13px;
font-weight: 800;
color: #17321f;
}

.fleet-summary-card strong {
display: block;
font-size: 26px;
line-height: 1.2;
margin-top: 6px;
color: #17321f;
}

.car-tool-list {
display: grid;
gap: 10px;
}

.car-tool-list a {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 13px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #ffffff;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.car-tool-list i {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f4ecd4;
color: #23602b;
font-size: 18px;
}

.car-tool-list span {
font-size: 14px;
font-weight: 800;
color: #17321f;
}

.car-tool-list b {
font-size: 12px;
font-weight: 800;
color: #23602b;
white-space: nowrap;
}

.car-panel .design-table table {
margin-bottom: 0;
}

.car-panel .design-table thead th {
background: #f4ecd4;
color: #6b4a28;
border-bottom: 0;
}

@media (max-width: 1200px) {
.car-hero,
.car-status-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fleet-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 768px) {
.car-dashboard-page.main-content.with-header {
padding: 0 0 28px;
}

.car-hero {
grid-template-columns: 1fr;
padding: 28px 20px;
}

.car-health-panel > strong {
font-size: 34px;
}

.car-dashboard-shell {
padding: 20px 15px 0;
}

.car-status-grid,
.fleet-summary-grid {
grid-template-columns: 1fr;
}

.car-panel-header {
display: block;
}

.car-tool-list a {
grid-template-columns: 40px minmax(0, 1fr);
}

.car-tool-list b {
grid-column: 2;
}
}

/* Inventory dashboard */
.inventory-dashboard-page {
background: linear-gradient(180deg, #f7f8f1 0%, #fbfaf4 45%, #ffffff 100%);
color: #17321f;
}

.inventory-dashboard-page.main-content.with-header {
display: block;
margin-right: 0;
padding-bottom: 42px;
}

.inventory-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 26px;
align-items: center;
padding: 34px 38px;
background:
linear-gradient(135deg, rgba(27, 76, 37, 0.98), rgba(42, 90, 43, 0.95) 54%, rgba(116, 85, 38, 0.92)),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: auto, 42px 42px, 42px 42px;
color: #ffffff;
}

.inventory-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(251, 244, 223, 0.28);
border-radius: 999px;
background: rgba(251, 244, 223, 0.12);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}

.inventory-hero h1 {
font-size: clamp(32px, 4vw, 54px);
font-weight: 800;
line-height: 1.05;
margin: 18px 0 12px;
}

.inventory-hero p {
max-width: 720px;
margin: 0;
font-size: 15px;
line-height: 1.65;
color: rgba(255, 250, 236, 0.82);
}

.inventory-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}

.inventory-action {
display: inline-flex;
align-items: center;
gap: 9px;
height: 44px;
padding: 0 16px;
border: 1px solid rgba(251, 244, 223, 0.26);
border-radius: 8px;
background: rgba(251, 244, 223, 0.1);
color: #fff8e8;
font-size: 13px;
font-weight: 800;
transition: transform .18s ease, background .18s ease;
}

.inventory-action.primary {
background: #ffffff;
color: #17321f;
}

.inventory-action:hover {
transform: translateY(-2px);
}

.inventory-health-panel {
padding: 20px;
border: 1px solid rgba(251, 244, 223, 0.2);
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
box-shadow: 0 24px 60px rgba(23, 50, 31, 0.26);
backdrop-filter: blur(12px);
}

.inventory-health-panel span,
.inventory-panel-header span,
.inventory-status-card span {
display: block;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
opacity: 0.64;
}

.inventory-health-panel > strong {
display: block;
margin-top: 6px;
font-size: 42px;
line-height: 1.05;
}

.inventory-health-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}

.inventory-health-grid div {
padding: 12px;
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
}

.inventory-health-grid small {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
opacity: .7;
}

.inventory-health-grid b {
display: block;
margin-top: 5px;
font-size: 14px;
}

.inventory-dashboard-shell {
padding: 28px 38px 0;
}

.inventory-status-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 24px;
}

.inventory-status-card,
.inventory-panel {
border: 1px solid #e5ddc8;
border-radius: 8px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 32px rgba(57, 40, 22, 0.06);
}

.inventory-status-card {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 18px;
min-height: 112px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.inventory-status-card:hover,
.inventory-tool-list a:hover,
.inventory-module-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 42px rgba(57, 40, 22, 0.11);
border-color: rgba(201, 167, 79, 0.5);
}

.inventory-status-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 8px;
background: #e7f7ef;
color: #23602b;
font-size: 22px;
}

.inventory-status-icon.gold {
background: #fff4d8;
color: #8a642d;
}

.inventory-status-icon.earth {
background: #f4ecd4;
color: #6b4a28;
}

.inventory-status-icon.leaf {
background: #edf7e8;
color: #3f8a3f;
}

.inventory-status-card strong {
display: block;
font-size: 22px;
line-height: 1.2;
margin-top: 4px;
color: #17321f;
}

.inventory-status-card small {
display: block;
margin-top: 5px;
font-size: 12px;
color: #64715c;
}

.inventory-panel {
padding: 20px;
height: 100%;
}

.inventory-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}

.inventory-panel-header h2 {
font-size: 22px;
font-weight: 800;
line-height: 1.2;
margin: 4px 0 0;
color: #17321f;
}

.inventory-panel-header.compact h2 {
font-size: 18px;
}

.inventory-panel-total {
text-align: right;
}

.inventory-panel-total small {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: #64715c;
}

.inventory-panel-total strong {
display: block;
font-size: 18px;
color: #23602b;
}

.inventory-module-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.inventory-module-card {
display: block;
padding: 16px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #fffdf7;
min-height: 132px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.inventory-module-card i {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f4ecd4;
color: #23602b;
font-size: 19px;
margin-bottom: 14px;
}

.inventory-module-card span {
display: block;
font-size: 13px;
font-weight: 800;
color: #17321f;
}

.inventory-module-card strong {
display: block;
font-size: 24px;
line-height: 1.2;
margin-top: 6px;
color: #17321f;
}

.inventory-module-card small {
display: block;
font-size: 12px;
font-weight: 700;
color: #23602b;
}

.inventory-tool-list {
display: grid;
gap: 10px;
}

.inventory-tool-list a {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 13px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #ffffff;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.inventory-tool-list i {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f4ecd4;
color: #23602b;
font-size: 18px;
}

.inventory-tool-list span {
font-size: 14px;
font-weight: 800;
color: #17321f;
}

.inventory-tool-list b {
font-size: 12px;
font-weight: 800;
color: #23602b;
white-space: nowrap;
}

.inventory-panel .design-table table {
margin-bottom: 0;
}

.inventory-panel .design-table thead th {
background: #f4ecd4;
color: #6b4a28;
border-bottom: 0;
}

@media (max-width: 1200px) {
.inventory-hero,
.inventory-status-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inventory-module-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 768px) {
.inventory-dashboard-page.main-content.with-header {
padding: 0 0 28px;
}

.inventory-hero {
grid-template-columns: 1fr;
padding: 28px 20px;
}

.inventory-health-panel > strong {
font-size: 34px;
}

.inventory-dashboard-shell {
padding: 20px 15px 0;
}

.inventory-status-grid,
.inventory-module-grid {
grid-template-columns: 1fr;
}

.inventory-panel-header {
display: block;
}

.inventory-panel-total {
text-align: left;
margin-top: 10px;
}

.inventory-tool-list a {
grid-template-columns: 40px minmax(0, 1fr);
}

.inventory-tool-list b {
grid-column: 2;
}
}

/* HR dashboard */
.admin-hr-dashboard-page {
background: linear-gradient(180deg, #f7f8f1 0%, #fbfaf4 45%, #ffffff 100%);
color: #17321f;
}

.admin-hr-dashboard-page.main-content.with-header {
display: block;
margin-right: 0;
padding-bottom: 42px;
}

.admin-hr-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 26px;
align-items: center;
padding: 34px 38px;
background:
linear-gradient(135deg, rgba(27, 76, 37, 0.98), rgba(39, 95, 45, 0.94) 54%, rgba(116, 85, 38, 0.92)),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: auto, 42px 42px, 42px 42px;
color: #fff;
}

.admin-hr-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(251, 244, 223, 0.28);
border-radius: 999px;
background: rgba(251, 244, 223, 0.12);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}

.admin-hr-hero h1 {
font-size: clamp(32px, 4vw, 54px);
font-weight: 800;
line-height: 1.05;
margin: 18px 0 12px;
}

.admin-hr-hero p {
max-width: 720px;
margin: 0;
font-size: 15px;
line-height: 1.65;
color: rgba(255, 250, 236, 0.82);
}

.admin-hr-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}

.admin-hr-action {
display: inline-flex;
align-items: center;
gap: 9px;
height: 44px;
padding: 0 16px;
border: 1px solid rgba(251, 244, 223, 0.26);
border-radius: 8px;
background: rgba(251, 244, 223, 0.1);
color: #fff8e8;
font-size: 13px;
font-weight: 800;
transition: transform .18s ease, background .18s ease;
}

.admin-hr-action.primary {
background: #ffffff;
color: #17321f;
}

.admin-hr-action:hover {
transform: translateY(-2px);
}

.admin-hr-health-panel {
padding: 20px;
border: 1px solid rgba(251, 244, 223, 0.2);
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
box-shadow: 0 24px 60px rgba(23, 50, 31, 0.26);
backdrop-filter: blur(12px);
}

.admin-hr-health-panel span,
.admin-hr-panel-header span,
.admin-hr-status-card span {
display: block;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
opacity: 0.64;
}

.admin-hr-health-panel > strong {
display: block;
margin-top: 6px;
font-size: 34px;
line-height: 1.05;
}

.admin-hr-health-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}

.admin-hr-health-grid div {
padding: 12px;
border-radius: 8px;
background: rgba(251, 244, 223, 0.12);
}

.admin-hr-health-grid small {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
opacity: .7;
}

.admin-hr-health-grid b {
display: block;
margin-top: 5px;
font-size: 14px;
}

.admin-hr-dashboard-shell {
padding: 28px 38px 0;
}

.admin-hr-status-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 24px;
}

.admin-hr-status-card,
.admin-hr-panel {
border: 1px solid #e5ddc8;
border-radius: 8px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 32px rgba(57, 40, 22, 0.06);
}

.admin-hr-status-card {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 18px;
min-height: 112px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.admin-hr-status-card:hover,
.admin-hr-tool-list a:hover {
transform: translateY(-3px);
box-shadow: 0 18px 42px rgba(57, 40, 22, 0.11);
border-color: rgba(201, 167, 79, 0.5);
}

.admin-hr-status-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 8px;
background: #e7f7ef;
color: #23602b;
font-size: 22px;
}

.admin-hr-status-icon.gold {
background: #fff4d8;
color: #8a642d;
}

.admin-hr-status-icon.purple {
background: #f4ecd4;
color: #6b4a28;
}

.admin-hr-status-icon.earth {
background: #f8e7e2;
color: #9f3d30;
}

.admin-hr-status-card strong {
display: block;
font-size: 22px;
line-height: 1.2;
margin-top: 4px;
color: #17321f;
}

.admin-hr-status-card small {
display: block;
margin-top: 5px;
font-size: 12px;
color: #64715c;
}

.admin-hr-panel {
padding: 20px;
height: 100%;
}

.admin-hr-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}

.admin-hr-panel-header h2 {
font-size: 22px;
font-weight: 800;
line-height: 1.2;
margin: 4px 0 0;
color: #17321f;
}

.admin-hr-panel-header.compact h2 {
font-size: 18px;
}

.admin-hr-module-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.admin-hr-module-card {
display: block;
padding: 16px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #fffdf7;
min-height: 132px;
color: #17321f;
}

.admin-hr-module-card i {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f4ecd4;
color: #23602b;
font-size: 19px;
margin-bottom: 14px;
}

.admin-hr-module-card span {
display: block;
font-size: 13px;
font-weight: 800;
color: #17321f;
}

.admin-hr-module-card small {
display: block;
font-size: 12px;
font-weight: 700;
color: #64715c;
margin-top: 8px;
}

.admin-hr-tool-list {
display: grid;
gap: 10px;
}

.admin-hr-tool-list a {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 13px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #ffffff;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.admin-hr-tool-list i {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f4ecd4;
color: #23602b;
font-size: 18px;
}

.admin-hr-tool-list span {
font-size: 14px;
font-weight: 800;
color: #17321f;
}

.admin-hr-tool-list b {
font-size: 12px;
font-weight: 800;
color: #23602b;
white-space: nowrap;
}

@media (max-width: 1200px) {
.admin-hr-hero,
.admin-hr-status-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-hr-module-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.admin-hr-dashboard-page.main-content.with-header {
padding: 0 0 28px;
}

.admin-hr-hero {
grid-template-columns: 1fr;
padding: 28px 20px;
}

.admin-hr-health-panel > strong {
font-size: 34px;
}

.admin-hr-dashboard-shell {
padding: 20px 15px 0;
}

.admin-hr-status-grid,
.admin-hr-module-grid {
grid-template-columns: 1fr;
}

.admin-hr-panel-header {
display: block;
}

.admin-hr-tool-list a {
grid-template-columns: 40px minmax(0, 1fr);
}

.admin-hr-tool-list b {
grid-column: 2;
}
}

/* User management */
.system-settings-user-page.main-content.with-header {
background:
linear-gradient(180deg, rgba(244, 236, 212, 0.72) 0%, rgba(248, 250, 247, 0.92) 290px, #f8faf7 100%);
padding-bottom: 36px;
}

.system-settings-hero {
margin: 0;
padding: 34px 38px 30px;
background:
linear-gradient(135deg, rgba(23, 50, 31, 0.96), rgba(35, 95, 43, 0.93) 54%, rgba(107, 74, 40, 0.9)),
linear-gradient(45deg, rgba(201, 167, 79, 0.24), transparent 55%);
color: #ffffff;
box-shadow: 0 20px 60px rgba(23, 50, 31, 0.18);
}

.system-settings-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(251, 244, 223, 0.28);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
color: #fbf4df;
margin-bottom: 15px;
}

.system-settings-hero h2 {
font-size: clamp(34px, 4vw, 54px);
font-weight: 800;
line-height: 1.02;
margin: 0 0 12px;
color: #ffffff;
}

.system-settings-hero p {
max-width: 720px;
font-size: 16px;
line-height: 1.65;
font-weight: 500;
color: rgba(255, 255, 255, 0.84);
margin: 0;
}

.system-settings-hero-card {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 14px;
padding: 18px;
border: 1px solid rgba(251, 244, 223, 0.28);
border-radius: 8px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
}

.system-settings-hero-card i {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 8px;
background: #fbf4df;
color: #235f2b;
font-size: 24px;
}

.system-settings-hero-card span {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: rgba(251, 244, 223, 0.82);
}

.system-settings-hero-card strong {
display: block;
font-size: 20px;
font-weight: 800;
color: #ffffff;
}

.system-settings-shell {
padding: 28px 38px 0;
}

.system-settings-panel {
height: 100%;
border: 1px solid #e5d7b9;
border-radius: 8px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 16px 45px rgba(23, 50, 31, 0.08);
overflow: hidden;
}

.access-form-panel {
padding: 22px;
}

.account-list-panel {
padding: 22px;
}

.system-settings-panel-header {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 12px;
margin-bottom: 20px;
}

.system-settings-panel-header > i {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 8px;
background: #fbf4df;
color: #235f2b;
font-size: 20px;
}

.system-settings-panel-header span {
display: block;
font-size: 12px;
font-weight: 800;
letter-spacing: .02em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 4px;
}

.system-settings-panel-header h2 {
font-size: 20px;
line-height: 1.2;
font-weight: 800;
color: #17321f;
margin: 0;
}

.system-settings-user-page .form-label {
font-size: 13px;
font-weight: 800;
color: #17321f;
margin-bottom: 8px;
}

.system-settings-user-page .form-select,
.system-settings-user-page .dataTables_filter input {
min-height: 44px;
border: 1px solid #d8dfd5;
border-radius: 8px;
font-size: 14px;
color: #17321f;
box-shadow: none;
}

.system-settings-user-page .form-select:focus,
.system-settings-user-page .dataTables_filter input:focus {
border-color: #3f8a3f;
box-shadow: 0 0 0 3px rgba(63, 138, 63, 0.14);
}

.system-primary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
border: 0;
border-radius: 8px;
background: linear-gradient(135deg, #235f2b, #3f8a3f);
color: #ffffff;
font-size: 14px;
font-weight: 800;
box-shadow: 0 12px 24px rgba(35, 95, 43, 0.2);
}

.system-primary-btn:hover,
.system-primary-btn:focus {
background: linear-gradient(135deg, #17321f, #235f2b);
color: #ffffff;
}

.system-secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
border: 1px solid #d8dfd5;
border-radius: 8px;
background: #ffffff;
color: #235f2b;
font-size: 14px;
font-weight: 800;
}

.system-secondary-btn:hover,
.system-secondary-btn:focus {
background: #f6f9ee;
border-color: #3f8a3f;
color: #17321f;
}

.system-settings-user-page .employee-account-list .design-table {
overflow-x: auto;
border: 1px solid #eadfca;
border-radius: 8px;
}

.system-settings-user-page .employee-account-table {
min-width: 980px;
margin-bottom: 0;
}

.system-settings-user-page .employee-account-table thead th {
background: #f4ecd4;
color: #6b4a28;
border-bottom: 0;
font-size: 13px;
font-weight: 800;
white-space: nowrap;
padding: 16px 18px;
}

.system-settings-user-page .employee-account-table tbody td {
vertical-align: middle;
font-size: 13px;
line-height: 1.45;
color: #20242c;
padding: 16px 18px;
}

.system-settings-user-page .employee-account-table tbody tr:nth-child(even) td {
background: #fbf2ef;
}

.system-settings-user-page .employee-account-table tbody tr:hover td {
background: #f6f9ee;
}

.system-settings-user-page .employee-account-table td:nth-child(5) {
max-width: 230px;
word-break: break-word;
}

.system-settings-user-page .employee-account-table .small-text {
font-size: 11px;
font-weight: 700;
color: #7a8178;
margin-top: 5px;
}

.system-settings-user-page .status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
padding: 7px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}

.system-settings-user-page .status-badge.present {
background: #e4f8e9;
color: #207a37;
}

.system-settings-user-page .status-badge.late {
background: #fff5dc;
color: #8a5b00;
}

.system-settings-user-page .table-action-group {
display: inline-flex;
justify-content: flex-end;
gap: 7px;
white-space: nowrap;
}

.system-settings-user-page .table-icon-btn {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid #dfe7db;
border-radius: 8px;
background: #ffffff;
color: #235f2b;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.system-settings-user-page .table-icon-btn:hover {
transform: translateY(-1px);
border-color: #3f8a3f;
background: #f6f9ee;
}

.system-settings-user-page .table-icon-btn.delete {
color: #c23b3b;
}

.system-settings-user-page .dataTables_wrapper .dataTables_filter {
float: none;
text-align: left;
margin-bottom: 14px;
}

.system-settings-user-page .dataTables_wrapper .dataTables_filter input {
width: 100%;
margin-left: 0;
padding: 0 14px;
}

.system-settings-user-page .dataTables_wrapper .dataTables_info {
font-size: 13px;
font-weight: 600;
color: #687263;
padding-top: 14px;
}

.system-settings-user-page .dataTables_wrapper .dataTables_paginate {
padding-top: 10px;
}

.credential-box {
display: grid;
gap: 10px;
}

.credential-box div {
padding: 12px 14px;
border: 1px solid #e8dfc9;
border-radius: 8px;
background: #fffdf7;
}

.credential-box span {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: #64715c;
margin-bottom: 4px;
}

.credential-box strong {
display: block;
font-size: 16px;
font-weight: 800;
color: #17321f;
word-break: break-all;
}

/* Roles and permissions */
.role-form-panel,
.role-list-panel {
min-height: 100%;
padding: 24px;
}

.role-permission-page .required {
color: #c23b3b;
}

.role-permission-page .form-control {
min-height: 44px;
border: 1px solid #d8dfd5;
border-radius: 8px;
font-size: 14px;
color: #17321f;
box-shadow: none;
}

.role-permission-page .form-control:focus {
border-color: #3f8a3f;
box-shadow: 0 0 0 3px rgba(63, 138, 63, 0.14);
}

.role-table-wrap {
border: 1px solid #eadfca;
border-radius: 8px;
overflow: hidden;
margin-top: 6px;
}

.role-list-panel .dataTables_wrapper {
display: grid;
gap: 14px;
}

.role-list-panel .dataTables_wrapper .dataTables_filter {
margin-bottom: 0;
}

.role-list-panel .dataTables_wrapper .dataTables_info {
padding-top: 0;
}

.role-list-panel .dataTables_wrapper .dataTables_paginate {
padding-top: 0;
}

.role-table {
margin-bottom: 0;
}

.role-table thead th {
background: #f4ecd4;
color: #6b4a28;
font-size: 13px;
font-weight: 800;
border-bottom: 0;
padding: 15px 16px;
}

.role-table tbody td {
vertical-align: middle;
font-size: 13px;
padding: 14px 16px;
color: #20242c;
}

.role-table tbody tr:nth-child(even) td {
background: #fbf2ef;
}

.role-table strong {
display: block;
font-size: 14px;
color: #17321f;
}

.role-permission-page .table-icon-btn:disabled {
opacity: .38;
cursor: not-allowed;
transform: none;
}

.permission-panel {
padding: 22px;
}

.permission-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}

.save-permissions-btn {
width: auto;
padding: 0 18px;
white-space: nowrap;
}

.save-permissions-btn:disabled {
opacity: .55;
cursor: not-allowed;
}

.empty-permission-state {
display: grid;
place-items: center;
min-height: 180px;
border: 1px dashed #d7c8a8;
border-radius: 8px;
background: #fffdf7;
color: #6b7280;
font-size: 14px;
font-weight: 700;
text-align: center;
padding: 24px;
}

.permission-table-wrap {
border: 1px solid #eadfca;
border-radius: 8px;
overflow: auto;
max-height: 620px;
}

.permission-table {
min-width: 980px;
margin-bottom: 0;
}

.permission-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: #f4ecd4;
color: #6b4a28;
font-size: 13px;
font-weight: 800;
border-bottom: 1px solid #e8dfc9;
padding: 14px 16px;
}

.permission-table tbody td {
vertical-align: middle;
font-size: 13px;
color: #20242c;
border-color: #edf0eb;
padding: 13px 16px;
}

.permission-table tbody tr:nth-child(even) td:not(.permission-module) {
background: #fbf8ef;
}

.permission-module {
width: 240px;
background: #f6f9ee;
color: #17321f;
font-weight: 800;
border-right: 1px solid #e1eadb;
}

.permission-check {
width: 17px;
height: 17px;
accent-color: #235f2b;
cursor: pointer;
}

@media (max-width: 768px) {
.permission-panel-header {
display: block;
}

.save-permissions-btn {
width: 100%;
margin-top: 16px;
}
}

@media (max-width: 991px) {
.system-settings-hero,
.system-settings-shell {
padding-left: 20px;
padding-right: 20px;
}

.system-settings-hero h2 {
font-size: 34px;
}
}

@media (max-width: 576px) {
.system-settings-hero {
padding-top: 26px;
}

.system-settings-panel-header {
grid-template-columns: 40px minmax(0, 1fr);
}

.system-settings-panel-header > i {
width: 40px;
height: 40px;
}
}





/**** 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 #1e5623;
background: #1e5623;
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: #2b602b;
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 {
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #2b602b;
  border: 1px solid #2b602b;
  border-radius: 100px;
}

.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: #2b602b;
  border: 1px solid #2b602b;
  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: #804632;
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: #f8ebe6;
}

.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(--orange-color);
color: #fff;
padding: 15px 20px;
border: 1px solid var(--orange-color);
border-radius: 4px;
font-size: 14px;
}

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

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

.design-table .filter-btn {
    background: #efcc71;
    color: rgba(31, 54, 101, 1);
    padding: 15px 20px;
    border: 1px solid #f0cb71;
    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: 35px;
    width: 35px;
    font-size: 18px;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 .125rem .25rem rgb(0 0 0 / 9%);
    cursor: pointer;
    position: relative;
}

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

.btn-primary2 {
    background-color: #804632;
    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: #fff !important;
background-size: cover;
color: #000;
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: #000;
font-weight: 700;
font-size: 40px;
margin-bottom: 2px;
}

.admin-page .heading p {
color: #000;
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: #2b602b;
}

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

.audit-page .main-content-area {
width: 100%;
}

.audit-page .audit-header-box {
border-radius: 4px;
padding: 28px 20px;
}

.audit-page .audit-header-box .tool-title {
font-size: 34px;
font-weight: 700;
margin-bottom: 6px;
}

.audit-page .audit-header-box p {
font-size: 15px;
color: #071944;
margin-bottom: 0;
}

.audit-page .audit-header-icon {
width: 54px;
height: 54px;
border-radius: 8px;
background: rgba(43, 96, 43, 0.1);
color: #2b602b;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}

.audit-page .audit-summary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
}

.audit-page .audit-summary-card {
background: #fff;
border-radius: 4px;
padding: 16px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.02);
display: flex;
align-items: center;
gap: 12px;
min-height: 86px;
}

.audit-page .audit-summary-icon {
width: 42px;
height: 42px;
border-radius: 8px;
background: rgba(43, 96, 43, 0.1);
color: #2b602b;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex: 0 0 auto;
}

.audit-page .audit-summary-card p {
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
color: rgba(7, 25, 68, 0.55);
margin-bottom: 3px;
}

.audit-page .audit-summary-card h3 {
font-size: 26px;
font-weight: 700;
color: #071944;
margin-bottom: 0;
}

.audit-page .audit-filter-box {
border-radius: 4px;
padding: 16px;
}

.audit-page .audit-filter-title h5 {
font-size: 14px;
font-weight: 700;
color: #2b602b;
margin-bottom: 12px;
}

.audit-page .audit-filter-box .form-control {
max-width: 220px;
min-height: 44px;
border-radius: 4px;
font-size: 14px;
}

.audit-page .audit-table-box {
border-radius: 4px;
padding: 0;
overflow: hidden;
}

.audit-page .audit-table-box .design-table {
margin-bottom: 0;
}

.audit-page .audit-log-table {
margin-bottom: 0!important;
}

.audit-page .audit-log-table th {
white-space: nowrap;
}

.audit-page .audit-log-table td {
vertical-align: middle;
}

.audit-action-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: 5px 9px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
background: rgba(31, 54, 101, 0.08);
color: #1F3665;
}

.audit-action-badge.login {
background: rgba(74, 193, 134, 0.18);
color: #1d6a44;
}

.audit-action-badge.logout {
background: rgba(255, 93, 93, 0.18);
color: #b42323;
}

.audit-action-badge.add {
background: rgba(43, 96, 43, 0.14);
color: #2b602b;
}

.audit-action-badge.edit {
background: rgba(255, 193, 7, 0.22);
color: #7a5200;
}

.audit-action-badge.delete {
background: rgba(220, 53, 69, 0.16);
color: #a4161f;
}

@media (max-width: 991px) {
  .audit-page .audit-summary-grid {
    grid-template-columns: 1fr;
  }

  .audit-page .audit-filter-box .form-control {
    max-width: 100%;
    width: 100%;
  }
}

 .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(--orange-color);
border: 1px solid var(--orange-color);
border-radius: 4px;
display: inline-block;
cursor: pointer;
}

 .main-btn:hover {
background: var(--orange-color-hover);
border: 1px solid var(--orange-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%); }

.corporate-dashboard.main-content.with-header {
padding: 0 0 28px;
}

.dashboard-hero {
grid-template-columns: 1fr;
padding: 28px 20px;
min-height: auto;
gap: 20px;
}

.dashboard-hero h1 {
font-size: 32px;
}

.dashboard-hero p {
font-size: 14px;
}

.dashboard-hero-panel {
padding: 14px;
}

.dashboard-shell {
padding: 20px 15px 0;
}

.dashboard-metrics,
.module-grid {
grid-template-columns: 1fr;
}

.metric-card,
.module-card,
.operations-card {
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
}

.module-card {
grid-template-columns: auto minmax(0, 1fr);
min-height: auto;
}

.module-arrow {
display: none;
}

.dashboard-section-title h2 {
font-size: 20px;
}

.quick-action {
grid-template-columns: 40px minmax(0, 1fr);
}

.quick-action strong {
display: none;
}

.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: #2b602b; /* 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 */
}