├── .DS_Store
├── static
    ├── favicon.ico
    └── README.md
├── assets
    ├── css
    │   └── tailwind.css
    └── README.md
├── components
    ├── Logo.vue
    ├── README.md
    ├── Header.vue
    ├── Footer.vue
    ├── Revenue.vue
    └── Downloader.vue
├── .editorconfig
├── layouts
    ├── README.md
    └── default.vue
├── pages
    ├── README.md
    └── index.vue
├── plugins
    ├── README.md
    └── ga.js
├── store
    └── README.md
├── README.md
├── package.json
├── tailwind.config.js
├── nuxt.config.js
├── data
    └── versions.json
└── .gitignore


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/montoulieu/ableton-live-downloader/HEAD/.DS_Store


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/montoulieu/ableton-live-downloader/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss/base';
2 | @import 'tailwindcss/components';
3 | @import 'tailwindcss/utilities';
4 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="logo pb-5">
 3 |   </div>
 4 | </template>
 5 | 
 6 | <style>
 7 |   .logo svg {
 8 |     height: 100px;
 9 |   }
10 | 
11 |   svg g {
12 |     fill: white;
13 |   }
14 | </style>
15 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/components/Header.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <header class="mb-5 sm:mb-10">
3 |     <h1 class="font-bold text-4xl leading-none mb-3">Ableton Live Download Utility</h1>
4 |     <p>Downloads the desired <strong>64-bit</strong> installer from any version of Ableton Live 11, 10 or 9.</p>
5 |   </header>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="h-full sm:flex items-center justify-center py-10">
 3 |     <nuxt />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | 
 9 | html {
10 |   font-size: 18px;
11 |   word-spacing: 1px;
12 |   -moz-osx-font-smoothing: grayscale;
13 |   -webkit-font-smoothing: antialiased;
14 | }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | 
 8 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
