[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);
        }            
        a.help {
            font-size: 1em;
            text-decoration: none;
            /*color:  #555;*/
        }
        a.regular-used-tool {
            text-decoration: none;
        }
        a.regular-used-tool:visited {
            color: black;
        }
        .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;
            font-size: 1.5em;
        }
        #language-detected {
            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 {
            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;
        }
        #exchange-div {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #translate-button {
            padding: .6em .6em;
        }
        #translate-button:hover {
            background-color: #DDD;
            cursor: pointer;
        }
        #input-text-param, #output-actions {
            margin-top: 1em;
            color: #333;
        }
        #copy-output {
            background-color: black;
            color: white;
            cursor: pointer;
            padding: .2em .6em;
            border-radius: .3em;
        }
        #copy-output:hover {
            background-color: #222;
        }
        #characters-count {
            float: right;
            padding: .2em .6em;
        }
        #expected-cost {
            padding: .2em .6em;
        }
        #language-chooser {
            position: absolute;
            background-color: white;
            color: black;
            width: 98%;
            /*display: flex;*/
            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;
        }            

        .options {
            display: flex;
            margin-bottom: 2em;
        }
        .translate-option {
            opacity: .8;
            padding: .5em .5em;
            cursor: pointer;
        }
        .translate-option.active {
            background-color: blue;
            color: white;
            border: none;
            border-radius: .3em;
        }

        #translate-form {
            display: none;
        }
        #output-text {
            font-family: 'Open Sans', sans-serif;
            font-size: 1.3em;
            font-weight: bold;
        }

/*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;
        }           
        #input-text { 
            font-size: 1.1em;
         }     
/*                */
        @media screen and (max-width: 800px) {
            .language-div {
                width: 30%;
            }
            #target-language, #language-detected {
                width: 50%;
                left: 25%;
                font-size: .9em;
                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%);
            }
        }
        .options {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #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;
        }
        #translation-menu {
            position: relative;
        }
        #translation-menu .icon-bars{
            font-size: 32px;
            color: #021130;
            opacity: .9;
            cursor: pointer;
        }
        #translation-menu. .icon-bars.active{
            opacity: 1;
        }

        #translation-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;
        }
        #translation-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;
        }
        #translation-nav li a{
            text-decoration: none;
            color: white;
        }
        #translation-nav.active {
            display: block;
        }