@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Inter:wght@100..900&display=swap');

* {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Width of the scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    /* Ensures the horizontal scrollbar matches the vertical scrollbar width */
}

/* Background of the scrollbar track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Color and shape of the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: lightgray;
    border-radius: 10px;
}

/* Color of the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

:root {
    --primary: rgba(161, 98, 247, 1);
    --light: #fff;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--primary);
    border-color: var(--bs-btn-active-border-color);
}

.btn-primary.disabled-btn {
    --bs-btn-color: #0a58ca;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);

    opacity: 0.6;
    cursor: none;
    pointer-events: none;
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary {
    --bs-btn-color: #0a58ca;
    /* --bs-btn-bg: var(--primary); */
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    /* --bs-btn-hover-bg: var(--primary); */
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    /* --bs-btn-active-color: #fff; */
    /* --bs-btn-active-bg: var(--primary); */
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-primary.disabled-btn {
    --bs-btn-color: #0a58ca;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);

    opacity: 0.6;
    cursor: none;
    pointer-events: none;
}

.paddBtnArea {
    padding: 17px 24px;
}

.btn-outline-secondary-custom {
    border: 1px solid #A162F7;
    color: #A162F7;
    border-radius: 8px;
    font-weight: 600px;
    font-size: 12.5px;
    padding: 9px 15px;
    display: flex;
    gap: 7px;
    align-items: center;
}

.btn-outline-secondary-custom.disable {
    border-color: #A162F7;
    color: #A162F7;
    border-radius: 8px;
    font-weight: 600px;
    font-size: 12.5px;
    padding: 9px 15px;
    display: flex;
    gap: 7px;
    align-items: center;
    opacity: 40%;
    pointer-events: none;
}

.btn-outline-secondary-custom:hover {
    border-color: #A162F7;
    color: #fff;
}

.btn-outline-secondary-custom:active {
    color: #fff !important;
    outline: none;
}

.btn-outline-secondary-custom svg path {
    fill: #A162F7;
}

.btn-outline-secondary-custom:hover svg path {
    fill: #fff;
}

.btn-outline-secondary-custom:hover img {
    filter: brightness(0) invert(1);
}

.export img {
    filter: brightness(0) invert(1) !important;
}

.custom-card {
    border-radius: 15px 15px 0px 0px !important;
}

.custom-card2 {
    border-radius: 0px 0px 15px 15px !important;
}


/* Custom scrollbar styles */
/* Width of the scrollbar */
::-webkit-scrollbar {
    width: 5px !important;
}

/* Background of the scrollbar track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Color and shape of the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: lightgray;
    border-radius: 10px;
}

/* Color of the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}


body {
    background: #FAF7FF;
    overflow-x: hidden;
}


a {
    text-decoration: none;
    color: rgba(108, 117, 125, 1);
}

li {
    list-style: none;
}

p {
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 0rem;
}


.card {
    border: none !important;
    border-radius: 15px;
    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
    ;
}



/* SIDEBAR */
#sidebar {
    position: fixed;
    max-width: 283px;
    width: 100%;
    background: var(--light);
    top: 0;
    left: 0;
    min-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    transition: all 0.3s ease;
    z-index: 200;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
}

#sidebar.hide {
    max-width: 75px;
    overflow-x: hidden;
}

#sidebar.hide ul {
    overflow-x: hidden;
    overflow-y: hidden;
}

#sidebar .toggle {
    position: fixed;
    top: 65px;
    /* Fixed pixel value for consistent positioning */
    left: 270px;
    /* Adjust based on sidebar width */
    height: 22px;
    width: 22px;
    background-color: rgba(204, 97, 255, 0.56);
    color: #000000;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 201;
    /* Ensure it's above the sidebar */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

#sidebar.hide .toggle {
    left: 75px;
    /* Adjust based on sidebar width */
}

#sidebar .toggle i {
    font-size: 0.66em;
    -webkit-text-stroke: .60px;
}

.option2:hover {
    background-color: #f3edffba;
}

/* Additional Sidebar Styles */
#sidebar .icon {
    min-width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
}

#sidebar .icon-profile {
    min-width: 200px !important;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 6px;
}

#sidebar .side-menu {

    margin: 0px 0;
    padding: 0 20px;
    transition: all 0.3s ease;
}

#sidebar.hide .side-menu {
    padding: 0 13px;
}

#sidebar .side-menu a {
    display: flex;
    align-items: center;
    font-size: 12.7px;
    color: var(--grey);
    padding: 7px 16px 7px 0;
    transition: all 0.3s ease;
    border-radius: 10px;
    margin: 4px 0;
    white-space: nowrap;
}

#sidebar .side-menu li>ul>li a {
    display: flex;
    align-items: center;
    font-size: 12.7px;
    color: var(--grey);
    padding: 7px 16px 7px 0;
    transition: all 0.3s ease;
    border-radius: 10px;
    margin: 4px 0;
    white-space: nowrap;
    padding-left: 10px;
}

.bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 75px;
    /* Full width of the sidebar */
    background-color: #fff;
    /* Adjust as needed */
    padding: 0px 25px;
    /* Adjust padding as needed */
    transition: all 0.2s ease-in-out;
}

.text-light {
    color: #fff !important;
}

#sidebar .side-menu>li>a:hover,
#sidebar .side-menu .bottom-menu>li>a:hover,
#sidebar .side-dropdown>li>a:hover {
    background: #f3edffba;
    color: #303030;
}

#sidebar .side-menu>li>a.active .icon-right {
    transform: rotateZ(90deg);
}

#sidebar .side-menu>li>a.active,
#sidebar .side-menu>li>a.active:hover,
#sidebar .side-dropdown>li>a.active {
    background: #f3edffba;
    color: #303030;
    font-weight: 600;
}

#sidebar .divider {
    margin-top: 15px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dark-grey);
    transition: all 0.3s ease;
    white-space: nowrap;
    padding-left: 15px;
}

#sidebar.hide .divider {
    text-align: center;
    padding-left: 0px;
}

#sidebar .side-dropdown {
    padding-left: 63px;
    max-height: 0;
    overflow-y: hidden;
    transition: all 0.15s ease;
    background-color: #fff;
}

#sidebar .side-dropdown.show {
    max-height: 168px;
    background: #fff;
    position: relative;
    z-index: 2;
    transition: all 0.5s ease;
    overflow-x: hidden;
}

#sidebar .side-dropdown a:hover {
    color: var(--light-green);
}

#sidebar .ads {
    width: 100%;
    padding: 20px;
}

#sidebar.hide .ads {
    display: none;
}

#sidebar.hide:hover .ads {
    display: block;
}

#sidebar .ads .wrapper {
    background: var(--grey);
    padding: 20px;
    border-radius: 10px;
}

#sidebar .btn-upgrade {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    color: var(--light);
    background: var(--blue);
    transition: all 0.3s ease;
    border-radius: 5px;
    font-weight: 600;
    margin-bottom: 12px;
}

#sidebar .btn-upgrade:hover {
    background: var(--dark-blue);
}

#sidebar .ads .wrapper p {
    font-size: 12px;
    color: var(--dark-grey);
    text-align: center;
}

#sidebar .ads .wrapper p span {
    font-weight: 700;
}



#sidebar .bottom-menu a {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: var(--grey);
    padding: 7px 16px 7px 0;
    transition: all 0.3s ease;
    border-radius: 10px;
    margin: 4px 0;
    white-space: nowrap;
}

#sidebar.hide .bottom-menu {
    padding: 0 15px;
    overflow-y: hidden;
    overflow-x: hidden;
}

header {
    position: sticky !important;
    top: 0;
    z-index: 10;
    /* Ensure it's on top */
    background-color: white;
    width: 100%;
    transition: all .2s ease-in-out;
    border-bottom: 1px solid rgb(240, 240, 240);
}

nav {
    background: var(--light);
    height: 55px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    grid-gap: 10px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
}

/* Adjust header width when the sidebar is hidden */
#sidebar.hide~#content header {
    width: 100%;
    /* Ensure it always takes full width */
    transition: all .2s ease-in-out;
}

#sidebar~#content header {
    width: 100%;
    /* Ensure it always takes full width */
    transition: all .2s ease-in-out;
}

/* main {
    padding-top: 55px;
} */
.savedContent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1%;
    gap: 20px;
}

.profile-text span {
    font-size: .82em;
    display: grid;
}

#breadcrumbs {
    padding: 30px 50px 0px 50px;
}

.breadcrumb-item {
    font-size: 13px;
}

.menu-text {
    font-size: 14px;
    padding-right: 40px;
}

.menu-text1 {
    font-size: 16px;
    font-weight: 600;
    color: #475467;
}

#profileMakerTab {
    padding: 0rem 1rem 1rem 1rem;
}

.tab-container {
    background-color: #fff;
}

.tabs {
    display: flex;
}

.tab-button {
    background-color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 50px;
    border-bottom: 4px solid transparent;
    padding: 10px 0;
}

.tab-button.active {
    color: rgba(161, 98, 247, 1);
    border-bottom: 4px solid rgba(161, 98, 247, 1);
    /* Change border color when active */
    font-size: 14.5px;
}

.apexcharts-legend-series {
    display: none !important;
}

.content-container {
    padding: 20px;
    margin: 20px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tabPad {
    padding: 1.2rem 1.5rem 0rem 1.5rem;
}

.tabPad2 {
    padding: 0rem 1.5rem 0rem 1.5rem;
}

.tabPad3 {
    padding: 0rem 1.5rem 0rem 1.5rem;
}


.borderPad {
    padding-bottom: .65rem;
    font-size: 13px;
}

.dropdown-text {
    font-size: 13px;
    font-weight: 400;
}

#project-name{
    padding: 8px;
    font-size: 13px;
}

.dividerBorder {
    border: 1px solid #E4E7E6;
    padding: 0%;
    margin-top: -7px;
}

.expand-accord-content {
    height: 460px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 8px;
    display: block;
}

