/*
  Theme Name: Name - Multipurpose HTML Template
  Author: Version001
  Support: Version001
  Web: https://version001.com/
  Email: NAFIULPUST@GMAIL.COM
  Description: Creative  HTML5 template By Version001
  Version: 1.0

*/

/*=== table of content ===*/

/*=== table of content ===*/

header {
    background: #202123;
    padding: 10px 0;
}

.logo img {
    max-width: 285px;
    width: 100%;
}

header h1,
header h4 {
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 22px;
}

.header-fixed {
    position: fixed;
    width: 78%;
    z-index: 999;
    top: 0;
    background: #444654;
    padding: 5px 0;
}

.v-sidebar {
    margin: 0;
    padding: 0;
    width: 20%;
    background-color: #202123;
    position: fixed;
    min-height: 100%;
    overflow: auto;
    z-index: 999;
}

div.v-content {
    margin-left: 20%;
    padding: 1px 5px;
}

.v-sidebar .logo a {
    padding: unset;
}

.v-sidebar .logo a:hover {
    background-color: unset !important;
}

/* width */
.v-sidebar ul::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.v-sidebar ul::-webkit-scrollbar-track {
    background: #202123;
}

/* Handle */
.v-sidebar ul::-webkit-scrollbar-thumb {
    background: #000;
}

/* Handle on hover */
.v-sidebar ul::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.v-sidebar ul {
    margin: 0;
    height: 75vh;
    overflow: auto;
    scroll-behavior: auto;
    padding-bottom: 250px;
}

.v-3 ul {
    height: 65vh;
}

.v-sidebar ul li {
    padding: 0;
}

.v-sidebar a {
    display: block;
    color: #ffffff;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 12px;
}

.v-sidebar ul li img {
    max-width: 25px;
    position: absolute;
    right: 15px;
}

.v-sidebar a.active {
    background-color: #04aa6d;
    color: white;
}

.v-sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.v-sidebar a:active {
    background-color: #04aa6d;
    color: white;
}

.setting-btn {
    position: absolute;
    width: 100%;
    background: #202123;
    bottom: 0;
    padding-bottom: 20px;

}

.setting-btn a {
    background: #444654;
    color: #dde5ff;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 3px;
    margin: 0 15px;
    padding: 5px 5px 5px;
    border: 1px solid #f1f1f14d;
    border-radius: 3px;
}

.search-btn a {
    color: #202123;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 3px;
    margin: 0 15px;
    padding: 5px 5px 5px;
    border: 1px solid #f1f1f14d;
    border-radius: 3px;
}

/*single box start*/
.icon-size {
    max-width: 35px;
    margin-top: -5px;
    margin-right: 15px;
}

.v-single-box-img a {
    background: #202123;
    border-radius: 100%;
    padding: 15px 10px;
    width: 80px;
    margin-right: 10px;
    max-height: 80px;
    display: block;
    text-align: center;
}

.v-single-box-img a:hover {
    background: #232020;
}

.v-single-box-img img {
    max-width: 50px;
}

.v-single-box-content .h3 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
    text-decoration: none;
    line-height: 1.2em;
    color: #e2e2e6;
    display: inline-block;
}

.v-single-box-content .h3:hover {
    color: #ffffff;
}

.v-single-box-content p {
    font-size: 12px;
    line-height: 19px;
    margin-bottom: 0;
}

.v-single-box-content a {
    text-decoration: underline;
    color: #9eabd7;
}

.v-single-box-content span {
    padding-right: 15px;
}

.badge-1 {
    background: #9eabd7;
    color: #000;
    padding: 1px 8px !important;
    position: relative;
    top: -1px;
    font-size: 13px;
    border-radius: 5px;
    text-align: center;
}

.badge-2 {
    background: red;
    color: #fff;
    padding: 1px 8px !important;
    position: relative;
    top: -1px;
    font-size: 13px;
    border-radius: 5px;
    text-align: center;
}

/*single box end*/
/*chat gpt page start*/
.v-select {
    background: #434654;
    border: none;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    border-radius: 0;
    line-height: inherit;
}

.v-select::-ms-expand {
    display: none;
}

.select-wrapper {
    position: relative;
    width: auto;
    display: inline-block;
}

