[data-bs-theme="dark"] .list-group {
  background-color: #0c0f1a !important;
}

[data-bs-theme="dark"] .btn-icon .bx {
  color: #d1c5e8 !important;
}

body {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */
  height: 101%;
  overflow: hidden;
}

body.allow-select,
body.allow-select * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

a {
  color:inherit;
}


a.employer,
a.employer:link,
a.employer:visited {
  color: blue !important;
}

a.employer:hover,
a.employer:focus {
  color: blue !important; /* or a different hover color if you want */
}

.cover-value[data-type="linkedin"] a {
  color: blue; /* LinkedIn brand blue */
  text-decoration: underline; /* optional */
}

.cover-value[data-type="linkedin"] a:hover {
  text-decoration: underline; /* optional hover effect */
}


li {
  color:black;
}

#toolbar {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 5px 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  z-index: 2000;
  display: none;             /* hidden by default */
}

.highlight { background: yellow }

.page {
    page-break-before: always;
    position: relative;
    background: white;
    display: block;
    margin: 0 auto;
    width: 21cm;
    height: 29.7cm;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 1cm rgba(0,0,0,0.1);    
}

.post-first-page {
  padding-top: 50px !important;
}

.page-grid {
  display: grid;
  grid-auto-rows: auto 1fr;
  height:100%;
}

.header-grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto
}

.muuri-header-row {
  grid-area: 1/1/2/3;
/*  display: flex;*/
  height: auto !important;

}

.muuri-header-column {
  grid-area: 2/1/3/2;
  height: auto !important;
}

.muuri-header-column2 {
  grid-area: 2/2/3/3;
  height: auto !important;
}


.mobile-width-aside {
  width: 25%;
}

.mobile-width-cv {
  width: 75%;
}

@media (min-width: 350px) {
    .mobile-width-cv {
        padding-top: 1rem;
        width: 100%;
        flex: 0 0 auto;
        max-height: 110vh !important;
    }
}

@media (min-width: 768px) {
    .mobile-width-aside {
        flex: 0 0 auto;
        width: 25%;
        max-height: 100vh !important;
    }
    #aside-menu-holder {
        transform: scale(0.8);
        transform-origin: top left;
        width:130%;
    }

    .mobile-width-cv {
        padding-top: 1rem;
        width: 75%;
        flex: 0 0 auto;
        max-height: 110vh !important;
    }
}

@media (min-width: 992px) {
    #aside-menu-holder {
        transform: scale(0.9);
        transform-origin: top left;
        width:110%;
    }

    .mobile-width-cv {
        padding-top: 3rem;
    }
}

@media (min-width: 1300px) {
    .mobile-width-aside {
        flex: 0 0 auto;
        width: 20%;
        max-height: 100vh !important;
    }
    #aside-menu-holder {
        transform: scale(0.9);
        transform-origin: top left;
        width:110%;
    }

    .mobile-width-cv {
        width: 80%;
        flex: 0 0 auto;
        max-height: 110vh !important;
    }
}


.fade-scale {
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.fade-scale.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

#contact-content {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    flex-direction: column;
    gap: 10px;
/*    height: 80px;*/
}


.skills-column {
    flex: 1; /* Grow to fill the container */
    min-width: 100px; /* Minimum width for each column, adjust as needed */ 
}


.single-column {
/*  width: 21cm;*/
  display: flex !important;
}

.reset-transform {
  transform: none !important;
}


.dragging {
  opacity: 0.75;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  background-color: lightgray;
}


.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  height:100%;
}

.grid-container.double {
  position: relative;
  display: grid;
  grid-template-columns: 200px auto;
}

.cv_header {
    width: 100%; /* Example initial size */
    background-color: #f9f9f9;
/*    min-height: 50px;*/
    transition: border 0.3s ease; 
}

.muuri-1, .muuri-2 {
  position: relative;
  min-height: 50px;
  width: 100%;
  transition: border 0.3s ease;
  height:auto !important;
}

.grid-item {
  background-color: #f5f5f5;
  padding: 10px;
  border: 1px solid #ddd;
}


.resize-drag {
    position: relative;
    transition: all 0.1s ease;
    height: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: var(--block-gap, 10px);
    transform: none !important;
}


/* bottom divider */
.section-divider::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -5px;
    height: 1px;
    background-color: currentColor;
    opacity: 0.2;
}

