/**
 * @package     Frontline WebApp Base
 *
 * @subpackage  <Application CSS file>
 *
 * @author      Andra Ungureanu <andra@frontline.ro>
 * @copyright   2017-2020 Frontline softworks <https://www.frontline.ro>
 * @license     https://opensource.org/licenses/BSD-3-Clause
 *
 * @description The purpose of this file is to instantiate custom CSS styling for this Application.
 *
 * @since       2020.08.05
 *
 */

:root {

    /* Sidebar */
    --sb-width-mini: 80px;

    /* Colors */
    --main-color: #e00026;
    --main-dark-color: #cb0325;
    --main-light-color: #fff3f5;
    --field-focus-bg: #fff;

    /* Buttons */
    --pry-btn-bg: #0d6efd;
    --pry-btn-hvr-bg: #0b5ed7;
    --pry-btn-hvr-bdr: #0d6efd;
    --pry-btn-fcs-shadow: rgb(49 132 253);
}

/* Light */
:root[data-applied-mode="light"] {
    color-scheme: light;

    /* Form */
    --field-focus-bdr: #e00026;
    --field-focus-color: #e00026;
    --field-focus-shadow: rgb(255 0 0 / 15%);

    /* Quick box */
    --quick-box-bg: #fafafa;

    /* Border */
    --bdr-sec-color: #dbdbdb;

    /* Calendar */
    --calendar-event-bdr: #fff;
}

/* Dark */
:root[data-applied-mode="dark"] {
    color-scheme: dark;

    /* Form */
    --field-focus-bdr: #e00026;
    --field-focus-color: #e00026;
    --field-focus-shadow: rgb(255 0 0 / 25%);
    --quick-box-bg: #333;

    /* Quick box */
    --quick-box-bg: #333;

    /* Border */
    --bdr-sec-color: #4f4f4f;

    /* Calendar */
    --calendar-event-bdr: #404040;
}

.btn-secondary {
    color: var(--body-color);
}

.text-default {
    color: var(--body-color);
}

.font-family {
    font-family: var(--font-family);
    color: var(--body-color);
}

.sticky {
    position: sticky !important;
}

.main {
    padding: 1rem 2rem;
}

.tooltip-inner {
    background-color: var(--field-bg);
    color: var(--body-accent-color);
    box-shadow: var(--box-shadow);
}

.tooltip-arrow::before {
    border-top-color: var(--field-bg) !important;
}

/* Sidebar */
.sidebar .sidebar-brand .sidebar-brand-logo {
    width: 4rem;
}

.sidebar .sidebar-row {
    padding: 1rem;
}

.sidebar .sidebar-nav {
    padding: 0 1.5rem;
}

.sidebar.sidebar-minimized .sidebar-user-item {
    padding: 1rem .8rem;
    width: max-content;
}

.sidebar .sidebar-user .user-img {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
}

.sidebar .sidebar-nav .sidebar-nav-item:not(.sidebar-nav-title) .sidebar-nav-link,
.sidebar .sidebar-nav .sidebar-nav-dropdown:not(.sidebar-nav-title) .sidebar-nav-link {
    z-index: 3;
    padding: 1rem;
}

.sidebar .sidebar-nav .sidebar-nav-item:not(.sidebar-nav-title) .sidebar-nav-link i,
.sidebar .sidebar-nav .sidebar-nav-dropdown:not(.sidebar-nav-title) .sidebar-nav-link i {
    min-width: 1rem;
}

/* Dashboard */
.vertical-separator {
    width: 1px;
    height: 30px;
    background-color: var(--bdr-sec-color);
}

.dashboard-index .row-welcome {
    align-items: center;
    margin: 0 0 1rem;
}

.dashboard-index .row-welcome .welcome-message {
    display: flex;
    gap: 20px;
    align-items: center;
}

#userDashboard {
    position: relative;
}

#userDashboard .accordion-item {
    background-color: var(--card-bg);
}

#userDashboard .accordion-item,
#userDashboard .accordion-button {
    border-radius: 20px;
}

#userDashboard .accordion-button {
    box-shadow: var(--card-shadow);
    background-color: var(--card-bg);
}

#userDashboard .accordion-button::after {
    content: "\f054";
}

#userDashboard .accordion-button i {
    margin-right: 6px;
}