.border-button {
    width: 48px;
    height: 48px;
    border: 1.5px solid lightgray;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-primary {
    background-color: var(--primary);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
}


.select-menu {
    width: 100%;
    margin: 5px auto;
    position: relative;
    /* Position relative to parent */
}

.select-menu .select-btn {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px 10px;
    /* Adjusted padding */
    font-size: 13px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
}

.select-btn i {
    font-size: 25px;
    transition: 0.3s;
}

.select-menu.active .select-btn i {
    transform: rotate(-180deg);
}

.select-menu .options {
    position: absolute;
    /* Changed to absolute */
    top: 100%;
    /* Position below the select button */
    left: 0;
    width: 100%;
    /* Ensure the width is the same as the parent */
    padding: 10px;
    /* Adjusted padding */
    margin-top: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    /* Ensure it appears above other content */
    max-height: 150px;
    /* Adjust as needed */
    overflow-y: auto;
    /* Add vertical scrollbar */
}

.select-menu.active .options {
    display: block;
}

.options .option {
    display: flex;
    height: 40px;
    cursor: pointer;
    padding: 0 0px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
    padding-left: 10px;
}

.options .option:hover {
    background: #F2F2F2;
}

.options4 .option4:hover {
    background: #F2F2F2;
}

.options2 .option2:hover {
    background: #F2F2F2;
}

.options3 .option3:hover {
    background: #F2F2F2;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: #f3edffba !important;
}

.clicked-row {
    background-color: #f3edffba !important;
}

.error-row {
    background-color: #FF615733 !important;
}

.error-row:hover {
    background-color: #FF615733 !important;
}

.option-container {
    display: flex;
    justify-content: space-between;
    /* This aligns the children to different ends */
    align-items: center;
    /* This centers the items vertically */
    width: 100%;
}

.option-text {
    flex-grow: 1;
    /* Ensures the label takes up the remaining space */
    margin-right: 0px;
    /* Adds a little space between the label and icon */
}


.option-container i {
    margin-left: auto;
}

.option-text {
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
}

.option input[type="checkbox"] {
    margin-right: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid lightgray;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.option input[type="checkbox"]:checked {
    background-color: #A162F7;
}

.option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.addNewPair {
    color: #A162F7;
    padding-left: 10px;
    cursor: pointer;
}

/* Ends Here */
/***Tickers ****/
.ticker {
    height: 30px;
    background-color: var(--primary);
    color: #fff;
    border-radius: 0px 0px 8px 8px;
    border: 0.38px solid rgba(250, 247, 255, 0.4);
    box-shadow: 0px 48.7px 48.7px -24.35px rgba(232, 184, 255, 0.2);
    display: inline-flex;
    justify-content: center;
    gap: 8px;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.ticker.animate-bg {
  animation: ticker-bg .8s ease-in-out infinite alternate;
}

@keyframes ticker-bg {
  0% {
    background: #FF615780;
  }
  100% {
    background: #FF6157;
  }
}

.ticker-pad {
    padding-right: 30px;
}

.ticker-text {
    font-size: 14px;
    font-weight: 400;
}

.ticker-counter {
    font-size: 14px;
    font-weight: 700;
}

.gap {
    gap: 12px;
}

.green {
    color: rgba(117, 249, 76, 1);
    font-size: 11px;
}

.amber {
    color: rgba(255, 229, 0, 1);
    font-size: 11px;
}

.red {
    color: rgba(255, 31, 37, 1);
    font-size: 11px;
    transform: rotate(180deg);
}

.security {
    border-right: 1.5px solid rgba(250, 247, 255, 1);
    padding-right: 15px;
}

.efficacy {
    border-right: 1.5px solid rgba(250, 247, 255, 1);
    padding-right: 15px;
    padding-left: 7px;
}

.maturity {
    padding-left: 7px;
}

/** Ends here****/
/* Custom scrollbar styles */
.options::-webkit-scrollbar {
    width: 8px;
    /* Width of the scrollbar */
    margin-right: 100px;
}

.options::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Background of the scrollbar track */
    border-radius: 10px;
    padding-right: 100px;
}

.options::-webkit-scrollbar-thumb {
    background: lightgray;
    /* Color of the scrollbar thumb */
    border-radius: 10px;
    padding-right: 100px;
}

.options::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Color of the scrollbar thumb on hover */
}




.addNewPair {
    color: #A162F7;
    padding-left: 10px;
}




/* Ends here */


.addNewPair {
    color: #A162F7;
    padding-left: 10px;
}


.evaluateBtn {
    padding-top: 2rem;
}

.accord-content {
    height: 105px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 8px;
    display: block;
}

.filePair-content {
    padding: 20px;
}

.metrics-text {
    font-size: 12px;
}

.metrics-content {
    min-height: 250px;
}

.padLeft {
    padding-left: 0px;
}

.chart-container {
    padding-left: 20px;
    /* max-width: 600px; */
    margin: 0 auto;
}



.chart-container {
    position: relative;
    width: 100%;
    padding: 0px;
}

.skill-bars {
    position: relative;
    padding-bottom: 40px;
    /* Space for the bottom labels */
}

.skill-bars .bar {
    display: flex;
    align-items: center;
    margin: 10px 0;
    position: relative;
}

.skill-bars .bar:first-child {
    margin-top: 0;
}

.skill-bars .bar .info {
    position: absolute;
    left: -80px;
    /* Adjust to move outside the chart area */
    font-weight: 500;
    font-size: 14px;
    opacity: 100;
    white-space: nowrap;
    /* Prevent labels from wrapping */
}

.skill-bars .bar .progress-line {
    flex: 2;
    height: 14px;
    background: var(--bg-color, #f0f0f0);
    position: relative;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
}

.skill-bars .bar .progress-line span {
    height: 100%;
    position: absolute;
    border-radius: 3px;
    background: var(--fill-color);
}


.axis-labels {
    position: absolute;
    bottom: 0;
    left: -10px;
    /* Adjust left position to move outside the container */
    right: -10px;
    /* Adjust right position to move outside the container */
    height: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    padding-top: 10px;
    /* Space for the bottom labels */
}

.axis-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 30px;
    /* Space for the bottom labels */
    display: flex;
    justify-content: space-between;
}

.axis-lines .line {
    height: 100%;
    border-left: 1px dotted #ccc;
    border-top: 0;
    /* Remove the top border if any */
}

.axis-labels div {
    transform: translateX(-50%);
    /* Center the labels */
    position: relative;
}



.metricsBarContent {
    height: 250px;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid lightgray;
    border-radius: 8px;
    width: auto;
    white-space: pre-wrap;
    /* Preserve whitespace and wrap long lines */
    word-wrap: break-word;
    /* Break long words to fit the container */
    overflow-wrap: break-word
}

.tags {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    margin: 5px;
    border-radius: 16px;
    background-color: #F0F9FF;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
}

.tags i {
    font-size: 17px;
    font-weight: 400;
    color: #0BA5EC;
    cursor: pointer;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
}

.tags-container::after {
    content: '';
    flex: auto;
}


.overlay {
    position: absolute;
    top: 23%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(249, 249, 249, 0.5);
    /* Semi-transparent background */
    z-index: 999;
    /* Make sure the overlay is above other elements */
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #A162F7;
    border-radius: 5px;
    text-align: center;
    z-index: 1000;
    /* Make sure the loader is above other elements */
}

.loader::after {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    margin: 1em auto;
    border-radius: 50%;
    border: 5px solid #d4d4d4;
    border-top-color: #A162F7;
    animation: spin 0.6s linear infinite;
}

.search-container-nav {
    position: relative;
    width: 100%;
}

.search-container-nav .form-control {
    padding-left: 2.5rem;
    border-radius: 20px;
    font-size: 14px;
}

.search-container-nav i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #D9D9D9;
    /* Adjust color as needed */
    pointer-events: none;
}

.search-container-nav input::placeholder {
    color: #D9D9D9;
    /* Change this to your desired placeholder text color */
}


.search-container {
    position: relative;
    width: 100%;
}

.search-container .form-control {
    padding-left: 2.5rem;
    border-radius: 8px;
    font-size: 14px;
}

.search-container i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #6c757d;
    /* Adjust color as needed */
    pointer-events: none;
}


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.metricsBorder {
    border-bottom: 1px solid lightgray;
    width: 100%;
    padding-top: 15px;
}

.label-bold {
    font-weight: bold;
    /* Bold font for clicked label */
}

.bar-opacity {
    opacity: 0.2;
    /* Reduced opacity for bars */
}

.label-opacity {
    opacity: 0.2;
    /* Reduced opacity for labels */
}



/* Define a CSS class for rotating the chevron icon */
.rotate-chevron {
    transition: transform 0.3s ease;
    /* Smooth transition */
}

.rotate-chevron.collapsed {
    transform: rotate(-180deg);
    /* Rotate 180 degrees when collapsed */
}

.bi-chevron-up.expanded {
    transform: rotate(180deg);
}

.upload {
    /* height: 100%; */
    border: 1px solid lightgray;
    border-radius: 10px;
    display: block;
    text-align: center;
    padding: 13px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.upload:hover {
    background-color: #f9f9f9;
}

.uploadText1 {
    font-size: 12px;
    color: #6941C6;
    font-weight: 600;
}

.uploadText2 {
    font-size: 12px;
}

.uploadText3 {
    font-size: 12px;
}

.upload.dragover {
    border-color: #a162f7;
    background-color: #f3f3f3;
}

.uploadedContent {
    width: 400px;
    height: 72.5px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 8px;
}

.progresses {
    height: 20px;
}

.progresses1 {
    height: 8px;
}

.uploadProgress {
    /* height: 100%; */
    border: 1px solid lightgray;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.uploadProgText1 {
    font-size: 12px;
}

.uploadSizeText {
    font-size: 11px;
    text-wrap: nowrap;
}

.uploadSizeText2 {
    font-size: 10.7px;
    text-wrap: nowrap;
    padding-left: 5px;
}


.uploadProgText2 {
    font-size: 12px;
}



.uploadloader {
    animation: spin 1s linear infinite;
}

div.progress-bar {
    border-radius: 5px;
    padding: 10px !important;
}

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

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

.padLeftUpload {
    padding-left: 25px;
}



.noOfQuestion {
    display: grid;
    grid-template-columns: 15% 40% 15%;
    align-items: center;
    padding-top: 10px;
}


.question-button {
    width: 28px;
    height: 28px;
    border: 1.5px solid lightgray;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.btn-secondary {
    border: 1.5px solid lightgray;
    background-color: #fff;
    color: #101828;
    font-size: 14.5px;
    font-weight: 600;
}

.btn-secondary:hover {
    border: 1.5px solid lightgray;
    background-color: #fff;
    color: rgb(151, 151, 151);
    /* font-size: 14.5px;
    font-weight: 600; */
}


.date-select-menu {
    width: 100%;
    margin: 5px auto;
    position: relative;
    /* Position relative to parent */
}

.date-select-menu .date-select-btn {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px 10px;
    /* Adjusted padding */
    font-size: 12.4px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
}

.date-select-menu .date-select-btn img {
    cursor: pointer;
    margin-left: 10px;
}

.date-select-menu .datepicker-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;

}


th {
    font-size: 14px;
}

td {
    font-size: 13px;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 15px 15px 0px 0px;
    overflow: visible !important;
    border: 1px solid lightgray;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
}

td,
th {
    padding: 15px 13px;
    text-align: left;
}

th {
    background-color: #F9FAFB;
    color: #475467;
    font-weight: 500;
}

tr {
    width: 100%;
    background-color: white;
    border-bottom: 1.5px solid #e9e9e9;
}

.topic-tags1 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #F9F5FF;
    color: #6941C6;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #E9D7FE;
}

.topic-tags2 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #EFF8FF;
    color: #175CD3;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #B2DDFF;
}

.topic-tags3 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #EEF4FF;
    color: #3538CD;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #C7D7FE;
}

.priority-tags1 {
    display: inline-flex;
    align-items: center;
    padding: 3px 5px;
    border-radius: 5px;
    background-color: #ffffff;
    color: #333;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #C7D7FE;
}

.high {
    width: 8px !important;
    height: 8px !important;
    background-color: #df1212;
    border-radius: 50%;
}

.medium {
    width: 8px !important;
    height: 8px !important;
    background-color: #ff7707;
    border-radius: 50%;
}

.low {
    width: 8px !important;
    height: 8px !important;
    background-color: #1a17b2;
    border-radius: 50%;
}

.new {
    width: 8px !important;
    height: 8px !important;
    background-color: #7e7e7e;
    border-radius: 50%;
}

.inProgress {
    width: 8px !important;
    height: 8px !important;
    background-color: #1a17b2;
    border-radius: 50%;
}

.done {
    width: 8px !important;
    height: 8px !important;
    background-color: #17B26A;
    border-radius: 50%;
}

.audit-option-text {
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    /* Prevent text from wrapping */
    overflow: hidden;
    /* Hide overflow text */
    text-overflow: ellipsis;
    /* Add ellipsis at the end */
}

.table-vdots {
    font-size: 20px;
    color: #98A2B3;
}

.fixedTextarea {
    width: 100%;
    /* Adjust as needed */
    resize: none;
    /* Prevents resizing */
    overflow: auto;
    /* Ensures scrollbars appear if content overflows */
    box-sizing: border-box;
    /* Ensures padding and borders are included in the width */
}

.pagination {
    border-radius: 0px 0px 15px 15px !important;
}

.pagination-div {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;

}

.pagination-div1 {
    display: grid;
    grid-template-columns: 83% 17%;
    align-items: center;

}

/* .pagination-controls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: center;
} */

.pageNo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #475467;
    cursor: pointer;
}

.page-active {
    color: #F9FAFB;
    /* color: #333; */
    cursor: pointer;
    background-color: #a162f7;
}

.smeFeedback-content {
    min-height: 250px;
}

.progress,
.progress-stacked {
    --bs-progress-height: 8px;
}

.progressBar-text {
    font-size: 14px;
    margin-left: 10px;
}

.smeFeedback-progress-bar {
    background-color: #FF1F25;
}

.bar-wrapper {
    width: 172px;
}

.smeFeedbackText {
    color: #344054;
}

.feedback-content {
    overflow-y: auto;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 8px;
    display: block;
    color: #667085;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    color: #D9D9D9;
    pointer-events: none;
    background-color: #fff;
    border-color: #D0D5DD;
    opacity: var(--bs-btn-disabled-opacity);
}

/* General Rules For Range Slider */
.custom-rangeslider {
    position: relative;
    margin-top: 40px;
    padding: 0;
}

.custom-rangeInput {
    width: 100%;
    background: transparent;
    appearance: none;
    box-sizing: border-box;
    cursor: not-allowed;
    outline: 0;
    border: 0;
    padding: 0;
    margin: 0;
    height: 5px;
}

/* Loader.css */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    /* Semi-transparent white background */
    /* background: rgba(0, 0, 0, 0.1); */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    /* High z-index to overlay other elements */
    backdrop-filter: blur(-3px);
    /* Blur effect */
}

.expandedModal {
    --bs-modal-padding: 0;
    top: 0;
    left: -15px;
    padding: 30px !important;
    transition: all 0.32s;

}

/* .loader {
	border: 16px solid #f3f3f3;
	border-top: 16px solid #3498db;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
  } */

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

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

/* Range Track */
.custom-rangeslider {
    position: relative;
    margin-top: 40px;
    padding: 0;
}

.custom-rangeInput {
    width: 100%;
    background: transparent;
    appearance: none;
    /* Reset Appearance */
    box-sizing: border-box;
    /* Border need to be inset */
    cursor: not-allowed;
    outline: 0;
    border: 0;
    padding: 0;
    margin: 0;
    height: 5px;
    /* Range height */
}