.resize-drag:hover:not(.dragging) .hover-effect {
    background-color: #eeeefd;
    border: 1px dotted #009688;
}

.hover-effect {
    background-color: #eeeefd30;
    border: 1px dotted #009688;
}

.drag-over {
  border: 2px dashed #666; /* Example style */
  background-color: #f0f0f0; /* Light background to indicate drag over */
}


.logo {
    width: 100% !important;
    position: relative;
    display:flex;
    padding-top: 20px;
    z-index:999;
}

#brand-logo {
  width:100%;
}


.avatar {
    margin-top:20px;
    display: flex;
    width: 100% !important;
    z-index: 99;
    background-color: transparent !important;
}

.section_title {
  text-align: center;
}

#experience_title, #qualifications_title {
  padding-bottom: 9px;
}

/*-- FOOTER STYLES -----------------------------------------------------------------------*/

.cv_footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  flex: 0 0 auto;
  margin-top: -1px;
  z-index: 99;
  overflow: hidden;
  box-sizing: border-box;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#footer-content {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  background: none;
}

/* 2-column layout only: colours and left width come from inline styles in render HTML */
#footer-content.footer-2col {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: stretch;
}

/* Base column styling */
#footer-content .footer-column-left,
#footer-content .footer-column-right {
  min-width: 0;
  min-height: 100%;
  box-sizing: border-box;
}

/* 2-column mode */
#footer-content.footer-2col .footer-column-left,
#footer-content.footer-2col .footer-column-right {
  display: flex;
  align-items: stretch;
  padding: 0 20px 15px 20px; 
  min-width: 0;
  justify-content: flex-end;
}

/* Critical: let render-page inline width win for left column */
#footer-content.footer-2col .footer-column-left {
  width: auto;
}

/* right side should fill remaining space */
#footer-content.footer-2col .footer-column-right {
  width: auto;
  min-width: 0;
}

/* Single column mode */
#footer-content:not(.footer-2col):not(.hidden):not(.d-none) {
  display: flex !important;
  align-items: center;
}

#footer-content:not(.footer-2col) .footer-column-left {
  display: none !important;
}

#footer-content:not(.footer-2col) .footer-column-right {
  width: 100%;
  display: flex;
  align-items: stretch;
  padding: 0 20px 15px 20px;
  min-width: 0;
  justify-content: flex-end;
}

.footer-contact-holder {
  display: block;
  width: 100%;
}

#footer-free-text {
  width: 100%;
}

/* Shared inner sizing */
#footer-contact-holder,
#footer-free-text,
#footer-left-free-text,
#footer-right-free-text {
  width: 100%;
  min-width: 0;
}

/* Stack content nicely */
#footer-left-content,
#footer-right-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  min-height: 100%;
  width: 100%;
}

/* Contact holder */
#footer-contact-holder {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#footer-left-content > #footer-contact-holder,
#footer-right-content > #footer-contact-holder {
  width: 100%;
}

/* Footer fields */
.footer-field {
  min-width: 0;
}

.footer-field .footer-value {
  white-space: nowrap;
}

.footer-free-text p {
  margin: 0;
}

.footer-free-text a {
  text-decoration: underline;
  color: inherit;
}

/* Hidden support */
.footer-free-text.d-none,
#footer-contact-holder.d-none {
  display: none !important;
}

/*-- END FOOTER STYLES -----------------------------------------------------------------------*/

.contact-field {
  font-weight:bold;
}

.custom-input {
    height: auto; /* Adjust this based on your design needs */
    width: 60px;
    padding: 6px 12px; /* Standard padding to align with Bootstrap's default form-control styling */
}

.custom-text-input {
    height: auto; /* Adjust this based on your design needs */
    width: 172px;
/*    padding: 6px 12px; /* Standard padding to align with Bootstrap's default form-control styling */*/
}

.text-left {
  text-align: left;
  margin-left: 5px;
}

.preview-template {
  position: relative;
  cursor: pointer;
}

.preview-template-inner {
  transition: transform 0.3s ease-in-out;
}

.preview-template:hover .preview-template-inner {
  transform: scale(1.05);
}

.btn-preview-icon {
  z-index: 1; /* Ensure the button stays on top */
  left: -2% !important;
  top: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.pages_container {
  display: flex;
  flex-direction: column;
}

.work-details:hover, .content-col .left-side:hover, #skills_title:hover, #qualifications_title:hover, .summary:hover, .contact:hover, .agency:hover, 
#interests_title:hover, #publications_title:hover, #research_title:hover, #projects_title:hover, .extra_title:hover, 
#it_skills_title:hover, #tech_skills_title:hover, #soft_skills_title:hover, #expertise_title:hover {
  background-color: #eeeefd30;
  border: 1px dotted #009688;
}

