:root {
  --sectionwidth: calc(100vw - 220px);
  --windowWidth: 100vh;
}

body {
    background: #ffffff;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 1;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    min-height: 100vh;
}

/* custom scrollbar */

body ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body ::-webkit-scrollbar-track {
    box-shadow: none; 
    border-radius: 10px;
    background: #f2f2f2;
}

aside ::-webkit-scrollbar-track {
    background: #344156;
}
 
body ::-webkit-scrollbar-thumb {
    background: #475467; 
    border-radius: 10px;
}

body ::-webkit-scrollbar-thumb:hover {
    background: #667085; 
}

.break-words {
    overflow-wrap: anywhere;
}

.transition-all {
    transition: all 0.25s ease-in;
}

.btn-primary, 
.btn-secondary {
    white-space: nowrap;
}

/* custom inputs */

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    cursor: pointer;
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 7L7 17M7 7L17 17" stroke="%23667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: 5px center;
    height: 20px;
    width: 20px;
    transition: all 0.25s;
    margin: 0;
}

[type="checkbox"] {
    min-width: 1rem;
    min-height: 1rem;
    background: #fff;
}

[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.disabled,
.btn-disabled,
input[type="submit"]:disabled {
    pointer-events: none;
    cursor: not-allowed !important;
    opacity: 0.4;
}

input[type="text"]:disabled, 
#mag_id, 
#mag_customer,
#mag_title, 
#mag_basicSpreadRef {
    pointer-events: none;
    background-color: #F9FAFB !important;
    opacity: 1;
    color: #98A2B3;
}

input[name*="cover_pp"] {
    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.6666 15.8333V13.3333H5.83325C4.45254 13.3333 3.33325 14.4526 3.33325 15.8333M7.33325 18.3333H13.9999C14.9333 18.3333 15.4 18.3333 15.7566 18.1517C16.0702 17.9919 16.3251 17.7369 16.4849 17.4233C16.6666 17.0668 16.6666 16.6001 16.6666 15.6667V4.33334C16.6666 3.39992 16.6666 2.93321 16.4849 2.57669C16.3251 2.26308 16.0702 2.00812 15.7566 1.84833C15.4 1.66667 14.9333 1.66667 13.9999 1.66667H7.33325C5.93312 1.66667 5.23306 1.66667 4.69828 1.93916C4.22787 2.17884 3.84542 2.56129 3.60574 3.0317C3.33325 3.56647 3.33325 4.26654 3.33325 5.66667V14.3333C3.33325 15.7335 3.33325 16.4335 3.60574 16.9683C3.84542 17.4387 4.22787 17.8212 4.69828 18.0609C5.23306 18.3333 5.93312 18.3333 7.33325 18.3333Z" stroke="%2398A2B3" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    padding-left: 2.3rem;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px;
}

input[name*="text_pp"] {
    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0001 17.5L9.9167 17.3749C9.33783 16.5066 9.0484 16.0725 8.666 15.7582C8.32746 15.4799 7.93739 15.2712 7.51809 15.1438C7.04446 15 6.52267 15 5.4791 15H4.33341C3.39999 15 2.93328 15 2.57676 14.8183C2.26316 14.6586 2.00819 14.4036 1.8484 14.09C1.66675 13.7335 1.66675 13.2668 1.66675 12.3333V5.16667C1.66675 4.23325 1.66675 3.76654 1.8484 3.41002C2.00819 3.09641 2.26316 2.84144 2.57676 2.68166C2.93328 2.5 3.39999 2.5 4.33341 2.5H4.66675C6.53359 2.5 7.46701 2.5 8.18005 2.86331C8.80726 3.18289 9.31719 3.69282 9.63677 4.32003C10.0001 5.03307 10.0001 5.96649 10.0001 7.83333M10.0001 17.5V7.83333M10.0001 17.5L10.0835 17.3749C10.6623 16.5066 10.9518 16.0725 11.3342 15.7582C11.6727 15.4799 12.0628 15.2712 12.4821 15.1438C12.9557 15 13.4775 15 14.5211 15H15.6667C16.6002 15 17.0669 15 17.4234 14.8183C17.737 14.6586 17.992 14.4036 18.1518 14.09C18.3334 13.7335 18.3334 13.2668 18.3334 12.3333V5.16667C18.3334 4.23325 18.3334 3.76654 18.1518 3.41002C17.992 3.09641 17.737 2.84144 17.4234 2.68166C17.0669 2.5 16.6002 2.5 15.6667 2.5H15.3334C13.4666 2.5 12.5332 2.5 11.8201 2.86331C11.1929 3.18289 10.683 3.69282 10.3634 4.32003C10.0001 5.03307 10.0001 5.96649 10.0001 7.83333" stroke="%2398A2B3" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    padding-left: 2.3rem;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px;
}

input[name*="email"][type="text"],
input[name*="email"][type="email"] {
    background: url('data:image/svg+xml,<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.66675 3.83334L8.47085 8.59621C9.02182 8.9819 9.29731 9.17474 9.59697 9.24943C9.86166 9.31541 10.1385 9.31541 10.4032 9.24943C10.7029 9.17474 10.9783 8.9819 11.5293 8.59621L18.3334 3.83334M5.66675 14.6667H14.3334C15.7335 14.6667 16.4336 14.6667 16.9684 14.3942C17.4388 14.1545 17.8212 13.7721 18.0609 13.3017C18.3334 12.7669 18.3334 12.0668 18.3334 10.6667V5.33334C18.3334 3.93321 18.3334 3.23315 18.0609 2.69837C17.8212 2.22796 17.4388 1.84551 16.9684 1.60583C16.4336 1.33334 15.7335 1.33334 14.3334 1.33334H5.66675C4.26662 1.33334 3.56655 1.33334 3.03177 1.60583C2.56137 1.84551 2.17892 2.22796 1.93923 2.69837C1.66675 3.23315 1.66675 3.93321 1.66675 5.33334V10.6667C1.66675 12.0668 1.66675 12.7669 1.93923 13.3017C2.17892 13.7721 2.56137 14.1545 3.03177 14.3942C3.56655 14.6667 4.26662 14.6667 5.66675 14.6667Z" stroke="%23667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    padding-left: 2.3rem;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px;
}

.alert-error,
.alert-info,
.alert-success {
    font-size: 12px;
}

.alert-error {
    color: #F04438;
}

.alert-info {
    color:#d2edf9;
}

.alert-success {
    color:#47CD89;
}

tr.error {
    background: #FECDCA;
}

tr.error td {
    color: #B42318;
}

tr.safe {
    background: #DCFAE6;
}

tr.safe td {
    color: #067647;
}

#main-section {
    padding-top: 8rem;
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
}

.main-header + section a.active,
.switcher a.active {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
    color: #101828;
}

#top-nav {
    position: fixed;
    top: 4rem;
    left: 0;
    width: 100%;
    z-index: 7;
}

#top-nav img {
    max-height: 30px;
}

.table .icon img {
    max-height: 45px;
}

.btn-open-submenu > a > *,
.btn-open-submenu > button * {
    pointer-events: none;
}

.main-header + section {
    padding-top: 4rem;
}

#top-nav + section {
    padding-top: 9rem;
    padding-bottom: 6rem;
}

#top-nav + section#main-section {
    padding-top: 8rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:-webkit-autofill::first-line,
input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0 30px #f0fdf4 inset !important;
    font: -webkit-control;
}

#username-container input,
#username-container + .password input {
    font: -webkit-control;
}

select {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg>");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

.date input {
    padding-left: 2.5rem;
}

#timeout, 
#failover-bar {
  display: none;
}

/* Tooltips */

.tooltip {
    position: absolute;
    height: 20px;
    line-height: 20px;
    z-index: 9999;
    left: 20px;
    top: -10px;
    font-size: 12px;
    background: #020712;
    opacity: 0;
    cursor: default;
    pointer-events: none;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
}

.tooltip::after {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #020712;
    border-left: 0;
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    top: 5px;
    width: 0;
    z-index: 1;
}

.tooltip-text {
  font-size: 11px;
  height: auto;
  padding: 0 10px;
  color: #fff;
  text-align: center;
  line-height: 20px;
}

.tooltip-pin {
    position: relative;
}

.tooltip-pin .tooltiptext-pin {
    visibility: hidden;
    background-color: #8bffc1;
    color: #0b111d;
    text-align: center;
    border-radius: 0.375rem;
    position: absolute;
    z-index: 11;
    right: 30px;
    top: -15px;
    padding: 8px 18px;
}

.tooltip-pin:hover .tooltiptext-pin,
th .tooltip-pin .tooltiptext-pin  {
    visibility: visible;
}

.tooltip-pin:hover .tooltiptext-pin:after {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 0;
    border-left: 5px solid #8cffc1;
    content: '';
    display: block;
    position: absolute;
    right: -5px;
    top: 17px;
    width: 0;
    z-index: 1;
}

.issue-covers .context-menu-four:hover .tooltip {
    pointer-events: auto;
    opacity: 1;
}

.issue-covers .context-menu-four .tooltip {
    left: 40px;
    top: 15px;
}

.traffic-lights:not(.bg-white) li:hover > .tooltip {
  pointer-events: auto;
  opacity: 1;
}

/* datepicker jquery + bootstrap */

input.datepicker,
input.datetimepicker {
    padding-left: 2.3rem;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%2398A2B3" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" /></svg>');
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px;
}

.flatpickr-calendar {
    padding: 10px !important;
    border-radius: 0.375rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #344054;
    font-size: 12px;
}

.flatpickr-months {
    position: relative;
}

.flatpickr-months .flatpickr-prev-month svg, 
.flatpickr-months .flatpickr-next-month svg {
    width: 12px;
    height: 12px;
}

.flatpickr-current-month,
.flatpickr-current-month select {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

.flatpickr-current-month {
    padding: 10px;
}

.flatpickr-months .flatpickr-month {
    height: 40px;
}

.flatpickr-weekdays {
    height: 35px;
}

span.flatpickr-weekday {
    color: #344054;
}

span.flatpickr-day {
    height: 39px;
    line-height: 39px;
    border: 0;
}

.flatpickr-days {
  width: auto;
}

.dayContainer {
  width: auto;
  min-width: auto;
  max-width: none;
}

.flatpickr-day.today {
    border: 0;
    background: #88fbc0;
    color: #344054;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #344054;
    color: #fff;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: #F2F4F7;
    border: 0;
}

.flatpickr-current-month select:hover,
.numInputWrapper:hover,
.flatpickr-current-month input.cur-year,
.numInputWrapper span,
.numInputWrapper span:hover {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.flatpickr-current-month input.cur-year {
    padding: 0 0 0 1ch;
    font-weight: 600;
}

.numInputWrapper span {
    padding-left: 7px;
}

.flatpickr-time input:hover, 
.flatpickr-time .flatpickr-am-pm:hover, 
.flatpickr-time input:focus, 
.flatpickr-time .flatpickr-am-pm:focus {
    background: none;
}

.flatpickr-time span.arrowUp,
.flatpickr-time span.arrowDown {
    display: none;
}

/* main views */

.live-project, 
.project-cover, 
.issue-covers {
    width: 100%;
    height: 100%;
    position: relative;
}

.status-tab {
    display: none;
}

.status-tab {
    font-size: 12px;
    position: absolute;
}

.img-publication {
    height: 50vw;
}

@media (min-width: 640px) {
    .img-publication {
        height: 45vw;
    }
}

@media (min-width: 768px) {
    .img-publication {
        height: 37vw;
    }
}

@media (min-width: 1024px) {
    .img-publication {
        height: 28vw;
    }
}

@media (min-width: 1280px) {
    .img-publication {
        height: 17vw;
    }
}

.img-publication img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img-publication img[src*="/placeholder"] {
    object-fit: cover;
}

.live-publication:hover .img-overlay {
    opacity: 1;
}

.object-cover {
    width: 100%;
}

/* DataTables custom style */

.table {
    text-align: center;
}

table {
    display: table;
    min-width: 100%;
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

table:has(.ui-datepicker-calendar) thead {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

table thead {
    background: #F9FAFB;
}

table th {
    --tw-text-opacity: 1;
    color: rgb(16 24 40 / var(--tw-text-opacity));
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

table td {
    --tw-text-opacity: 1;
    color: rgb(102 112 133 / var(--tw-text-opacity));
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    white-space: nowrap;
}

table.dataTable thead th span {
    display: inline-flex;
    align-items: center;
    line-height: normal;
}

table:not(.table-projects).dataTable thead th.sorting > span:after {
    content: '';
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 4V15M17 15L13 11M17 15L21 11M7 4V20M7 20L3 16M7 20L11 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center right;
    display: inline-block;
    height: 16px;
    min-width: 16px;
    margin-left: 5px;
}

table:not(.table-projects).dataTable thead th.sorting_asc > span:after {
    content: '';
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4V20M12 20L18 14M12 20L6 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center right;
    display: inline-block;
    height: 16px;
    min-width: 16px;
    margin-left: 5px;
}

table:not(.table-projects).dataTable thead th.sorting_desc > span:after {
    content: '';
    background-image: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 20V4M12 4L6 10M12 4L18 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center right;
    display: inline-block;
    height: 16px;
    min-width: 16px;
    margin-left: 5px;
}

.sort-btn {
    position: absolute;
    right: -6px;
    cursor: pointer;
}

.sort-btn.btn-asc {
    margin-top: 23px;
}

.sort-btn.btn-desc {
    margin-top: 5px;
}

#table-length,
.table-length {
    width: 8rem;
}

#table-search input {
    padding-left: 36px;
}

#table-search label {
    position: relative;
    color: #667085;
}

#table-search label:before,
.label-search:before {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    content: '';
    height: 20px;
    width: 20px;
    display: inline-block;
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="%23667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.dataTables_wrapper th:not(.text-left),
.dataTables_wrapper td:not(.text-left) {
    text-align: center;
}

.dataTables_wrapper tr:last-child {
    border-color: var(--color-gray-200);
    border-bottom-width: calc(1px* calc(1 - var(--tw-divide-y-reverse)));
}

div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane tr>th:hover, 
div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane tr>td:hover {
    cursor: pointer;
    background: #e5e7eb;
}

.dataTables_filter label {
    margin: 0;
}

#main-table_filter,
.dataTables_filter,
#datatables-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#datatables-filters div {
    width: 13rem;
}

#main-table tbody tr {
    cursor: pointer;
}

#main-table tbody tr:hover {
    background-color: #F9FAFB;
}

table span[class*="product-status-"],
table span[class*="file-name-"],
table span[style*="background-color:"] {
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    white-space: nowrap;
}

/*.admin-content .table thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}*/

.admin-content .project td,
.admin-content .campaign td,
.admin-content .project-guide td {
    font-size: 0.75rem;
    line-height: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.admin-content .project-guide th,
.admin-content .project-guide td {
    max-width: 150px;
    min-width: 50px;
    white-space: normal;
}

.admin-content .project .text-sm,
.admin-content .campaign .text-sm {
    font-size: 0.75rem;
}

.table.text-left th,
.table.text-left td {
    text-align: left !important;
}

.table.text-left th.text-center,
.table.text-left td.text-center,
.table.text-center th,
.table.text-center td {
    text-align: center !important;
}

.table.text-center th.text-left,
.table.text-center td.text-left {
    text-align: left !important;
}

table th:has(.select2) {
    min-width: 150px !important;
    position: relative;
    font-size: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

table th#header-6:has(.select2) {
    min-width: 185px !important;
}

table th#header-7:has(.select2) {
    min-width: 220px !important;
}

table th#header-10:has(.select2) {
    min-width: 120px !important;
}