.custom-rangeInput::-webkit-slider-runnable-track {
    appearance: none;
    box-sizing: border-box;
    height: 5px;
    width: 100%;
    cursor: not-allowed;
    border: none;
    padding: 0;
    margin: 0;
}

.custom-rangeInput::-moz-range-track {
    appearance: none;
    box-sizing: border-box;
    height: 5px;
    width: 100%;
    cursor: not-allowed;
    border: none;
    padding: 0;
    margin: 0;
}

input.custom-rangeInput {
    cursor: none;
}

.custom-rangeInput::-ms-track {
    appearance: none;
    box-sizing: border-box;
    height: 5px;
    width: 100%;
    cursor: not-allowed;
    border: none;
    padding: 0;
    margin: 0;
    color: transparent;
    outline: none;
}

.custom-rangeInput::-webkit-slider-thumb {
    appearance: none;
    box-sizing: border-box;
    background-color: #ffffff;
    outline: 1px solid #7F56D9;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    cursor: grab;
    margin-top: -8px;
}

.custom-rangeInput::-moz-range-thumb {
    appearance: none;
    box-sizing: border-box;
    background-color: #ffffff;
    outline: 1px solid #7F56D9;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    cursor: grab;
}

.custom-rangeInput::-ms-thumb {
    appearance: none;
    box-sizing: border-box;
    background-color: #21324f;
    outline: 2px solid #ffffff;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    cursor: grab;
    margin: auto;
}

.custom-rangeslider__tooltip {
    line-height: 20px;
    position: absolute;
    height: 30px;
    width: 40px;
    background-color: #FFF;
    padding: 3px 3px;
    border: 1px #ffffff solid;
    top: -40px;
    left: 0;
    text-align: center;
    transform: translate(-50%, 0);
    border-radius: 3px;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
}

.custom-rangeslider__tooltip:after {
    display: block;
    content: ' ';
    background: #FFF;
    position: absolute;
    border: 1px #ffffff solid;
    border-top: 0;
    border-left: 0;
    width: 10px;
    height: 10px;
    left: calc(50% - 6px);
    bottom: -6px;
    transform: rotate(45deg);
}

.custom-rangeslider__label {
    position: absolute;
    font-size: 12px;
    color: #333;
}

.custom-rangeslider__label-min {
    left: 0;
    bottom: -20px;
}

.custom-rangeslider__label-max {
    right: 0;
    bottom: -20px;
}

.question-counter {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.question-counter1 {
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.requestInterviewText {
    font-size: 11.8px;
    font-weight: 400;
    color: rgba(55, 94, 249, 1);
    cursor: pointer;
}

.requestInterviewText i {
    font-weight: 600;
}

.assignmentForm {
    display: none !important;
}

.assignmentForm.show {
    display: block !important;
}

.icon-large {
    font-size: 1.7em;
    /* Adjust the size as needed */
    vertical-align: middle;
    /* Ensure the icons are vertically aligned with the text */
}

#prevBtn,
#nextBtn {
    color: #344054;
    border-radius: 10px;
    font-size: 13px;
}

#prevBtn:hover,
#nextBtn:hover {
    color: #fff;
    background-color: #a162f7;

}

#prevBtn:hover i,
#nextBtn:hover i {
    color: #fff;
}

.pagination-controls {
    align-items: center;
}

#pageNumbers {
    display: flex;
    align-items: center;
}

#createBtn {
    font-size: 13px;
    font-weight: 400;
}

#cancelBtn,
#assignBtn {
    font-size: 13.5px;
    font-weight: 400;
}

.tag-topics {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    /* margin: 5px; */
    border-radius: 16px;
    background-color: #F0F9FF;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
}

.tag-topics i {
    font-size: 17px;
    font-weight: 400;
    color: #0BA5EC;
    cursor: pointer;
}

/* SME Audit */

/* MAIN */


/* Responsiveness */

/* Project Screen Start */

.projectTitle-text {
    font-size: 24px;
}

.projectDesc-text {
    font-size: 14px;
}

.projectListPad {
    padding: 0rem 1.5rem 0rem 1rem;
}

#projectList {
    padding: 0rem 1rem 1rem 1rem;
}

.projectList {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 0px;
    overflow: auto;
    border: none;
    box-shadow: none;
}

.pagination-projectList {
    border-radius: 0px;
    box-shadow: none;
}

.close-icon {
    font-size: 14px !important;
    color: #344054;
}

.createProject-text {
    font-weight: 500;
}

/* .td-p td{
	padding: 15px 25px;
	text-align: left;
}

.th-p th{
	padding: 15px 13px;
	text-align: left;
}

th {
	font-size: 14px;
}

td {
	font-size: 12px;
} */

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1rem 0.3rem;
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-footer {
    display: grid;
    padding: 18px !important;
    grid-template-columns: 1fr 1fr;
    flex-shrink: 11;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap)* .5);
    background-color: var(--bs-modal-footer-bg);
    border-top: none !important;
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

.custom-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem 1.6rem 0rem 1.5rem;
}

.modal-header .btn-close {
    padding: calc(var(--bs-modal-header-padding-y)* .5) calc(var(--bs-modal-header-padding-x)* .5);
    margin: calc(-.5* var(--bs-modal-header-padding-y)) calc(-.5* var(--bs-modal-header-padding-x)) calc(-.5* var(--bs-modal-header-padding-y)) auto;
    padding-right: 15px;

        /* FIX FOCUS OUTLINE MONITOR */
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.project-formControl .form-control {
    font-size: 12px;
}

.project-dropdown-text {
    font-size: 14px;
    font-weight: 500;
}

/* Toast container to position at the top right */
.toast-container {
    position: fixed;
    top: 70px;
    right: 15px;
    z-index: 2050;
    /* Ensures it appears above other content */
}

/* Toast styling */
.toast {
    display: none;
    /* Hidden by default */
    background-color: #fff;
    /* Background color for the toast */
    border: 1px solid #ddd;
    /* Border color */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Shadow for the toast */
    border-radius: 8px;
    /* Rounded corners */
    opacity: 0;
    /* Initially hidden */
    padding: 15px;
    /* Padding for content */
    max-width: 400px;
    /* Set a maximum width for the toast */
    min-width: 200px;
    /* Set a minimum width for the toast */
    width: auto;
    /* Allow the width to adjust automatically */
    box-sizing: border-box;
    /* Ensure padding is included in the width */
    word-wrap: break-word;
    /* Ensure long words break correctly */
}

/* Keyframes for slide-in effect */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Keyframes for slide-out effect */
@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Show toast with slide-in effect */
.toast.show {
    display: block;
    /* Make it visible */
    animation: slideIn 0.3s forwards;
    /* Slide-in animation */
}

/* Hide toast with slide-out effect */
.toast.hide {
    animation: slideOut 0.5s forwards;
    /* Slide-out animation */
}

.error-field {
    /* border-color: #dc3545;  */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    border-radius: 10px;
}

.chart-container {
    width: 90%;
    /* Set width to 80% */
    margin: 0 auto;
    padding-left: 4rem;
    /* Center align the container */
}

.check-toast {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background-color: #56BA28;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.check-toast i {
    font-size: 25px;
}

.toast-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
}

.toast-title {
    font-size: 18px;
    font-weight: 500;
}

#charCounter {
    font-size: 12px;
    color: #585858;
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 5px;
}



.char-count {
    font-size: 12px;
    color: #585858;
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 5px;
}


.characterCount {
    display: flex;
    justify-content: space-between;
}

#breadTickers {
    position: sticky;
    top: 0px;
    margin-top: -7px;
    /* Adjust this to match your header's height */
    z-index: 5;
    /* padding-bottom: 3px; */
    /* Make sure it is lower than the header */
    transition: background-color 0.2s ease-in-out;
    /* Smooth transition for background color */
}

.toast-desc {
    font-size: 12px;
    white-space: normal;
    /* Allow text to wrap */
    word-wrap: break-word;
    /* Break long words */
}


.addProjectBtn {
    font-weight: 500 !important;
    font-size: 14px;
}

.clickable-Projectrow {
    cursor: pointer;
}

.clickable-Projectrow:hover {
    background-color: #f3edffba;
}

/* Projects Screen End */

/* Model List Screen Start */

.modelFeatures-tags1 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #F9F5FF;
    color: #6941C6;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #E9D7FE;
    margin-right: 5px;
    /* Add some space between tags */
}


.modelFeatures-tags2 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #EFF8FF;
    color: #175CD3;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #E9D7FE;
    margin-right: 5px;
    /* Add some space between tags */
}


.modelFeatures-tags3 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #EEF4FF;
    color: #3538CD;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #E9D7FE;
    margin-right: 5px;
    /* Add some space between tags */
}

.modelFeatures-tags4 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #F9FAFB;
    color: #344054;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #E9D7FE;
    margin-right: 5px;
    /* Add some space between tags */
}


.addModelBtn {
    font-weight: 500 !important;
    font-size: 14px;
}

.addModel-text {
    font-weight: 500;
}

.modelTitle-text {
    font-size: 24px;
}

.model-dropdown-text {
    font-size: 14px;
    font-weight: 500;
}

.modelDesc-text {
    font-size: 14px;
}

.modelListPad {
    padding: 0rem 1.5rem 0rem 1rem;
}

.modelTitle-text {
    font-size: 18px;
}

#modelList {
    padding: 0rem 1rem 1rem 1rem;
}

.clickable-Modelrow {
    cursor: pointer;

}

.clickable-Modelrow:hover {
    background-color: #f3edffba;
}

.model-select-menu {
    width: 100%;
    margin: 5px auto;
    position: relative;
    /* Position relative to parent */
}

.model-select-menu .model-select-btn {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px 10px;
    /* Adjusted padding */
    font-size: 12.4px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
}

.model-select-btn i {
    font-size: 25px;
    transition: 0.3s;
}

.model-select-menu.active .model-select-btn i {
    transform: rotate(-180deg);
}

.model-select-menu .model-options {
    position: absolute;
    /* Changed to absolute */
    top: 100%;
    /* Position below the select button */
    left: 0;
    width: 100%;
    /* Ensure the width is the same as the parent */
    padding: 10px;
    /* Adjusted padding */
    margin-top: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    /* Ensure it appears above other content */
    max-height: 120px;
    /* Adjust as needed */
    overflow-y: auto;
    /* Add vertical scrollbar */
}

.model-select-menu.active .model-options {
    display: block;
}

.model-options .model-option {
    display: flex;
    height: 40px;
    cursor: pointer;
    padding: 0 0px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
    padding-left: 10px;
}

.model-options .model-option:hover {
    background: #F2F2F2;
}

.model-option-text {
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
}

.model-option input[type="checkbox"] {
    margin-right: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid lightgray;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.model-option input[type="checkbox"]:checked {
    background-color: #A162F7;
}

.model-option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.typeModel-select-menu {
    width: 100%;
    margin: 5px auto;
    position: relative;
    /* Position relative to parent */
}

.typeModel-select-menu .typeModel-select-btn {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px 10px;
    /* Adjusted padding */
    font-size: 12.4px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
}

.typeModel-select-btn i {
    font-size: 25px;
    transition: 0.3s;
}

.typeModel-select-menu.active .typeModel-select-btn i {
    transform: rotate(-180deg);
}

.typeModel-select-menu .typeModel-options {
    position: absolute;
    /* Changed to absolute */
    top: 100%;
    /* Position below the select button */
    left: 0;
    width: 100%;
    /* Ensure the width is the same as the parent */
    padding: 10px;
    /* Adjusted padding */
    margin-top: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    /* Ensure it appears above other content */
    max-height: 120px;
    /* Adjust as needed */
    overflow-y: auto;
    /* Add vertical scrollbar */
}

.typeModel-select-menu.active .typeModel-options {
    display: block;
}

.typeModel-options .typeModel-option {
    display: flex;
    height: 40px;
    cursor: pointer;
    padding: 0 0px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
    padding-left: 10px;
}

.typeModel-option:hover {
    background: #F2F2F2;
}

.typeModel-option-text {
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
}

.typeModel-option input[type="checkbox"] {
    margin-right: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid lightgray;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.typeModel-option input[type="checkbox"]:checked {
    background-color: #A162F7;
}

.typeModel-option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}



.mfeatures-select-menu {
    width: 100%;
    margin: 5px auto;
    position: relative;
    /* Position relative to parent */
}

.mfeatures-select-menu .mfeatures-select-btn {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px 10px;
    /* Adjusted padding */
    font-size: 13px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
}

.mfeatures-select-btn i {
    font-size: 25px;
    transition: 0.3s;
}

.mfeatures-select-menu.active .mfeatures-select-btn i {
    transform: rotate(-180deg);
}

.mfeatures-select-menu .mfeatures-options {
    position: absolute;
    /* Changed to absolute */
    top: 100%;
    /* Position below the select button */
    left: 0;
    width: 100%;
    /* Ensure the width is the same as the parent */
    padding: 10px;
    /* Adjusted padding */
    margin-top: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    /* Ensure it appears above other content */
    max-height: 120px;
    /* Adjust as needed */
    overflow-y: auto;
    /* Add vertical scrollbar */
}

.mfeatures-select-menu.active .mfeatures-options {
    display: block;
}

.mfeatures-options .mfeatures-option {
    display: flex;
    height: 40px;
    cursor: pointer;
    padding: 0 0px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
    padding-left: 10px;
}

.mfeatures-options .mfeatures-option:hover {
    background: #F2F2F2;
}


.mfeatures-option .option-text {
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
}

.mfeatures-option input[type="checkbox"] {
    margin-right: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid lightgray;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.mfeatures-option input[type="checkbox"]:checked {
    background-color: #A162F7;
}

.mfeatures-option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


.modelType-tags1 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #F9F5FF;
    color: #6941C6;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #E9D7FE;
}

.modelType-tags2 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #EFF8FF;
    color: #175CD3;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #B2DDFF;
}

