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

:root {
    --primary-color: #351F8B;
    --secondary-color: #B64AC1;
    --text-color: #1E1A56;
    --dark-color: #15181D;
}

*,
body,
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
    font-family: "Roboto", sans-serif;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
    font-weight: 500;
    color: var(--text-color);
}

.f-14 {
    font-size: 14px !important;
}

.f-15 {
    font-size: 15px !important;
}

.f-16 {
    font-size: 16px !important;
}

.f-17 {
    font-size: 17px !important;
}

.f-18 {
    font-size: 18px !important;
}

.f-19 {
    font-size: 19px !important;
}

.f-20 {
    font-size: 20px !important;
}

.f-21 {
    font-size: 21px !important;
}

.f-22 {
    font-size: 22px !important;
}

.fw-4 {
    font-weight: 400 !important;
}

.fw-5 {
    font-weight: 500 !important;
}

.fw-6 {
    font-weight: 600 !important;
}

.fw-7 {
    font-weight: 700 !important;
}

.fw-8 {
    font-weight: 800 !important;
}

.fw-9 {
    font-weight: 900 !important;
}

.card {
    border-radius: 14px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid #E5E5E5;
}

.btn {
    border-radius: 8px;
    text-transform: capitalize;
}

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

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

.text-dark {
    color: #111c2d !important;
}

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

.text-muted {
    color: #111c2d99 !important;
}

.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-outline-primary:hover {
    background: var(--primary-color) !important;
    border: var(--primary-color) !important;
    color: #fff !important;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: var(--secondary-color) !important;
    border: var(--secondary-color) !important;
    color: #fff !important;
}

.btn-dark {
    background: var(--text-color) !important;
    border-color: var(--text-color) !important;
}

.bg-content {
    background-color: #f8fafd !important;
}



[data-bs-theme=light] .bg-light-subtle {
    background-color: #fff !important;
}

[data-bs-theme=light] header.bg-light-subtle {
    background-color: #f8fafd !important;
}

header.tt-top-fixed .tt-search-box input {
    background: #fff !important;
    border-radius: 10px !important;
    width: 250px !important;
    border: 1px solid #ececec !important;
}

header.tt-top-fixed .input-group {
    width: 320px;
}

#sidebar .tt-brand {
    background: var(--dark-color);
    box-shadow: none !important;
    position: relative;
    padding: 35px 10px;
}
#sidebar .tt-brand:after{
    content: "";
    position: absolute;
    top: 70px;
    left: 0;
    right: 15px;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 0%);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    width: 100%;
}
nav.navbar.navbar-vertical {
    padding-top: 15px;
}
#sidebar .tt-sidebar-nav::-webkit-scrollbar {
  width: 0px !important;
}
#sidebar img.tt-brand-logo {
    height: 40px;
    width: auto;
}

#sidebar .tt-sidebar-nav {
    background: var(--dark-color);
    padding-top: 0px !important;
}
#sidebar.collapse+#content header {
    left: 4rem;
    width: calc(100% - 4rem);
}
.tt-side-nav .side-nav-link {
    color: var(--bs-gray-400) !important;
    font-size: 14px;
    padding: 12px 20px;
    border: 0px !important;
    border-radius: 10px;
}

.tt-side-nav .side-nav-title {
    color: #999;
    letter-spacing: normal;
    text-align: center;
    text-transform: capitalize;
    font-size: 11px !important;
}

#sidebar .side-nav-item {
    border-left: 0px !important;
    margin: 0px 12px !important;
}
#sidebar.collapse .side-nav-item{
     margin: 0px 0px !important;
}
.tt-side-nav .tt-menu-item-active>a.side-nav-link {
    background: var(--primary-color) !important;
}

#sidebar .side-nav-title span {
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-gray-600);
    text-transform: uppercase;
}

#sidebar .side-nav-title.side-nav-item {
    padding: 12px;
    text-align: left;
    margin-top: 10px !important;
}

