/* styles.css */


  @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Barlow+Semi+Condensed:wght@200;300;400;500;600;700;800;900&family=Barlow:wght@200;300;400;500;600;700;800;900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:wght@300;400;500;700&display=swap');


/* font-family: 'Barlow', sans-serif; */
/*  font-family: 'Barlow Condensed', sans-serif; */
/*  font-family: 'Barlow Semi Condensed', sans-serif; */
/* font-family: 'Libre Baskerville', serif; */
/* font-family: 'Merriweather', serif; */
/* font-family: 'Roboto', sans-serif; */


/* FONT STYLES */

.homepage-border {
  display:block;
  width:100%;
  border:4px solid #0080ff;
text-align:center;
} 

.homepage-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}



.homepage-images {
  max-width: 100%;
  height: auto;
}

.homepage-image-container-right {
  display: block;
  position: relative;
  max-width: 50%;
}

.homepage-images-right {
  max-width: 50%;
  height: auto;
  float: right;
}

.home-page-description { 
  padding-left:0px;
  padding-right:15px;
  font-family: 'Merriweather', serif; 
  font-size: 15px;
  font-weight:400;
  line-height:21px;
  letter-spacing: .5px;
}

.home-page-description-header { 
  padding-left:0px;
  padding-right:15px;
  font-family: 'Barlow', sans-serif;
  font-size: 25px;
  font-weight:800;
  color:#000;
  text-transform: uppercase;
  text-align: center;
}



.font-libre {font-family: 'Libre Baskerville', serif;}

.font-barlow-regular {font-family: 'Barlow', sans-serif;}
.font-barlow-semi {font-family: 'Barlow Semi Condensed', sans-serif;}
.font-barlow {font-family: 'Barlow Condensed', sans-serif;}
.font-roboto {font-family: 'Roboto', sans-serif; }
.font-roboto-slab {font-family: 'Roboto Slab', sans-serif; }

.font-roboto-serif {font-family: 'Roboto Serif', serif;}
.font-merriweather {font-family: 'Merriweather', serif; }
.font-georgia {font-family:Georgia, 'Times New Roman', Times, serif;}
.font-roboto-light {font-family: 'Roboto', sans-serif;
font-weight: 200; /* Lighter weight */}

.font-roboto-bold {font-family: 'Roboto', sans-serif;
font-weight: 500; /* Bold weight */}

.font-roboto-extra-light {font-family: 'Roboto', sans-serif;
font-weight: 300; /* Extra light weight */
}

.font-weight-200 {font-weight: 200;}
.font-weight-300 {font-weight: 300;}
.font-weight-400 {font-weight: 400;}
.font-weight-bold {font-weight: bold;}
.font-weight-500 {font-weight: 500;}
.font-weight-600 {font-weight: 600;}
.font-weight-700 {font-weight: 700;}
.font-weight-800 {font-weight: 800;}
.font-weight-900 {font-weight: 900;}
h1 {font-size: 30px;} 
h2 {font-size: 28px;} 
h3 {font-size: 22px;} 
h4 {font-size: 20px; padding-bottom:10px;} 
.font-size-8 {font-size: 8px;}
.font-size-9 {font-size: 9px;}
.font-size-10 {font-size: 10px;}
.font-size-11 {font-size: 11px;}
.font-size-12 {font-size: 12px;}
.font-size-13 {font-size: 13px;}
.font-size-14 {font-size: 14px;}
.font-size-15 {font-size: 15px;}
.font-size-16 {font-size: 16px;}
.font-size-17 {font-size: 17px;}
.font-size-18 {font-size: 18px;}
.font-size-19 {font-size: 19px;}
.font-size-20 {font-size: 20px;}
.font-size-21 {font-size: 21px;}
.font-size-22 {font-size: 22px;}
.font-size-23 {font-size: 23px;}
.font-size-24 {font-size: 24px;}
.font-size-26 {font-size: 26px;}
.font-size-28 {font-size: 28px;}
.font-size-30 {font-size: 30px;}
.font-size-32 {font-size: 32px;}

.font-size-34 {font-size: 34px;}


.font-color-red {color: red;}
.font-color-blue {color: rgb(0, 81, 255);}
.font-color-black {color: #000;}
.font-color-white {color: #fff;}
.font-color-grey {color: rgba(0, 0, 0, 0.64)}
.header-font-size {font-size:35px; font-family: Times New Roman, Arial; color:#FFFFFF;}



        /* Add your custom styles for the flex container here */
        .word-container {
          display: flex;
          flex-wrap: wrap;
          max-height: 300px;
          overflow-y: auto;
          border: 1px solid #ccc;
          padding: 10px;
          margin-bottom: 10px;
width:95%;
justify-content: center;

      }
      .word {
          margin: 5px;
          padding: 5px;
          border: 1px solid #ccc;
          border-radius: 5px;
      }


/* QUESTIONABLE WORDS CONTAINER AND STYLES */
.word-container-main {
  display:block;
  padding-top:15px;
  padding-left:20px; 
  background-color:#f0f8ff;
   border-radius:10px; 
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  width:95%;
  }

  .word-container-fry {
    display: flex;
    flex-direction: column;
    width:100%;
    padding-left: 20px;
    background-color: rgba(255, 255, 255, 1);
    overflow-y: auto;
    min-height: 290px;
    max-height: 320px; /* Set a maximum height to enable scrolling */
    border: 10px solid #FFF;

    justify-content: flex-start; /* Align flex items to the start of the container */
    align-items: flex-start; /* Align flex items to the start of the container */
    text-align: left !important; /* Left-align the text inside the container */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  }
  


.material-symbols-checkcircle::before {
font-family: "Material Symbols Outlined";
content: 'check_circle'; /* check circle */
}
.material-symbols-cancel::before {
font-family: "Material Symbols Outlined";
content: 'cancel'; /* check circle */
}

.material-symbols-rightarrow::before {
font-family: "Material Icons";
content: '\25B6'; /* Unicode code for arrow_right */
/* Other styling properties if needed */
}

.fry-flex-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh; /* Adjust this value as needed to fit your layout */
}

.fry-flex-header-item {
margin: 10px; /* Add margin to create spacing between rows */
}

.vertical-text {
transform: rotate(90deg); /* Adjust the angle (in degrees) as needed */
/* The following properties are optional and can be adjusted as per your requirements */
transform-origin: left bottom; /* Adjust the rotation origin if necessary */
white-space: nowrap; /* Prevent wrapping of the word */
display: inline-block; /* Make the container size fit the rotated content */
position:absolute;

color:#fff;
background-color:#3390ff
}

.vertical-text-syllables {
  transform: rotate(90deg); /* Adjust the angle (in degrees) as needed */
  /* The following properties are optional and can be adjusted as per your requirements */
  transform-origin: left bottom; /* Adjust the rotation origin if necessary */
  white-space: nowrap; /* Prevent wrapping of the word */
  display: inline-block; /* Make the container size fit the rotated content */
  position:absolute;
  padding:4px;
margin-top:0px;
font-family: 'Barlow Semi Condensed', sans-serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:.5px;
  z-index:999;
  color:#fff;
  background-color:#3390ff
  }

/* DRAGGABLE CONTAINER */
#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}


.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}


/* scroll to top */
.scroll-top {
  display: none;
}
/* -------------------------------------------------------- */
/* BACK TO TOP BUTTON */
/* -------------------------------------------------------- */

#scroll {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  text-indent: -9999px;
  border-radius: 60px;
  transition: visibility 10s, opacity 1s linear;
  z-index:105;
}

#scroll span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -12px;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-bottom-color: #ffffff;
}

#scroll:hover {
  background-color: #e74c3c;
}



  body {
background-color: #FFFFFF;
margin: 0;
padding: 0;
font-family: sans-serif;
color: #000000;
background-image: url("https://readabilityformulas.com/images/bluebackground.jpg"); 
background-repeat: repeat; 

}

div {box-sizing: border-box;}

#errorNonText {display:none;} /* textarea error message if non-text characters

/* WEBSITE HEADER NAV */