.modelType-tags3 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #EEF4FF;
    color: #3538CD;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #C7D7FE;
}

.modelType-tags4 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #F9FAFB;
    color: #344054;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    /* Prevent line break within tags */
    border: 1px solid #E4E7EC;
}

.close-toast {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background-color: #e30c0c;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-toast i {
    font-size: 19px;
}

.modal-header {
    border-bottom: 0px !important;
}

/* Add these new styles */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    /* Enables horizontal scrolling */
    -webkit-overflow-scrolling: touch;
    /* Ensures smooth scrolling on touch devices */
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 15px 15px 0px 0px;
    overflow: hidden;
    border: none;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
    table-layout: auto;
    /* Allows the table to adjust column widths based on content */
}

td,
th {
    padding: 15px 13px;
    text-align: left;
    white-space: nowrap;
    /* Prevents wrapping */
    overflow: visible !important;
}

th {
    font-size: 14px;
    background-color: #F9FAFB;
    color: #475467;
    font-weight: 500;
    z-index: 2;
}

td {
    font-size: 13px;
}

tr {
    background-color: white;
    border-bottom: 1.5px solid #e9e9e9;
}




.priority-tags1 {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
}

.topic-tags1,
.topic-tags2,
.topic-tags3,
.topic-tags4 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #F9F5FF;
    color: #6941C6;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    border: 1px solid #E9D7FE;
}

.priority-tags1 {
    border: 1px solid #C7D7FE;
}

.high,
.medium,
.low,
.new,
.inProgress,
.done {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50%;
}

.high {
    background-color: #df1212;
}

.medium {
    background-color: #ff7707;
}

.low {
    background-color: #1a17b2;
}

.new {
    background-color: #7e7e7e;
}

.inProgress {
    background-color: #1a17b2;
}

.done {
    background-color: #17B26A;
}

.table-vdots {
    font-size: 20px;
    color: #98A2B3;
}


.buttonPaddleft {
    padding-left: 100px;
}


.sme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem;
    /* Adjust the gap between items as needed */
    margin: 0;
    /* Adjust the margin as needed */
}

/* Additional styling for specific elements if needed */
/* .dropdown-text {
    font-weight: bold;
} */

.text-danger {
    color: red;
}

.evaluationMode-select-menu {
    position: relative;
}

.evaluationMode-select-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    cursor: pointer;
}

.evaluationMode-options {
    display: none;
    /* Hide options by default */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    /* Limit height of dropdown */
    overflow-y: auto;
    /* Scroll if content exceeds max-height */
}


.quesPaddLeft {
    padding-left: 10px;
}

.noOfQuestion {
    display: grid;
    grid-template-columns: 10% 50% 20%;
    align-items: center;
    padding-top: 10px;
}

.buttonPaddLeft {
    padding-left: 10px;
}

.smePaddLeft {
    padding: 20px 0px 0px 11px;
}

.evaluationMode-select-menu {
    width: 100%;
    margin: 5px auto;
    position: relative;
    /* Position relative to parent */
}

.evaluationMode-select-menu .evaluationMode-select-btn {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px 10px;
    /* Adjusted padding */
    font-size: 12.4px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
}

.oversizedClass {
    height: 45px !important;
}

.evaluationMode-select-btn i {
    font-size: 25px;
    transition: 0.3s;
}

.evaluationMode-select-menu.active .evaluationMode-select-btn i {
    transform: rotate(-180deg);
}

.evaluationMode-select-menu.activate .evaluationMode-select-btn i {
    transform: rotate(-180deg);
}

.evaluationMode-select-menu.activate .evaluationMode-select-btn i {
    transform: rotate(-180deg);
}

.evaluationMode-select-menu .evaluationMode-options {
    position: absolute;
    /* Changed to absolute */
    top: 100%;
    /* Position below the select button */
    left: 0;
    width: 100%;
    /* Ensure the width is the same as the parent */
    padding: 10px;
    /* Adjusted padding */
    margin-top: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    /* Ensure it appears above other content */
    max-height: 150px;
    /* Adjust as needed */
    overflow-y: auto;
    /* Add vertical scrollbar */
}

.evaluationMode-select-menu.active .evaluationMode-options {
    display: block;
}

.evaluationMode-select-menu.activate .evaluationMode-options {
    display: block;
}

.evaluationMode-select-menu.activate .evaluationMode-options {
    display: block;
}

.evaluationMode-options .evaluationMode-option {
    display: flex;
    height: 40px;
    cursor: pointer;
    padding: 0 0px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
    padding-left: 10px;
}

.evaluationMode-options .evaluationMode-option:hover {
    background: #F2F2F2;
}

.add-features {
    display: block !important;
}

.evaluationMode-option .evaluationMode-option-text {
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
}


.audit-option {
    display: grid !important;
    grid-template-columns: 10% 80% !important;
    height: 40px !important;
    cursor: pointer !important;
    padding: 0 0px !important;
    border-radius: 8px !important;
    align-items: center !important;
    background: #fff !important;
    padding-left: 10px !important;
    gap: 5px !important;
}

.evaluationMode-option input[type="checkbox"] {
    margin-right: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid lightgray;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.evaluationMode-option input[type="checkbox"]:checked {
    background-color: #A162F7;
}

.evaluationMode-option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.evaluationMode-select-menu1 {
    width: 100%;
    margin: 5px auto;
    position: relative;
    /* Position relative to parent */
}

.evaluationMode-select-menu1 .evaluationMode-select-btn1 {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px 10px;
    /* Adjusted padding */
    font-size: 12.4px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
}

.oversizedClass {
    height: 45px !important;
}

.evaluationMode-select-btn1 i {
    font-size: 25px;
    transition: 0.3s;
}

.evaluationMode-select-menu.active1 .evaluationMode-select-btn1 i {
    transform: rotate(-180deg);
}

.evaluationMode-select-menu.activate1 .evaluationMode-select-btn1 i {
    transform: rotate(-180deg);
}

.evaluationMode-select-menu1.activate .evaluationMode-select-btn1 i {
    transform: rotate(-180deg);
}

.evaluationMode-select-menu1 .evaluationMode-options1 {
    position: absolute;
    /* Changed to absolute */
    top: 100%;
    /* Position below the select button */
    left: 0;
    width: 100%;
    /* Ensure the width is the same as the parent */
    padding: 10px;
    /* Adjusted padding */
    margin-top: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    /* Ensure it appears above other content */
    max-height: 150px;
    /* Adjust as needed */
    overflow-y: auto;
    /* Add vertical scrollbar */
}

.evaluationMode-select-menu1.active .evaluationMode-options1 {
    display: block;
}

.evaluationMode-select-menu1.activate .evaluationMode-options1 {
    display: block;
}

.evaluationMode-select-menu1.activate .evaluationMode-options1 {
    display: block;
}

.evaluationMode-options1 .evaluationMode-option1 {
    display: flex;
    height: 40px;
    cursor: pointer;
    padding: 0 0px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
    padding-left: 10px;
}

.evaluationMode-options1 .evaluationMode-option1:hover {
    background: #F2F2F2;
}

.evaluationMode-option1 .evaluationMode-option1-text {
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
}

.evaluationMode-option1 input[type="checkbox"] {
    margin-right: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid lightgray;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.evaluationMode-option1 input[type="checkbox"]:checked {
    background-color: #A162F7;
}

.evaluationMode-option1 input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Programmatic Interview */


.priority-tags1 {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
}

.topic-tags1,
.topic-tags2,
.topic-tags3,
.topic-tags4 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #F9F5FF;
    color: #6941C6;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    border: 1px solid #E9D7FE;
}

.priority-tags1 {
    border: 1px solid #C7D7FE;
}

.high,
.medium,
.low,
.new,
.inProgress,
.done {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50%;
}

.high {
    background-color: #df1212;
}

.medium {
    background-color: #ff7707;
}

.low {
    background-color: #1a17b2;
}

.new {
    background-color: #7e7e7e;
}

.inProgress {
    background-color: #1a17b2;
}

.done {
    background-color: #17B26A;
}

.table-vdots {
    font-size: 20px;
    color: #98A2B3;
}

.assessmentForm {
    display: none;
}

.assessmentForm.show {
    display: block;
}

.evaluationForm {
    display: none;
}

.evaluationForm.show {
    display: block;
}

.prog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* At least 150px wide per item */
    gap: 1.2rem;
    margin: 0;
}

/* Additional styling for specific elements if needed */
/* .dropdown-text {
    font-weight: bold;
} */

.text-danger {
    color: red;
}

.topics-select-menu,
.priority-select-menu,
.evaluationMode-select-menu,
.domain-select-menu {
    position: relative;
}

.topics-select-btn,
.priority-select-btn,
.evaluationMode-select-btn,
.domain-select-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    cursor: pointer;
}

.topics-options,
.priority-options,
.evaluationMode-options,
.domain-options {
    display: none;
    /* Hide options by default */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    /* Limit height of dropdown */
    overflow-y: auto;
    /* Scroll if content exceeds max-height */
}

.prog-item .noOfQuestion {
    display: grid;
    grid-template-columns: 10% 40% 10%;
    align-items: center;
    padding-top: 10px;
}


.prog-item .buttonPaddLeft {
    padding-left: 93px;
}

#createAssessmentBtn,
#createEvaluationBtn {
    font-size: 13px;
    font-weight: 400;
}

#cancelAssessmentBtn,
#assignAssesmentBtn {
    font-size: 13.5px;
    font-weight: 400;
}

.bottom-menu>li.disabled,
.bottom-menu>li>img.disabled {
    /* Light gray background for a disabled appearance */
    color: #a0a0a0 !important;
    /* Dims the text color */
    border-color: #dcdcdc !important;
    /* Softens border color */
    pointer-events: none;
}

.disabled {
    color: #a0a0a0 !important;
    /* Dims the text color */
    border-color: #dcdcdc !important;
    /* Softens border color */
    pointer-events: none;
}

.evaluationMode-select-btn.disabled,.evaluationMode-select-btn1.disabled  {
    background-color: #f0f0f0;
    /* Light gray background for a disabled appearance */
    color: #a0a0a0;
    /* Dims the text color */
    border-color: #dcdcdc;
    /* Softens border color */
    cursor: "none";
}

.evaluationMode-select-btn.disabled .bi-chevron-down {
    display: none;
    /* Optionally hide the dropdown icon when disabled */
}

.evaluationMode-select-menu.disabled .evaluationMode-select-btn {
    color: #ADB5BD;
    /* or any other color indicating disabled state */
    pointer-events: none;
}

.evaluationMode-select-menu.disabled .audit-option-text {
    color: #ADB5BD;
    /* or any other color indicating disabled state */
    pointer-events: none;
}

/* New Style */


.prog-grid2 {
    display: grid;
    grid-template-columns: 360px 1fr .95fr 1.2fr;
    /* Define relative sizes of the columns */
    gap: 1.2rem;
    /* Adjust the gap between items as needed */
    margin: 0;
}

.buttonPaddRight {
    padding-right: 5px;
}

.progPaddLeft {
    padding: 20px 11px 0px 11px;
}

.interviewerModel-container {
    width: 100%;
    position: relative;
    margin: 5px auto;
}

.interviewerModel-btn {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
}

.interviewerModel-btn i {
    font-size: 16px;
    transition: 0.3s;
}

.interviewerModel-search-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    /* Center items vertically */
}

.interviewerModel-search {
    border: none;
    outline: none;
    width: 100%;
    font-size: 11px;
    padding-left: 25px;
    /* Make space for the search icon */
}

.interviewerModel-search-icon {
    position: absolute;
    left: 0px;
    /* Adjust as needed */
    font-size: 16px;
    /* Smaller icon size */
    color: #666;
    /* Adjust icon color */
}

.interviewerModel-container.active .interviewerModel-btn i {
    transform: rotate(-180deg);
}

.interviewerModel-options {
    position: absolute;
    top: 92%;
    left: 28px;
    width: 95%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    display: block;
    /* Hide by default */
    z-index: 1000;
    max-height: 150px;
    overflow-y: auto;
    padding-left: 10px;
}

