body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.content-area {
   flex: 8;
   position: relative;
   overflow-y: auto;
   padding: 10px 20px; /* Reduce padding to make cursor positioning more accurate */
   min-height: 100%; /* Ensure it can grow with the content */
   z-index: 1;
   background-color: #fff;
   margin-right: 220px;
   margin-left: 20px; /* Left margin to leave space for potential left sidebar */
   position: relative;
   height: auto; /* Set to auto to grow dynamically */
   margin-top: 80px;
   scroll-behavior: smooth;
    
   overflow: visible;
   cursor: text; /* Make sure the cursor indicates that text can be selected */
   line-height: 1.5; /* Add line-height for better control of cursor placement */
}


#toolbar {
position: fixed;
top: 80px;
right: 20px;
width: 220px;
height: calc(100% - 80px);
background-color: #f8f9fa;
padding: 10px;
border-left: 1px solid #ddd;
overflow-y: auto;
z-index: 1050; /* Increase z-index to ensure it is above other content */
}


.toolbar-button {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 10px;
   border: 1px solid #e0e0e0;
   border-radius: 5px;
   background-color: #f8f9fa;
   cursor: pointer;
   margin-bottom: 10px;
}



.editable-page {
    border: 1px solid #ddd;
    padding: 20px;
    background-color: #fff;
    min-height: 600px;
    position: relative;
    margin-left: 220px;
    margin-top: 80px;
    cursor: text;
}

.editable-line {
    border: 1px solid transparent;
    padding: 5px;
    margin-bottom: 5px;
    position: relative;
    text-align: left;
}

.editable-line:focus {
    border-color: #1d4e89;
    outline: none;
}

.editable-page h1, .editable-page h2, .editable-page h3, .editable-page h4, .editable-page h5, .editable-page h6 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

.editable-page p {
    font-size: 18px;
    margin-bottom: 10px;
}



/* Show buttons when the element or the button itself is hovered */
.dropped-element:hover .control-button,
.control-button:hover {
    display: flex;
}



.dropped-element input,
.dropped-element select,
.dropped-element textarea {
    width: auto; /* Adjust the width of form elements to be based on content */
    max-width: 100%; /* Ensure they don’t overflow */
}

.dropped-element .move-button {
    right: 115px;
}

.dropped-element .duplicate-button {
    right: 80px;
}



.dropped-element .resize-button {
    right: 45px;
}

.dropped-element .close-button {
    right: 10px;
}

.toolbar {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */

    gap: 8px;
    margin-bottom: 10px;
}



.toolbar-button {
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 10px;
    border: 0px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f8f9fa;
    cursor: pointer;
}



.toolbar-button span {
    font-size: 12px;
}



.toolbar-button:hover {
    background-color: #42a5f5;
}

.nav-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    gap: 10px;
    border-bottom: 1px solid #ccc;
}

.nav-tabs .nav-item {
    position: relative;
    margin-right: 5px;
}

.nav-tabs .nav-link {
    color: #f5f6f7;
    background-color: transparent;
    border: none;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link.active {
    color: #1d4e89;
    border-bottom-color: #1d4e89;
    font-weight: bold;
}

.nav-tabs .nav-link:hover {
    color: #0056b3;
}

.btn-close {
    position: absolute;
    top: 0;
    right: -10px;
    color: #888;
    background-color: transparent;
    border: none;
    font-size: 12px;
    cursor: pointer;
}

#add-tab {
    color: #888;
    background-color: transparent;
    border: none;
    padding: 0 10px;
    font-size: 20px;
    cursor: pointer;
    margin-left: 10px;
    line-height: 1;
}

#add-tab:hover {
    color: #666;
}




#top-toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #333;
padding: 10px;
z-index: 1001;
box-shadow: #333;
}

#top-toolbar .btn {
border-radius: 5px;  /* Slightly rounded corners for each button */
margin-right: 3px;   /* Space between buttons */
background-color: #333;
font-size: 12px;  /* Set a smaller font size */
color: #f1f1f1;   /* Set the desired font color */
}

#top-toolbar .btn:hover {
background-color: #0b58ca;  /* Button hover background color */
}

/* Adding height constraints to sortable area */
.sortable-tab {
   height: auto; /* Let the height grow with the content */
   max-height: 80vh; /* Set a max height to prevent content overflow */
   overflow-y: auto; /* Enable scrolling */
   width: 90%;
   background-color: #f8f9fa;
   border: 1px solid #ddd;
}

.sortable-placeholder {
    border: 1px dashed #ccc;
    background: #f0f0f0;
    height: 100px;
    width: 100%;
    margin-bottom: 1rem;
}

.ui-draggable-dragging {
    opacity: 0.6;
}

/* Context menu toolbar management including font and back color started */

#customContextMenu {
    position: absolute;
    z-index: 9999; /* High value to ensure it’s above other elements */
    display: none; /* Hidden by default */
    background-color: #333; /* Matches the sidebar background color */
    border: none;
    box-shadow: 0px 0px 20px rgba(75, 46, 46, 0.2);
    padding: 10px; /* Padding similar to the left sidebar */
    border-radius: 5px;
}

/* Styling buttons within the context menu */
#customContextMenu button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 8px; /* Padding similar to the toolbar buttons */
    background-color: #363b3e; /* Matches the toolbar button background color */
    cursor: pointer;
    font-size: 12px; /* Matches the font size in the toolbar */
    color: #fff; /* Text color similar to the toolbar buttons */
    border: none;
    border-radius: 4px;
}

/* Hover effect for buttons */
#customContextMenu button:hover {
    background-color: #007bff; /* Hover color updated to your preference */
}

/* Adjust dropdown to size based on content */
#customContextMenu select {
    width: auto; /* Dynamic width based on content */
    min-width: 100px; /* Minimum width for smaller content */
    max-width: 300px; /* Maximum width to avoid overly wide dropdowns */
    background-color: #4b4f55; /* Consistent with the menu */
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: 4px;
    overflow: hidden;
    white-space: nowrap; /* Prevents wrapping */
}
/* Remove excess blank space */
#customContextMenu select option {
    white-space: nowrap; /* Prevents text wrapping */
    padding: 5px 10px; /* Adds padding for a cleaner look */
}
/* Dropdown container to align with content size */
#customContextMenu .dropdown-container {
    display: inline-block;
    width: auto; /* Adjusts container width based on the content */
    min-width: 100px;
    max-width: 300px;
}

/* Hover effect for dropdowns */
#customContextMenu select:hover {
    background-color: #50555e; /* Slightly lighter grey for hover */
}

#customContextMenu .context-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px; /* Similar gap to the toolbar */
    margin-bottom: 10px;
}

#customContextMenu button i {
    font-size: 16px; /* Icon size similar to toolbar buttons */
    margin-bottom: 4px;
}

#customContextMenu .context-menu-container {
    width: 100%;
}