table th#header-13:has(.select2),
table th#header-15:has(.select2) {
    min-width: 165px !important;
}

table th:has(.select2) .selection span {
    display: inline;
}

table th:has(.select2) span.selection,
table th:has(.select2) .select2-container .select2-selection--multiple {
    width: 100%;
}

table.dataTable thead th span.select2 {
    max-height: 88px;
    overflow: auto;
}

.table .icon img,
table tr td:not(.td-status) img {
    max-width: 40px;
    margin: 0 auto;
}

table tr td .resizable img {
    max-width: 80px;
}

table.list-blk tr td img {
    max-width: 60px;
    margin: 0 auto;
    height: 60px;
    object-fit: contain;
}

.thumb-img .js-open-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumb-img .js-open-modal img {
    max-height: 100%;
}

.studio-email-table th,
.studio-email-table td {
    font-size: 8px;
}

/* styles for admin pages */

#admin-sidebar:not(.show) {
    width: 0;
}

#admin-sidebar .fixed,
#admin-sidebar .fixed #user-profile-item {
    left: -20%;
    transition: all 0.4s ease-in-out;
}

#admin-sidebar.show .fixed,
#admin-sidebar.show .fixed #user-profile-item {
    left: 0;
}

#admin-sidebar.show + #admin-section .hide-sidebar svg,
.admin-content .hide-sidebar.active svg {
    transform: rotate(180deg);
}

#admin-top-nav,
#admin-section,
#admin-sidebar {
    transition: all 0.4s ease-in-out;
}

#admin-sidebar.show + #admin-section .go-homepage {
    display: none;
}

.nav-sidebar + #user-profile-item {
    height: 4.5rem;
    position: fixed;
    bottom:0;
    left: 0;
    background: #0c111d;
    padding: 0 10px;
}

.nav-sidebar a {
    color: #F2F4F7;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 37px;
    word-wrap: break-word;
    width: 100%;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    padding: 0 1rem;
    margin: 2px 0;
}

.nav-sidebar li > a + ul li a:before {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
}

.nav-sidebar li > a + ul {
    display: none;
}

.nav-sidebar a:hover {
    color: #fff;
    background: rgba(29, 41, 57, 1);
}

.nav-sidebar a svg {
    color: #d0d5dd;
}

.nav-sidebar > li.menu-open > a {
    background: rgba(29, 41, 57, 1);
}

.nav-sidebar > li.menu-open > a + ul {
    display: block;
}

.nav-sidebar > li.menu-open > a + ul li a.active {
    background: #234d51;
}

.nav-sidebar > li > a:after {
    content: '';
    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="chevron-down"><path id="Icon" d="M5 7.5L10 12.5L15 7.5" stroke="%23D0D5DD" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
    background-position: center right;
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    right: 8px;
    color: #F2F4F7;
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

.nav-sidebar > li.menu-open > a.opened:after,
.nav-sidebar > li > a.opened:after {
    transform: rotate(180deg);
}

.sidebar-search-results {
    position: relative;
    display: none;
    width: 100%;
    top: 3px;
}

.sidebar-search-open .sidebar-search-results {
    display: block;
}

.sidebar-search-results .list-group>.list-group-item {
    padding: .375rem .75rem;
    font-weight: 500;
}

.sidebar-search-results .list-group {
    background: #1f2937;
    position: absolute;
    width: 100%;
    z-index: 1039;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: .25rem;
}

.list-group-item {
    color: #d0d5dd;
}

.list-group-item .search-path {
    color: #adb5bd;
    font-size: 80%;
}

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

.label-search {
    position: relative;
}

.label-search input {
    padding-left: 2em;
}

aside .label-search input {
    color: #d0d5dd;
}

aside .label-search input:focus {
    box-shadow: none;
}

aside > div {
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    max-height: 100vh;
    height: 100vh;
}

textarea.description,
select.ad-size,
select[multiple] {
    font-size: 13px;
    color: #677085;
    padding: 5px;
    line-height: 18px;
    min-height: 100px;
}

option:checked, option:focus {
    background-color: #8bffc1;
    color: #040712;
}

input[readonly] {
    pointer-events: none;
    background-color: #F9FAFB !important;
    opacity: 1;
    color: #98A2B3;
}

input.datepicker {
    pointer-events: auto;
    background-color: #fff;
    opacity: 1;
}

div.readonly span.select2 .selection .select2-selection, 
div.readonly input {
    background-color: #F9FAFB;
}

div.readonly span.select2 {
    pointer-events: none;
}

#add-new-customer,
#add-new-campaign,
#add-new-template {
    border: 1px solid rgb(209 213 219);
    background-color: #fff;
    border-radius: 0 0.375rem 0.375rem 0;
    color: rgb(17 24 39);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 0;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    min-height: 42px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    cursor: pointer;
}

.project-customer .select2-container .select2-selection--single,
.project-campaign .select2-container .select2-selection--single,
.project-template .select2-container .select2-selection--single {
    border-radius: 0.375rem 0 0 0.375rem;
}

.dataTables_length label {
    margin: 0;
}

.dataTables_paginate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1em;
}

.paginate_button {
    font-size: 14px;
    font-weight: 500;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    color: #475569;
    cursor: pointer;
    background: none !important;
}

.paginate_button.disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.paginate_button.previous,
.paginate_button.next {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.paginate_button.next {
    justify-content: flex-end;
}

.paginate_button.previous:before {
    content: '';
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12H4M4 12L10 18M4 12L10 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center left;
    width: 20px;
    height: 20px;
    display: inline-block;
    padding-left: 1.75em;
    background-repeat: no-repeat;
}

.paginate_button.next:after {
    content: '';
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12H20M20 12L14 6M20 12L14 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center right;
    width: 20px;
    height: 20px;
    display: inline-block;
    padding-right: 1.75em;
    background-repeat: no-repeat;
}

.paginate_button.current {
    background: #f1f5f9 !important;
}

.dataTables_info {
    font-size: 11px;
    padding: 3px 5px 3px;
    color: #667085;
}

/* campaigns */

.project-types {
    cursor: pointer;
}

.project-types .main-type {
    padding: 10px;
    background-color: #cbd5e1;
    border-bottom: 2px solid #FFFFFF;
    font-weight: bold;
}

.project-sub-types {
    display: none;
}

.project-sub-types.show {
    display: block;
}

.project-sub-types ul li {
    cursor: pointer;
    list-style-type: none;
    padding: 10px 20px;
    border-bottom: 1px solid #FFFFFF;
    background-color: #DCFAE6;
}

img.flag {
    width: 30px;
    height: 29px;
    display: inline-block;
    cursor: pointer;
    object-fit: cover;
    border-radius: 50%;
}

[type="checkbox"] + label {
    margin: 0;
}

.custom-file label {
    opacity: 0;
    display: none;
}

#lucid-link-container {
    background: url('data:image/svg+xml,<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode:multiply"><rect x="2" y="2" width="32" height="32" rx="16" fill="%23EEF2F6"/><rect x="2" y="2" width="32" height="32" rx="16" stroke="%23F8FAFC" stroke-width="4"/><path d="M18.6662 11.3333L12.7286 18.4586C12.496 18.7376 12.3797 18.8771 12.378 18.995C12.3764 19.0974 12.4221 19.1949 12.5018 19.2593C12.5934 19.3333 12.775 19.3333 13.1383 19.3333H17.9996L17.3329 24.6667L23.2706 17.5414C23.5032 17.2624 23.6194 17.1229 23.6212 17.005C23.6227 16.9026 23.5771 16.8051 23.4974 16.7407C23.4058 16.6667 23.2241 16.6667 22.8609 16.6667H17.9996L18.6662 11.3333Z" stroke="%234B5565" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
    background-repeat: no-repeat;
    background-position: 1rem center;
    height: 70px;
}

#image-portal-container {
    background: url('data:image/svg+xml,<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode:multiply"><rect x="2" y="2" width="32" height="32" rx="16" fill="%23EEF2F6"/><rect x="2" y="2" width="32" height="32" rx="16" stroke="%23F8FAFC" stroke-width="4"/><path d="M12.9769 23.8186L17.2646 19.4209C17.522 19.1569 17.6507 19.0249 17.7991 18.9754C17.9297 18.9319 18.0703 18.9319 18.2009 18.9754C18.3493 19.0249 18.478 19.1569 18.7354 19.4209L22.9945 23.7893M19.3 20L21.1646 18.0876C21.422 17.8236 21.5507 17.6916 21.6991 17.6421C21.8297 17.5986 21.9703 17.5986 22.1009 17.6421C22.2493 17.6916 22.378 17.8236 22.6354 18.0876L24.5 20M16.7 16C16.7 16.7364 16.118 17.3333 15.4 17.3333C14.682 17.3333 14.1 16.7364 14.1 16C14.1 15.2636 14.682 14.6667 15.4 14.6667C16.118 14.6667 16.7 15.2636 16.7 16ZM14.62 24H21.38C22.4721 24 23.0182 24 23.4353 23.782C23.8022 23.5903 24.1005 23.2843 24.2875 22.908C24.5 22.4802 24.5 21.9201 24.5 20.8V15.2C24.5 14.0799 24.5 13.5198 24.2875 13.092C24.1005 12.7157 23.8022 12.4097 23.4353 12.218C23.0182 12 22.4721 12 21.38 12H14.62C13.5279 12 12.9818 12 12.5647 12.218C12.1978 12.4097 11.8995 12.7157 11.7125 13.092C11.5 13.5198 11.5 14.0799 11.5 15.2V20.8C11.5 21.9201 11.5 22.4802 11.7125 22.908C11.8995 23.2843 12.1978 23.5903 12.5647 23.782C12.9818 24 13.5279 24 14.62 24Z" stroke="%234B5565" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
    background-repeat: no-repeat;
    background-position: 1rem center;
    height: 70px;
}

.campaign-with-projects {
    background: #F2F4F7;
}

tr.show-project {
    background: #F9FAFB;
}

.campaign-with-projects td:first-child {
    position: relative;
    padding-left: 1.8rem;
}

.campaign-with-projects td:first-child:before {
    position: absolute;
    cursor: pointer;
    content: '';
    height: 17px;
    width: 17px;
    left: 6px;
    top: 34%;
    transform: rotate(0deg);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>');
    background-repeat: no-repeat;
}

.campaign-with-projects:has(+.hidden) td:first-child:before {
    transform: rotate(-90deg);
}

/* end */

/* Menu side styles */

.primary-nav {
    position: fixed;
    z-index: 8;
    top: 4.5rem;
}

@media (min-width: 1530px) {
    .primary-nav {
        top: 25%;
    }
}

.menu {
    position: absolute;
    left: -230px;
    width: 270px;
    top: 0;
    transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
    background-color: #fff;
}

.menu:hover {
    left: 0;
    top: 0;
}

#menu:checked + ul.menu-dropdown {
    -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
    animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
}

.menu a, 
.menu span {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    align-items: center;
    font-size: 0.9rem;
    cursor: pointer;
}

/* top nav styles */

a.aw0-link {
    color: #ffa500;
}

.menu-nav {
    position: absolute;
    top: 100%;
    right: 0px;
    display: none;
}

.actions-submenu {
    position: absolute;
    top: 100%;
    right: 0px;
}

/* switch checkbox */

.display-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 23px;
}

.display-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

input:checked + .slider {
    background-color: #4B5565;
}