.fixed-bottom-nav {

position: fixed;
bottom: -100px; /* Initial position below the viewport */
left: 0;
width: 100%;
opacity: 1;
height: 40px; /* Adjust height according to your needs */
background-color: #ffffff; /* Set desired background color */
transition: bottom 0.8s ease; /* Add a transition effect */
box-shadow: 0 -6px 5px 1px rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #0080ff;
display: flex;
justify-content: center;
align-items: center;
z-index:100;
}


  .main-header-nav-container {
    position: sticky;
    z-index:99999;
    top: 0;
    width: 90%;
    margin: 0 auto;
    padding: 0 0 0 0;

    text-align: center;
    align-items: center;
    justify-content: center;

    height:42px;

    border-left: 1px solid black;
    border-right: 1px solid black;
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.2);

    background-color: rgba(39, 162, 219, 0.5);
  }

  .nav-bar-blue-line {
    background-color: #27a2db;
    display: inline;
    padding-top: 3px;
    height: 15px;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 0 auto; /* Center the container horizontally */
    position: relative; /* Required for positioning the child elements */
    z-index:-1;
  }

  .nav-fostrap {
font-family: 'Roboto', sans-serif;
font-weight: bold;
display: block;
margin-bottom: 15px;
background: #27a2db;
margin-top: -41px;
z-index:9999;
padding: 0;
height: 35px;
}

  .nav-fostrap ul {
      
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
    z-index:10;
  }

  .nav-fostrap li {

    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    font-size: 15px;
    color: #ffffff;
    z-index:999;
  }

  .nav-fostrap li a {

    padding: 6px 6px;
    font-size: 15px;
    color: #ffffff;
    display: inline-block;
    outline: 0;
    font-weight: 500;
  }

  .nav-fostrap li:hover ul.dropdown {

    display: block;
    
  }

  .nav-fostrap li ul.dropdown {
position: absolute;
z-index:999;

max-height: 0; /* hides the menu initially */
min-width: 100%;
background: #2980B9;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
padding-top: 0;
left: 0; /* Adjusted */
overflow: hidden;
transition: max-height 1s ease-in-out;
}

  .nav-fostrap li ul.dropdown li {
    display: block;
    list-style-type: none;
  }

  .nav-fostrap li ul.dropdown li a {
      border: 2px solid #def1f0;
    padding: 9px 9px;
    font-size: 15px;
    color: #fff;
    display: block;
    font-weight: 500;
  }

  .nav-fostrap li ul.dropdown li:last-child a {
    border-bottom: none;
  }

  .nav-fostrap li:hover a {
      border: 2px solid #def1f0;
    background: #2980B9;
    color: #fff !important;
  }

  .nav-fostrap li:first-child:hover a {
    border-radius: 3px 0 0 3px;
  }

  .nav-fostrap li ul.dropdown li:hover a {
    background: rgba(0, 0, 0, 0.1);
  }

  .nav-fostrap li ul.dropdown li:first-child:hover a {
    border-radius: 0;
  }

  .nav-fostrap li:hover .arrow-down {
    border-top: 5px solid #fff;
  }

  .arrow-right::after {

      content: '';
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #def1f0;
display: inline-block;
padding-right:2px;

}
  .arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #def1f0;
    position: relative;
    top: 15px;
    right: -5px;
  }

  .title-mobile {
    display: none;
  }

  /* Adjustments for off-screen positioning */

  .nav-fostrap li ul.dropdown {
    left: -100%; /* Hide the dropdown initially */
  }
  .nav-fostrap li:hover ul.dropdown {
max-height: 500px; /* adjust as needed */
}


.search-form  {
  display:block;
padding:20px;

}


/* WEBSITE TOP MAIN HEADER */
.main-header-container {
  box-shadow: 10px 10px 25px 5px rgba(0, 0, 0, 0.4);
  border-top: 1px solid black;    border-left: 1px solid black;     border-right: 1px solid black;
  display: flex;
align-items: center;
justify-content: center;
  height:180px; 
width: 90%;
margin: 0 auto; /* Center the container horizontally */
position: relative; /* Required for positioning the child elements */
background-image: url("https://readabilityformulas.com/images/header-middle-image1.png");
background-repeat: repeat;

}

.main-header-container-left-image
{

position: absolute;
width: 230px;
height: 180px;
z-index: 2;
left: 0;

background-image: url("https://readabilityformulas.com/images/header-left-image1.png");
background-repeat: no-repeat;
background-size: cover;
}

.main-header-container-right-image {
z-index: 2;
position: absolute;
width: 227px;
height: 180px;
right: 0;
background-image: url("https://readabilityformulas.com/images/header-right-image1.png");
background-repeat: no-repeat;
background-size: cover;

}

.main-header-container-custom-text {
position: absolute;
top: 54%;
left: 50%;
text-align:center;
transform: translate(-50%, -50%);
}




  .main-header-font {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 5.0vw;
    font-family: Times New Roman, Arial;
    color: #FFFFFF;
    line-height: 18px;
    padding-top: 1px;
}

.main-header-font a {
  cursor: pointer;
  color: #FFFFFF;
text-decoration:none;

}

.main-header-font a:hover {

  color: #FFFFFF;
  text-decoration:none;
cursor: pointer;

}

.main-header-font a:active {

  color: #FFFFFF;
  text-decoration:none;
cursor: pointer;

}

.main-header-small-font {width: 100%; line-height:11px; padding-top:15px;
  font-size: 1.4vw; letter-spacing:1px; font-family: Times New Roman, Arial; color:#FFFFFF; text-align:center;
}

.main-header-smaller-font {width: 100%; line-height:5px; padding-top:15px;
  font-size: 1.1vw; letter-spacing:1px; font-family: Times New Roman, Arial; color:#FFFFFF; text-align:center;
}



/* WEBSITE TOP MAIN HEADER END */


.hidden {
  display: none;
}

.showit {
  color: #008040;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 1px;
  position: relative;

  text-decoration: underline;
  cursor: pointer;

  }
  
  .showit:hover {
  z-index: 125;
  background-color: #008040;
  text-decoration: underline;
  color: #FFFF00;

  }



.showit span {
  overflow: auto; /* Enable scroll if needed */
display: none;
position: fixed; /* Changed from absolute to fixed */
top: 50%; /* Center vertically */
left: 40%; /* Center horizontally */
transform: translate(-50%, -50%); /* Adjust position to center */
color: #000000;
border: 2px solid #C0C0C0;
padding: 11px;
box-shadow: 5px 10px #888888;
width: 450px;
max-width: 90%; /* Avoid overflow on small screens */
background: rgba(255, 255, 255, 0); /* Initial background is transparent */
text-align: left;
opacity: 0;
animation: openWindow 1s ease forwards;
z-index:1;
}

@keyframes openWindow {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
  background: rgba(255, 255, 255, 1); /* Solid white background */
}
}

.showit:hover span {
animation: openWindow 1s ease forwards;

}

.showit-close {
position: absolute;
right: 5px;
top: 5px;
cursor: pointer;
font-weight: bold;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 10px solid #000000;
border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


#error {
  position:absolute; top:400px;
  margin-left:45%; 
  background-color: #fff6a3dc; 
  padding:5px; 
  line-height:22px;
  width:300px;
}

#errorNonText {
  position:absolute; top:400px;
  margin-left:35%; 
  background-color: #fff6a3dc; 
  padding:5px; 
  line-height:22px
}


.formulaSelectionText {
  font-family: 'Roboto', sans-serif;
  font-size:15.5px;
line-height:22px;
}



.regular-links-black {font-family: 'Barlow', sans-serif;
  font-weight:600; 
  color:#555555;
  text-decoration: none; 
  cursor: pointer;}