/* Context menu toolbar management including font and back color ended */

.dropped-element:focus {
    outline: none;
}

.modal {
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 1050;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   outline: 0;
   background-color: rgba(0, 0, 0, 0.5);
   will-change: transform;
}




/* Modal Dialog Style */
.modal-dialog {
position: relative;
width: auto !important;
height: auto !important;
border: none !important;
overflow: hidden;
transition: border-color 0.3s ease-in-out;
box-shadow: none !important;
padding-left: 15px; /* Add padding to the left for better alignment */
margin: 0 auto;

}

.modal-dialog * {
  cursor: default !important;
}
/* Movable Modal Styling */
.modal-header {
    cursor: grab;
  }
  
  .draggable-modal {
    position: absolute !important; /* Allow exact positioning */
    margin: 0 !important; /* Override bootstrap default */
  }
  

/* Remove the purple border and add smooth highlights */
.modal-dialog:hover {
border-color: #6a11cb; /* Add border on hover for better visibility */
}

/* Remove border around modal */
.modal-dialog,
.modal-dialog:hover {
  border: none !important;
  box-shadow: none !important;
}


.modal-title {
margin: 0;
font-size: 18px;
}

.modal-body {
margin-top: 15px;
max-height: 400px; /* Adjust as needed */
overflow-y: auto;
}



/* Enhanced Styling for Modal Footer */
.modal-footer {
background-color: #f1f1f1;
padding: 1rem;
display: flex;
justify-content: space-between;
transition: width 0.3s ease-in-out; /* Smooth resizing for footer width */
}

/* Modal Dialog Style */
.modal-dialog.interact-resizable {
position: relative;
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
border:0; /* Initially transparent border */
overflow: hidden;
cursor: default !important;
transition: border-color 0.3s ease-in-out;
resize: none !important; /* Allow resizing from any edge or corner */
box-sizing: border-box; /* Include padding and borders in the element's total width and height */
pointer-events: auto;
}

.modal-dialog.interact-resizable * {
    cursor: default !important;
  }
  

/* Highlight Border on Hover */
.modal-dialog.interact-resizable:hover {
border-color: #6a11cb; /* Add border on hover for better visibility */
}

.modal-footer .btn {
    min-width: 110px;
    font-weight: 500;
  }

  .modal-footer .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 10px;
  }

/* ✅ Preserve original size for Quill container */
#quillEditorContainer {
  height: 40vh;
  overflow-y: auto;
  margin-bottom: 10px; /* ✅ Ensures space above footer buttons */
}

/* ✅ Reduce Add Input Container size & spacing */
.add-input-container {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 4px 8px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}

  

/* ✅ Keep Quill editor and footer buttons responsive on mobile */
@media (max-width: 768px) {
  .modal-dialog {
    max-height: 95vh;
    overflow: hidden;
  }

  .modal-body-custom {
    max-height: 35vh; /* ✅ Adjust to keep content within screen */
    overflow-y: auto;
  }

  #quillEditorContainer {
    height: 40vh; /* ✅ Maintain desired height */
    margin-bottom: 10px;
  }

  .add-input-container {
    font-size: 13px;
    padding: 2px 6px;
    gap: 6px;
  }

  /* ✅ Footer buttons stay inline, full-width not needed */
  .modal-footer .btn {
    min-width: 110px;
    padding: 8px 14px;
    font-size: 14px;
  }
}


/* Consistent Design for Quill Editor */
.quill-editor-container {
margin-top: 5px;
margin-bottom: 25px;
height: 40%;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px;
border-radius: 8px;
transition: width 0.3s ease, height 0.3s ease;
}


/* Smooth transition for resizing elements inside the modal */
.modal-body,
.form-group,
.add-input-container,
.button-group {
transition: all 0.3s ease-in-out;
padding-left: 15px; /* Ensure consistent left padding for all elements */
padding-top: 0%;
}


/* Add Input Button Styling */
.btn-orange {
background-color: #ff5722;
color: white;
border: none;
border-radius: 5px;
padding: 8px 12px;
transition: background-color 0.3s, transform 0.2s;
}

.btn-orange:hover {
background-color: #e64a19;
transform: scale(1.05);
}

.modal-resizable {
resize: both;
overflow: auto;
min-width: 300px;
min-height: 300px; /* Adjusted height */
}

.card-title[contenteditable],
.card-text[contenteditable],
.footer-section h3[contenteditable],
.footer-section p[contenteditable],
.footer-section ul li[contenteditable],
.footer-section ul li a[contenteditable],
.control-button[contenteditable] {
outline: none;
}

footer {
background-color: #42a5f5;
color: #fff;
padding: 20px;
width: 100%;
position: relative;
margin-top: 20px;
}

footer .footer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
text-align: center;
}

footer .footer-section {
position: relative;
}

footer .footer-section h3,
footer .footer-section p,
footer .footer-section ul {
position: relative;
list-style: none;
padding: 0;
}

footer .footer-section h3[contenteditable],
footer .footer-section p[contenteditable],
footer .footer-section ul[contenteditable] {
outline: none;
}


footer .footer-section ul li {
margin-bottom: 5px;
}

footer .footer-section ul li a {
color: #fff;
text-decoration: none;
}

footer .social-icons {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 20px;
position: relative;
}

footer .social-icons a {
color: #fff;
text-decoration: none;
margin-right: 10px;
font-size: 24px;
cursor: move;
}



.file-modal-dialog {
background-color: #fff;
padding: 20px;
border-radius: 5px;
width: 400px;
}

.file-modal-body {
margin-top: 15px;
max-height: 300px;
overflow-y: auto;
}

.file-item {
display: flex;
justify-content: space-between;
align-items: center;
}

.file-item .delete-file {
cursor: pointer;
color: red;
font-size: 14px;
}

.spinner {
display: none;
width: 25px;
height: 25px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
}

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

100% {
   transform: rotate(360deg);
}
}

.styled-image-container {
flex-shrink: 0;
width: 150px;
position: relative;
}

.styled-image {
width: 100%;
border-radius: 10px;
}

.styled-badge {
position: absolute;
top: 10px;
right: -30px;
background: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.styled-content {
padding-left: 20px;
}

.styled-title {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}

.styled-description {
font-size: 14px;
color: #555;
margin-bottom: 20px;
line-height: 1.6;
}

.styled-subtitle {
font-size: 18px;
color: #444;
margin-bottom: 5px;
}

.styled-credentials {
font-size: 14px;
color: #666;
margin-bottom: 20px;
}

.styled-button {
background-color: #333;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-align: center;
width: fit-content;
}

.styled-button:hover {
background-color: #555;
}



.toolbar-container {
width: 100%;
}



.toolbar-button {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 8px;
background-color: #363b3e;
cursor: pointer;
font-size: 12px;
}

.toolbar-button i {
font-size: 16px;
margin-bottom: 4px;
}

#show-more {
cursor: pointer;
color: #f8fafb;

}
#show-more-btn, #go-top-btn {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#show-more {
display: none;
background-color: #333333;
color: white;
border: none;
padding: 10px;
width: 100%;
text-align: left;
text-decoration: underline;
margin-top: 10px;
}