#userDashboard .accordion-button:not(.collapsed),
#userDashboard .accordion-button:focus {
    background-color: var(--card-bg);
    border: none;
    box-shadow: var(--card-shadow);
    color: var(--body-accent-color);
}

#userDashboard .accordion-collapse {
    position: absolute;
    z-index: 999;
    background: var(--card-bg);
    width: max-content;
    margin-left: 10px;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: var(--bdr-radius);
    box-shadow: var(--box-shadow);
}

#userDashboard form {
    display: flex;
    align-items: center;
    gap: 10px;
}

#userDashboard form .form-group {
    min-width: 250px;
}

.dashboard-index .card {
    height: 100%;
}

.widget-table {
    max-height: 500px;
    overflow-y: scroll;
    padding-top: 0;
}

.widget-table .table thead {
    position: sticky;
    top: 0;
    background-color: var(--card-bg);
    height: 30px;
}

.widget-table .table thead .tr-title th {
    padding-top: 1.25rem;
}

.widget-table .table thead .tr-line th {
    height: 1px;
    padding: 0;
    background-color: var(--table-bdr-color);
}

.widget-table .table thead .tr-title .title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.widget-table .table thead .tr-title .title-wrapper .widget-title {
    margin-bottom: 0;
}

.opportunity-label {
    display: inline-block;
    background-color: var(--card-bg);
    color: var(--body-accent-color);
    font-style: italic;
    margin-left: 5px;
    border: 1px solid var(--bdr-color);
    padding: .3rem .5rem;
    font-size: .9rem;
    border-radius: 5px;
}

.widget-table .badge {
    display: inline-block;
    min-width: 80px;
    padding: .3rem .5rem;
    text-align: center;
    background-color: var(--sec-btn-bg);
    color: #fff;
    border-radius: var(--bdr-radius);
    font-size: .8rem;
    text-shadow: 0 1px 2px rgba(0 0 0 / 50%);
    font-weight: 400;
    line-height: initial;
}

.widget-table .badge-container {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .9rem;
}

.widget-table .badge-rounded {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 100%;
}

.widget-table .badge-rounded.bg-light,
.widget-table .badge-rounded.bg-white {
    border: 1px solid var(--bdr-sec-color);
}

.widget-table .badge.bg-light,
.widget-table .badge.bg-white {
    color: #333;
    text-shadow: 0 1px 2px rgba(0 0 0 / 15%);
}

.dashboard-index .widget.task-count-widget .widget-data i {
    margin-right: 0;
}

.dashboard-index .row-charts .card {
    padding-bottom: 0;
}

.dashboard-index .row-charts .card .message {
    margin-top: 10px;
    color: var(--body-color);
}

.dashboard-index .chart-container {
    height: 250px;
    margin-top: 0;
    top: -30px;
}

.chart-legend {
    height: auto;
}

#dashboardTab .nav-item .nav-link {
    background-color: var(--card-bg);
    border: 1px solid var(--bdr-color);
}

#dashboardTab .nav-item .nav-link.active {
    background-color: var(--tab-bg-active);
    color: var(--tab-active-color);
    border: none;
}

#dashboardTabContent {
    margin-top: 20px;
}

/* Calendar */
#calendar .fc-event {
    border: none;

    /* overflow: hidden; */
    background-color: transparent;
    transition: none;
}

.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
    box-shadow: 0 0 0 1px var(--calendar-event-bdr);
}

#calendar .fc-event.fc-timegrid-event {
    background-color: var(--sec-btn-bg);
}

.calendar-index .event-item {
    padding: .1rem;
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    color: var(--body-color);
    transition: .2s all;
    cursor: context-menu;
    text-wrap: wrap;
}

.calendar-index .fc-event-draggable .event-item {
    cursor: move;
}

.calendar-index .event-item:hover {
    background-color: var(--sec-btn-bg);
}

.calendar-index .event-item .event-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    margin-right: 5px;
    margin-top: 5px;
    background-color: var(--bdr-sec-color);
}

.calendar-index .event-item .event-dot.success {
    background-color: var(--success-btn-bg);
}

.calendar-index .event-item .event-dot.failure {
    background-color: var(--danger-btn-bg);
}

.calendar-index .event-item .event-dot.pending {
    background-color: var(--warning-btn-bg);
}