.work-experience {
  page-break-inside: auto;
}

.work-experience, .work_experience {
  width: auto !important;
}

.focused-element {
  background-color: #eeeefd30 !important;
  border: 1px dotted #009688;
}

.sticky-column {
  position: sticky;
  max-height: 90vh;
  overflow-y: scroll;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}

.sticky-column::-webkit-scrollbar {
    display: none;
}

.btn-icon {
  opacity: 85%;
}


.btn-icon:hover {
  opacity: 100%;
}
 
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(0px, 0px) rotate(-1deg); }
  20% { transform: translate(-1px, 0px) rotate(1deg); }
  30% { transform: translate(1px, 1px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 1px) rotate(-1deg); }
  60% { transform: translate(-2px, 0px) rotate(0deg); }
  70% { transform: translate(-3px, -1px) rotate(-1deg); }
  80% { transform: translate(-1px, 1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, 0px) rotate(-1deg); }
}


.shake {
  animation: shake 1s;
  animation-iteration-count: infinite;
  color: #4044ee;
}


.template_icon {
  min-height:250px;
  max-height:320px;
  transform-origin: top left;
  max-width:none !important;
}


/* DATE LEFT LAYOUT  */

.work-experience.dates-left {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 24px;
  align-items: start;
}

.work-experience.dates-left .work-details {
  display: contents;
}

.work-experience.dates-left .right-side {
  grid-column: 1;
  align-self: start;
  justify-self: start;
  text-align: left;
}

.work-experience.dates-left .left-side {
  grid-column: 2;
  align-self: start;
}

.work-experience.dates-left .description_holder {
  grid-column: 2;
  margin-top: 4px;
}

.qualifications-list.dates-left {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 24px;
  align-items: start;
}

.qualifications-list.dates-left .qualification-details {
  display: contents;
}

.qualifications-list.dates-left .right-side {
  grid-column: 1;
  align-self: start;
  justify-self: start;
  text-align: left;
}

.qualifications-list.dates-left .left-side {
  grid-column: 2;
  align-self: start;
}

.qualifications-list.dates-left .description_holder,
.qualifications-list.dates-left .skills-column,
.qualifications-list.dates-left .qualification-notes {
  grid-column: 2;
  margin-top: 4px;
}


/* Vertical Stack Layout */
.vertical {
  display: flex;
  flex-direction: column;
}

.vertical .left-side,
.vertical .right-side {
  display: block;
}


/*.horizontal.stack-left {
  display: grid;
  grid-template-columns: auto auto; 
}

.horizontal.stack-left .left-side {
  grid-area: 1 / 1 /2 / 2;
  align-items: baseline;
  width:100%;
}

.horizontal.stack-left .right-side {
  grid-area: 1 / 2 / 2 / 3;
  display:flex;
  align-items: center;
  align-items: baseline;
  justify-content: flex-end;
  width:100%;
}*/

/* ------------------------------------------------------------------
   Dates-right layout
   Browser + WeasyPrint identical structure
   ------------------------------------------------------------------ */

.horizontal.stack-left {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  box-sizing: border-box !important;
}

.horizontal.stack-left .left-side {
  display: table-cell !important;
  vertical-align: top !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 10px !important;
}

.horizontal.stack-left .right-side {
  display: table-cell !important;
  vertical-align: top !important;
  width: 130px !important;
  max-width: 130px !important;
  box-sizing: border-box !important;
  text-align: right !important;
}

.horizontal.stack-left .employer,
.horizontal.stack-left .role {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.horizontal.stack-left .dates {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: right !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}


.horizontal.adjacent-left{
  display:flex;
  align-items:baseline;   /* vertical alignment of text */
  flex-wrap:nowrap;       /* <-- NO wrapping – everything stays in one row */
}

.horizontal.adjacent-left .left-side{
  flex:1 1 auto;          /* grow to fill free space, but shrink if needed  */
  display:flex;
  column-gap:0.75rem;     /* space between employer & role */
  min-width:0;            /* allow text to shrink instead of forcing wrap   */
}

.horizontal.adjacent-left .left-side .employer,
.horizontal.adjacent-left .left-side .role {
  margin-right: 15px; /* Space between employer and role */
}

.horizontal.adjacent-left .right-side{
  flex:0 0 auto;              /* no grow, no shrink */
  justify-content:flex-end;   /* keep your original right-align */
}

/*------------------------------------------------------------------------------*/
/* NEW CONTACT CONTAINER CSS */
/*------------------------------------------------------------------------------*/

.contact-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#cand_details {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: baseline;
}