.tt-side-nav .side-nav-item a.side-nav-link:hover {
    color: #fff !important;
    background: transparent;
}

#sidebar .side-nav-item .side-nav-second-level {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px 0;
}

.side-nav-second-level li a,
.side-nav-third-level li a,
.side-nav-forth-level li a {
    padding: 10px 30px 10px 35px;
    color: var(--bs-gray-400) !important;
    font-size: 13px;
}

.side-nav-second-level li a:before,
.side-nav-third-level li a:before,
.side-nav-forth-level li a:before {
    content: '';
    height: 6px;
    width: 6px;
    background: #a9a9a9;
    border-radius: 50%;
    margin-right: 9px;
}

#sidebar .side-nav-item .side-nav-second-level::after {
    display: none;
}

.side-nav-second-level li a:focus,
.side-nav-second-level li a:hover,
.side-nav-third-level li a:focus,
.side-nav-third-level li a:hover,
.side-nav-forth-level li a:focus,
.side-nav-forth-level li a:hover {
    color: var(--primary-color);
}

@media (min-width: 1200px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1350px;
    }
}

.userwlcm {
    background: url(/assets/img/wlcmbg.png);
    background-size: cover;
    padding: 20px 40px 20px 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: 18px;
    box-shadow: 0 1px 4px rgba(133, 146, 173, .2) !important;
    margin-bottom: 25px;
}

.card-icon {
    background: rgba(247, 68, 86, .15);
    padding: 8px 16px;
    display: inline-block;
    border-radius: 60px;
    margin-bottom: 20px;
    color: rgb(255, 102, 146);
}

.card-icon.icon2 {
    background-color: #00ceb626 !important;
    color: #00ceb6 !important;
}

.card-icon.icon3 {
    color: rgb(0, 161, 255);
    background: rgb(0, 161, 255, .15);
}

.card-icon.icon4 {
    background: #b64ac11a;
    color: var(--secondary-color);
}

.card-icon.icon5 {
    background: #351f8b26;
    color: var(--primary-color);
}

.tt-side-nav .side-nav-second-level .tt-menu-item-active>a {
    color: var(--secondary-color) !important;
}

body {
    overflow: hidden;
}
.item-card {
    border-radius: 20px;
    background: #f8f8f8;
}
.card-color {
    background: rgba(247, 68, 86, .15);
    height: 100%;
    border-radius: 20px;
    border: 1px solid inherit;
    transition: all .3s ease-in-out;
}

.card-color:hover {
    box-shadow: 0 1px 4px rgba(133, 146, 173, .2) !important;
    transform: translateY(-5px);
}

.card-color .card-icon {
    background: rgb(255, 102, 146);
    color: #fff;
}

.card-color.color2 {
    background: rgb(137, 101, 229, .15);
}

.card-color.color2 .card-icon {
    background: rgb(137, 101, 229);
    color: #fff;
}

.card-color.color3 {
    background: rgb(182, 74, 193, .15);
}

.card-color.color3 .card-icon {
    background: rgb(182, 74, 193);
    color: #fff;
}

table.table.border.rounded {
    border: 0px !important;
}

table.table thead th, table.table thead td {
    padding: 7px 24px;
    border-bottom: 0px solid #e4ebf0;
    color: #111c2d;
    font-size: 14px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    border-left: 0px;
    border-right: 0px;
    background: #e4ebf0;
}
thead tr.bg-secondary-subtle {
    background: transparent !important;
}
table.table thead th:first-child {
    border-radius: 10px 0px 0px 10px !important;
}
table.table thead th:last-child {
    border-radius: 0px 10px 10px 0px !important;
}
.table-bordered>:not(caption)>* {
    border: 0px;
}
table.table thead th {
    white-space: nowrap;
}
table.table tbody td {
    border-bottom: 1px solid #e4ebf0;
    padding: 16px 24px;
    font-size: 14px;
    border-left: 0px;
    border-right: 0px;
}

