[data-tooltip] {
            position: relative;
        }
        [data-tooltip]::after {
            content: attr(data-tooltip);
            display: block;
            position: absolute;
            z-index: 2;
            background-color: #444;
            color: white;
            padding: 1em 2em;
            border-radius: 5px;
            font-size: .75em;
            bottom: 0;
            left:0;
            white-space: nowrap;
            transform: scale(0);
            transition: transform ease-out 150ms,
                        bottom ease-out 150ms
        }        
        [data-tooltip]:hover::after {
            bottom: 100%;
            transform: scale(1);
        }            
        .container {
            padding: 1em 1em;
            margin-top: 30px;
        }
        #workarea {
            display: flex;
            justify-content: space-between;
        }
        .text-container {
            width: 48%;
            position: relative;
        }
        .text-container textarea {
            width: 100%;
            border: 1px solid #AAA;
            border-radius: 10px;
            min-height: 350px;
            padding: 1.5em 1em;
        }
        #language-chooser {
            position: absolute;
            background-color: white;
            color: black;
            width: 60%;
            z-index: 10;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 20px 20px;
            top: 200px;
            border: 1px solid #555;
            border-radius: 20px;
            display: none;
        }        

        #language-chooser.active {
            display: flex;
        }
        .language-div {
            width: 20%;
        }
        .lang-choice {
            position: relative;
        }
        .lang-choice:hover {
            background-color: #DDD;
            cursor: pointer;
        }
        .lang-choice.current {
            background-color: #DDD;
        }
        .lang-choice.current::before {
            content: "✔";
            position: absolute;
            left: -15px;
        }

        .close-chooser {
            position: absolute;
            top: 7px;
            z-index: 15;
            right: 15px;
            color: #aaaaaa;
            float: right;
            font-size: 40px;
            font-weight: bold;
        }        
        .close-chooser:hover {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }            

        #target-language {
            position: absolute;
            width: 40%;
            height: 2em;
            top: -1em;
            left: 30%;
            background-color: white;
            border: 1px solid #777;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 3px;
        }
        #target-language .icon-keyboard_arrow_down {
            margin-left: .75em;
            cursor: pointer;
            font-size: 1.3em;
        }
        #target-language .icon-keyboard_arrow_down:hover {
            background-color: #DDD;
            
        }
        #target-language:hover {
            cursor: pointer;
            background-color: #DDD;
        }

        .language-name {
            text-transform: uppercase;
            font-size: 1.2em;
        }
        .super-voice-div, .great-voice-div {
            display: flex;
            border: 1px solid #888;
            padding: 15px 10px;
            flex-direction: column;
            border-radius: 15px;

        }
        .voice-grade {
            font-size: 1.2em;
            font-family: "Arvo", serif;
        }

        .voice-div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            line-height: 2;
        }
        .voice-info {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 20px;
        }
        #menu-options {
            width: 48%;
        }
        .our-voice-name {
            margin-right: 1em;
            color: #333;
            padding-top:.2em;
            padding-bottom:.2em;
            cursor: pointer;
            position: relative;
        }
        .our-voice-name:hover {
            background-color: black;
            color: white;
        }
        .our-voice-name.active::before {
            content: "✔";
            position: absolute;
            left: -20px;
            font-style: 1.2em;
            color: green;
        }
        .our-voice-name.active {
            color: black;
        }

        #characters-count {
            float: right;
            padding: .2em .6em;
        }
        #expected-cost {
            padding: .2em .6em;
        }        
        #get-audio {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #get-audio button {
            cursor: pointer;
            padding: .3em 1em;
            text-transform: uppercase;

        }
        #get-audio button:hover {
            background-color: #222;
            color: white;
        }

