:root {
    --bg-main: var(--grey-100);
    --content-gap: 24px;
}

body {
    font-family: "DM Sans", sans-serif;
    background-color: var(--bg-main);
    font-style: normal;
    line-height: normal;
    color: var(--black);
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#content {
    overflow-x: hidden;
    padding-top: var(--content-gap);
    padding-bottom: var(--content-gap);
    overflow-y: auto;
    height: 100vh;
    flex: 1 0 0%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--content-gap);
}

.padding-buffer {
    border-radius: 16px;
    background: var(--white);
    /*height: 100%;*/
    height: fit-content;
    width: 100%;
    padding: 16px;
}

#tables, #tablesChannels, #tablesCustomer {
    display: flex;
    /*gap: var(--content-gap);*/
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    /*margin-left: -0.75rem;
    margin-right: -0.75rem;*/
    margin-top: -0.75rem;
}

.div-outer {
    display: flex;
    padding: 12px;
}

.tabulator-col-title-holder {
    /*font-weight: 600;
    font-size: 10px;*/
    font-size: 12px;
    font-weight: 600;
}

.div-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
    align-items: center;
}

.button-custom {
    background: none;
	border: none;
	cursor: pointer;
	outline: inherit;
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--ci-dark);
    color: var(--white);
    height: 32px;

    min-width: 32px;
}
.button-custom:disabled {
    background: var(--grey-200);
    color: var(--grey-400);
    cursor: not-allowed;
}
.button-custom > div > svg, .button-custom > div {
    height: 20px;
    width: 20px;
}
.button-custom:disabled > div > svg {
    fill: var(--grey-400);
}

.help-table {
    width: 100%;
}
.help-table > tbody > tr > td:nth-child(2) {
    text-align: end;
}

.tabulator-col[tabulator-field="id"] {
    text-decoration: underline;
}

.tabulator-row {
    background-color: var(--grey-100) !important;
    border-bottom: 8px solid white;
    border-spacing: 0px 4px;
}
.tabulator-row .tabulator-cell:first-of-type {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.tabulator-row .tabulator-cell:last-of-type {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.div-help {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    /*height: calc(100% - 32px);*/
    gap: var(--content-gap);
    /*align-items: center;*/
}

.search-custom > input, .search-custom > input:focus {
    border: none;
    background-image: none;
    background-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0;
}

.search-custom {
    display: flex;
    height: 32px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--grey-100);
    background: var(--grey-100);
    width: 200px;
}

.tabulator-row.tabulator-selected {
    background-color: var(--grey-300) !important;
}

.new-row-highlight {
    background-color: var(--accent-pos-light) !important;
}

#navTabs > div, #navTabsCustomerTables > div, #navTabsEntitiesTable > div {
    cursor: pointer;
    height: 32px;
    padding: 6px 8px;
    border-radius: 8px;
    line-height: 19px;
    background: var(--grey-100);
}
#navTabs > div.active, #navTabsCustomerTables > div.active, #navTabsEntitiesTable > div.active {
    /*text-decoration: underline;*/
    background: var(--ci-dark);
    color: var(--white);
}

.dropdown-custom {
    background: unset;
    /* display: inline-flex; */
    height: 32px;
    padding: 8px;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--grey-200);
    cursor: pointer;

    justify-content: space-between;
    display: flex;
}
.dropdown-custom:hover {
    background: var(--grey-200);
}
.dropdown-icon-chevron > svg {
    width: 16px;
    height: 16px;
}
.dropdown-custom-item {
    display: inline-flex;
    padding: 8px;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: var(--white);
    color: var(--black);
    width: 100%;
    clear: both;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-custom-item:hover {
    background: var(--grey-100);
    color: var(--black);
}
.dropdown-custom-item.disabled, .dropdown-custom.disabled {
    background: var(--grey-100);
    color: var(--grey-400);
    pointer-events: none;
}
.dropdown-custom-item:active {
    color: var(--black);
}
.dropdown-custom-item-no-hover:hover {
    background: unset !important
}
.dropdown-popup {
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    background: var(--white);
}
.dropdown-popup-shadow {
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10), 0px 14px 14px 0px rgba(0, 0, 0, 0.09), 0px 32px 19px 0px rgba(0, 0, 0, 0.05), 0px 56px 23px 0px rgba(0, 0, 0, 0.01), 0px 88px 25px 0px rgba(0, 0, 0, 0.00);
}

