body{ margin:0; padding:0;}.container1{ width:100%; display:flex; flex-wrap:wrap; position:relative;}.container2{ display:none;}.col1{ box-sizing:border-box; padding:0; width:70%;}.col2{ box-sizing:border-box; padding:5px; width:190px; position:relative;}.insert,.button-container{ position:absolute; left:0; width:90%;}#select_dialect{border-radius:5px;color:#000;font-size:16px;margin:0;position:relative;top:26px;}#select_language{width:120px;margin-left: auto; border-radius:5px;color:#000;font-size:16px;padding:5px; margin-top:30px;}.insert{ top:70px; width:100% !important; border:none; color:#675a81; border-radius:5px; max-height:100px; text-indent:5px; text-align:left;}.button-container{ top:30px; background-color:#FFFBEB; box-shadow:2px 2px 5px 2px rgba(255,161,107,.4); cursor:pointer; display:block; padding-bottom:5px;}.col3{ background-color:#fbe59fc7; border:1px solid #ffa11ed9; box-sizing:border-box; padding:5px; width:auto;}.row0{display: flex;justify-content: center;text-align:center;}.row1{display:flex;font-size:16px;padding-bottom:5px; text-align:center;}.row2{ background-color:#fff; font-size:17px;}.row3{ height:auto;}.row4{ padding:1px 3px 8px; background:#ffe3a7;}.entry-title{ margin-left:85px;}.gap{ margin-right:5px;}.words-wrapper{ display:flex; flex-direction:row-reverse; float:right;}.words-wrapper .words-count{ color:#c94040; font-size:0.935rem; line-height:25px; padding-left:12px;}::-webkit-scrollbar{ width:8px;}::-webkit-scrollbar-track{ border-radius:10px;}::-webkit-scrollbar-thumb{ background:linear-gradient(to bottom right,#f2d156 0%,#f27a56 100%); border-radius:10px;}::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom right,#f2d156 0%,#a72600 100%); border-radius:10px;}.acright{ float:right; font-weight:500; margin-right:25px;}.share-buttons{ margin-right:0;}.share-buttons a img{ box-shadow:0 5px 5px 0 rgba(0,0,0,0.4); margin:0;}button{ padding:0 3px;}button:hover{ background-color:#7721f3; color:#fff;}img{ border-style:none; border-color:transparent; overflow:auto; outline:none !important;}input:focus,textarea:focus,select:focus{ outline:none;}#wrapper{ max-width:750px; background-color:white; position:relative; margin-left:0; padding-left:0;}#results{display:flex; flex-direction:column; justify-content:center;  position:absolute;  font-family:'Open Sans',sans-serif; top:35%;left:30%; transform:translate(-45%,-33%); font-size:18px;padding:5px; color:#fff;line-height:1.5; background-color:transparent; pointer-events:none; z-index:50;}#interim_span{ background:#8f1167; padding:0 9px; border-radius:9px; margin:auto; display:inline-block; min-width:70px; max-width:570px; width:auto; white-space:normal; word-wrap:break-word; overflow-wrap:break-word;} textarea{ border:1px solid #facf71; border-color:#d7d6d500 !important; color:#153957; position:relative; font-size:17px; height:359px; letter-spacing:1px; padding:15px 10px; line-height:25px;width:99% !important;}.hide{ display:none;}#start_button{ border:none; display:inline-block; background-color:transparent; cursor:pointer; padding:5px 6px; margin:0;position: absolute;}#mic{ border-color:transparent; float:right; height:60px; overflow:auto; outline:none !important; width:60px;}.insert select{ height:40px; width:200px; overflow-y:auto; margin-bottom:5px;}#info{min-height:0; max-height:20px;}#info p{  position:relative;color:#ad2073;font-weight:400;text-shadow:1px 1px 5px #fc032c }.alert{ background-color:#ff5e79 !important; text-shadow:1px 1px 5px #fc032c !important; padding:8px 10px; position:relative;}#lang{ border-top:3px solid #969696; display:block; color:#000000; clear:both; font-size:16px; height:35px; padding:4px 12px; margin-bottom:0px; line-height:30px;}.notes{ color:#282625; font:14px/30px 'Source Sans Pro','Open Sans',Georgia,serif; position:relative; height:auto; margin:auto; min-height:80vh; padding:0 15px 80px 35px;}.select{ padding:2px 5px;}.btn-primary,.btnr{ background-color:#2166f3; border:none; color:white; font-size:15px; cursor:pointer; box-shadow:0 5px 5px 0 rgba(0,0,0,0.4); margin-left:4px; padding:5px 8px;}.txtbtn{ display:flex; padding:8px 0;}.btn-primary:hover,.btnr:hover,.btn-primary:focus{ background-color:#7721f3 !important; overflow:auto; border-color:darkred;}.dropdown{ position:relative; display:inline-block; margin-right:0;}.dropdown-content{ box-shadow:0 10px 10px 0 rgba(0,0,0,0.4); display:none; overflow:hidden; position:absolute; width:100%;}.dropdown:hover .dropdown-content{ display:block;}.dropdown-content a{ color:#000000; display:block; padding:5px; text-decoration:none;}.dropdown-content a:hover{ background-color:#00A4BD; color:#FFFFFF;}.insert button{ background-color:#FFFBEB; border:none; border-radius:5px; color:#4D455D; cursor:pointer; font-size:initial; text-align:left; padding:8px;}.insert button:hover{ background-color:#F5E9CF;color:#291603;font-weight: 400;text-shadow:1px 1px 5px #f1bc4a;}.log{ text-align:center; margin:10px 0;}.log img{ cursor:pointer;}.log span{color:#1c3c99; display:block;text-shadow:1px 2px 5px #03cffc; font-size:17px;font-weight:500; padding-top:0;}select#lang{ padding:3px 5px;}#textareaWrapper{max-width: 100%; overflow-x: hidden; background:linear-gradient(90deg,rgb(126 66 1) 0%,rgb(149 21 15) 50%,rgba(255,162,0,1) 100%); padding:0 10px;}#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;}.textareaBtn{ display:flex; justify-content:space-between; padding:8px 0;}.right{float: right;}.textareaBtn .right{ display:flex; flex-wrap:wrap; justify-content:end;}.textareaBtn .menuBtn{ color:#fff; cursor:pointer; background:#a9047e; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:600; line-height:36px; padding:0 6px; margin:2px; position:relative;box-shadow:15px 5px 23px rgba(8,13,179,0.7) inset;}.textareaBtn .menuBtn.reset-icon{ background-color:var(--clr-primary);}.textareaBtn .menuBtn:hover{ background:#7721f3; color:#fff;}.textareaBtn .menuBtn::before{ font-family:var(--font-symbols-outlined); font-size:18px; float:left; margin-right:3px; line-height:36px;}.textareaBtn .menuBtn.copy-icon::before{ content:"\e14d";}.textareaBtn .menuBtn.email-icon a{ color:#fff !important;}.textareaBtn .menuBtn.printer-icon::before{ content:"\e8ad";}.textareaBtn .menuBtn.reset-icon::before{ content:"\f053";}.textareaBtn .menuBtn.email-icon::before{ content:"\2709";}.textareaBtn .menuBtn.save-icon::before{ content:"\2713";}.share-icon{ display:flex; padding:0; float:right;}button.share-icon{ display:flex; justify-content:center; align-items:center; width:34px; height:34px; fill:#fff; cursor:pointer;}#whatsapp_link{ background-color:#2ab540;}#whatsapp_link:hover{ background-color:#fff;}#whatsapp_link:hover svg{ fill:#2ab540;}#twitter_link{ background-color:#00aced;}#twitter_link:hover{ background-color:#fff;}#twitter_link:hover svg{ fill:#00aced;}.share-icon ul{ list-style-type:none; margin:0; padding:2px; display:flex; padding-left:2px;}.share-icon ul li{ padding:0;}.share-icon ul li:first-child{ padding-right:0;}.share-icon ul li a{ display:flex; justify-content:center; align-items:center; width:39px; height:39px; fill:#fff;}.share-icon ul li.wa a{ background-color:#2ab540;}.share-icon ul li.wa a:hover{ background-color:#fff;}.share-icon ul li.wa a:hover svg{ fill:#2ab540;}.share-icon ul li.tw a{ background-color:#00aced;}.share-icon ul li.tw a:hover{ background-color:#fff;}.share-icon ul li.tw a:hover svg{ fill:#00aced;}@media only screen and (min-width:1025px){.container1{max-width:960px;margin:0 auto;}}@media only screen and (max-width:991px){html,body{overflow-x:hidden;max-width:100%;}.container1{display:none;}.container2{overflow-x:hidden;width:100%;max-width:100%;display:block;}.site-main{width:100%;display:block;padding:0;}.entry-content p,.entry-content h2,.entry-content h3,.entry-content ul{padding:0 12px!important;}}#start_img{width:68px;height:68px;}
:root {
    --width: 55px;
    --height: 55px;
    --primary: #b817b3;
    --body: #b817b3;
    --borderRadius: 50%;
}