.select-wrapper:after {
    font-family: "Font Awesome 5 Free", "sans-serif";
    content: "\f107";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 5px;
    pointer-events: none;
}

.help-info img {
    max-width: 50px;
    margin: 0 auto;
}

.help-info h1 {
    font-size: 18px;
    font-weight: 600;
    padding-top: 15px;
    line-height: 1.9;
}

.chat-select-box {
    background: #343541;
    padding: 10px 15px 10px 15px;
    border-radius: 15px;
    border: 1px solid #6e6e6e;
    position: relative;
    height: 100%;
}

.chat-select-box:hover {
    cursor: pointer;
    background: #1a1616;
}

.chat-box-fix {
    position: fixed;
    width: 80%;
    max-width: 900px;
    padding: 20px 0 5px 0;
    bottom: 0;
    background: #434654;
    z-index: 99;
}

.chat-select-box h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.9;
}

.chat-select-box p {
    font-size: 14px;
    margin-bottom: 0;
}

.chat-box-input .form-control:focus {
    box-shadow: none;
    color: #ffffff;
}

.chat-box-input i {
    font-size: 18px;
    position: relative;
}

.v-submit {
    position: absolute;
    right: 25px;
    bottom: 20px;
    z-index: 9999;
}

.agent-icon img {
    position: absolute;
    left: 7px;
    bottom: calc(50% - 12px);
    z-index: 9999;
    max-width: 30px;

}

.chat-box-input i:hover {
    cursor: pointer;
}

.chat-box-input {
    background: #343541;
    border-radius: 15px;
    border: 1px solid #6e6e6e;
    position: relative;
}

.chat-box-input:before {
    content: "";
    position: absolute;
    z-index: 999;
    width: 46px;
    height: 100%;
    background: rgb(210, 218, 249);
    background: linear-gradient(178deg, rgba(210, 218, 249, 1) 60%, rgb(158 127 195) 100%);
    top: 0;
    border-radius: 14px 0 0 14px;
}

.auto-resize-textarea {

    max-height: 450px !important;
    resize: none;
    padding: 8px 50px 8px 55px;
    position: relative;
    top: 11px;
    color: #ffffff;
}

.mh-200 {
    min-height: 200px !important;
}
.max-h-180{
    max-height: 180px !important;
}

::-webkit-scrollbar {
    width: 8px; /* WebKit */
    /*height: 150px;*/
}

::-webkit-scrollbar-thumb {
    background-color: #777780; /* WebKit */
    border-radius: 15px;
}

::-webkit-scrollbar-track {
    background-color: transparent; /* WebKit */
}

.chat-box-input ::placeholder {
    color: #e2e2e6;
    opacity: 1; /* Firefox */
    font-size: 14px;
}

.chat-box-input ::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: #e2e2e6;
    font-size: 14px;
}

.arrow-up svg {
    fill: #ffffff;
}

.arrow-up {
    background: #343541;
    padding: 10px 12px 13px;
    border-radius: 5px;
    border: 1px solid #6e6e6e;
    position: relative;
    display: inline-flex;
    margin-left: 10px;
}

.arrow-up img {
    max-width: 30px;
}

.arrow-up:hover {
    background: #1a1616;
    cursor: pointer;
}

.chat {
    margin-bottom: 35px;
}

.chat-profile-img {
    /*width: 30px;*/
    height: 30px;
    position: relative;
    margin-right: 15px;
    flex: 0 0 30px; /* Fix the width of the left section to 60% */
    max-width: 30px; /* Ensure the left section doesn't exceed 60% */

}

.chat-content {
    flex: 1;
}

.chat a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.chat a:hover {
    color: #e2e2e6;
}

.chat-profile-img img {
    border-radius: 35px;
    height: 100%;
}

.chat h1,
.chat h2,
.chat h3,
.chat h4,
.chat h5,
.chat h6 {
    font-weight: 700;
}

.chat h2 {
    font-size: 16px;
}

.chat h3 {
    font-size: 19px;
}

.chat h4 {
    font-size: 17px;
}

.chat h5 {
    font-size: 18px;
}

.chat h6 {
    font-size: 16px;
}

.chat ul,
.chat ol {
    margin-left: 0;
    padding-left: 15px;
    line-height: 28px;
}