.dropdown-icon-chevron {
    width: 16px;
    height: 16px;
}

.modal-body > .row > div {
    display: flex;
    flex-direction: column;
}

input[name="datetimes"] {
    /*border: none;
  background-image: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  padding: 0;*/
}

.spacer {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--grey-200);
}

.spacer-vertical {
    border-right: 1px solid var(--grey-200);
    margin-top: 4px;
    margin-bottom: 4px;
}

.simpleRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
}

.simpleRow > input, .simpleRow > button, .simpleRow > div {
    max-width: 221px;
    height: 32px;
}
.simpleRow > div.form-check {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
}
.simpleRow > div.form-check > input {
    margin-bottom: 4px;
}
.simpleRowPlatformDropdown {
    min-width: 160px;
}

#navOptions {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.icon-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

#channelsContainer {
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.daterangepicker .ranges li.active, .daterangepicker td.active, .daterangepicker td.active:hover, .applyBtn {
    background-color: var(--ci-dark) !important;
}

.daterangepicker td.in-range {
    background-color: var(--grey-200);
}

input[name="datetimes"] {
    text-align: center;
}

.button-custom-negative {
    background-color: #dc3545;
}

.button-custom-positive {
    background-color: green;
}

.button-custom-neutral {
    background-color: #ffc107;
}

.button-custom-admin {
    background-color: var(--sentiment-red);
}

.input-invalid {
    border-color: #dc3545;
}
.input-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25);
}

.input-invalid-duplicate {
    color: red;
}

.input-invalid-warning {
    border-color: #ffc107;
}
.input-invalid-warning:focus {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25);
}

.bold-text {
    font-weight: bold;
}

.ag-right-aligned-cell input {
    text-align: right;
}
.ag-right-aligned-cell {
    display: flex;
    justify-content: flex-end;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-wrapper input {
    flex: 1; /* ensures the input takes up the full width of the wrapper */
}

.dropdown-icon-chevron {
    position: absolute;
    right: 10px; /* distance from the right edge of the input */
    cursor: pointer; /* changes the cursor to a pointer when hovering over the icon */
    height: 20px; /* or your desired size */
    width: 20px; /* or your desired size */
}

.input-empty {
    cursor: pointer;
}

.input-wrapper > input {
    height: 100%;
}

/*.required:after {
    color: #e32;
    content: ' *';
    display: inline;
}*/
.optional:after {
    opacity: .8;
    content: ' (optional)';
    display: inline;
}
.autogenerated:after {
    opacity: .8;
    content: ' (auto generated)';
    display: inline;
}

.column {
    flex: 1; /* Each column takes up half the space */
    padding: 10px;
}
.column.left {
    margin-right: 4px;
}
.column.right {
    margin-left: 4px;
}

.customer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.customer-logo {
    height: 100px;
    width: 100px;
    max-width: 500px;
    border: 2px solid var(--grey-200);
    padding: 8px;
    border-radius: 8px;
    object-fit: contain;
}

.options-section > div > label {
    padding-left: 6px;
    /*padding-bottom: 2px;*/
    vertical-align: middle;
}

.customer-info > form > button, .customer-info > form > div > button {
    width: 100px;
    min-width: 100px;
}

.file-upload-wrapper {
    padding-right: 16px;
    display: flex;
    align-items: center;
}
.file-upload-wrapper > span {
    padding-left: 16px;
    /*width: 100%;*/
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
}

#advancedSwitchDiv > label {
    padding-top: 4px;
    padding-left: 6px;
    font-weight: 400;
}
#advancedSwitchDiv {
    display: flex;
    align-items: center;
}

.form-check-input:checked {
    background-color: var(--ci-dark) !important;
    border-color: var(--ci-dark) !important;
}

#keywordsContainer > div > div > .form-check {
    width: 50%;
    margin: 0px;
}

