Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/exqbgev.markdown

Created April 14, 2023 08:11
Show Gist options
  • Save neisdev/9da0e1050bb118d26987e7f2b4e9da0e to your computer and use it in GitHub Desktop.
Save neisdev/9da0e1050bb118d26987e7f2b4e9da0e to your computer and use it in GitHub Desktop.
Download ZIP
ExQbgEV
Raw
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Numbers to Words Converter from 0 to nonillion</title> <meta name="author" content="Jimmy" /> <meta name="description" content="Number to Text Display numbers in words : Million, Billion, Trillion, Thousand"> <meta name="keywords" content="numbers to words,number to word,numbers to words converter, convert number to words, convert numbers to words, convert numbers into words, converting numbers to words, converting numbers into words, numbers convert to words, convert numbers in words" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@codebeautify" /> <meta name="twitter:title" content="Numbers to Words Converter from 0 to nonillion" /> <meta name="twitter:description" content="Number to Text Display numbers in words : Million, Billion, Trillion, Thousand" /> <meta name="twitter:image" content="https://codebeautify.org/img/cb/number-to-word.png" /> <meta name="twitter:url" content="https://codebeautify.org/number-to-word-converter"> <meta name="twitter:creator" content="@codebeautify"> <meta property="og:title" content="Numbers to Words Converter from 0 to nonillion" /> <meta property="og:description" content="Number to Text Display numbers in words : Million, Billion, Trillion, Thousand" /> <meta property="og:image" content="https://codebeautify.org/img/cb/number-to-word.png" /> <meta property="og:url" content="https://codebeautify.org/number-to-word-converter" /> <meta property="og:type" content="website" /> <script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "WebSite",
"name": "Numbers to Words",
"image": "https://codebeautify.org/img/cb/number-to-word.png",
"url": "https://codebeautify.org/number-to-word-converter",
"description": "Number to Text Display numbers in words : Million, Billion, Trillion, Thousand",
"isPartOf": {
"@type": "Website",
"name": "Code Beautify",
"url": "https://codebeautify.org"
},
"sameAs" : [
"https://twitter.com/codebeautify"
]
}
</script> <link rel="canonical" href="https://codebeautify.org/number-to-word-converter" /> <link href="/img/cb.png" rel="icon" /> <style> /* starts Material Icons CSS */ /* in case of update Compare with https://fonts.googleapis.com/icon?family=Material+Icons */ /* fallback */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v121/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'); font-display: block; } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* Ends Material Icons CSS */ </style> <link rel="stylesheet" href="/dist/6.1/css/b/b-number-tools.min.css"> <svg xmlns="http://www.w3.org/2000/svg" class="is-hidden"> <symbol id="chrome" viewBox="0 0 496 512"> <path fill="currentColor" d="M131.5 217.5L55.1 100.1c47.6-59.2 119-91.8 192-92.1 42.3-.3 85.5 10.5 124.8 33.2 43.4 25.2 76.4 61.4 97.4 103L264 133.4c-58.1-3.4-113.4 29.3-132.5 84.1zm32.9 38.5c0 46.2 37.4 83.6 83.6 83.6s83.6-37.4 83.6-83.6-37.4-83.6-83.6-83.6-83.6 37.3-83.6 83.6zm314.9-89.2L339.6 174c37.9 44.3 38.5 108.2 6.6 157.2L234.1 503.6c46.5 2.5 94.4-7.7 137.8-32.9 107.4-62 150.9-192 107.4-303.9zM133.7 303.6L40.4 120.1C14.9 159.1 0 205.9 0 256c0 124 90.8 226.7 209.5 244.9l63.7-124.8c-57.6 10.8-113.2-20.8-139.5-72.5z" /> </symbol> <symbol id="twitter" viewBox="0 0 16 16"> <path fill="currentColor" d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" /> </symbol> <symbol id="facebook-f" viewBox="0 0 512 512"> <path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.8 90.69 226.4 209.3 245V327.7h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.3 482.4 504 379.8 504 256z" /> </symbol> <symbol id="linkedin" viewBox="0 0 448 512"> <path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" /> </symbol> <symbol id="graduation-cap" viewBox="0 0 640 512"> <path fill="currentColor" d="M623.1 136.9l-282.7-101.2c-13.73-4.91-28.7-4.91-42.43 0L16.05 136.9C6.438 140.4 0 149.6 0 160s6.438 19.65 16.05 23.09L76.07 204.6c-11.89 15.8-20.26 34.16-24.55 53.95C40.05 263.4 32 274.8 32 288c0 9.953 4.814 18.49 11.94 24.36l-24.83 149C17.48 471.1 25 480 34.89 480H93.11c9.887 0 17.41-8.879 15.78-18.63l-24.83-149C91.19 306.5 96 297.1 96 288c0-10.29-5.174-19.03-12.72-24.89c4.252-17.76 12.88-33.82 24.94-47.03l190.6 68.23c13.73 4.91 28.7 4.91 42.43 0l282.7-101.2C633.6 179.6 640 170.4 640 160S633.6 140.4 623.1 136.9zM351.1 314.4C341.7 318.1 330.9 320 320 320c-10.92 0-21.69-1.867-32-5.555L142.8 262.5L128 405.3C128 446.6 213.1 480 320 480c105.1 0 192-33.4 192-74.67l-14.78-142.9L351.1 314.4z" /> </symbol> <symbol id="share" viewBox="0 0 16 16"> <path fill="currentColor" d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z" /> </symbol> <symbol id="person-plus" viewBox="0 0 16 16"> <path fill="currentColor" d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" /> <path fill="currentColor" fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z" /> </symbol> <symbol id="question-circle-fill" viewBox="0 0 16 16"> <path fill="currentColor" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" /> </symbol> <symbol id="search" viewBox="0 0 16 16"> <path fill="currentColor" d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /> </symbol> <symbol id="cup" viewBox="0 0 24 24"> <path d="M0 0h24v24H0V0z" fill="none" /><path fill="currentColor" d="M16 5v8c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5h10m4-2H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm-2 5V5h2v3h-2zm2 11H2v2h18v-2z" /> </symbol> <symbol id="heart" viewBox="0 0 24 24"> <path d="M0 0h24v24H0V0z" fill="none" /><path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /> </symbol> <symbol id="heart-no-fill" viewBox="0 0 24 24"> <path d="M0 0h24v24H0V0z" fill="none" /><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" /> </symbol> <symbol id="arrow_drop_down" viewBox="0 0 24 24"> <path d="M0 0h24v24H0V0z" fill="none" /> <path fill="currentColor" d="M7 10l5 5 5-5H7z" /> </symbol> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="is-hidden"> <symbol id="file" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none" /><path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" /> </symbol> <symbol id="save" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.59 3.59c-.38-.38-.89-.59-1.42-.59H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7.83c0-.53-.21-1.04-.59-1.41l-2.82-2.83zM12 19c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm1-10H7c-1.1 0-2-.9-2-2s.9-2 2-2h6c1.1 0 2 .9 2 2s-.9 2-2 2z" /> </symbol> <symbol id="check" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none" /><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /> </symbol> <symbol id="print" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none" /><path fill="currentColor" d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z" /> </symbol> <symbol id="trash" viewBox="0 0 24 24"> <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" /> </symbol> <symbol id="copy" viewBox="0 0 24 24"> <path fill="currentColor" d="M15,20H5V7c0-0.55-0.45-1-1-1h0C3.45,6,3,6.45,3,7v13c0,1.1,0.9,2,2,2h10c0.55,0,1-0.45,1-1v0C16,20.45,15.55,20,15,20z M20,16V4c0-1.1-0.9-2-2-2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9C19.1,18,20,17.1,20,16z M18,16H9V4h9V16z" /> </symbol> <symbol id="fullscreen" viewBox="0 0 24 24"> <path fill="currentColor" d="M21,8.59V4c0-0.55-0.45-1-1-1h-4.59c-0.89,0-1.34,1.08-0.71,1.71l1.59,1.59l-10,10l-1.59-1.59C4.08,14.08,3,14.52,3,15.41 V20c0,0.55,0.45,1,1,1h4.59c0.89,0,1.34-1.08,0.71-1.71l-1.59-1.59l10-10l1.59,1.59C19.92,9.92,21,9.48,21,8.59z" /> </symbol> <symbol id="fullscreen-exit" viewBox="0 0 24 24"> <path fill="currentColor" d="M21.29,4.12l-4.59,4.59l1.59,1.59c0.63,0.63,0.18,1.71-0.71,1.71H13c-0.55,0-1-0.45-1-1V6.41c0-0.89,1.08-1.34,1.71-0.71 l1.59,1.59l4.59-4.59c0.39-0.39,1.02-0.39,1.41,0v0C21.68,3.1,21.68,3.73,21.29,4.12z M4.12,21.29l4.59-4.59l1.59,1.59 c0.63,0.63,1.71,0.18,1.71-0.71V13c0-0.55-0.45-1-1-1H6.41c-0.89,0-1.34,1.08-0.71,1.71l1.59,1.59l-4.59,4.59 c-0.39,0.39-0.39,1.02,0,1.41l0,0C3.1,21.68,3.73,21.68,4.12,21.29z" /> </symbol> <symbol id="tree" viewBox="0 0 448 512"> <path fill="currentColor" d="M413.8 447.1L256 448l0 31.99C256 497.7 241.8 512 224.1 512c-17.67 0-32.1-14.32-32.1-31.99l0-31.99l-158.9-.0099c-28.5 0-43.69-34.49-24.69-56.4l68.98-79.59H62.22c-25.41 0-39.15-29.8-22.67-49.13l60.41-70.85H89.21c-21.28 0-32.87-22.5-19.28-37.31l134.8-146.5c10.4-11.3 28.22-11.3 38.62-.0033l134.9 146.5c13.62 14.81 2.001 37.31-19.28 37.31h-10.77l60.35 70.86c16.46 19.34 2.716 49.12-22.68 49.12h-15.2l68.98 79.59C458.7 413.7 443.1 447.1 413.8 447.1z"></path> </symbol> <symbol id="link" viewBox="0 0 24 24"> <path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" /> </symbol> <symbol id="uploadfile" viewBox="0 0 24 24"> <path fill="currentColor" d="M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z" /> </symbol> <symbol id="downloadfile" viewBox="0 0 24 24"> <path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" /> </symbol> <symbol id="clock-rotate-left" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none" /> <path fill="currentColor" d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" /> </symbol> <symbol id="title" viewBox="0 0 24 24"> <path d="M0 0h24v24H0V0z" fill="none" /><path fill="currentColor" d="M5 4v3h5.5v12h3V7H19V4H5z" /> </symbol> <symbol id="format_indent" viewBox="0 0 24 24"> <path d="M0 0h24v24H0V0z" fill="none" /><path fill="currentColor" d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" /> </symbol> <symbol id="account_tree" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none" /> <path fill="currentColor" d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z" /> </symbol> <symbol id="cleaning_services" viewBox="0 0 24 24"> <g><rect fill="none" height="24" width="24" /></g><g><g><path fill="currentColor" d="M16,11h-1V3c0-1.1-0.9-2-2-2h-2C9.9,1,9,1.9,9,3v8H8c-2.76,0-5,2.24-5,5v7h18v-7C21,13.24,18.76,11,16,11z M11,3h2v8h-2V3 z M19,21h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H9v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H5 v-5c0-1.65,1.35-3,3-3h8c1.65,0,3,1.35,3,3V21z" /></g></g> </symbol> </svg> </head> <body> <input type="hidden" id="viewName" value="number-to-word-converter"> <input id="sampleurl" type="hidden" value="https://gist.githubusercontent.com/cbmgit/3fcf7639701a247cfef086de5b376627/raw/textsample.txt" /> <input id="fTitle" type="hidden" value="Numbers to Words Converter from 0 to nonillion" /> <div id="app"> <section class="hero"> <div class="hero-head"> <nav class="navbar is-transparent" role="navigation" aria-label="main navigation"> <div class="container is-fluid"> <div class="navbar-brand"> <a class="navbar-item py-1" href="/"><img src="/img/slogo.webp" alt="CodeBeautify Logo" aria-label="Logo" srcset="" width="217" height="44"></a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarTopMain"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div class="navbar-menu" id="navbarTopMain"> <div class="navbar-end"> <a href="https://jsonformatter.org" class="navbar-item is-link" target="_blank">JSON Formatter</a> <a href="https://jsonformatter.org/xml-formatter" target="_blank" class="navbar-item is-link is-hidden-desktop-only">XML Formatter</a> <a href="https://seoinspector.pro" target="_blank" class="navbar-item is-link is-hidden-desktop-only">SEO Inspector</a> <a href="/calculators/" class="navbar-item is-link">Calculators</a> <a href="/jsonviewer" class="navbar-item is-link">JSON Beautifier</a> <a href="/recentLinksPage" class="navbar-item is-link">Recent Links</a> <a href="/all-tools" class="navbar-item is-link">Sitemap</a> <div class="navbar-item has-dropdown is-hoverable"> <span id="favLink" class="navbar-link">Favs</span> <div id="favContent" class="navbar-dropdown"> <a class="navbar-item" href="/"> Home </a> </div> </div> <div class="navbar-item py-1"> <a id="notloggedin" href="/login" class="button is-primary">Login</a> <div id="loggedin" class="dropdown is-right" style="display:none"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu"> <span id="usernamelable">Dropdown button</span> <span class="icon is-small"> <svg class="svgicon"><use xlink:href="#arrow_drop_down"></use></svg> </span> </button> </div> <div class="dropdown-menu" id="dropdown-menu" role="menu"> <div class="dropdown-content"> <a href="https://codebeautify.org/userSaveLinkPage" class="dropdown-item">Links</a> <a href="https://codebeautify.org/userSaveOldLinkPage" class="dropdown-item">Archived</a> <a href="https://codebeautify.org/myFavouriteTools" class="dropdown-item">Favorite</a> <hr class="dropdown-divider"> <a href="/logout" class="dropdown-item button is-light">Logout</a> </div> </div> </div> </div> </div> </div> </div> </nav> </div> </section> <hr class="my-0"> <progress id="ajaxProgressBar" class="progress is-tiny is-dark" max="100">50%</progress> <div class="container is-fluid"> <br class="is-hidden-touch"> <div class="columns is-desktop"> <div class="column is-3 pr-5 is-hidden-touch"> <aside id="sidebar" class="menu has-background-white-bis"> <ul class="menu-list"> <li><a href="/all-number-converter">All Numbers Converter</a></li> <li><a href="/number-to-word-converter">Numbers to Words Converter</a></li> <li><a href="/word-to-number-converter">Word to Number Converter</a></li> <li><a href="/decimal-binary-converter">Decimal to Binary Converter</a></li> <li><a href="/decimal-hex-converter">Decimal to Hex Converter</a></li> <li><a href="/decimal-octal-converter">Decimal to Octal Converter</a></li> <li><a href="/binary-decimal-converter">Binary to Decimal Converter</a></li> <li><a href="/binary-hex-converter">Binary to Hex Converter</a></li> <li><a href="/binary-octal-converter">Binary to Octal Converter</a></li> <li><a href="/binary-to-text">Binary to Text Converter</a></li> <li><a href="/text-to-binary">Text to Binary Converter</a></li> <li><a href="/hex-decimal-converter">Hex to Decimal Converter</a></li> <li><a href="/hex-binary-converter">Hex to Binary Converter</a></li> <li><a href="/hex-octal-converter">Hex to Octal Converter</a></li> <li><a href="/octal-decimal-converter">Octal to Decimal Converter</a></li> <li><a href="/octal-binary-converter">Octal to Binary Converter</a></li> <li><a href="/octal-hex-converter"> Octal to Hex Converter </a></li> <li><a href="/ascii-to-text">ASCII to Text Converter</a></li> <li><a href="/text-to-ascii">Text to ASCII Converter</a></li> <li><a href="/hex-to-ip-converter">Hex to IP Converter</a></li> <li><a href="/ip-to-hex-converter">IP to Hex Converter</a></li> <li><a href="/binary-to-ip-converter">Binary to IP Converter</a></li> <li><a href="/ip-to-binary-converter">IP to Binary Converter</a></li> <li><a href="/decimal-to-ip-converter">Decimal to IP Converter</a></li> <li><a href="/ip-to-decimal-converter">IP to Decimal Converter</a></li> <li><a href="/octal-to-ip-converter">Octal to IP Converter</a></li> <li><a href="/ip-to-octal-converter">IP to Octal Converter</a></li> <li><a href="/reverse-hex">Reverse Hex</a></li> <li><a href="/bitwise-calculator">Bitwise Calculator</a></li> <li><a href="/xor-calculator">XOR Calculator</a></li> <li><a href="/and-calculator">AND Calculator</a></li> <li><a href="/nand-calculator">NAND Calculator</a></li> <li><a href="/or-calculator">OR Calculator</a></li> <li><a href="/nor-calculator">NOR Calculator</a></li> <li><a href="/xnor-calculator">XNOR Calculator</a></li> <li><a href="/ipv6-to-binary-converter">IPV6 to Binary Converter</a></li> </ul> </aside> <style type="text/css"> .menu { position: sticky; display: inline-block; vertical-align: top; max-height: 70vh; overflow-y: auto; width: 100%; top: 0; bottom: 0; } </style> <script type="text/javascript">
addActiveInSideMenu();
function addActiveInSideMenu(){
if(document.getElementById('sidebar')===null || document.getElementById('sidebar')===undefined){
return;
}
var sideBarLinks = document.getElementById('sidebar').getElementsByTagName('a');
for (var i = 0; i < sideBarLinks.length; i++) {
var elem = sideBarLinks[i];
//console.log("window.location.href:->"+window.location.href +" links:->"+elem.href);
if(window.location.href.includes(elem.href)){
elem.classList.add("is-active");
//elem.scrollIntoView();
document.getElementById('sidebar').scrollTop = elem.offsetTop -50 ;
//window.scrollTo({ top: 0, behavior: 'smooth' });
//console.log("Link Activated");
break;
}
}
}
</script> </div> <div class="column is-6"> <div class="columns mb-0"> <div class="column"> <h1 id="mainTitle" class="title is-size-2">Numbers to Words</h1> </div> <div class="column" style="display:none;"> <button id="topMessage" type="button" class="button is-info is-fullwidth">Message</button> </div> <div id="new-ss-div" class="column has-text-right"> <button class="button" onclick="makeFav()" title="Add this tool to Favorites"> <span class="icon"><svg class="svgicon"><use id="favIcon" xlink:href="#heart-no-fill"></use></svg></span> <span id="favText">Add to Fav</span> </button> <button id="new" type="button" class="button is-info" onclick="loadNewView()">New</button> <button id="savenshare" type="button" class="button is-dark" onclick="openSaveModal()">Save & Share</button> </div> </div> <div class="columns" id="permalink" style="display:none"> <div class="column is-8"><h2 class="subtitle" id="subtitle"></h2></div> <div class="column is-4"><h2 class="subtitle has-text-right"><a id="urlLink" href="/"></a></h2></div> </div> <hr class="mt-0 mb-2 is-hidden-touch"> <div class="columns mb-0"> <div class="column is-6 is-hidden-touch pb-0"> <h3>Enter the Number</h3> </div> <div class="column is-6 pb-0"> <div class="textareatoolbar is-pulled-right"> <a class="icon" onclick="setFromLocalStorage()" title="Load previous data from Local Storage"><i class="material-icons">history</i></a> <a id="fileopen" class="icon" title="Open File"><i class="material-icons">folder_open</i></a> <a class="icon" title="Save online" onclick="openSaveModal(true)"><i class="material-icons">save</i></a> <a class="icon" title="Clear" onclick="cleanInputTextArea();"><i class="material-icons">delete_outline</i></a> <a id="inputcopy" class="icon" title="Copy to Clipboard"><i class="material-icons">content_copy</i></a> </div> <a class="icon" style="margin-right:20px;float:right;color: #363636;" title="Sample Binary Data" onclick="getNumberSample();"><i>Sample</i></a> </div> </div> <div class="field"> <div class="control"> <textarea id="inputTextArea" class="textarea is-large is-primary" placeholder="Enter Numbers with or without ( , )" autofocus></textarea> </div> </div> <div class="columns is-hidden-touch"> <div class="column is-12 py-0"><div id="inputFooterStatus" class="is-pulled-right">Size : 0 , 0 Characters</div></div> </div> <div class="buttons is-centered"> <label class="checkbox mb-2 mr-2"> <input type="checkbox" id="isAuto" checked> Auto </label> <button id="defaultAction" onclick="convertNumberToWords();" class="button is-medium is-primary mr-4 mb-0"> <span class="icon"><i class="material-icons">cached</i></span> <span>Convert</span> </button> <div class="control has-icons-left"> <div class="select is-medium"> <select id="nwcountry" onchange="convertNumberToWords();"> <option value="i">Indian Rupees</option> <option value="u" selected="selected">US Dollar</option> <option value="b">British Pound</option> <option value="e">Euro</option> </select> </div> <span class="icon is-left"> <span class="icon"><i class="material-icons">language</i></span> </span> </div> </div> <div class="columns mb-0"> <div class="column is-4 is-hidden-touch pb-0"> <h3>The Converted Words</h3> </div> <div class="column is-8 pb-0"> <div class="textareatoolbar is-pulled-right "> <a onclick="copyOutputTextArea();" class="icon" title="Copy to Clipboard"><i class="material-icons">content_copy</i></a> </div> <a class="button is-white is-small" style="margin-right:20px;float:right;" title="Sample Binary Data" onclick="titleCase();">Title Case</a> <a class="button is-white is-small" style="margin-right:20px;float:right;" title="Sample Binary Data" onclick="lowerCase();">Lower Case</a> <a class="button is-white is-small" style="margin-right:20px;float:right;" title="Sample Binary Data" onclick="convertNumberToWords();">Upper Case</a> </div> </div> <div class="field"> <div class="control"> <textarea id="outputTextArea" class="textarea is-large is-info" placeholder="Words from Numbers"></textarea> </div> </div> <div class="columns mb-0 is-hidden-touch"> <div class="column is-12 py-0"><div id="outputFooterStatus" class="is-pulled-right">Size : 0 , 0 Characters</div></div> </div> <div class="buttons is-centered mb-0"> <button id="outputcopy" class="button is-medium mr-4" onclick="copyOutputTextArea();"> <span class="icon"><i class="material-icons">content_copy</i></span> <span>Copy To Clipboard</span> </button> <button class="button is-medium mr-4" onclick="createFile('txt');"> <span class="icon"><i class="material-icons">cloud_download</i></span> <span>Download</span> </button> </div> </div> <div class="column is-3 has-text-centered"> <div align="center"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4125058781634690" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4125058781634690" data-ad-slot="8530602265" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div> </div> </div> </div> </div> <div style="text-align:center;" class="adsense"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4125058781634690" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4125058781634690" data-ad-slot="2203092761" data-ad-format="auto"></ins> <script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div> <div class="container is-fluid"> <div class="columns"> <div class="column is-7"> <section class="pt-1"> <h2 class="title">Numbers to Words Converter Online</h2> <hr> <div class="content"> <p class="is-size-5"> Numbers to Words Converter is easy to use tool to convert Numbers to Readable String. Copy, Paste and Convert.</p> <h2> What can you do with <em>Number to Text</em>?</h2> <ul> <li>Convert Numbers to Words is a very unique tool to convert Numbers for US Dollar, India Rupees, British Pound and Euro.</li> <li>This tools supports Thousand, Million, Billion, Trillion, Quadrillion, Quintillion, Sextillion, Septillion, Octillion and Nonillion</li> <li>This tool allows loading the Numbers URL, which loads Numbers and converts to Words. Click on the URL button, Enter URL and Submit.</li> <li>Users can also convert Numbers File to Easy to read words by uploading the file.</li> <li>Converted words can be converted into UPPER CASE, lower case and Title Case.</li> <li>Convert Number to Words Calculator Online works well on Windows, MAC, Linux, Chrome, Firefox, Edge, and Safari.</li> </ul> <h3>Example of Numbers</h3> <div class="content"> <p> <strong> Numbers</strong> <a class="is-pulled-right" href='/number-to-word-converter?input=10,000,000'>Try it.</a> <pre>100,000,000
</pre> </p> </div> <div class="content"> <p> <strong>Output: Numbers to Words</strong> <pre>ONE HUNDRED MILLION
</pre> </p> </div> <h3>For Advanced Users</h3> <h5>External URL</h5> <p> Load External URL in Browser URL like this https://codebeautify.org/<wbr>number-to-word-converter?<b>url</b>=external-url</p> <blockquote> <a href="/number-to-word-converter?url=https://gist.githubusercontent.com/cbmgit/3fcf7639701a247cfef086de5b376627/raw/textsample.txt"> https://codebeautify.org/<wbr>number-to-word-converter?url=<wbr>https://gist.gi<wbr>thubusercontent<wbr>.com/cbmgit/3fc<wbr>f7639701a247cfe<wbr>f086de5b376627/<wbr>raw/textsample.<wbr>txt </a> </blockquote> <h5>Data as Parameter</h5> <p> Load Data in Browser URL input like this https://codebeautify.org/<wbr>number-to-word-converter?<b>input</b>=inputdata</p> <blockquote> <a href='/number-to-word-converter?input=10,000,000'> https://codebeautify.org/<wbr>number-to-word-converter?input=<wbr>10,000,000 </a> </blockquote> </div> </section> </div> <div class="column is-5 is-hidden-mobile"> <section class="section pt-1"> <h2 class="title">Related Tools</h2> <hr> <div class="content"> <a class="button funbtn is-large" href="/word-to-number-converter">Word to Number</a> <a class="button funbtn is-large" href="/word-sorter">Word Sorter</a> <a class="button funbtn is-large" href="/word-repeater">Word Repeater</a> <a class="button funbtn is-large" href="/text-to-ascii">Text to Ascii</a> </div> </section> <section class="section"> <h2 class="title">Recently visited pages</h2> <hr> <div class="content"> <ul id="visitedTools"> </ul> </div> </section> <section class="section"> <h2 class="title">Tags</h2> <hr> <div class="tags"> <a class="tag is-primary is-large" href="/number-tools">Numbers</a> </div> </section> </div> </div> </div> <footer id="jumptofooter" class="footer"> <div class="container is-fluid"> <section class="has-text-centered"> <h2 class="subtitle is-size-2 "> <strong>Code Beautify</strong> </h2> </section> <hr> <div class="columns has-text-centered-mobile"> <div class="column"> <p class="title has-text-dark is-5">Color Converters</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/hex-to-pantone-converter">HEX to Pantone Converter</a></li> <li><a class="is-size-4-mobile" href="/rgb-to-pantone-converter">RGB to Pantone Converter</a></li> <li><a class="is-size-4-mobile" href="/hsv-to-pantone-converter">HSV to Pantone Converter</a></li> <li><a class="is-size-4-mobile" href="/cmyk-to-pantone-converter">CMYK to Pantone Converter</a></li> <li><a class="is-size-4-mobile" href="/cmyk-to-hex-converter">CMYK to HEX Converter</a></li> <li><a class="is-size-4-mobile" href="/cmyk-to-rgb-converter">CMYK to RGB Converter</a></li> <li><a class="is-size-4-mobile" href="/cmyk-to-hsv-converter">CMYK to HSV Converter</a></li> <li><a class="is-size-4-mobile" href="/hsv-to-hex-converter">HSV to HEX Converter</a></li> <li><a class="is-size-4-mobile" href="/hsv-to-rgb-converter">HSV to RGB Converter</a></li> <li><a class="is-size-4-mobile" href="/hsv-to-cmyk-converter">HSV to CMYK Converter</a></li> <li><a class="is-size-4-mobile" href="/hex-to-hsv-converter">HEX to HSV Converter</a></li> <li><a class="is-size-4-mobile" href="/rgb-to-hex-converter">RGB to HEX Converter</a></li> <li><a class="is-size-4-mobile" href="/rgb-to-hsv-converter">RGB to HSV Converter</a></li> <li><a class="is-size-4-mobile" href="/rgb-to-cmyk-converter">RGB to CMYK Converter</a></li> <li><a class="is-size-4-mobile" href="/hex-to-rgb-converter">HEX to RGB Converter</a></li> <li><a class="is-size-4-mobile" href="/hex-to-cmyk-converter">HEX to CMYK Converter</a></li> <li><a class="is-size-4-mobile" href="/pantone-to-hex-converter">Pantone to HEX Converter</a></li> <li><a class="is-size-4-mobile" href="/pantone-to-rgb-converter">Pantone to RGB Converter</a></li> <li><a class="is-size-4-mobile" href="/pantone-to-cmyk-converter">Pantone to CMYK Converter</a></li> <li><a class="is-size-4-mobile" href="/pantone-to-hsv-converter">Pantone to HSV Converter</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/unit-tools">Unit Converter</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/length-converter">Length Converter</a></li> <li><a class="is-size-4-mobile" href="/weight-converter">Weight Converter</a></li> <li><a class="is-size-4-mobile" href="/volume-converter">Volume Converter</a></li> <li><a class="is-size-4-mobile" href="/area-converter">Area Converter</a></li> <li><a class="is-size-4-mobile" href="/time-converter">Time Converter</a></li> <li><a class="is-size-4-mobile" href="/unix-time-stamp-converter">Unix Timestamp Converter</a></li> <li><a class="is-size-4-mobile has-text-info" href="/unit-tools" title="More Unit Tools">More Unit Tools</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/sql-tools">SQL Converters</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/sql-to-csv-converter">SQL to CSV Converter</a></li> <li><a class="is-size-4-mobile" href="/sql-to-json-converter">SQL to JSON Converter</a></li> <li><a class="is-size-4-mobile" href="/sql-to-xml-converter">SQL to XML Converter</a></li> <li><a class="is-size-4-mobile" href="/sql-to-yaml-converter">SQL to YAML Converter</a></li> <li><a class="is-size-4-mobile" href="/sql-to-html-converter">SQL to HTML Converter</a></li> </ul> <p class="title has-text-dark is-5">Encode and Decode</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/base32-encode">Base32 Encode</a></li> <li><a class="is-size-4-mobile" href="/base32-decode">Base32 Decode</a></li> <li><a class="is-size-4-mobile" href="/base58-encode">Base58 Encode</a></li> <li><a class="is-size-4-mobile" href="/base58-decode">Base58 Decode</a></li> <li><a class="is-size-4-mobile" href="/base64-encode">Base64 Encode</a></li> <li><a class="is-size-4-mobile" href="/base64-decode">Base64 Decode</a></li> <li><a class="is-size-4-mobile" href="/url-encode-string">URL Encode Online</a></li> <li><a class="is-size-4-mobile" href="/url-decode-string">URL Decode Online</a></li> <li><a class="is-size-4-mobile" href="/json-url-encode">JSON URL Encode</a></li> <li><a class="is-size-4-mobile" href="/json-url-decode">JSON URL Decode</a></li> <li><a class="is-size-4-mobile" href="/html-encode-string">HTML Encode</a></li> <li><a class="is-size-4-mobile" href="/html-decode-string">HTML Decode</a></li> <li><a class="is-size-4-mobile" href="/xml-url-encoding">XML URL Encoding</a></li> <li><a class="is-size-4-mobile" href="/xml-url-decoding">XML URL Decoding</a></li> <li><a class="is-size-4-mobile" href="/utf8-converter">UTF8 Converter</a></li> <li><a class="is-size-4-mobile" href="/utf8-decode">UTF8 Decode</a></li> <li><a class="is-size-4-mobile" href="/hex-to-utf8">Hex to UTF8</a></li> <li><a class="is-size-4-mobile" href="/json-decode-online">JSON Decode Online</a></li> <li><a class="is-size-4-mobile" href="/json-encode-online">JSON Encode Online</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/base64-tools">Base64 Tools</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/image-to-base64-converter">Image to Base64</a></li> <li><a class="is-size-4-mobile" href="/base64-to-image-converter">Base64 to Image</a></li> <li><a class="is-size-4-mobile" href="/png-to-base64-converter">PNG to Base64</a></li> <li><a class="is-size-4-mobile" href="/jpg-to-base64-converter">JPG to Base64</a></li> <li><a class="is-size-4-mobile" href="/json-to-base64-converter">JSON to Base64</a></li> <li><a class="is-size-4-mobile" href="/xml-to-base64-converter">XML to Base64</a></li> <li><a class="is-size-4-mobile" href="/yaml-to-base64-converter">YAML to Base64</a></li> <li><a class="is-size-4-mobile" href="/base64-to-json-converter">Base64 to JSON</a></li> <li><a class="is-size-4-mobile" href="/base64-to-xml-converter">Base64 to XML</a></li> <li><a class="is-size-4-mobile" href="/base64-to-yaml-converter">Base64 to YAML</a></li> <li><a class="is-size-4-mobile" href="/csv-to-base64-converter">CSV to Base64</a></li> <li><a class="is-size-4-mobile" href="/base64-to-csv-converter">Base64 to CSV</a></li> <li><a class="is-size-4-mobile" href="/tsv-to-base64-converter">TSV to Base64</a></li> <li><a class="is-size-4-mobile" href="/base64-to-tsv-converter">Base64 to TSV</a></li> <li><a class="is-size-4-mobile" href="/binary-to-base64-converter">Binary to Base64</a></li> <li><a class="is-size-4-mobile" href="/base64-to-binary-converter">Base64 to Binary</a></li> <li><a class="is-size-4-mobile" href="/hex-to-base64-converter">Hex to Base64</a></li> <li><a class="is-size-4-mobile" href="/base64-to-hex-converter">Base64 to Hex</a></li> <li><a class="is-size-4-mobile" href="/octal-to-base64-converter">Octal to Base64</a></li> <li><a class="is-size-4-mobile has-text-info" href="/base64-tools">More Base64 Tools</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/image-converter-tools">Image Tools</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/jpg-to-png-converter">JPG to PNG</a></li> <li><a class="is-size-4-mobile" href="/bmp-to-png-converter">BMP to PNG</a></li> <li><a class="is-size-4-mobile" href="/png-to-jpg-converter">PNG to JPG</a></li> <li><a class="is-size-4-mobile" href="/gif-splitter">GIF Splitter</a></li> <li><a class="is-size-4-mobile" href="/gif-viewer">GIF Viewer</a></li> <li><a class="is-size-4-mobile has-text-info" href="/image-converter-tools" title="More Image Tools">More Image Tools</a></li> </ul> </div> <div class="column"> <p class="title has-text-dark is-5">Converters</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/image-to-base64-converter">Image to Base64</a></li> <li><a class="is-size-4-mobile" href="/base64-to-image-converter">Base64 to Image</a></li> <li><a class="is-size-4-mobile" href="/date-time-calculater">Date Calculater</a></li> <li><a class="is-size-4-mobile" href="/excel-to-html">EXCEL to HTML</a></li> <li><a class="is-size-4-mobile" href="/excel-to-xml">EXCEL to XML</a></li> <li><a class="is-size-4-mobile" href="/excel-to-json">EXCEL to JSON</a></li> <li><a class="is-size-4-mobile" href="/opml-to-json-converter">OPML to JSON</a></li> <li><a class="is-size-4-mobile" href="/word-to-html-converter">Word to HTML</a></li> <li><a class="is-size-4-mobile" href="/tableizer">Online Tableizer</a></li> </ul> <p class="title has-text-dark is-5">JSON Converters</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/json-to-java-converter">JSON to JAVA</a></li> <li><a class="is-size-4-mobile" href="/jsontoxml">JSON to XML</a></li> <li><a class="is-size-4-mobile" href="/json-to-yaml">JSON to YAML</a></li> <li><a class="is-size-4-mobile" href="/json-to-csv">JSON to CSV</a></li> <li><a class="is-size-4-mobile" href="/json-to-tsv-converter">JSON to TSV</a></li> <li><a class="is-size-4-mobile" href="/json-to-text-converter">JSON to Text</a></li> <li><a class="is-size-4-mobile" href="/json-to-excel-converter">JSON to Excel</a></li> <li><a class="is-size-4-mobile" href="/json-to-html-converter">JSON to HTML</a></li> </ul> <p class="title has-text-dark is-5">XML Converters</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/xml-converter-online">XML Converter</a></li> <li><a class="is-size-4-mobile" href="/xmltojson">XML to JSON</a></li> <li><a class="is-size-4-mobile" href="/xml-to-yaml">XML to YAML</a></li> <li><a class="is-size-4-mobile" href="/xml-to-csv-converter">XML to CSV</a></li> <li><a class="is-size-4-mobile" href="/xml-to-tsv-converter">XML to TSV</a></li> <li><a class="is-size-4-mobile" href="/xml-to-text-converter">XML to Text</a></li> <li><a class="is-size-4-mobile" href="/xml-xsl-transformation">XML-XSL Transform</a></li> <li><a class="is-size-4-mobile" href="/xml-to-html-converter">XML to HTML</a></li> <li><a class="is-size-4-mobile" href="/xml-to-excel-converter">XML to Excel</a></li> <li><a class="is-size-4-mobile" href="/xml-to-java-converter">XML to JAVA</a></li> </ul> <p class="title has-text-dark is-5">HTML Converters</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/html-stripper">HTML Stripper</a></li> <li><a class="is-size-4-mobile" href="/html-table-generator">HTML Table Generator</a></li> <li><a class="is-size-4-mobile" href="/html-to-csv-converter">HTML to CSV Converter</a></li> <li><a class="is-size-4-mobile" href="/html-to-tsv-converter">HTML to TSV Converter</a></li> <li><a class="is-size-4-mobile" href="/html-to-php-converter">HTML to PHP Converter</a></li> <li><a class="is-size-4-mobile" href="/html-to-csv-converter">HTML to CSV</a></li> <li><a class="is-size-4-mobile" href="/html-to-json-converter">HTML to JSON</a></li> <li><a class="is-size-4-mobile" href="/html-to-xml-converter">HTML to XML</a></li> <li><a class="is-size-4-mobile" href="/html-to-yaml-converter">HTML to YAML</a></li> <li><a class="is-size-4-mobile" href="/html-to-text-converter">HTML to Text</a></li> <li><a class="is-size-4-mobile" href="/text-to-html-entities-converter">Text to HTML Entities</a></li> <li><a class="is-size-4-mobile" href="/html-entities-to-text-converter">HTML Entities to Text</a></li> <li><a class="is-size-4-mobile" href="/html-to-markdown">HTML to Markdown</a></li> <li><a class="is-size-4-mobile" href="/markdown-to-html">Markdown to HTML</a></li> <li><a class="is-size-4-mobile" href="/pug-to-html-converter">PUG to HTML Converter</a></li> <li><a class="is-size-4-mobile" href="/html-to-pug-converter">HTML to PUG Converter</a></li> <li><a class="is-size-4-mobile" href="/jade-to-html-converter">JADE to HTML Converter</a></li> <li><a class="is-size-4-mobile" href="/html-to-jade-converter">HTML to JADE Converter</a></li> <li><a class="is-size-4-mobile" href="/html-to-bbcode-converter">HTML to BBCode Converter</a></li> <li><a class="is-size-4-mobile" href="/bbcode-to-html-converter">BBCode to HTML Converter</a></li> </ul> <p class="title has-text-dark is-5">YAML Converters</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/yaml-to-json-xml-csv">YAML Converter</a></li> <li><a class="is-size-4-mobile" href="/yaml-to-json-xml-csv">YAML to XML</a></li> <li><a class="is-size-4-mobile" href="/yaml-to-json-xml-csv">YAML to JSON</a></li> <li><a class="is-size-4-mobile" href="/yaml-to-json-xml-csv">YAML to CSV</a></li> <li><a class="is-size-4-mobile" href="/yaml-to-excel-converter">YAML to Excel</a></li> </ul> <p class="title has-text-dark is-5">Utility</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/send-snap-message">Send Snap Message</a></li> <li><a class="is-size-4-mobile" href="/responsive-website-tester">Responsive Website Tester</a></li> <li><a class="is-size-4-mobile" href="/credit-card-validate">Credit Card Validator</a></li> <li><a class="is-size-4-mobile" href="/credit-card-fake-number-generator">Credit Card Fake Number Generator</a></li> <li><a class="is-size-4-mobile" href="/Xpath-Tester">XPath Tester</a></li> <li><a class="is-size-4-mobile" href="/jsonpath-tester" title="Json Path Tester">JSON Path Tester</a></li> <li><a class="is-size-4-mobile" href="/jsonminifier" title="JSON Minifier">JSON Minifier</a></li> <li><a class="is-size-4-mobile" href="/file-diff">File Difference</a></li> <li><a class="is-size-4-mobile" href="/json-diff">JSON Diff</a></li> <li><a class="is-size-4-mobile" href="/xml-diff">XML Diff</a></li> <li><a class="is-size-4-mobile" href="/broken-link-checker">Broken Link Checker</a></li> <li><a class="is-size-4-mobile" href="/json-deserialize-online">JSON Deserialize Online</a></li> <li><a class="is-size-4-mobile" href="/json-serialize-online">JSON Serialize Online</a></li> <li><a class="is-size-4-mobile" href="/json-stringify-online">JSON Stringify Online</a></li> <li><a class="is-size-4-mobile" href="/xml-stringify-online">XML Stringify Online</a></li> <li><a class="is-size-4-mobile" href="/string-to-json-online">String to JSON Online</a></li> <li><a class="is-size-4-mobile" href="/javascript-obfuscator">JavaScript Obfuscator</a></li> <li><a class="is-size-4-mobile" href="/curl-to-php-online">Curl to PHP</a></li> <li><a class="is-size-4-mobile" href="/crontab-format">Crontab Format</a></li> </ul> <p class="title is-5">Chart Tools</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/line-graph-maker">Line Graph Maker</a></li> <li><a class="is-size-4-mobile" href="/bar-graph-maker">Bar Graph Maker</a></li> <li><a class="is-size-4-mobile" href="/pie-chart-maker">Pie Chart Maker</a></li> <li><a class="is-size-4-mobile" href="/doughnut-chart-maker">Doughnut Chart Maker</a></li> <li><a class="is-size-4-mobile" href="/scatter-plot-maker">Scatter Plot Maker</a></li> </ul> </div> <div class="column"> <p class="title has-text-dark is-5">Viewers</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/jsonviewer">JSON Viewer</a></li> <li><a class="is-size-4-mobile" href="/xmlviewer">XML Viewer</a></li> <li><a class="is-size-4-mobile" href="/yaml-viewer-online">YAML Viewer</a></li> <li><a class="is-size-4-mobile" href="/mxmlviewer">MXML Viewer</a></li> <li><a class="is-size-4-mobile" href="/htmlviewer">HTML Viewer</a></li> <li><a class="is-size-4-mobile" href="/jsviewer">JavaScript Viewer</a></li> <li><a class="is-size-4-mobile" href="/rssviewer">RSS Viewer</a></li> <li><a class="is-size-4-mobile" href="/source-code-viewer">SOURCE CODE Viewer</a></li> <li><a class="is-size-4-mobile" href="/opmlviewer">OPML Viewer</a></li> <li><a class="is-size-4-mobile" href="/csv-viewer">CSV Viewer</a></li> <li><a class="is-size-4-mobile" href="/bbcode-viewer">BBCode Viewer</a></li> <li><a class="is-size-4-mobile" href="/markdown-viewer">Markdown Viewer</a></li> </ul> <p class="title has-text-dark is-5">Programming Editors</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/online-xml-editor">XML Editor</a></li> <li><a class="is-size-4-mobile" href="/online-json-editor">JSON Editor</a></li> <li><a class="is-size-4-mobile" href="/real-time-html-editor">Real Time HTML Editor</a></li> <li><a class="is-size-4-mobile" href="/yaml-editor-online">YAML Editor</a></li> <li><a class="is-size-4-mobile" href="/alleditor">ONLINE Editor</a></li> <li><a class="is-size-4-mobile" href="/javaviewer">JAVA Editor</a></li> <li><a class="is-size-4-mobile" href="/csharpviewer">C# Editor</a></li> <li><a class="is-size-4-mobile" href="/actionscript">Actionscript Editor</a></li> <li><a class="is-size-4-mobile" href="/markdown-editor">Markdown Editor</a></li> </ul> <p class="title has-text-dark is-5">Parsers</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/url-parser">URL Parser</a></li> <li><a class="is-size-4-mobile" href="/json-parser-online">JSON Parser</a></li> <li><a class="is-size-4-mobile" href="/xml-parser-online">XML Parser</a></li> <li><a class="is-size-4-mobile" href="/yaml-parser-online">YAML Parser</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/css-tools">CSS Tools</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/css-beautify-minify">CSS Beautifier</a></li> <li><a class="is-size-4-mobile" href="/css-to-less-converter">CSS to LESS</a></li> <li><a class="is-size-4-mobile" href="/css-to-scss-converter">CSS to SCSS</a></li> <li><a class="is-size-4-mobile" href="/css-to-sass-converter">CSS to SASS</a></li> <li><a class="is-size-4-mobile" href="/css-to-stylus-converter">CSS to Stylus</a></li> <li><a class="is-size-4-mobile" href="/stylus-compiler">Stylus Compiler</a></li> <li><a class="is-size-4-mobile" href="/stylus-to-css-converter">Stylus to CSS</a></li> <li><a class="is-size-4-mobile" href="/stylus-to-less-converter">Stylus to LESS</a></li> <li><a class="is-size-4-mobile" href="/stylus-to-scss-converter">Stylus to SCSS</a></li> <li><a class="is-size-4-mobile" href="/stylus-to-sass-converter">Stylus to SASS</a></li> <li><a class="is-size-4-mobile" href="/less-compiler">LESS Compiler</a></li> <li><a class="is-size-4-mobile" href="/less-to-css-converter">LESS to CSS</a></li> <li><a class="is-size-4-mobile" href="/less-to-stylus-converter">LESS to Stylus</a></li> <li><a class="is-size-4-mobile" href="/less-to-scss-converter">LESS to SCSS</a></li> <li><a class="is-size-4-mobile" href="/less-to-sass-converter">LESS to SASS</a></li> <li><a class="is-size-4-mobile" href="/scss-compiler">SCSS Compiler</a></li> <li><a class="is-size-4-mobile" href="/scss-to-css-converter">SCSS to CSS</a></li> <li><a class="is-size-4-mobile" href="/scss-to-stylus-converter">SCSS to Stylus</a></li> <li><a class="is-size-4-mobile" href="/scss-to-less-converter">SCSS to LESS</a></li> <li><a class="is-size-4-mobile" href="/scss-to-sass-converter">SCSS to SASS</a></li> <li><a class="is-size-4-mobile" href="/sass-compiler">SASS Compiler</a></li> <li><a class="is-size-4-mobile" href="/sass-to-css-converter">SASS to CSS</a></li> <li><a class="is-size-4-mobile" href="/sass-to-stylus-converter">SASS to Stylus</a></li> <li><a class="is-size-4-mobile" href="/sass-to-scss-converter">SASS to SCSS</a></li> <li><a class="is-size-4-mobile" href="/sass-to-less-converter">SASS to LESS</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/escape-unescape-tools">Escape Unescape</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/html-escape-unescape" title="HTML Escape Unescape">HTML Escape Unescape</a></li> <li><a class="is-size-4-mobile" href="/xml-escape-unescape" title="XML Escape Unescape">XML Escape Unescape</a></li> <li><a class="is-size-4-mobile" href="/java-escape-unescape" title="Java Escape Unescape">Java Escape Unescape</a></li> <li><a class="is-size-4-mobile" href="/csharp-escape-unescape" title="C# Escape Unescape">C# Escape Unescape</a></li> <li><a class="is-size-4-mobile" href="/javascript-escape-unescape" title="Javascript Escape Unescape">Javascript Escape Unescape</a></li> <li><a class="is-size-4-mobile" href="/csv-escape-unescape" title="CSV Escape Unescape">CSV Escape Unescape</a></li> <li><a class="is-size-4-mobile" href="/sql-escape-unescape" title="SQL Escape Unescape">SQL Escape Unescape</a></li> <li><a class="is-size-4-mobile" href="/json-escape-unescape" title="JSON Escape Unescape">JSON Escape Unescape</a></li> <li><a class="is-size-4-mobile" href="/un-google-link" title="Un-Google Link">Un-Google Link</a></li> </ul> <p class="title has-text-dark is-5">CryptoGraphy Tools</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/encrypt-decrypt">Encryption-Decryption</a></li> <li><a class="is-size-4-mobile" href="/hmac-generator">HMAC Generator</a></li> <li><a class="is-size-4-mobile" href="/md2-hash-generator">MD2 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/md4-hash-generator">MD4 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/md5-hash-generator">MD5 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/md6-hash-generator">MD6 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/ntlm-hash-generator">NTLM Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha1-hash-generator">SHA1 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha2-hash-generator">SHA2 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha224-hash-generator">SHA224 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha256-hash-generator">SHA256 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha384-hash-generator">SHA384 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha512-hash-generator">SHA512 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha512-224-hash-generator">SHA512/224 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha512-256-hash-generator">SHA512/256 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha3-224-hash-generator">SHA3-224 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha3-256-hash-generator">SHA3-256 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha3-384-hash-generator">SHA3-384 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/sha3-512-hash-generator">SHA3-512 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/crc-16-hash-generator">CRC-16 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/crc-32-hash-generator">CRC-32 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/shake-128-hash-generator">Shake-128 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/shake-256-hash-generator">Shake-256 Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/whirlpool-hash-generator">Whirlpool Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/wordpress-password-hash-generator">Wordpress Password Hash Generator</a></li> </ul> </div> <div class="column"> <p class="title is-5"><a class="has-text-dark" href="/formatters-and-beautifiers">Beautifiers</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/jsonviewer">JSON Beautifier</a></li> <li><a class="is-size-4-mobile" href="/css-beautify-minify">CSS Beautifier</a></li> <li><a class="is-size-4-mobile" href="/xmlviewer">XML Beautifier</a></li> <li><a class="is-size-4-mobile" href="/html-formatter-beautifier">HTML Beautifier</a></li> <li><a class="is-size-4-mobile" href="/jsviewer">Javascript Beautifier</a></li> <li><a class="is-size-4-mobile" href="/yaml-beautifier">YAML Beautifier</a></li> <li><a class="is-size-4-mobile" href="/csharpviewer">C# Beautifier</a></li> <li><a class="is-size-4-mobile" href="/javaviewer">Java Beautifier</a></li> <li><a class="is-size-4-mobile" href="/c-formatter-beautifier">C Beautifier</a></li> <li><a class="is-size-4-mobile" href="/cpp-formatter-beautifier">C++ Beautifier</a></li> <li><a class="is-size-4-mobile" href="/typescript-formatter-online">TypeScript Formatter</a></li> <li><a class="is-size-4-mobile" href="/sqlformatter">SQL Formatter</a></li> <li><a class="is-size-4-mobile" href="/babel-formatter">Babel Formatter</a></li> <li><a class="is-size-4-mobile" href="/markdown-formatter">Markdown Formatter</a> </li> <li><a class="is-size-4-mobile" href="/mdx-formatter">MDX Formatter</a></li> <li><a class="is-size-4-mobile" href="/less-beautifier">LESS Beautifier</a></li> <li><a class="is-size-4-mobile" href="/scss-beautifier">SCSS Beautifier</a></li> <li><a class="is-size-4-mobile" href="/graphql-beautifier">GraphQL Beautifier</a> </li> <li><a class="is-size-4-mobile" href="/php-beautifier">PHP Beautifier</a> </li> <li><a class="is-size-4-mobile" href="/python-formatter-beautifier">Python Beautifier</a> </li> <li><a class="is-size-4-mobile" href="/perl-formatter-beautifier">Perl Beautifier</a> </li> <li><a class="is-size-4-mobile" href="/ruby-formatter-beautifier">Ruby Beautifier</a> </li> <li><a class="is-size-4-mobile" href="/angular-formatter">Angular Formatter</a></li> <li><a class="is-size-4-mobile" href="/react-formatter">React Formatter</a></li> <li><a class="is-size-4-mobile" href="/lua-beautifier">Lua Beautifier</a></li> <li><a class="is-size-4-mobile" href="/xaml-beautifier">XAML Beautifier</a></li> </ul> <p class="title has-text-dark is-5">Minifier</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/jsonminifier">JSON Minify</a></li> <li><a class="is-size-4-mobile" href="/xml-minifier">XML Minify</a></li> <li><a class="is-size-4-mobile" href="/minify-js">Minify JS</a></li> <li><a class="is-size-4-mobile" href="/css-beautify-minify">CSS Minify</a></li> <li><a class="is-size-4-mobile" href="/sql-minifier">SQL Minifier</a></li> <li><a class="is-size-4-mobile" href="/minify-html">Minify HTML</a></li> <li><a class="is-size-4-mobile" href="/lua-minifier">Lua Minifier</a></li> <li><a class="is-size-4-mobile" href="/text-minifier">Text Minifier</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/csv-tools">CSV Tools</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/csv-viewer">CSV Viewer</a></li> <li><a class="is-size-4-mobile" href="/csv-to-xml-json">CSV to XML/JSON</a></li> <li><a class="is-size-4-mobile" href="/csv-to-xml-converter">CSV to XML</a></li> <li><a class="is-size-4-mobile" href="/csv-to-json-converter">CSV to JSON</a></li> <li><a class="is-size-4-mobile" href="/csv-to-html-converter">CSV to HTML</a></li> <li><a class="is-size-4-mobile" href="/csv-to-tsv-converter">CSV to TSV</a></li> <li><a class="is-size-4-mobile" href="/csv-to-multi-line-converter">CSV to MULTILINE DATA</a></li> <li><a class="is-size-4-mobile" href="/csv-to-sql-converter">CSV to SQL</a></li> <li><a class="is-size-4-mobile" href="/csv-to-excel-converter">CSV to Excel</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/string-functions"> String Utilities</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/upside-down-text">Upside Down Text</a></li> <li><a class="is-size-4-mobile" href="/random-word-generator">Random Word Generator</a></li> <li><a class="is-size-4-mobile" href="/ntlm-hash-generator">NTLM Hash Generator</a></li> <li><a class="is-size-4-mobile" href="/password-generator">Password Generator</a></li> <li><a class="is-size-4-mobile" href="/string-builder">String Builder</a></li> <li><a class="is-size-4-mobile" href="/number-to-word-converter">Number to Word Converter</a></li> <li><a class="is-size-4-mobile" href="/word-to-number-converter">Word to Number Converter</a></li> <li><a class="is-size-4-mobile" href="/wordcounter">WORD COUNTER</a></li> <li><a class="is-size-4-mobile" href="/word-repeater">Word Repeater</a></li> <li><a class="is-size-4-mobile" href="/reverse-string">Reverse String</a></li> <li><a class="is-size-4-mobile" href="/string-hex-converter">String to Hex Converter</a></li> <li><a class="is-size-4-mobile" href="/hex-string-converter">Hex to String Converter</a></li> <li><a class="is-size-4-mobile" href="/string-binary-converter">String to Binary Converter</a></li> <li><a class="is-size-4-mobile" href="/binary-string-converter">Binary to String Converter</a></li> <li><a class="is-size-4-mobile" href="/case-converter">Case Converter</a></li> <li><a class="is-size-4-mobile" href="/delimited-text-extractor">Delimited Text Extractor</a></li> <li><a class="is-size-4-mobile" href="/remove-accents">Remove Accents</a></li> <li><a class="is-size-4-mobile" href="/remove-duplicate-lines">Remove Duplicate Lines</a></li> <li><a class="is-size-4-mobile" href="/remove-empty-lines">Remove Empty Lines</a></li> <li><a class="is-size-4-mobile" href="/remove-extra-spaces">Remove Extra Spaces</a></li> <li><a class="is-size-4-mobile" href="/remove-whitespace">Remove Whitespace</a></li> <li><a class="is-size-4-mobile" href="/remove-line-breaks">Remove Line Breaks</a></li> <li><a class="is-size-4-mobile" href="/remove-lines-containing">Remove Lines Containing</a></li> <li><a class="is-size-4-mobile" href="/sort-text-lines">Sort Text Lines</a></li> <li><a class="is-size-4-mobile" href="/word-sorter">Word Sorter</a></li> <li><a class="is-size-4-mobile" href="/word-frequency-counter">Word Frequency Counter</a></li> <li><a class="is-size-4-mobile" href="/text-repeater">Text Repeater</a></li> <li><a class="is-size-4-mobile" href="/remove-punctuation">Remove Punctuation</a></li> </ul> <p class="title has-text-dark is-5">Syntax Highlighting</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/json-syntax-highlighting">JSON Syntax Highlighting</a></li> <li><a class="is-size-4-mobile" href="/xml-highlighter">XML Highlighter</a></li> <li><a class="is-size-4-mobile" href="/xml-pretty-print">XML Pretty Print</a></li> <li><a class="is-size-4-mobile" href="/html-pretty-print">HTML Pretty Print</a></li> <li><a class="is-size-4-mobile" href="/javascript-pretty-print">JS Pretty Print</a></li> <li><a class="is-size-4-mobile" href="/code-highlighter">Code Highlighter</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/compress-decompress-tools">Compress / Decompress</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/gzip-decompress-online">GZip Decompress Online</a></li> <li><a class="is-size-4-mobile" href="/zlib-decompress-online">Zlib Decompress Online</a></li> </ul> </div> <div class="column"> <p class="title has-text-dark is-5">Validators</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/cssvalidate">CSS Validator</a></li> <li><a class="is-size-4-mobile" href="/jsvalidate">JavaScript Validator</a></li> <li><a class="is-size-4-mobile" href="/jsonvalidator">JSON Validator</a></li> <li><a class="is-size-4-mobile" href="/json5-validator">JSON5 Validator</a></li> <li><a class="is-size-4-mobile" href="/xmlvalidator">XML Validator</a></li> <li><a class="is-size-4-mobile" href="/credit-card-validate">Credit Card Validator</a></li> <li><a class="is-size-4-mobile" href="/api-test">API Test</a></li> <li><a class="is-size-4-mobile" href="/yaml-validator">YAML Validator</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/number-tools">Number Utilities</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/all-number-converter">All Numbers Converter</a></li> <li><a class="is-size-4-mobile" href="/decimal-binary-converter">Decimal to Binary</a></li> <li><a class="is-size-4-mobile" href="/decimal-octal-converter">Decimal to Octal</a></li> <li><a class="is-size-4-mobile" href="/binary-decimal-converter">Binary to Decimal</a></li> <li><a class="is-size-4-mobile" href="/binary-hex-converter">Binary to Hex</a></li> <li><a class="is-size-4-mobile" href="/binary-octal-converter">Binary to Octal</a></li> <li><a class="is-size-4-mobile" href="/hex-decimal-converter">Hex to Decimal</a></li> <li><a class="is-size-4-mobile" href="/hex-binary-converter">Hex to Binary</a></li> <li><a class="is-size-4-mobile" href="/hex-octal-converter">Hex to Octal</a></li> <li><a class="is-size-4-mobile" href="/octal-decimal-converter">Octal toDecimal</a></li> <li><a class="is-size-4-mobile" href="/octal-binary-converter">Octal to Binary</a></li> <li><a class="is-size-4-mobile" href="/octal-hex-converter"> Octal to Hex</a></li> <li><a class="is-size-4-mobile" href="/binary-to-text">Binary to Text</a></li> <li><a class="is-size-4-mobile" href="/text-to-binary">Text to Binary</a></li> <li><a class="is-size-4-mobile" href="/ascii-to-text">ASCII to Text</a></li> <li><a class="is-size-4-mobile" href="/text-to-ascii">Text to ASCII</a></li> <li><a class="is-size-4-mobile" href="/reverse-hex">Reverse Hex</a></li> </ul> <p class="title is-5">Bitwise Tools</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/bitwise-calculator">Bitwise Calculator</a></li> <li><a class="is-size-4-mobile" href="/xor-calculator">XOR Calculator</a></li> <li><a class="is-size-4-mobile" href="/and-calculator">AND Calculator</a></li> <li><a class="is-size-4-mobile" href="/nand-calculator">NAND Calculator</a></li> <li><a class="is-size-4-mobile" href="/or-calculator">OR Calculator</a></li> <li><a class="is-size-4-mobile" href="/nor-calculator">NOR Calculator</a></li> <li><a class="is-size-4-mobile" href="/xnor-calculator">XNOR Calculator</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/ip-tools">IP Tools</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/hex-to-ip-converter">Hex to IP</a></li> <li><a class="is-size-4-mobile" href="/ip-to-hex-converter">IP to Hex</a></li> <li><a class="is-size-4-mobile" href="/binary-to-ip-converter">Binary to IP</a></li> <li><a class="is-size-4-mobile" href="/ip-to-binary-converter">IP to Binary</a></li> <li><a class="is-size-4-mobile" href="/decimal-to-ip-converter">Decimal to IP</a></li> <li><a class="is-size-4-mobile" href="/ip-to-decimal-converter">IP to Decimal</a></li> <li><a class="is-size-4-mobile" href="/octal-to-ip-converter">Octal to IP</a></li> <li><a class="is-size-4-mobile" href="/ip-to-octal-converter">IP to Octal</a></li> <li><a class="is-size-4-mobile" href="/ipv6-to-binary-converter">IPV6 to Binary</a></li> </ul> <p class="title has-text-dark is-5">Other Tools</p> <ul class="content"> <li><a class="is-size-4-mobile" href="/lorem-ipsum">Lorem-Ipsum</a></li> <li><a class="is-size-4-mobile" href="/share-link-generator">Sharelink Generator</a></li> <li><a class="is-size-4-mobile" href="/hostname-to-ip" title="Hostname to IP">Hostname to IP</a></li> <li><a class="is-size-4-mobile" href="/ip-to-hostname" title="IP to Hostname">IP to Hostname</a></li> <li><a class="is-size-4-mobile" href="/phone-number-to-ip-address-converter" title="Phone number to IP">Phone to IP Address</a></li> <li><a class="is-size-4-mobile" href="/ip-address-to-phone-number-converter" title="IP Address to Phone Number">IP Address to Phone</a></li> <li><a class="is-size-4-mobile" href="/dns-lookup" title="DNS Lookup">DNS Lookup</a></li> <li><a class="is-size-4-mobile" href="/mx-lookup" title="MX Lookup">MX Lookup</a></li> <li><a class="is-size-4-mobile" href="/name-server-lookup" title="name-server-lookup">Nameserver Lookup</a></li> <li><a class="is-size-4-mobile" href="/website-to-ip-address" title="Website to IP Address">Website to IP Address</a></li> <li><a class="is-size-4-mobile" href="/open-port-checker" title="Open Port Checker">Open Port Checker</a></li> <li><a class="is-size-4-mobile" href="/mirror-online" title="Webcame Test">Webcam Test</a></li> </ul> <p class="title is-5"><a class="has-text-dark" href="/random-tools">Random Tools</a></p> <ul class="content"> <li><a class="is-size-4-mobile" href="/generate-random-ip">Random IP Address</a></li> <li><a class="is-size-4-mobile" href="/generate-random-time">Random Time Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-uuid">Random UUID Generator</a></li> <li><a class="is-size-4-mobile" href="/json-generator">Random JSON Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-xml">Random XML Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-data-from-regexp">Random Data from Regex</a></li> <li><a class="is-size-4-mobile" href="/generate-random-csv">Random CSV Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-numbers">Random Number Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-integers">Random Integer Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-primes">Random Prime Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-date">Random Date Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-bitmap">Random Bitmap Generator</a></li> <li><a class="is-size-4-mobile" href="/random-name-picker">Random Name Picker</a></li> <li><a class="is-size-4-mobile" href="/shuffle-lines">Text Lines shuffler</a></li> <li><a class="is-size-4-mobile" href="/generate-random-mac">MAC Address Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-hexadecimal-numbers">Random Hex Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-tsv">Random TSV Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-string">Random String Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-fractions">Random Fraction Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-integer-range">Random Integer Range Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-binary-numbers">Random Binary Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-bytes">Random Byte Generator</a></li> <li><a class="is-size-4-mobile" href="/generate-random-decimal-numbers">Random Decimal Generator</a></li> <li><a class="is-size-4-mobile" href="/random-alphanumeric-generator">Random Alphanumeric Generator</a></li> </ul> </div> </div> </div> </footer> <section class="hero is-light"> <div class="hero-body"> <div class="container is-fluid"> <div class="columns is-centered buttons are-medium"> <a class="button is-light" href="https://goo.gl/1oWmPe" target="_blank" title="Buy us a Coffee" rel="noopener">Buy us a Coffee</a> <a class="button is-light" href="https://jsonformatter.org" target="_blank" title="JSON Formatter" rel="noopener">JSON Formatter</a> <a class="button is-light" href="/faq">FAQ</a> <a class="button is-light" href="/policy">Privacy Policy</a> <a class="button is-light" href="/aboutus">About</a> <a class="button is-light" href="/contactus">Contact</a> <a class="button is-light" href="/history">History</a> <a class="button is-light" href="/where-am-i-right-now">Where am I right now?</a> <a class="button is-light" href="https://codeblogmoney.com" rel="noopener">Blog</a> <a class="button is-light" href="/calculators/">Calculators</a> </div> </div> </div> </section> <footer class="footer has-background-dark" style="padding-bottom: 1rem;"> <div class="container has-text-centered"> <p class="has-text-light"> <span class="has-text-light has-text-weight-bold">Copyright ©</span> CodeBeautify 2022 | v6.1 </p> <br> <p class="has-text-light is-size-4"> Built with <span class="has-text-primary" title="Coffee"> <svg class="svgicon20"><use xlink:href="#cup"></use></svg></span> and <span class="has-text-danger" title="love"> <svg class="svgicon20"><use xlink:href="#heart"></use></svg></span> for you... </p> </div> </footer> </div> <script src="/dist/6.1/js/b/b-number-tools.min.js"></script> <script src="/dist/6.1/js/b/numbers-to-words.js"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-51765955-1"></script> <script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-51765955-1');
</script> <div id="errorModal" class="modal"> <div class="modal-background" onclick="closeAllModal();"></div> <div class="modal-content"> <article class="message is-danger"> <div class="message-header"> <p>Error Message</p> </div> <div class="message-body"> <strong><p id="errorMessage"></p></strong> <div class="has-text-right"> <button class="button is-danger" onclick="closeAllModal();">Close</button> </div> </div> </article> </div> <button class="modal-close is-large" aria-label="close" onclick="closeAllModal();"></button> </div> </body> </html>
Raw
script.js
// used in new tool using bulma
//number to word
function NumberToWordsIndia(num) {
var a = ['','one ','two ','three ','four ', 'five ','six ','seven ','eight ','nine ','ten ','eleven ','twelve ','thirteen ','fourteen ','fifteen ','sixteen ','seventeen ','eighteen ','nineteen '];
var b = ['', '', 'twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety'];
if ((num = num.toString()).length > 9) return 'overflow';
n = ('000000000' + num).substr(-9).match(/^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
if (!n) return; var str = '';
str += (n[1] != 0) ? (a[Number(n[1])] || b[n[1][0]] + ' ' + a[n[1][1]]) + 'crore ' : '';
str += (n[2] != 0) ? (a[Number(n[2])] || b[n[2][0]] + ' ' + a[n[2][1]]) + 'lakh ' : '';
str += (n[3] != 0) ? (a[Number(n[3])] || b[n[3][0]] + ' ' + a[n[3][1]]) + 'thousand ' : '';
str += (n[4] != 0) ? (a[Number(n[4])] || b[n[4][0]] + ' ' + a[n[4][1]]) + 'hundred ' : '';
str += (n[5] != 0) ? ((str != '') ? 'and ' : '') + (a[Number(n[5])] || b[n[5][0]] + ' ' + a[n[5][1]]) + 'only ' : '';
return str;
}
function NumberToWordsUSA(int) {
if (int === 0) return 'zero';
var ONES = ['','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen','nineteen'];
var TENS = ['','','twenty','thirty','fourty','fifty','sixty','seventy','eighty','ninety'];
var SCALE = ['','thousand','million','billion','trillion','quadrillion','quintillion','sextillion','septillion','octillion','nonillion'];
// Return string of first three digits, padded with zeros if needed
function get_first(str) {
return ('000' + str).substr(-3);
}
// Return string of digits with first three digits chopped off
function get_rest(str) {
return str.substr(0, str.length - 3);
}
// Return string of triplet convereted to words
function triplet_to_words(_3rd, _2nd, _1st) {
return (_3rd == '0' ? '' : ONES[_3rd] + ' hundred ') + (_1st == '0' ? TENS[_2nd] : TENS[_2nd] && TENS[_2nd] + '-' || '') + (ONES[_2nd + _1st] || ONES[_1st]);
}
// Add to words, triplet words with scale word
function add_to_words(words, triplet_words, scale_word) {
return triplet_words ? triplet_words + (scale_word && ' ' + scale_word || '') + ' ' + words : words;
}
function iter(words, i, first, rest) {
if (first == '000' && rest.length === 0) return words;
return iter(add_to_words(words, triplet_to_words(first[0], first[1], first[2]), SCALE[i]), ++i, get_first(rest), get_rest(rest));
}
return iter('', 0, get_first(String(int)), get_rest(String(int)));
}
function convertNumberToWords(){
var str = inputTextArea.value.replaceAll(',', '');
var countryCode = document.getElementById("nwcountry").value;
var num = str.split('.');
if(num.length > 2){
outputTextArea.value="Invalid Number";
return;
}
if(countryCode == "i"){//indian
if(num.length == 1){
outputTextArea.value=NumberToWordsIndia(str).toUpperCase();
}
else{
outputTextArea.value=NumberToWordsIndia(num[0]).toUpperCase() + " POINT " + NumberToWordsIndia(num[1]).toUpperCase();
}
}
else{//usa
if(num.length == 1){
str = NumberToWordsUSA(str);
}
else{
str = NumberToWordsUSA(num[0]) + " POINT " + NumberToWordsUSA(num[1]);
}
if(countryCode == "u"){
outputTextArea.value=str.toUpperCase();
}
else if(countryCode == "b"){
outputTextArea.value=convertUSAtoBritish(str).toUpperCase();
}
else if(countryCode == "e"){
outputTextArea.value=convertUSAtoEuro(str).toUpperCase();
}
}
}
function convertUSAtoBritish(str){
str = str.replace(/billion/g, "thousand million (milliard)");
str = str.replace(/trillion/g, "billion");
str = str.replace(/quadrillion/g, "thousand billion (billiard)");
str = str.replace(/quintillion/g, "trillion");
str = str.replace(/sextillion/g, "thousand trillion (trilliard)");
str = str.replace(/septillion/g, "quadrillion");
str = str.replace(/octillion/g, "thousand quadrillion (quadrilliard)");
str = str.replace(/nonillion/g, "quintillion");
return str;
}
function convertUSAtoEuro(str){
str = str.replace(/billion/g, "thousand million");
str = str.replace(/trillion/g, "billion");
str = str.replace(/quadrillion/g, "thousand billion");
str = str.replace(/quintillion/g, "trillion");
str = str.replace(/sextillion/g, "thousand trillion");
str = str.replace(/septillion/g, "quadrillion");
str = str.replace(/octillion/g, "thousand quadrillion");
str = str.replace(/nonillion/g, "quintillion");
return str;
}
function titleCase(){
return outputTextArea.value = outputTextArea.value.toProperCase(true);
}
function lowerCase(){
return outputTextArea.value = outputTextArea.value.toLowerCase();
}
String.prototype.toProperCase = function(opt_lowerCaseTheRest) {
return (opt_lowerCaseTheRest ? this.toLowerCase() : this)
.replace(/(^|[\s\xA0])[^\s\xA0]/g, function(s){ return s.toUpperCase(); });
};
//JS URLs
const JS_ACE_EDITOR_URL = "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js";
const JS_FILE_SAVER_URL = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"
var scriptsLoaded = [];
//CSS URLs
const CSS_JSON_EDITOR_URL = "https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.1.1/jsoneditor.min.css";
// this will load files and returns Promise object
function loadFiles(filesToLoad){
startProgress();
var fileLoader = new FileLoader();
filesToLoad.forEach(function(file) {
if(!isScriptLoaded(file))
fileLoader.add(file)
});
var promisesTemp = fileLoader.loaded();
promisesTemp.then(function(){
console.log("Completed loading");
endProgress();
});
return fileLoader.loaded();
}
function FileLoader() {
var promises = [];
this.add = function(url) {
var promise = new Promise(function(resolve, reject) {
var element = null;
if(url.split('.').pop() === "js"){
element = getScriptElm(url);
} else{
element = getLinkElm(url);
}
element.addEventListener('load', function() {
resolve(element);
filename = element.src.split("/").pop();
if(scriptsLoaded.indexOf(filename) === -1) {
scriptsLoaded.push(filename);
}
console.log("file loaded:->"+filename);
}, false);
element.addEventListener('error', function() {
reject(element);
console.log('was rej');
}, false);
});
promises.push(promise);
};
this.loaded = function(callbackOnFailed) {
return Promise.all(promises);
};
}
function startProgress(){
document.getElementById("ajaxProgressBar").style.display ="block";
}
function endProgress(){
document.getElementById("ajaxProgressBar").style.display ="none";
}
//check if the script already loaded
function isScriptLoaded(src)
{
if (scriptsLoaded.indexOf(src.split("/").pop()) > -1) {
//In the array!
return true;
} else {
//Not in the array
return false;
}
}
//return Script Object for css
function getScriptElm(jsURL){
//Create a Script Tag
var script = document.createElement("script");
//add type to a Script Tag
script.type = "text/javascript";
//add url to a Script Tag
script.src = jsURL;
//Append script tag to head
document.getElementsByTagName("head")[0].appendChild(script);
return script;
}
//return link object for css
function getLinkElm(cssURL){
// Create new link Element
var link = document.createElement('link');
// set the attributes for link element
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = cssURL;
// Append link element to HTML head
document.getElementsByTagName('HEAD')[0].appendChild(link);
return link;
}
//This is a common file to identify , user has logged in or not and managing the
var globalurl = "/";
var gViewName = "";
//load naviation and Userlogin checks when document is loaded
document.addEventListener('DOMContentLoaded', loadCommonFunctions);
function loadCommonFunctions(){
setViewName();
setFavorite();
setRecently();
setupBNavigation();
checkIfUserIsLoggedIn();
}
function setViewName(){
gViewName = document.getElementById("viewName").value;
console.log("in setview gViewName:->"+gViewName);
}
//this is for resopsive menu
function setupBNavigation(){
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
}
//To check if user is logged in, than update the Login button with name. this works based on cookies
function checkIfUserIsLoggedIn() {
var user=getCookie("loggedinuser");
var userid=getCookie("loggedinuserid");
if(user!="" && userid != "")
{
document.getElementById("usernamelable").textContent=user.substring(0, 5)+"..";
document.getElementById("notloggedin").style.display = "none"
document.getElementById("loggedin").style.display = "block"
setupUserLoginDropDown();
}
}
//This creates a user menu.
function setupUserLoginDropDown() {
// querySelector - it returns the element within the document that matches the specified selector
var dropdown = document.querySelector('.dropdown');
//addEventListener - attaches an event handler to the specified element.
dropdown.addEventListener('click', function(event) {
//event.stopPropagation() - it stops the bubbling of an event to parent elements, by preventing parent event handlers from being executed
event.stopPropagation();
//classList.toggle - it toggles between adding and removing a class name from an element
dropdown.classList.toggle('is-active');
} );
}
//get Cookies to identity the users is logged in or not
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
name = c.substring(name.length, c.length);
return name.replace(/\+/g,' ');
}
}
return "";
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
document.querySelector('.dropdown').classList.remove("is-active");
}
};
/* Start/Open Error Dialog */
function openErrorModal(errorMessage){
document.getElementById("errorMessage").textContent = errorMessage;
document.getElementById("errorModal").classList.toggle("is-active");
}
//Close models
function closeAllModal(){
var modalToClose = document.getElementsByClassName("modal"); //modalToClose is an array
for(var i = 0; i < modalToClose.length; i++){
modalToClose[i].classList.remove("is-active");
}
}
// this is to monitor events
document.addEventListener('keydown',keyDownEvent);
function keyDownEvent (event){
//Close modals when pressed escape and models are open
if (event.key === 'Escape') {
// close modal here
closeAllModal();
closeFullScreen(fullscreenEditor);
}
}
//Toggle Fav icons
function makeFav(){
var favoriteList = localStorage.getItem("favoriteList");
if(favoriteList == null || favoriteList === undefined){
favoriteList = [];
}else{
favoriteList= JSON.parse(favoriteList);
}
if(document.getElementById("favText").innerText==="Added"){
document.getElementById("favIcon").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "#heart-no-fill");
document.getElementById("favText").innerText="Add to Fav";
removeFav(favoriteList);
}else{
document.getElementById("favIcon").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "#heart");
document.getElementById("favText").innerText="Added";
addFav(favoriteList);
}
}
function setRecently(){
if(gViewName!=="index" && gViewName!=="recently-used-tools"){
return false;
}
let stack = JSON.parse(localStorage.getItem("recentUsedStack"));
if(stack!=null && stack.length!=0){
document.getElementById("recentlyHomePageStatus").classList.remove("is-hidden");
}
let html = [];
let index = 1;
for(let i = 1; i <= 5 && index > 0; i++){
index = stack.length - i;
let title = stack[index].title;
let view = stack[index].view;
if(title == null || title.trim().length == 0){
title = view.toUpperCase();
}
let className = "";
if(title.length < 20){
className = "is-large";
}else if (title.length < 25){
className = "is-medium";
}
html.push("<a class='button funbtn "+className+"' href=/"+view+">"+title+"</a>");
}
//$("#relatedTools").append(html.join(""));
if(document.getElementById("recentlyHomePage")!=null){
document.getElementById("recentlyHomePage").innerHTML = document.getElementById("recentlyHomePage").innerHTML + html.join("");
}
}
//create Fav Menu when user arrive first time or refresh the page
function setFavorite(){
var favoriteList = localStorage.getItem("favoriteList");
if(favoriteList == null || favoriteList === undefined || favoriteList.length===0){
favoriteList = [];
return;
}else{
favoriteList= JSON.parse(favoriteList);
}
for(var i = favoriteList.length - 1; i >= 0 ; i--){
if(gViewName === favoriteList[i].view){
document.getElementById("favIcon").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "#heart");
document.getElementById("favText").innerText="Added";
break;
}
}
reDrawFavMenu(favoriteList);
}
//add Fav tools in localstorage and re-draw the Menu
function addFav(favoriteList){
//Show blue bg color for .5 seconds
document.getElementById('favLink').style.backgroundColor = "#3850b7";
document.getElementById('favLink').style.color = "#FFFFFF";
setTimeout(function () {
document.getElementById('favLink').style.backgroundColor = "";
document.getElementById('favLink').style.color = "";
}, 500);
var obj = {
"title" : document.getElementById("mainTitle").textContent.trim(),
"view" : gViewName,
};
favoriteList.push(obj);
localStorage.setItem("favoriteList",JSON.stringify(favoriteList));
reDrawFavMenu(favoriteList);
}
//remove Fav tools in localstorage and re-draw the Menu
function removeFav(favoriteList){
for(var i = favoriteList.length - 1; i >= 0 ; i--){
if(gViewName === favoriteList[i].view){
favoriteList.splice(i,1);
localStorage.setItem("favoriteList",JSON.stringify(favoriteList));
break;
}
}
reDrawFavMenu(favoriteList);
}
//refresh the fav menu
function reDrawFavMenu(favoriteList){
var favItem = "";
if(favoriteList.length===0){
document.getElementById("favContent").innerHTML ="<p>None</p>";
return;
}
for(var i = favoriteList.length - 1; i >= 0 ; i--){
favItem = favItem + '<a class="navbar-item" href="/'+favoriteList[i].view+'">'+favoriteList[i].title+'</a>';
}
document.getElementById("favContent").innerHTML =favItem;
}
var cbCom = "//www.codebeautify.com/";
//var cbCom = "http://cb.com/"
var cbURLService= cbCom + "URLService";
var fullscreenEditor= "";
//post tools setup such as recent links and browser storage
document.addEventListener('DOMContentLoaded',setDefaultData);
/* start to calculate BiteSize */
(function(){
var crlf = /(\r?\n|\r)/g,
whitespace = /(\r?\n|\r|\s+)/g;
window.StringSize = {
count: function(text, options) {
// Set option defaults
options = options || {};
options.lineBreaks = options.lineBreaks || 1;
options.ignoreWhitespace = options.ignoreWhitespace || false;
var length = text.length,
nonAscii = length - text.replace(/[\u0100-\uFFFF]/g, '').length,
lineBreaks = length - text.replace(crlf, '').length;
if (options.ignoreWhitespace) {
// Strip whitespace
text = text.replace(whitespace, '');
return text.length + nonAscii;
}
else {
return length + nonAscii + Math.max(0, options.lineBreaks * (lineBreaks - 1));
}
},
format: function(count, plainText) {
var level = 0;
while (count > 1024) {
count /= 1024;
level++;
}
// Round to 2 decimals
count = Math.round(count*100)/100;
level = ['', 'K', 'M', 'G', 'T'][level];
return (plainText? count : '<strong>' + count + '</strong>') + ' ' + level + 'B';
}
};
})();
/* End to calculate BiteSize */
/* start Recently used tools functionlity */
//this function save tools in localstorage in recentUsedStack
function saveRecentlyUsed(){
if(localStorage){
var stack = localStorage.getItem("recentUsedStack");
if(stack == null || stack === undefined){
stack = [];
}
else{
stack= JSON.parse(stack);
}
createRecentUsedLink(stack);
stack = stack.filter(function(el) { return el.view != gViewName; });
if(stack != null && stack !== undefined && stack.length >= 10){
stack.shift();
}
var obj = {
"title" : document.getElementById("mainTitle").textContent.trim(),
"view" : gViewName,
"date" : new Date(),
};
console.log(" saveRecentlyUsed view: " + gViewName + "title:->"+document.getElementById("mainTitle").textContent.trim());
stack.push(obj);
localStorage.setItem("recentUsedStack",JSON.stringify(stack));
}
}
//create link dynamically and add in recently used tools.
function createRecentUsedLink(stack){
var html = [];
for(var i = stack.length - 1; i >= 0 ; i--){
var title = stack[i].title;
var view = stack[i].view;
if(title == null || title.trim().length == 0){
title = view.toUpperCase();
}
html.push("<li><a href=/"+view+">"+title+"</a></li>");
}
//$("#relatedTools").append(html.join(""));
if(document.getElementById("visitedTools")!=null){
document.getElementById("visitedTools").innerHTML = html.join("");
}
}
/*End recently used functionality */
//On click of New button to load same tool with new value
function loadNewView() {
window.location.href= window.location.origin +"/"+ gViewName;
}
/* Start Setting defaults data*/
//This will create a $.urlParam function which will check if Parameter is exists in URL/Link.
function setURLParameters(){
urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null) {
return null;
}
return decodeURI(results[1]) || 0;
}
}
// this function loads to set default data based on the parameters
function setDefaultData() {
//createFavouriteImg();
saveRecentlyUsed();
setURLParameters();
if(loadRestoreDataLogin()){
return;
}else if(loadDataFromExternalURL()){
return;
}else if(loadDataFromEnteralInput()){
return;
}else if(loadDataFromSavedData()){
return;
}
}
//Set Data from Local Storage
function setFromLocalStorage(){
if(localStorage){
var data = localStorage.getItem(gViewName);
if(data != null && data.trim().length != 0){
if(typeof setToEditor == 'function'){
setToEditor(data);
}
}
}
}
//This function calls a external url to fetch the data. i.e cb.org/jsonviewer?url=https://api.com/aba/text.json
function loadRestoreDataLogin(){
var url = null;
if(urlParam('restoreDataAfter')!=null){
url=urlParam('restoreDataAfter');
if(url != null && url.length != 0 && url === "true"){
setFromLocalStorage();
}
return true;
}
return false;
}
//This function calls a external url to fetch the data. i.e cb.org/jsonviewer?url=https://api.com/aba/text.json
function loadDataFromExternalURL(){
var url = null;
if(urlParam('url')!=null){
//if url is set, Load the URL and return
url=urlParam('url');
if(url != null && url.length != 0){
title = "URL: "+url;
if(document.getElementById("subtitle")){
document.getElementById("subtitle").textContent = title;
}
loadExternalUrl(url,gViewName);
}
return true;
}
return false;
}
//this function gets the data from url input variable. i.e cb.org/jsonviewer?input=jsondata
function loadDataFromEnteralInput(){
var inputDataFromURL =null;
if(urlParam('input')!=null){
//if inputdata is set, Load the input from variable and set to editor
inputDataFromURL=urlParam('input');
if(inputDataFromURL != null && inputDataFromURL.length != 0){
title = "Input Parameter";
if(document.getElementById("subtitle")){
document.getElementById("subtitle").textContent = title;
}
setToEditor(inputDataFromURL);
}
return true;
}
return false;
}
//this load URL from External
function loadExternalUrl(url,view){
parameters = "path="+url;
AJAXCB({
data : parameters,
serverURL : cbURLService,
success: function(xhr) {
try {
if(xhr.responseText.length===0 || xhr.responseText==="404: Not Found"){
openErrorModal("Invalid URL or URL not loading URL: "+url);
}else{
setToEditor(xhr.responseText);
updateTitleForURL("URL: "+url);
}
} catch (e) {
openErrorModal("Invalid " + view + " Data Or Invalid "+ view+ " URL.");
}
},
error: function(error) {
openErrorModal("Error in data saving Error:->"+error.message);
}
});
}
//this function gets the data which is saved by user i.e cb.org/jsonviewer/cb123123
function loadDataFromSavedData(urlid){
if(document.getElementById("fContent")===null || document.getElementById("fContent") === undefined){
return;
}
var urlid = document.getElementById("fContent").value;
var title = document.getElementById("fTitle").value
parameters = "urlid="+urlid;
AJAXCB({
data : parameters,
serverURL : globalurl + "service/getDataFromID",
success: function(xhr) {
try {
if(gViewName=="alleditor"){
setDataFromDBForAllEditor(xhr.responseText);
}else{
setToEditor(xhr.responseText);
}
updateTitleForURL(title)
} catch (e) {
openErrorModal("Invalid " + view + " Data Or Invalid "+ view+ " URL.");
}
},
error: function(xhr) {
openErrorModal("Error in data saving");
}
});
}
//Replace Save and Share with Fork
function updateTitleForURL(title){
document.getElementById("permalink").style.display="";
document.getElementById("subtitle").textContent = title;
}
/* End Setting defaults data*/
/* Start Save and Get data */
function openSaveModal(){
data = getValueFromInputEditor();
if(data === null || data===undefined || data.trim().length===0){
openErrorModal("There is no data to save.");
return;
}
if(document.getElementById("saveModal") === null){
AJAXCB({
serverURL : "/common-modals",
success: function(xhr) {
document.body.insertAdjacentHTML('beforeend', xhr.responseText);
document.getElementById("saveModal").classList.toggle("is-active");
cleanSaveForm();
}
});
}else{
document.getElementById("saveModal").classList.toggle("is-active");
cleanSaveForm();
}
}
function cleanSaveForm(){
document.getElementById("saveTitle").value = "";
document.getElementById("saveDesc").value = "";
document.getElementById("saveTags").value = "";
}
function isSpamCheckTitle(strData){
let spamKeyword = ["crack", "hack", "cheats","free coins","unlimited gems","unlimited coins","href","download movies",
"download pc","torrent","mod apk","unlimited money","coins generator","http://","https://"];
for (var i = 0; i < spamKeyword.length; i++) {
if(strData.toLowerCase().includes(spamKeyword[i])){
return true;
}
}
return false;
}
function isSpamCheckData(strData){
let spamKeyword = ["CLICK HERE TO HACK","mod apk","coin-generator","247sports.com","providenceonline.com"];
for (var i = 0; i < spamKeyword.length; i++) {
if(strData.toLowerCase().includes(spamKeyword[i])){
return true;
}
}
return false;
}
//Save data to DB
function save() {
data = getValueFromInputEditor();
if(data===undefined || data.trim().length===0){
closeAllModal();
openErrorModal("There is no data to save.");
}
var titleStr = document.getElementById("saveTitle").value;
var expiryValue = document.getElementById("expiryValue").value;
if (titleStr.trim().length === 0) {
document.getElementById("titleReq").classList.remove("is-hidden");
document.getElementById("saveTitle").classList.add("is-danger");
return false;
}else{
document.getElementById("titleReq").classList.add("is-hidden");
document.getElementById("saveTitle").classList.remove("is-danger");
}
var descStr = document.getElementById("saveDesc").value;
var tagsStr = document.getElementById("saveTags").value;
//alert if there is a link in the form, this helps to ignore spams.
if(isSpamCheckTitle(titleStr) || isSpamCheckTitle(descStr)){
closeAllModal();
openErrorModal("Spam Alert! We do not support sharing data which contains href, cheat codes or software key.");
return;
}
if(isSpamCheckData(data)){
closeAllModal();
openErrorModal("Spam Alert! We do not support sharing data which contains href, cheat codes or software key.");
return;
}
//added this for 301 redirect to change view name
var viewNameForLink = gViewName;
if(viewNameForLink=="xmlvalidate"){
viewNameForLink = "xmlvalidator";
}
if(gViewName=="alleditor"){
data = data + "|" + document.getElementById("editorLanguage").value;
}
var parameters = "content="+encodeURIComponent(data)+
"&viewname="+viewNameForLink+
"&title="+encodeURIComponent(titleStr)+
"&desc="+encodeURIComponent(descStr)+
"&tags="+encodeURIComponent(tagsStr)+
"&expiryvalue="+encodeURIComponent(expiryValue);
AJAXCB({
data : parameters,
serverURL : "/service/save",
success: function(xhr) {
if(xhr.responseText==="spam"){
openErrorModal("Spam Alert! We do not support sharing data which contains href, cheat codes or software key.");
return;
}
var link = "https://" + location.host + "/" + viewNameForLink + "/" + xhr.responseText;
link = link.replace(" ", "");
document.getElementById("permalink").style.display="";
document.getElementById("subtitle").textContent = titleStr;
document.getElementById("urlLink").setAttribute('href', link);
document.getElementById("urlLink").textContent = link;
},
error: function(xhr) {
openErrorModal("Error in data saving");
}
});
return false; //due to submit button;
}
/* Common AJAX Functionality */
//this is the function that uses "success" and "error"
function AJAXCB(params) {
xhr = new XMLHttpRequest();
xhr.open('POST', params.serverURL);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var progressBar = document.getElementById("ajaxProgressBar");
progressBar.style.display ="block";
xhr.onload = function() {
if (xhr.status === 200) {
progressBar.style.display ="none";
params.success(xhr);
}
else if (xhr.status !== 200) {
progressBar.style.display ="none";
openErrorModal("Failed to Call Service, Please Try Again : " + xhr.responseText);
if(params.error !== undefined){
params.error(xhr);
}
}
};
xhr.onerror = function (){
progressBar.style.display ="none";
openErrorModal("Failed to Call Service, Please Try Again : " + xhr.responseText);
if(params.error !== undefined){
params.error();
}
}
xhr.send(params.data);
closeAllModal();
}
/* End Common AJAX functionality */
/*Start URL Modal */
// this will open the URL modal, it will download the html and than open
function openURLModal(){
if(document.getElementById("urlModal") === null){
AJAXCB({
serverURL : "/common-modals",
success: function(xhr) {
//console.log(xhr.responseText);
document.body.insertAdjacentHTML('beforeend', xhr.responseText);
openURLModalAfterLoad();
}
});
}else{
openURLModalAfterLoad();
}
}
function openURLModalAfterLoad(){
document.getElementById("urlModal").classList.toggle("is-active");
document.getElementById("urlText").value="";
document.getElementById("urlText").focus();
}
//load URL from UI
function loadURLFromUI(){
var url = document.getElementById("urlText").value;
var parameters='path=' + url;
AJAXCB({
data : parameters,
serverURL : cbURLService,
success: function(xhr) {
if(xhr.responseText.length===0 || xhr.responseText==="404: Not Found"){
openErrorModal("Invalid URL or URL not loading URL: "+url);
}else{
setToEditor(xhr.responseText);
closeAllModal();
}
}
});
}
function closeURLModal(){
document.getElementById("urlModal").classList.remove("is-active");
}
/*End URL Modal */
//Create File to download
function createFile(ext,divID){
var content = "";
if(divID == undefined){
if(typeof editorResult != 'undefined'){
content = editorResult.getValue();
}
if(content.trim().length==0 && typeof outputACEEditor != 'undefined' && outputACEEditor != null){
content = outputACEEditor.getValue();
}
if(content.trim().length==0 && typeof inputACEEditor != 'undefined'){
content = inputACEEditor.getValue();
}
if(content.trim().length==0 && typeof editorAce != 'undefined'){
content = editorAce.getValue();
}
if(content.trim().length==0 && typeof outputTextArea != 'undefined'){
content = outputTextArea.value;
}
if(content.trim().length==0 && typeof outputJSONEditor != 'undefined'){
content = outputJSONEditor.getText();
}
}
else{
content = $("#"+divID).text();
if(ext == "html"){
content = vkbeautify.xml(content);
}
}
if(ext == "converted"){
ext = converted;
}
if (content.trim().length != 0) {
var blob = new Blob([ "" + content + "" ], {
type : "text/plain;charset=utf-8"
});
fileDownloadCB(blob, gViewName+"."+ext);
}
else{
openErrorModal("Sorry Result is Empty");
}
}
//lazy load FileSaver.js for download
function fileDownloadCB(blob,filename){
if(typeof saveAs !== 'function') {
loadFiles([JS_FILE_SAVER_URL]).then(function(){
saveAs(blob,filename);
});
}else{
saveAs(blob,filename);
}
}
//Copy to Clipboard
function copyToClipboard(text) {
const el = document.createElement('textarea');
el.value = text;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
displayCenterMessage("Copied to Clipboard","success");
}
//This function will show message on the top as notification type are success and error
function displayCenterMessage(message,type) {
document.getElementById("topMessage").textContent = message;
if(type==="success"){
document.getElementById("topMessage").classList.add("is-info");
document.getElementById("topMessage").classList.remove("is-danger");
}else{
document.getElementById("topMessage").classList.add("is-danger");
document.getElementById("topMessage").classList.remove("is-info");
}
//document.getElementById("topMessage").style.display="inline";
document.getElementById("topMessage").parentNode.style.display ="";
setTimeout(function() {
//document.getElementById("topMessage").style.display="none";
document.getElementById("topMessage").parentNode.style.display ="none";
}, 2000);
}
/* start File related functionlity */
//File open realted chnages
function handleFiles(files) {
files = [...files]
files.forEach(previewFile)
}
function previewFile(file) {
let reader = new FileReader()
reader.readAsText(file)
reader.onloadend = function() {
setToEditor(reader.result);
}
}
/* end File related functionality */
//Load URL from inputhidden, setup up this sample url in Controller
function sampleURL(){
document.getElementById("urlText").value = document.getElementById("sampleurl").value;
}
//Save data to local Storage
function savetoLocalStorage(data){
if(data === undefined || data.trim().length===0){
return;
}
if(localStorage){
if(!gViewName.toLowerCase().startsWith("excel")){
localStorage.setItem(gViewName,data);
}
}
}
//Default Action on click
function defaultAction(){
document.getElementById("defaultAction").click();
return;
}
//Call this method to store value before login
function beforeLogin(){
var data = getValueFromInputEditor();
savetoLocalStorage(data);
localStorage.setItem("lastActionElementName",lastActionElementName);
}
function saveChanges(){
savetoLocalStorage(getValueFromInputEditor());
}
//This function will set the data and call the default action
function setToEditor(data) {
//inputACEEditor.setValue(data);
//defaultAction();
if( data == null || data.length == 0 || data == "undefined"){
data="";
}
setValueToInputEditor(data);
}
var isLazyAceModeSet =false;
//This will dynamically load editor mode (lazy loading)
function setupEditorlang(inputEditorMode, outputEditorMode){
if(isLazyAceModeSet){ //return if this is already set;
return;
}
if(inputEditorMode!=null && inputEditorMode!=undefined){
inputACEEditor.getSession().setMode("ace/mode/"+inputEditorMode);
inputACEEditor.getSession().setUseWorker(true);
}
if(outputEditorMode!=null && outputEditorMode!=undefined){
outputACEEditor.getSession().setMode("ace/mode/"+outputEditorMode);
}
isLazyAceModeSet=true; //this method should call only once.
}
function setValueToInputEditor(data) {
if(typeof inputACEEditor !== 'undefined' && inputACEEditor!==null ){
inputACEEditor.setValue(data,1);
}else if(typeof inputTextArea !== 'undefined'){
inputTextArea.value = data;
defaultAction();
if( typeof updateFooterState !== 'undefined'){
updateFooterState();
}
}else if(inputJSONEditor!=null && typeof inputJSONEditor !== 'undefined'){
inputJSONEditor.setText(data);
defaultAction();
}
}
function getValueFromInputEditor(){
if(typeof inputACEEditor !== 'undefined' && inputACEEditor.getValue() != undefined && inputACEEditor.getValue().length != 0){
return inputACEEditor.getValue();
}else if (typeof inputTextArea !== 'undefined' && inputTextArea.value.length!=0){
return inputTextArea.value;
}if(typeof inputJSONEditor !== 'undefined' && inputJSONEditor.getText() != undefined && inputJSONEditor.getText().length != 0){
return inputJSONEditor.getText();
}
return null;
}
//create a fullscreen editor
function addFullScreen(editor){
if(editor=="input"){
document.getElementById("inputDiv").className = "fsoverlay";
document.getElementById("inputACEEditor").classList.add("fsoverlayeditor");
document.getElementById("inputACEStatusBar").classList.add("fixedFooter");
//document.getElementById("inputACEEditor").style.height = (screen.height - 250) + "px";
document.getElementById("inputFullScreen").style.display="none";
document.getElementById("inputCloseScreen").style.display="";
//$('#inputFullScreen').hide();
//$('#inputCloseScreen').show();
fullscreenEditor="input";
inputACEEditor.resize();
}else if(editor=="output")
{
document.getElementById("outputDiv").className = "fsoverlay";
document.getElementById("outputACEEditor").classList.add("fsoverlayeditor");
document.getElementById("outputACEStatusBar").classList.add("fixedFooter");
//document.getElementById("inputACEEditor").style.height = (screen.height - 250) + "px";
document.getElementById("outputFullScreen").style.display="none"
document.getElementById("outputCloseScreen").style.display="";
//$('#inputFullScreen').hide();
//$('#inputCloseScreen').show();
fullscreenEditor="input";
outputACEEditor.resize();
fullscreenEditor ="output";
}
isFullScreen=true;
document.body.style.overflow = "hidden";
document.body.style.position ="fixed";
}
//Remove a fullscreen editor
function closeFullScreen(editor){
if(editor=="input"){
document.getElementById("inputDiv").className = "aceEditorBorder";
document.getElementById("inputACEEditor").classList.remove("fsoverlayeditor");
document.getElementById("inputACEStatusBar").classList.remove("fixedFooter");
document.getElementById("inputFullScreen").style.display="";
document.getElementById("inputCloseScreen").style.display="none";
inputACEEditor.resize();
}else if(editor=="output"){
document.getElementById("outputDiv").className = "aceEditorBorder";
document.getElementById("outputACEEditor").classList.remove("fsoverlayeditor");
document.getElementById("outputACEStatusBar").classList.remove("fixedFooter");
document.getElementById("outputFullScreen").style.display="";
document.getElementById("outputCloseScreen").style.display="none";
outputACEEditor.resize();
}
document.body.style.overflow = "";
document.body.style.position = "";
isFullScreen=false;
}
//This is for Number tools
var inputTextArea = document.getElementById("inputTextArea");
var outputTextArea = document.getElementById("outputTextArea");
document.addEventListener('DOMContentLoaded',setupEditorAndLoadData);
function setupEditorAndLoadData(){
if(inputTextArea!==null){
setupInputTextArea();
}
}
function setupInputTextArea() {
inputTextArea.addEventListener("input",onInputTextAreaChanged);
inputTextArea.addEventListener("change",onInputTextAreaChanged);
document.getElementById('inputcopy').addEventListener("click", function(){
copyToClipboard(inputTextArea.value);
inputTextArea.select();
})
}
function onInputTextAreaChanged(){
if (document.getElementById('isAuto').checked){
document.getElementById("defaultAction").click();
}
updateFooterState();
savetoLocalStorage(inputTextArea.value);
}
function updateFooterState(){
var inputFooterStatusText = "Size : " + StringSize.format(StringSize.count(inputTextArea.value));
var outFooterStatusText = "Size : " + StringSize.format(StringSize.count(outputTextArea.value));;
inputFooterStatusText = inputFooterStatusText + ", "+inputTextArea.value.length + " Characters";
outFooterStatusText = outFooterStatusText + ", "+outputTextArea.value.length + " Characters";
document.getElementById("inputFooterStatus").innerHTML = inputFooterStatusText;
document.getElementById("outputFooterStatus").innerHTML = outFooterStatusText;
}
function resetFooterStatus() {
document.getElementById("inputFooterStatus").innerHTML = "Size : 0 B, 0 Characters";
document.getElementById("outputFooterStatus").innerHTML = "Size : 0 B, 0 Characters";
}
function cleanInputTextArea() {
inputTextArea.value = '';
inputTextArea.focus();
outputTextArea.value="";
resetFooterStatus();
}
function copyOutputTextArea(){
copyToClipboard(outputTextArea.value);
outputTextArea.select();
}
//convert binary to string
function binaryToText() {
var s = inputTextArea.value;
s = s.replace(/\s/g, "");
var data = "";
if (s.length % 8 != 0) {
data = "(Input is not valid!!!)";
addErrorToOutputTextArea();
} else {
while (s.length > 0) {
var first8 = s.substring(0, 8);
s = s.substring(8);
var chr = parseInt(first8, 2);
data += String.fromCharCode(chr);
}
removeErrorToOutputTextArea();
}
outputTextArea.value = data;
}
function strTobinary() {
var data=inputTextArea.value;
//array holds the initial set of un-padded binary results
var binArray = [];
//the string to hold the padded results
var datEncode = "";
//encode each character in data to it's binary equiv and push it into an array
var i;
for (i=0; i < data.length; i++) {
binArray.push(data[i].charCodeAt(0).toString(2));
}
//loop through binArray to pad each binary entry.
var j;
for (j=0; j < binArray.length; j++) {
//pad the binary result with zeros to the left to ensure proper 8 bit binary
var pad = padding_left(binArray[j], '0', 8);
//append each result into a string
datEncode += pad + ' ';
}
outputTextArea.value = datEncode;
}
function textToAscii(){
var str = inputTextArea.value;
var bytes = [];
for (var i = 0; i < str.length; i++) {
var realBytes = unescape(encodeURIComponent(str[i]));
for (var j = 0; j < realBytes.length; j++) {
bytes.push(realBytes[j].charCodeAt(0));
}
}
var asciiResult = '';
for (var i = 0; i < bytes.length; i++) {
var byte = bytes[i];
var decByte = byte.toString(10);
var char = "%d ";
char = char.replace(/%d/g, decByte);
asciiResult += char;
}
outputTextArea.value = asciiResult;
}
function asciiToText(){
var str = inputTextArea.value;
str = str.replace(/\s+/g, ' ');
bytes = str.split(' ');
var ret = '';
for (var i = 0; i < bytes.length; i++) {
ret += String.fromCharCode(bytes[i]);
}
outputTextArea.value = ret;
}
function padding_left(s, c, n) {
if (!s || !c || s.length >= n) {
return s;
}
var max = (n - s.length) / c.length;
for ( var i = 0; i < max; i++) {
s = c + s;
}
return s;
}
function decimalTobinary()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,10,2);
}
function decimalTohexadeciaml()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,10,16);
}
function decimalTooctal()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,10,8);
}
//binary to decimal,hexadecimal,octal
function binaryToDecimal()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,2,10);
}
function binaryToHexaDeciaml()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,2,16);
}
function binaryToOctal()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,2,8);
}
//hexadecimal to decimal,binary,octal
function hexDecimalToDecimal()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,16,10);
}
function hexDecimalToBinary()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,16,2);
}
function hexDecimalToOctal()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,16,8);
}
//octal to decimal,binary,hexadeciaml
function octalToDecimal()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,8,10);
}
function octalToBinary()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,8,2);
}
function octalToHexDecimal()
{
var str = inputTextArea.value;
outputTextArea.value = convertFromBaseToBase(str,8,16);
}
//one function for all converter
function convertFromBaseToBase(str, fromBase, toBase){
if(str===null || str.length === 0){
return "";
}
var num = parseInt(str, fromBase);
if(str.trim()!=""){
var result=num.toString(toBase);
if(result.toString()=="NaN"){
result="Invalid Input";
}
return result;
}
else
{
return;
}
}
function hexReverse(){
var inputText = inputTextArea.value;
if (inputText.length == 0) {
return "";
}
var lines = inputText.split("\n");
var ret = '';
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
if (line.length == 0) {
ret += "\n";
continue;
}
var hasHexPrefix = /^0x/i.test(line);
var hasLowerCasePrefix = /^0x/.test(line);
var hasUpperCaseCasePrefix = /^0X/.test(line);
line = line.replace("0x", "").replace("0X", "");
var reversed = line.split('').reverse().join('');
if (hasHexPrefix) {
if (hasLowerCasePrefix) {
ret += "0x" + reversed;
}
else if (hasUpperCaseCasePrefix) {
ret += "0X" + reversed;
}
}
else {
ret += reversed;
}
if (i != lines.length) {
ret += "\n";
}
}
outputTextArea.value = ret;
}
function addErrorToOutputTextArea(){
outputTextArea.classList.add("is-danger");
}
function removeErrorToOutputTextArea(){
outputTextArea.classList.remove("is-danger");
}
function getBinarySample() {
setValueToInputEditor('01101000 01100101 01101100 01101100 01101111');
}
function getHexSample() {
setValueToInputEditor('499602d2');
}
function getOctalSample() {
setValueToInputEditor('1234567');
}
function getBinaryForNumberSample() {
setValueToInputEditor('1001');
}
function getTextSample() {
setValueToInputEditor('Hello, How are you?..');
}
function getASCIISample() {
setValueToInputEditor('72 101 108 108 111 44 32 72 111 119 32 97 114 101 32 121 111 117 63 46 46');
}
function getNumberSample() {
setValueToInputEditor('100,000,000');
}
function getDecimalSample() {
setValueToInputEditor('1234567890');
}
function getHexIPSample() {
setValueToInputEditor('7f.00.00.01');
}
function getIPSample() {
setValueToInputEditor('127.0.0.1');
}
function getHexReverseSample() {
setValueToInputEditor('0x75bcd15');
}
function allNumbersConvter(inputId, fromBaseid, toBaseid, convertDirection)
{
var str=document.getElementById(inputId).value;
var from=document.getElementById(fromBaseid).value;
var to=document.getElementById(toBaseid).value;
var selectFrom = document.getElementById("select_from");
var selectTo = document.getElementById("select_to");
document.getElementById("select_from_title").innerText = "From: "+ selectFrom.options[selectFrom.selectedIndex].text;
document.getElementById("select_to_title").innerText = "To: "+ selectTo.options[selectTo.selectedIndex].text;
//convertDirection by default is Left(From) To (Right)To
convertDirection = typeof convertDirection !== 'undefined' ? convertDirection : "lefttoright";
console.log("convertDirection: " + convertDirection);
if(convertDirection=="lefttoright"){
var result=convertFromBaseToBase(str,from,to);
console.log(result);
document.getElementById("output_to").value = result;
}
else
{
var result=convertFromBaseToBase(str,from,to);
document.getElementById("input_from").value = result;
}
}
Raw
style.css
/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */
/* Bulma Utilities */
.button, .input, .textarea, .select select,
.pagination-link {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: calc(0.5em - 1px);
padding-left: calc(0.75em - 1px);
padding-right: calc(0.75em - 1px);
padding-top: calc(0.5em - 1px);
position: relative;
vertical-align: top;
}
.button:focus, .input:focus, .textarea:focus, .select select:focus,
.pagination-link:focus, .button:active, .input:active, .textarea:active, .select select:active,
.pagination-link:active, .is-active.button, .is-active.input, .is-active.textarea, .select select.is-active,
.is-active.pagination-link {
outline: none;
}
.button[disabled], .input[disabled], .textarea[disabled], .select select[disabled],
.pagination-link[disabled] {
cursor: not-allowed;
}
.button, .file,
.pagination-link, .tabs {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select:not(.is-multiple):not(.is-loading)::after, .navbar-link:not(.is-arrowless)::after {
border: 3px solid transparent;
border-radius: 2px;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: 0.625em;
margin-top: -0.4375em;
pointer-events: none;
position: absolute;
top: 50%;
transform: rotate(-45deg);
transform-origin: center;
width: 0.625em;
}
.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .title:not(:last-child),
.subtitle:not(:last-child), .block:not(:last-child), .level:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child) {
margin-bottom: 1.5rem;
}
.delete, .modal-close {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-appearance: none;
-webkit-appearance: none;
background-color: rgba(10, 10, 10, 0.2);
border: none;
border-radius: 9999px;
cursor: pointer;
pointer-events: auto;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
font-size: 0;
height: 20px;
max-height: 20px;
max-width: 20px;
min-height: 20px;
min-width: 20px;
outline: none;
position: relative;
vertical-align: top;
width: 20px;
}
.delete::before, .modal-close::before, .delete::after, .modal-close::after {
background-color: white;
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform-origin: center center;
}
.delete::before, .modal-close::before {
height: 2px;
width: 50%;
}
.delete::after, .modal-close::after {
height: 50%;
width: 2px;
}
.delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus {
background-color: rgba(10, 10, 10, 0.3);
}
.delete:active, .modal-close:active {
background-color: rgba(10, 10, 10, 0.4);
}
.is-small.delete, .is-small.modal-close {
height: 16px;
max-height: 16px;
max-width: 16px;
min-height: 16px;
min-width: 16px;
width: 16px;
}
.is-medium.delete, .is-medium.modal-close {
height: 24px;
max-height: 24px;
max-width: 24px;
min-height: 24px;
min-width: 24px;
width: 24px;
}
.is-large.delete, .is-large.modal-close {
height: 32px;
max-height: 32px;
max-width: 32px;
min-height: 32px;
min-width: 32px;
width: 32px;
}
.button.is-loading::after, .select.is-loading::after, .control.is-loading::after {
-webkit-animation: spinAround 500ms infinite linear;
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb;
border-radius: 9999px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
position: relative;
width: 1em;
}
.modal, .modal-background {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.navbar-burger {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
color: currentColor;
font-family: inherit;
font-size: 1em;
margin: 0;
padding: 0;
}
/* Bulma Base */
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
margin: 0;
}
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
img,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
td:not([align]),
th:not([align]) {
text-align: inherit;
}
html {
background-color: white;
font-size: 16px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: 300px;
overflow-x: hidden;
overflow-y: scroll;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
article,
aside,
figure,
footer,
header,
section {
display: block;
}
body,
button,
input,
select,
textarea {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
code,
pre {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: auto;
font-family: monospace;
}
body {
color: #4a4a4a;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
}
a {
color: #485fc7;
cursor: pointer;
text-decoration: none;
}
a strong {
color: currentColor;
}
a:hover {
color: #363636;
}
code {
background-color: whitesmoke;
color: #da1039;
font-size: 0.875em;
font-weight: normal;
padding: 0.25em 0.5em 0.25em;
}
hr {
background-color: whitesmoke;
border: none;
display: block;
height: 2px;
margin: 1.5rem 0;
}
img {
height: auto;
max-width: 100%;
}
input[type="checkbox"],
input[type="radio"] {
vertical-align: baseline;
}
small {
font-size: 0.875em;
}
span {
font-style: inherit;
font-weight: inherit;
}
strong {
color: #363636;
font-weight: 700;
}
pre {
-webkit-overflow-scrolling: touch;
background-color: whitesmoke;
color: #4a4a4a;
font-size: 0.875em;
overflow-x: auto;
padding: 1.25rem 1.5rem;
white-space: pre;
word-wrap: normal;
}
pre code {
background-color: transparent;
color: currentColor;
font-size: 1em;
padding: 0;
}
table td,
table th {
vertical-align: top;
}
table td:not([align]),
table th:not([align]) {
text-align: inherit;
}
table th {
color: #363636;
}
@-webkit-keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
/* Bulma Elements */
.box {
background-color: white;
border-radius: 6px;
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
color: #4a4a4a;
display: block;
padding: 1.25rem;
}
a.box:hover, a.box:focus {
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #485fc7;
}
a.box:active {
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #485fc7;
}
.button {
background-color: white;
border-color: #dbdbdb;
border-width: 1px;
color: #363636;
cursor: pointer;
justify-content: center;
padding-bottom: calc(0.5em - 1px);
padding-left: 1em;
padding-right: 1em;
padding-top: calc(0.5em - 1px);
text-align: center;
white-space: nowrap;
}
.button strong {
color: inherit;
}
.button .icon, .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large {
height: 1.5em;
width: 1.5em;
}
.button .icon:first-child:not(:last-child) {
margin-left: calc(-0.5em - 1px);
margin-right: 0.25em;
}
.button .icon:last-child:not(:first-child) {
margin-left: 0.25em;
margin-right: calc(-0.5em - 1px);
}
.button .icon:first-child:last-child {
margin-left: calc(-0.5em - 1px);
margin-right: calc(-0.5em - 1px);
}
.button:hover {
border-color: #b5b5b5;
color: #363636;
}
.button:focus {
border-color: #485fc7;
color: #363636;
}
.button:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}
.button:active, .button.is-active {
border-color: #4a4a4a;
color: #363636;
}
.button.is-text {
background-color: transparent;
border-color: transparent;
color: #4a4a4a;
text-decoration: underline;
}
.button.is-text:hover, .button.is-text:focus {
background-color: whitesmoke;
color: #363636;
}
.button.is-text:active, .button.is-text.is-active {
background-color: #e8e8e8;
color: #363636;
}
.button.is-text[disabled] {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.button.is-white {
background-color: white;
border-color: transparent;
color: #0a0a0a;
}
.button.is-white:hover {
background-color: #f9f9f9;
border-color: transparent;
color: #0a0a0a;
}
.button.is-white:focus {
border-color: transparent;
color: #0a0a0a;
}
.button.is-white:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
}
.button.is-white:active, .button.is-white.is-active {
background-color: #f2f2f2;
border-color: transparent;
color: #0a0a0a;
}
.button.is-white[disabled] {
background-color: white;
border-color: transparent;
box-shadow: none;
}
.button.is-white.is-loading::after {
border-color: transparent transparent #0a0a0a #0a0a0a !important;
}
.button.is-light {
background-color: whitesmoke;
border-color: transparent;
color: rgba(0, 0, 0, 0.7);
}
.button.is-light:hover {
background-color: #eeeeee;
border-color: transparent;
color: rgba(0, 0, 0, 0.7);
}
.button.is-light:focus {
border-color: transparent;
color: rgba(0, 0, 0, 0.7);
}
.button.is-light:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
}
.button.is-light:active, .button.is-light.is-active {
background-color: #e8e8e8;
border-color: transparent;
color: rgba(0, 0, 0, 0.7);
}
.button.is-light[disabled] {
background-color: whitesmoke;
border-color: transparent;
box-shadow: none;
}
.button.is-light.is-loading::after {
border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important;
}
.button.is-dark {
background-color: #363636;
border-color: transparent;
color: #fff;
}
.button.is-dark:hover {
background-color: #2f2f2f;
border-color: transparent;
color: #fff;
}
.button.is-dark:focus {
border-color: transparent;
color: #fff;
}
.button.is-dark:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
}
.button.is-dark:active, .button.is-dark.is-active {
background-color: #292929;
border-color: transparent;
color: #fff;
}
.button.is-dark[disabled] {
background-color: #363636;
border-color: transparent;
box-shadow: none;
}
.button.is-dark.is-loading::after {
border-color: transparent transparent #fff #fff !important;
}
.button.is-primary {
background-color: #00d1b2;
border-color: transparent;
color: #fff;
}
.button.is-primary:hover {
background-color: #00c4a7;
border-color: transparent;
color: #fff;
}
.button.is-primary:focus {
border-color: transparent;
color: #fff;
}
.button.is-primary:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
}
.button.is-primary:active, .button.is-primary.is-active {
background-color: #00b89c;
border-color: transparent;
color: #fff;
}
.button.is-primary[disabled] {
background-color: #00d1b2;
border-color: transparent;
box-shadow: none;
}
.button.is-primary.is-loading::after {
border-color: transparent transparent #fff #fff !important;
}
.button.is-primary.is-light {
background-color: #ebfffc;
color: #00947e;
}
.button.is-primary.is-light:hover {
background-color: #defffa;
border-color: transparent;
color: #00947e;
}
.button.is-primary.is-light:active, .button.is-primary.is-light.is-active {
background-color: #d1fff8;
border-color: transparent;
color: #00947e;
}
.button.is-link {
background-color: #485fc7;
border-color: transparent;
color: #fff;
}
.button.is-link:hover {
background-color: #3e56c4;
border-color: transparent;
color: #fff;
}
.button.is-link:focus {
border-color: transparent;
color: #fff;
}
.button.is-link:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}
.button.is-link:active, .button.is-link.is-active {
background-color: #3a51bb;
border-color: transparent;
color: #fff;
}
.button.is-link[disabled] {
background-color: #485fc7;
border-color: transparent;
box-shadow: none;
}
.button.is-link.is-loading::after {
border-color: transparent transparent #fff #fff !important;
}
.button.is-link.is-light {
background-color: #eff1fa;
color: #3850b7;
}
.button.is-link.is-light:hover {
background-color: #e6e9f7;
border-color: transparent;
color: #3850b7;
}
.button.is-link.is-light:active, .button.is-link.is-light.is-active {
background-color: #dce0f4;
border-color: transparent;
color: #3850b7;
}
.button.is-info {
background-color: #3e8ed0;
border-color: transparent;
color: #fff;
}
.button.is-info:hover {
background-color: #3488ce;
border-color: transparent;
color: #fff;
}
.button.is-info:focus {
border-color: transparent;
color: #fff;
}
.button.is-info:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25);
}
.button.is-info:active, .button.is-info.is-active {
background-color: #3082c5;
border-color: transparent;
color: #fff;
}
.button.is-info[disabled] {
background-color: #3e8ed0;
border-color: transparent;
box-shadow: none;
}
.button.is-info.is-loading::after {
border-color: transparent transparent #fff #fff !important;
}
.button.is-info.is-light {
background-color: #eff5fb;
color: #296fa8;
}
.button.is-info.is-light:hover {
background-color: #e4eff9;
border-color: transparent;
color: #296fa8;
}
.button.is-info.is-light:active, .button.is-info.is-light.is-active {
background-color: #dae9f6;
border-color: transparent;
color: #296fa8;
}
.button.is-success {
background-color: #48c78e;
border-color: transparent;
color: #fff;
}
.button.is-success:hover {
background-color: #3ec487;
border-color: transparent;
color: #fff;
}
.button.is-success:focus {
border-color: transparent;
color: #fff;
}
.button.is-success:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25);
}
.button.is-success:active, .button.is-success.is-active {
background-color: #3abb81;
border-color: transparent;
color: #fff;
}
.button.is-success[disabled] {
background-color: #48c78e;
border-color: transparent;
box-shadow: none;
}
.button.is-success.is-loading::after {
border-color: transparent transparent #fff #fff !important;
}
.button.is-success.is-light {
background-color: #effaf5;
color: #257953;
}
.button.is-success.is-light:hover {
background-color: #e6f7ef;
border-color: transparent;
color: #257953;
}
.button.is-success.is-light:active, .button.is-success.is-light.is-active {
background-color: #dcf4e9;
border-color: transparent;
color: #257953;
}
.button.is-danger {
background-color: #f14668;
border-color: transparent;
color: #fff;
}
.button.is-danger:hover {
background-color: #f03a5f;
border-color: transparent;
color: #fff;
}
.button.is-danger:focus {
border-color: transparent;
color: #fff;
}
.button.is-danger:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25);
}
.button.is-danger:active, .button.is-danger.is-active {
background-color: #ef2e55;
border-color: transparent;
color: #fff;
}
.button.is-danger[disabled] {
background-color: #f14668;
border-color: transparent;
box-shadow: none;
}
.button.is-danger.is-loading::after {
border-color: transparent transparent #fff #fff !important;
}
.button.is-danger.is-light {
background-color: #feecf0;
color: #cc0f35;
}
.button.is-danger.is-light:hover {
background-color: #fde0e6;
border-color: transparent;
color: #cc0f35;
}
.button.is-danger.is-light:active, .button.is-danger.is-light.is-active {
background-color: #fcd4dc;
border-color: transparent;
color: #cc0f35;
}
.button.is-small {
font-size: 0.75rem;
}
.button.is-small:not(.is-rounded) {
border-radius: 2px;
}
.button.is-normal {
font-size: 1rem;
}
.button.is-medium {
font-size: 1.25rem;
}
.button.is-large {
font-size: 1.5rem;
}
.button[disabled] {
background-color: white;
border-color: #dbdbdb;
box-shadow: none;
opacity: 0.5;
}
.button.is-fullwidth {
display: flex;
width: 100%;
}
.button.is-loading {
color: transparent !important;
pointer-events: none;
}
.button.is-loading::after {
position: absolute;
left: calc(50% - (1em * 0.5));
top: calc(50% - (1em * 0.5));
position: absolute !important;
}
.buttons {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.buttons .button {
margin-bottom: 0.5rem;
}
.buttons .button:not(:last-child):not(.is-fullwidth) {
margin-right: 0.5rem;
}
.buttons:last-child {
margin-bottom: -0.5rem;
}
.buttons:not(:last-child) {
margin-bottom: 1rem;
}
.buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large) {
font-size: 1.25rem;
}
.buttons.has-addons .button:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.buttons.has-addons .button:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
margin-right: -1px;
}
.buttons.has-addons .button:last-child {
margin-right: 0;
}
.buttons.has-addons .button:hover {
z-index: 2;
}
.buttons.has-addons .button:focus, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active {
z-index: 3;
}
.buttons.has-addons .button:focus:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover {
z-index: 4;
}
.buttons.has-addons .button.is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
.buttons.is-centered {
justify-content: center;
}
.buttons.is-centered:not(.has-addons) .button:not(.is-fullwidth) {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.buttons.is-right {
justify-content: flex-end;
}
.buttons.is-right:not(.has-addons) .button:not(.is-fullwidth) {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.container {
flex-grow: 1;
margin: 0 auto;
position: relative;
width: auto;
}
.container.is-fluid {
max-width: none !important;
padding-left: 32px;
padding-right: 32px;
width: 100%;
}
@media screen and (min-width: 1024px) {
.container {
max-width: 960px;
}
}
@media screen and (min-width: 1216px) {
.container:not(.is-max-desktop) {
max-width: 1152px;
}
}
@media screen and (min-width: 1408px) {
.container:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: 1344px;
}
}
.content li + li {
margin-top: 0.25em;
}
.content p:not(:last-child),
.content dl:not(:last-child),
.content ol:not(:last-child),
.content ul:not(:last-child),
.content blockquote:not(:last-child),
.content pre:not(:last-child),
.content table:not(:last-child) {
margin-bottom: 1em;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
color: #363636;
font-weight: 600;
line-height: 1.125;
}
.content h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
.content h1:not(:first-child) {
margin-top: 1em;
}
.content h2 {
font-size: 1.75em;
margin-bottom: 0.5714em;
}
.content h2:not(:first-child) {
margin-top: 1.1428em;
}
.content h3 {
font-size: 1.5em;
margin-bottom: 0.6666em;
}
.content h3:not(:first-child) {
margin-top: 1.3333em;
}
.content h4 {
font-size: 1.25em;
margin-bottom: 0.8em;
}
.content h5 {
font-size: 1.125em;
margin-bottom: 0.8888em;
}
.content h6 {
font-size: 1em;
margin-bottom: 1em;
}
.content blockquote {
background-color: whitesmoke;
border-left: 5px solid #dbdbdb;
padding: 1.25em 1.5em;
}
.content ol {
list-style-position: outside;
margin-left: 2em;
margin-top: 1em;
}
.content ol:not([type]) {
list-style-type: decimal;
}
.content ul {
list-style: disc outside;
margin-left: 2em;
margin-top: 1em;
}
.content ul ul {
list-style-type: circle;
margin-top: 0.5em;
}
.content ul ul ul {
list-style-type: square;
}
.content dd {
margin-left: 2em;
}
.content figure {
margin-left: 2em;
margin-right: 2em;
text-align: center;
}
.content figure:not(:first-child) {
margin-top: 2em;
}
.content figure:not(:last-child) {
margin-bottom: 2em;
}
.content figure img {
display: inline-block;
}
.content figure figcaption {
font-style: italic;
}
.content pre {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
padding: 1.25em 1.5em;
white-space: pre;
word-wrap: normal;
}
.content sup,
.content sub {
font-size: 75%;
}
.content table {
width: 100%;
}
.content table td,
.content table th {
border: 1px solid #dbdbdb;
border-width: 0 0 1px;
padding: 0.5em 0.75em;
vertical-align: top;
}
.content table th {
color: #363636;
}
.content table th:not([align]) {
text-align: inherit;
}
.content table thead td,
.content table thead th {
border-width: 0 0 2px;
color: #363636;
}
.content table tfoot td,
.content table tfoot th {
border-width: 2px 0 0;
color: #363636;
}
.content table tbody tr:last-child td,
.content table tbody tr:last-child th {
border-bottom-width: 0;
}
.content .tabs li + li {
margin-top: 0;
}
.content.is-small {
font-size: 0.75rem;
}
.content.is-normal {
font-size: 1rem;
}
.content.is-medium {
font-size: 1.25rem;
}
.content.is-large {
font-size: 1.5rem;
}
.icon {
align-items: center;
display: inline-flex;
justify-content: center;
height: 1.5rem;
width: 1.5rem;
}
.icon.is-small {
height: 1rem;
width: 1rem;
}
.icon.is-medium {
height: 2rem;
width: 2rem;
}
.icon.is-large {
height: 3rem;
width: 3rem;
}
.image {
display: block;
position: relative;
}
.image img {
display: block;
height: auto;
width: 100%;
}
.image.is-fullwidth {
width: 100%;
}
.notification {
background-color: whitesmoke;
border-radius: 4px;
position: relative;
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
}
.notification a:not(.button):not(.dropdown-item) {
color: currentColor;
text-decoration: underline;
}
.notification strong {
color: currentColor;
}
.notification code,
.notification pre {
background: white;
}
.notification pre code {
background: transparent;
}
.notification > .delete {
right: 0.5rem;
position: absolute;
top: 0.5rem;
}
.notification .title,
.notification .subtitle,
.notification .content {
color: currentColor;
}
.notification.is-white {
background-color: white;
color: #0a0a0a;
}
.notification.is-light {
background-color: whitesmoke;
color: rgba(0, 0, 0, 0.7);
}
.notification.is-dark {
background-color: #363636;
color: #fff;
}
.notification.is-primary {
background-color: #00d1b2;
color: #fff;
}
.notification.is-primary.is-light {
background-color: #ebfffc;
color: #00947e;
}
.notification.is-link {
background-color: #485fc7;
color: #fff;
}
.notification.is-link.is-light {
background-color: #eff1fa;
color: #3850b7;
}
.notification.is-info {
background-color: #3e8ed0;
color: #fff;
}
.notification.is-info.is-light {
background-color: #eff5fb;
color: #296fa8;
}
.notification.is-success {
background-color: #48c78e;
color: #fff;
}
.notification.is-success.is-light {
background-color: #effaf5;
color: #257953;
}
.notification.is-danger {
background-color: #f14668;
color: #fff;
}
.notification.is-danger.is-light {
background-color: #feecf0;
color: #cc0f35;
}
.progress {
-moz-appearance: none;
-webkit-appearance: none;
border: none;
border-radius: 9999px;
display: block;
height: 1rem;
overflow: hidden;
padding: 0;
width: 100%;
}
.progress::-webkit-progress-bar {
background-color: #ededed;
}
.progress::-webkit-progress-value {
background-color: #4a4a4a;
}
.progress::-moz-progress-bar {
background-color: #4a4a4a;
}
.progress::-ms-fill {
background-color: #4a4a4a;
border: none;
}
.progress.is-white::-webkit-progress-value {
background-color: white;
}
.progress.is-white::-moz-progress-bar {
background-color: white;
}
.progress.is-white::-ms-fill {
background-color: white;
}
.progress.is-white:indeterminate {
background-image: linear-gradient(to right, white 30%, #ededed 30%);
}
.progress.is-light::-webkit-progress-value {
background-color: whitesmoke;
}
.progress.is-light::-moz-progress-bar {
background-color: whitesmoke;
}
.progress.is-light::-ms-fill {
background-color: whitesmoke;
}
.progress.is-light:indeterminate {
background-image: linear-gradient(to right, whitesmoke 30%, #ededed 30%);
}
.progress.is-dark::-webkit-progress-value {
background-color: #363636;
}
.progress.is-dark::-moz-progress-bar {
background-color: #363636;
}
.progress.is-dark::-ms-fill {
background-color: #363636;
}
.progress.is-dark:indeterminate {
background-image: linear-gradient(to right, #363636 30%, #ededed 30%);
}
.progress.is-primary::-webkit-progress-value {
background-color: #00d1b2;
}
.progress.is-primary::-moz-progress-bar {
background-color: #00d1b2;
}
.progress.is-primary::-ms-fill {
background-color: #00d1b2;
}
.progress.is-primary:indeterminate {
background-image: linear-gradient(to right, #00d1b2 30%, #ededed 30%);
}
.progress.is-link::-webkit-progress-value {
background-color: #485fc7;
}
.progress.is-link::-moz-progress-bar {
background-color: #485fc7;
}
.progress.is-link::-ms-fill {
background-color: #485fc7;
}
.progress.is-link:indeterminate {
background-image: linear-gradient(to right, #485fc7 30%, #ededed 30%);
}
.progress.is-info::-webkit-progress-value {
background-color: #3e8ed0;
}
.progress.is-info::-moz-progress-bar {
background-color: #3e8ed0;
}
.progress.is-info::-ms-fill {
background-color: #3e8ed0;
}
.progress.is-info:indeterminate {
background-image: linear-gradient(to right, #3e8ed0 30%, #ededed 30%);
}
.progress.is-success::-webkit-progress-value {
background-color: #48c78e;
}
.progress.is-success::-moz-progress-bar {
background-color: #48c78e;
}
.progress.is-success::-ms-fill {
background-color: #48c78e;
}
.progress.is-success:indeterminate {
background-image: linear-gradient(to right, #48c78e 30%, #ededed 30%);
}
.progress.is-danger::-webkit-progress-value {
background-color: #f14668;
}
.progress.is-danger::-moz-progress-bar {
background-color: #f14668;
}
.progress.is-danger::-ms-fill {
background-color: #f14668;
}
.progress.is-danger:indeterminate {
background-image: linear-gradient(to right, #f14668 30%, #ededed 30%);
}
.progress:indeterminate {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: moveIndeterminate;
animation-name: moveIndeterminate;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background-color: #ededed;
background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
background-position: top left;
background-repeat: no-repeat;
background-size: 150% 150%;
}
.progress:indeterminate::-webkit-progress-bar {
background-color: transparent;
}
.progress:indeterminate::-moz-progress-bar {
background-color: transparent;
}
.progress:indeterminate::-ms-fill {
animation-name: none;
}
.progress.is-small {
height: 0.75rem;
}
.progress.is-medium {
height: 1.25rem;
}
.progress.is-large {
height: 1.5rem;
}
@-webkit-keyframes moveIndeterminate {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
@keyframes moveIndeterminate {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
.table {
background-color: white;
color: #363636;
}
.table td,
.table th {
border: 1px solid #dbdbdb;
border-width: 0 0 1px;
padding: 0.5em 0.75em;
vertical-align: top;
}
.table td.is-white,
.table th.is-white {
background-color: white;
border-color: white;
color: #0a0a0a;
}
.table td.is-light,
.table th.is-light {
background-color: whitesmoke;
border-color: whitesmoke;
color: rgba(0, 0, 0, 0.7);
}
.table td.is-dark,
.table th.is-dark {
background-color: #363636;
border-color: #363636;
color: #fff;
}
.table td.is-primary,
.table th.is-primary {
background-color: #00d1b2;
border-color: #00d1b2;
color: #fff;
}
.table td.is-link,
.table th.is-link {
background-color: #485fc7;
border-color: #485fc7;
color: #fff;
}
.table td.is-info,
.table th.is-info {
background-color: #3e8ed0;
border-color: #3e8ed0;
color: #fff;
}
.table td.is-success,
.table th.is-success {
background-color: #48c78e;
border-color: #48c78e;
color: #fff;
}
.table td.is-danger,
.table th.is-danger {
background-color: #f14668;
border-color: #f14668;
color: #fff;
}
.table td.is-narrow,
.table th.is-narrow {
white-space: nowrap;
width: 1%;
}
.table th {
color: #363636;
}
.table th:not([align]) {
text-align: inherit;
}
.table thead {
background-color: transparent;
}
.table thead td,
.table thead th {
border-width: 0 0 2px;
color: #363636;
}
.table tfoot {
background-color: transparent;
}
.table tfoot td,
.table tfoot th {
border-width: 2px 0 0;
color: #363636;
}
.table tbody {
background-color: transparent;
}
.table tbody tr:last-child td,
.table tbody tr:last-child th {
border-bottom-width: 0;
}
.table.is-fullwidth {
width: 100%;
}
.table.is-hoverable tbody tr:not(.is-selected):hover {
background-color: #fafafa;
}
.table.is-narrow td,
.table.is-narrow th {
padding: 0.25em 0.5em;
}
.tags {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.tags .tag {
margin-bottom: 0.5rem;
}
.tags .tag:not(:last-child) {
margin-right: 0.5rem;
}
.tags:last-child {
margin-bottom: -0.5rem;
}
.tags:not(:last-child) {
margin-bottom: 1rem;
}
.tags.are-medium .tag:not(.is-normal):not(.is-large) {
font-size: 1rem;
}
.tags.is-centered {
justify-content: center;
}
.tags.is-centered .tag {
margin-right: 0.25rem;
margin-left: 0.25rem;
}
.tags.is-right {
justify-content: flex-end;
}
.tags.is-right .tag:not(:first-child) {
margin-left: 0.5rem;
}
.tags.is-right .tag:not(:last-child) {
margin-right: 0;
}
.tags.has-addons .tag {
margin-right: 0;
}
.tags.has-addons .tag:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tags.has-addons .tag:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.tag:not(body) {
align-items: center;
background-color: whitesmoke;
border-radius: 4px;
color: #4a4a4a;
display: inline-flex;
font-size: 0.75rem;
height: 2em;
justify-content: center;
line-height: 1.5;
padding-left: 0.75em;
padding-right: 0.75em;
white-space: nowrap;
}
.tag:not(body) .delete {
margin-left: 0.25rem;
margin-right: -0.375rem;
}
.tag:not(body).is-white {
background-color: white;
color: #0a0a0a;
}
.tag:not(body).is-light {
background-color: whitesmoke;
color: rgba(0, 0, 0, 0.7);
}
.tag:not(body).is-dark {
background-color: #363636;
color: #fff;
}
.tag:not(body).is-primary {
background-color: #00d1b2;
color: #fff;
}
.tag:not(body).is-primary.is-light {
background-color: #ebfffc;
color: #00947e;
}
.tag:not(body).is-link {
background-color: #485fc7;
color: #fff;
}
.tag:not(body).is-link.is-light {
background-color: #eff1fa;
color: #3850b7;
}
.tag:not(body).is-info {
background-color: #3e8ed0;
color: #fff;
}
.tag:not(body).is-info.is-light {
background-color: #eff5fb;
color: #296fa8;
}
.tag:not(body).is-success {
background-color: #48c78e;
color: #fff;
}
.tag:not(body).is-success.is-light {
background-color: #effaf5;
color: #257953;
}
.tag:not(body).is-danger {
background-color: #f14668;
color: #fff;
}
.tag:not(body).is-danger.is-light {
background-color: #feecf0;
color: #cc0f35;
}
.tag:not(body).is-normal {
font-size: 0.75rem;
}
.tag:not(body).is-medium {
font-size: 1rem;
}
.tag:not(body).is-large {
font-size: 1.25rem;
}
.tag:not(body) .icon:first-child:not(:last-child) {
margin-left: -0.375em;
margin-right: 0.1875em;
}
.tag:not(body) .icon:last-child:not(:first-child) {
margin-left: 0.1875em;
margin-right: -0.375em;
}
.tag:not(body) .icon:first-child:last-child {
margin-left: -0.375em;
margin-right: -0.375em;
}
a.tag:hover {
text-decoration: underline;
}
.title,
.subtitle {
word-break: break-word;
}
.title em,
.title span,
.subtitle em,
.subtitle span {
font-weight: inherit;
}
.title sub,
.subtitle sub {
font-size: 0.75em;
}
.title sup,
.subtitle sup {
font-size: 0.75em;
}
.title .tag,
.subtitle .tag {
vertical-align: middle;
}
.title {
color: #363636;
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
}
.title strong {
color: inherit;
font-weight: inherit;
}
.title:not(.is-spaced) + .subtitle {
margin-top: -1.25rem;
}
.title.is-1 {
font-size: 3rem;
}
.title.is-3 {
font-size: 2rem;
}
.title.is-4 {
font-size: 1.5rem;
}
.title.is-5 {
font-size: 1.25rem;
}
.title.is-6 {
font-size: 1rem;
}
.title.is-7 {
font-size: 0.75rem;
}
.subtitle {
color: #4a4a4a;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.25;
}
.subtitle strong {
color: #363636;
font-weight: 600;
}
.subtitle:not(.is-spaced) + .title {
margin-top: -1.25rem;
}
.subtitle.is-1 {
font-size: 3rem;
}
.subtitle.is-3 {
font-size: 2rem;
}
.subtitle.is-4 {
font-size: 1.5rem;
}
.subtitle.is-5 {
font-size: 1.25rem;
}
.subtitle.is-6 {
font-size: 1rem;
}
.subtitle.is-7 {
font-size: 0.75rem;
}
.number {
align-items: center;
background-color: whitesmoke;
border-radius: 9999px;
display: inline-flex;
font-size: 1.25rem;
height: 2em;
justify-content: center;
margin-right: 1.5rem;
min-width: 2.5em;
padding: 0.25rem 0.5rem;
text-align: center;
vertical-align: top;
}
/* Bulma Form */
.input, .textarea, .select select {
background-color: white;
border-color: #dbdbdb;
border-radius: 4px;
color: #363636;
}
.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder {
color: rgba(54, 54, 54, 0.3);
}
.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder {
color: rgba(54, 54, 54, 0.3);
}
.input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder {
color: rgba(54, 54, 54, 0.3);
}
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder {
color: rgba(54, 54, 54, 0.3);
}
.input:hover, .textarea:hover, .select select:hover {
border-color: #b5b5b5;
}
.input:focus, .textarea:focus, .select select:focus, .input:active, .textarea:active, .select select:active, .is-active.input, .is-active.textarea, .select select.is-active {
border-color: #485fc7;
box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}
.input[disabled], .textarea[disabled], .select select[disabled] {
background-color: whitesmoke;
border-color: whitesmoke;
box-shadow: none;
color: #7a7a7a;
}
.input[disabled]::-moz-placeholder, .textarea[disabled]::-moz-placeholder, .select select[disabled]::-moz-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input[disabled]::-webkit-input-placeholder, .textarea[disabled]::-webkit-input-placeholder, .select select[disabled]::-webkit-input-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input[disabled]:-moz-placeholder, .textarea[disabled]:-moz-placeholder, .select select[disabled]:-moz-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input[disabled]:-ms-input-placeholder, .textarea[disabled]:-ms-input-placeholder, .select select[disabled]:-ms-input-placeholder {
color: rgba(122, 122, 122, 0.3);
}
.input, .textarea {
box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
max-width: 100%;
width: 100%;
}
.input[readonly], .textarea[readonly] {
box-shadow: none;
}
.is-white.input, .is-white.textarea {
border-color: white;
}
.is-white.input:focus, .is-white.textarea:focus, .is-white.input:active, .is-white.textarea:active, .is-white.is-active.input, .is-white.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
}
.is-light.input, .is-light.textarea {
border-color: whitesmoke;
}
.is-light.input:focus, .is-light.textarea:focus, .is-light.input:active, .is-light.textarea:active, .is-light.is-active.input, .is-light.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
}
.is-dark.input, .is-dark.textarea {
border-color: #363636;
}
.is-dark.input:focus, .is-dark.textarea:focus, .is-dark.input:active, .is-dark.textarea:active, .is-dark.is-active.input, .is-dark.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
}
.is-primary.input, .is-primary.textarea {
border-color: #00d1b2;
}
.is-primary.input:focus, .is-primary.textarea:focus, .is-primary.input:active, .is-primary.textarea:active, .is-primary.is-active.input, .is-primary.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
}
.is-link.input, .is-link.textarea {
border-color: #485fc7;
}
.is-link.input:focus, .is-link.textarea:focus, .is-link.input:active, .is-link.textarea:active, .is-link.is-active.input, .is-link.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}
.is-info.input, .is-info.textarea {
border-color: #3e8ed0;
}
.is-info.input:focus, .is-info.textarea:focus, .is-info.input:active, .is-info.textarea:active, .is-info.is-active.input, .is-info.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25);
}
.is-success.input, .is-success.textarea {
border-color: #48c78e;
}
.is-success.input:focus, .is-success.textarea:focus, .is-success.input:active, .is-success.textarea:active, .is-success.is-active.input, .is-success.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25);
}
.is-danger.input, .is-danger.textarea {
border-color: #f14668;
}
.is-danger.input:focus, .is-danger.textarea:focus, .is-danger.input:active, .is-danger.textarea:active, .is-danger.is-active.input, .is-danger.is-active.textarea {
box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25);
}
.is-small.input, .is-small.textarea {
border-radius: 2px;
font-size: 0.75rem;
}
.is-medium.input, .is-medium.textarea {
font-size: 1.25rem;
}
.is-large.input, .is-large.textarea {
font-size: 1.5rem;
}
.is-fullwidth.input, .is-fullwidth.textarea {
display: block;
width: 100%;
}
.textarea {
display: block;
max-width: 100%;
min-width: 100%;
padding: calc(0.75em - 1px);
resize: vertical;
}
.textarea:not([rows]) {
max-height: 40em;
min-height: 8em;
}
.textarea[rows] {
height: initial;
}
.checkbox, .radio {
cursor: pointer;
display: inline-block;
line-height: 1.25;
position: relative;
}
.checkbox input, .radio input {
cursor: pointer;
}
.checkbox:hover, .radio:hover {
color: #363636;
}
.checkbox[disabled], .radio[disabled],
.checkbox input[disabled],
.radio input[disabled] {
color: #7a7a7a;
cursor: not-allowed;
}
.radio + .radio {
margin-left: 0.5em;
}
.select {
display: inline-block;
max-width: 100%;
position: relative;
vertical-align: top;
}
.select:not(.is-multiple) {
height: 2.5em;
}
.select:not(.is-multiple):not(.is-loading)::after {
border-color: #485fc7;
right: 1.125em;
z-index: 4;
}
.select select {
cursor: pointer;
display: block;
font-size: 1em;
max-width: 100%;
outline: none;
}
.select select::-ms-expand {
display: none;
}
.select select[disabled]:hover {
border-color: whitesmoke;
}
.select select:not([multiple]) {
padding-right: 2.5em;
}
.select select[multiple] {
height: auto;
padding: 0;
}
.select select[multiple] option {
padding: 0.5em 1em;
}
.select:not(.is-multiple):not(.is-loading):hover::after {
border-color: #363636;
}
.select.is-white:not(:hover)::after {
border-color: white;
}
.select.is-white select {
border-color: white;
}
.select.is-white select:hover {
border-color: #f2f2f2;
}
.select.is-white select:focus, .select.is-white select:active, .select.is-white select.is-active {
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
}
.select.is-light:not(:hover)::after {
border-color: whitesmoke;
}
.select.is-light select {
border-color: whitesmoke;
}
.select.is-light select:hover {
border-color: #e8e8e8;
}
.select.is-light select:focus, .select.is-light select:active, .select.is-light select.is-active {
box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
}
.select.is-dark:not(:hover)::after {
border-color: #363636;
}
.select.is-dark select {
border-color: #363636;
}
.select.is-dark select:hover {
border-color: #292929;
}
.select.is-dark select:focus, .select.is-dark select:active, .select.is-dark select.is-active {
box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
}
.select.is-primary:not(:hover)::after {
border-color: #00d1b2;
}
.select.is-primary select {
border-color: #00d1b2;
}
.select.is-primary select:hover {
border-color: #00b89c;
}
.select.is-primary select:focus, .select.is-primary select:active, .select.is-primary select.is-active {
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
}
.select.is-link:not(:hover)::after {
border-color: #485fc7;
}
.select.is-link select {
border-color: #485fc7;
}
.select.is-link select:hover {
border-color: #3a51bb;
}
.select.is-link select:focus, .select.is-link select:active, .select.is-link select.is-active {
box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}
.select.is-info:not(:hover)::after {
border-color: #3e8ed0;
}
.select.is-info select {
border-color: #3e8ed0;
}
.select.is-info select:hover {
border-color: #3082c5;
}
.select.is-info select:focus, .select.is-info select:active, .select.is-info select.is-active {
box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25);
}
.select.is-success:not(:hover)::after {
border-color: #48c78e;
}
.select.is-success select {
border-color: #48c78e;
}
.select.is-success select:hover {
border-color: #3abb81;
}
.select.is-success select:focus, .select.is-success select:active, .select.is-success select.is-active {
box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25);
}
.select.is-danger:not(:hover)::after {
border-color: #f14668;
}
.select.is-danger select {
border-color: #f14668;
}
.select.is-danger select:hover {
border-color: #ef2e55;
}
.select.is-danger select:focus, .select.is-danger select:active, .select.is-danger select.is-active {
box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25);
}
.select.is-small {
border-radius: 2px;
font-size: 0.75rem;
}
.select.is-medium {
font-size: 1.25rem;
}
.select.is-large {
font-size: 1.5rem;
}
.select.is-fullwidth {
width: 100%;
}
.select.is-fullwidth select {
width: 100%;
}
.select.is-loading::after {
margin-top: 0;
position: absolute;
right: 0.625em;
top: 0.625em;
transform: none;
}
.select.is-loading.is-small:after {
font-size: 0.75rem;
}
.select.is-loading.is-medium:after {
font-size: 1.25rem;
}
.select.is-loading.is-large:after {
font-size: 1.5rem;
}
.file {
align-items: stretch;
display: flex;
justify-content: flex-start;
position: relative;
}
.file.is-small {
font-size: 0.75rem;
}
.file.is-normal {
font-size: 1rem;
}
.file.is-medium {
font-size: 1.25rem;
}
.file.is-large {
font-size: 1.5rem;
}
.file.is-centered {
justify-content: center;
}
.file.is-right {
justify-content: flex-end;
}
.file-input {
height: 100%;
left: 0;
opacity: 0;
outline: none;
position: absolute;
top: 0;
width: 100%;
}
.label {
color: #363636;
display: block;
font-size: 1rem;
font-weight: 700;
}
.label:not(:last-child) {
margin-bottom: 0.5em;
}
.label.is-small {
font-size: 0.75rem;
}
.label.is-medium {
font-size: 1.25rem;
}
.label.is-large {
font-size: 1.5rem;
}
.help {
display: block;
font-size: 0.75rem;
margin-top: 0.25rem;
}
.help.is-white {
color: white;
}
.help.is-light {
color: whitesmoke;
}
.help.is-dark {
color: #363636;
}
.help.is-primary {
color: #00d1b2;
}
.help.is-link {
color: #485fc7;
}
.help.is-info {
color: #3e8ed0;
}
.help.is-success {
color: #48c78e;
}
.help.is-danger {
color: #f14668;
}
.field:not(:last-child) {
margin-bottom: 0.75rem;
}
.field.has-addons {
display: flex;
justify-content: flex-start;
}
.field.has-addons .control:not(:last-child) {
margin-right: -1px;
}
.field.has-addons .control:not(:first-child):not(:last-child) .button,
.field.has-addons .control:not(:first-child):not(:last-child) .input,
.field.has-addons .control:not(:first-child):not(:last-child) .select select {
border-radius: 0;
}
.field.has-addons .control:first-child:not(:only-child) .button,
.field.has-addons .control:first-child:not(:only-child) .input,
.field.has-addons .control:first-child:not(:only-child) .select select {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.field.has-addons .control:last-child:not(:only-child) .button,
.field.has-addons .control:last-child:not(:only-child) .input,
.field.has-addons .control:last-child:not(:only-child) .select select {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.field.has-addons .control .button:not([disabled]):hover,
.field.has-addons .control .input:not([disabled]):hover,
.field.has-addons .control .select select:not([disabled]):hover {
z-index: 2;
}
.field.has-addons .control .button:not([disabled]):focus, .field.has-addons .control .button:not([disabled]):active, .field.has-addons .control .button:not([disabled]).is-active,
.field.has-addons .control .input:not([disabled]):focus,
.field.has-addons .control .input:not([disabled]):active,
.field.has-addons .control .input:not([disabled]).is-active,
.field.has-addons .control .select select:not([disabled]):focus,
.field.has-addons .control .select select:not([disabled]):active,
.field.has-addons .control .select select:not([disabled]).is-active {
z-index: 3;
}
.field.has-addons .control .button:not([disabled]):focus:hover, .field.has-addons .control .button:not([disabled]):active:hover, .field.has-addons .control .button:not([disabled]).is-active:hover,
.field.has-addons .control .input:not([disabled]):focus:hover,
.field.has-addons .control .input:not([disabled]):active:hover,
.field.has-addons .control .input:not([disabled]).is-active:hover,
.field.has-addons .control .select select:not([disabled]):focus:hover,
.field.has-addons .control .select select:not([disabled]):active:hover,
.field.has-addons .control .select select:not([disabled]).is-active:hover {
z-index: 4;
}
.field.has-addons .control.is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
.field.is-grouped {
display: flex;
justify-content: flex-start;
}
.field.is-grouped > .control {
flex-shrink: 0;
}
.field.is-grouped > .control:not(:last-child) {
margin-bottom: 0;
margin-right: 0.75rem;
}
.field.is-grouped > .control.is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
@media screen and (min-width: 769px), print {
.field.is-horizontal {
display: flex;
}
}
.field-label .label {
font-size: inherit;
}
@media screen and (max-width: 768px) {
.field-label {
margin-bottom: 0.5rem;
}
}
@media screen and (min-width: 769px), print {
.field-label {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
margin-right: 1.5rem;
text-align: right;
}
.field-label.is-small {
font-size: 0.75rem;
padding-top: 0.375em;
}
.field-label.is-normal {
padding-top: 0.375em;
}
.field-label.is-medium {
font-size: 1.25rem;
padding-top: 0.375em;
}
.field-label.is-large {
font-size: 1.5rem;
padding-top: 0.375em;
}
}
.field-body .field .field {
margin-bottom: 0;
}
@media screen and (min-width: 769px), print {
.field-body {
display: flex;
flex-basis: 0;
flex-grow: 5;
flex-shrink: 1;
}
.field-body .field {
margin-bottom: 0;
}
.field-body > .field {
flex-shrink: 1;
}
.field-body > .field:not(.is-narrow) {
flex-grow: 1;
}
.field-body > .field:not(:last-child) {
margin-right: 0.75rem;
}
}
.control {
box-sizing: border-box;
clear: both;
font-size: 1rem;
position: relative;
text-align: inherit;
}
.control.has-icons-left .input:focus ~ .icon,
.control.has-icons-left .select:focus ~ .icon {
color: #4a4a4a;
}
.control.has-icons-left .input.is-small ~ .icon,
.control.has-icons-left .select.is-small ~ .icon {
font-size: 0.75rem;
}
.control.has-icons-left .input.is-medium ~ .icon,
.control.has-icons-left .select.is-medium ~ .icon {
font-size: 1.25rem;
}
.control.has-icons-left .input.is-large ~ .icon,
.control.has-icons-left .select.is-large ~ .icon {
font-size: 1.5rem;
}
.control.has-icons-left .icon {
color: #dbdbdb;
height: 2.5em;
pointer-events: none;
position: absolute;
top: 0;
width: 2.5em;
z-index: 4;
}
.control.has-icons-left .input,
.control.has-icons-left .select select {
padding-left: 2.5em;
}
.control.has-icons-left .icon.is-left {
left: 0;
}
.control.is-loading::after {
position: absolute !important;
right: 0.625em;
top: 0.625em;
z-index: 4;
}
.control.is-loading.is-small:after {
font-size: 0.75rem;
}
.control.is-loading.is-medium:after {
font-size: 1.25rem;
}
.control.is-loading.is-large:after {
font-size: 1.5rem;
}
/* Bulma Components */
.card {
background-color: white;
border-radius: 0.25rem;
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
color: #4a4a4a;
max-width: 100%;
position: relative;
}
.card-content:first-child, .card-footer:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.card-content:last-child, .card-footer:last-child {
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.card-content {
background-color: transparent;
padding: 1.5rem;
}
.card-footer {
background-color: transparent;
border-top: 1px solid #ededed;
align-items: stretch;
display: flex;
}
.card-footer-item {
align-items: center;
display: flex;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
justify-content: center;
padding: 0.75rem;
}
.card-footer-item:not(:last-child) {
border-right: 1px solid #ededed;
}
.card .media:not(:last-child) {
margin-bottom: 1.5rem;
}
.dropdown {
display: inline-flex;
position: relative;
vertical-align: top;
}
.dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
display: block;
}
.dropdown.is-right .dropdown-menu {
left: auto;
right: 0;
}
.dropdown-menu {
display: none;
left: 0;
min-width: 12rem;
padding-top: 4px;
position: absolute;
top: 100%;
z-index: 20;
}
.dropdown-content {
background-color: white;
border-radius: 4px;
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.dropdown-item {
color: #4a4a4a;
display: block;
font-size: 0.875rem;
line-height: 1.5;
padding: 0.375rem 1rem;
position: relative;
}
a.dropdown-item,
button.dropdown-item {
padding-right: 3rem;
text-align: inherit;
white-space: nowrap;
width: 100%;
}
a.dropdown-item:hover,
button.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
a.dropdown-item.is-active,
button.dropdown-item.is-active {
background-color: #485fc7;
color: #fff;
}
.dropdown-divider {
background-color: #ededed;
border: none;
display: block;
height: 1px;
margin: 0.5rem 0;
}
.level {
align-items: center;
justify-content: space-between;
}
.level code {
border-radius: 4px;
}
.level img {
display: inline-block;
vertical-align: top;
}
.level.is-mobile {
display: flex;
}
.level.is-mobile .level-left,
.level.is-mobile .level-right {
display: flex;
}
.level.is-mobile .level-left + .level-right {
margin-top: 0;
}
@media screen and (min-width: 769px), print {
.level {
display: flex;
}
}
.level-left,
.level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
.level-left {
align-items: center;
justify-content: flex-start;
}
@media screen and (max-width: 768px) {
.level-left + .level-right {
margin-top: 1.5rem;
}
}
@media screen and (min-width: 769px), print {
.level-left {
display: flex;
}
}
.level-right {
align-items: center;
justify-content: flex-end;
}
@media screen and (min-width: 769px), print {
.level-right {
display: flex;
}
}
.media {
align-items: flex-start;
display: flex;
text-align: inherit;
}
.media .content:not(:last-child) {
margin-bottom: 0.75rem;
}
.media .media {
border-top: 1px solid rgba(219, 219, 219, 0.5);
display: flex;
padding-top: 0.75rem;
}
.media .media .content:not(:last-child),
.media .media .control:not(:last-child) {
margin-bottom: 0.5rem;
}
.media .media .media {
padding-top: 0.5rem;
}
.media .media .media + .media {
margin-top: 0.5rem;
}
.media + .media {
border-top: 1px solid rgba(219, 219, 219, 0.5);
margin-top: 1rem;
padding-top: 1rem;
}
.media.is-large + .media {
margin-top: 1.5rem;
padding-top: 1.5rem;
}
.menu {
font-size: 1rem;
}
.menu.is-small {
font-size: 0.75rem;
}
.menu.is-medium {
font-size: 1.25rem;
}
.menu.is-large {
font-size: 1.5rem;
}
.menu-list {
line-height: 1.25;
}
.menu-list a {
border-radius: 2px;
color: #4a4a4a;
display: block;
padding: 0.5em 0.75em;
}
.menu-list a:hover {
background-color: whitesmoke;
color: #363636;
}
.menu-list a.is-active {
background-color: #485fc7;
color: #fff;
}
.menu-list li ul {
border-left: 1px solid #dbdbdb;
margin: 0.75em;
padding-left: 0.75em;
}
.message {
background-color: whitesmoke;
border-radius: 4px;
font-size: 1rem;
}
.message strong {
color: currentColor;
}
.message a:not(.button):not(.tag):not(.dropdown-item) {
color: currentColor;
text-decoration: underline;
}
.message.is-small {
font-size: 0.75rem;
}
.message.is-medium {
font-size: 1.25rem;
}
.message.is-large {
font-size: 1.5rem;
}
.message.is-white {
background-color: white;
}
.message.is-white .message-header {
background-color: white;
color: #0a0a0a;
}
.message.is-white .message-body {
border-color: white;
}
.message.is-light {
background-color: #fafafa;
}
.message.is-light .message-header {
background-color: whitesmoke;
color: rgba(0, 0, 0, 0.7);
}
.message.is-light .message-body {
border-color: whitesmoke;
}
.message.is-dark {
background-color: #fafafa;
}
.message.is-dark .message-header {
background-color: #363636;
color: #fff;
}
.message.is-dark .message-body {
border-color: #363636;
}
.message.is-primary {
background-color: #ebfffc;
}
.message.is-primary .message-header {
background-color: #00d1b2;
color: #fff;
}
.message.is-primary .message-body {
border-color: #00d1b2;
color: #00947e;
}
.message.is-link {
background-color: #eff1fa;
}
.message.is-link .message-header {
background-color: #485fc7;
color: #fff;
}
.message.is-link .message-body {
border-color: #485fc7;
color: #3850b7;
}
.message.is-info {
background-color: #eff5fb;
}
.message.is-info .message-header {
background-color: #3e8ed0;
color: #fff;
}
.message.is-info .message-body {
border-color: #3e8ed0;
color: #296fa8;
}
.message.is-success {
background-color: #effaf5;
}
.message.is-success .message-header {
background-color: #48c78e;
color: #fff;
}
.message.is-success .message-body {
border-color: #48c78e;
color: #257953;
}
.message.is-danger {
background-color: #feecf0;
}
.message.is-danger .message-header {
background-color: #f14668;
color: #fff;
}
.message.is-danger .message-body {
border-color: #f14668;
color: #cc0f35;
}
.message-header {
align-items: center;
background-color: #4a4a4a;
border-radius: 4px 4px 0 0;
color: #fff;
display: flex;
font-weight: 700;
justify-content: space-between;
line-height: 1.25;
padding: 0.75em 1em;
position: relative;
}
.message-header .delete {
flex-grow: 0;
flex-shrink: 0;
margin-left: 0.75em;
}
.message-header + .message-body {
border-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.message-body {
border-color: #dbdbdb;
border-radius: 4px;
border-style: solid;
border-width: 0 0 0 4px;
color: #4a4a4a;
padding: 1.25em 1.5em;
}
.message-body code,
.message-body pre {
background-color: white;
}
.message-body pre code {
background-color: transparent;
}
.modal {
align-items: center;
display: none;
flex-direction: column;
justify-content: center;
overflow: hidden;
position: fixed;
z-index: 40;
}
.modal.is-active {
display: flex;
}
.modal-background {
background-color: rgba(10, 10, 10, 0.86);
}
.modal-content,
.modal-card {
margin: 0 20px;
max-height: calc(100vh - 160px);
overflow: auto;
position: relative;
width: 100%;
}
@media screen and (min-width: 769px) {
.modal-content,
.modal-card {
margin: 0 auto;
max-height: calc(100vh - 40px);
width: 640px;
}
}
.modal-close {
background: none;
height: 40px;
position: fixed;
right: 20px;
top: 20px;
width: 40px;
}
.modal-card {
display: flex;
flex-direction: column;
max-height: calc(100vh - 40px);
overflow: hidden;
-ms-overflow-y: visible;
}
.modal-card-head,
.modal-card-foot {
align-items: center;
background-color: whitesmoke;
display: flex;
flex-shrink: 0;
justify-content: flex-start;
padding: 20px;
position: relative;
}
.modal-card-head {
border-bottom: 1px solid #dbdbdb;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.modal-card-title {
color: #363636;
flex-grow: 1;
flex-shrink: 0;
font-size: 1.5rem;
line-height: 1;
}
.modal-card-foot {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 1px solid #dbdbdb;
}
.modal-card-foot .button:not(:last-child) {
margin-right: 0.5em;
}
.modal-card-body {
-webkit-overflow-scrolling: touch;
background-color: white;
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
padding: 20px;
}
.navbar {
background-color: white;
min-height: 3.25rem;
position: relative;
z-index: 30;
}
.navbar.is-white {
background-color: white;
color: #0a0a0a;
}
.navbar.is-white .navbar-brand > .navbar-item,
.navbar.is-white .navbar-brand .navbar-link {
color: #0a0a0a;
}
.navbar.is-white .navbar-brand > a.navbar-item:focus, .navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active,
.navbar.is-white .navbar-brand .navbar-link:focus,
.navbar.is-white .navbar-brand .navbar-link:hover,
.navbar.is-white .navbar-brand .navbar-link.is-active {
background-color: #f2f2f2;
color: #0a0a0a;
}
.navbar.is-white .navbar-brand .navbar-link::after {
border-color: #0a0a0a;
}
.navbar.is-white .navbar-burger {
color: #0a0a0a;
}
@media screen and (min-width: 1024px) {
.navbar.is-white .navbar-end > .navbar-item,
.navbar.is-white .navbar-end .navbar-link {
color: #0a0a0a;
}
.navbar.is-white .navbar-end > a.navbar-item:focus,
.navbar.is-white .navbar-end > a.navbar-item:hover,
.navbar.is-white .navbar-end > a.navbar-item.is-active,
.navbar.is-white .navbar-end .navbar-link:focus,
.navbar.is-white .navbar-end .navbar-link:hover,
.navbar.is-white .navbar-end .navbar-link.is-active {
background-color: #f2f2f2;
color: #0a0a0a;
}
.navbar.is-white .navbar-end .navbar-link::after {
border-color: #0a0a0a;
}
.navbar.is-white .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-white .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-white .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #f2f2f2;
color: #0a0a0a;
}
.navbar.is-white .navbar-dropdown a.navbar-item.is-active {
background-color: white;
color: #0a0a0a;
}
}
.navbar.is-light {
background-color: whitesmoke;
color: rgba(0, 0, 0, 0.7);
}
.navbar.is-light .navbar-brand > .navbar-item,
.navbar.is-light .navbar-brand .navbar-link {
color: rgba(0, 0, 0, 0.7);
}
.navbar.is-light .navbar-brand > a.navbar-item:focus, .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active,
.navbar.is-light .navbar-brand .navbar-link:focus,
.navbar.is-light .navbar-brand .navbar-link:hover,
.navbar.is-light .navbar-brand .navbar-link.is-active {
background-color: #e8e8e8;
color: rgba(0, 0, 0, 0.7);
}
.navbar.is-light .navbar-brand .navbar-link::after {
border-color: rgba(0, 0, 0, 0.7);
}
.navbar.is-light .navbar-burger {
color: rgba(0, 0, 0, 0.7);
}
@media screen and (min-width: 1024px) {
.navbar.is-light .navbar-end > .navbar-item,
.navbar.is-light .navbar-end .navbar-link {
color: rgba(0, 0, 0, 0.7);
}
.navbar.is-light .navbar-end > a.navbar-item:focus,
.navbar.is-light .navbar-end > a.navbar-item:hover,
.navbar.is-light .navbar-end > a.navbar-item.is-active,
.navbar.is-light .navbar-end .navbar-link:focus,
.navbar.is-light .navbar-end .navbar-link:hover,
.navbar.is-light .navbar-end .navbar-link.is-active {
background-color: #e8e8e8;
color: rgba(0, 0, 0, 0.7);
}
.navbar.is-light .navbar-end .navbar-link::after {
border-color: rgba(0, 0, 0, 0.7);
}
.navbar.is-light .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-light .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #e8e8e8;
color: rgba(0, 0, 0, 0.7);
}
.navbar.is-light .navbar-dropdown a.navbar-item.is-active {
background-color: whitesmoke;
color: rgba(0, 0, 0, 0.7);
}
}
.navbar.is-dark {
background-color: #363636;
color: #fff;
}
.navbar.is-dark .navbar-brand > .navbar-item,
.navbar.is-dark .navbar-brand .navbar-link {
color: #fff;
}
.navbar.is-dark .navbar-brand > a.navbar-item:focus, .navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active,
.navbar.is-dark .navbar-brand .navbar-link:focus,
.navbar.is-dark .navbar-brand .navbar-link:hover,
.navbar.is-dark .navbar-brand .navbar-link.is-active {
background-color: #292929;
color: #fff;
}
.navbar.is-dark .navbar-brand .navbar-link::after {
border-color: #fff;
}
.navbar.is-dark .navbar-burger {
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-dark .navbar-end > .navbar-item,
.navbar.is-dark .navbar-end .navbar-link {
color: #fff;
}
.navbar.is-dark .navbar-end > a.navbar-item:focus,
.navbar.is-dark .navbar-end > a.navbar-item:hover,
.navbar.is-dark .navbar-end > a.navbar-item.is-active,
.navbar.is-dark .navbar-end .navbar-link:focus,
.navbar.is-dark .navbar-end .navbar-link:hover,
.navbar.is-dark .navbar-end .navbar-link.is-active {
background-color: #292929;
color: #fff;
}
.navbar.is-dark .navbar-end .navbar-link::after {
border-color: #fff;
}
.navbar.is-dark .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #292929;
color: #fff;
}
.navbar.is-dark .navbar-dropdown a.navbar-item.is-active {
background-color: #363636;
color: #fff;
}
}
.navbar.is-primary {
background-color: #00d1b2;
color: #fff;
}
.navbar.is-primary .navbar-brand > .navbar-item,
.navbar.is-primary .navbar-brand .navbar-link {
color: #fff;
}
.navbar.is-primary .navbar-brand > a.navbar-item:focus, .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
.navbar.is-primary .navbar-brand .navbar-link:focus,
.navbar.is-primary .navbar-brand .navbar-link:hover,
.navbar.is-primary .navbar-brand .navbar-link.is-active {
background-color: #00b89c;
color: #fff;
}
.navbar.is-primary .navbar-brand .navbar-link::after {
border-color: #fff;
}
.navbar.is-primary .navbar-burger {
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-primary .navbar-end > .navbar-item,
.navbar.is-primary .navbar-end .navbar-link {
color: #fff;
}
.navbar.is-primary .navbar-end > a.navbar-item:focus,
.navbar.is-primary .navbar-end > a.navbar-item:hover,
.navbar.is-primary .navbar-end > a.navbar-item.is-active,
.navbar.is-primary .navbar-end .navbar-link:focus,
.navbar.is-primary .navbar-end .navbar-link:hover,
.navbar.is-primary .navbar-end .navbar-link.is-active {
background-color: #00b89c;
color: #fff;
}
.navbar.is-primary .navbar-end .navbar-link::after {
border-color: #fff;
}
.navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #00b89c;
color: #fff;
}
.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
background-color: #00d1b2;
color: #fff;
}
}
.navbar.is-link {
background-color: #485fc7;
color: #fff;
}
.navbar.is-link .navbar-brand > .navbar-item,
.navbar.is-link .navbar-brand .navbar-link {
color: #fff;
}
.navbar.is-link .navbar-brand > a.navbar-item:focus, .navbar.is-link .navbar-brand > a.navbar-item:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active,
.navbar.is-link .navbar-brand .navbar-link:focus,
.navbar.is-link .navbar-brand .navbar-link:hover,
.navbar.is-link .navbar-brand .navbar-link.is-active {
background-color: #3a51bb;
color: #fff;
}
.navbar.is-link .navbar-brand .navbar-link::after {
border-color: #fff;
}
.navbar.is-link .navbar-burger {
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-link .navbar-end > .navbar-item,
.navbar.is-link .navbar-end .navbar-link {
color: #fff;
}
.navbar.is-link .navbar-end > a.navbar-item:focus,
.navbar.is-link .navbar-end > a.navbar-item:hover,
.navbar.is-link .navbar-end > a.navbar-item.is-active,
.navbar.is-link .navbar-end .navbar-link:focus,
.navbar.is-link .navbar-end .navbar-link:hover,
.navbar.is-link .navbar-end .navbar-link.is-active {
background-color: #3a51bb;
color: #fff;
}
.navbar.is-link .navbar-end .navbar-link::after {
border-color: #fff;
}
.navbar.is-link .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-link .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #3a51bb;
color: #fff;
}
.navbar.is-link .navbar-dropdown a.navbar-item.is-active {
background-color: #485fc7;
color: #fff;
}
}
.navbar.is-info {
background-color: #3e8ed0;
color: #fff;
}
.navbar.is-info .navbar-brand > .navbar-item,
.navbar.is-info .navbar-brand .navbar-link {
color: #fff;
}
.navbar.is-info .navbar-brand > a.navbar-item:focus, .navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active,
.navbar.is-info .navbar-brand .navbar-link:focus,
.navbar.is-info .navbar-brand .navbar-link:hover,
.navbar.is-info .navbar-brand .navbar-link.is-active {
background-color: #3082c5;
color: #fff;
}
.navbar.is-info .navbar-brand .navbar-link::after {
border-color: #fff;
}
.navbar.is-info .navbar-burger {
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-info .navbar-end > .navbar-item,
.navbar.is-info .navbar-end .navbar-link {
color: #fff;
}
.navbar.is-info .navbar-end > a.navbar-item:focus,
.navbar.is-info .navbar-end > a.navbar-item:hover,
.navbar.is-info .navbar-end > a.navbar-item.is-active,
.navbar.is-info .navbar-end .navbar-link:focus,
.navbar.is-info .navbar-end .navbar-link:hover,
.navbar.is-info .navbar-end .navbar-link.is-active {
background-color: #3082c5;
color: #fff;
}
.navbar.is-info .navbar-end .navbar-link::after {
border-color: #fff;
}
.navbar.is-info .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-info .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #3082c5;
color: #fff;
}
.navbar.is-info .navbar-dropdown a.navbar-item.is-active {
background-color: #3e8ed0;
color: #fff;
}
}
.navbar.is-success {
background-color: #48c78e;
color: #fff;
}
.navbar.is-success .navbar-brand > .navbar-item,
.navbar.is-success .navbar-brand .navbar-link {
color: #fff;
}
.navbar.is-success .navbar-brand > a.navbar-item:focus, .navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active,
.navbar.is-success .navbar-brand .navbar-link:focus,
.navbar.is-success .navbar-brand .navbar-link:hover,
.navbar.is-success .navbar-brand .navbar-link.is-active {
background-color: #3abb81;
color: #fff;
}
.navbar.is-success .navbar-brand .navbar-link::after {
border-color: #fff;
}
.navbar.is-success .navbar-burger {
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-success .navbar-end > .navbar-item,
.navbar.is-success .navbar-end .navbar-link {
color: #fff;
}
.navbar.is-success .navbar-end > a.navbar-item:focus,
.navbar.is-success .navbar-end > a.navbar-item:hover,
.navbar.is-success .navbar-end > a.navbar-item.is-active,
.navbar.is-success .navbar-end .navbar-link:focus,
.navbar.is-success .navbar-end .navbar-link:hover,
.navbar.is-success .navbar-end .navbar-link.is-active {
background-color: #3abb81;
color: #fff;
}
.navbar.is-success .navbar-end .navbar-link::after {
border-color: #fff;
}
.navbar.is-success .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-success .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #3abb81;
color: #fff;
}
.navbar.is-success .navbar-dropdown a.navbar-item.is-active {
background-color: #48c78e;
color: #fff;
}
}
.navbar.is-danger {
background-color: #f14668;
color: #fff;
}
.navbar.is-danger .navbar-brand > .navbar-item,
.navbar.is-danger .navbar-brand .navbar-link {
color: #fff;
}
.navbar.is-danger .navbar-brand > a.navbar-item:focus, .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active,
.navbar.is-danger .navbar-brand .navbar-link:focus,
.navbar.is-danger .navbar-brand .navbar-link:hover,
.navbar.is-danger .navbar-brand .navbar-link.is-active {
background-color: #ef2e55;
color: #fff;
}
.navbar.is-danger .navbar-brand .navbar-link::after {
border-color: #fff;
}
.navbar.is-danger .navbar-burger {
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-danger .navbar-end > .navbar-item,
.navbar.is-danger .navbar-end .navbar-link {
color: #fff;
}
.navbar.is-danger .navbar-end > a.navbar-item:focus,
.navbar.is-danger .navbar-end > a.navbar-item:hover,
.navbar.is-danger .navbar-end > a.navbar-item.is-active,
.navbar.is-danger .navbar-end .navbar-link:focus,
.navbar.is-danger .navbar-end .navbar-link:hover,
.navbar.is-danger .navbar-end .navbar-link.is-active {
background-color: #ef2e55;
color: #fff;
}
.navbar.is-danger .navbar-end .navbar-link::after {
border-color: #fff;
}
.navbar.is-danger .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #ef2e55;
color: #fff;
}
.navbar.is-danger .navbar-dropdown a.navbar-item.is-active {
background-color: #f14668;
color: #fff;
}
}
.navbar > .container {
align-items: stretch;
display: flex;
min-height: 3.25rem;
width: 100%;
}
.navbar-brand {
align-items: stretch;
display: flex;
flex-shrink: 0;
min-height: 3.25rem;
}
.navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover {
background-color: transparent;
}
.navbar-burger {
color: #4a4a4a;
cursor: pointer;
display: block;
height: 3.25rem;
position: relative;
width: 3.25rem;
margin-left: auto;
}
.navbar-burger span {
background-color: currentColor;
display: block;
height: 1px;
left: calc(50% - 8px);
position: absolute;
transform-origin: center;
transition-duration: 86ms;
transition-property: background-color, opacity, transform;
transition-timing-function: ease-out;
width: 16px;
}
.navbar-burger span:nth-child(1) {
top: calc(50% - 6px);
}
.navbar-burger span:nth-child(2) {
top: calc(50% - 1px);
}
.navbar-burger span:nth-child(3) {
top: calc(50% + 4px);
}
.navbar-burger:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.navbar-burger.is-active span:nth-child(1) {
transform: translateY(5px) rotate(45deg);
}
.navbar-burger.is-active span:nth-child(2) {
opacity: 0;
}
.navbar-burger.is-active span:nth-child(3) {
transform: translateY(-5px) rotate(-45deg);
}
.navbar-menu {
display: none;
}
.navbar-item,
.navbar-link {
color: #4a4a4a;
display: block;
line-height: 1.5;
padding: 0.5rem 0.75rem;
position: relative;
}
.navbar-item .icon:only-child,
.navbar-link .icon:only-child {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
a.navbar-item,
.navbar-link {
cursor: pointer;
}
a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active,
.navbar-link:focus,
.navbar-link:focus-within,
.navbar-link:hover,
.navbar-link.is-active {
background-color: #fafafa;
color: #485fc7;
}
.navbar-item {
flex-grow: 0;
flex-shrink: 0;
}
.navbar-item img {
max-height: 1.75rem;
}
.navbar-item.has-dropdown {
padding: 0;
}
.navbar-item.is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
.navbar-link:not(.is-arrowless) {
padding-right: 2.5em;
}
.navbar-link:not(.is-arrowless)::after {
border-color: #485fc7;
margin-top: -0.375em;
right: 1.125em;
}
.navbar-dropdown {
font-size: 0.875rem;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.navbar-dropdown .navbar-item {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media screen and (max-width: 1023px) {
.navbar > .container {
display: block;
}
.navbar-brand .navbar-item {
align-items: center;
display: flex;
}
.navbar-link::after {
display: none;
}
.navbar-menu {
background-color: white;
box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
padding: 0.5rem 0;
}
.navbar-menu.is-active {
display: block;
}
}
@media screen and (min-width: 1024px) {
.navbar,
.navbar-menu,
.navbar-end {
align-items: stretch;
display: flex;
}
.navbar {
min-height: 3.25rem;
}
.navbar.is-transparent a.navbar-item:focus, .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active,
.navbar.is-transparent .navbar-link:focus,
.navbar.is-transparent .navbar-link:hover,
.navbar.is-transparent .navbar-link.is-active {
background-color: transparent !important;
}
.navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
background-color: transparent !important;
}
.navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
.navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
background-color: whitesmoke;
color: #485fc7;
}
.navbar-burger {
display: none;
}
.navbar-item,
.navbar-link {
align-items: center;
display: flex;
}
.navbar-item.has-dropdown {
align-items: stretch;
}
.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
display: block;
}
.navbar-menu {
flex-grow: 1;
flex-shrink: 0;
}
.navbar-end {
justify-content: flex-end;
margin-left: auto;
}
.navbar-dropdown {
background-color: white;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid #dbdbdb;
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
display: none;
font-size: 0.875rem;
left: 0;
min-width: 100%;
position: absolute;
top: 100%;
z-index: 20;
}
.navbar-dropdown .navbar-item {
padding: 0.375rem 1rem;
white-space: nowrap;
}
.navbar-dropdown a.navbar-item {
padding-right: 3rem;
}
.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
.navbar-dropdown a.navbar-item.is-active {
background-color: whitesmoke;
color: #485fc7;
}
.navbar-dropdown.is-right {
left: auto;
right: 0;
}
.navbar > .container .navbar-brand,
.container > .navbar .navbar-brand {
margin-left: -0.75rem;
}
.navbar > .container .navbar-menu,
.container > .navbar .navbar-menu {
margin-right: -0.75rem;
}
a.navbar-item.is-active,
.navbar-link.is-active {
color: #0a0a0a;
}
a.navbar-item.is-active:not(:focus):not(:hover),
.navbar-link.is-active:not(:focus):not(:hover) {
background-color: transparent;
}
.navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #fafafa;
}
}
.pagination {
font-size: 1rem;
margin: -0.25rem;
}
.pagination.is-small {
font-size: 0.75rem;
}
.pagination.is-medium {
font-size: 1.25rem;
}
.pagination.is-large {
font-size: 1.5rem;
}
.pagination,
.pagination-list {
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.pagination-link {
font-size: 1em;
justify-content: center;
margin: 0.25rem;
padding-left: 0.5em;
padding-right: 0.5em;
text-align: center;
}
.pagination-link {
border-color: #dbdbdb;
color: #363636;
min-width: 2.5em;
}
.pagination-link:hover {
border-color: #b5b5b5;
color: #363636;
}
.pagination-link:focus {
border-color: #485fc7;
}
.pagination-link:active {
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
}
.pagination-link[disabled] {
background-color: #dbdbdb;
border-color: #dbdbdb;
box-shadow: none;
color: #7a7a7a;
opacity: 0.5;
}
.pagination-list {
flex-wrap: wrap;
}
.pagination-list li {
list-style: none;
}
@media screen and (max-width: 768px) {
.pagination {
flex-wrap: wrap;
}
.pagination-list li {
flex-grow: 1;
flex-shrink: 1;
}
}
@media screen and (min-width: 769px), print {
.pagination-list {
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
order: 1;
}
.pagination-link {
margin-bottom: 0;
margin-top: 0;
}
.pagination {
justify-content: space-between;
margin-bottom: 0;
margin-top: 0;
}
.pagination.is-centered .pagination-list {
justify-content: center;
order: 2;
}
.pagination.is-right .pagination-list {
justify-content: flex-end;
order: 3;
}
}
.tabs {
-webkit-overflow-scrolling: touch;
align-items: stretch;
display: flex;
font-size: 1rem;
justify-content: space-between;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.tabs a {
align-items: center;
border-bottom-color: #dbdbdb;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #4a4a4a;
display: flex;
justify-content: center;
margin-bottom: -1px;
padding: 0.5em 1em;
vertical-align: top;
}
.tabs a:hover {
border-bottom-color: #363636;
color: #363636;
}
.tabs li {
display: block;
}
.tabs li.is-active a {
border-bottom-color: #485fc7;
color: #485fc7;
}
.tabs ul {
align-items: center;
border-bottom-color: #dbdbdb;
border-bottom-style: solid;
border-bottom-width: 1px;
display: flex;
flex-grow: 1;
flex-shrink: 0;
justify-content: flex-start;
}
.tabs ul.is-left {
padding-right: 0.75em;
}
.tabs ul.is-right {
justify-content: flex-end;
padding-left: 0.75em;
}
.tabs .icon:first-child {
margin-right: 0.5em;
}
.tabs .icon:last-child {
margin-left: 0.5em;
}
.tabs.is-centered ul {
justify-content: center;
}
.tabs.is-right ul {
justify-content: flex-end;
}
.tabs.is-fullwidth li {
flex-grow: 1;
flex-shrink: 0;
}
.tabs.is-small {
font-size: 0.75rem;
}
.tabs.is-medium {
font-size: 1.25rem;
}
.tabs.is-large {
font-size: 1.5rem;
}
/* Bulma Grid */
.column {
display: block;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
padding: 0.75rem;
}
.columns.is-mobile > .column.is-narrow {
flex: none;
width: unset;
}
.columns.is-mobile > .column.is-1 {
flex: none;
width: 8.33333%;
}
.columns.is-mobile > .column.is-3 {
flex: none;
width: 25%;
}
.columns.is-mobile > .column.is-4 {
flex: none;
width: 33.33333%;
}
.columns.is-mobile > .column.is-5 {
flex: none;
width: 41.66667%;
}
.columns.is-mobile > .column.is-6 {
flex: none;
width: 50%;
}
.columns.is-mobile > .column.is-7 {
flex: none;
width: 58.33333%;
}
.columns.is-mobile > .column.is-8 {
flex: none;
width: 66.66667%;
}
.columns.is-mobile > .column.is-12 {
flex: none;
width: 100%;
}
@media screen and (min-width: 769px), print {
.column.is-narrow {
flex: none;
width: unset;
}
.column.is-1 {
flex: none;
width: 8.33333%;
}
.column.is-3 {
flex: none;
width: 25%;
}
.column.is-4 {
flex: none;
width: 33.33333%;
}
.column.is-5 {
flex: none;
width: 41.66667%;
}
.column.is-6 {
flex: none;
width: 50%;
}
.column.is-7 {
flex: none;
width: 58.33333%;
}
.column.is-8 {
flex: none;
width: 66.66667%;
}
.column.is-12 {
flex: none;
width: 100%;
}
}
.columns {
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-top: -0.75rem;
}
.columns:last-child {
margin-bottom: -0.75rem;
}
.columns:not(:last-child) {
margin-bottom: calc(1.5rem - 0.75rem);
}
.columns.is-centered {
justify-content: center;
}
.columns.is-mobile {
display: flex;
}
.columns.is-multiline {
flex-wrap: wrap;
}
@media screen and (min-width: 769px), print {
.columns:not(.is-desktop) {
display: flex;
}
}
@media screen and (min-width: 1024px) {
.columns.is-desktop {
display: flex;
}
}
/* Bulma Helpers */
.has-text-light {
color: whitesmoke !important;
}
a.has-text-light:hover, a.has-text-light:focus {
color: #dbdbdb !important;
}
.has-background-light {
background-color: whitesmoke !important;
}
.has-text-dark {
color: #363636 !important;
}
a.has-text-dark:hover, a.has-text-dark:focus {
color: #1c1c1c !important;
}
.has-background-dark {
background-color: #363636 !important;
}
.has-text-primary {
color: #00d1b2 !important;
}
a.has-text-primary:hover, a.has-text-primary:focus {
color: #009e86 !important;
}
.has-text-info {
color: #3e8ed0 !important;
}
a.has-text-info:hover, a.has-text-info:focus {
color: #2b74b1 !important;
}
.has-text-danger {
color: #f14668 !important;
}
a.has-text-danger:hover, a.has-text-danger:focus {
color: #ee1742 !important;
}
.has-text-grey-dark {
color: #4a4a4a !important;
}
.has-text-grey {
color: #7a7a7a !important;
}
.has-text-grey-light {
color: #b5b5b5 !important;
}
.has-background-white-bis {
background-color: #fafafa !important;
}
.is-pulled-right {
float: right !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-1 {
margin: 0.25rem !important;
}
.mb-1 {
margin-bottom: 0.25rem !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.mr-2 {
margin-right: 0.5rem !important;
}
.mb-2 {
margin-bottom: 0.5rem !important;
}
.ml-2 {
margin-left: 0.5rem !important;
}
.mr-4 {
margin-right: 1rem !important;
}
.mt-5 {
margin-top: 1.5rem !important;
}
.p-0 {
padding: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.pt-1 {
padding-top: 0.25rem !important;
}
.py-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
}
.pr-5 {
padding-right: 1.5rem !important;
}
.is-size-2 {
font-size: 2.5rem !important;
}
.is-size-3 {
font-size: 2rem !important;
}
.is-size-4 {
font-size: 1.5rem !important;
}
.is-size-5 {
font-size: 1.25rem !important;
}
.is-size-6 {
font-size: 1rem !important;
}
.is-size-7 {
font-size: 0.75rem !important;
}
@media screen and (max-width: 768px) {
.is-size-4-mobile {
font-size: 1.5rem !important;
}
}
.has-text-centered {
text-align: center !important;
}
.has-text-right {
text-align: right !important;
}
@media screen and (max-width: 768px) {
.has-text-centered-mobile {
text-align: center !important;
}
}
.has-text-weight-bold {
font-weight: 700 !important;
}
.is-hidden {
display: none !important;
}
@media screen and (max-width: 768px) {
.is-hidden-mobile {
display: none !important;
}
}
@media screen and (max-width: 1023px) {
.is-hidden-touch {
display: none !important;
}
}
@media screen and (min-width: 1024px) and (max-width: 1215px) {
.is-hidden-desktop-only {
display: none !important;
}
}
@media screen and (min-width: 1216px) and (max-width: 1407px) {
.is-hidden-widescreen-only {
display: none !important;
}
}
/* Bulma Layout */
.hero {
align-items: stretch;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero .navbar {
background: none;
}
.hero .tabs ul {
border-bottom: none;
}
.hero.is-white {
background-color: white;
color: #0a0a0a;
}
.hero.is-white a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
.hero.is-white strong {
color: inherit;
}
.hero.is-white .title {
color: #0a0a0a;
}
.hero.is-white .subtitle {
color: rgba(10, 10, 10, 0.9);
}
.hero.is-white .subtitle a:not(.button),
.hero.is-white .subtitle strong {
color: #0a0a0a;
}
@media screen and (max-width: 1023px) {
.hero.is-white .navbar-menu {
background-color: white;
}
}
.hero.is-white .navbar-item,
.hero.is-white .navbar-link {
color: rgba(10, 10, 10, 0.7);
}
.hero.is-white a.navbar-item:hover, .hero.is-white a.navbar-item.is-active,
.hero.is-white .navbar-link:hover,
.hero.is-white .navbar-link.is-active {
background-color: #f2f2f2;
color: #0a0a0a;
}
.hero.is-white .tabs a {
color: #0a0a0a;
opacity: 0.9;
}
.hero.is-white .tabs a:hover {
opacity: 1;
}
.hero.is-white .tabs li.is-active a {
color: white !important;
opacity: 1;
}
.hero.is-light {
background-color: whitesmoke;
color: rgba(0, 0, 0, 0.7);
}
.hero.is-light a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
.hero.is-light strong {
color: inherit;
}
.hero.is-light .title {
color: rgba(0, 0, 0, 0.7);
}
.hero.is-light .subtitle {
color: rgba(0, 0, 0, 0.9);
}
.hero.is-light .subtitle a:not(.button),
.hero.is-light .subtitle strong {
color: rgba(0, 0, 0, 0.7);
}
@media screen and (max-width: 1023px) {
.hero.is-light .navbar-menu {
background-color: whitesmoke;
}
}
.hero.is-light .navbar-item,
.hero.is-light .navbar-link {
color: rgba(0, 0, 0, 0.7);
}
.hero.is-light a.navbar-item:hover, .hero.is-light a.navbar-item.is-active,
.hero.is-light .navbar-link:hover,
.hero.is-light .navbar-link.is-active {
background-color: #e8e8e8;
color: rgba(0, 0, 0, 0.7);
}
.hero.is-light .tabs a {
color: rgba(0, 0, 0, 0.7);
opacity: 0.9;
}
.hero.is-light .tabs a:hover {
opacity: 1;
}
.hero.is-light .tabs li.is-active a {
color: whitesmoke !important;
opacity: 1;
}
.hero.is-dark {
background-color: #363636;
color: #fff;
}
.hero.is-dark a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
.hero.is-dark strong {
color: inherit;
}
.hero.is-dark .title {
color: #fff;
}
.hero.is-dark .subtitle {
color: rgba(255, 255, 255, 0.9);
}
.hero.is-dark .subtitle a:not(.button),
.hero.is-dark .subtitle strong {
color: #fff;
}
@media screen and (max-width: 1023px) {
.hero.is-dark .navbar-menu {
background-color: #363636;
}
}
.hero.is-dark .navbar-item,
.hero.is-dark .navbar-link {
color: rgba(255, 255, 255, 0.7);
}
.hero.is-dark a.navbar-item:hover, .hero.is-dark a.navbar-item.is-active,
.hero.is-dark .navbar-link:hover,
.hero.is-dark .navbar-link.is-active {
background-color: #292929;
color: #fff;
}
.hero.is-dark .tabs a {
color: #fff;
opacity: 0.9;
}
.hero.is-dark .tabs a:hover {
opacity: 1;
}
.hero.is-dark .tabs li.is-active a {
color: #363636 !important;
opacity: 1;
}
.hero.is-primary {
background-color: #00d1b2;
color: #fff;
}
.hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
.hero.is-primary strong {
color: inherit;
}
.hero.is-primary .title {
color: #fff;
}
.hero.is-primary .subtitle {
color: rgba(255, 255, 255, 0.9);
}
.hero.is-primary .subtitle a:not(.button),
.hero.is-primary .subtitle strong {
color: #fff;
}
@media screen and (max-width: 1023px) {
.hero.is-primary .navbar-menu {
background-color: #00d1b2;
}
}
.hero.is-primary .navbar-item,
.hero.is-primary .navbar-link {
color: rgba(255, 255, 255, 0.7);
}
.hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active,
.hero.is-primary .navbar-link:hover,
.hero.is-primary .navbar-link.is-active {
background-color: #00b89c;
color: #fff;
}
.hero.is-primary .tabs a {
color: #fff;
opacity: 0.9;
}
.hero.is-primary .tabs a:hover {
opacity: 1;
}
.hero.is-primary .tabs li.is-active a {
color: #00d1b2 !important;
opacity: 1;
}
.hero.is-link {
background-color: #485fc7;
color: #fff;
}
.hero.is-link a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
.hero.is-link strong {
color: inherit;
}
.hero.is-link .title {
color: #fff;
}
.hero.is-link .subtitle {
color: rgba(255, 255, 255, 0.9);
}
.hero.is-link .subtitle a:not(.button),
.hero.is-link .subtitle strong {
color: #fff;
}
@media screen and (max-width: 1023px) {
.hero.is-link .navbar-menu {
background-color: #485fc7;
}
}
.hero.is-link .navbar-item,
.hero.is-link .navbar-link {
color: rgba(255, 255, 255, 0.7);
}
.hero.is-link a.navbar-item:hover, .hero.is-link a.navbar-item.is-active,
.hero.is-link .navbar-link:hover,
.hero.is-link .navbar-link.is-active {
background-color: #3a51bb;
color: #fff;
}
.hero.is-link .tabs a {
color: #fff;
opacity: 0.9;
}
.hero.is-link .tabs a:hover {
opacity: 1;
}
.hero.is-link .tabs li.is-active a {
color: #485fc7 !important;
opacity: 1;
}
.hero.is-info {
background-color: #3e8ed0;
color: #fff;
}
.hero.is-info a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
.hero.is-info strong {
color: inherit;
}
.hero.is-info .title {
color: #fff;
}
.hero.is-info .subtitle {
color: rgba(255, 255, 255, 0.9);
}
.hero.is-info .subtitle a:not(.button),
.hero.is-info .subtitle strong {
color: #fff;
}
@media screen and (max-width: 1023px) {
.hero.is-info .navbar-menu {
background-color: #3e8ed0;
}
}
.hero.is-info .navbar-item,
.hero.is-info .navbar-link {
color: rgba(255, 255, 255, 0.7);
}
.hero.is-info a.navbar-item:hover, .hero.is-info a.navbar-item.is-active,
.hero.is-info .navbar-link:hover,
.hero.is-info .navbar-link.is-active {
background-color: #3082c5;
color: #fff;
}
.hero.is-info .tabs a {
color: #fff;
opacity: 0.9;
}
.hero.is-info .tabs a:hover {
opacity: 1;
}
.hero.is-info .tabs li.is-active a {
color: #3e8ed0 !important;
opacity: 1;
}
.hero.is-success {
background-color: #48c78e;
color: #fff;
}
.hero.is-success a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
.hero.is-success strong {
color: inherit;
}
.hero.is-success .title {
color: #fff;
}
.hero.is-success .subtitle {
color: rgba(255, 255, 255, 0.9);
}
.hero.is-success .subtitle a:not(.button),
.hero.is-success .subtitle strong {
color: #fff;
}
@media screen and (max-width: 1023px) {
.hero.is-success .navbar-menu {
background-color: #48c78e;
}
}
.hero.is-success .navbar-item,
.hero.is-success .navbar-link {
color: rgba(255, 255, 255, 0.7);
}
.hero.is-success a.navbar-item:hover, .hero.is-success a.navbar-item.is-active,
.hero.is-success .navbar-link:hover,
.hero.is-success .navbar-link.is-active {
background-color: #3abb81;
color: #fff;
}
.hero.is-success .tabs a {
color: #fff;
opacity: 0.9;
}
.hero.is-success .tabs a:hover {
opacity: 1;
}
.hero.is-success .tabs li.is-active a {
color: #48c78e !important;
opacity: 1;
}
.hero.is-danger {
background-color: #f14668;
color: #fff;
}
.hero.is-danger a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
.hero.is-danger strong {
color: inherit;
}
.hero.is-danger .title {
color: #fff;
}
.hero.is-danger .subtitle {
color: rgba(255, 255, 255, 0.9);
}
.hero.is-danger .subtitle a:not(.button),
.hero.is-danger .subtitle strong {
color: #fff;
}
@media screen and (max-width: 1023px) {
.hero.is-danger .navbar-menu {
background-color: #f14668;
}
}
.hero.is-danger .navbar-item,
.hero.is-danger .navbar-link {
color: rgba(255, 255, 255, 0.7);
}
.hero.is-danger a.navbar-item:hover, .hero.is-danger a.navbar-item.is-active,
.hero.is-danger .navbar-link:hover,
.hero.is-danger .navbar-link.is-active {
background-color: #ef2e55;
color: #fff;
}
.hero.is-danger .tabs a {
color: #fff;
opacity: 0.9;
}
.hero.is-danger .tabs a:hover {
opacity: 1;
}
.hero.is-danger .tabs li.is-active a {
color: #f14668 !important;
opacity: 1;
}
.hero.is-small .hero-body {
padding: 1.5rem;
}
@media screen and (min-width: 769px), print {
.hero.is-medium .hero-body {
padding: 9rem 4.5rem;
}
}
@media screen and (min-width: 769px), print {
.hero.is-large .hero-body {
padding: 18rem 6rem;
}
}
.hero-head {
flex-grow: 0;
flex-shrink: 0;
}
.hero-body {
flex-grow: 1;
flex-shrink: 0;
padding: 3rem 1.5rem;
}
@media screen and (min-width: 769px), print {
.hero-body {
padding: 3rem 3rem;
}
}
.section {
padding: 3rem 1.5rem;
}
@media screen and (min-width: 1024px) {
.section {
padding: 3rem 3rem;
}
.section.is-medium {
padding: 9rem 4.5rem;
}
.section.is-large {
padding: 18rem 6rem;
}
}
.footer {
background-color: #fafafa;
padding: 3rem 1.5rem 6rem;
}
/*# sourceMappingURL=bulma.css.map */
/* Custome CodeBeautify Balma Style. */
/* Header Logo image */
.navbar-item img {
max-height: 100%;
}
/* Home Page Button */
.funbtn {
margin: 10px;
width: 250px;
height: 60px;
}
/* change color on hover */
.funbtn:hover {
background-color:grey;
color:white;
}
/* Progress bar size */
.progress.is-tiny{
height: .1rem;
display: none;
margin-bottom: 0px;
}
/* for making footer link as dark*/
ul li a:link {
color: #363636;
}
ul li a:visited {
color:#363636;
}
ul li a:link:hover {
font-weight: bold;
}
/* End Footer link dark */
/*11 Auto Complete Search Box */
/*the container must be positioned relative:*/
.autocomplete-suggestions {
text-align: left;
cursor: default;
border: 1px solid #d4d4d4;
border-top: none;
background: #fff;
box-shadow: -1px 1px 3px rgba(0,0,0,.1);
/* core styles should not be changed */
position: absolute; display: none; z-index: 9999; max-height: 400px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
}
.autocomplete-suggestion {
position: relative;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
color: #333;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-suggestion b { font-weight: strong; color: black; }
.autocomplete-suggestion.selected {
background-color: #e9e9e9 !important;
}
/*Complete Autocomplete search box*/
/* hr devider*/
/* json editor */
div.jsoneditor {
border: 1px solid #727272;
height: inherit !important;
}
.jsoneditor-search {
right: 60px;
}
.cursor-pointer {
cursor: pointer;
}
.btn-sm{
padding: 5px 7px;
}
.editortoolbar{
position: relative;
display: inline-block;
white-space: nowrap;
vertical-align: middle;
font-size: 14px;
float: right;
height: 35px;
}
.overlay {
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:999;
width:100%;
height:100%;
}
.overlayeditor{
height:100vh;
}
table.jsoneditor-search {
right: 50px;
top: 4px;
border-collapse: collapse;
border-spacing: 0;
float: left;
}
/* end JSONEditor CSS */
/* for Single Editor Ace or JSON for Height */
/* for Fullscreen */
/* fsoverlay is for div*/
.fsoverlay {
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:999;
width:100%;
height:100%;
}
/* fsoverlay is for inputEditor*/
.fsoverlayeditor{
height:93.6vh !important;
}
.fsoverlayeditorJE{
height:100vh !important;
}
/* ace editor Menu */
/* dark boarder around the aceeditor with titlebar and statusbar */
.aceEditorBorder{
border: 1px solid #4a4a4a;
}
.fixedFooter {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 100;
}
/* textarea toolbar */
.textareatoolbar{
position: relative;
display: inline-block;
white-space: nowrap;
vertical-align: middle;
font-size: 14px;
float: right;
}
.textareatoolbar a {
padding-left: 20px;
padding-right: 20px;
color: #363636;
}
/* Bulma menu-list */
.menu-list a.is-active {
background-color: lightgray;
color: #363636;
font-weight: bold;
}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-36 { font-size: 36px; }
.svgicon{
width: 24px;
height: 24px;
}
.svgicon16{
width: 16px;
height: 16px;
}
.svgicon20{
width: 20px;
height: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment