/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

html{-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}

.breeze { 	font-family: 'breeze';}
@font-face {
	font-family: 'breeze';
	font-style:  normal;
	src: url("../fonts/breeze/MorningBreeze-w19VZ.woff2") format("woff2"),
	url("../fonts/breeze/MorningBreeze-w19VZ.woff") format("woff");
}

@font-face {
	font-family: 'Inter UI';
	font-style:  normal;
	font-weight: 500;
	src: url("../fonts/inter-ui/Inter-UI-Medium.woff2?v=3.2") format("woff2"),
	url("../fonts/inter-ui/Inter-UI-Medium.woff?v=3.2") format("woff");
}


@font-face {
	font-family: 'Inter UI';
	font-style:  normal;
	font-weight: 600;
	src: url("../fonts/inter-ui/Inter-UI-SemiBold.woff2?v=3.2") format("woff2"),
	url("../fonts/inter-ui/Inter-UI-SemiBold.woff?v=3.2") format("woff");
}

@font-face {
	font-family: 'Inter UI';
	font-style:  normal;
	font-weight: 700;
	src: url("../fonts/inter-ui/Inter-UI-Bold.woff2?v=3.2") format("woff2"),
	url("../fonts/inter-ui/Inter-UI-Bold.woff?v=3.2") format("woff");
}

@font-face {
	font-family: 'Inter UI';
	font-style:  normal;
	font-weight: 800;
	src: url("../fonts/inter-ui/Inter-UI-ExtraBold.woff2?v=3.2") format("woff2"),
	url("../fonts/inter-ui/Inter-UI-ExtraBold.woff?v=3.2") format("woff");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
  box-shadow: none;
  border-color: inherit;
}
input:focus {
  outline: none;
  box-shadow: none;
  border-color: #ccc;
}
html{-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}
:root {
  /* Dark mode colors */
  --text-color: #E3E3E3;
  --subheading-color: #828282;
  --placeholder-color: #A6A6A6;
  --primary-color: #242527;
  --secondary-color: #36383a;
  --secondary-hover-color: #444;
}

.light_mode {
  /* Light mode colors */
  --text-color: #222;
  --subheading-color: #A0A0A0;
  --placeholder-color: #6C6C6C;
  --primary-color: #FFF;
  --secondary-color: #E9EEF6;
  --secondary-hover-color: #DBE1EA;
}




html, body {
            margin: 0;
            padding: 0; /* Remove default padding/margin from html/body */

            overflow-x: hidden; /* Prevent horizontal scrollbar on body */
            overflow-y: auto; /* Allow vertical scrolling on body */
            box-sizing: border-box; /* Include padding/border in element's total width and height */
        }

        body {
            background: var(--primary-color);
            font-family: 'Inter', sans-serif;
            /* display: flex; */
            justify-content: center; /* Center content horizontally */
            align-items: flex-start; /* Align content to the top vertically */
            padding: 20px; /* Padding for the main content area */
            /* min-height is no longer needed on body if html is 100% height and body fills it */
        }





.header, .chat-list .message, .typing-form {
  margin: 0 auto;
  max-width: 1100px;
  border:0px #aaaaaa solid;
  background-color:none;
  border-radius: 5px;
}

.header {
  margin-top: 4vh;
  padding: 1rem;
  overflow-x: hidden;
}

body.hide-header .header {
  margin: 0;
  display: none;
}

.header :where(.title, .subtitle) {
  color: #B4380C;
  font-weight: 500;
  line-height: 2.2rem;
  width:100%;text-align: center;

}

.header .title {
  width: fit-content;
  font-size: 2.6rem;
  background-clip: text;
  background: linear-gradient(to right, #B4380C, #B4380C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin:0 auto;
}

.header .subtitle {
  font-size: 1.3rem;
  padding-top:5px;
  color: var(--subheading-color);
  margin-bottom: 15px;
}
.suggestion-list {
  width: 100%;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
  gap: 1.25rem;
  margin-top: 9.5vh;
  /* max-height: 80vh;  */
  overflow-y: auto;
  padding-right: 0.5rem; /* space for scrollbar if needed */
}

.suggestion-list .suggestion {
  cursor: pointer;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-radius: 0.75rem;
  justify-content: space-between;
  background: var(--secondary-color);
  transition: 0.2s ease;
}

.suggestion-list .suggestion:hover {
  background: var(--secondary-hover-color);
}

.suggestion-list .suggestion :where(.text, .icon) {
  font-weight: 400;
  color: var(--text-color);
}

.suggestion-list .suggestion .icon {
  width: 42px;
  height: 42px;
  display: flex;
  font-size: 1.3rem;
  margin-top: 2.5rem;
  align-self: flex-end;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  color: var(--text-color);
  background: var(--primary-color);
}


.chat-list {
  padding: 2rem 1rem 12rem;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-color: #999 transparent;
}

.chat-list .message.incoming {
  margin-top: 1.5rem;
}

.chat-list .message .message-content {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  align-items: center;
}

.chat-list .message .text {
  color: var(--text-color);
  white-space: pre-wrap;
}

.chat-list .message.error .text {
  color: #e55865;
}

.chat-list .message.loading .text {
  display: none;
}

.chat-list .message .avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  align-self: flex-start;
}

.chat-list .message.loading .avatar {
  animation: rotate 3s linear infinite;
}

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

.chat-list .message .icon {
  color: var(--text-color);
  cursor: pointer;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  font-size: 1.25rem;
  margin-left: 3.5rem;
  visibility: hidden;
}

.chat-list .message .icon.hide {
  visibility: hidden;
}

.chat-list .message:not(.loading, .error):hover .icon:not(.hide){
  visibility: visible;
}

.chat-list .message .icon:hover {
  background: var(--secondary-hover-color);
}

.chat-list .message .loading-indicator {
  display: none;
  gap: 0.8rem;
  width: 100%;
  flex-direction: column;
}

.chat-list .message.loading .loading-indicator {
  display: flex;
}

.chat-list .message .loading-indicator .loading-bar {
  height: 11px;
  width: 100%;
  border-radius: 0.135rem;
  background-position: -800px 0;
  background: linear-gradient(to right, #4285f4, var(--primary-color), #4285f4);
  animation: loading 3s linear infinite;
}

.chat-list .message .loading-indicator .loading-bar:last-child {
  width: 70%;
}

@keyframes loading {
  0% {
    background-position: -800px 0;
  }

  100% {
    background-position: 800px 0;
  }
}

.typing-area {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 1rem;
  background: var(--primary-color);
}

.typing-area :where(.typing-form, .action-buttons) {
  display: flex;
  gap: 0.75rem;
  justify-content: center;     /* Center horizontally */
 align-items: center;
}

.typing-form .input-wrapper {
  width: 100%;
  height: 56px;
  display: flex;
  position: relative;
}

.typing-form .typing-input {
  height: 100%;
  width: 100%;
  /* border: none; */
  outline: none;
  resize: none;
  font-size: 1rem;
  color: var(--text-color);
  padding: 1.1rem 4rem 1.1rem 1.5rem;
  border-radius: 4px;
  background: var(--secondary-color);
  border:2px #444444 solid;
}

.typing-form .typing-input:focus {
  background: var(--secondary-color);
}

.typing-form .typing-input::placeholder {
  color: var(--placeholder-color);
}

.typing-area .icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  font-size: 1.4rem;
  color: var(--text-color);
  align-items: center;
  justify-content: center;
  background: var(--secondary-color);
  transition: 0.2s ease;
}

.typing-area .icon:hover {
  background: var(--secondary-hover-color);
}

.typing-form #send-message-button {
  position: absolute;
  right: 15px;
  top:15px;
  outline: none;
  border: none;
  transform: scale(0);
  background: transparent;
  color:#ffffff;
  transition: transform 0.2s ease;
}

.typing-form .typing-input:valid ~ #send-message-button {
  transform: scale(1);
}

.typing-area .disclaimer-text {
  max-width:1100px;margin:0 auto;
  text-align: center;
  font-size: 0.7rem;
  margin-top: 1rem;
  color: var(--placeholder-color);
  opacity:0.5;
}

/* Responsive media query code for small screen */
@media (max-width: 768px) {
  #relatedcomics{display:none;}
  .header :is(.title, .subtitle) {
    font-size: 2rem;
    line-height: 2.6rem;

  }

  .header .subtitle {
    font-size: 1.7rem;
  }

  .typing-area :where(.typing-form, .action-buttons) {
    gap: 0.4rem;
  }

  .typing-form .input-wrapper {
    height: 50px;
  }

  .typing-form .typing-input {
    padding: 1.1rem 3.5rem 1.1rem 1.2rem;
  }

  .typing-area .icon {
    height: 50px;
    width: 50px;
  }

  .typing-area .disclaimer-text {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
}


/* CUSTOM CSS  */


		.card_small.loaded .skeleton {
		  display: none;
		}

		.card_small {
		  position: relative;
		  width: 100px; !important;border:0px green solid;
		  object-fit: cover;
		  overflow: hidden; /* <--- Add this line */
		  z-index: 11;
		  transition: transform 0.4s ease, opacity 0.5s ease-in;

		}

		.card_small:hover .img_card {
		  /* transform: scale(1.05); Zoom effect */
			-webkit-filter: brightness(80%);
			filter: brightness(80%);
		}
		.card_small {
		  border-radius: 0px; /* or whatever radius you want */
		}
    .card_small:hover .litemstext {
      visibility: visible;
        opacity: 1;
				  overflow: hidden;
    }
		.card_small:hover .litemspublish {
      visibility: visible;
        opacity: 1;
				  overflow: hidden;
    }

		.card_small:hover .litemspubchannel {
      visibility: visible;
        opacity: 1;
				  overflow: hidden;
    }

		.card_small:hover .mymeetingtitle {
			visibility: visible;
				opacity: 1;
					overflow: hidden;
		}



		.img_card {
			padding:0px;
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		  opacity: 0;
		  position: absolute;
		  z-index: 10;
		  transform: scale(1);
		  transition: transform 0.4s ease, opacity 0.5s ease-in;
		}

		.img_card.loaded {
		  opacity: 1;
		  border-radius: 3px;
		}
    .mycomic:hover .litemstext {
      visibility: visible;
        opacity: 1;
				  overflow: hidden;
    }

		.mycomic:hover .litemspublish {
			visibility: visible;
				opacity: 1;
					overflow: hidden;
		}
		.mycomic:hover .litemspubchannel {
			visibility: visible;
				opacity: 1;
					overflow: hidden;
		}


.skeleton::after {

  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(
      90deg,
      #222222 0%,
      #333333 50%,
      #222222 100%
    );
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}


.fooplusbutton,
.plus {
    font-weight: 600;
    border-radius: 200px;
}
.vertical-text {
    position: absolute;
    width: 100%;
    font-size: 6px;
    color: #aaa !important;
    top: 10px;
    max-width: 100px;
    left: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    opacity: 0.5;
}
.locked {
    position: absolute;
    top: 8px;
    right: 8px;
}


.free {display:none !important;position:relative;width:22px;border-radius:0px;border:none;opacity:0.6;}
.premium{display:block;position:relative;display:block;width:22px !important;border-radius:0px;border:none;opacity:0.6;}

.plus {
    background-color: #111;
    color: #eee;
    padding: 5px 10px;
    font-size: 12px;
    border: none;
}
.free {
    display: none !important;
    border-radius: 0;
    border: none;
}
.premium {
    display: block;
    border-radius: 0;
    border: none;
}




.image-itemlib {
    border-radius: 0px;
    overflow: hidden; /* Ensures image corners are rounded correctly */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */

    cursor: pointer;
    /* Optional: add transition for hover effects */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.image-itemlib img {
    width: 100%;
    height: 100%; /* Fixed height for consistent grid cells */
    object-fit: cover; /* Important: Ensures images fill the space without distortion, cropping if needed */
    display: block; /* Removes extra space below image */
    loading="lazy"; /* THIS IS CRUCIAL FOR FAST INITIAL LOAD */

    /* Smooth transition for the blur effect */
    transition: filter 0.5s ease-in-out;
}
.pinterest-gallery {
           /* This is your main content wrapper, it should expand with its content */
           column-count: 4;
           column-gap: 16px;
           width: 100%;
           max-width: 1200px;
           box-sizing: border-box;
           border: 0px red solid; /* For debugging - keep or remove as needed */
           margin-top:20px;
           /* IMPORTANT: Ensure no inner scrollbar */
           height: auto; /* Allow height to be determined by content */
           overflow: visible !important; /* Force content to spill out if needed, preventing inner scrollbar */
       }


       @media (max-width: 1024px) {
           .pinterest-gallery {
               column-count: 3;
           }
       }
       @media (max-width: 768px) {
           .pinterest-gallery {
               column-count: 2;
           }
       }
       @media (max-width: 480px) {
           .pinterest-gallery {
               column-count: 1;
           }
       }


              #load-more-comicscontainer {
                  break-inside: avoid-column;
                  margin-bottom: 0px;
                  background-color: #333333 !important;
                  border:0px !important;
                  color:#777777 !important;
                  border-radius: 0px;
                  overflow: hidden;
                  cursor: pointer;
                  position: relative;
                  display: inline-block;
                  width: 100%;
              }
       #load-more-mycomicscontainer {
           break-inside: avoid-column;
           margin-bottom: 0px;
           background-color: #333333 !important;
           border:0px !important;
           color:#777777 !important;
           border-radius: 0px;
           overflow: hidden;
           cursor: pointer;
           position: relative;
           display: inline-block;
           width: 100%;
       }