#cand_details.contact-name-left {
  justify-content: flex-start;
  text-align: left;
}

#cand_details.contact-name-center {
  justify-content: center;
  text-align: center;
}

#cand_details.contact-name-right {
  justify-content: flex-end;
  text-align: right;
}

#contact-content .agency_details,
#split_agency_details {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
}

.contact-details-left {
  justify-content: flex-start;
  text-align: left;
}

.contact-details-right {
  justify-content: flex-end;
  text-align: right;
}

.contact-details-spread,
.contact-details-spread-left,
.contact-details-spread-right {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  overflow-wrap: anywhere;
}

.contact-details-spread {
  justify-content: space-between;
  text-align: center;
}

.contact-details-spread-left {
  justify-content: flex-start;
  text-align: left;
}

.contact-details-spread-right {
  justify-content: flex-end;
  text-align: right;
}

.contact-details-spread .contact-field,
.contact-details-spread-left .contact-field,
.contact-details-spread-right .contact-field {
  flex: 0 1 auto;
  min-width: max-content;
  max-width: 100%;
}

.contact-details-spread .contact-field {
  flex: 1 1 auto;
  text-align: center;
}

.contact-field {
  min-width: 0;
  flex: 0 1 auto;
}

.contact-value {
  white-space: normal;
  overflow-wrap: anywhere;
}

.agency_details.d-none,
#split_agency_details.d-none,
.contact-field.d-none,
.contact-field.hidden {
  display: none !important;
}


/*--------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------*/

.hidden {
  display:none !important;
}

.visible {
  display:block !important;
}

.grid {
  display:grid !important;
}

#prev-template, #next-template {
  background-color: #d6d4d8b0;
}

.muuri_holder {
  position: relative;
  /*margin-left: 2rem;*/
}

.muuri_skills {
  position: relative;
  /*margin-left: 1rem;*/
}

.muuri_description {
  position: absolute;
}

.muuri_description span {
  white-space: pre-line;
}


/* ------------------------------------------------------------------
   List indent parity before and after Muuri
------------------------------------------------------------------ */