#show-more-btn {
width: 100%;
padding: 8px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
margin-top: 10px;
}

#show-more-btn:hover {
background-color: #0056b3;
}

.editing input.dropdown-option {
width: calc(100% - 22px);
padding: 5px;
margin-bottom: 5px;
border: 1px solid #e2e8f0;
border-radius: 4px;
}

/* Carousel Styles */
.swiper-container {
width: 100%;
overflow: hidden;
}

.swiper-slide {
flex-shrink: 0;
width: auto;
transition: transform 0.3s ease;
}

.swiper-wrapper {
display: flex;
}

/* Additional carousel buttons */
.deal-button {
display: block;
text-align: center;
padding: 10px;
background-color: #f6ad55;
color: #ffffff;
text-decoration: none;
border-radius: 4px;
}

.dropdown:hover .dropdown-menu {
display: block;
}


.modal {
z-index: 1050;
}

.modal-backdrop {
z-index: 1040;
}




/* Styling the input box of the tab page text started */
#autocompleteInput {
       width: 100%;
       padding: 10px;
       font-size: 16px;
       border: 1px solid #ccc;
       border-radius: 5px;
       box-sizing: border-box;
   }

   /* Styling the autocomplete dropdown */
   .ui-autocomplete {
       max-height: 200px;
       overflow-y: auto;
       overflow-x: hidden;
       background-color: white;
       border: 1px solid #ccc;
       font-family: 'Roboto', sans-serif;
       font-size: 14px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }

   /* Styling each item in the dropdown */
   .ui-menu-item-wrapper {
       padding: 10px;
       border-bottom: 1px solid #f1f1f1;
       display: flex;
       align-items: center;
   }

   .ui-menu-item-wrapper:last-child {
       border-bottom: none;
   }

   .ui-menu-item-wrapper:hover {
       background-color: #f0f0f0;
   }

   .ui-autocomplete-category {
       font-weight: bold;
       padding: 10px 10px;
       color: #333;
       border-bottom: 1px solid #ccc;
   }

   /* Icon style */
   .icon {
       margin-right: 10px;
       color: green;
   }

   /* Hide scrollbar for Chrome, Safari and Opera */
   .ui-autocomplete::-webkit-scrollbar {
       display: none;
   }

   /* Hide scrollbar for IE, Edge and Firefox */
   .ui-autocomplete {
       -ms-overflow-style: none;  /* IE and Edge */
       scrollbar-width: none;  /* Firefox */
   }

   /* Remove border from editable areas */
   .editable-area {
       border: none;
       outline: none; /* Optional: remove the outline when the element is focused */
   }

   /* Optional: Remove the focus outline to make it completely borderless */
   .editable-area:focus {
       outline: none;
   }

   .tooltip {
   position: absolute;
   background-color: #363b3e;
   color: white;
   padding: 5px;
   border-radius: 4px;
   font-size: 12px;
   z-index: 1050;
   pointer-events: none;
}


.toolbar-dropdown {
   position: relative;
   display: inline-block;
}

/* landing page dropdown list style designing started */
.dropdown-btn {
   background-color: #3b3c3d;
   color: #ffff;
   padding: 8px;
   font-size: 14px;
   border: none;
   cursor: pointer;
   width: 100%;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: none;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}

.toolbar-dropdown:hover .dropdown-content {
   display: block;
}
/* landing page dropdown list style designing ended */

    /* Styling the input box of the tab page text ended */




/* find and replace started */
/* find and replace started */

.modal-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 90vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-left: 15px; /* Add margin to shift the content slightly to the right */
    }
/* Prevent Flickering during Resize and Movement */
body.modal-open {
overflow: hidden !important;
}

.modal-dialog.interact-resizable:hover,
.modal-dialog.interact-resizable:focus-within {
border-color: #6a11cb !important;
}


.modal-content h2 {
margin-top: 0;
}

.close {
position: absolute;
right: 15px;
top: 15px;
font-size: 20px;
cursor: pointer;
}

/* ads create started*/
#ads-container {
       padding: 20px;
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
   }
   .ad-card, .header-section {
       position: relative;
       padding: 20px;
       border-radius: 10px;
       background-color: #f8f8f8;
       border: 1px solid #ccc;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       resize: both;
       overflow: hidden;
       cursor: move;
   }
   .control-buttons {
       position: absolute;
       right: 10px;
       gap: 5px;
       top: -30px;
       right: 10px;
       display: none;
       z-index: 10;
   }
   .control-buttons button {
   background: #f44336; /* Default red for close button */
   color: white;
   border: none;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   cursor: pointer;
   font-size: 16px;
   line-height: 30px;
   text-align: center;
}

.control-buttons button.duplicate-btn {
background: #2196f3; /* Blue for duplicate button */
}

.control-buttons button:hover {
transform: scale(1.2); /* Slight zoom effect */
transition: transform 0.2s ease-in-out;
}

.banner.temp-component.table {
position: relative;
border: 1px dashed #ccc; /* Default border */
transition: border 0.3s ease, box-shadow 0.3s ease;
}

.banner.temp-component.table:hover {
border: 2px solid #4caf50; /* Highlighted border on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slight shadow effect */
}


   .control-buttons .close-btn {
       background-color: #ff0000;
   }
   img {
       max-width: 100%;
       height: auto;
       margin-bottom: 10px;
       cursor: move;
   }
   .change-image-btn {
       display: block;
       margin: 10px auto;
       padding: 5px 10px;
       cursor: pointer;
       background-color: #1DA1F2;
       color: white;
       border: none;
       border-radius: 5px;
   }
   .movable {
       cursor: move;
   }
   .header-section {
       grid-column: span 4;
       text-align: center;
       background-color: #f0f8ff;
   }

/* ads create ended */


/* innar banner create started */
.banner {
position: relative;
padding: 20px;
background-color: #f0f0f0;
border-radius: 8px;
}

.inner-elements-container {
position: relative;
width: 100%;
height: 100%;
}

.inner-element-wrapper {
position: relative;
border: 2px dashed #4a90e2;
padding: 10px;
border-radius: 8px;
transition: all 0.3s ease;
display: inline-block;
}

.inner-element-wrapper:hover,
.inner-element-wrapper.active {
border: 2px solid #4a90e2;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.inner-control-buttons {
display: none;
position: absolute;
top: 5px;
right: 5px;
}

.inner-element-wrapper .inner-control-buttons {
display: none;
position: absolute;
top: -20px;
right: -20px;
display: flex;
gap: 5px;
}