table.table tbody td i {
    font-size: 18px;
}

.form-control,
.form-select {
    color: #727880;
    border-radius: 8px !important;
    font-size: 14px;
}

.form-select.form-select-sm {
    padding: 8px 16px;
}
.form-select.form-select-sm {
    padding: 8px 16px;
    /* font-size: 14px; */
}
.nav-line-tab {
    padding: 2px !important;
    background-color: #f2f6fa;
    border-radius: 30px;
    width: fit-content;
}

.nav-line-tab li a,
.nav-line-tab li button.showImage {
    color: #111c2d;
    border-bottom: 0px;
    padding: 9px 16px;
    margin: 0px;
    border-radius: 30px;
    min-width: 100px;
    text-align: center;
    justify-content: center;
    text-transform: capitalize;
}

.nav-line-tab li a.active,
.nav-line-tab li button.showImage.active {
    background-color: #fff !important;
    color: #111c2d;
}

.nav-line-tab li a:hover,
.nav-line-tab li button.showImage:hover {
    color: #111c2d;
}

.card-header:first-child {
    background: transparent;
}

ol.breadcrumb.tt-breadcrumb-dot {
    display: none;
}

.tt-page-title .h4 {
    font-size: 22px;
    font-weight: 600;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
}

.form-label, label {
    font-size: 14px;
    font-weight: 500;
    color: #111c2d;
}

.offcanvas-footer.border-top {
    border: 0px !important;
}

#folderList .tt-single-folder {
    background: #f2f6fa;
    border: 0px !important;
    border-radius: 12px !important;
    padding: 6px;
}

.tt-tb-dropdown .dropdown-menu {
    box-shadow: 0 13px 30px 10px #2e2d740d !important;
    border-radius: 12px;
}

.tt-tb-dropdown .dropdown-menu a {
    padding: 8px 22px;
    font-size: 14px;
}

.tt-tb-dropdown .dropdown-menu a:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}

table.table {
    border: 0px !important;
}

.btn-sm,
.btn-group-sm>.btn {
    padding: 8px 12px;
    font-size: 12px;
}

.form-searchrow {
    width: 320px;
    margin-left: auto;
}

.form-searchrow .form-control {
    border-radius: 8px 0px 0px 8px !important;
}

a {
    color: var(--secondary-color);
}

.form-switch .form-check-input {
    width: 2.6rem;
    height: 22px;
    margin-left: 0;
}

.form-check-input:checked {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

table tbody td .editIcon,
table tbody td .action-btn {
    background: #f1f1f1;
    height: 34px;
    width: 34px;
    display: inline-flex;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    color: #111c2d;
}

table tbody td .editIcon:hover,
table tbody td .action-btn:hover {
    color: var(--secondary-color);
}

table tbody td .erase {
    background: #ffdfdf !important;
    height: 34px;
    width: 34px;
    display: inline-flex;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}

table tbody td .erase span.text-danger.ms-1 {
    margin: 0px !important;
}

table tbody td .editIcon .icon-14,
table tbody td .erase .icon-14 {
    width: 15px;
    height: 15px;
    line-height: 15px;
}

.alert-warning {
    --bs-alert-color: #ffae1f;
    --bs-alert-bg: #fff3df;
    --bs-alert-border-color: #fff3df;
    --bs-alert-link-color: #fff3df;
}

.pagination .page-link {
    border-radius: var(--bs-border-radius);
    font-size: 14px;
    font-weight: 400;
    height: 30px;
    min-width: 30px;
    background: #ececec;
    color: #111c2d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination {
    margin-left: 10px;
}

.page-link.active,
.active>.page-link {
    z-index: 3;
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--bs-pagination-active-border-color);
}

.content-generator__sidebar-header {
    padding-bottom: 8px !important;
}

.content-generator__sidebar-header h6 {
    font-size: 16px;
    color: var(--text-color);
}

