@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --theme-gradient: linear-gradient(-225deg, #f54266, #3858f9);
    --dark: #13132A;
    /* --dark: #2B3054; */
    --body: #1b1b3a;
    /* --body: #353A5C; */
    --black: #000;
    --light: #fff;
    --white: #fff;
    --info: #0DCAF0;
    --placeholder: #a8b4c3;

}

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

/* LIGHT MODE */
body.light-mode {
    --dark: #ffffff;
    --body: #f5f6fa;
    --light: #000000;
    --theme-gradient: linear-gradient(-225deg, #EFBBE8, #A991D3);
}

/* Apply variables */
body {
    background: var(--body);
    color: var(--light);
}

/* Fix Bootstrap overrides */
body.light-mode .bg-dark {
    background: #ffffff !important;
    color: #000 !important;
}

body.light-mode .text-white,
body.light-mode td,
body.light-mode th {
    color: #000 !important;
}


body.light-mode .text-light {
    color: #555 !important;
}

body.light-mode .table-dark {
    --bs-table-bg: #ffffff !important;
    --bs-table-hover-bg: #b9c7ff1e !important;
    color: #000 !important;
}

body.light-mode .border-white {
    border-color: #0000001a !important;
}

body.light-mode .project-table.table-striped {
    --bs-table-striped-bg: #f0f0f0 !important;
}


input::placeholder {
    color: var(--placeholder) !important;
}

/* form layout */
input::placeholder,
textarea::placeholder {
    font-size: 12px;
}

body {
    background: var(--body);
    font-family: "Roboto", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 0;
}

a {
    text-decoration: none !important;
}

/* .container{
    max-width: 1600px !important;
    } */
.btn {
    padding: 5px 10px !important;
}

.theme-gradient {
    background: var(--theme-gradient);
}

.bg-dark {
    background: var(--dark) !important;
}

.table-dark {
    --bs-table-bg: var(--dark) !important;
    --bs-table-hover-bg: var(--body) !important;
}

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

.text-sm {
    font-size: 12px;
    line-height: 20px;
}

::-webkit-scrollbar {
    width: 6px;
    /* increase from 1px for visibility */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--body) !important;
    border-radius: 10px;
}


/* Sidebar */
.sidebar {
    width: 240px;
    transition: all 0.3s ease;
    overflow-y: auto;
}

/* Collapsed sidebar */
.sidebar.collapsed {
    width: 100px;
}

/* Hide text when collapsed */
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .user-name {
    display: none !important;
}

.sidebar.collapsed .nav-link span,
.sidebar.collapsed .user-img {
    width: 50px !important;
}

/* Center icons */
.sidebar.collapsed .nav-link {
    justify-content: center !important;
}


.sidebar .nav-link {
    color: var(--light);
    padding: 12px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: none !important;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    background: var(--theme-gradient);
    color: var(--light) !important;
}

.sidebar .collapse a.active {
    color: var(--light) !important;
}

.sidebar a:hover {
    color: var(--light) !important;
}

/* Main */
.main {
    margin-left: 240px;
}

.main.expanded {
    margin-left: 100px !important;
}

/* Top Header */
.topbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--theme-gradient) !important;
    height: 100%;
}

.top-content {
    background: var(--theme-gradient);
    color: var(--light);
}

/* Table badges */
.badge {
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 50px;
}

.btn-sm,
.btn-sm i {
    font-size: 12px;
    padding: 2px 10px 4px;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--warning);
}

/* top header  */
.top-header {
    /* min-height: 200px; */
    min-height: 180px;
}

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

.dropdown-menu {
    width: 260px;
}

/* admin content main */
.admin-content {
    margin-top: -50px;
/*    min-height: 80vh;*/
    overflow: scroll;
}

.icon-box {
    width: 60px;
    height: 60px;
    line-height: 60px;
}

#chart {
    width: 100% !important;
    height: 382px !important;
}



/* letest task */
.task-item .letest-task-edit {
    opacity: 0;
}

.task-item:hover .letest-task-edit {
    opacity: 1;
}

.task-item .task-line {
    width: 4px;
    height: 40px;
    border-radius: 2px;
}

.nav-tabs .nav-link.active {
    color: var(--info) !important;
}

.donut-chart {
    width: 180px;
    margin: auto;
}

.donut-chart-line {
    width: 80px;
}



/* tables  */
#cart-items table {
    display: table;
}
.table{
    margin-top:20px;
}
.table tr td, .table tr th {
    white-space: nowrap !important;
    padding: 13px !important;
    vertical-align: middle;
}

.task-table td h6 {
    width: 35px;
    height: 35px;
    line-height: 22px;
    text-align: center;
}

.table-striped {
    --bs-table-striped-bg: var(--body) !important;
}

.data-table td {
    font-size: 14px;
    padding: 15px;
}

/* pagination */
.page-link {
    background-color: var(--dark) !important;
    color: var(--light) !important;
    border-color: #f0f0f035;
    border-radius: 0 !important;
}

.disabled>.page-link {
    border-color: #f0f0f035;
    color: #a1a1a1 !important;
}

.page-link:focus {
    box-shadow: none !important;
}
label{
    margin-bottom : 10px;
}