.inner-element-wrapper.active .inner-control-buttons {
display: flex;
}

.inner-control-buttons button {
width: 24px;
height: 24px;
border-radius: 50%;
background: #ffffff;
border: 1px solid #4a90e2;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.inner-control-buttons button:hover {
background: #4a90e2;
color: white;
}

.inner-element-wrapper .inner-control-buttons .move-btn {
cursor: move;
}

.inner-element-wrapper .inner-control-buttons .resize-btn {
cursor: nwse-resize;
}

.inner-element-wrapper .inner-control-buttons .close-btn {
cursor: pointer;
color: red;
}

.text-element h2 {
margin: 0;
padding: 10px;
}
/* Ensure that buttons only appear on hover */
.inner-control-buttons i {
display: none;
}

.inner-element-wrapper:hover .inner-control-buttons i,
.banner:hover .inner-control-buttons i {
display: block;
}

/* innar banner create ended */




#leadsStatusChart,
#campaignRevenueChart,
#opportunityChart,
#purchasesChart,
#annualRevenueChart {
width: 100%;
height: 150px; /* Adjust this value as needed */
max-height: 200px; /* Set a maximum height if necessary */
}

table {
width: 100%;
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}



/* Style for the resizable handles */
.ui-resizable-handle {
background: #ccc;     /* Makes the resize handles visible */
border-radius: 50%;   /* Turns the resize handles into circles */
}

/* Style for the corner handles */
.ui-resizable-ne, .ui-resizable-se, .ui-resizable-sw, .ui-resizable-nw {
width: 5px;
height: 5px;
}

/* Style for the side handles */
.ui-resizable-n, .ui-resizable-e, .ui-resizable-s, .ui-resizable-w {
width: 5px;
height: 5px;
}

#minimize-maximize-btn {
background-color: #ffffff;
color: #6a11cb;
border-radius: 50%;
border: none;
width: 30px;
height: 30px;
text-align: center;
line-height: 20px;
font-size: 18px;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
position: absolute;
top: 10px;
right: 10px;
}

/* ...................the content submission box draggable started...................*/

#submit-content {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
}

#submit-content .card-title {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}

#submit-content .form-control {
background: rgba(255, 255, 255, 0.8);
color: #333;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 15px;
}

#submit-content .btn {
background: #ffffff;
color: #6a11cb;
border-radius: 5px;
border: none;
padding: 10px 20px;
transition: background 0.3s ease;
}

#submit-content .btn:hover {
background: #6a11cb;
color: #ffffff;
}



/* ...................the content submission box draggable ended...................*/



/* modals design bootstrap started*/
.modal-header-custom, .modal-footer-custom {
   background: linear-gradient(45deg, #6a11cb, #2575fc); /* Same gradient for both header and footer */
   color: white;
}

.modal-body-custom {
   background: linear-gradient(45deg, #f8f9fa, #e9ecef);
}



.btn-close:hover {
   opacity: 1;
}




/* modals design bootstrap ended*/


/* Pinterst facebook movable draggable started*/


/* Pinterst facebook movable draggable ended*/

/* Custom CSS for the email layout */

/* email format align with wordpress started*/
.wp-block-columns {
display: flex;
justify-content: center;
gap: 10px;
}

.wp-block-button__link {
display: inline-block;
border-radius: 5px;
}

.wp-block-image img {
border-radius: 10px;
}
/* email format align with wordpress started*/

/* Ensure Gutenberg block compatibility and responsiveness started*/
@media (max-width: 768px) {
   #instagram-container {
       max-width: 100%;
       padding: 10px;
   }

   .wp-block-group {
       padding: 10px 0;
   }

   .wp-block-button__link {
       padding: 10px;
       font-size: 16px;
   }
}


#quillEditor {
height: 100%; /* Make the Quill editor fill the container */
overflow-y: auto;
}


/* generated content placement inside the tab from the dynamic modal with smaple example content started*/
.generated-content-element {
position: relative;
z-index: 10; /* Ensure it's on top */
background-color: #fff; /* Set a solid background color to cover other content */
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
.some-other-elements {
position: relative;
z-index: 1; /* Ensure other elements have a lower stacking context */
}


/* generated content placement inside the tab from the dynamic modal with smaple example content ended*/


/* image moving started*/

/* Ensure the dragged elements are always on top */
.dropped-element {
position: absolute;  /* Keep the dragged element absolute */
z-index: 9999;  /* Make sure it's above the content area */
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}


.dropped-element:hover {
border: 2px solid #66bb6a; /* Show border when hovered */
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Optional: add shadow on hover */
}

.dropped-element:hover .control-button {
opacity: 1;
display: flex; /* Show control buttons when hovered */
}


.control-button {
width: 30px;
height: 30px;
background-color: #66bb6a; /* Green color for buttons */
border: 1px solid #66bb6a;
border-radius: 50%;
color: white;
cursor: pointer;
z-index: 10;
display: none; /* Initially hidden */
align-items: center;
justify-content: center;
opacity: 0;
position: absolute;
transition: opacity 0.2s ease-in-out;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
}


.selected-image {
display: block;
}

.resize-handle, .rotate-handle {
width: 25px;
height: 25px;
background-color: #ddd;
border-radius: 50%;
}

/* When dragging, ensure the dragged element is above everything */
.dropped-element.dragging {
opacity: 0.8;
cursor: move;
z-index: 1100;  /* Ensure the dragging element appears above everything */
}

.dragging {
position: absolute; /* Or use fixed if necessary */
}


/* image moving ended*/



/* active landing page tab background area while, content placing Started */


/* landing-page-tab and landing-page size started*/

/* Ensure the tab and content area have the same size */
#landing-page-tab {
width: 80%; /* Set the tab width to fill the parent container */
display: inline-block; /* Ensures it behaves like a block element */
}

#landing-page {
width: 80%; /* Set the content area width to match the tab */
min-height: 100vh; /* Ensure it takes the full height of the viewport */

}

#tabList {
width: 100%; /* Ensure the tab list is full width */
}

#content-area-landing-page {
width: 100%; 
min-height: 100vh;  /* Ensure the content area is always at least as high as the viewport */
position: relative;
scroll-behavior: smooth;
overflow-y: auto;  /* Add vertical scrolling */
overflow-x: hidden; /* Disable horizontal scrolling if not required */
}


/* landing-page-tab and landing-page size ended*/
/* Ensure that the Quill editor and the sortable landing page match in size */
#editor-container {
width: 100%; /* Full width */
height: 100%; /* Full height to match #sortable-landing-page */
min-height: 300px; /* Set a minimum height */
}

/* Set the background of the entire content area to white */
#content-area-landing-page {
background-color: white; /* Add this to make the background white */
width: 100%; 
min-height: 100vh; 
position: relative;
scroll-behavior: smooth;
}