.regular-links-black:hover {font-family: 'Barlow', sans-serif; 
  border-bottom:1px solid #eebc11;  
  border-top:1px solid #eebc11;  
  font-weight:700;
  text-decoration: none; 
  color:#2B95FF}

  .regular-links-inherit {font-family: inherit;
    font-weight:600; border-bottom:1px solid #2B95FF; 
    color:#2B95FF;
    text-decoration: none; 
    cursor: pointer;}
  
  .regular-links-inherit:hover {font-family: inherit;
    border-bottom:1px solid #ff0000;  
    font-weight:700;
    text-decoration: none; 
    color:#ff0000}
  
  
  

.regular-links-bolder {font-family: 'Barlow', sans-serif;
  font-weight:600; border-bottom:1px solid #2B95FF; 
  color:#2B95FF;
  text-decoration: none;
  cursor: pointer; }

.regular-links-bolder:hover {font-family: 'Barlow', sans-serif; 
  border-bottom:1px solid #ff0000;  
  font-weight:700;
  text-decoration: none; 
  color:#ff0000}




.regular-links {font-family: 'Barlow', sans-serif;
text-transform:uppercase;
  font-weight:500; 
  text-decoration: underline; 
  color:#2B95FF;
  cursor: pointer;}

.regular-links:hover {font-family: 'Barlow', sans-serif; 
  text-decoration: underline;  
  font-weight:600; 
  color:#ff0000}



.bluelineseparator {border-top: 1px #E1F0FF solid; width: 100%;}


.readability-button-check {
  height: auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #2B95FF; /* color */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }

.readability-button-check:hover {
background: #5cc1ff;
text-decoration: none;}

.readability-clear-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #bbbbbb; /* color */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;}

.readability-clear-button:hover {
background: #5cc1ff;
text-decoration: none;}



.ignore-copy {display:inline;}

.font-line-height-22 {line-height: 22px}
.font-line-height-23 {line-height: 23px}
.font-line-height-24 {line-height: 24px}

.letter-spacing-one {letter-spacing: 1px}
.letter-spacing-half {letter-spacing: .5px}

.bold-faced {font-weight: bold;}
.uppercase-text {text-transform: uppercase; }

.text-shadow { text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);} 

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

.centered-element {
margin-left: auto;
margin-right: auto;
}

.centered-element-alt {
display: flex;
  justify-content: center;
  align-items: center;
}

.width-50-percent {width:65%}


.show-word-stats-button {
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
  text-align: center; 
  background-color: #00c030;
  color:#fff;
  font-family: 'Barlow', sans-serif;
  font-weight:500;
text-transform:uppercase;
font-size:20px;
max-width:100%;
padding:20px;
}
.show-word-stats-button:hover {
  cursor: pointer;
  background-color: #046d00;
  font-weight:700;
  color:#fff;
  border:3px solid #ffee00;
  padding:25px;
  }
.show-word-stats-button::before {
  display:inline-block;
    font-family: "Material Symbols Outlined";
    content: 'monitoring'; /* monitoring */
    vertical-align: middle;
    font-size:35px;
    margin-bottom:10px;
    }




    .show-inflected-words-button {
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
      text-align: center; 
      background-color: #c000b6;
      color:#fff;
      font-family: 'Barlow', sans-serif;
      font-weight:500;
    text-transform:uppercase;
    font-size:20px;
    width:65%;
    padding:10px;
    }
    .show-inflected-words-button:hover {
      cursor: pointer;
      background-color: #c000b686;
      font-weight:700;
      color:#fff;
      border:3px solid #ffee00;
      padding:10px;
      }
    .show-inflected-words-button::before {
      display:inline-block;
        font-family: "Material Symbols Outlined";
        content: 'monitoring'; /* monitoring */
        vertical-align: middle;
        font-size:2 5px;
        margin-bottom:10px;
        }


.score-same-text-button {
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
text-align: center; 
background-color: #535353;
color:#fff;
font-family: 'Barlow', sans-serif;
font-weight:500;
text-transform:uppercase;
font-size:18px;
max-width:100%;
padding:10px;
}

.score-same-text-button:hover {
background-color: #000000;
cursor: pointer;
font-weight:700;
color:#fff;
border:2px solid #ffee00;
}

.score-same-text-button::before {
display:inline-block;
font-family: "Material Symbols Outlined";
content: 'cloud_sync';
vertical-align: middle;
font-size:45px;
margin-bottom:7px;
margin-right:7px;
}



.score-same-text-button-small {
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
  text-align: center; 
  background-color: #535353;
  color:#fff;
  font-family: 'Barlow', sans-serif;
  font-weight:500;
  text-transform:uppercase;
  font-size:14px;
  width:100%;
  padding:10px;
  }
  
  .score-same-text-button-small:hover {
  background-color: #000000;
  cursor: pointer;
  font-weight:700;
  color:#fff;
  border:2px solid #ffee00;
  }
  
  .score-same-text-button-small::before {
  display:inline-block;
  line-height:10px;
  font-family: "Material Symbols Outlined";
  content: 'cloud_sync';
  vertical-align: middle;
  font-size:25px;
  margin-bottom:6px;
  margin-right:6px;
  }
  



.copy-results-button {
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
  text-align: center; 
  background-color: #8a0073;
  color:#fff;
  font-family: 'Barlow', sans-serif;
  font-weight:500;
  text-transform:uppercase;
  font-size:20px;
  max-width:100%;
  padding: 0 15px 0 15px;
  }
  
  .copy-results-button:hover {
  background-color: #fb00cf;
  cursor: pointer;
  font-weight:700;
  color:#fff;
  border:2px solid #ffee00;
  }
  
  .copy-results-button::before {
  display:inline-block;
  font-family: "Material Symbols Outlined";
  content: 'assignment_add';
  vertical-align: middle;
  font-size:55px;
  margin-bottom:6px;
  margin-right:6px;
  }
  

  .copy-results-button-small {
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
    text-align: center; 
    background-color: #8a0073;
    color:#fff;
    font-family: 'Barlow', sans-serif;
    font-weight:500;
    text-transform:uppercase;
    font-size:14px;
    width:100%;
    padding: 10px;
    }
    
    .copy-results-button-small:hover {
    background-color: #fb00cf;
    cursor: pointer;
    font-weight:700;
    color:#fff;
    border:2px solid #ffee00;
    }
    
    .copy-results-button-small::before {
    display:inline-block;
    font-family: "Material Symbols Outlined";
    content: 'assignment_add';
    vertical-align: middle;
    font-size:25px;
    margin-bottom:6px;
    margin-right:6px;
    }



  .sticky-element {
    transition: opacity 0.3s, visibility 0.3s;
  }
  
  .hidden-sticky-element {
    opacity: 0;
    visibility: hidden;
  }
  .notification {
    display:block;
    position:relative;
    background-color: #0059ff;
    color: white;
    padding: 15px;
    border:1px solid #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
    z-index: 1000;
    border-radius: 5px;
}
















.sentenceVisualizer-text-button {
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
text-align: center; 
background-color: #cc6600;
color:#fff;
font-family: 'Barlow', sans-serif;
font-weight:500;
text-transform:uppercase;
font-size:20px;
max-width:100%;
padding:25px;
}

.sentenceVisualizer-text-button:hover {
cursor: pointer;
background-color: #ffaa55;
font-weight:700;
color:#fff;
padding:30px;
border:3px solid #ffee00;
}

.sentenceVisualizer-text-button::before {
display:inline-block;
font-family: "Material Symbols Outlined";
content: 'fact_check';
vertical-align: middle;
font-size:55px;
margin-bottom:10px;
margin-right:10px;
}


.syllablesVisualizer-text-button {
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
text-align: center; 
background-color: #db0000;
color:#fff;
font-family: 'Barlow', sans-serif;
font-weight:500;
text-transform:uppercase;
font-size:20px;
max-width:100%;
padding:25px;
}

.syllablesVisualizer-text-button:hover {
cursor: pointer;
background-color: #6d0000;
font-weight:700;
color:#fff;
padding:30px;
border:3px solid #ffee00;
}

.syllablesVisualizer-text-button::before {
display:inline-block;
font-family: "Material Symbols Outlined";
content: 'sort_by_alpha';
vertical-align: middle;
font-size:55px;
margin-bottom:10px;
margin-right:10px;
}



.showProcessed-text-button {
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
  text-align: center; 
  background-color: #006bd7;
  color:#fff;
  font-family: 'Barlow', sans-serif;
  font-weight:500;
  text-transform:uppercase;
  font-size:20px;
  max-width:100%;
  padding:25px;
  }
  
  .showProcessed-text-button:hover {
  cursor: pointer;
  background-color: #75baff;
  font-weight:700;
  color:#fff;
  padding:30px;
  border:3px solid #ffee00;
  }
  
  .showProcessed-text-button::before {
  display:inline-block;
  font-family: "Material Symbols Outlined";
  content: 'key_visualizer';
  vertical-align: middle;
  font-size:55px;
  margin-bottom:10px;
  margin-right:10px;
  }
  







  .score-different-text-button-small {
    cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
        text-align: center; 
        background-color: #535353;
        color:#fff;
        font-family: 'Barlow', sans-serif;
        font-weight:500;
      text-transform:uppercase;
      font-size:15px;
      max-width:100%;
      padding:10px;
      }
  
  .score-different-text-button-small:hover {
    cursor: pointer;
        background-color: #000000;
        font-weight:700;
        color:#fff;
        border:2px solid #ffee00;
        }
  
  .score-different-text-button-small::before {
        display:inline-block;
          font-family: "Material Symbols Outlined";
          content: 'fact_check';
          vertical-align: middle;
          font-size:25px;
          margin-bottom:10px;
          margin-right:10px;
          }












.score-different-text-button {
  cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
      text-align: center; 
      background-color: #535353;
      color:#fff;
      font-family: 'Barlow', sans-serif;
      font-weight:500;
    text-transform:uppercase;
    font-size:18px;
    max-width:100%;
    padding:10px;
    }

.score-different-text-button:hover {
  cursor: pointer;
      background-color: #000000;
      font-weight:700;
      color:#fff;
      border:2px solid #ffee00;
      }

.score-different-text-button::before {
      display:inline-block;
        font-family: "Material Symbols Outlined";
        content: 'fact_check';
        vertical-align: middle;
        font-size:45px;
        margin-bottom:7px;
        margin-right:7px;
        }

.enter-words-tag {
        height: 40px; 
        width: 300px; 
        padding: 15px; 
        letter-spacing: 1px; 
        background-color: black; 
        color: white; 
        border-radius: 0 10px 0px 0;
    }



.system-settings-button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border:2px solid #d2d2d2; 
  text-align: center; 
  background-color: #c0c0c0; padding:10px;
}
.system-settings-button:hover {
  background-color: #f2f2f2;
  }
  
  .system-settings-button:active {
  background-color: #d9d9d9;
  }

  .sentenceCountChoice
 {
    font-family: 'Merriweather', serif;
      font-weight:normal;
    font-size:13px;
    line-height:17px;
    padding:5px;
    color:#000;
    background-color:#edffc3;
border:2px dashed #000;
  }

  .countSentencesRecommendation {
    font-family: 'Merriweather', serif;
      font-weight:normal;
    font-size:15px;
    line-height:20px;
    padding:7px;
    color:#000;
    background-color:#c3e7ff;
border:2px dashed #000;

  }


  .deleteWordsBox {
    font-family: 'Barlow', sans-serif;
      font-weight:600;
    text-transform:uppercase;
    font-size:16px;
    padding:7px;
    color:#000;
    background-color:#ffff00;
border:1px solid #000;
  }

  .deleteWordsBoxText {
    font-family: 'Barlow', sans-serif;
      font-weight:500;

    font-size:13px;
  }


  .bold {
            font-weight: bold;
        }

.boldfacedWords {
  font-weight: bold;
}

.lexicalUnderline {
    border-bottom:1px solid #000;
}
.lexicalHighlight {
    background-color:yellow;
}
.lexicalStrike { text-decoration: line-through;}


.nounsCSS {background-color: #005cb9; color:#fff; padding:3px;}
.pronounsCSS {background-color: #c16100; color:#fff; padding:3px;}
.verbsCSS  {background-color: #9f0000; color:#fff; padding:3px;}
.adverbsCSS {background-color: #4f4f9d; color:#fff; padding:3px; }
.adjectivesCSS {background-color: #9b004e; color:#fff; padding:3px; }
.functionWordsCSS  {background-color: #7d7d7d; color:#fff;  padding:3px;}
.lexicalWordsCSS  {background-color: #ff8000; color:#fff;  padding:3px;}
 
  .lexicalInvisible {
    background-color:#fff;
    border-bottom:1px dotted #000; 
    color:#fff;
}

  .lexicalFlexContainer, .sentencesFlexContainer {
    display: flex;
    min-width:95%;
  }

  .sentencesFlexContainerLeftColumn {
    flex: 2; /* Adjust the flex factor as needed */
    background: linear-gradient(to left, rgb(167, 0, 144), rgb(0, 0, 0));
    padding: 1px;
    max-width:75%;
    min-width:75%;
  }
  .sentencesFlexContainerRightColumn {
    flex: 1; /* Adjust the flex factor as needed */
    max-width:25%;
    min-width:25%;
    background: linear-gradient(to bottom left, rgb(0, 0, 0), rgb(167, 0, 144));
    padding: 20px;
    padding-top: 20px;
  }
  
  .lexicalFlexContainerLeftColumn {
    flex: 2; /* Adjust the flex factor as needed */
    background: linear-gradient(to left, rgb(61, 2, 117), rgb(0, 0, 0));
    padding: 1px;
    max-width:75%;
    min-width:75%;
  }
  
  .lexicalFlexContainerRightColumn {
    flex: 1; /* Adjust the flex factor as needed */
    max-width:25%;
    min-width:25%;
    background: linear-gradient(to bottom left, rgb(0, 0, 0), rgb(61, 2, 117));
    padding: 20px;
    padding-top: 20px;
  }

.lexical-text-bullets li {
  padding-bottom:10px;
}


.fryGraphContainer {
  transform: scale(1);

  display:block;
}

.fry-graph-image {
  height: 605px; width: 746px; 
  background-image: url(https://readabilityformulas.com/graphics/fry-graph-formula.png); 
  background-repeat: no-repeat; 
}



  
  .syllableFlexContainer {
    display: flex;
    min-width:95%;
  }
  
  .syllableFlexContainerLeftColumn {
    flex: 2; /* Adjust the flex factor as needed */
    background-color: rgb(0, 0, 0);
    padding: 1px;
    max-width:75%;
    min-width:75%;
  }
  
  .syllableFlexContainerRightColumn {
    flex: 1; /* Adjust the flex factor as needed */
    max-width:25%;
    min-width:25%;
    margin-top:1px;
    background-color: rgb(0, 0, 0);
    padding: 20px;
  }

.syllableDatamuseButton {
display: inline-block;
padding: 5px;
letter-spacing: .5px;
font-weight:400;
font-size: 13px;
font-family: 'Libre', sans-serif;
text-decoration: none;
text-align: center;
color: #000;
background-color: #e6e6e6;
border-radius: 4px;
border: 1px solid #000;
transition: background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(207, 207, 207, 0.5);
margin:2px;

}

.syllableDatamuseButton:hover {font-weight: bold;
background-color: #aed7ff;
content: "Click to verify count!";
}

.syllableDatamuseButton:active {
background-color: #d9d9d9;
}

.syllableButtonsSmall {
  display: inline-block;
  padding: 7px;
  letter-spacing: .5px;
  font-weight:500;
  font-size: 14px;
  width:auto;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #000000;
  background-color: #9ee0ff;
  border-radius: 3px;
  border: 1px solid #ffffff;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 2px rgba(77, 77, 77, 0.5);
  margin:3px;
  
  }
  
  .syllableButtonsSmall:hover {font-weight: bold;
  background-color: #fffb00;

  }
  
  .syllableButtonsSmall:active {
  background-color: #d9d9d9;
  }


  .syllableButtonsPurple {
    display: inline-block;
    padding: 7px;
    letter-spacing: .5px;
    font-weight:500;
    font-size: 14px;
    width:auto;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    background-color: #800080;
    border-radius: 3px;
    border: 1px solid #ffffff;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 2px rgba(77, 77, 77, 0.5);
    margin:3px;
    
    }
    
    .syllableButtonsPurple:hover {font-weight: bold;
    background-color: #fffb00;
    color: #000000;
  
    }
    
    .syllableButtonsPurple:active {
    background-color: #d9d9d9;
    }


.enter-words-tag_beta {
  font-weight:600;
  font-size: 16px;
  font-family: 'Barlow', sans-serif;
  color: #006cd9;
  text-align:right;
}

.enter-words-tag_beta:hover a {
  color: #ff0000;
}


  .syllableButtonsSmallGreen {
    display: inline-block;
    padding: 7px;
    letter-spacing: .5px;
    font-weight:500;
    font-size: 14px;
    width:auto;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #000000;
    background-color: #9effb3;
    border-radius: 3px;
    border: 1px solid #ffffff;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 2px rgba(77, 77, 77, 0.5);
    margin:3px;
    }
    
    .syllableButtonsSmallGreen:hover {font-weight: bold;
    background-color: #fffb00;
    }
    
    .syllableButtonsSmallGreen:active {
    background-color: #d9d9d9;
    }




    .syllableButtonsSmallYellow {
      display: inline-block;
      padding: 7px;
      letter-spacing: .5px;
      font-weight:500;
      font-size: 14px;
      width:auto;
      font-family: 'Barlow Condensed', sans-serif;
      text-transform: uppercase;
      text-decoration: none;
      text-align: center;
      color: #000000;
      background-color: #fbff00;
      border-radius: 3px;
      border: 1px solid #ffffff;
      transition: background-color 0.3s ease;
      box-shadow: 0 2px 2px rgba(77, 77, 77, 0.5);
      margin:3px;
      }
      
      .syllableButtonsSmallYellow:hover {font-weight: bold;
      background-color: #ffd900;
      }
      
      .syllableButtonsSmallYellow:active {
      background-color: #d9d9d9;
      }








    .syllableButtonsSmallGrey {
      display: inline-block;
      padding: 7px;
      letter-spacing: .5px;
      font-weight:500;
      font-size: 14px;
      width:125px;
      font-family: 'Barlow Condensed', sans-serif;
      text-transform: uppercase;
      text-decoration: none;
      text-align: center;
      color: #000000;
      background-color: #fafafa;
      border-radius: 3px;
      border: 1px solid #ffffff;
      transition: background-color 0.3s ease;
      box-shadow: 0 2px 2px rgba(255, 255, 255, 0.5);
      margin:3px;
      
      }
    
      .syllablesViewContainer {
        width: 100%;
        background-color: #000000;
        border: 1px solid #c0c0c0;
        border-radius: 5px;
        padding-top:15px;
    }
      .syllableButtonsSmallGrey:hover {font-weight: bold;
      background-color: #fffb00;
    
      }
      
      .syllableButtonsSmallGrey:active {
      background-color: #d9d9d9;
      }

      .lexicalYellowButton {
        display: inline-block;
        padding: 10px 10px;
        letter-spacing: .5px;
        font-weight:600;
        font-size: 15px;
        text-transform: uppercase;
        font-family: 'Barlow Condensed', sans-serif;
        text-decoration: none;
        text-align: center;
        color: #000;
        background-color: #ffffe6;
        border-radius: 4px;
        border: 1px solid #000;
        transition: background-color 0.3s ease;
        box-shadow: 1px 1px 2px rgba(211, 210, 210, 0.9);
        }
        
        .lexicalYellowButton:hover {font-weight: bold;
        background-color: #fff6a3dc;
        border: 1px solid #ffffff;
        }
        
        .lexicalYellowButton:active {
        background-color: #d9d9d9;
        }


      .lexicalRedButton {
        display: inline-block;
        padding: 5px;
        letter-spacing: .5px;
        font-weight:500;
        font-size: 16px;
        max-width:auto;
        min-width:125px;
        font-family: 'Barlow Condensed', sans-serif;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        color: #ffffff;
        background-color: #ff0000;
        border-radius: 3px;
        border: 1px solid #ffffff;
        transition: background-color 0.3s ease;
        box-shadow: 0 2px 2px rgba(255, 255, 255, 0.5);
        margin:3px;
        
        }
        
        .lexicalRedButton:hover {font-weight: bold;
        background-color: #fffb00;
        color: #000000;
      
        }
        
        .lexicalRedButton:active {
        background-color: #d9d9d9;
        }


        .lexicalBlueButton {
          display: inline-block;
          padding: 5px;
          letter-spacing: .5px;
          font-weight:500;
          font-size: 16px;
          max-width:auto;
          min-width:125px;
          font-family: 'Barlow Condensed', sans-serif;
          text-transform: uppercase;
          text-decoration: none;
          text-align: center;
          color: #ffffff;
          background-color: #1100ff;
          border-radius: 3px;
          border: 1px solid #ffffff;
          transition: background-color 0.3s ease;
          box-shadow: 0 2px 2px rgba(255, 255, 255, 0.5);
          margin:3px;
          
          }
          
          .lexicalBlueButton:hover {font-weight: bold;
          background-color: #fffb00;
          color: #000000;
        
          }
          
          .lexicalBlueButton:active {
          background-color: #d9d9d9;
          }
  
  







      .EditsyllableButton {
        display: inline-block;
        padding: 8px;
        letter-spacing: .5px;
        font-weight:500;
        font-size: 16px;
        max-width:auto;
        min-width:200px;
        font-family: 'Barlow Condensed', sans-serif;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        color: #ffffff;
        background-color: #ff0000;
        border-radius: 3px;
        border: 1px solid #ffffff;
        transition: background-color 0.3s ease;
        box-shadow: 0 2px 2px rgba(255, 255, 255, 0.5);
        margin:3px;
        
        }
        
        .EditsyllableButton:hover {font-weight: bold;
        background-color: #fffb00;
        color: #000000;
      
        }
        
        .EditsyllableButton:active {
        background-color: #d9d9d9;
        }

#DatamuseResponseText {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  border: 10px solid #ffffff;
  outline: 2px solid rgb(0, 0, 0); /* Outer border */
  padding: 20px;
  border-radius: 10px;
  display: none; /* Initially hidden */
  z-index: 1000; /* Appear on top of other elements */
}

  #editSyllablesText {display:none;}

  .sleek-button-small {
    display: inline-block;
    padding: 10px 10px;
    letter-spacing: .5px;
    font-weight:600;
    font-size: 15px;
    text-transform: uppercase;
    font-family: 'Barlow Condensed', sans-serif;
    text-decoration: none;
    text-align: center;
    color: #000;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #000;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(206, 231, 255, 0.5);
    }
    
    .sleek-button-small:hover {font-weight: bold;
    background-color: #aed7ff;
    }
    
    .sleek-button-small:active {
    background-color: #d9d9d9;
    }

    .sleek-button-small-yellow {
    display: inline-block;
    padding: 10px 10px;
    letter-spacing: .5px;
    font-weight:600;
    font-size: 15px;
    text-transform: uppercase;
    font-family: 'Barlow Condensed', sans-serif;
    text-decoration: none;
    text-align: center;
    color: #000;
    background-color: #ffffe6;
    border-radius: 4px;
    border: 1px solid #000;
    transition: background-color 0.3s ease;
    box-shadow: 4px 4px 2px rgba(211, 210, 210, 0.9);
    }
    
    .sleek-button-small-yellow:hover {font-weight: bold;
    background-color: #ffff84;
    }
    
    .sleek-button-small-yellow:active {
    background-color: #d9d9d9;
    }


  
    .sleek-button-small-cyan {
      display: inline-block;
      padding: 10px 10px;
      letter-spacing: .5px;
      font-weight:600;
      font-size: 15px;
      text-transform: uppercase;
      font-family: 'Barlow Condensed', sans-serif;
      text-decoration: none;
      text-align: center;
      color: #000;
      background-color: #b6dcffa2;
      border-radius: 4px;
      border: 1px solid #000;
      transition: background-color 0.3s ease;
      box-shadow: 4px 4px 2px rgba(211, 210, 210, 0.9);
      }
      
      .sleek-button-small-cyan:hover {font-weight: bold;
      background-color: #8cc9ff;
      }
      
      .sleek-button-small-cyan:active {
      background-color: #d9d9d9;
      }
  




.sleek-button {
  padding-bottom:11px;
  padding-left:11px;
  padding-right:11px;
  padding-top:2px;
display: inline-block;

margin:0px;
letter-spacing: .5px;
font-weight:600;
font-size: 16px;
text-transform: uppercase;
font-family: 'Barlow Condensed', sans-serif;
text-decoration: none;
text-align: center;
color: #000;
background-color: #fff;
border-radius: 4px;
border: 1px solid #000;
transition: background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sleek-button:hover {font-weight: bold;
background-color: #f2f2f2;
}

.sleek-button:active {
background-color: #d9d9d9;
}


.sleek-button-uncheck {
  padding-bottom:11px;
  padding-left:11px;
  padding-right:11px;
  padding-top:11px;
display: inline-block;
margin:0px;
letter-spacing: .5px;
font-weight:600;
font-size: 16px;
text-transform: uppercase;
font-family: 'Barlow Condensed', sans-serif;
text-decoration: none;
text-align: center;
color: #000;
background-color: #fff;
border-radius: 4px;
border: 1px solid #000;
transition: background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sleek-button-uncheck:hover {font-weight: bold;
background-color: #f2f2f2;
}

.sleek-button-uncheck:active {
background-color: #d9d9d9;
}




.contactFormFields {
  width:90%;
  padding:15px;
  background-color: #fff;
border-radius: 4px;
border: 1px solid #000;
transition: background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}











  .small-button-input {color:#000;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);}

  .small-button-input:hover {
  color: #ff0000;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
  }
  
  .small-button-input:active {
  color: #d9d9d9;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
  }

  


.rss-one-line-space {margin-bottom: 16px;} /* for readability scoring system page */
.rss-two-line-space { margin-bottom: 32px;} /* for readability scoring system page  */

.one-line-space {margin-bottom: 16px;}
.two-line-space { margin-bottom: 32px;}


.readabilityTextHeader {
  display:block;
  background-color:#fff;
  padding:15px;
  width:100%;
}


.center-layout {
text-align: center;
}

.center-layout-content {
display: inline-block;
text-align: left;
width: 90%;
/* Additional styles for your content */
}


.calculationOnText {
  font-family: 'Barlow', sans-serif;
  font-size:18px;
  text-transform: uppercase;
display:inline; 
color:white
}
.calculationOnTextBox {
  width:75%; margin-top:20px; background-color:#000; padding:5px; text-align: center;
}

.calculationOnTextBoxInner {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size:18px;
  width:75%;
   border: 1px solid black; 
   padding:5px; 
   background-color:#FFFFE8
}


.form_column_right {
  
  width: 100%; 
  font-family: Georgia; 
  padding-left:30px; 
  padding-right:30px;
}

.form-column-left {
  flex-shrink: 0; /* Prevents the left column from shrinking */
  background-color: rgb(241, 241, 241);
  padding:25px 5px 25px 5px;
  width:26%;
  margin-left:20px;

  }
  
  .form-column-left-results {
    flex-shrink: 0; /* Prevents the left column from shrinking */
    background-color: rgb(241, 241, 241);
    padding:25px 5px 25px 5px;
    width:26%;
    margin-left:10px;
  }

  .form-column-right {
  flex-grow: 1; /* Allows the right column to grow and fill the remaining space */
  justify-content: flex-start;
  }
  


.form-container {
  width: 100%;
  display: flex;
  background-color: #fff;
box-shadow: 10px 20px 15px 5px rgba(0, 0, 0, 0.3);
  }



  .form-column {
  flex-shrink: 1;
  padding: 0px;
  }
  
  /* left side */
  .form-column:first-child {
  margin-right: 10px;
  margin-left:20px;
  
  }
  
  /* right side */
  .form-column:last-child {
  margin-left: 10px;
  margin-top:50px;
  padding-right:30px;
  flex-basis: auto;
  width:25%;
  }

#pieChart {
  display:inline-block;
  width:40%;
}

  /* Flex container */
.google-flex-container {
  display: block;
  }
  
  /* Style for COLUMN 1 */
  .google-flex-container-column-right {
 
  z-index:1;

  }
  
  /* Style for COLUMN 2 */
  .google-flex-container-column-left {
  z-index:0;
  
  margin-left:1px;
  }




  .uploadTextFile {
    box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.1);
    background-color: #f7f7f7; border-radius: 4px; padding:15px;
    font-size:15px;
  }  
  



  .blinking-circle {
    width: 10px; /* Change to your desired size */
    height: 10px;
    background-color: white;
    border-radius: 50%; /* Makes the div a circle */
    animation: blinking-animation 2s infinite; /* Blinking effect */
    display: inline-block;
margin-left:-44px;
margin-top:4px;

  }
  
  @keyframes blinking-animation {
    0%, 100% {
      opacity: 1; /* Fully visible */
    }
    50% {
      opacity: 0; /* Fully transparent */
    }
  }

  
.system-status {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  position:relative; 
  margin-top:10px; 
  height:30px; 
  width:130px; 
  background-color:red; 
  color:white;
  font-family: 'Barlow', sans-serif;
  text-transform:uppercase;
  font-weight:700;
  padding-left: 10px;
  font-size:13px;
}
.system-status-left-arrow {

  display: inline-block;
position:absolute;
  text-align: left;
margin-top:10px;
margin-left:-20px;
  width: 0;
  height: 0;
  border-top: 16px solid transparent; /* Top border, half the triangle's height */
  border-bottom: 16px solid transparent; /* Bottom border, half the triangle's height */
  border-right: 16px solid rgb(255, 255, 255); /* Right border, the triangle's width, in white color */
}

.system-status-online {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  position:relative; 
  margin-top:10px; 
  height:30px; 
  width:101px; 
  background-color:#02b31a;
  color:white;
  font-family: 'Barlow', sans-serif;
  text-transform:uppercase;
  font-weight:700;
  padding-left: 12px;
  font-size:13px;
}

.system-status-right-arrow {
  display: inline-block;
  position:absolute;
margin-top:10px;
margin-left:-14px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent; /* Top border, half the triangle's height */
  border-bottom: 16px solid  transparent; /* Bottom border, half the triangle's height */
  border-right: 15px solid #02b31a; /* Right border, the triangle's width, in white color */
}

@keyframes fadeInOutScale {
  0%, 100% { 
      opacity: 1; 
      transform: scale(1);  /* Starts at half the size */
  }
  50% { 
      opacity: 1; 
      transform: scale(2);   /* Grows to full size at the halfway point */
  }
}

.gradeMarker {
  width:22px; height:22px; animation: fadeInOutScale 7s infinite; border:1px solid #ffff00; z-index:999; position:relative; display:inline-block; box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.6); 
}




.form-column-left-graphs {

  flex-shrink: 0; /* Prevents the left column from shrinking */
  background-color: rgb(241, 241, 241);
  padding:25px 5px 25px 5px;
  width:26%;
  margin-left:20px;
}


.flex-container-status {
  display: flex;
  justify-content: space-between; /* Optional, if you want some space between the columns */


}

.flex-container-status-left-column {
  width: 50%; /* Sets the width of the columns */
 

}
.flex-container-status-right-column {
  display: inline;

  height:30px; 
  padding-top: 0px;
  margin-top:10px;
 padding-left:20px;
 padding-right:20px;
position:relative;
line-height:30px;
  background-color:rgb(0, 140, 255);
  color:white;
  font-family: 'Barlow', sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:15px;
}

#text:focus {
  background-color: #fff3cd;

  }

#text {
flex: 1; /* Allow the textarea to grow and shrink */
resize: none; /* Optional: Allow vertical resizing */
max-height: 380px;
min-height: 380px;
  max-width: 880px;
  min-width: auto;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: none;
outline: none;
box-shadow: none;
background-color: white;
font-size: 16px;
}


.black-background-blur {
  box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.3);
}
.shadow-effect {
  position: relative;
  flex: 1; /* Allow the textarea to grow and shrink */
  resize: vertical; /* Optional: Allow vertical resizing */
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: none;
  outline: none;
  background-color: white;
  font-size: 16px;
  overflow: hidden; /* This will ensure the shadow is contained within the div */
}

.shadow-effect textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: white;

}

.shadow-effect::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px; /* You can adjust this to control the size of the shadow */
  background-image: linear-gradient(to top, rgba(255, 255, 0, .1), rgba(255, 255, 0, 0));
}


.word-count-box {
padding: 5px;
border-top: 0px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}

.red-highlight-numbers {color:white; background-color: red; border-right:1px solid #000; padding:3px}
.background-color-dark-grey {background-color: #808080;}
.background-color-light-blue {background-color: #C1E0FF;}
.background-color-light-yellow {background-color: #FFFFCC}
.background-color-yellow {background-color: #ffff1a;}
.background-color-light-green {background-color: #ccffd3}
.background-color-red {background-color: red}
.background-color-light-red {background-color: #FFD7D7}
.background-color-pink {background-color: #ff9be6}
.background-padding-five {padding: 5px;}
.background-color-black  {background-color: #000}

.border-solid {border: 1px solid #000;}
.border-top-bottom {border-top: 1px solid #000; border-bottom: 1px solid #000;}

.border-rounded {
  border: 4px solid black; /* This creates a black border with a thickness of 2 pixels */
  border-radius: 5px; /* This creates rounded corners with a radius of 10 pixels */
}
.error-message-01 {

  z-index:999;
  position: absolute;z-index: 1;
  color:#fff;
  background-color: red;
  padding:6px;
  border:1px solid #000;
  font-weight:bold;
}

#popup-container-formula {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dimmed background */
  display: flex;
  justify-content: center;
  align-items: center;
z-index:99999;
}

#popup-box-formula {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* Style the error message and close button as needed */


.error-message-02 {
  color:#000;
  background-color: yellow;
  padding:6px;
  border:1px solid #000;
  z-index:999;
  position: absolute;z-index: 1;
  font-weight:bold;
}

.border-dashed {border: 1px dashed #000;}

.narrow-bar-black {
height: 20px; /* Adjust the height as needed */
background: linear-gradient(to right, #C0C0C0, #000000); /* Start and end color set to black */
}

.narrow-bar-red {
height: 20px; /* Adjust the height as needed */
background: linear-gradient(to right, #FFB7B7, #CC0000); /* Start and end color set to black */
}

span.dashed-h-line-red {
display: inline-block;
border-top: 1px dashed red;
width: 90%; /* Optional: Adjust the width to span the entire container */ }


.square-bullet {
  list-style-type: none;
  padding-inline-start: 0;
padding-right:5px;
line-height:22px;
margin: 0;
margin-left:10px;
}

.square-bullet li {
  text-indent: 0;

}

.square-bullet span:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
background-color: black;
  border-radius: 2px;
}
.square-bullet .red-bullet span:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 10px;
background-color: red;
border-radius: 2px;
color: white;
}

.square-bullet .blue-bullet span:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 10px;
background-color: blue;
border-radius: 2px;
color: white;
}



.visualWordstextContainer1 {
  width:95%;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right:0px;
  background-color: rgba(255, 255, 255, 1);
  overflow-y: auto;
  min-height: 290px;
  max-height: 320px; /* Set a maximum height to enable scrolling */


  border: 1px solid #e2e2e2;

  text-align: left !important; /* Left-align the text inside the container */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.visualWordstextContainerOut {
  border: 10px solid #ff80ff;
  padding-left:20px;

}

.container-right-side { font-size: 18px; margin:10px; padding:10px;
line-height: 22px;    
}

.custom-text-formulas {

display: none;
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 16px;
line-height: 23px;
padding-left:10px;padding-right:40px;

}

#reappear-div {

bottom: 0px; /* Adjust the distance from the bottom as needed */
right: 0px; /* Adjust the distance from the right as needed */
z-index: 9999; /* Ensure the container appears above other elements */
opacity: 0; /* Hide the container initially */
transition: opacity 0.9s; /* Add a transition effect */
}


#grade[disabled] {
  display: none;
}


.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}

#LexicalTextContainer, #SentencesTextContainer { width:100%;}

   /* Lexical Text Area Results Container styles */
   .LexicalTextContainer, .SentencesTextContainer {
    position: relative;
    width: 100%;
max-height:400px;
min-height:225px;
    border: 1px solid #ccc;
    overflow: auto;
    padding: 4px;
    font-size: 16px;
    font-weight:400;
    font-family: 'Barlow', sans-serif;
  }
  
  /* Placeholder styles */
  .LexicalTextContainer::before, .SentencesTextContainer::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 6px;
    left: 10px;
    pointer-events: none;
    color: #999;
  }
  
  /* Hide placeholder when container has content */
  .LexicalTextContainer:not(:empty)::before, .SentencesTextContainer:not(:empty)::before  {
    display: none;
  }
  



  #showOverlay {
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
  padding:11px;
display: inline-block;
letter-spacing: .5px;
font-weight:700;
font-size: 18px;
text-transform: uppercase;
font-family: 'Barlow', sans-serif;
text-decoration: none;
text-align: center;
color: #000;
background-color: #fff;
border-radius: 4px;
border: 1px solid #000;
transition: background-color 0.3s ease;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
}

#showOverlay:hover {
  background-color: #ffff00; 
  border: 2px solid #000;
}


  .overlay {
    display: none;
    justify-content: center; /* Center children horizontally */
    align-items: center;     /* Center children vertically */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    opacity: 0.95;
    z-index: 99999;
    overflow: auto;

}
.overlay-content {

    position: relative; /* Make this relative so the close button can be positioned absolutely within it */
    text-align: inherit;
    color: white;
    padding: 70px;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    width: 100%;
}

#closeOverlay {
    position: absolute; /* Absolute positioning */
    margin-top: 175px;          /* 10px from the top */
    left:100px;        /* 10px from the right */
    background-color: rgba(255, 0, 0, 0.3); /* Optional: gives a slight background for better visibility */
    color: white;
    border: 1px dashed #000;
    cursor: pointer;

    border-radius: 0%; /* Makes the button slightly rounded */
    padding: 5px 10px;
    font-family: 'Barlow', sans-serif;
    font-size:55px;
    font-weight:700;
    box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.7); 
    z-index: 999999;
    content: "This is inserted content";
    display: block;
}
#closeOverlay::after {
  font-size:18px;
  content: "close window";
  display: block;
}

#closeOverlay:hover {
  background-color: rgba(255, 0, 0, 0.9);
}

.overlayContainer {display:none;}









   /* Text Area Results Container styles */
   .text-area-results-container {
    position: relative;
    width: 100%;
max-height:355px;
min-height:225px;
    border: 1px solid #ccc;
    overflow: auto;
    padding: 4px;
    font-size: 16px;
    font-weight:400;
    font-family: 'Barlow', sans-serif;
  }
  
  /* Placeholder styles */
  .text-area-results-container::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 6px;
    left: 10px;
    pointer-events: none;
    color: #999;
  }
  
  /* Hide placeholder when container has content */
  .text-area-results-container:not(:empty)::before {
    display: none;
  }
  
  /* Button styles */
  .text-area-results-btn-container {
    margin-top: 10px;
  }
  
  .text-area-results-btn-container button {
    margin-right: 10px;
  }

  .dale-chall-flex-container {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    text-align: left;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 17px;
  }

  .dale-chall-flex-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1px;
  }

      /* Disable the grade select when frysight checkbox is not checked */
      input[name="formulas[]"][value="frysight"]:not(:checked) ~ label[for="grade"],
      input[name="formulas[]"][value="frysight"]:not(:checked) ~ #grade {
          pointer-events: none;
          opacity: 0.5;
      }
      
#mySyllableWordsContainer { width:100%;}



.flex-container-home-page {
  display: flex;
  width: 100%;
  height:40px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding-bottom: 2px;
  padding-top: 2px;
  font-family: 'Barlow', sans-serif;
  font-weight:400;
  color:#000;
  font-size:14px;
}
.flex-container-home-page a:hover {
  color:#fff;
  font-weight:500
}
.flex-container-home-page a {
  color:#000;
  font-weight:400
}


.left-column-flex-container-home-page {
  flex: 1;
  padding-left:15px;
  padding-top:12px;
  background-color: #7dbeff;

}
.right-column-flex-container-home-page {
  flex: 3;
  background-color: #7dbeff;
padding-top:12px;
}

.iframe-container {
  position: relative;
  padding-bottom: 70%; /* Aspect ratio for 16:9 */
  padding-top: 25px;
  height: 0;
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  height: 100%;
}

.slider {
  position: relative;
  overflow: hidden;
  max-width: 100%; /* or your desired width */
  margin: 0 auto;

  
}

.slide-track {
  display: flex;
  
  max-width:100%;

  transition: all 1.9s;
  width: calc(100% * [number-of-slides]); /* Replace [number-of-slides] with the total number of slides */
  
}

.slide {
  flex: 0 0 100%;
  position: relative; 
  max-width:100%;
  
}
img {max-width:100%;
}

.text-container {
max-width:70%;
max-height:auto;
  position: absolute;
  top: -50px; /* Initially placed slightly above the image */
  left: 100px;
  right: 0;
  background-color: rgba(254, 255, 195, 0.8); /* Semi-transparent black */
  color: #000;
  padding: 10px 20px;
  text-align: center;
  animation: dropText 3s forwards; /* Animation to make the text drop */
  animation-fill-mode: forwards;
  border:1px solid #000;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
  font-family: 'Barlow', sans-serif;
  font-weight:700;
  font-size:16px;
}

@keyframes dropText {
  0% { top: -200px; }
  100% { top: 30%; } /* You can adjust this value for the desired end position */
}


.arrow {
  position: absolute;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 0;
  cursor: pointer;
  min-width: 40px;

}



.left-arrow {

width: 0;
  height: 0;
  border-top: 15px solid transparent;      /* Adjust for triangle size */
  border-bottom: 15px solid transparent;   /* Adjust for triangle size */
  border-right: 25px solid #ffffff;           /* Adj */
  box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.9); 
}




.right-arrow {
right:0;


border-top: 15px solid transparent;      /* Adjust for triangle size */
  border-bottom: 15px solid transparent;   /* Adjust for triangle size */
  border-left: 25px solid #ffffff;           /* Adj */
  box-shadow: -4px 4px 7px rgba(0, 0, 0, 0.9); 

}

.left-arrow:hover {
background-color: rgba(255, 0, 0, 0.9);
border-top: 15px solid transparent;      /* Adjust for triangle size */
  border-bottom: 15px solid transparent;   /* Adjust for triangle size */
  border-right: 25px solid #ffff00;           /* Adj */
}

.right-arrow:hover {
right:0;
  background-color: rgba(255, 0, 0, 0.9);
  border-top: 15px solid transparent;      /* Adjust for triangle size */
  border-bottom: 15px solid transparent;   /* Adjust for triangle size */
  border-left: 25px solid #ffff00;           /* Adj */  
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.pagination-dot {
  width: 10px;
  height: 10px;
  background-color: #bbb;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.pagination-dot.active {
  background-color: #555;
}
.pagination-dot:hover {
  background-color: #ff0000;
}

.homepage-container {
  display:flex;
position: relative;
width: 100%;
justify-content: center; /* Centers items horizontally */
align-items: center; /* Centers items vertically */

}

.homepage-image {
display: block;
position: relative;
width: 100%;
height: auto;
justify-content: center; /* Centers items horizontally */
align-items: center; /* Centers items vertically */
border: 2px solid #ffffff;
outline: 1px solid rgb(0, 0, 0); /* Outer border */
border-radius:2px;
margin-top:20px;

}
.homepage-text-overlay {
display:block;
position: absolute;

top: 40px;
padding-left:18vw;
padding-right:10px;
width: 100%;
height: 100%;
color: white;
text-align: left;
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 2.0vw;
font-size:600;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 1.0);

}

.readabiliyss {
  display:inline-block; 
  position:relative; 
  width:100%
  }




/* MEDIA VIEWPORT */

@media only screen and (max-width:1190px) {
  .width-50-percent {width:100%}

  }


  @media only screen and (max-width:1180px) {


  .main-header-font {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 4.4vw;
    font-family: Times New Roman, Arial;
    color: #FFFFFF;
    line-height: 18px;
    padding-top: 1px;
}
  }
  @media only screen and (max-width:1064px) {


    .form_column_right {
      display: block;
      align-items: start;
      width: 100%;
      font-family: Georgia;
      padding-left: 10px;
      padding-right: 10px;
  }



    .main-header-font { text-align:center; 
      padding-top:0px; 
      font-size: 4.3vw; 
      font-family: Times New Roman, Arial; 
      color:#FFFFFF;
      display:inline-block;
      margin:0px;

    }
  
    .main-header-small-font {
      display:inline-block;
      font-size: 1.5vw;
      line-height:19px; 
      letter-spacing:1px; 
     
      text-align:center;
      padding-right:30px;
      padding-left:30px;
      padding-top:2px;
    padding-bottom:0; }
  
  .main-header-smaller-font {width: 100%; 
    line-height:5px; 
    padding-top:15px;
        font-size: 1.3vw;
  padding-top:7px;     }
  
  .formulaSelectionText {
    font-family: 'Roboto', sans-serif;
    font-size:14px;
  line-height:21px;}
   }
  
 
   @media only screen and (max-width:985px) {
    .main-header-font { text-align:center; 
      display:inline-block;
      padding-top:0px; 
      font-size: 4.5vw; 
      font-family: Times New Roman, Arial; 
      color:#FFFFFF;
      display:inline-block;
      margin:0px;
  
  
    }
  
    .main-header-small-font {
      display:inline-block;
      font-size: 1.7vw;
      line-height:19px; 
      letter-spacing:1px; 
     
      text-align:center;
      padding-right:30px;
      padding-left:30px;
      padding-top:2px;
    padding-bottom:0; 
    width:90%;}
  
  .main-header-smaller-font {
  
    line-height:5px; 
    padding-top:15px;
        font-size: 1.3vw;
  padding-top:7px;  }
   }


   @media only screen and (max-width:955px) {
    .form-container {
    flex-wrap: nowrap;  }

.rss-two-line-space, .rss-one-line-space {
  padding-bottom:5px;
}

.main-header-container-custom-text  { width: 80%; 
  margin-left:1px; 
  margin-right:1px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value (0.5) for the desired transparency */
padding: 10px;
z-index:3;
border:0px; 
}
.main-header-font { text-align:center; 
  padding-top:7px; 
  font-size: 5.9vw; 
  font-family: Times New Roman, Arial;
  color:#FFFFFF;}

 
.main-header-small-font {
font-size: 2.1vw; 
letter-spacing:1px; 
font-family: Times New Roman, Arial; color:#FFFFFF; text-align:center;}

.main-header-smaller-font {
  line-height:5px; 
  padding-top:15px;
      font-size: 1.7vw;
padding-top:7px;    }


#text {
  flex: 1; /* Allow the textarea to grow and shrink */
  resize: none; /* Optional: Allow vertical resizing */
  max-width:100%;
  min-width:70%;
  max-height: 380px;
  min-height: 380px;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: none;
  outline: none;
  box-shadow: none;
  background-color: white;
  font-size: 16px;   }
  
  .shadow-effect {
    position: relative;
    flex: 1;
    resize: vertical;
 border-top:0px;
 border-right:1 solid #000;
    outline: none;
    background-color: white;
    font-size: 16px;
    overflow: hidden;
}



 .sleek-button {
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
  padding-top:2px;
display: inline-block;
margin:0px;
letter-spacing: .5px;
font-weight:600;
font-size: 14px;
text-transform: uppercase;
font-family: 'Barlow Condensed', sans-serif;
text-decoration: none;
text-align: center;
color: #000;
background-color: #fff;
border-radius: 4px;
border: 1px solid #000;
transition: background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.uploadTextFile {
  display:inline-block;
  box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.1);
  background-color: #f7f7f7; border-radius: 4px; padding:15px;
  font-size:13px;
  margin-left:5px; 
width:100%; }  



  }

  @media only screen and (max-width:935px) {
    
    .readability-button-check {
      height: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #2B95FF; /* color */
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight:600;
    margin: 4px 2px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }

  }


  @media only screen and (max-width:870px) {
    .nav-fostrap {
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
      display: block;
      margin-bottom: 15px;
      background: #27a2db;
      margin-top: -41px;
      z-index:9999;
      padding: 0;
  height:auto; }
  
  .main-header-nav-container {
    position: sticky;
    z-index:999;
    top: 0;
    width: 90%;
    margin: 0 auto;
    padding: 0 0 0 0;
  
    text-align: center;
    align-items: center;
    justify-content: center;
  
    height:40px;
  
    border-left: 1px solid black;
    border-right: 1px solid black;
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.2);
  
    background-color: rgba(39, 162, 219, 0.5);
  }

  .form-column-left-results {
    display:none;
    flex-shrink: 0; /* Prevents the left column from shrinking */
    background-color: rgb(241, 241, 241);
    padding:25px 5px 25px 5px;
    width:26%;
    margin-left:10px;

  }
 
    } 
  
  
  



@media only screen and (max-width:830px) {

  .main-header-nav-container {
    position: sticky;
    z-index:999;
    top: 0;
    width: 90%;
    margin: 0 auto;
    padding: 0 0 0 0;
  
    text-align: center;
    align-items: center;
    justify-content: center;
  
    height:70px;
  
    border-left: 1px solid black;
    border-right: 1px solid black;
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.2);
  
    background-color: rgba(39, 162, 219, 0.5); }

    .showit {
      color: #008040;
      font-size: 14px;
      line-height: 16px;
      letter-spacing: 1px;
      position: relative;

      text-decoration: underline;
      cursor: pointer;
      }

      .showit span {
        display: none;
        position: fixed; /* Changed from absolute to fixed */
        top: 50%; /* Center vertically */
        left: 40%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust position to center */
        color: #000000;
        border: 2px solid #C0C0C0;
        padding: 6px;
        box-shadow: 5px 10px #888888;
        width: 350px;
        max-width: 90%; /* Avoid overflow on small screens */
        background: rgba(255, 255, 255, 0); /* Initial background is transparent */
        text-align: left;
        opacity: 0;
        animation: openWindow 1s ease forwards;
        }

  }




 @media only screen and (max-width:780px) {
  
  .form-column-left {
    flex-shrink: 0;
    background-color: rgb(241, 241, 241);
    padding: 25px 5px 25px;
    width: 100%;
    margin-left:0px;
  }

  .form-container {
  flex-wrap: wrap;  }

/* left side */
.form-column:first-child {
  margin-right: 10px;
  margin-left:10px;    }



  .form-column:last-child {
    margin-left: 10px;
    margin-right: 10px;
    margin-top:0px;
    padding-right:0px;
    display:flex;
    flex-wrap: wrap;
width:100%;     }

.rss-two-line-space, .rss-one-line-space {
padding-bottom:2px;
display:inline-block;
}

.sleek-button {
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
display: inline-block;
margin:0px;
letter-spacing: .5px;
font-weight:600;
font-size: 13px;
text-transform: uppercase;
font-family: 'Barlow Condensed', sans-serif;
text-decoration: none;
text-align: center;
color: #000;
background-color: #fff;
border-radius: 0px;
border: 1px solid #000;
transition: background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}



.flex-container-status-right-column {
  display: block;
      padding-top: 0px;
      margin-top: 10px;
      padding-left: 20px;
  height:auto;
  line-height:18px;
  width:200px;
      background-color: rgb(0, 140, 255);
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
  
      color: white;
      font-family: 'Barlow', sans-serif;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 15px;
  }
  .flex-container-status-left-column {
    width: 55%;
    display:inline-block;
    margin-top: auto;
  }

  .flex-container-status-right-column {
    display: inline;

    height:auto; 
    padding-top: 0px;
    margin-top:10px;
   padding-left:10px;
   padding-right:10px;
  position:relative;
  line-height:14px;
    background-color:rgb(0, 140, 255);
    color:white;
    font-family: 'Barlow', sans-serif;
    text-transform:uppercase;
    font-weight:700;
    font-size:13px;
  }

  .homepage-text-overlay {
    display:block;
    position: absolute;
    
    top: 40px;
    padding-left:32vw;
    padding-right:10px;
    width: 100%;
    height: 100%;
    color: white;
    text-align: left;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 2.5vw;
    font-size:600;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 1.0);
    
    }


}





@media only screen and (max-width:600px) {
.homepage-text-overlay {
  display:block;
  position: absolute;
  border-radius: 5px;
background-color: rgba(0, 0, 0, 0.4); /* Adjust the alpha value (0.5) for the desired transparency */
  top: 30px;
  padding-left:150px;
  width: auto;
  height:auto;
  color: white;
  text-align: left;
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-size:2.8vw;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  font-size:600;
  }

}







@media only screen and (max-width:540px) {
.flex-container-status-right-column {
  display: none;
}


.flex-container-status-left-column {
  width: 95%; /* Sets the width of the columns */
 
}
}



@media only screen and (max-width:1240px) {
  #fryGraphContainer {  transform: scaleX(.8) scaleY(.8);
    margin-top:-50px;

  
  }
  .overlayContainer {
    display:flex;
    margin-top:-70px;
   } 
}
@media only screen and (max-width:1195px) {
  #fryGraphContainer {  transform: scaleX(0.7) scaleY(0.7);
margin-left:-100px;
  
  }

  .fry-graph-image {
    height: 605px;
    width: auto;
    background-image: url(https://readabilityformulas.com/graphics/fry-graph-formula.png);
    background-repeat: no-repeat;
  }
    
  .overlayContainer {
    display:flex;

   } 

   .form_column_right {
    width: 100%;
    font-family: Georgia;
    padding-left: 10px;
padding-right: 0px;

}
}
@media only screen and (max-width:1085px) {
  
  #fryGraphContainer {  
    transform: scaleX(0.7) scaleY(0.7);
  }

  .form_column_right {
    width: 100%;
    font-family: Georgia;
    padding-left: 10px;
padding-right: 0px;

}

  .overlayContainer {

    display:flex;

}
}

