:root{ --clr-wht:#fff; --font-symbols-outlined:"Material Symbols Outlined";}#toolbar{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:0; }#toolbar button,.toolbar button{ background:none; border:none; cursor:pointer; padding:0 9px; border-radius:4px; display:flex;font-size:18px; align-items:center; border:none;outline:none; display:inline-flex; justify-content:center; transition:transform 0.2s ease;}.right{font-size:24px;}toolbar button:focus{ outline:none;box-shadow:none; }#toolbar button:hover{ transform:scale(1.2);}ql-formats button,#toolbar button svg{ fill:rgba(34,34,34,0); stroke:#fdfafa;text-align:left; stroke-width:1.9; width:25px; height:25px;}.ql-formats{ display:flex; gap:0;}/@media (max-width:600px){#toolbar{ justify-content:left; }.ql-toolbar svg,#toolbar button{}}.ql-editor{ line-height:1.42; height:100%; outline:0; overflow-y:auto; tab-size:4; -moz-tab-size:4; text-align:left; white-space:pre-wrap; word-wrap:break-word;}.ql-editor p{margin:2px;}.ql-clipboard{  left:-100000px; height:1px; overflow-y:hidden; position:absolute; top:50%;}.ql-tooltip,.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-toolbar button.ql-undo::before,.ql-toolbar button.ql-redo::before{font-size:35px;padding:0 5px;font-family:'Arial Black','Segoe UI Symbol',sans-serif; color:white;display:flex;font-weight:600;position:relative;top:-5px;}.ql-toolbar button.ql-undo::before{ content:'\21B6';}.ql-toolbar button.ql-redo::before{ content:'\21B7';}.ql-undo{ margin-left:5px;}.loading-indicator{ position:absolute !important; top:50%; left:50%; z-index:99 !important; width:50px; height:50px; margin-top:-25px; margin-left:-25px; background-color:#fff; border-radius:100%; -webkit-animation:1s ease-in-out infinite loading-spinner; animation:1s ease-in-out infinite loading-spinner; transition:0.3s linear; -webkit-transition:0.3s linear; -moz-transition:0.3s linear; display:inline-block;}@-webkit-keyframes loading-spinner{ 0%{  -webkit-transform:scale(0);} 100%{  -webkit-transform:scale(1);  opacity:0; }}@keyframes loading-spinner{ 0%{  -webkit-transform:scale(0);  transform:scale(0); } 100%{  -webkit-transform:scale(1);  transform:scale(1);  opacity:0; }}.hide{ display:none !important;}img{height: auto!important;vertical-align: bottom;}.speech-text {max-width: 100%;
  overflow-wrap: break-word;}.log{ display: flex;  flex-direction: column;min-height:0em;align-items: center;margin: 0;gap: 0;}.log img{ cursor:pointer;}.log span { margin: 0 auto; background-color: #5f1a6cc9; color: #fefeff;flex-wrap: wrap; border-radius: 9px; min-width: 39%; max-width: 65%; display: block; position: relative; top: 150px; left: 0;text-align:center; font-size: 19px; font-weight: 500; padding: 0 12px; }
:root {
    --width: 55px;
    --height: 55px;
    --primary: #b817b3;
    --body: #b817b3;
    --borderRadius: 50%;
}
.micro {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--width);
  height: var(--height);
  background-color: var(--primary);
  border-radius: var(--borderRadius);
  position: relative; 
  margin-bottom: 5px; 
  margin-left: 45%;
}
.micro svg {
    width: 30px;
    height: 30px;
    fill: #ffffff;
    margin: 5px;
}
#start_button.blocked svg {
    display: none;
}
#start_button.blocked {
    background: url("https://www.speechtype.in/wp-content/uploads/2025/02/mic-slash.webp") no-repeat center/contain;
    background-color: #eee;
}

#start_button {
    position: absolute;
    cursor: pointer;
    Padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 30%;
    top: 6%;
    transform: translateY(-23%);
    width: var(--width);
    height: var(--height);
    background-color: var(--primary);
    border-radius: var(--borderRadius);
}
.micro:hover,
.micro:focus {
  background: #b817b3;
  outline: none;
}
.micro:before,
.micro:after,
#start_button:before,
#start_button:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: solid 3px var(--primary);
    border-radius: var(--borderRadius);
    box-shadow: 1px 2px 5px #7d1fd3;
}

.micro.active:before,
#start_button.active:before {
    animation: ripple 2s linear infinite;
}

.micro.active:after,
#start_button.active:after {
    animation: ripple 2s 1s linear infinite;
    box-shadow: 1px 2px 5px #d31fcd;
}

@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}
#speech{ background-color:#fff; max-height:380px; min-height:280px; overflow-y:auto; padding:10px 0; border-radius:4px;}#speech p{ font-size:19px; line-height:28px;color:#0f1010;padding: 0 5px!important;}