/* Ensure the overlay has a white background */
#overlay-writing-layer {
background-color: white; /* Set the background to white */
width: 100%; 
padding: 10px;
z-index: 1;
color: black; /* Ensure text is black on white background */
min-height: 100%;
padding-top: 0 !important;  /* Ensure there's no padding at the top */
margin-top: 0 !important;   /* Remove any top margin */
padding: 0;  /* Remove unnecessary padding */
margin: 0;   /* Remove unnecessary margin */
line-height: 1.5;  /* Ensure proper line height */
overflow: auto; /* Make sure content scrolls naturally */
white-space: pre-wrap; /* Ensure spaces and new lines are respected */
height: auto; /* Ensure the editor grows naturally */
position: absolute;
top: 0; /* Start at the top */
}
/* Fix first-line behavior */
#overlay-writing-layer::before {
content: none !important; /* Remove any pseudo-element */
}


/* Ensure the sortable area has a white background */
#sortable-landing-page {
background-color: white; /* Set the background to white */
width: 100%; 
min-height: 100px;
z-index: 2;
padding-top: 20px; /* Also ensure padding here */
scroll-behavior: smooth;
}



/* Remove the border and outline for the overlay when clicked */
#overlay-writing-layer:focus {
outline: none; /* Remove the focus outline */
border: none;  /* Remove any borders */
background-color: white; /* Ensure the background stays white */
}

/* Remove the border and outline from any focusable elements inside */
#content-area-landing-page:focus {
outline: none; /* Remove focus outline */
border: none;  /* Remove any borders */
}

/* Ensure no pseudo-elements are adding dots */
#overlay-writing-layer::before,
#overlay-writing-layer::after {
content: none; /* Remove any pseudo-elements that might be adding dots */
}


#overlay-writing-layer:focus, #sortable-landing-page:focus {
outline: none; /* Remove focus outline */
border: none;  /* Remove any borders */
}



/* Remove focus border for any content inside */
#overlay-writing-layer *:focus, #sortable-landing-page *:focus {
outline: none; /* Ensure inner elements like text or divs do not have borders */
border: none;
}





/* active landing page tab background area while, content placing ended */


.modal-lg {
   max-width: 90%;
   max-height: 90%;
}
.spinner-border {
margin-left: 10px;
}

/* global gradient color apply started */

#gradient-color-pickers {
position: absolute;
display: none;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
z-index: 1000;
transition: opacity 0.3s ease-in-out; /* Smooth appearance */
}

#font-color-picker {
position: absolute;
display: none;
}

/* global gradient color apply ended */

/* Limit the height of the dropdown content and enable scrolling if it overflows */
.toolbar-dropdown .dropdown-content {
max-height: 300px; /* Set the maximum height you prefer */
overflow-y: auto;  /* Enable vertical scrolling */
scrollbar-width: thin; /* For a thin scrollbar (optional) */
scrollbar-color: #888 #f1f1f1; /* Customize the scrollbar colors (optional) */
}

/* Customize the scrollbar for WebKit browsers (Chrome, Safari) */
.toolbar-dropdown .dropdown-content::-webkit-scrollbar {
width: 8px; /* Width of the scrollbar */
}

.toolbar-dropdown .dropdown-content::-webkit-scrollbar-track {
background: #f1f1f1; /* Background of the scrollbar track */
}

.toolbar-dropdown .dropdown-content::-webkit-scrollbar-thumb {
background-color: #888; /* Scrollbar thumb color */
border-radius: 10px; /* Round the scrollbar edges */
}
.toolbar-dropdown .dropdown-content {
scroll-behavior: smooth;
}


/* similar wordpress popup menu started */
/* Set the toolbar to a fixed height and enable scrolling */
#toolbar-set-1, #toolbar-set-2, #toolbar-set-3, #toolbar-set-4, #toolbar-set-5 {
max-height: 600px; /* Adjust the height as needed */
overflow-y: auto;  /* Enable vertical scrolling */
overflow-x: hidden; /* Prevent horizontal scrolling if needed */
scrollbar-width: thin; /* Optional: Thin scrollbar */
scrollbar-color: #888 #f1f1f1; /* Optional: Scrollbar colors */
}

/* Scrollbar customization for WebKit browsers (Chrome, Safari) */
#toolbar-set-1::-webkit-scrollbar, 
#toolbar-set-2::-webkit-scrollbar, 
#toolbar-set-3::-webkit-scrollbar, 
#toolbar-set-4::-webkit-scrollbar, 
#toolbar-set-5::-webkit-scrollbar {
width: 8px;
}

#toolbar-set-1::-webkit-scrollbar-track, 
#toolbar-set-2::-webkit-scrollbar-track, 
#toolbar-set-3::-webkit-scrollbar-track, 
#toolbar-set-4::-webkit-scrollbar-track, 
#toolbar-set-5::-webkit-scrollbar-track {
background: #f1f1f1;
}

#toolbar-set-1::-webkit-scrollbar-thumb, 
#toolbar-set-2::-webkit-scrollbar-thumb, 
#toolbar-set-3::-webkit-scrollbar-thumb, 
#toolbar-set-4::-webkit-scrollbar-thumb, 
#toolbar-set-5::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
}

/* similar wordpress popup menu ended */



/* Custom Modal Styles */


   /* Increase the touch area for list items */
   #file-list .list-group-item {
       padding: 1rem 1.5rem;
       font-size: 1.1rem;
   }

   /* Add hover and active states for better feedback */
   #file-list .list-group-item:hover {
       background-color: #f0f0f0;
       cursor: pointer;
   }

   #file-list .list-group-item:active {
       background-color: #e0e0e0;
   }



   html {
scroll-behavior: smooth;
}



.timeline-container {
position: absolute; /* Or relative depending on the context */
left: 0;
top: 0;
width: 100%;
}



/* page and toolbar size position admustment started */

/* General layout for the page */
.page-layout {
display: flex;
width: 100%;
height: 100vh; /* Full-height page */
position: relative;
}
/* Remove the left sidebar */

/* Adjust toolbar container to move it to the right */
.toolbar-container {
width: 11%; /* Adjust width as necessary */
position: fixed; /* Keep it fixed */
right: 0; /* Align the toolbar to the right side */
top: 0; /* Stick to the top */
height: 100vh; /* Full height */
background-color: #333; /* Background color */
color: #fff; /* Text color */
z-index: 1000; /* Ensure it's above other content */
padding: 10px; /* Internal padding */

overflow: visible;
}

/* Blank space of 1% between toolbar and content */
.space-between {
width: 1%;
height: 100vh;
}

/* Content area taking the remaining 80% */
/* Content area taking the remaining 88% */
/* Container holding both toolbar and content area */
#resizable-container {
display: flex;
height: 100vh;
}

/* Resizable left sidebar */

/* Ensure the content area has a white background */
#content-area {
background-color: white;
width: 100%; 
min-height: 100px;
z-index: 10; /* Ensure z-index is lower than the toolbar */
padding-top: 20px;
}