#load-more-billboard{
  break-inside: avoid-column;
  margin-bottom: 0px;
  background-color: #333333 !important;
  border:0px !important;
  color:#777777 !important;
  border-radius: 0px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 100%;
}


.image-gridpint {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}



/* Define preset height variants using aspect-ratio */
.aspect-4-3 {
  aspect-ratio: 4 / 3;
}
.aspect-3-4 {
  aspect-ratio: 3 / 4;
}
.aspect-1-1 {
  aspect-ratio: 1 / 1;
}
.aspect-5-4 {
  aspect-ratio: 5 / 4;
}
.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

       .image-grid {
           display: grid;
           /* This creates a responsive grid:
              - auto-fill: creates as many columns as fit
              - minmax(180px, 1fr): columns will be at least 180px,
                but will expand to fill available space evenly. */
           grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
           gap: 16px; /* Space between grid items */
       }
       .image-grid4 {
           display: grid;
           /* This creates a responsive grid:
              - auto-fill: creates as many columns as fit
              - minmax(180px, 1fr): columns will be at least 180px,
                but will expand to fill available space evenly. */
           grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
           gap: 16px; /* Space between grid items */
       }

       .image-item {
           /* Key for masonry: avoid breaking across columns */
           break-inside: avoid-column;
           /* Vertical spacing between individual cards */
           margin-bottom: 0px; /* Consistent gap between cards */


           border-radius: 0px; /* Slightly more rounded */
           overflow: hidden;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
           cursor: pointer;
           transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
           position: relative; /* For absolute positioning of children */
           display: inline-block; /* Essential for columns to treat it as a single block */
           width: 100%; /* Ensures it fills its column */
       }

       /* .image-grid {
         column-count: 4;
         column-gap: 16px;
         padding: 1rem;
       }

       .image-item {
         break-inside: avoid;
         margin-bottom: 16px;
         width: 100%;
         display: block;
         border-radius: 0px;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
       } */

       .image-item:hover {
           transform: translateY(-5px);
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
       }

       /* Image within the card */
       /* Image within the card */
         .image-item img {
             width: 100%;
             height: auto; /* Maintain aspect ratio */
             object-fit: cover; /* Cover the area, crop if needed */
             display: block;
             filter: blur(0px);
             transition: filter 0.5s ease-in-out;
             border-radius: 0px; /* Match parent's top border-radius */
             border:0px green solid;
         }


        /* Class added by JS when the high-res image is loaded */
        .image-item img.loaded-hq {
            filter: blur(0px);
        }

.litemsx{border:0px red solid;height:1px;width:1px;display:none;}

.main-content-wrapper {
    /* This wrapper will contain both the canvas and the speech selector */
    display: flex;
    flex-direction: column; /* Stack the canvas and speech selector vertically */
    align-items: center; /* Centers children (canvas and speechSelector) horizontally within this wrapper */
    /* You might want a max-width on this wrapper if your content isn't meant to fill the whole screen */
     /* Example max-width for the whole content area */
    width: 100%; /* Allows it to shrink on smaller screens */
    margin: 0 auto; /* Centers the wrapper itself if it has a max-width */
    border:0px green solid;
}

#comicscontainer {
  /* max-height: 65vh;   */
  overflow-y: auto;
}
#mycomicscontainer {
  /* max-height: 65vh;   */
  overflow-y: auto;
}
.canvas-wrapper {
  display: flex;
  width: 100%;
}
/* Canvas container: limit width, auto height based on canvas aspect ratio */
#canvas-container {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  border: 0px red solid;
  aspect-ratio: 4 / 3; /* optional fallback if canvas doesn't define it */
}

/* Canvas styling: full width, auto height */
#comicCanvas {
  width: 100%;
  height: 100%;
  display: block;
  border: 0px green solid;
  border-radius: 0px;
}

/* Right panel fixed width */
#right-panel {
  max-width: 150px;
  margin-left: 10px;
  width:100%;
  background: #ffffff;
  max-height: 400px;overflow-y: scroll;
}
#right-panel::-webkit-scrollbar {
  display: none;
}
@media (max-width: 900px) {
  #right-panel {
    display: none;
  }
}
@media (max-width: 768px) {
#right-panel {
display: none;
}
}
.relatedcomicsimg {margin-bottom:3px;border-radius: 0px !important;}

.copy-toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border-radius: 200px;
font-weight: 500;
font-size: 14px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease-in-out;
}

.copy-toast.show {
opacity: 1;
pointer-events: auto;
}


#relatedcomics {
transition: opacity 0.3s ease-in-out;
opacity: 1;

}
#relatedcomics.hidden {
opacity: 0;
}

#relatedcomics::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