.chat .chat-select-box {
    padding: 5px 10px 15px 10px;
}

.chat-select-box.active {
    border: 1px solid #04aa6d;
    box-shadow: 0 0 10px rgba(4, 53, 53, 0.65);
}

/*chat gpt page end*/
/*code box start*/
.code-section {
    max-width: 100%;
}

.codeheader {
    background: #2e2e2e;
    padding: 6px 15px;
    font-size: 1em;
    color: #fff;
    -webkit-border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;

    display: flex;
    justify-content: space-between;
}

.codebox {
    padding: 15px 0 15px 15px;
    font-family: Courier, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: #fff;
    background: #0d0d0d;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    max-width: 95vw;
    width: 100%;
}

/*.codebox textarea, .codebox textarea:focus {*/
/*    background: #0d0d0d;*/
/*    color: #ffffff;*/
/*    overflow: hidden;*/
/*    border: none;*/
/*    box-shadow: none;*/
/*    !* Adjust as needed *!*/
/*    padding: 5px;*/
/*    resize: none; !* Prevent resizing *!*/
/*    min-height: 380px; !* Minimum height *!*/
/*    line-height: 1.5; !* Adjust line height *!*/
/*}*/
.codebox textarea, .codebox textarea:focus {
    background: #0d0d0d;
    color: #ffffff;
    border: none;
    box-shadow: none;
    /* Adjust as needed */
    padding: 5px;
    resize: none; /* Prevent resizing */
    min-height: 300px; /* Minimum height */
    line-height: 1.5; /* Adjust line height */
}

code,
pre code {
    font-family: Courier, sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

.copy-code:hover {
    cursor: pointer;
}


/*code box end*/
/*table start*/
.table {
    color: #ffffff;
}

.v-table {
    overflow-x: auto;
    width: 850px;
}

.v-table::-webkit-scrollbar {
    width: 100%;
    height: 10px;
}

.v-table::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 5px;
}

.table > thead {
    background: #2e2e2e;
}

.table th, .table td {
    vertical-align: middle;
    padding: 12px 8px !important;
}

.table > tbody {
    background: #0d0d0d;
}

.table-rounded {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #fff;
}

.table-rounded th,
.table-rounded td {
    padding: 8px;
    text-align: left;
    border: 1px solid #dee2e6; /* Change the border color as needed */
}

/*table end*/

/* loader */
.loader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 0;
}

.loader-text {
    color: #9970bc;
    font-size: 14px;
    font-weight: 700;
    padding-left: 10px;
}

@keyframes growProgressBar {
    0%,
    33% {
        --pgPercentage: 0;
    }
    100% {
        --pgPercentage: var(--value);
    }
}

@property --pgPercentage {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
div[role="progressbar"] {
    --size: 20px;
    --fg: #9970bc;
    --bg: #ffffff;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(
            closest-side,
            #434654 80%,
            transparent 0 99.9%,
            white 0
    ),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-size: calc(var(--size) / 5);
    color: var(--fg);
}

/* div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) "%";
}
 */
/* loader */
/* spinner start */
.spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 5px solid #ccc;
    border-top-color: #04aa6d; /* Change color as needed */
    animation: spin 1s linear infinite; /* Change animation duration and timing function as needed */
}

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

/* spinner end */
/*modal code*/
.clipboardModalContent {
    min-height: 350px !important;
}

.v-close {
    position: absolute;
    top: -22px;
    z-index: 999;
    right: 4px;
    font-size: 25px;
    color: #fff;
}

.modal-content, .clipboardModalContent, .clipboardModalContent:focus {
    background: #0d0d0d;
    color: #ffffff;

}

.clipboardModalContent:focus {
    box-shadow: none;
    border: 1px solid #ffffff;
}

.modal-close:hover {
    cursor: pointer;
    background: #333333;
}

.modal-close {
    position: absolute;
    z-index: 9999;
    right: -5px;
    background: #000;
    padding: 4px 10px;
    border-radius: 100%;
    top: -15px;
    border: 1px solid #ffffff;
    box-shadow: none;
}

.v-modal-footer {
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px 25px 15px;
    gap: 25px 0;
    flex-wrap: wrap;
}