/*MODAL STYLE*/
        .modal {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left:0;
            overflow: auto;
            animation: modal-slide-in 1s ease-in alternate;
        }
        .modal-content {
            width: 80%;
            margin: auto;
            margin-top: 75px;
            margin-bottom: 75px;
            border: 1px solid #DDD;
            /*padding-bottom: 2em;*/
            background-color: #FFF;
            box-shadow: 5px 5px 5px #888;
            border: 1px solid #AAA;
        }
        .modal-header {
            background-color: #021130;
            padding: .5em 1em;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 3px 3px 2px rgb(0,51,51);
            font-family: "Oswald", sans-serif;
        }
        .modal-header .modal-title {
            text-transform: uppercase;
        }
        .modal-body {
            padding: 1em 2em;
            font-family: "Poppins", sans-serif;
        }
        .modal.active {
            display: block;
        }        
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 40px;
            font-weight: bold;
        }        
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }        
        .info-modal h6 {
            font-size: 1em;
        }

        .modal p {
            margin-top: .5em;
            margin-bottom: .5em;
            padding-left: 1em;
        }
        .modal-footer {
            display: flex;
            justify-content: flex-end;
        }
        .modal-footer button {
            padding: .6em .6em;
            margin-bottom: 1.5em;
            margin-right: 1.5em;
            background-color: #111;
            color: white;
            cursor: pointer;
        }
        .modal-footer button:hover {
            background-color: white;
            color: black;
        }

        .modal-info {
            padding: 1em 2em;
            font-family: "Poppins", sans-serif;
        }
        .modal-info h6 {
            margin-bottom: 1em;
        }
        .modal-info ol {
            list-style-position: inside;
            line-height: 1.3;
        }
        .modal-info ol li {
            margin-bottom: .75em;
        }
        .modal-info ol ul {
            /*list-style-position: inside;*/
        }

        .modal-info ol ul li {
            padding-left: 1.5em;
            list-style-type: square;
        }

/*END MODAL STYLE*/
/*HOW TO TOPUP STYLE*/
        .bank-accounts {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .email {
            font-style: italic;
        }

        .bank-account-detail {
            width: 48%;
            list-style: none;
            margin-top: 15px;
            line-height: 1.3;
            border: 1px solid #AAA;
            border-radius: 5px;
            padding: 15px 30px;
            background-color: rgb(220,220,220);
            text-align: center;
            line-height: 1.6;
            letter-spacing: 1px;
            overflow-wrap: normal;
        }

        .bank-account-detail img {
            width: 100%;
        }
        .payment-provider {
            text-transform: uppercase;
        }
        .customer-code {
            background-color: #021130;
            letter-spacing: 2px;
            padding: .2em .5em;
            color: white;
            border-radius: .25em;
        }
        /*END TOPUP MODAL */
        .container.inactive {
            background-color: #999;
            opacity: .5;
        }         


        #texttospeech-form {
            display: none;
        }        
        #output-div {
            display: none;
            justify-content: space-around;
            align-items: center;
        }

        .options {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        #texttospeech-menu {
            position: relative;
        }
        #texttospeech-menu .icon-bars{
            font-size: 32px;
            color: #021130;
            opacity: .9;
            cursor: pointer;
        }
        #texttospeech-menu. .icon-bars.active{
            opacity: 1;
        }

        #texttospeech-nav {
            display: none;
            position: absolute;
            z-index: 10;
            background-color: #021130;
            color: white;
            width: 150px;
            padding: 10px 10px;
            border: 1px solid #777;
            border-radius: 20px;
            top: 40px;
        }
        #texttospeech-nav ul {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            list-style: none;
            line-height: 1.6;
            text-transform: uppercase;
            letter-spacing: 2px;
            justify-content: center;
            align-items: center;
        }
        #texttospeech-nav li a{
            text-decoration: none;
            color: white;
        }
        #texttospeech-nav.active {
            display: block;
        }

        #quick-nav {
            width: 70%;
            display: inline-block;
            justify-content: space-around;
            flex-direction: row;
        }
        #quick-nav > * {
            margin-right: 20px;
        }
        #quick-nav .form-select {
            display: inline-block;

        }
        #quick-nav label {
            font-weight: bold;
        }
        a.help {
            font-size: 1em;
            text-decoration: none;
            color:  #555;
        }

        @media screen and (max-width: 800px) {
            .language-div {
                width: 30%;
            }
            #target-language, #language-detected {
                width: 50%;
                left: 25%;
                font-size: .7em;
                overflow: visible;
            }
            #translate-button {
                padding: .3em .3em;
            }
            #language-chooser {
                width: 95%;
            }
            /*MODAL*/
            .customer-code {
                font-size: .8em;
                padding: .2em .2em;
            }
            .bank-account-detail {
                width: 100%;
            }

        }   


        @keyframes modal-slide-in {
            0% {
                transform: translateX(-200%);
            }
            100% {
                transform: translateX(0%);
            }
        }