.slider.round {
    border-radius: 34px;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2.5px;
    bottom: 2.5px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

/* flip page */

.splide__slide img {
    vertical-align: bottom;
    margin: 20px auto;
    height: calc(100vh - 15rem);
}

.splide__slide img + p {
    padding-top: 20px;
}

.splide__pagination__page.is-active {
    background: #0b111d !important;
}

.splide__pagination {
    bottom: 1.5em !important;
}

.flip-page {
    padding-bottom: 0 !important;
}

.splide__arrow {
    top: 45% !important;
    border-radius: 50% !important;
    height: 40px !important;
    width: 40px !important;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
    justify-content: center;
    opacity: 1 !important;
}

.splide__arrow svg {
    fill: #fff !important;
}

/* slider page */
#loaded-slider {
    opacity: 0;
    visibility: hidden;
    width: 90%;
    height: auto;
    margin: 0 auto;
    position: relative;
}

#slider section {
    height: calc(100vh - 9rem);
}

@media (min-width: 1530px) {
    #slider section {
        height: calc(100vh - 20rem);
    }
}

@media (min-width: 2560px) {
    #slider section {
        height: calc(100vh - 23rem);
    }
}

.project-cover img {
    height: auto !important;
    max-height: 100%;
    width: 100%;
}

#slider .project-cover {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.carousel-image-translated {
    height: 20px;
}

.slider-navigation {
    position: absolute;
    width: 100%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

a.next, a.prev {
    border-radius: 50% !important;
    height: 40px !important;
    width: 40px !important;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#slider {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

#slider section {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#slider section div.slide:first-child, #slider section div.slide:nth-child(3) {
    opacity: 0.4;
}

#slider section div.slide {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 15px;
    text-align: center;
    -moz-transition: .5s opacity;
    -o-transition: .5s opacity;
    -webkit-transition: .5s opacity;
    transition: .5s opacity;
    margin: 0 auto;
}

/* progress bar */

td .progress-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 185px;
}

td .progress-bar .progress {
    display: flex;
    align-items: center;
    position: unset;
}

td .progress-number {
    position: absolute;
    right: -30px;
}

.admin-content .project-guide td:has(.progress-bar) {
    min-width: 225px !important;
    max-width: 225px !important;
}

.progress-bar .progress[style*="right:0"],
.progress-bar .progress[style*="right: 0"],
.progress-bar .progress[style*="width: 100%"],
.progress-bar.progress-top .progress,
progress[value="100"]::-webkit-progress-bar {
    background: linear-gradient(90deg, #59BEC4 0%, #8AFFC1 28%, #FFA20A 100%);
}

.progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 8px;
    border-radius: 34px;
    background: #4B5565;
}

progress {
    z-index: 1;
    height: 8px;
    border-radius: 34px;
    background: #4B5565;
}


progress::-webkit-progress-inner-element,
progress::-webkit-progress-value,
progress::-webkit-progress-bar {
    border-radius: 34px;
    background: #4B5565;
}

.progress-bar {
    width: 100%;
    height: 8px;
    position: relative;
    border-radius: 34px;
    background: #EAECF0;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress-bar.progress-top {
    position: absolute;
    left: 0;
    top: 0;
    height: 5px;
    z-index: 12;
    border-radius: 0;
    background: transparent;
}

#uploader-progress .progress-bar {
    margin-bottom: 5px;
}

/* page pilot styles */

.ai-btn-border {
    position: relative;
    border: none !important;
}

.ai-btn-border.bg-white {
    position: fixed;
    right: 1.5rem;
    top: 5.5rem;
    height: calc(100vh - 7rem);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 25vw;
    overflow: hidden;
}

.ai-btn-border:before {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    background: linear-gradient(90deg, #59BEC4 0%, #8AFFC1 28%, #FFA20A 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.issues-navigation-bottom .ai-btn-border:before {
    border-radius: 0.375rem;
}

.btn-primary#online-edit,
.btn-primary#frame-content-preview,
.btn-primary#ai-text-button,
.btn-primary#ai-image-button,
.btn-primary#save-and-submit-indd-json,
.btn-primary#save-indd-json,
.btn-primary#ai-text-button-accept,
.btn-primary#ai-image-button-accept {
    box-shadow: 0px 1px 4px rgba(16, 24, 40, 0.3);
    background: linear-gradient(304deg, #D1FDFF 0%, #FDDB92 100%);
    z-index: 1;
}

#save-indd-json:hover {
    color: #4b5563;
}

.btn-primary#frame-content-preview,
.btn-primary#ai-text-button,
.btn-primary#ai-image-button,
.btn-primary#save-and-submit-indd-json {
    background: linear-gradient(90deg, #5EC5C4 0%, #8AFFC1 100%);
}

.btn-primary#save-indd-json {
    background: radial-gradient(42.95% 83.2% at 57.84% -14.6%, #357479 23%, #1F474A 100%);
}

.btn-primary#online-edit:after,
.btn-primary#frame-content-preview:after,
.btn-primary#ai-text-button:after,
.btn-primary#ai-image-button:after,
.btn-primary#save-and-submit-indd-json:after,
.btn-primary#save-indd-json:after,
.btn-primary#ai-text-button-accept:after,
.btn-primary#ai-image-button-accept:after {
    background: linear-gradient(304deg, #ECFDF3 0%, #ECFDF3 100%);
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; 
    left: 0;
    opacity: 0;
    width: 100%;
    z-index: -1;
    transition: all 0.3s ease-in-out;
    border-radius: 0.375rem;
}

.btn-primary#online-edit:hover:after,
.btn-primary#frame-content-preview:hover:after,
.btn-primary#ai-text-button:hover:after,
.btn-primary#ai-image-button:hover:after,
.btn-primary#save-and-submit-indd-json:hover:after,
.btn-primary#save-indd-json:hover:after,
.btn-primary#ai-text-button-accept:hover:after,
.btn-primary#ai-image-button-accept:hover:after {
    opacity: 1;
}

.btn-primary#online-edit:hover svg,
.btn-primary#frame-content-preview:hover svg,
.btn-primary#ai-text-button:hover svg,
.btn-primary#ai-image-button:hover svg,
.btn-primary#save-and-submit-indd-json:hover svg,
.btn-primary#save-indd-json:hover svg,
.btn-primary#ai-text-button-accept:hover svg,
.btn-primary#ai-image-button-accept:hover svg {
    filter: invert(66%) sepia(60%) saturate(5613%) hue-rotate(118deg) brightness(96%) contrast(82%);
}

.btn-primary#online-edit:before,
.btn-primary#frame-content-preview:before,
.btn-primary#ai-text-button:before,
.btn-primary#ai-image-button:before,
.btn-primary#save-and-submit-indd-json:before,
.btn-primary#save-indd-json:before,
.btn-primary#ai-text-button-accept:before,
.btn-primary#ai-image-button-accept:before {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background: #FFBA32 border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    transition: all 0.3s ease-in-out;
}

.btn-primary#frame-content-preview:before,
.btn-primary#ai-text-button:before,
.btn-primary#ai-image-button:before,
.btn-primary#save-and-submit-indd-json:before {
    background: #5EC5C4;
}

.btn-primary#save-indd-json:before {
    background: #0f727c;
}

.btn-primary#online-edit:hover:before,
.btn-primary#frame-content-preview:hover:before,
.btn-primary#ai-text-button:hover:before,
.btn-primary#ai-image-button:hover:before,
.btn-primary#save-and-submit-indd-json:hover:before,
.btn-primary#save-indd-json:hover:before,
.btn-primary#ai-text-button-accept:hover:before,
.btn-primary#ai-image-button-accept:hover:before {
    background: linear-gradient(90deg, #59BEC4 0%, #8AFFC1 28%, #FFA20A 100%) border-box;
    border: 2px solid transparent;
}

.ai-btn-bg {
    background: linear-gradient(90deg, #59BEC4 0%, #8AFFC1 28%, #FFA20A 100%) border-box;
}

.tmpl-list {
    height: calc(100vh - 40rem);
    overflow-y: auto;
}

.tmpl-select.hidden + div + .tmpl-list {
    height: calc(100vh - 21rem);
}

.tmpl-list .thumbnail:hover + .img-overlay {
    opacity: 1;
}

.tmpl-list .relative:has([src*="spread"]) {
    width: 90%;
}

#largeImage.spread {
    width: auto;
    background: #fff;
}

#largeImage.spread[src*="/assets/img/templates/choose-template"] {
    width: 70%;
}

@media (min-width: 1530px) {
    #largeImage.spread[src*="/assets/img/templates/choose-template"] {
        width: 90%;
    }
}

.issue-covers [class*="cover-"]:has(img[data-template-created="1"]):before,
.issue-covers [class*="cover-"]:has(img[data-page-pilot="1"]):before {
    content: 'Ai';
    position: absolute;
    left: 5px;
    top: 5px;
    height: 18px;
    width: 35px;
    border-radius: 10px;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: 11px;
    background-position: 3px center;
    padding-left: 16px;
    font-size: 11px;
    font-weight: bold;
}

#generated-text-label:after {
    content: 'Ai';
    height: 18px;
    width: 35px;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: 11px;
    background-position: 3px center;
    padding-left: 16px;
    font-size: 11px;
    font-weight: 500;
    color: #079455;
    background-color: #f0fdf4;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none"><path class="cls-1" d="M9.3,2.5l-1.4,3.8c-.2.6-.4.9-.5,1.2-.2.2-.4.4-.6.6-.3.2-.6.3-1.2.5l-3.8,1.4,3.8,1.4c.6.2.9.4,1.2.5.2.2.4.4.6.6.2.3.3.6.5,1.2l1.4,3.8,1.4-3.8c.2-.6.4-.9.5-1.2.2-.2.4-.4.6-.6.3-.2.6-.3,1.2-.5l3.8-1.4-3.8-1.4c-.6-.2-.9-.4-1.2-.5-.2-.2-.4-.4-.6-.6-.2-.3-.3-.6-.5-1.2l-1.4-3.8Z" stroke="rgb(71, 205, 137)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    border: 1px solid #47cd89;
    margin-left: 5px;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
}

.issue-covers [class*="cover-"]:has(img[data-template-created="1"] + div + .context-menu-disabled[style*="left: 0"]):before,
.issue-covers [class*="cover-"]:has(img[data-page-pilot="1"] + div + .context-menu-disabled[style*="left: 0"]):before { 
    right: 5px;
    left: auto;
}

.issue-covers [class*="cover-"]:has(img[data-page-pilot="1"]):before {
    color: #485569;
    background-color: #f9fafb;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none"><path class="cls-1" d="M9.3,2.5l-1.4,3.8c-.2.6-.4.9-.5,1.2-.2.2-.4.4-.6.6-.3.2-.6.3-1.2.5l-3.8,1.4,3.8,1.4c.6.2.9.4,1.2.5.2.2.4.4.6.6.2.3.3.6.5,1.2l1.4,3.8,1.4-3.8c.2-.6.4-.9.5-1.2.2-.2.4-.4.6-.6.3-.2.6-.3,1.2-.5l3.8-1.4-3.8-1.4c-.6-.2-.9-.4-1.2-.5-.2-.2-.4-.4-.6-.6-.2-.3-.3-.6-.5-1.2l-1.4-3.8Z" stroke="rgb(79, 85, 99)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    border: 1px solid #cbd5e1;
}

.issue-covers [class*="cover-"]:has(img[data-template-created="1"]):before,
#generated-text-label:after {
    color: #079455;
    background-color: #f0fdf4;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none"><path class="cls-1" d="M9.3,2.5l-1.4,3.8c-.2.6-.4.9-.5,1.2-.2.2-.4.4-.6.6-.3.2-.6.3-1.2.5l-3.8,1.4,3.8,1.4c.6.2.9.4,1.2.5.2.2.4.4.6.6.2.3.3.6.5,1.2l1.4,3.8,1.4-3.8c.2-.6.4-.9.5-1.2.2-.2.4-.4.6-.6.3-.2.6-.3,1.2-.5l3.8-1.4-3.8-1.4c-.6-.2-.9-.4-1.2-.5-.2-.2-.4-.4-.6-.6-.2-.3-.3-.6-.5-1.2l-1.4-3.8Z" stroke="rgb(71, 205, 137)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    border: 1px solid #47cd89;
}

.col-7 .issue-covers [class*="cover-"]:has(img[data-page-pilot="1"]):before {
    font-size: 8px;
    height: 14px;
    width: 31px;
    padding-left: 15px;
}

.col-8 .issue-covers [class*="cover-"]:has(img[data-page-pilot="1"]):before,
.col-9 .issue-covers [class*="cover-"]:has(img[data-page-pilot="1"]):before,
.col-10 .issue-covers [class*="cover-"]:has(img[data-page-pilot="1"]):before {
    font-size: 7px;
    height: 13px;
    width: 27px;
    padding-left: 13px;
    background-size: 9px;
}

.col-8 .status-lights,
.col-9 .status-lights,
.col-10 .status-lights {
    margin-bottom: 0;
}

.col-8 .status-lights .border-4,
.col-9 .status-lights .border-4,
.col-10 .status-lights .border-4 {
    border-width: 2px;
    height: 7px;
}

#browse-templates-list .modal-dialog-box {
    overflow: unset;
    width: 95%;
}

#browse-templates-list .modal-dialog-box .object-cover {
    height: 155px;
}

#images-container img {
    width: 50%;
    height: auto;
    object-fit: cover;
    border: 8px solid #fff;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

#images-container img:hover {
    border: 8px solid #47CD89;
}

/* custom choose file button */