/* Default list holder state */
.description_holder,
.interests_holder,
.publications_holder,
.research_holder,
.projects_holder,
.muuri_holder {
  position: relative;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* list-indent ON */
.description_holder.list-indent-on,
.interests_holder.list-indent-on,
.publications_holder.list-indent-on,
.research_holder.list-indent-on,
.projects_holder.list-indent-on,
.muuri_holder.list-indent-on {
  margin-left: 2rem !important;
  padding-left: 0 !important;
  width: calc(100% - 2rem) !important;
}

/* list-indent OFF */
.description_holder.list-indent-off,
.interests_holder.list-indent-off,
.publications_holder.list-indent-off,
.research_holder.list-indent-off,
.projects_holder.list-indent-off,
.muuri_holder.list-indent-off {
  margin-left: 1rem !important;
  padding-left: 0 !important;
  width: calc(100% - 1rem) !important;
}

/* fallback for holders without explicit list-indent class */
.description_holder:not(.list-indent-on):not(.list-indent-off),
.interests_holder:not(.list-indent-on):not(.list-indent-off),
.publications_holder:not(.list-indent-on):not(.list-indent-off),
.research_holder:not(.list-indent-on):not(.list-indent-off),
.projects_holder:not(.list-indent-on):not(.list-indent-off),
.muuri_holder:not(.list-indent-on):not(.list-indent-off) {
  margin-left: 2rem !important;
  padding-left: 0 !important;
  width: calc(100% - 2rem) !important;
}

.cv_description,
.cv_skill,
.cv_qualification,
.cv_interest,
.cv_publication,
.cv_research,
.cv_project,
.extra_li,
.muuri_description {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}

.cv_skill,
.cv_qualification {
  cursor: pointer;
}

.cv_skill:active,
.cv_qualification:active {
  cursor: grab;
}

/* Default skills / qualification column state */
.skills-column,
.muuri_skills {
  position: relative;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* list-indent ON */
.skills-column.list-indent-on,
.muuri_skills.list-indent-on {
  margin-left: 2rem !important;
  padding-left: 0 !important;
  width: calc(100% - 2rem) !important;
}

/* list-indent OFF */
.skills-column.list-indent-off,
.muuri_skills.list-indent-off,
.skills-column.no-indent,
.muuri_skills.no-indent {
  margin-left: 1rem !important;
  padding-left: 0 !important;
  width: calc(100% - 1rem) !important;
}

/* fallback for skills/quals columns without explicit list-indent class */
.skills-column:not(.list-indent-on):not(.list-indent-off):not(.no-indent),
.muuri_skills:not(.list-indent-on):not(.list-indent-off):not(.no-indent) {
  margin-left: 2rem !important;
  padding-left: 0 !important;
  width: calc(100% - 2rem) !important;
}

/* skill / qualification items */
.cv_skill,
.cv_qualification,
.muuri_skills .cv_skill,
.muuri_skills .cv_qualification {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* when Muuri has been initialised */
.cv_skill.muuri_description,
.cv_qualification.muuri_description {
  width: 100% !important;
}


.cv_project::before
.cv_project.no-indent::before

/* ------------------------------------------------------------------
   Project history nested bullets
   ------------------------------------------------------------------ */

/* Nested project bullet list should never use browser/native markers */
.projects_holder .project_bullets,
.projects_holder .project_bullets > li,
.projects_holder .project_bullets > li.cv_project_bullet,
.projects_holder .project_bullets > li.cv_project_bullet.no-indent {
  list-style: none !important;
  list-style-type: none !important;
}

/* Remove native marker from nested project bullets */
.projects_holder .project_bullets > li.cv_project_bullet::marker,
.projects_holder .project_bullets > li.cv_project_bullet.no-indent::marker {
  content: "" !important;
  font-size: 0 !important;
}

/* Nested list spacing */
.projects_holder .project_bullets {
  margin: 3px 0 0 0 !important;
  padding: 0 !important;
}

/* Nested project bullet item */
.projects_holder .project_bullets > li.cv_project_bullet,
.projects_holder .project_bullets > li.cv_project_bullet.no-indent {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  padding-left: 18px !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Nested project custom bullet */
.projects_holder .project_bullets > li.cv_project_bullet::before,
.projects_holder .project_bullets > li.cv_project_bullet.no-indent::before {
  content: "○" !important;
  display: block !important;
  position: absolute !important;
  left: 3px !important;
  top: 0 !important;
  width: 10px !important;
  text-align: center !important;
  font-size: 9px !important;
  font-family: "DejaVu Sans", sans-serif !important;
}

/* ------------------------------------------------------------------
   Project continuation shell only
   ------------------------------------------------------------------ */

/*
  Only continuation shells should lose their parent marker.
  Do not apply this to normal .cv_project rows.
*/
.projects_holder > li.cv_project.project-continuation.no-parent-bullet,
.projects_holder > li.cv_project.project-continuation-shell.no-parent-bullet {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Remove native marker only from continuation shell */
.projects_holder > li.cv_project.project-continuation.no-parent-bullet::marker,
.projects_holder > li.cv_project.project-continuation-shell.no-parent-bullet::marker {
  content: "" !important;
  font-size: 0 !important;
}

/* Remove custom parent bullet only from continuation shell */
.projects_holder > li.cv_project.project-continuation.no-parent-bullet::before,
.projects_holder > li.cv_project.project-continuation-shell.no-parent-bullet::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  left: auto !important;
}

/* Continuation shell list alignment */
.projects_holder > li.cv_project.project-continuation.no-parent-bullet > .project_bullets,
.projects_holder > li.cv_project.project-continuation-shell.no-parent-bullet > .project_bullets {
  margin-top: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}


.muuri-item-dragging {
  visibility: hidden;
}

.muuri-item-placeholder {
  animation: wobble 1s;
  animation-iteration-count: infinite;
}

@keyframes wobble {
  0% {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }
  25% {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }
  75% {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }
}

.large-icon {
  font-size: 5rem;     /* Adjust the size as needed */
  color: #22c55e;        /* Set the icon color to green */
}

/* Optional: Change color on hover */
.large-icon:hover {
  color: #1ca44e;    /* Darken the color when hovered over */
}

.no-scroll {
  overflow: hidden !important;
}

.offcanvas-body-menu {
  padding:0 !important;
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cover-field-value {
  resize: none;          /* user doesn't drag, we auto-size */
  overflow: hidden;      /* no scrollbar; height expands */
  min-height: 2.25rem;   /* ~ single-line height */
  line-height: 1.4;
}


#cover-content {
  margin-top: 10px;
}

.cover-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}

.cover-table th,
.cover-table td,
.cover-table .cover-th,
.cover-table .cover-td {
  border: 1px solid #d0d0d0;
  padding: 0.25rem 0.5rem;
  text-align: left !important;
  vertical-align: top;
  font-size: 12px;
  color: rgb(5, 5, 5);
}

/* labels stay tight */
.cover-table th,
.cover-table .cover-th {
  font-weight: bold;
  white-space: nowrap;
  width: 1%;
}

/* values expand */
.cover-table td,
.cover-table .cover-td {
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* optional no-border mode */
.cover-table--none th,
.cover-table--none td,
.cover-table--none .cover-th,
.cover-table--none .cover-td {
  border: none !important;
  padding-left: 0;
}


/* Shared spacing */
.contact-border--solid,
.contact-border--dashed,
.contact-border--solid-round,
.contact-border--dashed-round,
.contact-border--tb-solid,
.contact-border--tb-dashed, {
  padding: 12px 16px;
}

/* FULL BORDERS */
.contact-border--solid { 
  border: 3px solid currentColor; 
}

.contact-border--dashed { 
  border: 3px dashed currentColor; 
}

.contact-border--solid-round { 
  border: 3px solid currentColor;
  border-radius: 25px; 
}

.contact-border--dashed-round { 
  border: 3px dashed currentColor; 
  border-radius: 25px; 
}

/* TOP + BOTTOM ONLY */
.contact-border--tb-solid { 
  border-top: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 0;
}

.contact-border--tb-dashed { 
  border-top: 3px dashed currentColor;
  border-bottom: 3px dashed currentColor;
  border-radius: 0;
}
/* END BORDERS */


/* ---- alignment classes drive flex justification of each pair row ---- */
/* align-left */
.cover-table.align-left.layout-grid2 tr,
.cover-table.align-left.layout-grid3 tr {
  justify-content: flex-start;
}

/* align-center */
.cover-table.align-center.layout-grid2 tr,
.cover-table.align-center.layout-grid3 tr {
  justify-content: center;
}

/* align-right */
.cover-table.align-right.layout-grid2 tr,
.cover-table.align-right.layout-grid3 tr {
  justify-content: flex-end;
}


.page.page-with-padding .muuri-1,
.page.page-with-padding .muuri-2 {
  padding-top: 30px !important;
  margin-top: 0px !important;
}

.page.page-with-header .muuri-1,
.page.page-with-header .muuri-2 {
  padding-top: 20px !important;
  margin-top: 0px !important;
}


#page_break{
  position:absolute;
  z-index:9000;
  display:none;
}

.footer-contact-holder {
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 17px;
  padding: 0 50px;
}

.footer-contact-holder.footer-hidden,
.footer-contact-holder.footer-hidden.footer-layout-left,
.footer-contact-holder.footer-hidden.footer-layout-right,
.footer-contact-holder.footer-hidden.footer-layout-spread {
  display: none !important;
}


.footer-contact-holder .footer-field {
  color: rgb(31, 32, 62);
  vertical-align: middle;
}

.footer-contact-holder a {
  color: inherit;
  text-decoration: none;
}

.footer-contact-holder .footer-field.hidden,
.footer-contact-holder .footer-field.d-none {
  display: none !important;
}

/* LEFT */
.footer-contact-holder.footer-layout-left {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

/* SPREAD */
.footer-contact-holder.footer-layout-spread {
  display: table !important;
  width: 100%;
  table-layout: fixed;
}

.footer-contact-holder.footer-layout-spread > .footer-field {
  display: table-cell !important;
  text-align: left;
  vertical-align: middle;
}

.footer-contact-holder.footer-layout-spread > .footer-field.hidden,
.footer-contact-holder.footer-layout-spread > .footer-field.d-none,
.footer-contact-holder.footer-layout-spread > .footer-field.hidden.d-none {
  display: none !important;
}

/* RIGHT = stacked */
.footer-contact-holder.footer-layout-right {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}

/* links inherit text colour */
.footer-contact-holder a { color: inherit; text-decoration: none; }

/* === Split grid shell (two independent scrollable panes) === */
#splitWrapper {
  display: grid;
  grid-template-columns: 1fr;           /* single pane by default */
  gap: 10px;
  height: calc(100vh - 140px);          /* adjust for header/toolbars */
  min-height: 0;
  overflow-x: hidden;
}
#splitWrapper.split-active {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
.split-pane {
  min-width: 0;                         /* allow shrinking */
  min-height: 0;                        /* enable inner scroll */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 1rem;
  box-shadow: 0 0 1cm rgba(0,0,0,0.1);
}

/* (Optional) hide scrollbars UI */
.split-pane::-webkit-scrollbar { display: none; }
.split-pane { scrollbar-width: none; -ms-overflow-style: none; }

/* === Original pane / iframe === */
#originalPane.d-none { display: none !important; }
#originalFrame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* === Formatted CV container: no transforms here (JS scales .page) === */
#cv_holder { transform: none !important; }

/* When split is active, let the cv_holder fill its column without caps */
#splitWrapper.split-active #cv_holder {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
}

/* === Page + wrapper ===
   - .page keeps its natural A4 dimensions
   - .page has no bottom margin (gap is on wrapper via JS)
   - .page-wrap is a plain block; JS sets width/height/margin per page
*/
#cv_holder .page {
  width: 21cm;
  height: 29.7cm;
  margin-bottom: 0 !important;
}

.page-wrap {
  display: block;
  margin: 0 auto 0;                     /* gap is controlled by JS */
  transform: none;                      /* wrapper itself not scaled */
  transform-origin: top left;
}

/* === Container width helper (only if you toggle .mainContainer in JS) === */
.mainContainer {
  max-width: none !important;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 1300px) {
  .mainContainer {
    max-width: min(1800px, 98vw) !important;
    margin-left: auto;
    margin-right: auto;
  }
}

#originalCanvasViewer canvas { display:block; width:100%; height:auto; }

#pdfInline canvas {
  display: block;
  width: 100%;     /* responsive */
  height: auto;    /* keep aspect */
  margin: 0 0 5px 0;
  box-shadow: none;
}