/* Remove border and outline when clicking inside the editable content area */
#overlay-writing-layer:focus, #content-area:focus {
outline: none; /* Remove focus outline */
border: none;  /* Remove any borders */
}

/* Remove focus border for any content inside */
#overlay-writing-layer *:focus, #content-area *:focus {
outline: none; /* Ensure inner elements like text or divs do not have borders */
border: none;
}

/* Ensure that the container resizes smoothly */
#resizable-container {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100vh;
overflow: hidden;
}

#left-sidebar, #content-area {
resize: horizontal; /* Allows both sections to be resized horizontally */
overflow: auto;
}


/* Toggle button */
.toggle-toolbar-btn {
position: fixed;
left: 20%;
top: 10px;
z-index: 10;
cursor: pointer;
}

#toggle-toolbar {
width: 30px;
height: 30px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

/* When the toolbar is hidden */
.hidden-toolbar .toolbar-container {
width: 0; /* Hides the toolbar */
padding: 0; /* No padding when hidden */
}

.hidden-toolbar #content-area {
width: 100%; /* Expands content to fill the full width */
margin-left: 0; /* Moves content to take up full width */
}

.hidden-toolbar .toggle-toolbar-btn {
left: 10px; /* Moves toggle button to the left edge */
}



/* page and toolbar size position admustment ended kabir*/ 

/* Custom modal size */
/* Custom modal size */
.modal-custom-size {
max-width: 80%; /* Increase the width as needed, e.g., 90% of the viewport */
width: 90%;
}






/* Dynamic Inputs Container */
#dynamicInputsContainer {
height: 15vh; /* Adjust the height for the dynamic inputs container */
overflow-y: auto; /* Allow scrolling if there are too many inputs */
margin-bottom: 10px; /* Add some space below the inputs */
}

/* Tooltip icon styling */
.fas.fa-question-circle {
cursor: pointer; /* Pointer to indicate interactive help icons */
}



/* Success Modal Custom Styles */
.success-modal-header, .success-modal-footer {
background: linear-gradient(45deg, #6a11cb, #2575fc);
border-bottom: none;
padding: 0.5rem; /* Reduce padding to make it compact */
}



.success-modal-body {
padding: 0.5rem;
}

/* Compact Modal Styles for Success Modal */
.success-modal-dialog-centered.modal-sm {
max-width: 350px; /* Smaller width for compact look */
margin: auto;
}

.success-modal-content {
max-height: 200px; /* Limit height of the success modal */
overflow: hidden; /* Hide content that overflows */

}


/* Button Customization for Success Modal */
.success-btn-outline-light {
border-color: white;
color: white;
}

.success-btn-outline-light:hover {
background-color: white;
color: #6a11cb;
}

/* Save Modal Custom Styles */
.save-modal-header, .save-modal-footer {
background: linear-gradient(45deg, #6a11cb, #2575fc);
border-bottom: none;
padding: 0.5rem; /* Reduce padding to make it compact */
}

.save-modal-body {
padding: 0.5rem;
}

/* Compact Modal Styles for Save Modal */
.save-modal-dialog-centered.modal-sm {
max-width: 350px; /* Smaller width for compact look */
margin: auto;
}

/* Remove Extra Padding for Save Modal */
.save-modal-content {
padding: 0; /* Remove default padding */
margin: 0; /* Remove default margin */
border-radius: 8px; /* Optional: add slight border radius for aesthetics */
max-height: 200px; /* Limit height of the save modal */
overflow: hidden; /* Hide content that overflows */
}

/* Button Customization for Save Modal */
.save-btn-outline-light {
border-color: white;
color: white;
}

.save-btn-outline-light:hover {
background-color: white;
color: #ff512f;
}

/* Cursor styles for resizing edges and corners */
.ui-resizable-e, .ui-resizable-w {
cursor: ew-resize;
}

.ui-resizable-n, .ui-resizable-s {
cursor: ns-resize;
}

.ui-resizable-ne, .ui-resizable-nw, .ui-resizable-se, .ui-resizable-sw {
cursor: nwse-resize;
}








/* ***********iamge movable started************* */

.image-placeholder {
   max-width: 100%;
   display: block;
   margin: 10px auto;
   cursor: move; /* Change cursor to indicate drag */
   transition: transform 0.2s ease; /* Smooth zoom effect */
}

.image-placeholder:active {
   transform: scale(1.05); /* Slight zoom when dragging */
}

.drop-zone {
   min-height: 50px;
   border: 2px dashed #ddd;
   margin: 10px 0;
   padding: 10px;
   background-color: #f9f9f9;
}

.drop-zone:hover {
   background-color: #e0e0e0; /* Hover effect */
}

/* ***********iamge movable ended************* */


/* ***********toolbar dropdown background color changed started************* */
/* Style the dropdown content background */
.toolbar-dropdown .dropdown-content {
       background-color: #767879; /* Light background */
       border: 0px solid #ddd;
       border-radius: 5px;
       max-height: 400px; /* Set max height for scrollable content */
       overflow-y: auto;
       padding: 10px;
   }

   /* Style individual toolbar buttons inside the dropdown */
   .toolbar-dropdown .toolbar-button {
       background-color: #333333;
       margin: 5px 0;
       padding: 10px;
       border-radius: 4px;
       transition: background-color 0.3s, color 0.3s;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       gap: 10px;
   }

   /* Change background on hover */
   .toolbar-dropdown .toolbar-button:hover {
       background-color: #007bff; /* Blue background */
       color: #fff; /* White text */
   }

   /* Active or focused state */
   .toolbar-dropdown .toolbar-button:focus {
       background-color: #0056b3; /* Darker blue on focus */
       outline: none;
   }

   /* Optional: Add scrollbar styling for dropdown content */
   .toolbar-dropdown .dropdown-content::-webkit-scrollbar {
       width: 8px;
   }

   .toolbar-dropdown .dropdown-content::-webkit-scrollbar-thumb {
       background-color: #aaa;
       border-radius: 4px;
   }

   .toolbar-dropdown .dropdown-content::-webkit-scrollbar-thumb:hover {
       background-color: #888;
   }

   /* ***********toolbar dropdown background color changed ended************* */



/* ***********Context Menu dropdown background color changed started************* */
/* Context Menu Styling */
.custom-context-menu {
background-color: #767879; /* Dark background */
border-radius: 5px;
padding: 10px;
position: absolute;
z-index: 9999;
display: none;
}

/* Styling individual buttons inside the context menu */
.custom-context-menu button {
background-color: #767879; /* Dark background for buttons */
color: white; /* White text */
margin: 1px 0; /* Reduce vertical margin between items */

padding: 10px;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
border: none;
width: 100%; /* Ensure buttons stretch inside the menu */
}

/* Change background on hover */
.custom-context-menu button:hover {
background-color: #007bff; /* Blue background on hover */
color: #fff; /* White text */
}

/* Focus state for accessibility */
.custom-context-menu button:focus {
background-color: #0056b3; /* Darker blue on focus */
outline: none;
}

/* Dropdown suggestions styling (shown outside the context menu) */
.dropdown-suggestions {
position: absolute;
top: 0;
left: 100%; /* Align to the right of the context menu */
background-color: #767879; /* Dark background for dropdown */
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: none;
padding: 10px;
min-width: 150px;
z-index: 10000;
}

/* Styling individual dropdown items */
.dropdown-suggestions .dropdown-item {
padding: 10px;
background-color: #767879; /* Same dark background as context menu */
color: white; /* White text */
border-radius: 4px;
margin-bottom: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

/* Hover effect for dropdown items */
.dropdown-suggestions .dropdown-item:hover {
background-color: #007bff;
color: white;
}

/* Optional: Add scrollbar styling for dropdown content */
.dropdown-suggestions::-webkit-scrollbar {
width: 8px;
}

.dropdown-suggestions::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 4px;
}

.dropdown-suggestions::-webkit-scrollbar-thumb:hover {
background-color: #888;
}

/* ***********Context Menu dropdown background color changed ended************* */



/* ***********Language input dropdown list item started************* */

/* Larger dropdown for better visibility */
.dropdown-custom {
   position: relative;
   display: inline-block;
   width: 100%;
}

#languageSearch {
   border: 1px solid #ccc;
   padding: 8px;
   width: 100%;
   box-sizing: border-box;
}

#languageDropdown {
   list-style: none;
   padding: 0;
   margin: 0;
   max-height: 200px; /* Limit dropdown height */
   overflow-y: auto; /* Add scroll for overflow */
   border: 1px solid #ccc;
   border-top: none;
   width: 100%;
   box-sizing: border-box;
   position: absolute;
   z-index: 1000;
   background: white;
}