.v-modal-footer .v-btn-green {
    padding: 7px 10px;
}

.custom-modal-width .modal-lg, .custom-modal-width .modal-xl {
    --bs-modal-width: 850px;
}

.modal-icon img {
    max-width: 25px;
}

/*modal code*/
/*chat custom start*/
.chat-custom-row .chat-select-box {
    padding: 10px 15px 20px 15px;
}

.chat-custom-row .chat-select-box h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.6;
    padding: 6px 0 3px 0;
}

.chat-custom-row .chat-select-box a {
    font-weight: 700;
    color: #ffffff;
    text-decoration: underline;
}

.chat-custom-row .chat-select-box a:hover {
    color: #04aa6d;
}

.chat-link, .chat-box-flex {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.v-rounded-circle {
    border-radius: 100%;
    background: red;
    width: 12px;
    height: 12px;
    display: inline-block;
    padding-right: 10px;
    margin-right: 5px;
}

/*chat custom end*/
/*chatbox flex start*/
.chat-select-box h3 {
    font-size: 15px;
}

.chat-box-relative {
    position: relative;
    width: 100% !important;
    padding-top: 100px;
}

.chat-box-padding {
    padding-bottom: 150px;

}

.chat-box-relative .chat-box-padding {
    padding-bottom: 0;
}

.chatForm .chat-box-relative {
    padding-top: 0;
}

.ui-widget-content {
    border: 1px solid #696262;
    background: #343541;
    color: #e2e2e6;
    border-radius: 5px;
    font-size: 16px;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: #5f6169;
    border: 1px solid #343541;;
}

.highlight {
    color: red; /* Customize the highlight color */
    font-weight: bold;
}

/*chatbox flex end*/
/*progress box start*/
.progress-box-section {
    padding-bottom: 250px;
}

.chat-box-relative .progress-box-section {
    padding-bottom: 10px;
}

.progress-box {
    text-align: center;
    position: relative;
}

.progress-box:after {
    content: "";
    background: #000005;
    width: 75%;
    height: 5px;
    position: absolute;
    z-index: -1;
    top: 18px;
    right: -38%;
}

.progress-box-section .progress-box:last-child:after {
    display: none;
}

.progress-box span {
    color: #61b4dc;
    display: inline-block;
    background: #232a3c;
    padding: 5px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid #61b4dc;
    margin-bottom: 10px;
}

.progress-box.active span {
    background: #d5e2e8;
}

.progress-box h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.progress-box p {
    font-size: 13px;
}

/*progress box end*/
/*agent tab start*/
.agent-tab ul {
    justify-content: space-between;
    margin-left: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.agent-tab ul li {
    flex-grow: 1;
    margin: 0;
    padding: 1px 5px 0 0;
}

.agent-tab ul li:last-child {
    padding-right: 0;
}

.agent-tab .nav img {
    max-width: 20px;
}

.agent-tab .nav-link.active img {
    filter: brightness(0) invert(1);
}

.agent-tab .nav-link .warning {
    filter: unset !important;
}
.warning {
    max-width: 25px;
    position: relative;
    top: -2px;
}
.agent-tab .nav-link {
    background: #d1d1d1;
    color: #000000;
    width: 100%;
    padding: 15px 5px;
    font-weight: 600;
}

.agent-tab .nav-link.active {
    background: #2e2e2e;
    color: #ffffff;
    border-color: #2e2e2e;

}

.agent-tab textarea {
    background: #f2f2f2;
    border-radius: 0 0 5px 5px;

}


.custom-agent-accordion-item .head, .custom-agent-accordion-item .link-head {
    background: #d1d1d1;
    padding: 15px;
    border-radius: 5px 5px 0 0;
    color: #000000;
}

.custom-agent-accordion-item .head:hover {
    cursor: pointer;
}

.custom-agent-accordion-item .head h2, .custom-agent-accordion-item .link-head h2 {
    font-size: 16px;
    margin-bottom: 0;
}

.custom-agent-accordion-item .head img, .custom-agent-accordion-item .link-head img {
    max-width: 16px;
    position: relative;
    top: -2px;
}

.custom-agent-accordion-item.expand .head img, .custom-agent-accordion-item.expand .link-head img {
    rotate: 180deg;
}

.link-head.bg-dark a:hover {
    color: #f1f1f1;
}

.link-head.bg-dark {
    background-color: #2e2e2e !important;
}

.custom-agent-accordion-item .accordion-body {
    border-radius: 0 0 5px 5px;
    background: #f2f2f2;
    color: #000000;
    font-size: 16px;
    border-bottom: 15px solid #F2F2F2;
}

.custom-agent-accordion-item .accordion-body {
    height: 310px;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.custom-agent-accordion-item.expand .accordion-body {
    height: 100%;
    transition: max-height 0.3s ease-out;
}

.custom-agent-accordion textarea {
    height: 310px;
    overflow-y: hidden;
    transition: max-height 0.3s ease-out;
    border: none;
}

/*.custom-agent-accordion-item.expand textarea {*/
/*    height: unset;*/
/*    transition: max-height 0.3s ease-out;*/
/*}*/
.text-section ul{
    padding-left: 20px;
}
.text-section ul li {
    padding: 3px 0;
}

.text-section ul li a {
    text-decoration: underline;
    color: #e2e2e6;
    font-size: 16px;
}

.text-section ul li a:hover {
    color: #61b4dc
}

.agentx-double-button {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

.agentx-btn-1, .agentx-btn-2 {
    padding: 15px 10px;
    display: inline-block;
    border-radius: 5px;
    font-weight: 700;
    font-size: 26px;
}

.agentx-btn-1 {
    background: #555555;
    border: 1px solid #707070;
    color: #ffffff;
}

.agentx-btn-2 {
    background: #efefef;
    border: 1px solid #efefef;
    color: #000000;
}

.agentx-btn-1:hover, .agentx-btn-2:hover {
    background: #dce3ff;
    color: #000000;
    border: 1px solid #dce3ff;
}

.nav-items-slider .nav-item {
    display: none; /* Hide all items by default */
}

.nav-items-slider .next, .nav-items-slider .prev {
    display: block;
    flex-grow: unset;
}

/* Show only the first 4 items initially */
.nav-items-slider .nav-item:nth-child(-n+4) {
    display: block;
}


.accordionAgentX .accordion-button:focus {
    box-shadow: none;
}

.accordionAgentX .accordion-body {
    padding: 15px;
    border-radius: 0 0 5px 5px;
    background: #f2f2f2;
    color: #000000;
    font-size: 16px;

}

.accordionAgentX .accordion-item {
    border-radius: 5px;
    background: #F2F2F2;;
}

.accordionAgentX .accordion-header {
    background: #d1d1d1;
    padding: 5px 10px 2px 10px;
    border-radius: 5px;
    color: #000000;
}

.accordionAgentX .accordion-header:hover {
    cursor: pointer;
}

.accordionAgentX .accordion-header h2 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
    width: 500px;

}

.accordionAgentX-expand {
    font-weight: 700;
}

.accordionAgentX-expand img {
    max-width: 16px;
    position: relative;
    top: -2px;
    rotate: 180deg;
}

.collapsed .accordionAgentX-expand img {
    rotate: -0deg;
}

.timestamp img {
    max-width: 20px;
}

.timestamp {
    position: relative;
    top: -2px;
    width: 200px;
}

.accordionAgentX-details img {
    max-width: 16px;
    position: relative;
    top: -2px;
}

.accordionAgentX-details {
    font-weight: 700;
    width: 250px;
}

.copy-preprompt:hover {
    cursor: pointer
}

.accordionAgentX-input .form-control {
    border: 1px solid #444653;
}

.accordionAgentX-input .form-control:focus {
    border: 1px solid #ffc107;
}

/*agent tab end*/
/*tooltip custom start*/

/* Customizing tooltip colors */
/*.tooltip-inner {*/
/*    --bs-tooltip-bg: var(--bs-primary);*/
/*}*/
.custom-tooltip .tooltip-inner {
    background-color: #ffffff;
    color: #000000;
}
.tooltip-arrow::before {
    border-top-color: #ffffff !important; /* Red border color for the arrow */
}
/*.tooltip-arrow {*/
/*    border-bottom-color: var(--bs-primary);; !* Red border color for the arrow *!*/
/*}*/