input[type="file"]::file-selector-button {
    background: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="39" height="39" rx="7.5" fill="white"/><rect x="0.5" y="0.5" width="39" height="39" rx="7.5" stroke="%23EAECF0"/><path d="M16.6665 23.3333L19.9998 20M19.9998 20L23.3332 23.3333M19.9998 20V27.5M26.6665 23.9524C27.6844 23.1117 28.3332 21.8399 28.3332 20.4167C28.3332 17.8854 26.2811 15.8333 23.7498 15.8333C23.5677 15.8333 23.3974 15.7383 23.3049 15.5814C22.2182 13.7374 20.2119 12.5 17.9165 12.5C14.4647 12.5 11.6665 15.2982 11.6665 18.75C11.6665 20.4718 12.3627 22.0309 13.489 23.1613" stroke="%23475467" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    color: transparent;
    cursor: pointer;
    margin-right: 1em;
    width: 40px;
    height: 40px;
}

.modal-dialog input[type="file"] {
    background: url("../img/icons/icon-pdf-file-mejG1S5.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 90px;
    cursor: pointer;
    border-radius: 0.375rem;;
    border: 1px solid #d1d5dc;
    padding-inline: calc(var(--spacing)* 4);
    padding-block: calc(var(--spacing)* 2.5);
}

/* clipboard */

#palette.show {
    right: 0;
}

#palette {
    width: 15vw;
    height: calc(100vh - 4rem);
    position: fixed;
    right: -15vw;
    bottom: 0;
    overflow: hidden;
    background: white; 
    box-shadow: 0px 32px 64px -12px rgba(15.96, 23.62, 40.04, 0.14);
    z-index: 8;
}

#palette header {
    background: white; 
    outline: 1px #EAECF0 solid;
    height: 4rem;
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
}

.palette-colors {
    overflow: auto;
    height: calc(100vh - 9.5rem);
}

.palette-colors .palette-folio,
.palette-colors .palette-folio5 {
    width: 40%;
    font-size: 11px;
    position: relative;
}

.palette-colors .palette-folio label, 
.palette-colors .palette-folio5 label, 
.palette-colors .palette-folio a {
    font-size: 12px;
    line-height: 15px;
    margin-top: 5px;
    font-weight: normal;
    color: #475467;
    word-break: break-all;
}

.palette-colors .palette-folio .palette-item,
.palette-colors .palette-folio5 .palette-item {
    height: calc((15vw/2) * 2 - 6.5vw);
    position: relative;
    border: 1px solid #D0D5DD;
    background: #f9fafb;
    width: 100%;
    object-fit: cover;
}

.palette-colors .palette-folio .palette-item[src*="/assets/img/placeholder"],
.palette-colors .palette-folio5 .palette-item[src*="/assets/img/placeholder"] {
    object-fit: contain;
}

.palette-colors.dragandrop img,
.palette-colors img.palette-folio {
    height: 120px;
    position: relative;
    border: 1px solid #D0D5DD;
    background: #f9fafb;
    object-fit: cover;
}

.palette-colors.dragandrop img {
    width: 40%;
    height: calc((15vw/2) * 2 - 7.5vw);
}

.palette-colors.dragandrop img.spread {
    width: calc(80% + 0.875rem);
}

.palette-colors .palette-folio img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.palette-colors .palette-item .status-name-img {
    position: absolute;
    bottom: 0;
    height: 24%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 100%;
    font-size: 10px;
    line-height: normal;
    font-weight: 700;
}

.palette-colors .palette-item[style*="background-color: #FFE5C7"] {
    border: 1px solid #FFA20A;
}

.palette-colors .palette-item[style*="background-color: #C0E8EB"] {
    border: 1px solid #59BEC4;
}

.project-issues:has(.cover-right.spread,.cover-left.spread) > div {
    column-gap: 0;
}

.clipboard-template {
    width: 100%;
    height: 3rem;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    background: #F9FAFB; 
    border-top: 1px #D0D5DD dashed;
    padding: 0 0.75rem;
}

.clipboard-template .spread-ad {
    background: #FFE5C7; 
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06); 
    border: 1px #FFA20A solid;
    height: 25px;
    width: 40px;
}

.clipboard-template .ad {
    height: 25px;
    width: 20px;
    background: #FFE5C7; 
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06); 
    border: 1px #FFA20A solid;
}

.clipboard-template .spread-ed {
    background: #C0E8EB; 
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06); 
    border: 1px #59BEC4 solid;
    height: 25px;
    width: 40px;
}

.clipboard-template .ed {
    background: #C0E8EB; 
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06); 
    border: 1px #59BEC4 solid;
    height: 25px;
    width: 20px;
}

.clipboard-popup {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 45px;
    border-radius: 0.7rem;
    right: 20px;
    padding: 1rem;
    width: 80%;
    color: #4b5563;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: 0px 16px 42px rgba(15.96, 23.62, 40.04, 0.20);
    background: #fff;    
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.clipboard-info:hover + .clipboard-popup {
    visibility: visible;
    opacity: 1;
}

.palette-colors .palette-reference {
    font-size: 9px;
    font-weight: 700;
    display: block;
    width: 100%;
}

#sort-asc-covers,
#sort-asc-folios {
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 4V20M17 20L13 16M17 20L21 16M7 20V4M7 4L3 8M7 4L11 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    height: 15px;
    width: 15px;
}

#sort-asc-covers.sort-desc,
#sort-asc-folios.sort-desc {
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 4V20M7 20L3 16M7 20L11 16M17 20V4M17 4L13 8M17 4L21 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* colorpicking palette */

.palette {
    margin-top: 10px;
    width: 274px;
    border: none;
    height: auto;
    background: #f3f4f6;
    border-radius: 0.375rem;
    display: none;
    padding: 5px;
    position: absolute;
    z-index: 1000;
    border-radius: 0.375rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); 
    --tw-ring-opacity: 0.05;
    --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
}

/* flatplan view - bottom navigation */

.btn-open-submenu {
    position: relative;
}

.opened-submenu {
    /*max-height: calc( 100vh - 10rem);*/
}

.opened-submenu a {
    transition: all .25s ease-in-out;
}

.opened-submenu ul li:hover > ul,
.open-hover-menu:hover > ul {
    display: block;
}

.opened-submenu li {
    position: relative;
}

.bottom-tools {
    position: fixed;
    bottom: 1.3rem;
    right: 2vw;
    z-index: 11;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    padding: 0 0 0 10px;
    border-radius: 17px 32px 32px 17px;
    pointer-events: none;
}

.bottom-tools:has(.issues-navigation-bottom.show) {
    background: #fff; 
    box-shadow: 0px 16px 42px rgba(15.96, 23.62, 40.04, 0.20);
    pointer-events: auto;
}

#show-bottom-nav {
    border: 0;
    height: 60px;
    width: 60px;
    display: flex;
    background: #202939; 
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    z-index: 12;
    pointer-events: auto;
}

.issues-navigation-bottom {
    background: #ffffff; 
    gap: 0.5rem;
    z-index: 2;
    display: flex;   
}

.issues-navigation-bottom:not(.bottom-nav) {
    transition: all .25s ease-in-out;
    margin-right: -10px;
    visibility: hidden;
    opacity: 0;
}

.issues-navigation-bottom.show {
    opacity: 1;
    visibility: visible;
    margin-right: 0;
}

.issues-navigation-bottom.show + #show-bottom-nav {
    color: #98A2B3;
    background: #fff;
}

.issues-navigation-bottom button,
.issues-navigation-bottom a:not(.option *) {
    background: #F8FAFC;
    column-gap: 0.375rem;
    display: flex;
    align-items: center;
    border: 1px #E3E8EF solid;
    box-shadow: none;
    white-space: nowrap;
}

.issues-navigation-bottom button:hover {
    background: #f1f5f9;
}

.bottom-list {
  position: relative;
}

.bottom-list button svg {
  pointer-events: none;
}

.bottom-list-items {
    display: none;
    min-width: 300px;
    right: 0;
    bottom: 50px;
    background: #fff;    
    position: absolute;
    z-index: 10;
    height: auto;
    max-height: 350px;
    overflow: auto;
    border-radius: 0.375rem;
}

.bottom-list-items header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #9ca3af;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0 1rem;
    border-bottom: 1px solid #EAECF0;
    height: 45px;
    background: #fff;
    position: sticky;
    top: 0;
    width: 292px;
    border-radius: 0.375rem 0.375rem 0 0;
}

.bottom-list-items ul {
    padding: 0 0.25rem;
}

.bottom-list-items li {
    color: #344054;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    margin: 4px 0;
    display: flex;
    align-items: center;
}

.bottom-list-items li:hover,
.bottom-list-items li.active-status,
.bottom-list-items li.selected {
    background: #f9fafb;
}

.bottom-list-items li span {
    margin-right: 0.5rem;
    border-radius: 50%;
    display: block;
    height: 10px;
    width: 10px;
}

.close-bottom-list {
    cursor: pointer;
}

div.archive-booking {
    position: absolute;
    top: -3px;
    right: -3px;
    background-color: #4B5565;
    line-height: 12px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    font-size: 28px;
    text-align: center;
    color: #ffffff;
    display: block;
}

.palette-colors a.unarchive-booking {
    background-color: #4B5565;
    height: 14px;
    min-width: 14px;
    width: 15px;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    line-height: 18px;
    margin-top: 4px;
    color: #fff;
    border-radius: 50%;
    min-height: 14px;
    text-align: center;
}

.unused {
    background: #FEF3F2 !important;
    border: 1px solid #FECDCA !important;
}

.unused td:nth-child(2) {
    color: #D92D20;
}

td span.feature-name {
    display: inline-block;
    border-radius: 0.575rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    line-height: 1rem;
}

.status-visibility-preflight_warning a.btn-secondary {
    pointer-events: all !important;
}

.status-visibility-preflight_warning a {
    pointer-events: none !important;
}

.status-visibility-preflight_warning a.preflight-warning {
    opacity: 1 !important;
    pointer-events: all !important;
}

.btn-nbrown {
    color: orange !important;
}

.ultima-pages {
    color: #fff !important;
    color: #00b9b6 !important;
}

.hello-print {
    color: #af0909 !important;
}

/* modals */

input.lock-page {
    display: none;
}

.modal-dialog {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 12;
    display: none;
    pointer-events: auto;
}

.modal-dialog.show {
    display: block;
}

.modal-dialog-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16,24,40,0.2);
    z-index: 11;
}

.modal-dialog-box {
    background: #fff;
    width: 600px;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    box-shadow: 0 0 58px rgba(0,0,0,0.4);
    padding: 2rem;
    max-height: 90vh;
}

#popup-search-textfiles .modal-dialog-box {
    width: 1000px !important;
}

.modal-dialog-box header {
    color: #101828;
    font-size: 18px;
    font-weight: 600;
}

.modal-dialog-box p {
    color: #475467;
    font-size: 14px;
    font-weight: normal;
}

.modal-dialog-box label {
    font-size: 12px;
}

.modal-dialog-box p.send-email-error {
    font-size: 11px;
}

.modal-dialog:not(#frame-editor) .modal-dialog-box > div:has(.modal-dialog-close) + * {
    overflow: auto;
    padding: 3px;
}

.modal-dialog-close {
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    cursor: pointer;
    filter: invert(45%) sepia(14%) saturate(549%) hue-rotate(183deg) brightness(93%) contrast(90%);
}

#popup-info .modal-dialog-box {
    width: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #475467;
    background: #fff url("../img/icons/icon-info-R9eZv0z.svg");
    background-repeat: no-repeat;
    background-position: left top;
}

#popup-email .modal-dialog-box,
#popup-email-proof .modal-dialog-box,
#popup-studio-email .modal-dialog-box {
    width: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #475467;
    background: #fff url("../img/icons/icon-email-q-9YTrY.svg");
    background-repeat: no-repeat;
    background-position: left top;
}

#send-review .modal-dialog-box {
    width: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #475467;
    background: #fff url("../img/icons/icon-send-d7X2BPW.svg");
    background-repeat: no-repeat;
    background-position: left top;
}

#dialog-history-view .modal-dialog-box,
#dialog-history .modal-dialog-box {
    width: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #475467;
    background: #fff url("../img/icons/icon-history-QHnWUUz.svg");
    background-repeat: no-repeat;
    background-position: left top;
}

#popup-info .modal-dialog-box header,
#popup-email .modal-dialog-box header,
#popup-email-proof .modal-dialog-box header,
#send-review .modal-dialog-box header,
#dialog-history-view .modal-dialog-box header,
#dialog-history .modal-dialog-box header,
#popup-studio-email header {
    padding: 5px 3.5rem;
}

.loading-progress {
    text-align: center;
    color: #000;
    font-style: italic;
}

.loader {
    width: 25px;
    height: 25px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.loader-bounce1, .loader-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #349FA6;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.loader-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%,to{
        -webkit-transform:scale(0)
    }
    50%{
        -webkit-transform:scale(1)
    }
}

@keyframes sk-bounce {
    0%,to{
        transform:scale(0);
        -webkit-transform:scale(0)
    }
    50%{
        transform:scale(1);
        -webkit-transform:scale(1)
    }
}

.upload-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.upload-alert {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    vertical-align: center;
}

#add-category-popu,
.image-not-required, 
.replace,
.rename,
.hide-container,
.hide-element,
#nbg-dm-layout-container {
    display: none;
}

#image-popout {
    display: none;
    margin: auto;
    position: fixed;
    padding: 15px 15px 15px 15px;
    left: 150px;
    right: 250px;
    text-align: center;
    width: auto;
    top: 400px;
    z-index: 2;
}

.img-overlay {
    opacity: 0;
}

#addEmailBlock {
    display: none;
}

#modal-filter-dates ul li {
    list-style: none;
    cursor: pointer;
    padding: 5px;
}

#modal-filter-dates ul li:hover {
    background-color: #dedede;
}

.spinner {
    margin: 0 0 0 10px;
    text-align: center;
    display: inline;
}