.calendar-index .event-item .event-title {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.calendar-index .event-item i {
    margin-right: 5px;
    margin-top: 5px;
}

.calendar-index .event-item.primary i {
    color: var(--pry-btn-bg);
}

.calendar-index .event-item.info i {
    color: var(--info-btn-bg);
}

.calendar-index .event-item.success i {
    color: var(--success-btn-bg);
}

.calendar-index .event-item.warning i {
    color: var(--warning-btn-bg);
}

.calendar-index .event-item.danger i {
    color: var(--danger-btn-bg);
}

.calendar-index .event-item.light i {
    color: var(--ligth);
}

.calendar-index .event-item.dark i {
    color: var(--dark-btn-bg);
}

.calendar-index .event-item.white i {
    color: var(--white);
}

.calendar-index .popover .calendar-tooltip-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.calendar-tooltip .data-type-value {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-light-color);
    color: var(--main-color);
    box-shadow: none;
}

.calendar-index .popover .calendar-tooltip-body {
    margin-top: .5rem;
}

.calendar-index .popover .calendar-tooltip-body p {
    margin-bottom: .2rem;
}

.calendar-tooltip .action-buttons {
    display: flex;
    justify-content: center;
}

.calendar-tooltip .action-buttons .buttons-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 1;
}

.calendar-tooltip .action-buttons .btn-status {
    padding: .188rem .5rem;
    text-align: center;
    box-shadow: var(--box-shadow);
    color: #fff;
    border-radius: var(--bdr-radius);
    font-size: .8rem;
    text-shadow: 0 1px 2px rgba(0 0 0 / 50%);
}

.calendar-tooltip .action-buttons .btn {
    font-size: .8rem;
}

.calendar-tooltip .action-buttons i {
    margin-right: 3px;
}

.air-datepicker-global-container {
    z-index: 1056;
}

.event-form .form-check {
    position: relative;
    padding-left: 0;
}

.event-form .form-check-input {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0%;
}

.event-form .status {
    background-color: #fff;
    padding: .25rem .5rem;
    border-radius: .25rem;
    font-size: .85rem;
    border: 1px solid;
    cursor: pointer;
}

.event-form .status-pending {
    border-color: var(--warning-btn-bg);
    color: var(--warning-btn-bg);
}

.event-form .status-success {
    border-color: var(--success-btn-bg);
    color: var(--success-btn-bg);
}

.event-form .status-failure {
    border-color: var(--danger-btn-bg);
    color: var(--danger-btn-bg);
}

.event-form .form-check-input:checked + .status,
.event-form .form-check-input:checked + .status i {
    color: #fff !important;
}

.event-form .form-check-input:checked + .status-pending {
    background-color: var(--warning-btn-bg);
}

.event-form .form-check-input:checked + .status-success {
    background-color: var(--success-btn-bg);
}

.event-form .form-check-input:checked + .status-failure {
    background-color: var(--danger-btn-bg);
}

#product-characteristics-modal {
    background-color: rgba(0 0 0 / 50%);
}

#product-characteristics-modal .modal-dialog {
    max-width: 80vw;
    height: 90vh;
}

#product-characteristics-modal .modal-dialog .modal-content {
    height: 100%;
}

#product-characteristics-modal .btn-add-characteristic {
    margin-bottom: 20px;
}

#product-characteristics-modal .product-characteristics .product-characteristic {
    padding: 20px;
    padding-right: 40px;
    background-color: var(--field-container-bg);
    box-shadow: 0 3px 6px rgba(0 0 0 / 10%);
    border-radius: var(--bdr-radius);
    margin-bottom: 20px;
    position: relative;
}

#product-characteristics-modal .product-characteristics .product-characteristic .row {
    row-gap: 10px;
}

#product-characteristics-modal .product-characteristics .product-characteristic .form-group {
    margin-bottom: 0;
}

#product-characteristics-modal #product-characteristic-type {
    padding-top: 1.2rem;
}

#product-characteristics-modal .product-characteristics .product-characteristic .btn-remove-characteristic {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
}

#product-characteristics-modal .product-characteristics .product-characteristic .btn-remove-characteristic i {
    margin-right: 0;
}

/* Form */
form .box-view {
    padding: 5px 10px;
    height: 3.125rem !important;
    min-height: 3.125rem !important;
}

form .box-view .box-header .label {
    font-size: .65rem;
}

/* Client form */
#btn-find-client {
    position: relative;
    overflow: hidden;
}