#languageDropdown li {
   padding: 10px;
   cursor: pointer;
   transition: background 0.3s ease;
}

#languageDropdown li:hover {
   background-color: #f0f0f0;
}

#languageDropdown li.selected {
   font-weight: bold;
}

/* ***********Language input dropdown list item ended************* */



.ui-autocomplete {
z-index: 9999 !important; /* Make sure the dropdown is above everything */
position: absolute;       /* Ensure the dropdown appears correctly */
top: 100%;                /* Align to the bottom of the input field */
left: 0;
}

#dynamicInputsContainer {
overflow: visible; /* Allow overflow for autocomplete dropdowns */
}

.modal-body {
overflow: visible !important; /* Make sure dropdowns are not hidden by modals */
}


/* .........................Spinner loading on the context menu button action started......................... */
#loadingSpinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #007bff;
    border-radius: 50%;
    animation: professionalSpin 0.6s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
  }
  
  @keyframes professionalSpin {
    to { transform: rotate(360deg); }
  }


  #loadingSpinner::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    backdrop-filter: blur(10px);
    border-radius: 50%;
    z-index: -1;
  }

  
/* Dropdown menu styles */
.scrollable-menu {
max-height: 200px; /* Adjust height to fit 5 items */
overflow-y: auto;  /* Enable vertical scrolling */
overflow-x: hidden; /* Disable horizontal scrolling */
width: 100%; /* Ensure dropdown takes full width */
}

/* Dropdown menu styles */
.scrollable-menu {
max-height: 200px; /* Adjust height to fit 5 items */
overflow-y: auto;  /* Enable vertical scrolling */
overflow-x: hidden; /* Disable horizontal scrolling */
width: 100%; /* Ensure dropdown takes full width */
}

/* Optional: Make sure dropdown items are displayed correctly */
.dropdown-menu {
padding: 10px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Scrollbar styling (optional, for aesthetics) */
.scrollable-menu::-webkit-scrollbar {
width: 8px;
}

.scrollable-menu::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 10px;
}

.scrollable-menu::-webkit-scrollbar-thumb:hover {
background-color: #aaaaaa;
}


/* Ensure .tab-pane.active has a relative position to contain dragged elements */
.tab-pane.active {
position: relative;
z-index: 10;  /* Ensure it stays under the dragged elements */
}


/* .........................Spinner loading on the context menu button action ended......................... */




/* // .................smooth selection the elements components started...................................../////*/

.draggable {
border: 1px dashed #ccc;
resize: both; /* Enable both vertical and horizontal resizing */
overflow: auto; /* Prevent content overflow during resizing */
position: relative;
box-sizing: border-box; /* Include padding and border in size calculations */
transition: border 0.3s ease;

}


.draggable:hover {
border: 2px solid #4caf50; /* Highlight on hover */

}



.control-panel {
position: absolute;
top: -25px;
right: -25px;
display: none; /* Hidden by default */
z-index: 10; /* Ensure it appears above other elements */
}

.draggable:hover .control-panel {
display: flex; /* Show buttons on hover */
gap: 5px; /* Add spacing between buttons */
}

.duplicate-button,
.close-button {
background: #f44336; /* Default red background for the close button */
color: white;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
font-size: 16px;
cursor: pointer;
}

.duplicate-button:hover,
.close-button:hover {
transform: scale(1.2); /* Slight enlarge on hover */
transition: transform 0.2s ease-in-out;
}
.control-panel {
position: absolute;
top: -25px;
right: -25px;
z-index: 10;
opacity: 0;
transition: opacity 0.3s ease;
}


.control-panel i:hover {
color: #4caf50;
transform: scale(1.2); /* Slightly enlarge icon */
transition: color 0.2s ease, transform 0.2s ease;
}

.draggable:hover .control-panel {
opacity: 1; /* Smoothly display controls */
}

.ui-resizable-handle {
background: #4caf50;
border-radius: 50%;
width: 10px;
height: 10px;
position: absolute;
}

.ui-resizable-handle:hover {
background: #2196f3; /* Highlight on hover */
}

.ui-resizable-n {
cursor: n-resize;
top: -5px;
left: 50%;
transform: translateX(-50%);
}

.ui-resizable-e {
cursor: e-resize;
right: -5px;
top: 50%;
transform: translateY(-50%);
}

.ui-resizable-s {
cursor: s-resize;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}

.ui-resizable-w {
cursor: w-resize;
left: -5px;
top: 50%;
transform: translateY(-50%);
}

.ui-resizable-ne,
.ui-resizable-nw,
.ui-resizable-se,
.ui-resizable-sw {
cursor: pointer; /* Diagonal resizing */
}

.ui-resizable-ne {
top: -5px;
right: -5px;
}

.ui-resizable-se {
bottom: -5px;
right: -5px;
}

.ui-resizable-sw {
bottom: -5px;
left: -5px;
}

.ui-resizable-nw {
top: -5px;
left: -5px;
}