.interviewerModel-container.active .interviewerModel-options {
    display: block;
}

.interviewerModel-option {
    display: block;
    cursor: pointer;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    /* For positioning the tick mark */
}

.interviewerModel-option:hover,
.interviewerModel-option.selected {
    background: #f3edffba;
    /* Same hover and selected background */
}

.interviewerModel-option.selected {
    padding-right: 45px;
    /* Adjust padding to make space for tick mark */
    margin: 5px 0px;
}

.interviewerModel-option .bi-check2 {
    color: transparent;
    /* Default to transparent */
    position: absolute;
    right: 10px;
    /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
}

.interviewerModel-option.selected .bi-check2 {
    color: #A162F7;
    /* Brand color for the tick mark */
}

.interviewerModel-tags-container {
    margin-top: 10px;
}

.interviewerModel-tag {
    display: inline-flex;
    background-color: #A162F7;
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    margin-right: 5px;
    font-size: 12px;
    align-items: center;
}

.interviewerModel-tag i {
    margin-left: 5px;
    cursor: pointer;
    font-size: 17px;
}

.text-font {
    font-size: 11.7px;
    color: #3d3d3d;
    font-weight: 500;
}

.interviwerModal-title {
    font-size: 13px;
    color: #000000;
    font-weight: 500;
}

.interviewerModel-option-text {
    cursor: pointer;
}

.save-button:disabled {
    background-color: var(--primary);
    /* Primary color */
    opacity: 1;
    /* Maintain opacity */
    cursor: not-allowed;
    /* Change cursor to indicate disabled */
}

.topic-tags1,
.topic-tags2,
.topic-tags3,
.topic-tags4 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #F9F5FF;
    color: #6941C6;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    border: 1px solid #E9D7FE;
}

@media (max-width: 1680px) and (min-width: 1600px) {

    .sme-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
        /* Adjust the margin as needed */
    }

    .noOfQuestion {
        display: grid;
        grid-template-columns: 15% 50% 15%;
        align-items: center;
        padding-top: 10px;
    }

    .prog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
        /* At least 150px wide per item */
        gap: 1.2rem;
        margin: 0;
    }

    /* Second Row: First item spans 3 columns, second item at the end */
    .prog-grid2 {
        display: grid;
        grid-template-columns: 493px 1fr .95fr 1.2fr;
        /* Define relative sizes of the columns */
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
    }



}

@media (max-width: 1600px) and (min-width: 1580px) {
    .sme-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
        /* Adjust the margin as needed */
    }

    .noOfQuestion {
        display: grid;
        grid-template-columns: 15% 50% 15%;
        align-items: center;
        padding-top: 10px;
    }

    .prog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        /* At least 150px wide per item */
        gap: 1.2rem;
        margin: 0;
    }

    /* Second Row: First item spans 3 columns, second item at the end */
    .prog-grid2 {
        display: grid;
        grid-template-columns: 466px 1fr .95fr 1.2fr;
        /* Define relative sizes of the columns */
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
    }



}

@media (max-width: 1580px) and (min-width: 1530px) {
    .sme-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
        /* Adjust the margin as needed */
    }

    .noOfQuestion {
        display: grid;
        grid-template-columns: 15% 50% 15%;
        align-items: center;
        padding-top: 10px;
    }


    .prog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        /* At least 150px wide per item */
        gap: 1.2rem;
        margin: 0;
    }

    /* Second Row: First item spans 3 columns, second item at the end */
    .prog-grid2 {
        display: grid;
        grid-template-columns: 447px 1fr .95fr 1.2fr;
        /* Define relative sizes of the columns */
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
    }


}

@media (max-width: 1530px) and (min-width: 1499px) {
    .sme-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
        /* Adjust the margin as needed */
    }

    .noOfQuestion {
        display: grid;
        grid-template-columns: 15% 50% 15%;
        align-items: center;
        padding-top: 10px;
    }

    .prog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        /* At least 150px wide per item */
        gap: 1.2rem;
        margin: 0;
    }

    /* Second Row: First item spans 3 columns, second item at the end */
    .prog-grid2 {
        display: grid;
        grid-template-columns: 444px 1fr .95fr 1.2fr;
        /* Define relative sizes of the columns */
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
    }


}

@media (max-width: 1500px) and (min-width: 1400px) {
    .sme-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
        /* Adjust the margin as needed */
    }

    .noOfQuestion {
        display: grid;
        grid-template-columns: 15% 50% 15%;
        align-items: center;
        padding-top: 10px;
    }

    .prog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
        /* At least 150px wide per item */
        gap: 1.2rem;
        margin: 0;
    }

    /* Second Row: First item spans 3 columns, second item at the end */
    .prog-grid2 {
        display: grid;
        grid-template-columns: 433px 1fr .95fr 1.2fr;
        /* Define relative sizes of the columns */
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
    }


}

@media (max-width: 1400px) and (min-width: 1300px) {
    .sme-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.2rem;
        margin: 0;
    }

    .noOfQuestion {
        display: grid;
        grid-template-columns: 15% 50% 15%;
        align-items: center;
        padding-top: 10px;
    }

    .prog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        /* At least 150px wide per item */
        gap: 1.2rem;
        margin: 0;
    }

    /* Second Row: First item spans 3 columns, second item at the end */
    .prog-grid2 {
        display: grid;
        grid-template-columns: 391px 1fr .95fr 1.2fr;
        /* Define relative sizes of the columns */
        gap: 1.2rem;
        /* Adjust the gap between items as needed */
        margin: 0;
    }

}


@media (max-width: 1200px) and (min-width: 1100px) {
    #sidebar.hide .toggle {
        top: 14.5%;
        left: 63px;
    }

    #sidebar .toggle {
        top: 14%;
        left: 19.7%;
    }

    #sidebar.hide~#content header {
        width: 94.5%;
    }

    #sidebar~#content header {
        width: 80.5%;
    }

}

/* Login Page Start */


/* Login Page Start */


#mainContent {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* Full viewport height */
    background-color: #fff;
}

.login-page .row {
    flex: 1;
    /* Allows the content between header and footer to expand */
    display: flex;
}

.login-page .col-lg-7,
.col-lg-5 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.loginHeader {
    display: flex;
    padding: 1rem;
}

.loginFooter {
    display: flex;
    align-items: end;
    padding: 1.5rem;
    /* Adjust padding as needed */
    background-color: #fff;
    /* Optional: Background color for footer */
}

.footer-content-left,
.footer-content-right {
    display: flex;
    align-items: center;
    /* Center items vertically if needed */
    height: 100%;
    /* Ensure full height of column */
}

.footer-content-left {
    justify-content: flex-start;
    /* Aligns content to the start of the column */
}

.footer-content-right {
    justify-content: flex-end;
    /* Aligns content to the end of the column */
}


#loginBg {
    /* flex: 1;  */
    position: relative;
    overflow: hidden;
}

/* Full height for image container */
.loginImg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.loginImg img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(36, 34, 32, 0.5);
}

.loginTitle {
    font-size: 28px;
    font-weight: 600;
}

.loginSubTitle {
    font-size: 15px;
    font-weight: 400;
    color: #475467;
}

.loginField-text {
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    padding-bottom: 5px;
}

.login-field .form-control {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(102, 112, 133, 1) !important;
}

.footer-text1 {
    font-size: 14px;
    font-weight: 400;
    color: rgba(71, 84, 103, 1);
}

.footer-text2 {
    font-size: 14px;
    font-weight: 400;
    color: rgba(71, 84, 103, 1);
}


#loginBg {
    position: relative;
    height: 100vh;
    /* Full viewport height for the section */
    width: 100%;
    /* Full width of the section */
}

.loginImg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* Ensure image stays within the section */
}

.loginImg img {
    object-fit: cover;
    /* Preserve aspect ratio and cover the area */
    width: 100%;
    height: 100%;
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(36, 34, 32, 0.5);
}

.hero-img-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 100%;
    padding: 20px 0px 20px 20px;
    z-index: 10;
    text-align: left;
    box-sizing: border-box;
}

.hero-img-text div {
    margin-bottom: 10px;
}

.hero-title {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
}

.hero-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.hero-para {
    font-size: 12px;
    color: #fff;
    font-weight: 200;
}


.login-logo {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background-color: #A162F7;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Comfortaa', sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.login-logo-text {
    font-family: 'Comfortaa', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding-left: 2px;
}

.signInBtn {
    width: 100%;
}

/* Login Page End */

/* Login Page End */

.paddMetricsProg {
    padding: 0px 0px 0px 20px;
}

input.question-counter:focus {
    outline: none;
    /* Removes the default outline */
    border: none;
    /* Removes the border */
    text-align: center;
}


.table-responsive-metrics table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgb(225, 225, 225);
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
    table-layout: auto;
    /* Allows the table to adjust column widths based on content */
    text-align: left;
}

.table-responsive-metrics1 {
    width: 100%;
    overflow-y: auto;
    height: 100%;
    /* Vertical scrolling if needed */
    -webkit-overflow-scrolling: touch;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Smooth scrolling for touch devices */
    border-radius: 10px;
    border: 1px solid rgb(225, 225, 225);
}



/* Sticky header */
.table-responsive-metrics {
    width: 100%;
    overflow-y: auto;
    /* Vertical scrolling if needed */
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling for touch devices */
    border-radius: 10px;
    border: 1px solid rgb(225, 225, 225);
}


#data-table-metrics thead th {
    position: sticky;
    top: 0;
    background-color: #F9FAFB;
    color: #475467;
    z-index: 2;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

/* Scrollable tbody */
.table-responsive-metrics tbody {
    display: block;
    max-height: 180px;
    /* Control visible rows */
    overflow-y: auto;
    overflow-x: auto;
}

/* Ensure columns align properly */
.table-responsive-metrics thead,
.table-responsive-metrics tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Set specific widths for columns */
#data-table-metrics td {
    padding: 10px 9px;
    overflow: hidden;
    font-size: 12px;

}

#data-table-metrics th {
    padding: 10px;
    overflow: hidden;
    font-size: 12.7px;
}

/* Customize column widths */
#data-table-metrics th:first-child,
#data-table-metrics td:first-child {
    width: 5%;
    /* Small column for the index (e.g., Q1, Q2) */
}

#data-table-metrics th:nth-child(2),
#data-table-metrics td:nth-child(2) {
    width: 35%;
    /* Wider column for Questions */
}

#data-table-metrics th:nth-child(3),
#data-table-metrics td:nth-child(3) {
    width: 25%;
    /* Wider column for Options */
}

#data-table-metrics th:nth-child(4),
#data-table-metrics td:nth-child(4),
#data-table-metrics th:nth-child(5),
#data-table-metrics td:nth-child(5),
#data-table-metrics th:nth-child(6),
#data-table-metrics td:nth-child(6) {
    width: 15%;
    /* Narrower columns for Score, Expected Answer, and Actual Answer */
}


.overallScore {
    width: 100px;
    height: 100px;
    border-radius: 10px;

    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border: 1px solid rgba(228, 231, 236, 1);
}

.topicTitle {
    font-size: 20px;
    color: #344054;
    font-weight: 600;
}

.topicScore {
    font-size: 44px;
    font-weight: 600;
}

.topicOverallText {
    font-size: 16px;
    font-weight: 600;
    color: #CED4DA;
}

.Embed-container {
    height: 60vh;
    width: 100vw;
}

.Embed-container1 {
    height: 90vh;
    width: 100%;
}

.Embed-container2 {
    height: 100vh;
    width: 100%;
}

/* .tooltip {
    position: absolute; 
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    z-index: 1000;
    white-space: nowrap;
    visibility: visible;
    opacity: 1; 
  } */

.tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    z-index: 1000;
    white-space: nowrap;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.2s linear;
}

.tooltip.visible {
    visibility: visible;
    opacity: 1;
}

/* Custom tooltip styling */
.custom-tooltip .MuiTooltip-tooltip {
    color: black;
    /* Change text color to black */
    font-weight: normal;
    /* Remove bold */
}

/* Home (Dashboard) */

#homeSection-1 {
    padding: 0rem 1rem .5rem 1.2rem;
}

.homePaddRight {
    padding-right: 9px;
}

#homeSection-2 {
    padding: 0rem 1rem 1rem 1.2rem;
}

.homeTitle-text {
    font-size: 24px;
    font-weight: 600;
    color: #101828;
}

.homeSubTitle-text {
    font-size: 14px;
    font-weight: 400;
    color: #6C757D;
}

.lowScore-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #475467;
}

.lowScore-subText {
    font-size: 12px;
    font-weight: 400;
    color: #475467;
}

.lowScoreTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    /* Helps contain the table within the card */
    border: none;
    box-shadow: none;
    margin: 0;
    /* Remove any extra margin */
}

.lowScoreTable td {
    padding: 7px 12px;
    /* Adjusted padding for a tighter fit */
    text-align: left;
}

