@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

.spinner-border {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.input-spinner {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}


.card {
    border: 01px solid #000000;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #000000;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.accordion-item {
    border: 01px solid #000000;
}

.form-range::-webkit-slider-thumb {
    appearance: none;
    background: #000000;
}

.form-range::-moz-range-thumb {
    background: #000000;
}

.form-range::-ms-thumb {
    background: #000000;
}

body {
    font-family: 'Fira Code', monospace;
    margin: 20px;
    padding-left: 5%; /* Adjust the padding value as needed */
    padding-right: 5%; /* Adjust the padding value as needed */
}

/* Removed width, padding, margin, border, and border-radius to prevent conflicts */
.large-input, .large-input select {
    display: inline-block;
    box-sizing: border-box;
}

.hidden {
    display: none;
}

.dropdown-header {
    cursor: pointer;
    padding: 10px;
    background-color: #eee;
    margin-top: 5px;
    margin-bottom: 56px;
    border: 1px solid #ddd;
}

.dropdown-header:hover {
    background-color: #ddd;
}


.actions-container {
    display: flex;
    align-items: center; /* Align items vertically in the center */
    justify-content: space-between; /* Add space between the button and the repeat section */
    flex-wrap: nowrap; /* Prevent items from wrapping onto the next line */
    width: 100%; /* Ensure full width */
}

.repeat-control {
    border-radius: 0.3rem; /* Match border radius */
    max-width: 3rem; /* Set max-width to match the buttons */
    flex: 1; /* Allow flexibility within the input group */
    text-align: center; /* Center the text */
    font-family: 'Fira Code', monospace;
    display: inline-block;
    margin: 0;
}

/* Ensure Bootstrap styles are not overridden */
.repeat-btn, .form-control, .btn {
    box-sizing: border-box;
    font-family: 'Fira Code', monospace;
    display: inline-block;
    margin: 0;
    cursor: pointer;
}

/* Removed custom styles for .copy-btn */
.copy-btn {
    display: inline-block;
    cursor: pointer;
}

/* Align items inside the repeat section */
#repeatSection {
    display: flex;
    align-items: center; /* Aligns items vertically */
    gap: 5px; /* Adds gap between controls */
}

#customCharacterRepeatSelect {
    /* If additional specific styles are necessary for the input box */
    cursor: text; /* Changes cursor to text for input box */
}

.inputs-row {
    display: flex;
    justify-content: center; /* Center align the containers */
    align-items: flex-start;
    flex-wrap: wrap; /* Allows wrapping if the containers don't fit in one row */
    gap: 20px; /* Optional: add space between containers */
}

.input-preview-container {
    flex: 1; /* Each container will take an equal portion of the row */
    max-width: 30%; /* Ensures each container does not exceed 30% of the row width */
    margin: 0 10px; /* Adjust margin between containers if needed */
}

.image-preview {
    width: 40%;
    display: flex;
    justify-content: center; /* Center the image within the container */
    margin-top: 10px;
}

.image-preview img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
}

.info-icon {
    cursor: pointer;
    margin-left: 5px;
    position: relative;
    display: inline-block;
}

.clear-btn{
    height: calc(2.25rem + 2px); /* Match the height of the input boxes */
    width: calc(2.25rem + 2px);
    border: 1px;
}

.clear-btn,
.clear-all-btn {
    background: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 18px;
}

.title-text {
    text-align: center; /* Centers the text */
    font-family: 'Outfit', sans-serif;
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    width: fit-content; /* Adjust the width to fit the content */
}

.button-title-text {
    font-family: 'Outfit', sans-serif;
    font-size:x-large;
    text-align: center; /* Optional, depending on your needs */
    /* Remove align-items, justify-content, and width properties */
}


.workspace {
    width: 100%;
    height: 50px; /* Collapsed height */
    transition: height 0.3s ease;
    overflow: auto;
}
.workspace.expanded {
    height: 300px; /* Expanded height */
}

#dropArea {
    height: 100%; /* Full height of the parent (flex container) */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    flex-basis: 30%;
    flex-shrink: 0;
}

#thumbnailWrapper {
    width: 100%;
    height: 100%; /* Full height of the parent (flex container) */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#thumbnailContainer {
    display: flex;
    flex-wrap: wrap;
    height: auto; /* Allow height to adjust based on content */
}

#thumbnailContainer img {
    height: auto;
    width: 100px; /* Adjust width as needed */
    margin: 5px;
    cursor: grab;
    object-fit: contain;
    display: inline-block;
}


#thumbnailContainer img:active {
    cursor: grabbing;
}


input.dragover {
    border: 2px dashed #007bff;
    background-color: #e9ecef;
}


#copyRight {
    text-align: center; /* Center-align the text within the footer */
    padding: 20px 0; /* Optional: Add some padding for spacing */
    background-color: #f8f9fa; /* Optional: Set a background color */
    margin-top: 100px;
}


.switch {
  /* Variables */
  --switch_width: 2em;
  --switch_height: 1em;
  --thumb_color: #e8e8e8;
  --track_color: #e8e8e8;
  --track_active_color: #888;
  --outline_color: #000;
  margin-left: 10px;
  font-size: 20px;
  position: relative;
  display: inline-block;
  width: var(--switch_width);
  height: var(--switch_height);
  vertical-align: middle;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  box-sizing: border-box;
  border: 2px solid var(--outline_color);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--track_color);
  transition: .15s;
  border-radius: var(--switch_height);
}

.slider:before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  height: var(--switch_height);
  width: var(--switch_height);
  border: 2px solid var(--outline_color);
  border-radius: 100%;
  left: -2px;
  bottom: -2px;
  background-color: var(--thumb_color);
  transform: translateY(-0.2em);
  box-shadow: 0 0.2em 0 var(--outline_color);
  transition: .15s;
}

input:checked + .slider {
  background-color: var(--track_active_color);
}

input:focus-visible + .slider {
  box-shadow: 0 0 0 2px var(--track_active_color);
}

/* Raise thumb when hovered */
input:hover + .slider:before {
  transform: translateY(-0.3em);
  box-shadow: 0 0.3em 0 var(--outline_color);
}

input:checked + .slider:before {
  transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.2em);
}

/* Raise thumb when hovered & checked */
input:hover:checked + .slider:before {
  transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.3em);
  box-shadow: 0 0.3em 0 var(--outline_color);
}