/* Styles for the JSON icon */
.json-icon {
  font-size: 24px; /* Adjust the size as needed */
  transform: translate(7.27755px, -13.3533px);
}
.navbar{
background-color: #B40000 !important
}

.bg-info, .bg-info h4{
background-color:   #04707a !important;
color: #fff !important;
}
.header-container {
display: flex;
align-items: center;
}
.icon-right {
margin-left: 10px; /* Adjust margin as needed for spacing */
}
.title,
.tagline {
display: block;
margin: 0;
font-size: 24px;
}
.tagline{
font-size: 11px;
}

.grey-background {
background-color: grey !important;
}

h2 {
color: #333;
margin-bottom: 20px;
text-align: center;
}





.centered-text {
flex: 1;
text-align: center;
}

.title-custom{
font-family: 'Fantasy', 'Cursive', sans-serif;
font-weight: bold;
}

.navbar-toggler-icon-custom {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

sup.new {
background: #c20000;
border-radius: 1em;
color: #fff;
display: inline-block;
font-size: .45rem;
font-weight: 700;
line-height: 1.7;
padding: 0 .4em;
text-rendering: optimizeLegibility;
text-transform: uppercase;
top:-8px !important;
}
@media (min-width: 992px) {
.nav-link.text-primary{
border-bottom: 2px solid grey;
}
}

.nav-link:not(.navlink-custom) {
position: relative;
color: azure !important;
}

.nav-link:hover::after {
width: 100%;
left: 0;
transform: translateX(0);
}

.accordion-body{
background-color: beige;
}

#shareIt .fa-linkedin{
color: #0a66c2;
}
#shareIt .fa-facebook{
color: #0866ff;
}
#shareIt .fa-x-twitter{
color: #333;
}

.accordion-button.no-bg::after {
background-image: none;
}

.drop-zone {
border: 2px solid #ccc;
cursor: pointer;
background-color: #f9f9f9;
}
.out-zone {
border: 2px solid #18a8dc;
padding: 0 20px;
background-color: #fff;
}
.code-zone {
border: 2px solid #18a8dc;
padding: 20px;
background-color: #fff;
overflow: auto;
}
.drop-zone.dragover {
border-color: #000;
background-color: #eee;
}
#output a {
display: block;
margin: 10px 0;
}
#output {
margin-top: 20px;
}
#downloadZip {
display: none;
}
#copyCode{
cursor: pointer;
}
.imageUpload:hover{
background-color: #b3c3c9d1;
}

.prev-download-fav {
display: flex;
align-items: center;
gap: 10px; /* Adds spacing between elements */
}

.prev-download-fav a {
text-decoration: underline;
color: blue; /* Optional: to style the links */
}

.prev-download-fav a.download-icon {
margin-right: 10px; /* Adds extra space to the right of the download link */
}

.output {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.output input {
flex: 1;
padding: 10px;
font-size: 1.2em;
}
.output button {
margin-left: 10px;
}
.warning {
color: #c81a00;
display: flex;
align-items: center;
}
.output {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.output input {
flex: 1;
padding: 10px;
font-size: 1.2em;
}
.output button {
margin-left: 10px;
}
.warning {
color: #c81a00;
display: flex;
align-items: center;
}
#passwordLength , #bulkPasswordLength{
width: 100%;
margin-bottom: 20px;
padding-top: 18px;
-webkit-appearance: none;
appearance: none;
background: transparent;
}
#passwordLength::-webkit-slider-thumb, #bulkPasswordLength::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
border: 2px solid #007bff;
}
#passwordLength::-moz-range-thumb, #bulkPasswordLength::-moz-range-thumb {
width: 25px;
height: 25px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
border: 2px solid #007bff;
}
#passwordLength::-webkit-slider-runnable-track , #bulkPasswordLength::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: #ddd;
border-radius: 5px;
}
#passwordLength::-moz-range-track, #bulkPasswordLength::-moz-range-track {
width: 100%;
height: 8px;
background: #ddd;
border-radius: 5px;
}

.warning {
flex-basis: 100%;
margin-top: 10px; /* Adjust as needed */
}

.length-label {
  position: relative;
  width: 100%;
}
.length-circle {
  position: absolute;
  top: 1px;
  background: #2964dc;
  color: #fff;
  padding: 5px 7px;
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  width: 37px;
  height: 37px;
  z-index: 2;
}

input[type="range"]::-webkit-slider-thumb {
  cursor: pointer;
  margin-top: -7px;
  position: relative;

}