.micro {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    top: 5%;
    transform: translateY(-23%);
    width: var(--width);
    height: var(--height);
    background-color: var(--primary);
    border-radius: var(--borderRadius);
}
.micro svg {
            width: 30px;
            height: 30px;
            fill: #ffffff;
            margin: 12px;
        }

#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: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;
    }
}

/* Style for icon buttons */
.icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding:  2px 9px;
      margin: 0 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s, background-color 0.2s;
    }
    .icon-btn svg {
      width: 24px;
      height: 24px;
      stroke: rgb(106 20 20);
      fill: none;stroke-width:2px;
    }
    .icon-btn:hover {
      transform: scale(1.1);
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 3px;
    }
.icon-btn:hover svg {
      stroke: #db34db; /* Change icon color to blue on hover */
    }
.dropdown{ position:relative; display:inline-block; margin-right:0;}
 .dropdown-content {
      display: none; /* Hidden by default */
      position: absolute;
      background-color: #c345ff; /* White background */
      min-width: 100px; /* Minimum width */
      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); /* Subtle shadow */
      border-radius: 5px; /* Rounded corners */
      z-index: 1; /* Ensure it appears above other elements */
      top: 30px; /* Move dropdown upwards */
      left: 0; /* Align with the left edge of the button */
    }

    /* Dropdown buttons */
    .dropdown-content button {
      width: 100%; /* Full width */display: flex;
      padding: 10px 16px; /* Padding for buttons */
      text-align: left; /* Align text to the left */
      border: none; /* Remove border */
      background-color: transparent; /* Transparent background */
      color: #ffffff; /* Text color */
      cursor: pointer; /* Pointer cursor on hover */
      transition: background-color 0.2s; /* Smooth transition */
    }

    /* Hover effect for dropdown buttons */
    .dropdown-content button:hover {
      background-color: rgba(54, 3, 110, 0.48); /* Light background on hover */
    }

    /* Show dropdown content when dropdown is hovered */
    .dropdown:hover .dropdown-content {
      display: block; /* Show dropdown */
    }

/*  dropdown-2  */
/*
.dropdown1 {
  position: relative;
  display: inline-block;
  margin-right: 0;
}

.dropdown-content1 {
  background: #f5d4d4;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  width: 100%;
  display: none;
  overflow-y: overlay;
  position: absolute;
  max-height: 150px;
  z-index: 10; 
}

.dropdown1:hover .dropdown-content1 {
  display: block;
}

.dropdown-content1 a {
  color: #000000;
  display: block;
  padding: 5px;
  text-decoration: none;
}

.dropdown-content1 a:hover {
  background-color: #f8fc9d;
  color: #FFFFFF;
}
*/
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-family: 'Open Sans', sans-serif;
  padding: 10px 0;
  flex-wrap: wrap;
}