.lowScoreTable th {
    border-top: 1px solid lightgray;
    padding: 11px 12px;
}

.lowScoreThead tr {
    font-size: 12px;
    font-weight: 500;
}

.lowScoreTbody tr {
    font-size: 12px;
    font-weight: 400;
}

.lowScoreTbody .t-center {
    text-align: center;
}

.lowScoreTbody tr:last-child td {
    border-bottom: none !important;
}

.lowScoreTbody tr:last-child {
    border-bottom: none !important;
    /* Try applying to tr directly */
}

.avgScore {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    margin: 0;
    /* Remove extra margin */
    border-radius: 12px;
    background-color: #FF1F250D;
    font-size: 12px;
    border: 1px solid #FF1F25;
    height: auto;
    width: auto;
}

.newProjectCard {
    background-color: #369FFF;
    border-radius: 20px;
    box-shadow: 0px 10px 30px 0px rgba(54, 159, 255, 0.4);
}

.projectCard-text {
    font-size: 16.5px;
    font-weight: 600;
    color: #ffff;
    z-index: 2 !important;
    position: relative;
}

.projectCard-subText {
    font-size: 12.5px;
    font-weight: 500;
    color: #F0F0F0;
}

.projectCard-text2 {
    font-size: 24px;
    font-weight: 600;
    color: #ffff;
}

.projectCardBtn button {
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    color: #101828;
}

.requestCard {
    background-color: #87D557;
    border-radius: 20px;
    box-shadow: 0px 10px 30px 0px rgba(54, 159, 255, 0.4);
}

.requestCard-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffff;
    z-index: 2 !important;
    position: relative;
}

.requestCard-subText {
    font-size: 12px;
    font-weight: 500;
    color: #F0F0F0;
}

.requestCard-text2 {
    font-size: 24px;
    font-weight: 600;
    color: #ffff;
}

.requestCardBtn button {
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    color: #101828;
}

.cardPadd {
    padding: 3px 13px;
}

.cardPadd2 {
    padding: 8px 10px 10px 10px;
}

.newProjectCard {
    position: relative;
    overflow: hidden;
    /* Clips any overflow if needed */
}

.top-left-blue-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    /* Adjust as needed */
    height: auto;
    z-index: 1;
}

.bottom-right-blue-shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    /* Adjust as needed */
    height: auto;
    z-index: 1;
}

.newProjectImg {
    position: relative;
    z-index: 2;
}


.btn-appHealth {
    /* background-color: #56BA28; */
    color: #ffff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    border: none;
}


.btn-appHealth:hover {
    background-color: #56BA28;
    color: #ffff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    border: none;

}

.btn-appHealth:active {
    background-color: #56BA28 !important;
    color: #ffff !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    border: none;
}

.viewProjectBtn {
    border: none;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 24, 40, 1);
}

.viewProjectBtn:hover {
    border: none;
    background-color: rgba(255, 255, 255, 1);
    color: rgb(69, 69, 69);
}

.viewProjectBtn:active {
    border: none;
    background-color: rgba(255, 255, 255, 1) !important;
    color: rgba(16, 24, 40, 1) !important;
}


.requestNowBtn {
    border: none;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 24, 40, 1);
}

.requestNowBtn:hover {
    border: none;
    background-color: rgba(255, 255, 255, 1);
    color: rgb(69, 69, 69);
}

.requestNowBtn:active {
    border: none;
    background-color: rgba(255, 255, 255, 1) !important;
    color: rgba(16, 24, 40, 1) !important;
}

a {
    cursor: pointer;
}

.requestCard {
    position: relative;
    overflow: hidden;
    /* Clips any overflow if needed */
}

.top-left-green-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    /* Adjust as needed */
    height: auto;
    z-index: 1;
}

.bottom-right-green-shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    /* Adjust as needed */
    height: auto;
    z-index: 1;
}

.requestImg {
    position: relative;
    z-index: 2;
}

.notification-text {
    font-size: 14px;
    font-weight: 600;
    color: #475467;
}

.notification-text2 {
    font-size: 12.5px;
    font-weight: 500;
    color: #475467;
}

.notification-subText {
    font-size: 10px;
    font-weight: 400;
    color: #ADB5BD;
}

.borderTop {
    border-top: 1px solid #E4E7EC;
}

.notifCard {
    border-radius: 12px 12px 0px 0px;
}

.notifPadd {
    padding: 15px 14px;
}

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

/* Home (Dashboard) */

.paddLeftNew {
    padding-left: 15px !important;
}

.eyePadd {
    padding-top: 2.3rem;
}

.refUploadModal .modal-dialog {
    min-width: 600px !important;
}

