:root {
    --bg-light: light-dark(#f8f9fa,#2f2f2f);
    --bg-light-2: light-dark(#ecf0f3,#212529);
    --bg-light-3: light-dark(#ecf0f3,#212529);
    --bg-light-4: light-dark(#ecf0f3,#212529);
}
html[data-bs-theme="dark"] svg {path:var(--color-first); }
html[data-bs-theme="dark"] .icon-clr {fill:var(--color-first);}
/*========== BUTTON STYLE ==================================*/
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.no-bg-btn {
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.button svg {width: 20px;height: 20px;stroke-width: 1.6px;}
.small-btn svg {width: 16px;height: 16px;}
.radius-50 {border-radius: 50px;}
/*========== HEADING STYLE =================================*/
.webContent .mainHeading{
    font-size:3rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing: 0;
    color:var(--color-first);
    font-family: var(--font-family);
    text-transform: capitalize;
}
.webContent .subHeading {
    font-size:2rem;
    line-height:1.2;
    color: var(--color-second);
    letter-spacing: 0px;
    text-transform: capitalize;
    font-family: var(--font-family);
    font-weight: 500;
}
.webContent .thirdHeading, .thirdHeading {
    font-size: 1.2rem;
    color: var(--color-second);
    letter-spacing: 0px;
    font-family: var(--font-family);
    font-weight: 600;
}
.webContent p {
    font-weight: 400;
    color: var(--color-second);
    font-size: 1rem;
    line-height: 1.6;
    font-family: var(--font-family);
}
/*..........................................................*/
/*html[data-bs-theme="dark"] svg{fill:var(--color-first); }*/
body {position: relative;height: 100%;}
.text-1-line, .text-2-line {
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.text-2-line {-webkit-line-clamp: 2;}
.font-14 {font-size: 14px;}
.webContent .fw-500, .fw-500 {font-weight: 500;}
.small-o {width: 5px;height: 5px;border-radius: 10px;background-color: var(--icon-secondary);}
.btn-close {font-size: 14px;}
.min-w-45 {min-width: 45%;width:100%;padding-left: 12px;padding-right: 12px;}
.min-w-30 {min-width: 30%;width:100%;padding-left: 12px;padding-right: 12px;}
.min-w-21 {min-width: 21%;width:100%;padding-left: 12px;padding-right: 12px;}
.min-w-16 {min-width: 16%;width:100%;padding-left: 12px;padding-right: 12px;}
.min-w-7 {min-width: 7%;width:100%;padding-left: 12px;padding-right: 12px;}
.color-light {color: var(--icon-secondary);}
.size-28 {width: 28px;height: 28px;}

/* ===== header top ===== */
.header-top {
/*    position: fixed;*/
    top: 0;
    left: 0;
    width: 100%;
    min-height: 60px;
    padding: 20px 0;
    background-color: var(--bg-light);
    transition: all 0.3s ease-in-out;
    z-index: 9;
}
.logo-img img {width: auto;height: 24px;}
/* ===== header top end ===== */

/* ===== nav ===== */
.nav-left {
    position: fixed;
    top: 60px;
    left: 0;
    width: 260px;
    height: 100%;
    padding: 0;
    background-color: var(--bg-light);
    transition: all 0.3s ease-in-out;
}
.nav-left .navbar-left {width: 100%}
.small-svg-icon{
    width: 18px;
    height: 18px;
    stroke: var(--color-first);
    stroke-width: 1.6px;
    margin-right: 8px;
}
.icon-white{stroke: #ffffff;}
.nav-left .navbar-left .nav-ul {
    overflow-y: auto;
    max-height: 92vh;
    padding: 20px;
}
.navbar-left .nav-ul .nav-link2{
    font-size: 14px;
    font-weight: 500;
    color: var(--color-first);
    margin: 4px 0 10px 0;
}
.nav-left .navbar-left .nav-ul .nav-link{
    font-size: 14px;
    font-weight: 400;
    color: var(--color-first);
    padding: 6px 16px;
    margin-bottom: 10px;
    border-radius: 50px;
}
.nav-left .navbar-left .nav-ul .nav-link:hover {
    background-color: var(--bg-light-2);
}
.nav-left .navbar-left .nav-ul .nav-link.active {
    background-color: var(--bg-light-3);
}
.nav-left .navbar-left .nav-ul .nav-link.nav-new-btn {box-shadow: var(--shadow);}
.nav-menu-icon {stroke: var(--color-first);}
.user-name {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 50px;
    background-color: #121314;
}
.user-name2 {font-size: 22px;width: 44px;height: 44px;}
.user-name3 {min-width: 28px;width: 28px;max-height: 28px;height: 28px;}
.navbar-left .nav-ul .progress {height: 6px;background-color: var(--bg-light-3)}
/* ===== nav end ===== */

/* ===== main section ===== */
.main-section {
    position: relative;
    right: 0;
    top: 0;
    display: block;
    clear: both;
    float: unset;
    padding: 64px 20px 20px 0;
    margin: 0 auto 0 260px;
    min-height: 100vh;
    width: auto;
    transition: all 0.3s ease-in-out;
}
.main-section:before{content: "";transition: all 0.3s ease-in-out;}
.main-contents {
    position: relative;
    display: block;
    width: 100%;
    /*height: 100%;*/
    min-height: 80vh;
    border-radius: 20px;
    padding: 24px;
}
/* ===== main section end ===== */

/* ===== INPUTS ===== */
.form-control, .form-select{
    width: 100%;
    height: 48px;
    color: var(--color-second);
    padding: 10px 20px;
    border-radius: 8px !important;
    border: 1px solid var(--icon-secondary);
    background-color: #ffffff;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.7s ease;
}
.form-control:hover, .form-control:focus, .form-select:hover, .form-select:focus {
    border-color: var(--color-first);
}
.form-control::placeholder, .form-control:focus::placeholder, .form-select::placeholder, .form-select:focus::placeholder {
    color: var(--color-second);
}
/* ===== INPUTS end ===== */

/* ===== checkbox ===== */
.custom-checkbox-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    gap: 0.5rem;
}
.custom-checkbox {display: none;}
.checkmark {
    position: relative;
    display: inline-block;
    height: 24px;
    width: 24px;
    min-width: 24px;
    border-radius: 50%;
    margin: 0 0 0 0 !important;
}
.custom-checkbox:checked + .checkmark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 6px;
    height: 14px;
    border: solid var(--color-first);
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}
/* ===== checkbox end ===== */

/* ===== dropdown ===== */
.dropdown-item {font-size: 14px;white-space: normal;}
.no-toggle-after:after {display: none !important;}
.table-names p {color: var(--color-first);}
.dropdown-menu {min-width: 200px;}
.dropdown-submenu .dropdown-menu {
    top: 0;
    right: 100%;
    margin-top: 0;
    margin-left: 0.1rem;
    display: none;
}
.dropdown-submenu:hover .dropdown-menu {display: block;}
.dropdown-submenu .dropdown-toggle::after {position: absolute;right: 10px;left: auto;transform: rotate(-90deg);}
.dropdown-item.active, .dropdown-item:active {color: var(--color-first);background-color: var(--bg-light-3);}
.profile-dropdown .dropdown-menu {width: 240px;}
/* ===== dropdown end ===== */

/* ===== table ===== */
.table-wrapper {overflow-x: auto;position: relative;}
.sticky-col {position: sticky;left: 0;z-index: 1;background-color: #ffffff;}
thead .sticky-col {z-index: 2;}
.table>:not(caption)>*>* {padding: 14px;}
.table-names .table-border {min-height: 40px;}
.table-border {border-bottom: 1px solid var(--bg-light-4);min-height: 62px;}
/* ===== table end ===== */
.text-transform-none{text-transform:none !important}
.accordion-image {
max-width:70%;
}
.accordion-item {
border-left: 4px solid #e0e0e0;
border-right: 0;
border-top: 0;
border-bottom: 0;
padding: 16px;
margin-bottom: 16px;
cursor: pointer;
transition: border-color 0.3s;
}
.accordion-item.active {
border-color:var(--color-first);
}
.accordion-title {
font-weight: 500;
font-size: 16px;
color: #202124;
margin: 0;
}
.accordion-content {
margin-top: 8px;
color: #5f6368;
display: none;
font-size: 14px;
}
.accordion-item.active .accordion-content {
display: block;
}

/*############# sidenav#############*/
.sidenav{
position: fixed;
top: 0;
left: 0;
height: 100vh;
background-color: #f7f7f8;
border-right: 1px solid #ddd;
width: 200px;
overflow:hidden;
transition: width 0.3s ease;
z-index: 1000;
}

.sidenav.collapsed {
width: 55px;
}

.sidenav .toggle-btn{
text-align: right;
padding: 1rem;
cursor: pointer;
}


.navbar-left li {
padding: 12px 14px;
cursor: pointer;
transition: background 0.2s;
}

.navbar-left li:hover {
background-color: #eaeaea;
}

.navbar-left i, .navbar-left svg {
font-size: 18px;
margin-right: 16px;
min-width: 24px;
text-align: center;
}

.navbar-left span {
transition: opacity 0.2s;
white-space: nowrap;
}

.sidenav.collapsed .navbar-left span {
opacity: 0;
pointer-events: none;
}

.section-label {
padding: 10px 20px;
color: #777;
font-size: 12px;
text-transform: uppercase;
}

.chat-item {
padding-left: 60px;
font-size: 14px;
color: #222;
padding-top: 6px;
padding-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.sidenav.collapsed .chat-item {
display: none;
}

.main {
flex-grow: 1;
transition: margin-left 0.3s ease;
margin-left: 200px;
padding: 0 1rem;
}

.sidenav.collapsed + .main {
margin-left: 64px;
}
.nav-new-btn {
box-shadow: var(--shadow);
font-size: 14px;
font-weight: 400;
color: var(--color-first);
padding: 6px 2px;
margin-bottom: 10px;
border-radius: 50px;
border: none;
outline: none;
}
.dropzone {
border: 1px dashed var(--icon-secondary);
border-radius: 10px;
padding: 40px;
text-align: center;
color: #2f2f2f;
cursor: pointer;
transition: background-color 0.3s ease;
}
.dropzone.dragover {
background-color: #e9f5ff;
border-color: var(--icon-secondary);
}
#fileInput {
display: none;
}
#fileInfo ul {padding: 0;margin: 0;}
.before-header-body {margin-top: 68px;}
.color-blue {color: var(--color-blue);}
.input-edit-btn:hover {text-decoration: underline;}
.password-input.form-control {padding-right: 40px;}
.toggle-password {padding-right: 32px;margin-top: -34px;}
.form-control.is-valid, .was-validated .form-control:valid {border-color: var(--color-blue)}
.password-input.form-control.is-invalid, .was-validated .password-input.form-control:invalid,
.password-input.form-control.is-valid, .was-validated .password-input.form-control:valid{
    background-image: none !important;
}
/*========== @media screen =================================*/
@media screen and (max-width: 1200px) {
    .webContent .subHeading {font-size: 1.4rem;}
    .min-w-45 {min-width: 39%;}
    .min-w-16 {min-width: 18%;}
}
@media screen and (max-width: 991px) {
     #offcanvasExample {width: 240px;background-color: var(--bg-light);}
    .offcanvas-header {display: flex !important;}
    .nav-menu-btn {display: block !important;}
    .nav-left {position: unset;width: 100%;padding: 16px;}
    .logo-img img {height: 20px;}
    .nav-left .navbar-left .nav-ul {overflow-y: unset;max-height: 100%;padding: 0;}
    .main-section {padding: 64px 20px 20px 20px;margin: 0 auto;}
    .main-contents {border-radius: 16px;}
    .webContent .thirdHeading, .thirdHeading {font-size: 1rem;}
     .main{margin-left:0px;}
}
@media screen and (max-width: 767px) {
    .header-top {padding: 15px 0;}
    .main-section {padding: 64px 15px 20px 15px;margin: 0 auto;}
    .main-contents {border-radius: 10px;}
    .files-table {overflow-x: auto;}
    .min-w-45 {min-width: 180px;}
    .min-w-30, .min-w-21, .min-w-16 {min-width: 160px;}
    .min-w-7 {min-width: 28px;}
    .webContent .subHeading {font-size: 1.2rem;}
    .main{margin-left:0px;}
    
}
/*========== @media screen END =================================*/
body, .main {min-height: 100vh;}
/*Login page*/
.login-block h1 {font-size: 32px;}
.login-block label {font-weight: 400;padding: 0 4px;}
.form-control, .form-select {
    font-weight: 400;
    border-radius: 50px !important;
    border-color: var(--border-color);
}
.form-control:hover, .form-select:hover {border-color: var(--border-color);}
.login-block input:focus+label, .login-block input.has-value+label,
.form-control.is-invalid+label, .was-validated .form-control:invalid+label {
    top: -1px;
    font-size: 14px;
    font-weight: 400;
    background:#fff;
}
.login-block input:focus, .form-control:focus, .form-select:focus {border-color: var(--color-blue) !important;}
.login-block input:focus+label {font-weight: 500;color: var(--color-blue) !important;}
.form-control.is-invalid+label, .was-validated .form-control:invalid+label {
    color: var(--bs-form-invalid-color) !important;
}
.login-block input.bg-light:focus+label, .login-block input.bg-light.has-value+label,
.form-control.bg-light.is-invalid+label, .was-validated .form-control.bg-light:invalid+label {background-color: var(--bg-light) !important;}

/*..................... search section ............................*/
html[data-bs-theme="dark"] .sidenav {background-color: #3d3d3d;border-right: 1px solid #424549;}
html[data-bs-theme="dark"] .navbar-left li:hover {background-color: #2f2f2f;}
html[data-bs-theme="dark"] .clr-second {color: #f5f5f5 !important;}

.search-section {width: 400px;}
.search-section .search-btn {position: absolute;top: 7px;left: 16px;}
.search-section .form-control {padding-left: 44px;height: 42px !important;}
@media screen and (max-width: 767px) {
    .search-section {width: 52%;}
    .search-section .search-btn {top: 3px;left: 8px;}
    .search-section .icon-20 {width: 16px;height: 16px;}
    .search-section .form-control {padding-left: 28px;height: 32px !important;}
    .logo-img img {height: 14px;}
    .user-name {width: 28px;height: 28px;}
}

/*..................... move section ............................*/
.fill-icon {stroke: none !important;fill: var(--secondary-dark);}
.icon-clr-fill {stroke: none !important;fill: var(--color-first);}
.icon-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding: 6px;
    margin: 0;
    border: none;
    border-radius: 100px;
    background-color: transparent;
    box-shadow: none;
    outline: none;
}
.icon-btn:hover {background-color: var(--bg-light-3);}
.text-14 {font-size: 14px !important;line-height: normal !important;}
.cursor-pointer {cursor: pointer !important;}
.suggestedToggle.open svg {transform: rotate(-90deg);}
.toggles-area {display: none;}
.toggles-area.active {display: block;}
.w-fit-content {width: fit-content !important;}
.radius-6 {border-radius: 6px !important;}
.border-clr {border-color: var(--secondary-dark) !important;}
hr.border-clr {opacity: 0.4 !important;}
.file-move {height: 36px;}
.file-move:hover .file-move-btn {display: flex !important;}
.section-height {overflow-y: auto !important;height: 260px;}
.fileToggle.open ~ .file-tabs-section {display: none !important;}
.file-tabs-section .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {background-color: var(--bg-light-3);}
html[data-bs-theme="dark"] .btn-first {color: #0d0d0d;}
html[data-bs-theme="dark"] .btn-first:hover {color: #ffffff;}

.sidenav.collapsed .nav-link span{display: none;}
.gpt-logo-svg {width: 100px;}
html[data-bs-theme="dark"] .gpt-logo-svg, html[data-bs-theme="dark"] .gpt-logo-svg path {fill: #ffffff;}
html[data-bs-theme="dark"] .header-before-login .logo-btn:hover .gpt-logo-svg,
html[data-bs-theme="dark"] .header-before-login .logo-btn:hover .gpt-logo-svg path {fill: #000000;}

@media screen and (max-width: 991px) {
    .section-height {height: 220px;}
    .gpt-logo-svg {width: 80px;}
}
@media screen and (max-width: 767px) {
    .icon-btn {padding: 3px;}
    .icon-btn svg.icon-18 {width: 16px;height: 16px;}
    .nav-new-btn-span {font-size: 13px;}
    .section-height {height: 200px;}
    .gpt-logo-svg {width: 64px;}
}
/*..................... move section end ............................*/