.backbutton {background-color:#111111 !important;color:#ffffff !important;font-size:13px;padding-left:8px;padding-right:14px;border-radius:200px !important;padding-top:4px;padding-bottom:4px;}

.container-flex {
display: flex;
gap: 5px; /* space between the two divs */
align-items: center; /* vertical alignment */
}


/* NEW STYLES FOR THE WRAPPER AROUND INPUT AND ICON */

/* Updated Styles for the .input-with-icon-container */
.input-with-icon-container {
    display: flex;
    flex-direction: column; /* Stack children (slashn, input-and-return-wrapper) vertically */
    /* REMOVE align-items: center; from here if you want children to naturally left-align */
    /* OR, keep align-items: center; and use align-self: flex-start; on children that should be left-aligned */
    align-items: flex-start; /* This will make all direct children (slashn, input-and-return-wrapper) left-aligned */
    width: 100%;
    max-width: 560px; /* IMPORTANT: Limit its max-width to match your canvas/speechSelector */
    margin: 10px auto; /* Center this container horizontally and add vertical margin */
    box-sizing: border-box; /* Include padding/border in width calculation */
    padding: 0 5px; /* Add slight horizontal padding if needed */
    /* border: 1px dashed green; /* Debug border */
}

.slashn {
    color: #666666; /* Example text color */
    font-size: 12px; /* Adjust font size if needed */
    padding-left:5px;
    margin-bottom: 5px; /* Space between text and input */
    /* No need for align-self: flex-start; here if parent aligns children to flex-start */
    /* No need for width: 100%; as it's a block element in a column flex container */
}
/* The wrapper for the input and the icon button */
.input-and-return-wrapper {
    display: flex; /* Keeps the input and button side-by-side conceptually */
    align-items: center; /* Vertically aligns the input and button */
    width: 100%;
    max-width: 560px; /* Match this to your canvas/other content max-width */
    margin: 0px auto; /* Centers this whole block */
    position: relative; /* <-- CRUCIAL: Establishes positioning context for absolute child */
    box-sizing: border-box; /* Include padding/border in total width */
    /* border: 1px dashed orange; /* Debug border for wrapper */
}

/* The text input field */
.txtpreview {
    flex-grow: 1; /* Allows the input to take up available space */
    width: 100%; /* Important: Takes 100% of available flex space */
    padding: 10px 15px; /* Base padding */
    padding-right: 45px; /* <-- ADJUST THIS: Make room for the absolute icon.
                            This value should be slightly more than the button's width/icon's size
                            plus desired padding inside the input. */
    border: 2px solid #555555;
    text-transform: uppercase;
    border-radius: 200px;
    font-size: 0.9rem;
    box-sizing: border-box; /* Essential for padding not to overflow width */
    background-color: transparent;
    color: #eee;
    height: 40px; /* Set a fixed height for better vertical alignment */
}

.txtpreview::placeholder {
    color: #bbb;
}

/* The return button (now positioned to look 'inside') */
.return-button {
    position: absolute; /* <-- CRUCIAL: Take it out of normal flow */
    right: 5px; /* <-- ADJUST THIS: Distance from the right edge of the input wrapper */
    top: 50%; /* Position vertically centered */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
    cursor: pointer;
    background: none; /* Make button background transparent */
    border: none; /* Remove button border */
    padding: 0; /* Remove button padding */
    line-height: 1; /* Helps vertical alignment of the icon */
    z-index: 10; /* Ensure it's above the input text */

    /* Ensure the icon itself is sized correctly */
    width: 32px; /* Set a specific width/height for the button if needed */
    height: 32px;
    display: flex; /* To center the icon within its own button area */
    justify-content: center;
    align-items: center;
    outline: none; /* Remove outline on focus/click */
}

.return-button .material-symbols-rounded {
    font-size: 24px; /* <-- ADJUST THIS: Size of the actual icon */
    color: #aaaaaa; /* Default icon color */
    transition: color 0.2s ease;
}

.return-button:hover .material-symbols-rounded {
    color: #ffffff; /* Icon color on hover */
}
.txtpreview::placeholder {
    color: #bbb;
}


/* Styling for the icon */
.return-icon { /* Renamed class for clarity, match in HTML */
    position: absolute; /* Position relative to .input-with-icon-container */
    right: 40px;
    /* Adjust top/transform for vertical centering relative to input-with-icon-container */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #aaaaaa; /* Lighter color for icon */
    font-size: 24px; /* Adjust icon size */

}

.return-icon:hover {
    color: #ffffff; /* Lighter on hover */
}


.txtpreview:focus {
    background-color: #333;
}





.txtpreview:focus {
  border-color: #777777 !important;
}

.txtpreview::-webkit-input-placeholder {
    text-transform: uppercase;
  opacity: .5;
  color: #aaaaaa;
}

.txtpreview:-ms-input-placeholder {
    text-transform: uppercase;
  opacity: .5;
    color: #aaaaaa;
}

.txtpreview::placeholder {
    text-transform: uppercase;
  opacity: .5;
  color: #aaaaaa;
}


.speechSelector {
    width: 100%; /* Keep this if you want it to stretch across the parent */
    /* Remove 'margin: 0 auto;' from here if the parent is responsible for centering the whole block */
    margin-top: 4px;
    border: 0px red solid; /* Visual aid, keep or remove */

    display: flex;
    flex-direction: row;
    overflow-x: auto; /* enables horizontal scroll */
    white-space: nowrap; /* prevent wrapping */
    gap: 0.5rem;
    padding: 4px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */

    /* ----- Key Change Here: Centering the content within speechSelector ----- */
    justify-content: center; /* This centers the flex items (your buttons) horizontally */
    /* If you want the content to be centered AND scroll, this might be tricky.
       Usually, if content overflows, you want it left-aligned until it's centered, then it scrolls.
       If it's *always* centered even when overflowing, the "center" will shift.
       Let's assume you want the *visible part* centered until overflow occurs.
       If the content is *less* than 100% width, justify-content: center will work.
       If it's *more* than 100% and you still want it visually centered, that's complex and usually involves JS
       or a trick with a wrapper.
    */
}

/* For Webkit browsers (Chrome, Safari) */
.speechSelector::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}