.tt-chat-header {
    padding: 10.4px 14px !important;
    background: #fff !important;
}

.content-generator__body-header input {
    font-size: 14px;
    font-weight: 500;
}

.tt-chat-action button {
    height: 36px;
    width: 36px;
    background: #f5f5f5;
}

.tt-chat-action button:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}

.note-toolbar {
    background: #ececec54 !important;
}

button.note-btn:hover {
    color: var(--secondary-color);
}

.tooltipp {
    position: relative;
}

.tooltipp:after,
.tooltipp:before {
    opacity: 0;
    pointer-events: none;
    bottom: 100%;
    left: 50%;
    position: absolute;
    z-index: 10;
    transform: translate(-50%, 10px);
    transform-origin: top;
    transition: all 0.18s ease-out 0.18s;
    display: none;
}

.tooltipp:after {
    background-color: #000;
    content: attr(data-tooltip);
    padding: 5px 12px;
    white-space: nowrap;
    margin-bottom: 11px;
    border-radius: 8px;
}

.tooltipp:before {
    width: 0;
    height: 0;
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
    margin-bottom: 6px;
}

.tooltipp:hover:before,
.tooltipp:hover:after {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    display: block;
}

.tooltipp.left:before {
    border-top: 6px solid transparent;
    border-left: 6px solid #000;
    border-bottom: 6px solid transparent;
    margin-right: 6px;
}

.tooltipp.left:before,
.tooltipp.left:after {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translate(10px, -50%);
}

.tooltipp.left:after {
    margin-right: 11px;
}

.tooltipp.left:hover:before,
.tooltipp.left:hover:after {
    transform: translate(0, -50%);
}

.generate-keyword-input {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.generate-keyword-input .btn {
    margin: 0px !important;
    height: 38px !important;
    width: 50px !important;
    justify-content: center;
    border-radius: 0px 8px 8px 0px !important;
}

.generate-keyword-input input {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

/* .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
} */

.tt-history-list-wrap {
    height: 100%;
}

.tt-tb-dropdown .dropdown-menu a.deleteChatThread span.text-danger.ms-1 {
    margin: 0px !important;
}

.tt-tb-dropdown .dropdown-menu a.deleteChatThread:hover {
    background: rgba(239, 68, 68);
}

.tt-tb-dropdown .dropdown-menu a.deleteChatThread:hover span.text-danger.ms-1 {
    color: #fff !important;
}

.tt-chat-history-list li {
    border: 0px !important;
    margin: 5px 10px;
    border-radius: 10px;
}

.tt-chat-history-list li.active,
.tt-chat-history-list li:hover {
    background-color: #b64ac11c;
}

.tt_update_text {
    text-transform: capitalize;
    font-weight: 500;
}

.tt-chat-history-list li.active .tt_update_text {
    color: var(--secondary-color);
}

.tt-package-switch-list {
    padding: 2px !important;
    background-color: #f2f6fa;
    border-radius: 30px;
    width: fit-content;
}

.list-inline-item:not(:last-child) {
    margin-right: 0px;
}


.tt-package-switch-list li.tt-active label {
    border: 0px;
    border-radius: 30px;
    padding: 5px 20px !important;
    color: #111c2d !important;
}

div.code-toolbar {
    height: 100%;
}

.code-view[class*=language-] {
    height: 100%;
    border-radius: 10px !important;
}

div.code-toolbar>.toolbar>.toolbar-item>a,
div.code-toolbar>.toolbar>.toolbar-item>button,
div.code-toolbar>.toolbar>.toolbar-item>span {
    color: #000;
    padding: 6px 12px;
    background: #fff;
}

.rounded-pill {
    border-radius: 8px !important;
}

#sidebar .tt-brand .tt-toggle-sidebar span svg {
    width: 18px;
    stroke: #fff;
}
#sidebar .tt-brand .tt-toggle-sidebar span {
    outline: 0px;
    background-color: transparent !important;
}
#sidebar .tt-brand .tt-toggle-sidebar {
    border-radius: 8px;
    height: 34px;
    width: 34px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
}
#sidebar.collapse .tt-brand .tt-toggle-sidebar {
    display: none !important;
}
#sidebar:hover .tt-brand .tt-toggle-sidebar{
    display: flex !important;
}
#sidebar.collapse .side-nav-title:before {
    background: #eee !important;
}
#sidebar.collapse:hover .side-nav-title:before {
    display: none !important;
}
.tt-toggle-sidebar {
    right: 10px !important;
    box-shadow: none !important;
}

