.readGeneratorContainer{
	display: flex;
	justify-content: space-evenly;
}
.readGeneratorHeading h3 {
	font-size: 32px;
	font-weight: 700;
}
 #noChancesMessage {
    display: none;
    margin-top: 15px;
    font-weight: bold; /* Make text bold */
  }

  #noChancesMessage a {
    color: #42288a; /* Set link color to red */
    text-decoration: none; /* Optional: Removes underline from links */
  }

  #remainingChancesReadGenerator {
    margin-left: 10px; /* Adjust the space as needed */
  }

  #textForm textarea {
    width: 100%;
    min-height: 100px; /* Minimum height */
    overflow-y: hidden; /* Prevent scrollbar */
    padding: 8px;
    box-sizing: border-box; /* Include padding in the height calculation */
  }

  #textForm button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #42288a; /* Example blue background */
    color: white; /* Button text color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
  }

  .level-container {
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
  }

  .level-entry {
    margin-bottom: 10px;
  }

  .level-name {
    font-weight: bold;
  }

  .level-value {
    float: right;
    font-weight: normal;
  }

  #apiResponseReadability h2 {
    color: #333;
    font-size: 24px;
  }

  #ekit-popup-modal-toggler {
    display: none;
  }

  .result-entry {
    border-left: 5px solid #42288a;
    /*margin: 10px 0;*/
    margin-bottom: 5px;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 50% 20% 30%;
  }
  .pp{
          padding: 2px 4px;

  }

  .result-name {
    font-weight: bold;
    color: #555;
    
  }

  .result-placeholder {
    color: #999;
  }

  /* Style adjustments for when actual results are displayed */
  .resultValueReadGenerator {
    color: #ff0000; /* Adjust the color to match your theme */
    font-weight: bold;
    
  }

  .loading {
    /* Example style for loading state */
    color: #999;
  }

  .result-head {
    display: grid;
    grid-template-columns: 50% 20% 30%;
  }
	 .rightContainerReadGenerator{
		width: 45%;
	
}
	.leftContainerReadGenerator{
		width: 45%;

}
@media only screen and (max-width: 600px) {
   .result-entry {
    font-size: small;
  }
  .result-head h5{
      font-size: 16px;
  }
	.readGeneratorContainer{
	display: block;
}
}
 @media only screen and (max-width: 600px) {
	 .readGeneratorContainer {
		display: block;
		width: 100%;
     }
	 .rightContainerReadGenerator{
		width: 100%;
	 }
	 .leftContainerReadGenerator{
		width: 100%;
		 		margin-bottom: 20px;

	 }
	  #remainingChancesReadGenerator {
		display: block;
		margin-left: 0;
		padding: 10px;
		text-align: center;
	 }
	 #submitButtonReadGenerator{
		 display: flex;
		 width: 100%;
		 justify-content: center;
	 }
	 .readGeneratorContainer .readGeneratorHeading{
		 text-align: center;
		 font-size: 24px;
	 }

}
   .readGeneratorResultContainer {
	   margin-top: 10px;
	   margin-bottom: 10px;
              gap: 10px;
     }
	 #readGeneratorResult{
		 display: none;
	 }
            .readGeneratorGeneralLevelContainer {
              border: 2px solid gray;
              padding: 11px;
              font-size: small;
              border-radius: 8px;
              width: auto
            }

            .readGeneratorIndicatorsContainer {
              border: 2px solid gray;
              padding: 11px;
              font-size: small;
              border-radius: 8px;
              width: 100%;
            }

            .indicatorScore {
              width: 72%;
            }

            .indicators {
              display: flex;
              flex-direction: column;
              gap: 4px;
            }

            .single-indicator {
              display: flex;
              flex-direction: row;
              gap: 5px;
              justify-content: space-between;
              align-items: center;
            }

            .single-indicator .indicator-name {
              width: 32%;
            }

            .single-indicator .indicator-progress {
              width: 50%;
            }

            .single-indicator .indicator-score {
              width: 10%;
            }

            /* Start - Progress Bar Styling */
            .progress {
              --progress-color: #42288A;
              /* the progress color */
              --background: #d3d3d300;
              /* the background color */
              border: none;
              /* width: 100%; */
              height: 8px;
              /* margin: 0 10px; */
              background: var(--color-1);
              border-radius: 10px;
              /* background: var(--background); */
              --color-1: #42288A;

            }

            .scale_1 {
              background: var(--color-1);
            }

            .readGeneratorGeneralLevelContainer .genealLevel {
              font-size: 38px;
              text-align: center;
              color: var(--color-1);
              margin: 0;
            }


.readGeneratorLoading {
    display: inline-flex;
    overflow: hidden;
    white-space: nowrap;
    animation: typing;
    animation-duration: 2s;
    animation-timing-function: steps(30,end);
    animation-fill-mode: forwards;
    animation-iteration-count: 10,infinite
}

@keyframes typing {
    0% {
        width: 0
    }

    50% {
        width: 40px
    }

    100% {
        width: 0
    }
}
#showMoreBtn{
	 color: #42288a;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    line-height: 18px;
    text-underline-offset: .2em;
}
#showMoreBtn:hover{
	 color: black;
}
/* tool tip */

.sentencesIndicator .reading-tooltip {
    position: relative;
    /* making the .catile-tooltip span a container for the catile-tooltip text */
    border-bottom: 1px dashed #000;
    /* little indicater to indicate it's hoverable */
}

.sentencesIndicator .reading-tooltip:before {
    content: attr(data-text);
    /* here's the magic */
    position: absolute;

    /* vertically center */
    top: 50%;
    transform: translateY(-50%);

    /* move to right */
    left: 100%;
    margin-left: 10px;
    /* and add a small left margin */
	font-size: smaller;
    /* basic styles */
    width: 170px;
    padding: 10px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    text-align: start;
    font-size: 14px;
    font-weight: 500;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; */
    display: none;
    /* hide by default */
    /* opacity: 0;
        transition: .5s opacity; */
}

.sentencesIndicator .reading-tooltip:after {
    content: "";
    position: absolute;

    /* position catile-tooltip correctly */
    left: 100%;
    margin-left: -4px;
    /* vertically center */
    top: 50%;
    transform: translateY(-50%);
    /* the arrow */
    border: 10px solid #000;
    border-color: transparent black transparent transparent;
    display: none;
}

.sentencesIndicator .reading-tooltip:hover:before,
.sentencesIndicator .reading-tooltip:hover:after {
    display: block;
    z-index: 999;
    /* opacity: 1; */
}
.formData{
	margin-bottom: 10px;
	
}
.cathovenReadingLink{
	 color: #42288a !Important;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline !Important;
    line-height: 18px;
    text-underline-offset: .2em;
}
.cathovenReadingLink:hover{
	 color: black;
}
#readGeneratorMessageMore{
	  font-style: italic;

}