.refUpload-icon {
    width: 64px;
    height: 64px;
    background-color: #F2F4F7;
    border-radius: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-title {
    font-size: 18px;
    font-weight: 600px;
    color: #101828;
}

.upload-subTitle {
    font-size: 12px;
    font-weight: 400px;
    color: #475467;
}

.uploadPadd {
    padding: .22rem 1.5rem;
}

.uploadText1 {
    font-size: 14px;
    color: #6941C6;
    font-weight: 600;
}

.uploadText2 {
    font-size: 14px;
}

.uploadText3 {
    font-size: 14px;
}

.upload {
    /* height: 100%; */
    border: 1px solid lightgray;
    border-radius: 10px;
    display: block;
    text-align: center;
    padding: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.upload-modal-body {
    padding: 20px 22px;
}

.refFileTitle {
    font-size: 14px;
    color: #344054;
    font-weight: 500;
}

.previewContentGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.preview-content {
    max-width: 21.7em;
    height: 375px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 8px;
    display: block;
}

.custom-eye.disabled {
    color: #CED4DA;
    cursor: not-allowed;
    pointer-events: none;
}

.custom-eye.active {
    color: rgba(161, 98, 247, 1);
    cursor: pointer;
}

.buttonPaddRight2 {
    padding-right: 50px;
}

.select-menu2.disabled {
    pointer-events: none;
    /* Disables all interactions */
    opacity: 1;
    /* Keep opacity normal to show the background clearly */
}

.select-menu2.disabled .select-btn2,
.select-menu2.disabled ul.options2 {
    color: #ADB5BD;
    /* Optional: Adjust text color for a disabled look */
    background-color: #FAF7FF;
    /* Set the background color */
}

.auditFileSet-shorten {
    white-space: nowrap;
    /* Prevents wrapping */
    overflow: hidden;
    /* Hides the overflow text */
    text-overflow: ellipsis;
    /* Adds the ellipsis effect */
    max-width: 200px;
    /* Limit the width for truncation */
    display: inline-block;
    /* Ensures the effect works in a table cell */
    vertical-align: top;
    /* Aligns the text properly */
    color: #3F87FD;
}

.scoreType-tags {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 16px;
    background-color: #EEF4FF;
    color: #3538CD;
    font-size: 12px;
    height: auto;
    width: auto;
    white-space: nowrap;
    border: 1px solid #E9D7FE;
}

.action-menu {
    position: relative;
    /* display: inline-block; */
}

.action-icon {
    cursor: pointer;
    font-size: 18px;
}

.menu-popup {
    /* display: none; */
    position: absolute;
    right: 0;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
    min-width: 100px;
    border-radius: 5px;
    overflow: hidden;
}

.menu-popup p {
    padding: 8px 12px;
    display: block;
    font-size: 15.7px;
    text-decoration: none;
    text-align: center;
    color: black;
}

.menu-popup p:hover {
    background-color: #f0f0f0;
}

.subtype {
    display: none;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
}

.subtype.visible {
    display: block;
}

.chevron {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.chevron.expanded {
    transform: rotate(180deg);
}

/* Objective Testing New  */

/* Set the height of the entire card relative to the viewport */
.chat-card .card {
    display: flex;
    flex-direction: column;
    height: 82vh !important;

    /* Adjust this based on how much of the viewport you want it to cover */
    max-height: 100%;
    /* Ensures it doesn't exceed the viewport */
    overflow: hidden;
    /* Prevents overflow beyond the card container */
}

.chat-card {
    position: sticky;
    /* or fixed depending on your layout */
    top: 0;
    height: 100vh;
    /* full height */
    overflow: hidden;
    /* prevent it from scrolling */
}

/* Main content area inside the card */
.main-content {
    flex: 1;
}


.chatbot-content {
    overflow-y: auto;
    max-height: calc(80vh - 75px);
    overflow-x: hidden;
}


.fixed-bottom-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 1rem;
    border-radius: 0 0 15px 15px;
    z-index: 10;
}

.searchBarDiv {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
}

.wrapper input {
    background: #FAF7FF;
    border: 1px solid #CED4DA;
    border-radius: 50px;
    /* padding: 1rem 2rem; */
    padding-left: 2rem;
    padding-right: 8.5rem;
    width: 100%;
    height: 55px;
    outline: none;
    /* Prevents focus outline from appearing */
}

.wrapper input:focus {
    outline: none;
    /* Ensures no outline on focus */
    border-color: #CED4DA;
    /* Maintains border color on focus */
}

.wrapper .recordBtn {
    background: white;
    border-radius: 50px;
    width: 40px;
    /* Set a fixed width */
    height: 40px;
    /* Set a fixed height */
    border: 1px solid #A162F7;
    position: absolute;
    top: 50%;
    /* Center vertically */
    transform: translateY(-50%);
    /* Adjust for vertical centering */
    right: 10px;
}

.wrapper .recordBtn.disabled:hover {
    background: #fff;
}

/* Initial SVG color */
.recordBtn svg path {
    fill: #A162F7;
}

/* Hover effect */
.recordBtn:hover {
    background: #A162F7;
    color: #fff;
}

/* Change the SVG fill on hover */
.recordBtn:hover svg path {
    fill: #fff;
    /* Set SVG path color to white on hover */
}

.sendBtn:hover svg path {
    fill: #fff;
    /* Set SVG path color to white on hover */
}

.wrapper .sendBtn {
    background: white;
    border-radius: 50px;
    width: 40px;
    /* Set a fixed width */
    height: 40px;
    /* Set a fixed height */
    border: 1px solid #A162F7;
    position: absolute;
    top: 50%;
    /* Center vertically */
    transform: translateY(-50%);
    /* Adjust for vertical centering */
    right: 60px;
    /* Adjust position based on the record button */
}

/* Initial SVG color */
.sendBtn svg path {
    fill: #A162F7;
}

.sendBtn i {
    color: #A162F7;
    height: 10px;
}

/* Hover effect */
.sendBtn:hover {
    background: #A162F7;
    color: #fff;
    width: 45px;
    /* Set a fixed width */
    height: 45px;
    /* Set a fixed height */
}

/* Change the SVG fill on hover */
.sendBtn:hover svg path {
    fill: #fff;
    /* Set SVG path color to white on hover */
}



.chatBot-title {
    font-size: 13px;
    font-weight: 700;
    color: #475467;
}

.chatBot-subTitle {
    font-size: 13px;
    font-weight: 400;
    color: #475467;
}


.chatBot-text {
    font-size: 13px;
    font-weight: 400;
    color: #475467;
}


.user-title {
    font-size: 13px;
    font-weight: 700;
    color: #475467;
}

.user-subTitle {
    font-size: 13px;
    font-weight: 400;
    color: #475467;
}

.user-text-container {
    width: 100%;
    height: 40px;
    background: #FAF7FF;
    border-radius: 16px;
    padding: 10px 20px;
    display: flex;
    align-items: center
}

.user-text {
    font-size: 13px;
    font-weight: 400;
    color: #475467;
}

.chatbot-table {
    padding: 15px;
}

/* Analytics  */
.gap-4 {
    gap: 1.5rem !important;
}

/* Auto Optimize Screen */
.custom-improve-modal {
    max-width: 1390px !important;
    /* Custom width */
    margin: auto;
    /* Centers the modal */
}

.custom-improve-modal .modal-content {
    max-height: 100vh !important;
    /* Scales with viewport height */
    height: 93vh !important;
    /* Fixed custom height */
    overflow: hidden;
    /* Prevents content overflow */
}

.custom-modal-body {
    padding: 15px;
    /* Optional padding */
}

#improve {
    padding-top: 55px;
}

.improveSection-text {
    font-size: 24px;
    font-weight: 600;
    color: #101828;
}

.custom-improve-mheader {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 1rem;
    border-bottom: 1px solid #E4E7EC !important;
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.borderRight {
    border-right: 1px solid #E4E7EC !important;
}


.discuss-tab-container {
    background-color: rgb(250 250 250 / 72%);
    border-bottom: 1px solid rgb(231, 231, 231);
    display: flex;
    justify-content: center;
}

.discuss-tabs {
    display: flex;
}

.discuss-tab-button {
    background-color: rgb(250 250 250 / 72%);
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 50px;
    border-bottom: 4px solid transparent;
    padding: 10px 0;
    font-size: 14px;
}

.discuss-tab-button.active {
    color: rgb(0, 0, 0);
    border-bottom: 4px solid var(--primary-2);
    /* Change border color when active */
    font-size: 15px;
    font-weight: 600;
}

.discuss-content-container {
    padding: 20px;
    margin: 20px;
}

.discuss-tab-content {
    display: none;
}

.discuss-tab-content.active {
    display: block;
}

.discuss-text {
    font-size: 16px;
    font-weight: 600;
    color: #A162F7;
}

/* Monitor */
.monitorModal-text {
    font-size: 16px;
    font-weight: 600;
    color: #475467;
}

.monitorModal-subText {
    font-size: 12px;
    font-weight: 400;
    color: #475467;
}

.monitorModalTableWrapper {
    max-height: 60vh;
    /* fixed height */
    overflow-y: auto;
    /* vertical scroll when overflowing */
    overflow-x: hidden;
    /* optional: prevents horizontal scroll */
}

.monitorModalTable {
    width: 100%;
    height: 50%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    /* Helps contain the table within the card */
    border: none;
    box-shadow: none;
    margin: 0;
    /* Remove any extra margin */
}

.monitorModalTable td {
    padding: 16px 24px;
    /* Adjusted padding for a tighter fit */
    text-align: left;
    align-items: center;
}

.monitorModalTable th {
    /* border-top: 1px solid lightgray; */
    padding: 16px 24px;
}

.monitorModalThead tr {
    font-size: 12px;
    font-weight: 500;
}

.monitorModalTbody tr {
    font-size: 12px;
    font-weight: 400;
}


.table-cell {
    align-items: center;
    z-index: 1;
}

.scheduleCheck input[type="checkbox"] {
    margin-right: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    border: 1px solid lightgray;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.scheduleCheck input[type="checkbox"]:checked {
    background-color: #A162F7;
}

.scheduleCheck input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 8.5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.scheduleLater-text {
    font-size: 12px;
    font-weight: 400;
    color: #475467;
    text-wrap: nowrap;
}

.schedule-modal-header-custom {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem 0.6rem;
    border-bottom: 0px !important;
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.scoreTypeInfo {
    font-size: 12px;
    font-weight: 400;
    color: #475467;
    text-wrap: nowrap;
}

.p-inputtext {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    cursor: pointer;
}

.p-focus {
    border: none;
}

.profile {
    background-color: #FFB7C5;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-component {
    font-size: 12px;
    font-weight: 400;
    color: #475467;
    text-wrap: nowrap;
}

.btn-primary.disable {
    --bs-btn-color: #0a58ca;
    /* --bs-btn-bg: var(--primary); */
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    /* --bs-btn-hover-bg: var(--primary); */
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    /* --bs-btn-active-color: #fff; */
    /* --bs-btn-active-bg: var(--primary); */
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    opacity: 40%;
    pointer-events: none;
}

/* Evaluation in Progress Modal  */
.evalProgress-modal-header-custom {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem 0.6rem;
    border-bottom: 0px !important;
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.evalInnerCircle {
    width: 48px;
    height: 48px;
    background-color: #FEE4E2;
    border-radius: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.evalOuterCircle {
    width: 68px;
    height: 68px;
    background-color: #fee4e27a;
    border-radius: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.evalProgress-text {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
}

.evalProgress-subtext {
    font-size: 14px;
    font-weight: 400;
    color: #475467;
}

.btn-danger-custom {
    background-color: #D92D20;
    color: #fff;
    border: 1px solid #D92D20;
}

.btn-danger-custom:focus {
    background-color: #D92D20;
    color: #fff;
    border: 1px solid #D92D20;
}

.btn-danger-custom:hover {
    background-color: #D92D20;
    color: #fff;
    border: 1px solid #D92D20;
}

.btn-danger-custom:active {
    background-color: #D92D20 !important;
    color: #fff !important;
    border: 1px solid #D92D20 !important;
}

.evalModalPadd {
    padding: 10px 24px;
}

.evalCardPadd {
    padding: 8px 0px;
}

.closeBtnPadd {
    padding-right: 10px;
}

.error-section {
    padding-left: 26px;
}

/* Add Model tree */
.tree-container {
    max-width: 100%;
}

.tree {
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 0px 3px;
    min-height: 110px;
    height: 90px;
    display: block;
    overflow-y: auto;
}

.maturity-type {
    margin-bottom: 8px;
    font-size: 16px;
    font-size: 12px;
}

#selected-type {
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 8px;
    width: 100%;
    background: #FAF7FF;
    display: block;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

}

.type-header {
    cursor: pointer;
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    /* background-color: #f9f9f9; */
    padding: 3px 5px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-size: 12px;
}

.type-header:hover {
    background-color: #e9e9e9;
}

.type-header.active {
    background-color: #e9e9e9;
}

.subtype {
    list-style: none;
    padding-left: 20px;
    margin: 0;
    display: none;
    /* Hide by default */
    font-size: 12px;
}

.subtype-item {
    cursor: pointer;
    padding: 5px 8px;
    /* background-color: #f9f9f9; */
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-size: 12px;
}

.subtype-item:hover {
    background-color: #e9e9e9;
}

.subtype-item.active {
    background-color: #e9e9e9;
}

.chevron {
    font-size: 12px;
    transition: transform 0.2s ease;
}



/* Page Not Found */
input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

.mainbox {
    /* background-color:#ffffff;  */
    /* #95c2de; */
    margin: auto;
    height: 600px;
    width: 600px;
    position: relative;
}

.err {
    color: rgba(204, 97, 255, 0.56);
    font-family: 'Comfortaa', sans-serif;
    font-size: 11rem;
    position: absolute;
    left: 20%;
    top: 8%;
}

.far {
    position: absolute;
    font-size: 8.5rem;
    left: 42%;
    top: 15%;
    color: rgba(204, 97, 255, 0.56);
}

.err2 {
    color: rgba(204, 97, 255, 0.56);
    font-family: 'Comfortaa', sans-serif;
    font-size: 11rem;
    position: absolute;
    left: 68%;
    top: 8%;
}

.msg {
    text-align: center;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.6rem;
    position: absolute;
    left: 16%;
    top: 45%;
    width: 75%;
}

.notifContainer {
    max-height: 195px;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px;
    border-top: 1px solid #e4e7ec;
}

.arrow-down {
    font-size: 17px;
    color: #a0a0a0;
    display: inline-block;
    /* Needed for transform to work */
    transform: rotate(90deg);
    /* Rotates the arrow by 45 degrees */
    cursor: pointer;
}

i {
    color: #475467;
    cursor: pointer;
}

#definitionText {
    white-space: pre-wrap;
}

#previewContent1 {
    white-space: pre-wrap;
}

i.disable {
    color: #a0a0a0;
}

.evaluationDataset-select-menu {
    width: 100%;
    margin: 5px auto;
    position: relative;
    /* Position relative to parent */
}

.evaluationDataset-select-menu .evaluationDataset-select-btn {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px 10px;
    /* Adjusted padding */
    font-size: 12.4px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
}

.evaluationDataset-select-btn i {
    font-size: 25px;
    transition: 0.3s;
}

.disabled-image {
    cursor: none;
    /* Disables interactions with the image */
    opacity: 0.5;
    /* Dims the image */
}

.monitorModalTable {
    width: 100%;
    border-collapse: collapse;
}

.monitorModalThead {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    /* You can customize the background color */
    z-index: 1;
    /* Makes sure the header stays on top */
}

.spinner-border.text-primary {
    color: #A162F7 !important;
}

.success-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* Full viewport height for centering */
}

.success-circle {
    width: 30px;
    height: 30px;
    background-color: #4CAF50;
    /* Green background */
    border-radius: 50%;
    /* Makes it a circle */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Optional: Adds a subtle shadow */
}

.tick-mark {
    color: white;
    /* White tick color */
    font-size: 23px;
    /* Adjust size of the tick */
    font-weight: bold;
}

.refcontent {
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 12px 14px;
    min-height: 100px;
    /* Restrict max height */
    overflow: hidden;
    /* Hide overflowing content */
    position: relative;

}

/* Adding a fading effect at the bottom to indicate more content */
.refcontent::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    /* Adjust as needed */
}

/* Optional: If it's a single-line text ellipsis */
.refcontent.single-line {
    white-space: nowrap;
    text-overflow: ellipsis;
}


.refcontent span {
    font-size: 12px;
    color: #4d4d4f;
}


.upload-subTitle {
    font-size: 12px;
    font-weight: 400px;
    color: #475467;
}

.uploadPadd {
    padding: .22rem 1.5rem;
}

.uploadText1 {
    font-size: 14px;
    color: #6941C6;
    font-weight: 600;
}

.uploadText2 {
    font-size: 14px;
}

.uploadText3 {
    font-size: 14px;
}

.upload {
    /* height: 100%; */
    border: 1px solid lightgray;
    border-radius: 10px;
    display: block;
    text-align: center;
    padding: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.upload-modal-body {
    padding: 20px 22px;
}

.refFileTitle {
    font-size: 14px;
    color: #344054;
    font-weight: 500;
}

.previewContentGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.preview-content {
    height: 375px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 8px;
    display: block;
}

.preview-content1 {
    height: 375px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 8px;
    display: block;
}

.sme-content {
    height: 375px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 8px;
    display: block;
    width: 100%;
}

.refcontent {
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 12px 14px;
    max-height: 100px;
    /* Restrict max height */
    overflow: hidden;
    /* Hide overflowing content */
    position: relative;
    background-color: #FAF7FF;
}

/* Optional: If it's a single-line text ellipsis */
.refcontent.single-line {
    white-space: nowrap;
    text-overflow: ellipsis;
}


.refcontent span {
    font-size: 12px;
}


.correctnessScore {
    width: 100%;
    height: 50px;
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.scoreText {
    font-size: 12px;
    color: #344054;
}

.scoreNo1,
.scoreNo2,
.scoreNo3,
.scoreNo4 {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

.scoreNo1 {
    background-color: #56BA28;
}

.scoreNo2 {
    background-color: #FFE500;
}

.scoreNo3 {
    background-color: #DB162D;
}

.scoreNo4 {
    background-color: #56BA28;
}

.expandImage {
    cursor: pointer;
}

/* Target rows of a table with the class 'table-striped' */
#data-table-metrics.table-striped tr:nth-child(odd) {
    background-color: #f2f2f2;
    /* Light gray for odd rows */
}

#data-table-metrics.table-striped tr:nth-child(even) {
    background-color: #ffffff;
    /* White for even rows */
}

/* Optional: Add hover effect for better UX */
#data-table-metrics.table-striped tr:nth-child(odd) {
    background-color: #fff9c4 !important;
    /* Light gray for hovered row */
}

.chat-wrapper .chat-recordBtn {
    background: white;
    border-radius: 50px;
    width: 40px;
    /* Set a fixed width */
    height: 40px;
    /* Set a fixed height */
    border: 1px solid #A162F7;
}

/* Initial SVG color */
.chat-recordBtn svg path {
    fill: #A162F7;
}

/* Hover effect */
.chat-recordBtn:hover {
    background: #A162F7;
    color: #fff;
}

/* Change the SVG fill on hover */
.chat-recordBtn:hover svg path {
    fill: #fff;
    /* Set SVG path color to white on hover */
}

.chat-wrapper .chat-sendBtn {
    background: white;
    border-radius: 50px;
    width: 40px;
    /* Set a fixed width */
    height: 40px;
    /* Set a fixed height */
    border: 1px solid #A162F7;
    top: 50%;
}

/* Initial SVG color */
.chat-sendBtn svg path {
    fill: #A162F7;
}

/* Hover effect */
.chat-sendBtn:hover {
    background: #A162F7;
    color: #fff;
}

/* Change the SVG fill on hover */
.chat-sendBtn:hover svg path {
    fill: #fff;
    /* Set SVG path color to white on hover */
}

.arrow-stack {
    display: flex;
    flex-direction: column;
    line-height: 1;
    /* reduces vertical spacing */
    font-size: 12px;
    /* adjust as needed */
    margin-left: 4px;
    /* optional: adds a little space from the "Project ID" text */
    margin-bottom: 5px;
}

.arrow-stack i {
    padding: 0;
    margin: 0;
    height: 5px;
    /* optional: controls height */
}

.scheming-text {
    font-size: 17px !important;
    margin-top: 0 !important;
    margin-bottom: 0rem !important;
    font-weight: 500;
}

.password-container {
    position: relative;
    width: 100%;
}

.password-container .form-control {
    padding-left: .5rem;
    border-radius: 8px;
    font-size: 14px;
    padding-right: 2rem;
}

.password-container i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #6c757d;
    /* Adjust color as needed */
    cursor: pointer;
}

.password-container img {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #6c757d;
    /* Adjust color as needed */
    cursor: pointer;
}


.maturity-subHeader {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.maturity-td {
    display: flex;
    gap: 35px;
}

.subType-weightage {
    position: fixed;
    padding-left: 20px;
}

.info {
    height: 15px;
    width: 15px;
    margin-left: 7px;
}

.error-score {
    color: #FF1F25;
}

.admin-text {
    color: #757575;
    font-size: 11.67px;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    /* padding: 10px; */
    cursor: pointer;
}
.admin-img {
    height: 15px;
}

.menu-item {
    font-size: 11px !important;
}

.scores {
    width: 100%;
    max-height: 500px;
    overflow-y: auto;
    padding: 20px;
}


.allScores li {
    padding: 17px;
    font-size: 13px;
    /* border-left: 2px solid #E4E7EC; */
    text-align: center;
}

.allScores li:hover {
    /* padding: 0; */
    background: #f3edffba;
    color: #303030;
}

.allScores li.active:nth-child(1) {
    background: #f3edffba;
    color: #303030;
    border-top: 0 !important;
    border-bottom: 2px solid #E4E7EC;
}

.allScores li.active {
    /* padding: 0; */
    background: #f3edffba;
    color: #303030;
    border-bottom: 2px solid #E4E7EC;
    border-top: 2px solid #E4E7EC;
}

.ul-wrapper {
    display: flex;
    /* align-items:center; */
}

.allScores {
    margin: 0;
    /* padding-right: 10px; */
    max-height: 550px;
    list-style-type: none;
    /* border-right: 2px solid #E4E7EC; */
    overflow-y: auto;
}

.allScores {
    overflow-y: scroll;
    /* allow vertical scrolling */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.allScores::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.searchTitle {
    font-size: 13px;
    color: #667085;
    font-weight: 400;
}

.linkText {
    color: #7F56D9;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.chart-container {
    position: relative;
    /* height: 250px; */
}

.white-space-message {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    color: #888;
    font-size: 14px;
    text-align: center;
    pointer-events: none;
    z-index: 5;
    /* opacity: 0.8;
  background: #f9f9f9; */
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    max-width: 200px;
    width: fit-content;
}

.box {
    width: 450px;
    height: 500px;
    background-color: #FAF7FF;
    /* border: 2px solid #ccc; */
    border-radius: 16px;
    padding: 16px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    font-family: Arial, sans-serif;
    color: #333;
}

.box {
    width: 100%;
    height: 500px;
    border-radius: 16px;
    padding: 16px;
    font-family: Arial, sans-serif;
    color: #333;
}

.summaryTitle-text {
    font-size: 16px;
    font-weight: 600;
    padding: 25px;
}

.summaryTitle-text1 {
    padding-left: 0px !important;
}

.summaryTitle-text2 {
    padding-bottom: 5px !important;
}

.desc {
    padding-top: 4rem;
    padding-left: 25px;
    display: flex;
    /* padding-right: 10rem; */
    /* justify-content: space-between; */
    gap: 6rem;
}

.numberText {
    color: #0496FF;
    font-weight: 700;
    font-size: 28px;
}

.numberSubText {
    color: #727677;
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
}   

.bar-section {
    padding-top: 4rem;
    padding-left: 25px;
}

.select-menu6 {
    width: 100%;
    margin: 5px auto;
    position: relative;
    /* Position relative to parent */
}

.select-menu6 .select-btn6 {
    display: flex;
    height: 40px;
    background: #fff;
    padding: 10px 10px;
    /* Adjusted padding */
    font-size: 13px;
    font-weight: 400;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid lightgray;
    pointer-events: none;
}

.select-btn6 i {
    font-size: 25px;
    transition: 0.3s;
}

.select-menu6.active .select-btn6 i {
    transform: rotate(-180deg);
}

.select-menu6 .options6 {
    position: absolute;
    /* Changed to absolute */
    top: 100%;
    /* Position below the select button */
    left: 0;
    width: 100%;
    /* Ensure the width is the same as the parent */
    padding: 10px;
    /* Adjusted padding */
    margin-top: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    /* Ensure it appears above other content */
    max-height: 150px;
    /* Adjust as needed */
    overflow-y: auto;
    /* Add vertical scrollbar */
}

.select-menu6.active .options6 {
    display: block;
}

.options6 .option6 {
    display: flex;
    height: 40px;
    cursor: pointer;
    padding: 0 0px;
    border-radius: 8px;
    align-items: center;
    background: #fff;
    padding-left: 10px;
}

.options6 .option:hover {
    background: #F2F2F2;
}

.evalInnerCircle1 {
    width: 48px;
    height: 48px;
    background-color: #D1FADF;
    border-radius: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.evalOuterCircle1 {
    width: 68px;
    height: 68px;
    background-color: #ECFDF3;
    border-radius: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.linkText1 {
    color: #0057FC;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}

.toggle-sidebar {
    /* existing sizing/positioning styles … */

    cursor: pointer;
    /* pointer cursor */
    display: inline-flex;
    /* keeps icon centred */
    align-items: center;
    justify-content: center;

    transition:
        background-color 150ms ease,
        transform 150ms ease;
}

/* ----- Hover effect ----- */
.toggle-sidebar:hover {
    background-color: rgba(0, 0, 0, 0.05);
    /* subtle grey background */
    transform: translateX(2px);
    /* tiny nudge to the right */
}

/* change icon colour on hover */
.toggle-sidebar:hover i {
    color: #0d6efd;
    /* Bootstrap primary blue */
}

.config-details {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-right: 70px;
}

.link-text {
    color: #3F87FD;
    cursor: pointer;
}

.warning-text {
    text-align: center;
    justify-content: center;
    margin: 4rem;
}

.input-box {
    border: 1px solid #E4E7EC;
    padding: 12px 5rem 8px 12px;
    border-radius: 8px;
}

.form-control-editable {
    padding: 12px 5rem 15px 12px !important;
    border-radius: 8px !important;
    width: 10vw !important;
    box-sizing: border-box;
    line-height: 0.5 !important;
}

input[type="search"] {
    font-size: 11px;
}

.tag-input-wrapper {
    /* border: 1px solid #ccc;
  padding: 6px; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.i-s {
    border: none;
    outline: none;
    width: 100%;
    font-size: 11px;
    padding-left: 0px;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag {
    background-color: #e0e0e0;
    padding: 4px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
}

.remove-btn {
    background: none;
    border: none;
    margin-left: 4px;
    cursor: pointer;
    font-weight: bold;
}

.feature-icon {
    color: #FFAE53 !important;
}

.apexcharts-title-text {
    font-size: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 300;
}

.cancelBtn {
    font-size: 13.5px;
    font-weight: 400;
}

.header1 {
    padding: .5rem 1rem 0.3rem !important;
}

.radioBtn {
    padding-left: 18px !important;
}

.radio-wrapper {
    display: flex;
    align-items: center;
    /* Vertically centers radio with label group */
    gap: 20px;
    /* margin-bottom: 16px; */
    padding: 16px;
}

.label-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.main-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #343A40;
}

.sub-label {
    font-weight: 300;
    font-size: 12px;
    color: #475467;
    line-height: 20px;
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(161, 98, 247, 1);
    border-radius: 50%;
    background-color: white;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
}

input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 9px;
    background-color: rgba(161, 98, 247, 1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.card.px-2.mx-2 {
    box-shadow: 1px 2px 2px 0px #00000026;
}

.primary-outline {
    color: #7F56D9;
    border: 1px solid #7F56D9 !important;
}

.card-box {
    padding: 20px;
    width: 100%;
    height: auto;
    border: 1px solid #CED4DA;
    font-size: 14px;
    font-weight: 400;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 8px #CED4DA;
    font-family: Arial, sans-serif;
    /* color: #475467; */

}

.badge-box-green {
    display: inline-block;
    padding: 3px;
    background-color: #F0F9FF;
    color: #344054;
    width: auto;
    height: auto;
    border: 1px solid #0BA5EC;
    border-radius: 4px;
}

.badge-box-amber {
    display: inline-block;
    padding: 3px;
    background-color: #FBFFF0;
    color: #344054;
    width: auto;
    height: auto;
    border: 1px solid #FFEC1A;
    border-radius: 4px;
}

.badge-box-orange {
    display: inline-block;
    padding: 3px;
    background-color: #FFF7F0;
    color: #344054;
    width: auto;
    height: auto;
    border: 1px solid #FF881A;
    border-radius: 4px;
}

.badge-box-red {
    display: inline-block;
    padding: 3px;
    background-color: #FFF0F0;
    color: #344054;
    width: auto;
    height: auto;
    border: 1px solid #FF1F25;
    border-radius: 4px;
}


.chevron {
    transition: transform 0.3s ease;
}

.chevron.expanded {
    transform: rotate(180deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 2s ease;
}

.collapsible-content.expanded {
    max-height: 500px;
    /* large enough to fit content */
}
.chatBot-text-container p,li{
    font-size: 13px;
    font-weight: 400;
    color: #475467;
}

.edit-ticker{
    background-color: var(--primary);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-inline: 10px;
    cursor: pointer;
}

.ticker-modal-position {
  margin-right: 1%;
    margin-top: 6rem;
}
.predicted_score{
    border: 1px solid #475467;
    width: 20%;
    border-color: #CED4DA;
    border-radius: 3px;
}

.defaultFileset-text {
    font-size: 12px;
    font-weight: 400;
    color: #475467;
    text-wrap: nowrap;
}

.container2 {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e7f0f0;
}
.bi-three-dots-vertical{
    color: #6C757D;
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 14px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  top: 0.3px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #7F56D9;
}

input:focus + .slider {
  box-shadow: 0 0 1px #7F56D9;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.info-box{
    padding: 10px;
    background-color: #F4EFFF;
   
    display: flex;
    align-items: center;
    align-content: center;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    border-style: dashed;
    line-height: 20px;
    gap: 10px;
}
.info-text {
     color: #101828;
    font-size: 14px;
    font-weight: 400;
}
.drag-img{
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
}
.image-text{
    display: flex;
    padding: 10;
    gap: 10px;
    cursor: pointer;
}
.image-text img{
    height: 19.5px;
    width: 17.5px;
}
.image-text p{
    font-size: 13px;
    font-weight: 400;
    color: #101828;
}
.evaluationMode-select-menu1.disabled span{
    color: #D9D9D9;
}
.bi-caret-down-fill{
    font-size: 1.8rem;
}
.link-text{
    color: #3F87FD;
    font-size: 14px;
    font-weight: 400;
}
.modal-backdrop.show {
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.3); /* optional dark overlay */
}
.eval_type{
    font-size: 10px;
    font-weight: 500;
    color: #475467;
}
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
.weeks {
    width: 63px;
    height: 40px;
    border: 1.5px solid lightgray;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.weeks.selected {
    background-color: #7F56D9 !important;
    color: #FFFFFF !important;
}
/* .radio-btn-wrapper{
    height: 76px;   
    color: #333;              
    border-radius: 10px;       
    border: 1px solid #CED4DA;
    box-shadow: 1px 5px 2px #00000026;
    display: flex;
    gap: 15px;
} */
.radio-btn-wrapper {
    height: 76px;             
    color: #333;              
    border-radius: 10px;      
    border: 1px solid #CED4DA;
    box-shadow: 1px 5px 2px #00000026; 
    display: flex;
    align-items: center; 
    gap: 15px;
    /* width: fit-content;  */
    margin: 0 auto; 
}
.radio-btn-wrapper label{
    color: #343A40;
    font-weight: 600;
    font-size: 14px;
    padding-bottom: 5px;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa; /* Light gray background for header */
  z-index: 1; /* Ensure it stays above table rows */
  padding: 8px;
  text-align: left;
  border-bottom: 2px solid #dee2e6;
}

.custom-table td {
  padding: 8px;
  border-bottom: 1px solid #dee2e6;
}
.dataCard{
    max-height: 22rem;
    overflow-y: scroll;
}

.disabled-cursor-not-allowed{
    cursor: not-allowed !important;
}

/* This targets the chart toolbar directly */


/* This rule only triggers when the parent div has the class 'diagnostic-mode' */
.diagnostic-mode .apexcharts-toolbar {
  right: 4px !important; 
  top: -10px !important; 
  z-index: 10;
}

span i{
    cursor:auto;
}
.chatBot-text-container p{
    padding-bottom: 10px;
}
.chatBot-text-container ul>li{
    padding-top: 10px;
}

.td-shift-left {
  padding-right: 6px; /* tweak this */
}
/* This targets the actual slices of the donut chart */
.apexcharts-pie-area {
  cursor: pointer;
}

/* Optional: If you want the legend dots to be clickable as well */
.apexcharts-legend-marker, .apexcharts-legend-text {
  cursor: pointer;
}

.settings-dropdown {
  position: absolute;
  bottom: 45px;
  left: 0;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  width: 220px;
  z-index: 1000;
}

.settings-dropdown li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}

.settings-dropdown li:hover {
  background-color: #f4f6f8;
}

.settings-dropdown img {
  flex-shrink: 0;
}