.tt-top-navbar li.tt-user-dropdown div.dropdown-menu {
    min-width: 220px !important;
    padding: 10px !important;
    border-radius: 10px;
}

.tt-top-navbar li.tt-user-dropdown div.dropdown-menu .userdets {
    padding: 25px 10px;
    background: #fcdaff;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 10px;
}

.tt-top-navbar li.tt-user-dropdown div.dropdown-menu .nav-link {
    padding: 10px 14px !important;
    border-radius: 10px;
    color: #111c2d;
}

.tt-top-navbar li.tt-user-dropdown div.dropdown-menu .nav-link:hover {
    background: #fcdaff;
    color: var(--secondary-color);
}

.userinfoprofile {
    background: rgba(247, 68, 86, .15);
    padding: 50px;
    border-radius: 20px;
    text-align: center;
}

.file-drop-area {
    border: 2px dashed var(--secondary-color);
    border-radius: 12px !important;
}

.file-drop-area .file-drop-icon {
    color: var(--secondary-color);
}

.bttn--icon.btn--decrement span.material-symbols-rounded.text-danger {
    color: #fff !important;
    margin-left: 2px;
}

.bttn--icon.btn--decrement {
    background-color: rgb(239, 68, 68) !important;
}

.select2-container--default .select2-selection--single{
    height: calc(1.9rem + 7px);
    color: #727880;
    border-radius: 8px !important;
    font-size: 13px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.3rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.3rem;
}

textarea.compose-input {
    background: #fff !important;
}

.content-generator__sidebar.bg-secondary-subtle {
    background: #f5f5f5 !important;
}

#generateContentFromSidebar .content-generator__body .content-generator .content-generator__sidebar {
    width: 60% !important;
}

.content-generator__sidebar-body.post-previewbody {
    background: #f7f7f7 !important;
    max-height: 720px;
    overflow: auto;
}

ul.nav.c_post.tt-grid.fw-medium.sticky-top {
    background: #f2f6fa !important;
    border: 0px !important;
    top: 2px;
}

ul.nav.c_post.tt-grid.fw-medium.sticky-top .tt-grid-item {
    color: #111c2d;
    background-color: #fff !important;
    border-radius: 30px !important;
    padding: 6px 14px !important;
    border: 0px !important;
}

ul.nav.c_post.tt-grid.fw-medium.sticky-top .tt-grid-item:hover {
    color: var(--primary-color) !important;
}