.spinner > div {
    width: 10px;
    height: 10px;
    background-color: #b6b6b6;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

#remove-review-address-container p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.images-popup {
    gap: 3%;
}

.images-popup div[class^="file-"] {
    width: 31.33%;
    margin-bottom: 2rem;
}

.file-accepted .slider.round {
    background-color: #4B5565;
}

.file-accepted .slider.round:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
}

.file-accepted .display-switch:before,
.file-accepted.display-switch:before {
    content: 'Selected';
    position: absolute;
    left: 115%;
    font-size: 0.9rem;
    color: #4c5565;
    white-space: nowrap;
}

.file-rejected .display-switch:before,
.file-rejected.display-switch:before {
    content: 'Un-selected';
    position: absolute;
    left: 115%;
    font-size: 0.9rem;
    color: #4c5565;
    white-space: nowrap;
}

#overlay-image-container .file-rejected img {
    opacity: 0.6;
}

#overlay-description-container {
    display: block;
}

#popup-filter-story-list ul li.active-status, 
#popup-filter-story-list ul li:hover {
    background: #D0D5DD;
}

/* statuses colors */

span.emerald:before,
span.yellow:before,
span.red:before,
span.gray:before {
    border-radius: 50%;
    content: '';
    height: 6px;
    width: 6px;
    margin-right: 0.25rem;
}

span.emerald:before {
    background: #10b981;
}

span.yellow:before {
    background: #eab308;
}

span.red:before {
    background: #ef4444;
}

span.gray:before {
    background: #667085;
}

/* alerts */

.alert-danger {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity));
    padding: 1rem;
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity));
    font-weight: 500;
    border-radius: 0.375rem;
}

.required:after {
    content: '*';
    color: #F97066;
    font-size: 14px;
    font-family: Inter;
    font-weight: 500;
    line-height: 20px;
    word-wrap: break-word
}

.filter-highlight,
.filter-highlight-classification,
.filter-highlight-story {
    display:none
}

.filter-highlight select {
    background: #F04438;
    color: #fff;
}

div.dtsp-panesContainer {
    display: none;
}

div.dtsp-narrow {
    flex-direction: row !important;
}

.dtsp-nameButton, 
.dtsp-countButton, 
.dtsp-searchIcon, 
.dtsp-dull {
    display: none !important;
}

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: #f3f4f6 !important;
}

div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dtsp-selected {
    border: 2px solid #8bffc1 !important;
    border-radius: 4px !important;
}

table th.actions,
table td.actions {
    position: sticky;
    right: 0;
    background: #F9FAFB;
}

table th.actions,
table td.actions {
    display: table-cell;
}

table th:has(+.actions) {
    padding-right: 1.2rem;
}

table th:has(+.actions) .sort-btn {
    right: 5px;
}

table th.actions:before,
table td.actions:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    box-shadow: -2px 0 3px 0px rgba(0, 0, 0, 0.1);
}

/* reports nbrown to remove */

.background-orange {
    background-color: #E7D4A6 !important;
}

.background-gray {
    background-color: #E7A6E5 !important;
}

.background-green {
    background-color: #A6E7AA !important;
}

.background-black {
    background-color: #A1A1A1 !important;
    color: #ffffff;
}

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
}

body:has(.modal-dialog.show) > #container:before,
body:has(.modal-dialog[style*="display: block"]) > #container:before {
    content: '';
    pointer-events: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 12;
}

img.key-line {
    border: #1b1b1b 2px solid !important;
}

/* flatplan views */

/* columns columns slider */

.change-columns {
    width: 190px;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 20px;
    background: #d0d5dd;
    outline: none;
    border: 0;
    padding: 0 !important;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(208, 213, 221, 1);
}

#columns {
    color: #4B5565;
    pointer-events: none;
    display: block;
}

.folio-color {
    padding: 0 0.2rem;
    margin: 0 0.2rem;
}

.section-flatplan .cover-left, 
.section-flatplan .cover-right,
.section-status .cover-left img, 
.section-status .cover-right img,
.section-view .cover-left, 
.section-view .cover-right {
    height: calc( 100vw/5 - 7.7vw) !important;
}

.section-flatplan .col-6 .cover-left, 
.section-flatplan .col-6 .cover-right,
.section-status .col-6 .cover-left img,
.section-status .col-6 .cover-right img,
.section-view .col-6 .cover-left,
.section-view .col-6 .cover-right {
    height: calc( 100vw/6 - 6.7vw) !important;
}

.section-flatplan .col-7 .cover-left, 
.section-flatplan .col-7 .cover-right,
.section-status .col-7 .cover-left img,
.section-status .col-7 .cover-right img,
.section-view .col-7 .cover-left,
.section-view .col-7 .cover-right {
    height: calc( 100vw/7 - 5.9vw) !important;
}

.section-flatplan .col-8 .cover-left, 
.section-flatplan .col-8 .cover-right,
.section-status .col-8 .cover-left img,
.section-status .col-8 .cover-right img,
.section-view .col-8 .cover-left,
.section-view .col-8 .cover-right {
    height: calc( 100vw/8 - 4.7vw) !important;
}

.section-flatplan .col-9 .cover-left, 
.section-flatplan .col-9 .cover-right,
.section-status .col-9 .cover-left img,
.section-status .col-9 .cover-right img,
.section-view .col-9 .cover-left,
.section-view .col-9 .cover-right {
    height: calc( 100vw/9 - 4.1vw) !important;
}

.section-flatplan .col-10 .cover-left, 
.section-flatplan .col-10 .cover-right,
.section-status .col-10 .cover-left img,
.section-status .col-10 .cover-right img,
.section-view .col-10 .cover-left,
.section-view .col-10 .cover-right {
    height: calc( 100vw/10 - 3.7vw) !important;
}

.section-flatplan:has(.project-palette.show) .cover-left, 
.section-flatplan:has(.project-palette.show) .cover-right,
.section-status:has(.project-palette.show) .cover-left img,
.section-status:has(.project-palette.show) .cover-right img,
.section-view:has(.project-palette.show) .cover-left ,
.section-view:has(.project-palette.show) .cover-right {
    height: calc( var(--sectionwidth)/5 - 6.7vw) !important;
}

.section-flatplan:has(.project-palette.show) .col-6 .cover-left, 
.section-flatplan:has(.project-palette.show) .col-6 .cover-right,
.section-status:has(.project-palette.show) .col-6 .cover-left img,
.section-status:has(.project-palette.show) .col-6 .cover-right img,
.section-view:has(.project-palette.show) .col-6 .cover-left,
.section-view:has(.project-palette.show) .col-6 .cover-right {
    height: calc( var(--sectionwidth)/6 - 5.7vw) !important;
}

.section-flatplan:has(.project-palette.show) .col-7 .cover-left, 
.section-flatplan:has(.project-palette.show) .col-7 .cover-right,
.section-status:has(.project-palette.show) .col-7 .cover-left img,
.section-status:has(.project-palette.show) .col-7 .cover-right img,
.section-view:has(.project-palette.show) .col-7 .cover-left ,
.section-view:has(.project-palette.show) .col-7 .cover-right {
    height: calc( var(--sectionwidth)/7 - 5.2vw) !important;
}

.section-flatplan:has(.project-palette.show) .col-8 .cover-left, 
.section-flatplan:has(.project-palette.show) .col-8 .cover-right,
.section-status:has(.project-palette.show) .col-8 .cover-left img,
.section-status:has(.project-palette.show) .col-8 .cover-right img,
.section-view:has(.project-palette.show) .col-8 .cover-left,
.section-view:has(.project-palette.show) .col-8 .cover-right {
    height: calc( var(--sectionwidth)/8 - 4vw) !important;
}

.section-flatplan:has(.project-palette.show) .col-9 .cover-left, 
.section-flatplan:has(.project-palette.show) .col-9 .cover-right,
.section-status:has(.project-palette.show) .col-9 .cover-left img,
.section-status:has(.project-palette.show) .col-9 .cover-right img,
.section-view:has(.project-palette.show) .col-9 .cover-left,
.section-view:has(.project-palette.show) .col-9 .cover-right {
    height: calc( var(--sectionwidth)/9 - 3.6vw) !important;
}

.section-flatplan:has(.project-palette.show) .col-10 .cover-left, 
.section-flatplan:has(.project-palette.show) .col-10 .cover-right,
.section-status:has(.project-palette.show) .col-10 .cover-left img,
.section-status:has(.project-palette.show) .col-10 .cover-right img,
.section-view:has(.project-palette.show) .col-10 .cover-left,
.section-view:has(.project-palette.show) .col-10 .cover-right {
    height: calc( var(--sectionwidth)/10 - 3.3vw) !important; 
}

.col-item {
    padding: 1rem 0.5rem;
}

.col-item.col-7,
.col-item.col-8,
.col-item.col-9,
.col-item.col-10 {
    padding: 1rem 0.3rem;
}

@media (min-width: 1536px) {
    .col-item {
        padding: 1rem 0.7rem;
    }

    .col-item.col-7,
    .col-item.col-8,
    .col-item.col-9,
    .col-item.col-10 {
        padding: 1rem 0.5rem;
    }

    .col-item.col-10 {
        padding: 1rem 0.5rem;
    }
}

@media (min-width: 2560px) {
    .col-item {
        padding: 1rem 0.8rem;
    }

    .col-item.col-7,
    .col-item.col-8,
    .col-item.col-9,
    .col-item.col-10 {
        padding: 1rem 0.7rem;
    }

    .col-item.col-10 {
        padding: 1rem 0.5rem;
    }
}

.col-5,
.col-item {
    width: 20%;
}

.col-6 {
    width: 16.6666666667%;
}

.col-7 {
    width: 14.2857142857%;
}

.col-8 {
    width: 12.5%;
}

.col-9 {
    width: 11.1111111111%;
}

.col-10 {
    width: 10%;
}

.project-issues > div {
    display: flex;
    justify-content: space-between;
    column-gap: 1.4%;
    align-items: flex-end;
}