/* Diagonal wipe */
#toggle_split{
  position: relative;
  overflow: hidden;         /* clip the wipe */
  isolation: isolate;       /* keep z-index sane */
}

/* the wipe stripe */
#toggle_split::after{
  content: "";
  position: absolute;
  top: -150%; left: -150%;
  width: 300%; height: 300%;         /* oversize to cover diagonally */
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    28deg,
    rgba(255,255,255,0) 44%,
    rgba(99,102,241,0.28) 50%,        /* <— change color/opacity here */
    rgba(255,255,255,0) 56%
  );
  transform: translateX(-60%);
  z-index: 1;
}

/* trigger animation by class */
#toggle_split.wipe-on::after{
  animation: split-btn-wipe 900ms ease-in-out both;
  animation-iteration-count: 10;      /* run a few times */
}

@keyframes split-btn-wipe{
  0%   { opacity: 0; transform: translateX(-60%); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}


/*--------------------- BATCH PROCESSING -----------------------*/

/* Make Dropzone border match Bootstrap's primary color */
.cv_dropzone {
    border: 2px dashed #0d6efd; /* Bootstrap 5 primary color */
    border-radius: 0.375rem; /* Bootstrap 5 border-radius */
    padding: 2rem;
    transition: background-color 0.3s, border-color 0.3s;
}

.cv_dropzone:hover {
    background-color: #6366f130; /* Slightly darker on hover */
    border-color: #0b5ed7; /* Darker primary color on hover */
}

/* Customize the message */
.dz-message {
    font-size: 1.25rem;
    color: #6c757d; /* Bootstrap 5 secondary color */
}

/* Adjust the preview container */
.dz-preview .dz-details {
    display: flex;
    align-items: center;
    border-bottom: blue;
}

.dz-preview .dz-details img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-right: 1rem;
    border-radius: 0.375rem;
}

.dz-preview .dz-remove {
    margin-left: auto;
}

.disabled-dropzone {
  opacity: 0.6;
  pointer-events: none;
}

.batch-file-name {
  max-width: 185px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#batch-progress-panel {
  display: flex;
  flex-direction: column;
  max-height: 50vh;   /* or whatever size feels right */
}

#batch-progress-list {
  overflow-y: auto;
  flex: 1 1 auto;
  max-height: 400px;  /* critical for flex scrolling */
}

.role-extra-title {
  font-weight: bold;
}