.tt-grid .tt-grid-item.active {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.tt-grid .tt-grid-item .tt-check-icon {
    background: var(--secondary-color);
}

.tt-grid .tt-grid-item:hover {
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
}

.productBackgroundDiv .themeDiv.tt-item {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 15px;
    position: relative;
}

.productBackgroundDiv .themeDiv.tt-item img {
    border-radius: 12px !important;
}

.productBackgroundDiv .themeDiv.tt-item:hover {
    border-color: var(--secondary-color);
}

.productBackgroundDiv .themeDiv.tt-item.active {
    border-color: var(--secondary-color);
}

.productBackgroundDiv .themeDiv.tt-item.active::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    background: var(--secondary-color);
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    border-radius: 0px 7px 0px 12px;
    padding: 4px 7px;
    z-index: 9;
}
.tt-main-content::-webkit-scrollbar {
   width: 0px;
}
.tt-main-content {
    background: #fcfcfc;
    margin-right: 6px;
    margin-top: 68px;
    height: calc(100vh - 75px);
    overflow: auto;
    margin-bottom: 10px;
    border-radius: 0px 0px 10px 10px;
    padding: 0px 10px;
}
[data-bs-theme=light] footer.bg-light-subtle{
    border-top: 1px solid #00000012 !important;
    background-color: #fcfcfc !important;
}
header.tt-top-fixed {
    margin-top: 6px;
    border-radius: 10px 10px 0px 0px;
    position: fixed;
    top: 0px;
    right: 6px !important;
    left: unset;
    width: calc(100% - 16rem - 6px);
    border-bottom: 1px solid #00000012 !important;
    height: 4rem;
    box-shadow: none !important;
    background: #fcfcfc !important;
}
[data-bs-theme=light] header.bg-light-subtle {
    background-color: #fcfcfc !important;
}
#content {
    background: var(--dark-color) !important;
}
section {
    min-height: 75vh;
}
.container {
    max-width: 100%;
}
.custom-shade::before {
    background: #EB602D;
    left: -100px;
    top: -100px;
    content: "";
    height: 175px;
    width: 175px;
    opacity: 0.35;
    filter: blur(75px);
    position: absolute;
}
.custom-shade:after{
    background: var(--secondary-color);
    right: -100px;
    bottom: -100px;
    content: "";
    height: 175px;
    width: 175px;
    opacity: 0.35;
    filter: blur(75px);
    position: absolute;
}
.knowledgebase {
    padding: 0px;
    list-style: none;
}
.knowledgebase a {
    display: block;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 15px;
    color: #4c4c5c !important;
    transition: .3s;
    text-decoration: none;
    font-weight: 400;
    background-color: transparent;
    display: flex;
    align-items: center;
}
.knowledgebase a:hover {
    background: #e4ebf0;
    padding-left: 24px;
}
.knowledgebase a i {
    font-size: 10px;
    margin-right: 5px;
}
.mainfeature{

}
.mainfeature p{
    margin: 0px !important;
    font-size: 13px;
}
.mainfeature {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 12px;
    background: #f5d2ff;
    border:1px solid #f5d2ff;
    transition: all 0.3s ease-in-out;
}
.mainfeature:hover {
    border-color: var(--secondary-color) !important;
}
.mainfeature:hover h5{
    color: var(--secondary-color);
}
.mainfeature .icon {
    height: 40px;
    width: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--secondary-color);
    border-radius: 6px;
    margin-right: 10px;
}
.feature-icon {
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
    padding: 8px 16px;
    display: inline-block;
    border-radius: 60px;
    margin-bottom: 12px;
    color: #fff;
    font-size: 13px;
}
.border-hover{
    transition: all 0.3s ease-in-out;
}
.border-hover:hover {
    border: 1px solid var(--secondary-color) !important;
}
.btn-light {
    background: #e6ebf0;
}
.btn-light:hover{
     background: #beccdb;
     box-shadow: none !important;
}
.tt-settings-nav .list-group .list-group-item.active {
    border-left: 4px solid var(--secondary-color);
    background-color: rgb(182 74 193 / 20%);
    color: var(--secondary-color);
}
.mh-100vh{
    min-height: 100vh;
}
.tt-form-content .form-control{
    height: 50px;
    border: 2px solid #d7d2ee;
    padding-left: 42px;
    position: relative;
}
.tt-form-content .form-control:focus{
    border-color: var(--primary-color);
}
.input-groupnot .input-group .form-control {
    border-radius: 10px !important;
}
.h-50px{
    height: 50px;
}
.tt-form-content .form-control::placeholder {
  font-size: 14px;
}
.input-icon {
    font-size: 18px;
    position: absolute;
    z-index: 9;
    top: 17px;
    left: 15px;
    opacity: .6;
}
.tt-form-content {
    min-width: 400px;
}
.loginleft {
    background: linear-gradient(45deg, #a554bc99, #43328d3b);
    height: calc(100vh - 16px);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.loginleft .content{
    padding: 55px;
}
.loginleft .content h2 {
    font-size: 38px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
    margin-top: 30px;
}
.loginleft .content p {
    font-size: 18px;
    color: #000;
}
.offcanvas.tt-aside-navbar {
    background: var(--dark-color) !important;
}
.offcanvas.tt-aside-navbar .offcanvas-header {
    border-bottom: 0px !important;
    position: relative;
}
.offcanvas.tt-aside-navbar .offcanvas-header::after {
    content: "";
    position: absolute;
    top: 75px;
    left: 0;
    right: 15px;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 0%);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    width: 100%;
}
.offcanvas.tt-aside-navbar .offcanvas-header img.tt-brand-logo {
    margin-left: 0px !important;
    width: 130px;
}
.offcanvas.tt-aside-navbar .offcanvas-header .btn-close {
    background-color: rgba(255, 255, 255, .7);
    position: relative;
}
.offcanvas.tt-aside-navbar .offcanvas-body.tt-custom-scrollbar::-webkit-scrollbar{
    width: 0px !important;
}
@media (max-width:991px){
    header.tt-top-fixed {
        right: 4px !important;
        width: calc(100% - 8px);
    }
    .tt-main-content {
        margin-right: 4px;
        margin-left: 4px;
    }
    .item-card {
        margin-bottom: 18px;
    }
}
@media (max-width:580px){
    .wlcmimg {
        display: none !important;
    }
    .card-color {
        margin-bottom: 20px;
        height: calc(100% - 20px);
    }
    .container {
        padding: 0px;
    }
    .userinfoprofile {
        margin-bottom: 30px;
        height: auto !important;
    }
}
.swiper.swiper-pointer-events {
    padding: 2px !important;
    background-color: #f2f6fa;
    border-radius: 30px;
}
.tt-template-category-slider .swiper-slide {
    margin: 0px !important;
    border-radius: 30px;
}
.tt-template-category-slider .swiper-slide-active {
    color: var(--secondary-color);
    background: #fff !important;
}
.tt-slider-indicator .swiper-button-next, .tt-slider-indicator .swiper-button-prev {
    top: 66%;
}
#renderTemplate .card-footer {
    background: #f2f6fa !important;
    padding: 10px 17px 12px !important;
}