.project-issues .issue-name > div {
    width: 49.3%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.thumbnail-view .project-issues .issue-name > div {
    width: 50%;
}

.project-issues .issue-name > div > div {
    height: 22px;
    max-height: 22px;
    line-height: 22px;
    overflow: hidden;
}

.col-8 .project-issues .issue-name > div > div,
.col-9 .project-issues .issue-name > div > div {
    height: 20px;
    max-height: 20px;
    line-height: 20px;
}

.col-10 .project-issues .issue-name > div > div {
    height: 15px;
    max-height: 15px;
    line-height: 15px;
}

.project-issues .issue-name .page-reference {
    height: 25px;
    max-height: 25px;
    min-height: 25px;
    line-height: 17px;
    font-weight: 400;
}

.section-flatplan .page-reference {
    padding-top: 1.2%;
}

.col-8 .project-issues .issue-name .page-reference,
.col-9 .project-issues .issue-name .page-reference {
    min-height: 20px;
    line-height: 12px;
}

.col-10 .project-issues .issue-name .page-reference {
    min-height: 15px;
    line-height: 12px;
}

@media (min-width: 1536px) { 
    .project-issues .issue-name > div > div {
        height: 27px;
        max-height: 27px;
        line-height: 27px;
    }

    .col-8 .project-issues .issue-name > div > div,
    .col-9 .project-issues .issue-name > div > div {
        height: 25px;
        max-height: 25px;
        line-height: 25px;
    }

    .col-10 .project-issues .issue-name > div > div {
        height: 21px;
        max-height: 21px;
        line-height: 21px;
    }

    .project-issues .issue-name .page-reference {
        min-height: 27px;
        line-height: 17px;
    }

    .col-8 .project-issues .issue-name .page-reference,
    .col-9 .project-issues .issue-name .page-reference {
        min-height: 22px;
        line-height: 17px;
    }

    .col-10 .project-issues .issue-name .page-reference {
        min-height: 20px;
        line-height: 14px;
    }
}

@media (min-width: 2560px) { 
    .col-8 .project-issues .issue-name > div > div,
    .col-9 .project-issues .issue-name > div > div {
        height: 25px;
        max-height: 25px;
        line-height: 25px;
    }

    .col-10 .project-issues .issue-name > div > div {
        height: 21px;
        max-height: 21px;
        line-height: 21px;
    }

    .col-8 .project-issues .issue-name .page-reference,
    .col-9 .project-issues .issue-name .page-reference {
        min-height: 22px;
        line-height: 18px;
    }

    .col-10 .project-issues .issue-name .page-reference {
        min-height: 25px;
        line-height: 18px;
    }
}

.project-issues .cover-left, 
.project-issues .cover-right {
    padding: 0;
    background-color: #fff;
    max-height: 100%;
    overflow: visible;
    position: relative;
    width: 49.3%;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.project-issues .cover-left.spread {
    width: 100%;
}

.project-issues .issue-mark > div,
.project-issues .issue-page > div,
.project-issues .issue-status > span,
.project-issues .issue-version > div,
.project-issues .twist-version > div,
.project-issues .issue-date > div {
    width: 49.3%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 22px;
    max-height: 22px;
    overflow: hidden;
}

.project-issues .issue-version > div,
.project-issues .twist-version > div {
    gap: 0.2rem;
}

.project-issues .issue-status > span {
    height: auto !important;
    max-height: unset !important;
    line-height: normal !important;
    margin-bottom: 0.2rem;
}

.project-issues .issue-mark input {
    border-radius: 50%;
}

.project-issues .issue-date > div {
    height: 50px;
    max-height: 50px;
}

.project-issues [class^="taken"] {
    overflow: hidden;
    word-break: break-all;
}

.project-issues .issue-page-version,
.issue-page-taken,
.issue-page-taken-right {
    color: #fff;
    background: #001619;
    border-radius: 0.2rem;
    padding: 0 0.25rem;
    white-space: nowrap;
}

.project-issues .twist-version .issue-page-version {
    color: #000;
    background: #fff;
}

.project-issues .issue-name,
.section-flatplan .page-name,
.project-issues .issue-page-number,
.project-issues .issue-page-version,
.project-issues .issue-date,
.project-issues .page-reference,
.project-issues .issue-status,
.project-issues .status-name-img,
.project-issues .issue-page-taken,
.project-issues .issue-page-taken-right,
.page-type:not(td.page-type),
.page-type-left,
.page-type-right,
.project-issues [class^="taken"] {
    font-size: 0.7rem;
    font-weight: 700;
}

.project-issues .cover-left img, 
.project-issues .cover-right img {
    width: 100%;
    object-fit: fill;
}

.section-view .project-issues .cover-left img, 
.section-view .project-issues .cover-right img {
    height: 100%;
    width: 100%;
}

.section-status .project-issues .cover-left img, 
.section-status .project-issues .cover-right img,
.project-issues div[class*="cover-"] img[src*="/assets/img/a_to_come"],
.project-issues div[class*="cover-"] img[src*="/assets/img/notext_a_to_come"],
.project-issues div[class*="cover-"] img[src*="/assets/img/editorial_to_come"],
.project-issues div[class*="cover-"] img[src*="/assets/img/notext_editorial_to_come"],
.project-issues div[class*="cover-"] img[src*="/assets/img/empty_booking"] {
    object-fit: cover;
}

/* after changing columns */
.col-7 .project-issues .issue-name,
.section-flatplan .col-7 .page-name,
.col-7 .project-issues .issue-page-number, 
.col-7 .project-issues .issue-page-version, 
.col-7 .project-issues .issue-date, 
.col-7 .project-issues .page-reference,
.col-7 .project-issues .issue-status, 
.col-7 .project-issues .status-name-img,
.col-7 .project-issues .issue-page-taken, 
.col-7 .project-issues .issue-page-taken-right, 
.col-7 .page-type:not(td.page-type), 
.col-7 .page-type-left, 
.col-7 .page-type-right,
.col-7 .project-issues [class^="taken"] {
    font-size: 0.6rem;
}

.col-8 .project-issues .issue-name,
.section-flatplan .col-8 .page-name,
.col-8 .project-issues .issue-page-number, 
.col-8 .project-issues .issue-page-version, 
.col-8 .project-issues .issue-date, 
.col-8 .project-issues .page-reference,
.col-8 .project-issues .issue-status, 
.col-8 .project-issues .status-name-img,
.col-8 .project-issues .issue-page-taken, 
.col-8 .project-issues .issue-page-taken-right, 
.col-8 .page-type:not(td.page-type), 
.col-8 .page-type-left, 
.col-8 .page-type-right,
.col-8 .project-issues [class^="taken"] {
    font-size: 0.5rem;
}

.col-9 .project-issues .issue-name,
.section-flatplan .col-9 .page-name,
.col-9 .project-issues .issue-page-number, 
.col-9 .project-issues .issue-page-version, 
.col-9 .project-issues .issue-date, 
.col-9 .project-issues .page-reference,
.col-9 .project-issues .issue-status, 
.col-9 .project-issues .status-name-img,
.col-9 .project-issues .issue-page-taken, 
.col-9 .project-issues .issue-page-taken-right, 
.col-9 .page-type:not(td.page-type), 
.col-9 .page-type-left, 
.col-9 .page-type-right,
.col-9 .project-issues [class^="taken"] {
    font-size: 0.45rem;
}

.col-8 .project-issues .issue-mark > div, 
.col-8 .project-issues .issue-page > div, 
.col-8 .project-issues .issue-status > span, 
.col-8 .project-issues .issue-version > div, 
.col-8 .project-issues .twist-version > div, 
.col-8 .project-issues .issue-date > div,
.col-9 .project-issues .issue-mark > div, 
.col-9 .project-issues .issue-page > div, 
.col-9 .project-issues .issue-status > span, 
.col-9 .project-issues .issue-version > div, 
.col-9 .project-issues .twist-version > div, 
.col-9 .project-issues .issue-date > div {
    height: 17px;
    max-height: 17px;
}

.col-10 .project-issues .issue-name,
.section-flatplan .col-10 .page-name,
.col-10 .project-issues .issue-page-number, 
.col-10 .project-issues .issue-page-version, 
.col-10 .project-issues .issue-date, 
.col-10 .project-issues .page-reference,
.col-10 .project-issues .issue-status, 
.col-10 .project-issues .status-name-img,
.col-10 .project-issues .issue-page-taken, 
.col-10 .project-issues .issue-page-taken-right, 
.col-10 .page-type:not(td.page-type), 
.col-10 .page-type-left, 
.col-10 .page-type-right,
.col-10 .project-issues [class^="taken"] {
    font-size: 0.4rem;
}

.col-10 .project-issues .issue-mark > div, 
.col-10 .project-issues .issue-page > div, 
.col-10 .project-issues .issue-status > span, 
.col-10 .project-issues .issue-version > div, 
.col-10 .project-issues .twist-version > div, 
.col-10 .project-issues .issue-date > div {
    height: 16px;
    max-height: 16px;
}

@media (min-width: 1536px) {
    .project-issues .issue-name,
    .section-flatplan .page-name,
    .project-issues .issue-page-number,
    .project-issues .issue-page-version,
    .project-issues .issue-date,
    .project-issues .page-reference,
    .project-issues .issue-status,
    .project-issues .status-name-img,
    .project-issues .issue-page-taken,
    .project-issues .issue-page-taken-right,
    .page-type:not(td.page-type),
    .page-type-left,
    .page-type-right,
    .project-issues [class^="taken"] {
        font-size: 0.9rem;
    }

    .col-7 .project-issues .issue-name,
    .section-flatplan .col-7 .page-name,
    .col-7 .project-issues .issue-page-number, 
    .col-7 .project-issues .issue-page-version, 
    .col-7 .project-issues .issue-date,
    .col-7 .project-issues .page-reference, 
    .col-7 .project-issues .issue-status, 
    .col-7 .project-issues .status-name-img,
    .col-7 .project-issues .issue-page-taken, 
    .col-7 .project-issues .issue-page-taken-right, 
    .col-7 .page-type:not(td.page-type), 
    .col-7 .page-type-left, 
    .col-7 .page-type-right,
    .col-7 .project-issues [class^="taken"] {
        font-size: 0.8rem;
    }

    .col-8 .project-issues .issue-name,
    .section-flatplan .col-8 .page-name,
    .col-8 .project-issues .issue-page-number, 
    .col-8 .project-issues .issue-page-version, 
    .col-8 .project-issues .issue-date,
    .col-8 .project-issues .page-reference, 
    .col-8 .project-issues .issue-status, 
    .col-8 .project-issues .status-name-img,
    .col-8 .project-issues .issue-page-taken, 
    .col-8 .project-issues .issue-page-taken-right, 
    .col-8 .page-type:not(td.page-type), 
    .col-8 .page-type-left, 
    .col-8 .page-type-right,
    .col-8 .project-issues [class^="taken"] {
        font-size: 0.7rem;
    }

    .col-9 .project-issues .issue-name,
    .section-flatplan .col-9 .page-name,
    .col-9 .project-issues .issue-page-number, 
    .col-9 .project-issues .issue-page-version, 
    .col-9 .project-issues .issue-date, 
    .col-9 .project-issues .page-reference,
    .col-9 .project-issues .issue-status, 
    .col-9 .project-issues .status-name-img,
    .col-9 .project-issues .issue-page-taken, 
    .col-9 .project-issues .issue-page-taken-right, 
    .col-9 .page-type:not(td.page-type), 
    .col-9 .page-type-left, 
    .col-9 .page-type-right,
    .col-9 .project-issues [class^="taken"] {
        font-size: 0.6rem;
    }

    .col-10 .project-issues .issue-name,
    .section-flatplan .col-10 .page-name,
    .col-10 .project-issues .issue-page-number, 
    .col-10 .project-issues .issue-page-version, 
    .col-10 .project-issues .issue-date, 
    .col-10 .project-issues .page-reference,
    .col-10 .project-issues .issue-status, 
    .col-10 .project-issues .status-name-img,
    .col-10 .project-issues .issue-page-taken, 
    .col-10 .project-issues .issue-page-taken-right, 
    .col-10 .page-type:not(td.page-type), 
    .col-10 .page-type-left, 
    .col-10 .page-type-right,
    .col-10 .project-issues [class^="taken"] {
        font-size: 0.5rem;
    }
}

@media (min-width: 2560px) {
    .project-issues .issue-name,
    .section-flatplan .page-name,
    .project-issues .issue-page-number,
    .project-issues .issue-page-version,
    .project-issues .issue-date,
    .project-issues .page-reference,
    .project-issues .issue-status,
    .project-issues .status-name-img,
    .project-issues .issue-page-taken,
    .project-issues .issue-page-taken-right,
    .page-type:not(td.page-type),
    .page-type-left,
    .page-type-right,
    .project-issues [class^="taken"]
    .col-7 .project-issues .issue-name,
    .section-flatplan .col-7 .page-name,
    .col-7 .project-issues .issue-page-number, 
    .col-7 .project-issues .issue-page-version, 
    .col-7 .project-issues .issue-date, 
    .col-7 .project-issues .page-reference,
    .col-7 .project-issues .issue-status, 
    .col-7 .project-issues .status-name-img,
    .col-7 .project-issues .issue-page-taken, 
    .col-7 .project-issues .issue-page-taken-right, 
    .col-7 .page-type:not(td.page-type), 
    .col-7 .page-type-left, 
    .col-7 .page-type-right,
    .col-7 .project-issues [class^="taken"] {
        font-size: 1rem;
    }

    .col-8 .project-issues .issue-name,
    .section-flatplan .col-8 .page-name,
    .col-8 .project-issues .issue-page-number, 
    .col-8 .project-issues .issue-page-version, 
    .col-8 .project-issues .issue-date, 
    .col-8 .project-issues .page-reference,
    .col-8 .project-issues .issue-status, 
    .col-8 .project-issues .status-name-img,
    .col-8 .project-issues .issue-page-taken, 
    .col-8 .project-issues .issue-page-taken-right, 
    .col-8 .page-type:not(td.page-type), 
    .col-8 .page-type-left, 
    .col-8 .page-type-right,
    .col-8 .project-issues [class^="taken"] {
        font-size: 0.9rem;
    }

    .col-9 .project-issues .issue-name,
    .section-flatplan .col-9 .page-name,
    .col-9 .project-issues .issue-page-number, 
    .col-9 .project-issues .issue-page-version, 
    .col-9 .project-issues .issue-date, 
    .col-9 .project-issues .page-reference,
    .col-9 .project-issues .issue-status, 
    .col-9 .project-issues .status-name-img,
    .col-9 .project-issues .issue-page-taken, 
    .col-9 .project-issues .issue-page-taken-right, 
    .col-9 .page-type:not(td.page-type), 
    .col-9 .page-type-left, 
    .col-9 .page-type-right,
    .col-9 .project-issues [class^="taken"] {
        font-size: 0.8rem;
    }

    .col-10 .project-issues .issue-name,
    .section-flatplan .col-10 .page-name,
    .col-10 .project-issues .issue-page-number, 
    .col-10 .project-issues .issue-page-version, 
    .col-10 .project-issues .issue-date, 
    .col-10 .project-issues .page-reference,
    .col-10 .project-issues .issue-status, 
    .col-10 .project-issues .status-name-img,
    .col-10 .project-issues .issue-page-taken, 
    .col-10 .project-issues .issue-page-taken-right, 
    .col-10 .page-type:not(td.page-type), 
    .col-10 .page-type-left, 
    .col-10 .page-type-right,
    .col-10 .project-issues [class^="taken"] {
        font-size: 0.7rem;
    }
}

.col-8  .project-issues .issue-mark input[type="checkbox"],
.col-9  .project-issues .issue-mark input[type="checkbox"] {
    min-width: 0.7rem;
    width: 0.7rem;
    min-height: 0.7rem;
    height: 0.7rem;
}

.col-10  .project-issues .issue-mark input[type="checkbox"] {
    min-width: 0.7rem;
    width: 0.7rem;
    min-height: 0.7rem;
    height: 0.7rem;
}

/* end */

div.feature-name {
    cursor: pointer;
    word-break: break-word;
    text-align: center;
    font-size: inherit;
    margin: 0.2rem;
}

div.feature-name:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 4px;
} 

.status-visibility-page_processing, 
.status-visibility-preflight_warning {
    pointer-events: none;
}

.status-visibility-page_processing .context-menu-four,
.status-visibility-page_processing .context-menu-one,
.status-visibility-page_processing .context-menu-three,
.status-visibility-page_processing .context-menu-two,
.status-visibility-preflight_warning .context-menu-four,
.status-visibility-preflight_warning .context-menu-one,
.status-visibility-preflight_warning .context-menu-three,
.status-visibility-preflight_warning .context-menu-two {
    pointer-events:auto
}

.cover-right.status-visibility-preflight_warning,
.cover-left.status-visibility-preflight_warning {
    opacity: 1 !important;
}

.section-flatplan .cover-right.status-visibility-preflight_warning:before,
.section-flatplan .cover-left.status-visibility-preflight_warning:before {
    background-image: url("../img/preflight_warning_page-FCyCWuQ.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    content: '';
    position: absolute;
    background-color: rgba(255,255,255,0.8);
}

.section-flatplan .cover-right[data-type="Spread"].status-visibility-preflight_warning:before, 
.section-flatplan .cover-left[data-type="Spread"].status-visibility-preflight_warning:before {
    background-image: url("../img/preflight_warning_horizontal_page-SyccPKa.svg");
}


.section-view .cover-right.status-visibility-preflight_warning:after,
.section-view .cover-right.status-visibility-page_processing:after,
.section-view .cover-left.status-visibility-preflight_warning:after,
.section-view .cover-left.status-visibility-page_processing:after {
    background-image: url("../img/notext_preflight_warning_page-J_mnb-u.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    content: '';
    position: absolute;
    background-color: #fee4e2;
    opacity: 1;
}

.section-view .cover-right.status-visibility-page_processing:after,
.section-view .cover-left.status-visibility-page_processing:after {
    background-image: url("../img/status_icons/n_page_processing-_J7PQ1B.svg");
}

.section-view .cover-right[style*="width: 100%"].status-visibility-preflight_warning:after,
.section-view .cover-left[style*="width: 100%"].status-visibility-preflight_warning:after {
    background-image: url("../img/notext_preflight_warning_horizontal_page--JuEgbH.svg");
}
.section-view .cover-right[style*="width: 100%"].status-visibility-page_processing:after,
.section-view .cover-left[style*="width: 100%"].status-visibility-page_processing:after {
    background-image: url("../img/status_icons/spread/n_page_processing-Ieh-xOC.svg");
}

.section-view .cover-right.status-visibility-preflight_warning .status-name-img,
.section-view .cover-left.status-visibility-preflight_warning .status-name-img {
    color: #D92D20 !important;
    visibility: hidden;
}

.section-view .cover-right.status-visibility-page_processing .status-name-img,
.section-view .cover-left.status-visibility-page_processing .status-name-img {
    visibility: hidden;
}

.section-view .cover-right.status-visibility-preflight_warning .status-name-img:before,
.section-view .cover-left.status-visibility-preflight_warning .status-name-img:before {
    content: 'Preflight warning';
    position: absolute;
    left: 0;
    width: 100%;
    visibility: visible;
    z-index: 1;
}

.section-view .cover-right.status-visibility-page_processing .status-name-img:before,
.section-view .cover-left.status-visibility-page_processing .status-name-img:before {
    content: 'Page processing';
    position: absolute;
    left: 0;
    width: 100%;
    visibility: visible;
    z-index: 1;
}

.project-issues .issue-name + .issue-covers:has(.cover-left [class*="selected"]) + .issue-mark > div:first-child,
.project-issues .issue-name + .issue-covers:has(.cover-right [class*="selected"]) + .issue-mark > div:nth-child(2),
.project-issues .issue-name + .issue-covers:has(.cover-left + .cover-left [class*="selected"]) + .issue-mark > div:nth-child(2),
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="visibility: hidden"] + .cover-left [class*="selected"]) + .issue-mark > div:nth-child(2),
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="width: 100%"] [class*="selected"]) + .issue-mark > div,
.project-issues .issue-name + .issue-covers:has(.cover-left.spread [class*="selected"]) + .issue-mark > div,
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="width: 100%"] [class*="selected"]):has(.cover-left [class*="context-menu-disabled"]):has(.cover-left:nth-child(2)[style*="display: none"]) + .issue-mark > div:nth-child(2),
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="width: 100%"] [class*="selected"]):has(.cover-left [class*="context-menu-disabled"][style*="left: 50%"]):has(.cover-left:nth-child(2)[style*="display: none"]) + .issue-mark > div:first-child,
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="width: 100%"] [class*="selected"]):has(.cover-left [class*="context-menu-disabled"][style*="left: 0"]):has(.cover-left:nth-child(2)[style*="display: none"]) + .issue-mark > div:nth-child(2) {
    background: #F0FBFB;
}