@media only screen and (max-width:995px) {
  
  #fryGraphContainer {  
    transform: scaleX(0.6) scaleY(0.6);
    margin-top:-120px;
    margin-left:-55px;
  
  }

  .fry-graph-image {
    height: 600px;
    width: 100%;
    background-image: url(https://readabilityformulas.com/graphics/fry-graph-formula.png);
    background-repeat: no-repeat;
  }

  .overlayContainer {

    display:flex;

}
}

@media only screen and (max-width:950px) {
  #fryGraphContainer {  transform: scaleX(0.6) scaleY(0.6);

  }
  .overlayContainer {
    display:flex;

   } 

   .form-column-left-graphs {
    display:none;
    flex-shrink: 0; /* Prevents the left column from shrinking */
    background-color: rgb(241, 241, 241);
    padding:25px 5px 25px 5px;
    width:26%;
    margin-left:10px;
  }

}

@media only screen and (max-width:810px) {
  #fryGraphContainer {  transform: scaleX(0.5) scaleY(0.5);

    margin-left:-160px;
  }
 
 .overlayContainer {
  display:flex;

 } 
}



@media only screen and (max-width:700px) {
  #fryGraphContainer {  transform: scaleX(0.5) scaleY(0.5);

    margin-left:-200px;
  }
 
 .overlayContainer {
  display:flex;

 } 
}