11 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ableton-live-downloader
 2 | 
 3 | > Downloader utility for Ableton Live installer
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | $ npm install
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ npm run dev
13 | 
14 | # build for production and launch server
15 | $ npm run build
16 | $ npm start
17 | 
18 | # generate static project
19 | $ npm run generate
20 | ```
21 | 
22 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).
23 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <footer class="mb-20 sm:mb-0">
3 |     <p class="italic text-sm mb-1">This app is in no way affiliated with Ableton AG or any of their products.</p>
4 |     <p class="italic text-sm mb-1">It was built on Vue.js and uses publicly available download URLs from Ableton CDN servers.</p>
5 |     <p class="italic text-sm mb-1">Consider the <a href="https://github.com/montoulieu/ableton-live-downloader" class="text-white"><u>source</u></a> and use at your own discretion.</p>
6 |   </footer>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ableton-live-downloader",
 3 |   "version": "2.1.0",
 4 |   "description": "Downloads the desired 64-bit installer from Ableton Live servers",
 5 |   "author": "Pieter Montoulieu",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt build && nuxt export"
12 |   },
13 |   "dependencies": {
14 |     "compare-versions": "^5.0.1",
15 |     "nuxt": "^2.15.8"
16 |   },
17 |   "devDependencies": {
18 |     "@nuxtjs/tailwindcss": "^2.1.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/components/Revenue.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="fixed md:static inset-x-0 bottom-0 bg-black sm:bg-transparent shadow sm:mt-5">
3 |     <input type="hidden" name="cmd" value="_s-xclick" />
4 |     <input type="hidden" name="hosted_button_id" value="VWL33SJH88RNW" />
5 |     <button type="submit" class="btn bg-white text-black hover:opacity-75 transition-color duration-200 uppercase px-3 py-2 font-bold ">🤘 Buy Me A Coffee</button>
6 |     <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
7 |   </form>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | ** TailwindCSS Configuration File
 3 | **
 4 | ** Docs: https://tailwindcss.com/docs/configuration
 5 | ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 6 | */
 7 | module.exports = {
 8 |   theme: {},
 9 |   variants: {},
10 |   plugins: [],
11 |   purge: {
12 |     // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
13 |     enabled: process.env.NODE_ENV === 'production',
14 |     content: [
15 |       'components/**/*.vue',
16 |       'layouts/**/*.vue',
17 |       'pages/**/*.vue',
18 |       'plugins/**/*.js',
19 |       'nuxt.config.js'
20 |     ]
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/plugins/ga.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | export default ({ app }) => {
 4 |   /*
 5 |   ** Only run on client-side and only in production mode
 6 |   */
 7 |   if (process.env.NODE_ENV !== 'production') return
 8 |   /*
 9 |   ** Include Google Analytics Script
10 |   */
11 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
12 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
13 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
14 |   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
15 |   /*
16 |   ** Set the current page
17 |   */
18 |   ga('create', 'UA-127894545-2', 'auto')
19 |   /*
20 |   ** Every time the route changes (fired on initialization too)
21 |   */
22 |   app.router.afterEach((to, from) => {
23 |     /*
24 |     ** We tell Google Analytics to add a `pageview`
25 |     */
26 |     ga('set', 'page', to.fullPath)
27 |     ga('send', 'pageview')
28 |   })
29 | }
30 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | const pkg = require("./package");
 2 | 
 3 | module.exports = {
 4 |   target: "static",
 5 | 
 6 |   /*
 7 |    ** Headers of the page
 8 |    */
 9 |   head: {
10 |     title: "Ableton Live Installer Download Utility",
11 |     meta: [
12 |       { charset: "utf-8" },
13 |       { name: "viewport", content: "width=device-width, initial-scale=1" },
14 |       { hid: "description", name: "description", content: pkg.description },
15 |     ],
16 |     link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
17 |   },
18 | 
19 |   router: {
20 |     // base: '/ableton-live-downloader/'
21 |   },
22 | 
23 |   /*
24 |    ** Customize the progress-bar color
25 |    */
26 |   loading: { color: "#fff" },
27 | 
28 |   /*
29 |    ** Global CSS
30 |    */
31 |   css: [],
32 | 
33 |   /*
34 |    ** Plugins to load before mounting the App
35 |    */
36 |   plugins: [{ src: "~plugins/ga.js", ssr: false }],
37 | 
38 |   /*
39 |    ** Nuxt.js modules
40 |    */
41 |   buildModules: ["@nuxtjs/tailwindcss"],
42 | 
43 |   /*
44 |    ** Build configuration
45 |    */
46 |   build: {
47 |     /*
48 |      ** You can extend webpack config here
49 |      */
50 |     extend(config, ctx) {},
51 |   },
52 | };
53 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="container mx-auto text-center">
 3 |     <div class="text-white">
 4 |       <!-- <Logo /> -->
 5 |       <Header />
 6 |       <Downloader/>
 7 |       <Footer/>
 8 |       <Revenue/>
 9 |     </div>
10 |   </section>
11 | </template>
12 | 
13 | <script>
14 | import Downloader from '~/components/Downloader.vue'
15 | import Revenue from '~/components/Revenue.vue'
16 | import Header from '~/components/Header.vue'
17 | import Footer from '~/components/Footer.vue'
18 | 
19 | export default {
20 |   components: {
21 |     // Logo,
22 |     Downloader,
23 |     Revenue,
24 |     Header,
25 |     Footer
26 |   }
27 | }
28 | </script>
29 | 
30 | <style>
31 | @import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700');
32 | 
33 | html,
34 | #__nuxt,
35 | #__layout {
36 |   height: 100%;
37 | }
38 | 
39 | body {
40 |   font-family: "PT Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI',
41 |     Roboto, 'Helvetica Neue', Arial, sans-serif;
42 |   background: black;
43 |   height: 100%;
44 | }
45 | 
46 | .btn {
47 |   border-radius: 0;
48 | }
49 | 
50 | @media (min-width: 768px) {
51 |   .container {
52 |     max-width: 1140px;
53 |   }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/data/versions.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   "11.3.20",
 3 |   "11.3.13",
 4 |   "11.3.12",
 5 |   "11.3.11",
 6 |   "11.3.10",
 7 |   "11.3.4",
 8 |   "11.3.3",
 9 |   "11.3.2",
10 |   "11.2.11",
11 |   "11.2.10",
12 |   "11.2.7",
13 |   "11.2.6",
14 |   "11.2.5",
15 |   "11.2",
16 |   "11.1.5",
17 |   "11.1.1",
18 |   "11.1",
19 |   "11.0.12",
20 |   "11.0.11",
21 |   "11.0.10",
22 |   "11.0.6",
23 |   "11.0.5",
24 |   "11.0.2",
25 |   "11.0.1",
26 |   "11.0",
27 |   "10.1.30",
28 |   "10.1.25",
29 |   "10.1.18",
30 |   "10.1.17",
31 |   "10.1.15",
32 |   "10.1.14",
33 |   "10.1.13",
34 |   "10.1.9",
35 |   "10.1.7",
36 |   "10.1.6",
37 |   "10.1.5",
38 |   "10.1.4",
39 |   "10.1.3",
40 |   "10.1.2",
41 |   "10.1.1",
42 |   "10.1",
43 |   "10.0.6",
44 |   "10.0.5",
45 |   "10.0.4",
46 |   "10.0.3",
47 |   "10.0.2",
48 |   "10.0.1",
49 |   "10.0",
50 |   "9.7.7",
51 |   "9.7.6",
52 |   "9.7.5",
53 |   "9.7.4",
54 |   "9.7.3",
55 |   "9.7.2",
56 |   "9.7.1",
57 |   "9.7",
58 |   "9.6.2",
59 |   "9.6.1",
60 |   "9.6",
61 |   "9.5",
62 |   "9.2.3",
63 |   "9.2.2",
64 |   "9.2.1",
65 |   "9.2",
66 |   "9.1.10",
67 |   "9.1.9",
68 |   "9.1.8",
69 |   "9.1.7",
70 |   "9.1.6",
71 |   "9.1.5",
72 |   "9.1.4",
73 |   "9.1.3",
74 |   "9.1.2",
75 |   "9.1",
76 |   "9.0.6",
77 |   "9.0.5",
78 |   "9.0.4",
79 |   "9.0.3",
80 |   "9.0.2",
81 |   "9.0.1"
82 | ]
83 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 


--------------------------------------------------------------------------------
/components/Downloader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="live-downloader py-5 mb-5 sm:mb-10 px-3">
  3 |     <form class="sm:flex justify-center">
  4 |       <!-- Select: OS -->
  5 |       <div class="select-wrapper md:mr-10 mb-4 sm:mb-0">
  6 |         <label for="inputOS" class="mr-3 mb-2 sm:mb-0 text-uppercase font-bold"
  7 |           >OS</label
  8 |         >
  9 |         <select id="inputOS" class="form-control" v-model="os">
 10 |           <option selected>Choose...</option>
 11 |           <option value="mac_intel">macOS (Intel)</option>
 12 |           <option value="mac_silicon">macOS (Silicon)</option>
 13 |           <option value="win">Windows</option>
 14 |         </select>
 15 |       </div>
 16 | 
 17 |       <!-- Select: Version -->
 18 |       <div class="select-wrapper md:mr-10 mb-4 sm:mb-0">
 19 |         <label
 20 |           for="inputVersion"
 21 |           class="mr-3 mb-2 sm:mb-0 text-uppercase font-bold"
 22 |           >Version</label
 23 |         >
 24 |         <select id="inputVersion" class="form-control" v-model="version">
 25 |           <option selected>Choose...</option>
 26 |           <option v-for="version in versions" :key="version.id">
 27 |             {{ version }}
 28 |           </option>
 29 |         </select>
 30 |       </div>
 31 | 
 32 |       <!-- Select: Edition -->
 33 |       <div class="select-wrapper md:mr-10 mb-5 sm:mb-0">
 34 |         <label
 35 |           for="inputEdition"
 36 |           class="mr-3 mb-2 sm:mb-0 text-uppercase font-bold"
 37 |           >Edition</label
 38 |         >
 39 |         <select id="inputEdition" class="form-control" v-model="edition">
 40 |           <option selected>Choose...</option>
 41 |           <option value="suite">Suite</option>
 42 |           <option value="standard">Standard</option>
 43 |           <option value="intro">Intro</option>
 44 |           <option value="trial">Trial</option>
 45 |         </select>
 46 |       </div>
 47 | 
 48 |       <button
 49 |         type="submit"
 50 |         class="btn bg-white text-black hover:opacity-75 transition-color duration-200 uppercase px-3 py-3 sm:py-0 font-bold mt-3 md:mt-0"
 51 |         @click.prevent="download"
 52 |       >
 53 |         Download
 54 |       </button>
 55 |     </form>
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script>
 60 | import versions from "../data/versions.json";
 61 | import { compareVersions } from "compare-versions";
 62 | 
 63 | export default {
 64 |   data() {
 65 |     return {
 66 |       // Example path:
 67 |       // https://cdn-downloads.ableton.com/channels/10.0.6/ableton_live_suite_10.0.6_64.dmg
 68 | 
 69 |       cdn_path: "https://cdn-downloads.ableton.com/channels/",
 70 |       versions: versions,
 71 |       os: "Choose...",
 72 |       edition: "Choose...",
 73 |       version: "Choose...",
 74 |     };
 75 |   },
 76 | 
 77 |   methods: {
 78 |     download: function () {
 79 |       let url = this.cdn_path;
 80 | 
 81 |       if (
 82 |         this.os == "Choose..." ||
 83 |         this.edition == "Choose..." ||
 84 |         this.version == "Choose..."
 85 |       ) {
 86 |         alert("Please choose an option from each dropdown menu.");
 87 |       } else {
 88 |         url += `${this.version}/ableton_live_${this.edition}_${this.version}`;
 89 | 
 90 |         if (this.os.startsWith("mac")) {
 91 |           // Updates for Apple Silicon universal binary
 92 |           if (compareVersions(this.version, "11.0.12") > 0) {
 93 |             if (this.os == "mac_intel") {
 94 |               url += "_intel.dmg";
 95 |             } else {
 96 |               url += "_universal.dmg";
 97 |             }
 98 |           } else {
 99 |             url += "_64.dmg";
100 |           }
101 |         } else {
102 |           url += "_64.zip";
103 |         }
104 | 
105 |         window.open(url);
106 |       }
107 |     },
108 |   },
109 | };
110 | </script>
111 | 
112 | <style>
113 | .select-wrapper {
114 |   position: relative;
115 |   display: flex;
116 |   align-items: center;
117 | }
118 | 
119 | .select-wrapper::after {
120 |   content: "";
121 |   position: absolute;
122 |   right: 10px;
123 |   width: 12px;
124 |   height: 8px;
125 |   border-style: solid;
126 |   border-width: 8px 6px 0 6px;
127 |   border-color: #ffffff transparent transparent transparent;
128 |   pointer-events: none;
129 | }
130 | 
131 | select {
132 |   padding: 5px;
133 | }
134 | 
135 | .form-control,
136 | .form-control:focus {
137 |   outline: 0;
138 |   border: 2px solid white;
139 |   background: black;
140 |   color: white;
141 |   border-radius: 0;
142 |   font-weight: bold;
143 |   -webkit-appearance: none;
144 |   text-align: left;
145 |   min-width: 130px;
146 | }
147 | 
148 | @media screen and (max-width: 575px) {
149 |   .select-wrapper {
150 |     flex-direction: column;
151 |   }
152 |   .select-wrapper:after {
153 |     bottom: 17px;
154 |   }
155 |   .btn,
156 |   .form-control {
157 |     width: 100%;
158 |   }
159 |   form .select-wrapper {
160 |     width: 100%;
161 |   }
162 | }
163 | 
164 | @media screen and (max-width: 768px) {
165 |   .form-inline {
166 |     display: block;
167 |   }
168 |   .form-group:after {
169 |     right: 13px;
170 |   }
171 |   .select-wrapper {
172 |     /* background: red; */
173 |     width: 280px;
174 |   }
175 |   .select-wrapper label {
176 |     width: 100px;
177 |   }
178 |   .form-control {
179 |     min-width: 160px;
180 |   }
181 | }
182 | </style>
183 | 


--------------------------------------------------------------------------------