.project-issues .issue-name + .issue-covers:has(.cover-left[style*="width: 100%"] [class*="selected"]):has(.cover-left [class*="context-menu-disabled"]):has(.cover-left:nth-child(2)[style*="display: none"]) + .issue-status + .issue-mark > div:first-child,
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="width: 100%"] [class*="selected"]):has(.cover-left [class*="context-menu-disabled"][style*="left: 0"]):has(.cover-left:nth-child(2)[style*="display: none"]) + .issue-mark > div:first-child,
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="width: 100%"] [class*="selected"]):has(.cover-left [class*="context-menu-disabled"][style*="left: 50%"]):has(.cover-left:nth-child(2)[style*="display: none"]) + .issue-mark > div:nth-child(2),
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="visibility: hidden"] + .cover-left [class*="selected"]) + .issue-mark > div:first-child {
    background: none;
}

.project-issues:has(.issue-covers > .cover-left[style*="width: 100%"]) > div,
.project-issues:has(.issue-covers > .cover-right[style*="width: 100%"]) > div,
.project-issues:has(.issue-covers > .cover-left:only-child) > div {
    column-gap: 0;
}

.project-issues:has(.issue-covers > .cover-right [class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left [class*="selected"]) > .issue-name > div:first-child div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left [class*="selected"] + [class*="context-menu-disabled"][style*="left: 0"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left [class*="selected"] + [class*="status-name-img"] + [class*="context-menu-disabled"][style*="left: 0"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left [style*="width: 100%"] [class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"] {
    background: #F0FBFB;
}

.project-issues:has(.issue-covers > .cover-right [class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left [class*="selected"]) > .issue-name > div:first-child div[class*="page"],
.project-issues:has(.issue-covers > .cover-left [class*="selected"] + [class*="context-menu-disabled"][style*="left: 0"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left [class*="selected"] + [class*="status-name-img"] + [class*="context-menu-disabled"][style*="left: 0"]) > .issue-name > div:nth-child(2) div[class*="page-"] {
    box-shadow: 0 -2px 0 #59BEC4;
}

/* yellow color */ 

.project-issues .issue-name + .issue-covers:has(.cover-right[style*="background-color: #FFE5C7"] [class*="selected"]) + .issue-mark > div:nth-child(2),
.project-issues .issue-name + .issue-covers:has(.cover-right img[src*="/assets/img/notext_a_to_come"][class*="selected"]) + .issue-mark > div:nth-child(2),
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="background-color: #FFE5C7"] [class*="selected"]) + .issue-mark > div:first-child,
.project-issues .issue-name + .issue-covers:has(.cover-left img[src*="/assets/img/notext_a_to_come"][class*="selected"]) + .issue-mark > div:first-child,
.project-issues .issue-name + .issue-covers:has(.cover-left[style*="width: 100%;background-color: #FFE5C7"] [class*="selected"]) + .issue-mark > div:nth-child(2) {
    background: #FFFBEC;
}

.project-issues:has(.issue-covers > .cover-right[style*="background-color: #FFE5C7"] [class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-right img[src*="/assets/img/notext_a_to_come"][class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left[style*="background-color: #FFE5C7"] [class*="selected"]) > .issue-name > div:first-child div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left img[src*="/assets/img/notext_a_to_come"][class*="selected"]) > .issue-name > div:first-child div[class*="page-"] {
    background: #FFFBEC;
}

.project-issues:has(.issue-covers > .cover-right[style*="background-color: #FFE5C7"] [class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-right img[src*="/assets/img/notext_a_to_come"][class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left[style*="background-color: #FFE5C7"] [class*="selected"]) > .issue-name > div:first-child div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left img[src*="/assets/img/notext_a_to_come"][class*="selected"]) > .issue-name > div:first-child div[class*="page-"] {
    box-shadow: 0 -2px 0 #F79009;
}

/* when booking empty color */ 

.project-issues:has(.issue-covers > .cover-right img[src*="/assets/img/empty_booking"][class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left img[src*="/assets/img/empty_booking"][class*="selected"]) > .issue-name > div:first-child div[class*="page-"] {
    background: #EAECF0;
    box-shadow: 0 -2px 0 #9AA4B2;
}

.project-issues .issue-name + .issue-covers:has(.cover-right img[src*="/assets/img/empty_booking"][class*="selected"]) + .issue-mark > div:nth-child(2),
.project-issues .issue-name + .issue-covers:has(.cover-left img[src*="/assets/img/empty_booking"][class*="selected"]) + .issue-mark > div:first-child {
    background: #EAECF0;
}

/* green color */

.project-issues .issue-name + .issue-covers:has(.cover-right img[data-color="F6FEF9"][class*="selected"]) + .issue-mark > div:nth-child(2),
.project-issues .issue-name + .issue-covers:has(.cover-left img[data-color="F6FEF9"][class*="selected"]) + .issue-mark > div:first-child,
.project-issues .issue-name + .issue-covers:has(.cover-left.spread img[data-color="F6FEF9"][class*="selected"]) + .issue-mark > div {
    background: #F6FEF9;
}

.project-issues:has(.issue-covers > .cover-right img[data-color="F6FEF9"][class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left img[data-color="F6FEF9"][class*="selected"]) > .issue-name > div:first-child div[class*="page-"] {
    background: #F6FEF9;
}

.project-issues:has(.issue-covers > .cover-right img[data-color="F6FEF9"][class*="selected"]) > .issue-name > div:nth-child(2) div[class*="page-"],
.project-issues:has(.issue-covers > .cover-left img[data-color="F6FEF9"][class*="selected"]) > .issue-name > div:first-child div[class*="page-"] {
    box-shadow: 0 -2px 0 #47CD89;
}

/* border for context menu */
.issue-covers [class*="cover-"]:after {
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    transition: all 0.35s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.issue-covers [class*="cover-"]:hover:after,
.issue-covers [class*="cover-"]:has([class*="context-menu-active"]):after,
.issue-covers > div[class*="context-menu-active"]:after {
    box-shadow: inset 0 0 0 2px rgba(153,162,177,1);
    opacity: 1;
}

.issue-covers [class*="cover-"]:has(img[src*="/assets/img/notext_editorial_to_come"][class*="context-menu-active"]):after,
.issue-covers [class*="cover-"]:has([class*="context-menu-active"] img[src*="/assets/img/notext_editorial_to_come"]):after,
.issue-covers [class*="cover-"][style*="background-color: #C0E8EB"]:has([class*="context-menu-active"]):after,
.issue-covers [class*="cover-"]:has(img[src*="/assets/img/notext_editorial_to_come"]):hover:after,
.issue-covers [class*="cover-"][style*="background-color: #C0E8EB"]:hover:after {
    box-shadow: inset 0 0 0 2px rgba(89,190,196,1);
}


.issue-covers [class*="cover-"]:has(img[src*="/assets/img/notext_a_to_come"][class*="context-menu-active"]):after,
.issue-covers [class*="cover-"]:has([class*="context-menu-active"] img[src*="/assets/img/notext_a_to_come"]):after,
.issue-covers [class*="cover-"][style*="background-color: #FFE5C7"]:has([class*="context-menu-active"]):after,
.issue-covers [class*="cover-"]:has(img[src*="/assets/img/notext_a_to_come"]):hover:after,
.issue-covers [class*="cover-"][style*="background-color: #FFE5C7"]:hover:after {
    box-shadow: inset 0 0 0 2px rgba(255,162,10,1);
}

.issue-covers [class*="cover-"]:has([class*="preflight_warning"][class*="context-menu-active"]):after,
.issue-covers [class*="cover-"]:has([class*="preflight_warning"]):hover:after {
    box-shadow: inset 0 0 0 2px rgba(249,112,102,1) !important;
}

.issue-covers [class*="cover-"]:has(img[data-color="F6FEF9"][class*="context-menu-active"]):after,
.issue-covers [class*="cover-"]:has(img[data-color="F6FEF9"]):hover:after {
    box-shadow: inset 0 0 0 2px #47CD89;
}

.carousel-container {
    position: relative;
    width: 300px;
    overflow: hidden;
}

/* removing box shadow from all divs not the first */ 

.project-issues .issue-name .page-name ~ div {
    box-shadow: none !important;
}

.story-name label,
.category-name label {
    color: #FFFFFF;
    background-color: transparent;
    width: 100%;
    height: 100%;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}

.category-color, 
.story-color {
    display: none !important;
    height: 100%;
    width: 100%;
}

.project-issues .issue-name > div > div.category-name {
    background: #FF8A00;
}

.project-issues .issue-name > div > div.story-name {
    background: #D9F3F4;
}

.project-issues .status-name-img {
    position: absolute;
    bottom: 0;
    height: 25%;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    z-index: 1;
}

.status-name-img, 
.preflight_warning:not(.filter-status-name) {
    pointer-events: none;
}

a.synergy-link {
    background: url('data:image/svg+xml,<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.83341 1.51301V4.26671C7.83341 4.64008 7.83341 4.82676 7.90608 4.96937C7.96999 5.09481 8.07198 5.1968 8.19742 5.26071C8.34003 5.33337 8.52671 5.33337 8.90008 5.33337H11.6538M11.8334 6.65886V11.4667C11.8334 12.5868 11.8334 13.1469 11.6154 13.5747C11.4237 13.951 11.1177 14.257 10.7414 14.4487C10.3136 14.6667 9.75352 14.6667 8.63341 14.6667H4.36675C3.24664 14.6667 2.68659 14.6667 2.25877 14.4487C1.88244 14.257 1.57648 13.951 1.38474 13.5747C1.16675 13.1469 1.16675 12.5868 1.16675 11.4667V4.53337C1.16675 3.41327 1.16675 2.85322 1.38474 2.42539C1.57648 2.04907 1.88244 1.74311 2.25877 1.55136C2.68659 1.33337 3.24664 1.33337 4.36675 1.33337H6.50793C6.99711 1.33337 7.2417 1.33337 7.47188 1.38863C7.67595 1.43763 7.87104 1.51844 8.04998 1.62809C8.25182 1.75178 8.42477 1.92473 8.77067 2.27063L10.8962 4.39612C11.2421 4.74202 11.415 4.91497 11.5387 5.1168C11.6484 5.29575 11.7292 5.49084 11.7782 5.69491C11.8334 5.92509 11.8334 6.16968 11.8334 6.65886Z" stroke="%23475467" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    height: 16px;
    width: 13px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-size: contain;
}

.col-7 a.synergy-link,
.col-8 a.synergy-link,
.col-9 a.synergy-link,
.col-10 a.synergy-link {
    height: 13px;
    width: 10px;
}

@media (min-width: 1536px) {
    a.synergy-link {
        height: 20px;
        width: 17px;
    }

    .col-7 a.synergy-link,
    .col-8 a.synergy-link {
        height: 17px;
        width: 14px;
    }

    .col-9 a.synergy-link,
    .col-10 a.synergy-link {
        height: 14px;
        width: 11px;
    }
}

@media (min-width: 2560px) {

    .col-7 a.synergy-link,
    .col-8 a.synergy-link,
    .col-9 a.synergy-link,
    .col-10 a.synergy-link {
        height: 18px;
        width: 15px;
    }
}

.page-type:not(td.page-type) {
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    display: none;
    pointer-events: none;
}

.page-type-left,
.page-type-right {
    position: absolute;
    background: #fff;
    text-align: center;
    color: #000;
    top: 0;
    width: 100%;
    left: 0;
}

.page-type-left.advert,
.page-type-right.advert {
    background: #FF8A00;
    color: #fff
}

.page-type-left.editorial,
.page-type-right.editorial {
    background: #59BEC4;
    color: #fff
}

.page-type-left.promotion,
.page-type-right.promotion {
    background: #9bdc1b;
    color: #fff
}

.page-type-left.advertorial,
.page-type-right.advertorial {
    background: #FF8A00;
    color: #fff
}

.page-type-cdp {
    background-color: #B352A4;
    color: #fff;
}

#covers .blockadv, 
#folios .blockadv {
    background-color: transparent;
}

.section-flatplan #covers .blockadv.selected, 
.section-flatplan #folios .blockadv.selected {
    background-color: #59BEC4;
}

#covers,
#folios {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

/*img.selected {
    border: 2px solid #59BEC4;
}*/

.context-menu-four, .context-menu-three {
    min-height: 100%;
}

#selection {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 9999;
    overflow: hidden;
    background-color: black;
    opacity: .1;
}

/* drag & drop page */

.section-dragdrop .images-box {
    height: calc( 100vw/6 + 1.5vw) !important;
}

.section-dragdrop .col-7 .images-box {
    height: calc( 100vw/7 + 2.5vw) !important;
}

.section-dragdrop .col-8 .images-box {
    height: calc( 100vw/8 + 2vw) !important;
}

.section-dragdrop .col-9 .images-box {
    height: calc( 100vw/9 + 2vw) !important;
}

.section-dragdrop .col-10 .images-box {
    height: calc( 100vw/10 + 1.5vw) !important;
}

.section-dragdrop:has(.project-palette.show) .images-box {
    height: calc( 100vw/6 + 0.5vw) !important;
}

.section-dragdrop:has(.project-palette.show) .col-7 .images-box {
    height: calc( 100vw/7 + 0.5vw) !important;
}

.section-dragdrop:has(.project-palette.show) .col-8 .images-box {
    height: calc( 100vw/8 + 0.5vw) !important;
}

.section-dragdrop:has(.project-palette.show) .col-9 .images-box {
    height: calc( 100vw/9 + 0.5vw) !important;
}

.section-dragdrop:has(.project-palette.show) .col-10 .images-box {
    height: calc( 100vw/10 + 0.5vw) !important;
}

.section-dragdrop .col-item .category-name,
.section-dragdrop .col-item .story-name {
    height: 20px;
    max-height: 20px;
    line-height: 20px;
    overflow: hidden;
}

.section-dragdrop:has(.project-palette.show) .palette-colors.images-box {
    height: calc(100vh - 12.5rem) !important;
    box-shadow: none;
}

/* lucid link files */
.folder-open-icon {
    background: url('data:image/svg+xml,<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.66695 3.66667L7.92326 2.17928C7.70922 1.7512 7.6022 1.53715 7.44253 1.38078C7.30134 1.24249 7.13117 1.13732 6.94434 1.07287C6.73306 1 6.49376 1 6.01515 1H3.46695C2.72022 1 2.34685 1 2.06163 1.14532C1.81075 1.27316 1.60677 1.47713 1.47894 1.72801C1.33362 2.01323 1.33362 2.3866 1.33362 3.13333V3.66667M1.33362 3.66667H11.467C12.5871 3.66667 13.1471 3.66667 13.5749 3.88465C13.9513 4.0764 14.2572 4.38236 14.449 4.75869C14.667 5.18651 14.667 5.74656 14.667 6.86667V9.8C14.667 10.9201 14.667 11.4802 14.449 11.908C14.2572 12.2843 13.9513 12.5903 13.5749 12.782C13.1471 13 12.5871 13 11.467 13H4.53362C3.41351 13 2.85346 13 2.42564 12.782C2.04931 12.5903 1.74335 12.2843 1.55161 11.908C1.33362 11.4802 1.33362 10.9201 1.33362 9.8V3.66667Z" stroke="%23D0D5DD" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
}

.fade.in {
    opacity: 1;
}

.project-issues .page-name.artwork,
.artwork {
    color: #CC6600;
}

.toggle-section button {
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    color: #98A2B3;
}

.toggle-section:not(.expand) {
    cursor: pointer;
}

.toggle-section.expand button {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%2398A2B3" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>');
}

.toggle-section button {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%2398A2B3" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>');
}

#expenses-table-container table td {
    word-break: break-all;
    white-space: pre-wrap;
}

#aw1-table td,
#ll-table td {
    white-space: pre-wrap;
}

.select-all-options,
.unselect-all-options {
    height: 20px;
    width: 20px;
    background-repeat: no-repeat !important;
    padding: 0.25rem 0;
}

.select-all-options {
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 56 <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> 57 </svg>');
    margin-left: 0.5rem;
}

.unselect-all-options {
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 7L7 17M7 7L17 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
}

.table-responsive .jstree,
.table-responsive .jstree-hovered {
  background-color: transparent !important;
  box-shadow: none !important;
}

.table-responsive .jstree-anchor {
  color: #d0d5dd !important;
}

.jstree-default .jstree-clicked {
    background: #234d51 !important;
    padding: 0 5px;
}

.table-responsive .jstree-anchor span.label {
  justify-content: center;
  border-radius: 50%;
  color: #344054;
  background-color: #8bffc1;
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-items: center;
  font-weight: 600;
}

.lucid-links .table .icons span:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.lucid-links .table .icons span:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 1px;
  outline-color: #e2e8f0;
}

.lucid-links .table .icons span {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.lucid-links .table .icons a {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0;
}

.lucid-links .jstree-icon {
  filter: brightness(1000%);
}

.thumbnail-blk .context-menu-active,
.list-blk .context-menu-active {
    background-color: #8bffc1;
}

/* wizard */

.steps .step .circle {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid #eaecf0;
}

.steps .step .circle::before {
  content: "\2022";
  color: #eaecf0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 25px;
}

.steps .step.active .circle::before {
  content: "\2713";
  color: #4b5565;
  font-size: 22px;
}

.steps .step.active .circle {
  border-color: #4b5565;
}

.steps .step.current .circle::before {
  content: "\2022";
  color: #4b5565;
  font-size: 25px;
}

.steps .step:not(:first-child) {
  margin-top: 40px;
}

.steps .step:not(:last-child)::after {
  width: 2px;
  height: 40px;
  content: "";
  display: block;
  background: #eaecf0;
  position: absolute;
  left: 18px;
  top: 45px;
}

.steps .step.active:not(:last-child)::after {
  background: #4b5565;
}

.steps .step.active.current::after {
  background: #eaecf0;
}

/* styles-pk */

.insert-edit,
.section-edit {
    display: none;
    margin-left: -8px;
    margin-right: -8px;
}

.insert-edit.show,
.section-edit.show {
    display: flex;
}

#add-insert.readonly,
#add-section.readonly {
    opacity: .4;
    pointer-events: none;
    cursor: not-allowed;
}

#title-container,
#type-container,
#month-container,
#year-container {
    display: none;
}

#title-container.show,
#type-container.show,
#month-container.show,
#year-container.show {
    display: block;
}

#basic-spread-ref-info {
    text-align: center;
    position: fixed;
    top: 70px;
    width: 100vw;
}

.step {
    cursor: pointer;
}

/* Page Pilot */

#indd-edit-container .image-frame img {
    max-width: unset;
}