#renderTemplate .card-footer a, #renderTemplate .card-footer button {
    background: #fff !important;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.table-pagination-select {
    background-size: 21px 8px;
    background-color: #ececec;
    color: #111c2d;
    padding: 6px 14px !important;
    margin-left: 10px;
}
#renderChat {
    padding: 20px;
}
#renderChat .card {
    border-radius: 12px !important;
    background: #f5f5f5;
    border: 0px !important;
}
.tt-grid {
    margin-bottom: 20px;
    padding-bottom: 5px;
}
.tt-page-content.mb-4 {
    min-height: calc(100vh - 235px);
}
.total-data-count {
    background: #f2f6f9;
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    border-radius: 10px;
    margin-bottom: 18px;
    gap: 18px;
    font-size: 18px;
}
.badge {
    line-height: inherit;
    border-radius: 10px;
}
.groupPermission{
    background: #f5f5f5;
    padding: 10px;
    border-radius: 12px;
}
#sidebar.collapse .tt-brand .tt-toggle-sidebar span svg {
    rotate: 180deg;
}
.tt-form-container {
    align-items: center;
    justify-content: center;
}
.input-groupnot .input-group .form-control { 
    border-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
@media (max-width: 768px) {
    .tt-form-container {
        display: flex !important;
    }
    .tt-form-content {
        width: 100%;
        min-width: 300px;
    }
}