.example-cell {
    display: flex;
    align-items: center;
}
.example-cell > span {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
#imageContainer {
    display: flex;
    gap: 16px;
    flex-direction: row;
    flex-wrap: wrap;
}
#imageContainer > img {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
}

#image-popup {
    position: fixed;
    max-height: 400px; /* Allow some room from the viewport limits */
    max-width: 400px; /* Allow some room from the viewport limits */
    display: none;
    z-index: 1000;
    border: 1px solid #ccc;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    padding: 4px;
    overflow: auto; /* Allow scrolling for very large images */
    box-sizing: border-box; /* Include padding and border in the width and height calculations */
}

#image-popup img {
    max-width: 100%;  /* Limit the width to the parent's width */
    max-height: 100%; /* Limit the height to the parent's height */
    object-fit: contain;
    display: block;
    margin: auto;
}

.brand-logo-img {
    /*filter: invert(1);*/
    height: 36px;
    width: 36px;
}

.text-limit-over {
    color: var(--sentiment-red) !important;
}

input[type="checkbox"] {
    accent-color: var(--ci-dark);
}

/* Styling the thumb */
.form-range::-webkit-slider-thumb {
    background-color: var(--ci-dark); /* Bootstrap primary color for example */
    border: none; /* Optional: removes default border */
}

.form-range::-moz-range-thumb {
    background-color: var(--ci-dark);
    border: none;
}

.form-range::-ms-thumb {
    background-color: var(--ci-dark);
    border: none;
}

#divNotOnboarded {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
}

.hide-until-customer-validation {
    display: none !important;
}

.customer-creation-mode {
    display: none !important;
}

.hide-in-customer-creation {
    display: none !important;
}

.nav-dashboard-card {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-left: auto;
    width: auto;
    min-width: 280px;
    padding: 12px 16px;
    box-shadow: none;
}

.nav-dashboard-card__top,
.nav-dashboard-card__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.nav-dashboard-card__stats {
    flex-wrap: wrap;
}

.nav-dashboard-meta-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
    flex: 1;
    white-space: nowrap;
}

.nav-dashboard-card.onboarding-complete .nav-dashboard-meta-block {
    min-width: 145px;
}

.nav-dashboard-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--brand-dark);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    width: 146px;
}

.nav-dashboard-button:hover {
    opacity: 0.9;
    color: var(--white);
}

.nav-dashboard-finish-btn {
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--black);
    font-weight: 600;
    min-height: 32px;
    box-shadow: none;
    border: none;
    background: orange;
    cursor: pointer;
    width: 146px;
}

.nav-dashboard-status-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-dashboard-meta-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.onboarding-deadline-date {
    color: orange;
}

.ag-center-aligned-cell {
    display: flex;
    align-items: center;
}

#logDetails3, .admin-response-content {
    padding: 16px;
    border-radius: 16px;
    background-color: var(--grey-200);
    margin-top: 16px;
    margin-bottom: 0px;
}

.locked-mode, .admin-mode-item {
    display: none !important;
}

.options-section > div {
    display: flex;
    align-items: flex-start;
}

.icon-info {
  width: 12px;
  height: 12px;
  color: var(--grey-500);
}

.complete-status {
    color: green;
}
.onboarding-status {
    color: orange;
}

.notification-badge {
    background-color: orange;
    color: white;
    font-size: 1em;
    padding: 0px 6px 0px 6px;
    border-radius: 16px;
    display: inline-block;
    margin-left: 2px;
}

.input-field-check:focus {
    border-color: #ccc; /* Change border color to your desired color */
    box-shadow: none;   /* Remove the default blue shadow */
    outline: none;      /* Remove the default outline */
}

.spacer-no-padding {
    border-bottom: 1px solid var(--grey-200);
}

#imageModal .modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 832px;
    height: 532px;
    box-sizing: border-box; /* Include padding and border in width and height */
}

#imageModal .modal-content {
    max-width: 100%; /* Ensure the content does not enlarge the modal */
    max-height: 100%; /* Ensure the content does not enlarge the modal */
    box-sizing: border-box; /* Include padding and border in width and height */
}