.resizable {
    resize: both;
    position: relative;
    overflow: auto;
}

#frame-editor .resizable img {
    max-width: 98%;
    max-height: 98%;
    width: 98% !important;
    height: 98% !important;
    position: relative;
}

.resizable-image-container {
    overflow: auto !important;
    position: absolute;
    z-index: 9;
    border: 1px solid #FFFFFF;
    opacity: 0.4;
    resize: vertical;
    background-size: 100% 100%;
}

.indd-frame {
    position: absolute;
    overflow: hidden;
}

.indd-frame:hover {
    background: rgba(110, 231, 183, 0.3);
}

.indd-frame.text-frame,
.indd-frame.image-frame {
    cursor: pointer;
}

.indd-frame.text-frame:before,
.indd-frame.image-frame:before {
    content: '';
    background: rgba(110, 231, 183, 0.3);
    border: 3px solid #47CD89;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.indd-frame.text-frame:hover:before,
.indd-frame.image-frame:hover:before {
    opacity: 1;
}

#text-edit-content .indd-paragraph,
.indd-frame .indd-paragraph {
    line-height: 1;
}

.frame-text-editor {
    display: none;
    opacity: 0;
}

#indd-zoom-header {
    z-index: 10;
}

#indd-edit-container {
    margin-top: 130px;
}

.indd-button-container button {
    white-space: nowrap;
}

.indd-button-container button[class^="image"] {
    min-width: 40px;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.fade.show {
    opacity: 1;
}

.frame-text-editor .modal-dialog {
    height: 100%;
    width: auto !important;
    position: unset !important;
    display: block;
}

.frame-text-editor .dropdown-toggle {
    background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg>");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.85em 1.85em;
}

.frame-text-editor .modal-dialog-box {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 0.675rem;
    width: auto;
    height: 100vh;
    overflow: unset;
}

.frame-text-editor .modal-dialog-box .modal-body {
    overflow: auto;
    padding: 0 0.5rem 0 0.5rem;
}

.frame-text-editor .modal-dialog-box .modal-header {
    padding: 0.5rem 0.5rem 0 0.5rem;
}

#js-frame-edit {
    top: 1.5rem;
    right: 1.5rem;
    bottom: unset;
    left: unset;
    overflow: visible;
    position: fixed;
    width: 27vw;
    z-index: 11;
}

#js-frame-edit div.hide {
    display: none;
}

#text-edit-content {
    padding: 1rem;
    outline: none;
    overflow: auto;
    border: 1px solid #D0D5DD;
    border-radius: 0.375rem;
    margin: 0.5rem 0;
}

#text-edit-content:has(img) {
    cursor: pointer;
}

#text-edit-content img {
    max-height: 100%;
    margin: 0 auto;
    max-width: 100%;
}

#js-display-indd-edit {
    overflow: scroll;
}

#frame-image-dropdown .dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
    display: none;
    z-index: 1;
}

#frame-image-dropdown .dropdown-menu.show {
    display: block;
    background: #fff;
    border: 1px solid #d1d5dc;
    border-radius: 0.3rem;
}

#frame-image-dropdown .dropdown-menu a {
    display: inline-block;
    padding: 3px 10px;
    cursor: pointer;
    color: #1f2937;
    font-size: 14px;
    width: 100%;
}

#frame-image-dropdown .dropdown-menu a:hover {
    background-color: #fbfbfb;
    text-decoration: none;
}

#js-display-indd-edit .indd-page {
    display: inline-block;
    border: none;
    overflow: hidden;
    position: relative;
}

#indd-img-preview {
    display: block;
    position: fixed;
    max-width: 200px;
    z-index: 1100;
    border: 1px solid #999;
}

textarea#generated-text {
    height: calc(100vh - 25rem);
    resize: none;
}

#ai-text-modal,
#ai-image-modal,
#generated-text,
#page-pilot-btn.hidden,
#generated-text-label {
    display: none;
}

#indd-container-bleed {
    position: relative;
    z-index: 9;
    margin: 0 auto;
    border-color: pink !important;
    background: none;
    opacity: 0;
    border-style: solid !important;
    transition-property: opacity, transform;
    transition-duration: 300ms;
}

#indd-container-bleed div {
    width: 100%;
    height: 100%;
    border-color: darkgreen !important;
    background: none;
    border-style: solid !important;
}

#indd-edit-container canvas {
    position: absolute;
}

.list-view-table .btn-secondary.btn-success {
    background: #ecfef6;
    --tw-ring-color: #6fe8b7;
}

.upload-icon img {
    width: 100%;
    height: 70px;
}

div.readonly label {
    opacity: .5;
    pointer-events: none;
}

#form-submit-send,
#boden-oversize-container,
#boden-oversize-custom-x-container,
#boden-oversize-custom-y-container,
.oad-drop,
#list-table-campaigns_filter {
    display: none;
}

.red-highlight {
    background: red;
}