/* Modal */
.modal .modal-content {
    overflow: initial;
}

/* Select2 */
.select2-search--dropdown {
    display: flex;
    gap: 10px;
    align-items: center;
}

.select2-search--dropdown .select2-search__field {
    flex: 1;
}

.oveerview .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__rendered {
    overflow-x: scroll;
}

/* User view */
.data-type-value {
    display: inline-block;
    background-color: var(--field-container-bg);
    color: var(--body-color);
    padding: 3px 8px;
    margin-top: 5px;
    margin-right: 3px;
    border-radius: 3px;
    box-shadow: 0 3px 4px rgba(0 0 0 / 5%);
    font-size: .85rem;
}

/* Grid view */

.html-data {
    display: box;
    overflow: hidden;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.html-data p {
    margin-bottom: 0;
}

/* List view */
.list-view-toolbar {
    transition: top .3s;
    z-index: 9;
}

.body .list-view-filters {
    border-radius: 10px;
}

.list-view-filters form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.list-view-filters .form-group {
    margin-bottom: 0;
    min-width: 250px;
}

.list-view-filters .btn-clear-form {
    border-radius: 100%;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-view-filters .btn-clear-form i {
    margin-right: 0;
    font-size: .8rem;
}

.body .list-view-filters .select2-container--krajee-bs5 .select2-selection {

    /* border-color: var(--field-bdr);
    background-color: var(--card-bg); */
}

#list-view .pagination .page-link,
#list-view .pagination .page-item span {
    border-color: var(--pagination-bdr-color);
    background-color: var(--pagination-bg);
    color: var(--pagination-color);
}

#list-view .page-link.active,
#list-view .page-item.active .page-link {
    background-color: var(--pagination-active-bg);
    color: var(--pagination-active-color);
}

#list-view .page-item span {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--bs-pagination-color);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#list-view .page-item:not(:first-child) span {
    margin-left: -1px;
}

#list-view .page-item:first-child span {
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
}

#list-view .page-item:last-child span {
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius);
}

#list-view .empty {
    margin-top: 20px;
}

.list-view-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.list-view-grid .box {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto auto;
    background-color: var(--card-bg);
    width: 100%;
    height: 100%;
    box-shadow: var(--card-shadow);
    border-radius: var(--bdr-radius);
    transition: .3s all;
}

.list-view-grid .box:hover {
    box-shadow: var(--box-shadow);
}

.list-view-grid .box.box-danger {
    border-left: 2px solid var(--danger-btn-bg);
}

.list-view-grid .box .box-header {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    padding-bottom: 0;

    /* border-bottom: 1px solid var(--bdr-color); */
    gap: 1rem;
}

.list-view-grid .box .box-header .box-title h5 {
    margin-bottom: 2px;
    color: var(--body-accent-color);
}

.list-view-grid .box .box-header .box-title p {
    margin-bottom: 0;
}

.list-view-grid .box .box-header .btn-view {
    width: 35px;
    height: 35px;
    padding: 10px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-view-grid .box .box-header .btn-view i {
    margin: 0;
}

.list-view-grid .box .box-body {
    padding: 0 1rem;
    position: relative;
}

.list-view-grid .box .box-body ul li {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
}

.list-view-grid .box .box-footer {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 10px;
    padding: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bdr-color);
    background-color: var(--shadow-btn-bg);
}