.search {background-color:transparent;color:#ffffff;font-size:12px;border:none;border-bottom:1px #777777 solid;border-radius:0px;padding:7px;width:100%;max-width:200px;margin-left:0px;margin-bottom:10px;}

.comic-frame {
  width: 113px;
  aspect-ratio: 300 / 234; /* or just 1.282 */
  background: url("/images/placeholder.jpg") center/cover no-repeat #222222;
  border: 2px solid #525456;
  border-radius: 3px;
  cursor: pointer;
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.saveframe {
  margin: 0 2px 2px auto;
  background-color: transparent;
  padding: 3px;
  font-size: 11px;
  color: #777777;
  border-radius: 2px;
  border: 1px solid #636566;
  width:50px;
}
.footnote {
  font-size: 12px;
  color: #666666;
}

.swim-fish {
width: 80px !important;
animation: fishSwing 4s ease-in-out infinite;
transform-origin: center;
display: inline-block;
}

@keyframes fishSwing {
0%   { transform: rotate(3deg) translateX(0); }
50%  { transform: rotate(-3deg) translateX(10px); }
100% { transform: rotate(3deg) translateX(0); }
}

.button-container {
  max-width:560px;
    display: flex; /* Makes the buttons arrange in a row */
    overflow-x: auto; /* Enables horizontal scrolling when content overflows */
    white-space: nowrap; /* Prevents buttons from wrapping to the next line */
    padding-bottom: 20px; /* Add some padding for visual comfort if needed */
    gap: 0.5rem; /* Adds space between buttons */
    /* Optional: Hide scrollbar for a cleaner look */
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
}
.button-container::-webkit-scrollbar {
    display: none;
}

.icon-button-back {
  flex-shrink: 0;
  background-color: #333333; /* Darker gray for the button background */
  border: none;
  border-radius: 50%; /* Makes the button circular */
  width: 50px; /* Adjust size as needed */
  height: 50px; /* Adjust size as needed */

  justify-content: left;
  align-items: left;
  cursor: pointer;
  outline: none; /* Remove outline on focus */
  transition: background-color 0.3s ease; /* Smooth transition for hover */
}

.icon-button {
  flex-shrink: 0;
  background-color: #333333; /* Darker gray for the button background */
  border: none;
  border-radius: 50%; /* Makes the button circular */
  width: 50px; /* Adjust size as needed */
  height: 50px; /* Adjust size as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none; /* Remove outline on focus */
  transition: background-color 0.3s ease; /* Smooth transition for hover */
  font-size:22px;
  margin-right:5px;
}

.icon-button:hover {
  background-color: #5c5c5c; /* Slightly lighter on hover */
}
.wiconslg {
    font-size: 24px; /* Adjust as needed */
    color: #777777;
}
.wiconslgdel {
    font-size: 24px; /* Adjust as needed */
    color: #BC3803;
}

.icon-button .material-icons {
  color: #ffffff; /* White color for the icons */
  font-size: 36px; /* Adjust icon size as needed */
}







    .speechSelectorleft {
    width: 100%;
z-index:1 !important;
    border: 0px red solid;
    margin-top: 0px;
        margin-bottom: 6px;
    display: flex;
    flex-direction: row;
    overflow-x: auto; /* enables horizontal scroll */
    white-space: nowrap; /* prevent wrapping */
    gap: 0.5rem;
    padding: 4px;
    scrollbar-width: none; /* Firefox */
  }



            .effects {
                z-index: 0; /* Set high but not overly high */
                touch-action: none;
                width: 55px;
                height: 55px;
                cursor: pointer;
                position: relative;
                transition: opacity 0.3s;
            }

            .effects.dragging {
                opacity: 0.5;
            }
            .name {
                color: #888;
                display: none;
                margin-top: -3px;
            		font-size:10px;
            }
            .effects-container {
                position: relative;
                overflow: hidden; /* Optional: Prevent overflow if dragging outside container */
                z-index: 0; /* This remains lower than the dragging image */
            }

            .scroll-btn {
                position: absolute;
                bottom: 30px;

                background-color: #666666;
                border:0px #666666 solid;
                padding: 4px;
                cursor: pointer;
                font-size: 15px;
                color: #aaaaaa;
                border-radius: 3px;
                z-index: 0;
                padding-left:5px;
                text-align: center;
            }

            .left-arrow {
                left: 0;
            }

            .right-arrow {
                right: 0;
            }
            .noselect {
                user-select: none;  /* Disable text selection */

            }
            .round-buttonsbubble{
                display: flex;
                flex-direction: row; /* 👈 horizontal layout */
                align-items: center;
                cursor: pointer;
                margin-right: 10px;
                border:0px #111111 solid;
                border-radius: 200px;
                padding-left:12px;
                  padding-right:12px;
                    padding-top:5px;
                      padding-bottom:5px;
                      color:#111111 !important;
                      background-color: #444444;
              }


                 .pn-ProductNav_Wrapper {
                          position: relative !important;
                          padding: 0 0px !important;
                          box-sizing: border-box !important;
                        }

                        .pn-ProductNav {
                          /* Make this scrollable when needed */
                          overflow-x: visible !important;
                          /* We don't want vertical scrolling */
                          overflow-y: hidden !important;
                          /* For WebKit implementations, provide inertia scrolling */
                          -webkit-overflow-scrolling: touch !important;
                          /* We don't want internal inline elements to wrap */
                          white-space: nowrap !important;
                          /* If JS present, let's hide the default scrollbar */
                          /* positioning context for advancers */
                          position: relative !important;
                          font-size: 0 !important;

                        }
                        .js .pn-ProductNav {
                          /* Make an auto-hiding scroller for the 3 people using a IE */
                          -ms-overflow-style: -ms-autohiding-scrollbar;
                          /* Remove the default scrollbar for WebKit implementations */
                        }
                        .js .pn-ProductNav::-webkit-scrollbar {
                          display: none;
                        }


                          /* The container that will actually scroll */
                          .pn-ProductNav_Contents {
                              /* Your inline styles */
                              padding-left: 0px;
                              border: 0px green solid;
                              width: 100%;
                              height: 70px; /* Fixed height for the nav bar */

                              /* --- Crucial for Horizontal Scrolling --- */
                              display: flex; /* Use flexbox to arrange icons horizontally */
                              flex-wrap: nowrap; /* Prevent icons from wrapping to the next line */
                              overflow-x: auto; /* Enable horizontal scrolling when content overflows */
                              -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */

                              /* Optional: Hide scrollbar but keep functionality */
                              scrollbar-width: none; /* Firefox */
                              -ms-overflow-style: none; /* IE and Edge */
                          }
                 #pnNav {scroll-behavior: smooth;}


                        .pn-ProductNav:hover .pn-ProductNav_Contents {
                     animation-play-state: paused; /* Pause animation on hover */
                 }
                        .pn-ProductNav_Contents-no-transition {
                          -webkit-transition: none;
                          transition: none;
                        }


                        .pn-ProductNav_Link {
                          text-decoration: none;
                          color: #aaaaaa;
                          font-size: 0.9rem;


                           	font-family: 'Inter UI', sans-serif;
                          display: -webkit-inline-box;
                          display: -ms-inline-flexbox;
                          display: inline-flex;
                          -webkit-box-align: center;
                              -ms-flex-align: center;
                                  align-items: center;
                          min-height: 20px;
                          border: 0px solid transparent;
                          padding: 0 0px;
                        }
                        .pn-ProductNav_Link + .pn-ProductNav_Link {
                          border-left-color: #eee;
                        }
                        .pn-ProductNav_Link[aria-selected="true"] {
                          color: #111;
                        }

                        .pn-Advancer {
                          /* Reset the button */
                          -webkit-appearance: none;
                             -moz-appearance: none;
                                  appearance: none;
                          background: transparent;
                          padding: 0;
                          border: 0;
                          /* Now style it as needed */
                          position: absolute;
                          top:0;
                          bottom: 0;
                          /* Set the buttons invisible by default */
                          opacity: 1;
                          -webkit-transition: opacity .3s;
                          transition: opacity .3s;
                        }
                        .pn-Advancer:focus {
                          outline: 0;
                        }
                        .pn-Advancer:hover {
                          cursor: pointer;
                        }

                        .pn-Advancer_Left {
                          left: 0;
                        }
                        [data-overflowing="both"] ~ .pn-Advancer_Left, [data-overflowing="left"] ~ .pn-Advancer_Left {
                          opacity: 1;
                        }

                        .pn-Advancer_Right {
                          right: 0;
                        }
                        [data-overflowing="both"] ~ .pn-Advancer_Right, [data-overflowing="right"] ~ .pn-Advancer_Right {
                          opacity: 1;
                        }

                        .pn-Advancer_Icon {
                          width: 20px;
                          height: 44px;
                          fill: #cccccc;
                          border-radius:5px;
                        }

                        .pn-ProductNav_Indicator {
                          position: absolute;
                          bottom: 0;
                          left: 0;
                          height: 0px;
                          width: 100px;
                          background-color: transparent;
                          -webkit-transform-origin: 0 0;
                                  transform-origin: 0 0;
                          -webkit-transition: background-color .2s ease-in-out, -webkit-transform .2s ease-in-out;
                          transition: background-color .2s ease-in-out, -webkit-transform .2s ease-in-out;
                          transition: transform .2s ease-in-out, background-color .2s ease-in-out;
                          transition: transform .2s ease-in-out, background-color .2s ease-in-out, -webkit-transform .2s ease-in-out;
                        }



                        .pn-ProductNav_Wrapper {
                            overflow-x: scroll;
                            scrollbar-width: none; /* For Firefox */
                        }

                        .pn-ProductNav_Wrapper::-webkit-scrollbar {
                            display: none; /* For Chrome, Safari, and Edge */
                        }

                        .btnsaveaction {
                            display: flex; /* Make the button a flex container */
                            align-items: center; /* Vertically center the icon and text */
                            justify-content: center; /* Horizontally center the icon and text within the button */
                            gap: 5px; /* Add some space between the icon and the text */

                            /* Inherit button styling from previous examples or define here */
                            background-color: #333333; /* Example background color */
                            color: #666666; /* Text and icon color */
                            padding: 6px 10px; /* Adjust padding as needed */
                            border: none;
                            border-radius: 5px;
                            cursor: pointer;
                            font-size: 1rem; /* Base font size for the button text */
                        }

                        .btnsaveaction:hover {
    background-color: #BC3803;
    /* Remove 'color:#ffffff;' from here if it only applies to the button's text,
       and not the icon directly. If the button's text is also white, keep it.
       For the icon, we'll target it specifically below. */
    color: #ffffff; /* Keep this if you want the button's text (e.g., "Save") to turn white on hover */
}

.wiconslgaction {
    font-size: 24px; /* Adjust as needed */
    color: #666666; /* Default color for the icon */
}

/* This is the key change: When .btnsaveaction is hovered,
   find any .wiconslgaction INSIDE it and change its color. */
.btnsaveaction:hover .wiconslgaction {
    color: #ffffff;
}




.btnsaveactionsm {
    display: flex; /* Make the button a flex container */
    align-items: center; /* Vertically center the icon and text */
    justify-content: center; /* Horizontally center the icon and text within the button */
    gap: 5px; /* Add some space between the icon and the text */

    /* Inherit button styling from previous examples or define here */
    background-color: #333333; /* Example background color */
    color: #777777; /* Text and icon color */
    padding: 15px; /* Adjust padding as needed */
    border: none;
    border-radius: 200px;
    cursor: pointer;
    height:20px;
    font-size: 12px; /* Base font size for the button text */
}

.btnsaveactionsm:hover {
background-color: #BC3803;
/* Remove 'color:#ffffff;' from here if it only applies to the button's text,
and not the icon directly. If the button's text is also white, keep it.
For the icon, we'll target it specifically below. */
color: #ffffff; /* Keep this if you want the button's text (e.g., "Save") to turn white on hover */
}

.wiconslgactionsm {
font-size: 15px; /* Adjust as needed */
color: #777777; /* Default color for the icon */
}

/* This is the key change: When .btnsaveaction is hovered,
find any .wiconslgaction INSIDE it and change its color. */
.btnsaveactionsm:hover .wiconslgactionsm {
color: #ffffff;
}
.wiconslgactionsmdel {
font-size: 15px; /* Adjust as needed */
color: #BC3803; /* Default color for the icon */
}

/* This is the key change: When .btnsaveaction is hovered,
find any .wiconslgaction INSIDE it and change its color. */
.btnsaveactionsm:hover .wiconslgactionsmdel {
color: #eeeeee;
}




                        .tab-buttons {

                            display: flex; /* Makes the buttons arrange horizontally */
                            flex-direction: row; /* Explicitly sets horizontal arrangement */
                            /* Optional: Add spacing between buttons */
                            gap: 0px; /* Adjust as needed */
                            /* Optional: Center the group of buttons if the tab-buttons div is wider than its content */
                            justify-content: center; /* Centers the buttons horizontally within tab-buttons */
                            /* Optional: Allow wrapping if screen size is too small and buttons would overflow */
                            flex-wrap: wrap; /* Allows buttons to wrap to the next line if space is limited */

                            /* Add any other styling for the tab-buttons container itself */
                            margin-top: 0px; /* Example: Space above the tabs */
                            margin-bottom: 20px; /* Example: Space below the tabs */
                            width: 100%; /* Ensure it takes full width if placed in a centered container like .main-content-wrapper */
                            max-width: 900px; /* Match max-width of your main content area for consistent centering */
                            margin-left: auto; /* For centering the tab-buttons container itself */
                            margin-right: auto; /* For centering the tab-buttons container itself */
                        }

                        /* Ensure your tab buttons also have appropriate styling */
                        .tab-button {
                            /* Make button content (icon and text) align nicely */
                            display: flex;
                            align-items: center; /* Vertically centers icon and text */
                            justify-content: center; /* Horizontally centers icon and text within the button */
                            gap: 5px; /* Space between icon and text */

                            /* Basic button styling */
                            background-color: #5c5333333c5c ; /* Default background */
                            color: #ffffff; /* Default text/icon color */
                            padding: 0px 0px; /* Adjust padding */
                            border: none;
                            border-radius: 200px; /* Slightly rounded corners */
                            cursor: pointer;
                            font-size: 1rem;
                            transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
                        }

                        .tab-button:hover {
                            background-color: #444444;
                        }

                        .tab-button.active {
                            background-color: #444444; /* Highlight active tab */
                            color: #ffffff;
                        }

                        .tab-button.active:hover {
                            background-color: #444444;
                        }
.fs14{font-size:14px !important}
.fs12{font-size:12px !important}
.qrcode{width:50px;height:50px;}
        .divqrcode {

        	    position: absolute !important; /* Position icons absolutely within the grid item */
        			bottom: 10px !important; /* Position edit icon at the top right */
        			left: 10px !important; /* Position edit icon at the top right */

        }

        .iconoptionsdownload {
           z-index: 200;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: #777;
            font-size: 13px;
            font-weight: 600;
            line-height: 25px;
        }
        .litemstext {
           z-index: 200;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            position: absolute;
            top: 10px;
            left: 10px;
            color: #777;
            font-size: 13px;
            font-weight: 600;
            line-height: 25px;
        }

        .postbutton {
           z-index: 200;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            position: absolute;
            top: 10px;
            right: 10px;
            color: #777;
            font-size: 13px;
            font-weight: 600;
            line-height: 25px;

        }

        .delbut {
            border: 0 solid #222;
            border-radius: 3px;
            background-color: #a30000;
            color: #fff;
            font-weight: 600;
            font-size:12px;padding:8px !important;
        }

        .pubbut {
            border: 0 solid #222;
            border-radius: 3px;
            background-color: #B4380C;
            color: #ffffff;
            font-weight: 600;
            font-size:12px;padding:8px !important;
        }

          .tags {list-style-type: none !important;
             z-index: 200;
              visibility: hidden;
              opacity: 0;
              transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
              position: absolute;
              top: 10px;
              left: 10px;
          }
          .image-item:hover .tags {
            visibility: visible;
              opacity: 1;
                overflow: hidden;
          }
          .image-item:hover .litemstext {
            visibility: visible;
              opacity: 1;
                overflow: hidden;
          }

          .image-item:hover .postbutton {
            visibility: visible;
              opacity: 1;
                overflow: hidden;
          }


          .image-item:hover .iconoptionsdownload {
            visibility: visible;
              opacity: 1;
                overflow: hidden;
          }



          .tagbut,
          .tagbutsel {
              text-transform: uppercase;
              padding-left: 5px;
                padding-right: 5px;
                  padding-top: 2px;
                    padding-bottom: 2px;
              font-size: 9px;
              background-color:#333333;
              color:#999999;
              border:none;
              margin-right: 4px;
          }
          .delbreakdiv {
          	display:none !important;
          	    position: absolute !important; /* Position icons absolutely within the grid item */
          			top: 50px !important; /* Position edit icon at the top right */
          			right: 10px !important; /* Position edit icon at the top right */
          			z-index:10 !important;
          }
          		.delbreak{
          			width:20px !important;
          			height:20px !important;
          			border-radius:200px !important;

                  background-color: red !important;padding:1px !important;
              }



              /* Tags container */
              /* Dummy Content area */
   .dummy-content {display:none;border:0px red solid;
       padding: 10px 15px;
       font-size: 10.9rem;
       color: #444;
       line-height: 1.4;
   }
.fade-scroll{margin-top:135px;background-color:#333333;padding:5px;border:0px red solid;width:180px;max-height:420px;overflow-y: scroll;flex-direction: column-reverse;}
.fade-scroll::-webkit-scrollbar {
  display: none;
}
.download-icon{width:40px !important;border:1px #ffffff solid !important;border-radius: 200px !important;background-color:#ffffff;padding:1px;}




.placeinfo {
  height: 50px;
  border: 2px yellow solid;
	font-size:30px;
	width:100px;
}

.loclabel{

	border: 0px #ffffff solid;
	 font-weight: 600;font-size:14px;
	color: #999999;
		margin-left:3px;
	margin-right:4px;
	background-color:transparent;
	padding:6px;
	outline: none;
	cursor:pointer;
}
.maticointl{
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 70px !important;
	height: 46px !important;
	font-size: 30px !important;
	border-radius: 10px !important;
	background-color: transparent !important;
	border:2px #666666 solid !important;
	padding: 0px !important;
	color: #B4380C !important;}
.maticous{
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 70px !important;
	height: 46px !important;
	font-size: 30px !important;
	border-radius: 10px !important;
		border:2px #666666 solid !important;
	background-color: transparent !important;
	padding: 0px !important;
	color: #B4380C !important;}

	.matico{
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 70px !important;
		height: 46px !important;
		font-size: 30px !important;
		border-radius: 10px !important;
		background-color: #333333 !important;
		padding: 0px !important;
		color: #B4380C !important;}


.loctext{
	font-family:'Inter UI';
font-size: 10px;
margin-top: 6px;
color: #777777;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 70px;
width:100%;
margin-left:0px;
display: block;
text-align:center !important;
border:0px red solid;
}
.regiontext{
/* 363940 */
	border: 2px #444444 solid;
font-size:12px;
	color: #999999;
		margin-left:0px;
	margin-right:0px;
	background-color:#444444;
	border-radius:10px;
	padding-left:10px;
	padding-right:10px;
	outline: none;
	cursor:pointer;
text-decoration: none;
width:60px;
height:55px;

}

.region{
/* 363940 */
	border: 2px #444444 solid;
	 font-weight: 600;font-size:12px;
	color: #999999;
		margin-left:0px;
	margin-right:0px;
	background-color:transparent;
	border-radius:200px;
	padding-left:10px;
	padding-right:10px;
	outline: none;
	cursor:pointer;
text-decoration: none;
min-width:55px;
height:32px;
}
.iconnavlocation{margin-right:0px;}
.iconlocation {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 12px; /* Adjust icon size */
  color: #555; /* Adjust icon color */
	/* background-image: url("images/clip.svg");
	background-repeat: no-repeat; */
	background-position: center;
}


.geodetails {
    position: absolute; /* Position icons absolutely within the grid item */
    display: block; /* Initially hide icons */
    justify-content: center; /* Center icon images */
    align-items: center; /* Center icon images */
		bottom: 20px !important; /* Position edit icon at the top right */
		left: 14px !important; /* Position edit icon at the top right */
		font-size: 12px;color:#ffffff;
		cursor:pointer;
}
.card_exp:hover .geodetails  {
    display: block !important; /* Show icons when hovering over the grid item */
}
#loadcities::-webkit-scrollbar {
  display: none;
}
.hscroll::-webkit-scrollbar {
  display: none;
}
.hscroll{margin-top:10px;display: flex;flex-direction: row;overflow-x: auto;overflow-y: hidden;white-space: nowrap;scroll-behavior: smooth;-webkit-overflow-scrolling: touch; gap: 3px; justify-content: center;}
.txtcomicsearch{background-color:transparent;color:#ffffff;border:0px;border-bottom: 2px #444444 solid;padding:10px;max-width:260px;width:100%;border-radius: 0px;}
.txtcomicsearch:focus{outline: none;
  box-shadow: none;
  border-color: inherit;}




  #inputplace {
    margin: 0px;
    padding: 0px;
    font-family: Roboto, sans-serif;
    font-size: large;
    font-weight: bold;
  	background-color:transparent !important;
  	  outline: none !important;
      width:100% !important;
  }


  input:focus:not(:focus-visible) {
    outline: none;
  }
  	gmp-place-autocomplete input[type="text"] {
  			background-color: #333333 !important;
  			color: white;
  			padding: 0px;
  			border: 0px red solid;
  			margin: 0px;
	height:55px !important;
  			box-sizing: border-box;
  			outline: none;
  			font-size: 16px;
  			border-radius: 5px;
  			  outline: none;
          width:100%;
  	}
    gmp-place-autocomplete {
    	height:55px !important;
      width: 100% !important;
    	margin:0px !important;
    	background-color:#333333 !important;
    	/* border-top: 5px solid #333333 !important;
    		border-left: 5px solid #333333 !important;
    			border-right: 5px solid #333333 !important;
    				border-bottom: 5px solid #333333 !important; */

    /*
    	    box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.5); */
    			border-radius:5px !important;
    }

    .text-white {
        color: #ffffff !important;
    }


    .gradient-brew {
      background: linear-gradient(to right, #007bff, #10644b,#6610f2); /* Adjust colors and direction as needed */
      -webkit-background-clip: text;
      color: transparent;
      display: inline-block; /* To contain the gradient to the text width */
    }

    .gradientbill {
      background: linear-gradient(to right, #007bff, #6610f2,#10644b); /* Adjust colors and direction as needed */
      -webkit-background-clip: text;
      color: transparent;
      display: inline-block; /* To contain the gradient to the text width */
    }

    .gradient-text {
      background: linear-gradient(to right, #007bff, #10644b,#6610f2); /* Adjust colors and direction as needed */
      -webkit-background-clip: text;
      color: transparent;
      display: inline-block; /* To contain the gradient to the text width */
    }
    .gradient-teal-text {
      background: linear-gradient(to right, #f0f0f0, #20c997, #cccccc); /* Light gray, medium teal, slightly darker gray */
      -webkit-background-clip: text;
      color: transparent;
      display: inline-block;
    }
.mb-2{margin-bottom:10px;}
.justlink{text-decoration: none !important;}
.citybuttons{margin-right:5px;display: flex; flex-direction: column; align-items: center;margin-top:0px;}

.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center; /* centers flex items horizontally */
  gap: 10px; /* spacing between image and text */
  width: 100%; /* make sure it takes full width */
}

.logo-text {
  font-size: 30px;
  font-weight: bold;
  color: #ffffff; /* adjust as needed */
  font-family: sans-serif;
}
.bantext {color:#B4380C;padding-bottom:10px;}
.ctabutton{background-color:#B4380C;color:#e8c3b6;font-size:16px;width:180px;padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px;border:none;border-radius:200px;}