#imageModal .modal-body {
    max-width: 100%; /* Ensure the body does not enlarge the modal */
    max-height: 100%; /* Adjust this value based on your modal header and footer height */
    box-sizing: border-box; /* Include padding and border in width and height */
    overflow: auto; /* Add scroll if content is larger than the body */
}

#imageModal .carousel-inner img {
    object-fit: contain;
}

.image-preview {
    width: 766px;
    height: 450px;
    border: 1px solid var(--grey-400);
    border-radius: 8px;
}

.carousel-control-next, .carousel-control-prev {
    margin-bottom: 48px;
}

.carousel-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    min-height: 41px;
    align-content: center;
    padding-top: 6px;
    padding-bottom: 6px;
    gap: 4px;
}

.tag {
    white-space: nowrap; /* Ensure tags don't break within themselves */
    word-wrap: break-word; /* Ensure tags break correctly if too long */
}
.tag {
    padding-left: 8px;
  padding-right: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  border-radius: 3px;
  background-color: #E5E5E5;
    line-height: 2;
    max-height: 28px;
}

.ag-popup-child.ag-list {
    z-index: 9999 !important;
    /*max-height: unset !important;*/
}

.ag-theme-quartz.ag-popup {
    overflow: visible !important;
    position: fixed;
    z-index: 9998;
}

#modalMultipleDynamicAssetDropdownItems, #modalMultipleDynamicAssetStandaloneDropdownItems,
#dropdownSourceCustomer > .dropdown-menu, #dropdownTargetCustomer > .dropdown-menu,
#dropdownSourceCustomerCopyChannel > .dropdown-menu, #dropdownTargetCustomerCopyChannel > .dropdown-menu,
#dropdownSourceCustomerCopyArticles > .dropdown-menu, #dropdownTargetCustomerCopyArticles > .dropdown-menu,
#dropdownCustomerSocialAnnotationRenamingDiv > .dropdown-menu,
#dropdownExistingAnnotationIDSocialAnnotationDiv > .dropdown-menu,
#dropdownUpdatedAnnotationIDSocialAnnotationDiv > .dropdown-menu,
#dropdownCustomerType > .dropdown-menu,
#dropdownCustomerCategory > .dropdown-menu,
#dropdownAssignedEmployeeAM > .dropdown-menu,
#dropdownAssignedEmployeePM > .dropdown-menu,
#dropdownCustomerTimezone > .dropdown-menu,
 #dropdownCustomerTikTokCrawler > .dropdown-menu {
    max-height: calc(32px * 10 + 16px);
    overflow-y: auto;
}

#keywordsContainer > div > div > tags {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
/*.tagify__tag, .tagify__input, input.tagify {
    height: 17px !important;
}
.tagify__input {
    display: flex;
    align-items: center;
}*/

.tagify__tag {
    max-width: 232px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*#customerSettingsRowLimits > div > label {
    margin-bottom: 0px !important;
}*/

#edit_keywordInputSentiment, #keywordInputSentiment,
#edit_keywordInputTrackChat, #keywordInputTrackChat,
#edit_keywordInputTrackVoice, #keywordInputTrackVoice,
#edit_keywordVoiceInputSkip, #keywordVoiceInputSkip {
    width: 16px;
    height: 16px;
}

.keyword-container {
    display: flex;
    flex-wrap: wrap;
}

#main {
    overflow-y: scroll;
    height: 100vh;
}

.customer-type-proleague {
    display: none;
}

#customerToolsDiv > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

#customerToolsDiv > label:not(:first-child) {
    margin-top: 1rem;
}

.overlay-loading {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.70); /* Semi-transparent white background */
    backdrop-filter: blur(1px); /* Blur effect for the background */
}

.btn-shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-url-tasks-url {
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 311px;  /* measured natural width in firefox */
}

.entities-benchmark {
    /*display: none;*/
}

/* Optional: force tooltip to stay inside the container */
.ql-tooltip {
  left: 0px !important;
}


.tagify__dropdown__item--active {
    background: var(--ci-dark) !important;
}


.row-expired {
    background-color: var(--grey-100) !important;
}

.accordion-button {
    height: 2.5rem;
}