.list-view-grid .box .box-status {
    position: relative;
    z-index: 2;
    top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.list-view-grid .box .box-badge {
    display: inline-block;
    min-width: 80px;
    padding: .188rem .5rem;
    text-align: center;
    background-color: var(--sec-btn-bg);
    box-shadow: var(--box-shadow);
    color: #fff;
    border-radius: var(--bdr-radius);
    font-size: .9rem;
    text-shadow: 0 1px 2px rgba(0 0 0 / 50%);
}

.list-view-grid .box .box-status .activities {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.list-view-grid .box .box-status .activities .title {
    font-size: 1rem;
    background-color: var(--card-bg);
    box-shadow: 0 3px 4px rgba(0 0 0 / 5%);
    border: 1px solid var(--bdr-color);
    padding: .2rem .5rem;
    border-radius: 5px;
    margin: 0;
}

.list-view-grid .box .box-status .activities .data-type-value {
    margin: 0;
    cursor: pointer;
    font-weight: 600;
}

.list-view-grid .box .box-footer .box-date,
.list-view-grid .box .box-footer .stale {
    font-size: .9rem;
    color: var(--body-color);
}

.list-view-grid .box .box-footer .stale {
    background-color: var(--card-bg);
    padding: .2rem .5rem;
    margin-top: 5px;
    box-shadow: var(--card-shadow);
    border-left: 2px solid var(--danger-btn-bg);
    border-radius: 3px;
}

/* Checklist */
.checklist-label {
    font-size: 1rem;
}

.checklist-group {
    background-color: var(--field-bg);
    border-radius: var(--bdr-radius);
    padding: 1rem .75rem;
}

.checklist {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: .8rem;
}

.checklist:last-child {
    margin-bottom: 0;
}

.checklist .checkbox {
    position: relative;
}

.checklist .input-checkbox {
    position: absolute;
    z-index: 2;
    opacity: 0%;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.checklist .check {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid var(--bdr-sec-color);
    background-color: var(--field-bg);
    border-radius: 3px;
    cursor: pointer;
}

.checklist .check.checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.checklist .check.checked::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f00c";
    color: #fff;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: .7rem;
}

.checklist .text {
    flex: 1;
}

.checklist .text.complete {
    text-decoration: line-through;
}

.checklist .text .form-control {
    height: auto !important;
    min-height: 30px !important;
}

.form-floating .form-control-radio {
    height: auto !important;
}

.form-floating .form-control-radio.form-control-radio-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.checklist .text .text-val {
    display: none;
    width: 100%;
    border: 1px solid var(--bdr-sec-color);
    border-radius: var(--bdr-radius);
    padding: .375rem .75rem;
    min-height: 30px;
}

.checklist .btn-delete-checklist {
    transition: .3s all;
    cursor: pointer;
}

.checklist .btn-delete-checklist:hover {
    color: var(--danger-btn-bg);
}

/* Overview */
.overview .table-wrapper {

    /* background-color: var(--table-accent-bg);
    padding: 10px;
    border-radius: 10px; */
}

.overview .table th {
    color: var(--main-color);
}

.overview .card .card-title,
.overview .section .section-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 1rem;
}

.overview .section.section-activities .section-title {
    background-color: var(--card-bg);
    transition: top .3s;
}

.overview .section.section-activities .section-title.sticky {
    position: sticky;
    padding: 10px 0;
    z-index: 3;
}

.overview .section .section-title .section-title-buttons .btn-inline-ajax-add {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.overview .section .section-title .section-title-buttons .dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid #ececec;
}

.overview .section .section-title .dropdown a {
    color: var(--body-color);
}

.overview .section .section-title .dropdown a:hover {
    color: var(--body-accent-color);
}

.overview .section .activity-add {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bdr-color);
}

.activity-form .btn-new-date {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

.overview .section .section-body .section-data {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bdr-color);
}

.overview .section .section-body .section-data .section-data-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
}

.overview .section .section-body .section-data .activity-details {
    text-align: center;
    border-right: 1px solid var(--bdr-color);
    padding-right: 20px;
}

.overview .section .section-body .section-data .activity-details hr {
    margin: .8rem 0;
}

.overview .section .section-body .section-data .user-avatar {
    width: 35px;
    height: 35px;
    margin: auto;
    border-radius: 100%;
    overflow: hidden;
    background-color: var(--shadow-btn-bg);
}

.overview .section .section-body .section-data .user-avatar .user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overview .section .section-body .section-data .content {
    display: grid;
    align-content: space-between;
    padding-top: 5px;
}

.overview .section .section-body .section-data .top-section-wrapper {
    margin-bottom: 10px;
}