.resizable-container {
position: relative;
display: inline-block;
resize: both; /* Enable resizing in both directions */
overflow: hidden; /* Prevent overflow during resize */
border: 2px solid #4caf50;
transform-origin: top left; /* Scale from the top-left corner */
}

.editable-table {
width: 100%;
height: 100%;
border-collapse: collapse;
table-layout: fixed; /* Maintain proportional columns */
}

.editable-table th,
.editable-table td {
padding: 10px;
border: 1px solid #F7D9D9;
text-align: center;
word-wrap: break-word;
font-size: 16px; /* Default font size */
}

.editable-table th {
background-color: #F7D9D9;
color: #FFF;
}

.resizable-container h2,
.resizable-container p {
margin: 0;
font-size: 2vw; /* Dynamic scaling */
text-align: center;
}

.editable-table tbody tr:hover {
background-color: #ffebf0; /* Highlight row on hover */
}

.resizable-container.deselected {
border: 2px dashed #ccc; /* Deselect border style */
}

.inner-element {
border: 1px dashed #999; /* Default inner element border */
}

.inner-element.selected {
border: 2px solid #4caf50; /* Selected inner element border */
}
/* // .................smooth selection the elements components ended...................................../////*/

  

  
/* Disable grab/hand cursor completely */
#dynamicInputModal * {
    cursor: default !important;
    user-select: text !important; /* allow text selection only */
  }
  
  #dynamicInputModal .modal-header {
    cursor: move !important; /* only header should have drag move cursor */
  }


  
  #keywordResearchModalKeywords .modal-dialog {
    max-width: 500px;         /* Control width */
    max-height: 70vh;         /* ✅ Reduced height */
    margin: auto;
    display: flex;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  position: absolute;
  }
  
  #keywordResearchModalKeywords .modal-content {
    height: auto;
    max-height: 100%;
    overflow: hidden;
    border-radius: 10px;
  }
  
  #keywordResearchModalKeywords .modal-body {
    padding: 20px;
    max-height: 40vh;         /* ✅ Limit content height */
    overflow-y: auto;         /* Enable scroll if needed */
  }
  
  #keywordResearchModalKeywords .modal-footer {
    display: flex;
    flex-wrap: nowrap;         /* ✅ Keep all buttons on the same line */
    justify-content: flex-end;
    align-items: center;
    gap: 10px;                  /* Space between buttons */
    flex-direction: row;       /* Ensure horizontal layout */
    padding: 15px;
    flex-shrink: 0;
    border-top: none;
  }

  #keywordResearchModalKeywords .modal-footer .button-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;         /* ✅ prevent wrapping inside button-group */
  }
  

  @media (max-width: 480px) {
    #keywordResearchModalKeywords .modal-footer {
      flex-wrap: wrap;
      flex-direction: column;
      align-items: stretch;
    }
  
    #keywordResearchModalKeywords .modal-footer .button-group {
      flex-direction: column;
      width: 100%;
    }
  
    #keywordResearchModalKeywords .modal-footer .btn {
      width: 100%;
    }
  }
  
  @media (min-width: 768px) {
    #keywordResearchModalKeywords .modal-dialog {
      max-height: 90vh;
      overflow-y: auto;
    }
  }
  
  .modal-header .btn-close {
    filter: invert(1);
    z-index: 1051;
  }
  
  #keywordResearchModalKeywords .modal-header {
    position: relative;
    padding-right: 2.5rem; /* Space for the close button */
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    color: white;
    border-bottom: none;
  }
  
  #keywordResearchModalKeywords .btn-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 10;
    filter: invert(1); /* Ensure visibility on dark background */
  }
  

  #quillEditorContainerTitlesUrls {
    height: 40vh; /* keep your preferred height */
    margin-bottom: 20px; /* spacing between editor and Add Input */
    padding: 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  
  .add-input-container {
    margin-top: 10px;
    z-index: 1;
    position: relative;
  }
  .competitor-title-input-modal .modal-body {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
  }


  #scrapeModal .modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 🧲 center modal */
    margin: 0 !important;             /* prevent Bootstrap default */
    max-height: 90vh;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1055; /* ensure it's above backdrop */
}


  #scrapeModal .modal-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      max-height: 90vh;
  }

  #scrapeModal .modal-body {
      flex: 1;
      overflow-y: auto;
      padding-bottom: 0; /* Reduce extra space */
  }

  #scrapeModal .modal-footer {
      justify-content: center !important;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-top: auto; /* Push to bottom only if needed */
  }

  #scrapeModal .modal-header .btn-close {
      position: absolute;
      right: 1rem;
      top: 1rem;
      z-index: 10;
  }
  
  #applicationModal .modal-dialog {
    max-width: 1000px; /* adjust as needed */
    width: 100%;
    margin: auto;
  }
  
  .modal-footer-custom {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .modal-footer-custom .btn {
    flex: 1 1 auto;
    min-width: 180px;
    text-align: center;
  }

  .modal-dialog.draggable-modal {
    max-width: 720px;
    margin: 1.75rem auto;
  }

  #summaryModal #modalEditor {
    font-size: 17px;              /* Increase base font size */
    line-height: 1.7;             /* Improve line spacing */
    padding: 20px;                /* Add breathing room */
    color: #222;                  /* Darker text for readability */
    background: #fff;             /* Light background */
    border-radius: 6px;
    font-family: 'Segoe UI', sans-serif;
  }
  
  
  .modal-content {
    border-radius: 10px;
    overflow: hidden;
  }
  
  .quill-editor-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    background: #fff;
  }
  
  .quill-editor-style {
    min-height: 200px;
  }
  .badge {
    font-size: 14px;
    padding: 6px 12px;
  }
    
/* Scope for #dynamicInputModal only */
#dynamicInputModal .dynamic-input-modal-dialog {
    max-width: 1100px;
    width: 95%;
    margin: 1.75rem auto;
  }

  /* Modal Dialog Style */

  
  #dynamicInputModal .modal-content {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
  

  
  @media screen and (max-width: 768px) {
    #dynamicInputModal .dynamic-input-modal-dialog {
      max-width: 95%;
      margin: 1rem auto;
    }
  }

  #dynamicInputModal.modal.fade .modal-dialog {
    max-width: 1100px;
    width: 100%;
    margin: 1.75rem auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    padding-left: 0; /* override if needed */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* optional */
  }

  #dynamicInputModal .modal-dynamicInputModal-dialog {
    max-width: 1100px;
    width: 100%;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
  #dynamicInputModal .modal-dialog {
    max-width: none !important;
    width: auto !important;
  }
    
  
  
  

  @media (max-width: 768px) {
    #dynamicInputModal .modal-dialog {
      max-width: 95% !important;
      width: 95%;
      margin: 1rem auto;
      transform: translateX(-50%);
      top: 5%;
    }
  }