.overview .section .section-body .section-data .top-section-wrapper .atendees {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.overview .section .section-body .section-data .date {
    font-size: .9rem;
    margin-right: 5px;
}

.overview .section .section-body .section-data .date i {
    margin-right: 5px;
}

.overview .section .section-body .section-data .atendees .section-icon {
    border-left: 1px solid var(--bdr-sec-color);
    padding-left: 15px;
}

.overview .section .section-body .section-data .atendees .data .edit-section {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .85rem;
}

.overview .section .section-body .section-data .atendees .btn-invite-member {
    cursor: pointer;
}

.overview .section .section-body .section-data .activity-type {
    width: 25px;
    display: block;
    height: 25px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: auto;
    font-size: .8rem;
}

.overview .section .section-body .section-data .activity-type.bg-light {
    color: #333;
}

.overview .reminders {
    background-color: var(--field-bg);
    border-radius: var(--bdr-radius);
    padding: 1rem;
}

.overview .reminders .checklist-label {
    margin-bottom: 10px;
}

.overview .reminders .checklist {
    margin-bottom: 0;
}

.overview .reminders .checklist.checklist-completed {
    opacity: 50%;
}

.overview .reminders .checklist.checklist-completed .check {
    cursor: initial;
}

.overview .section .section-body .section-data .content .activity-description-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.overview .section .section-body .section-data .content .activity-description .reminders .checklist .text .text-val {
    display: block;
    border: none;
    padding-left: 0;
}

.overview .section .section-body .section-data .content .activity-description .invite-members {
    display: none;
    width: 100%;
    margin-top: 10px;
}

.overview .popover-header {
    display: block;
}

.overview .popover-content p {
    margin-bottom: 5px;
}

.overview .section .section-body .section-data .action-buttons {
    display: flex;

    /* align-items: flex-end; */
}

.overview .section .section-body .section-data .action-buttons .btn-status {
    padding: .188rem .5rem;
    text-align: center;
    box-shadow: var(--box-shadow);
    color: #fff;
    border-radius: var(--bdr-radius);
    font-size: .9rem;
    text-shadow: 0 1px 2px rgba(0 0 0 / 50%);
}

.overview .section .section-body .section-data .action-buttons .btn-status i {
    margin-right: 5px;
}

.overview .section .section-body .section-data .action-buttons .buttons-wrapper .label {
    display: block;
    margin-bottom: 10px;
}

.overview .section .section-body .section-data .action-buttons .buttons-wrapper .btn-quick-update {
    display: block;
    width: 100%;
}

.overview .section .section-body .section-data .action-buttons .buttons-wrapper .btn-quick-update:last-child {
    margin-top: 10px;
}

.overview .section .section-body .section-data .action-buttons .buttons-wrapper.disabled,
.overview .section .section-body .section-data .action-buttons .buttons-wrapper.disabled * {
    cursor: not-allowed !important;
}

.overview .quick-box {
    width: 100%;
    background-color: var(--quick-box-bg);
    border-radius: var(--bdr-radius);
    transition: top .3s;
}

.overview .quick-box.sticky {
    position: sticky;
    z-index: 3;
}

.body .accordion-item,
.body .accordion-button {
    background-color: transparent;
    color: var(--body-color);
}

.body .accordion-button:focus,
.body .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.overview .accordion-item {
    border-bottom: 1px solid var(--bdr-sec-color);
}

.accordion-button {
    color: var(--body-accent-color);
    border: none;
    box-shadow: none;
    text-align: center;
}

.accordion-button::after {
    font-family: "Font Awesome 6 Pro";
    background-image: none !important;
    content: "\f078";
    font-weight: 600;
}

.overview .quick-box .accordion-item .label {
    font-size: .8rem;
    margin-bottom: 5px;
}

.overview .quick-box .accordion-item .select2-container .select2-selection,
.overview .quick-box .accordion-item .form-control,
.overview .quick-box .accordion-item .box-view {
    background-color: var(--card-bg);
}

.overview .quick-box .accordion-item .edit-section-row {
    position: relative;
    border: 1px solid var(--bdr-sec-color);
    border-radius: var(--bdr-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    overflow: auto;
}

.overview .edit-text {
    cursor: pointer;
}

.overview .edit-section-box {
    background-color: var(--card-bg);
    border-radius: var(--bdr-radius);
    padding: 1rem;
    box-shadow: var(--card-shadow);
}

.overview .edit-section:not(:last-child),
.overview .edit-section:first-child {
    margin-bottom: 10px;
}

.overview .quick-box .accordion-item .form-control-readonly {
    display: flex;
    align-items: center;
    background-color: var(--field-bg);
}

.overview .edit-section .edit-section-group {
    position: relative;
}

.overview .edit-section .edit-section-group.single:not(.edit-section-group-textarea) .form-control {
    padding-right: 40px;
}

.overview .edit-section .edit-section-group.multiple:not(.edit-section-group-textarea) .form-control {
    padding-right: 60px;
}

.overview .card .section-client .edit-section-group.multiple .form-control {
    width: 200px;
}

.overview .edit-section .edit-section-group.edit-section-group-textarea .form-control {
    padding-bottom: 40px;
}

.overview .edit-section .quick-buttons {
    display: none;
    position: absolute;
    align-items: center;
    gap: 3px;
    right: 5px;
}

.overview .edit-section .quick-buttons .btn,
.overview .invite-members .btn {
    min-width: 26px;
}

.overview .edit-section-row .btn-section-quick-update {
    display: none;
    float: right;
}

.overview .edit-section .edit-section-group:not(.edit-section-group-textarea) .quick-buttons {
    top: 50%;
    transform: translateY(-50%);
    transition: .3s all;
}

.overview .quick-box .accordion-item .edit-section .edit-section-group.edit-section-group-textarea .quick-buttons {
    right: 10px;
    bottom: 10px;
}

.overview .edit-section .quick-buttons.visible {
    display: flex;
}

.overview .card .section .icon-title {
    display: flex;
    gap: 10px;
    align-items: center;
}

.overview .edit-section .select2-users-wrapper {
    display: none;
}

.overview .edit-section .section-data {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.overview .item {
    font-size: .85rem;
    background-color: var(--card-bg);
    box-shadow: 0 3px 4px rgba(0 0 0 / 5%);
    padding: .3rem .6rem;
    border-radius: var(--bdr-radius);
}

.overview .item.hide {
    position: relative;
    display: none;
    top: -10px;
}

.overview .item .btn-delete {
    background-color: transparent;
    border: none;
    color: var(--body-accent-color);
}

.overview .break {
    flex-basis: 100%;
    height: 100%;
}

.overview .icon {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: var(--shadow-btn-bg);
    color: #fff;

    /* box-shadow: var(--shadow-btn-shadow); */
    text-shadow: 0 0 2px rgba(0 0 0 / 30%);
}

.overview .col-details {
    margin-bottom: 20px;
}

.overview .card.card-details {
    height: 100%;
}

.overview .card.card-details .accordion-body {
    padding: 0;
}

.overview .card-details .accordion-collapse {
    position: absolute;
    z-index: 2;
    background-color: rgb(255 255 255);
    width: 100%;
    left: 0;
    padding: 0 15px;
    box-shadow: rgb(0 0 0 / 5%) 0 15px 25px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.overview .card-details .accordion-collapse .accordion-body {
    padding-bottom: 15px;
}

.overview .card .section .section-info {
    position: relative;
    z-index: 3;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    border: 1px solid var(--bdr-color);
    border-radius: var(--bdr-radius);
    padding: 10px 15px;
}

.overview .card .section .main-section-info {
    box-shadow: -2px 0 0 var(--dark-btn-bg);
}

.overview .card .section .section-info.section-info-tree {
    margin-left: 20px;
    position: relative;
}

.overview .card .section .section-info.section-info-tree::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 1px;
    border: 1px solid var(--bdr-color);
    left: -20px;
    bottom: 50%;
}

.overview .card .section .section-info.section-info-tree::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 150%;
    border: 1px solid var(--bdr-color);
    left: -20px;
    bottom: 50%;
}

.overview .card .section .section-info.section-info-tree:first-child::after {
    height: 70%;
}

.opportunity-overview .card .section .section-info .section-info-col {
    display: flex;
    align-items: baseline;
}

.opportunity-overview .card .section .section-info .name {
    display: block;
    color: var(--body-accent-color);
    margin-bottom: 3px;
}

.opportunity-overview .card .section .section-info .section-info-col .details-row {
    font-size: .9rem;
}

.opportunity-overview .card .section .section-info .section-info-col .details-row .detail {
    color: var(--body-color);
    display: block;
}

.opportunity-overview .card .section .section-info .section-info-col .details i {
    margin-right: 3px;
}

.overview .card .section .section-actions {
    display: flex;
    gap: 8px;
}

.overview .section .btn-action {
    color: var(--body-color);
    cursor: pointer;
}

.overview .section .btn-action:hover {
    color: var(--body-accent-color);
}

@media screen and (max-width: 1500px) {
    .list-view-grid {
        gap: 15px;
        margin-top: 20px;
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 576px) {
    :root {
        --sb-width: 80px;
    }
}