![\"Functional](\"https://cloud.githubusercontent.com/assets/6069066/13900465/730f2922-ee20-11e5-8df0-e7b51c668847.png\")
\n\n#### Account service\nContains general input logic and validation: incomes/expenses items, savings and account settings.\n\nMethod\t| Path\t| Description\t| User authenticated\t| Available from UI\n------------- | ------------------------- | ------------- |:-------------:|:----------------:|\nGET\t| /accounts/{account}\t| Get specified account data\t| | \t\nGET\t| /accounts/current\t| Get current account data\t| × | ×\nGET\t| /accounts/demo\t| Get demo account data (pre-filled incomes/expenses items, etc)\t| | \t×\nPUT\t| /accounts/current\t| Save current account data\t| × | ×\nPOST\t| /accounts/\t| Register new account\t| | ×\n\n\n#### Statistics service\nPerforms calculations on major statistics parameters and captures time series for each account. Datapoint contains values normalized to base currency and time period. This data is used to track cash flow dynamics during the account lifetime.\n\nMethod\t| Path\t| Description\t| User authenticated\t| Available from UI\n------------- | ------------------------- | ------------- |:-------------:|:----------------:|\nGET\t| /statistics/{account}\t| Get specified account statistics\t | | \t\nGET\t| /statistics/current\t| Get current account statistics\t| × | × \nGET\t| /statistics/demo\t| Get demo account statistics\t| | × \nPUT\t| /statistics/{account}\t| Create or update time series datapoint for specified account\t| | \n\n\n#### Notification service\nStores user contact information and notification settings (reminders, backup frequency etc). Scheduled worker collects required information from other services and sends e-mail messages to subscribed customers.\n\nMethod\t| Path\t| Description\t| User authenticated\t| Available from UI\n------------- | ------------------------- | ------------- |:-------------:|:----------------:|\nGET\t| /notifications/settings/current\t| Get current account notification settings\t| × | ×\t\nPUT\t| /notifications/settings/current\t| Save current account notification settings\t| × | ×\n\n#### Notes\n- Each microservice has its own database, so there is no way to bypass API and access persistence data directly.\n- MongoDB is used as a primary database for each of the services.\n- All services are talking to each other via the Rest API\n\n## Infrastructure\n[Spring cloud](https://spring.io/projects/spring-cloud) provides powerful tools for developers to quickly implement common distributed systems patterns -\n![\"Infrastructure](\"https://cloud.githubusercontent.com/assets/6069066/13906840/365c0d94-eefa-11e5-90ad-9d74804ca412.png\")
\n### Config service\n[Spring Cloud Config](http://cloud.spring.io/spring-cloud-config/spring-cloud-config.html) is horizontally scalable centralized configuration service for the distributed systems. It uses a pluggable repository layer that currently supports local storage, Git, and Subversion.\n\nIn this project, we are going to use `native profile`, which simply loads config files from the local classpath. You can see `shared` directory in [Config service resources](https://github.com/sqshq/PiggyMetrics/tree/master/config/src/main/resources). Now, when Notification-service requests its configuration, Config service responses with `shared/notification-service.yml` and `shared/application.yml` (which is shared between all client applications).\n\n##### Client side usage\nJust build Spring Boot application with `spring-cloud-starter-config` dependency, autoconfiguration will do the rest.\n\nNow you don't need any embedded properties in your application. Just provide `bootstrap.yml` with application name and Config service url:\n```yml\nspring:\n application:\n name: notification-service\n cloud:\n config:\n uri: http://config:8888\n fail-fast: true\n```\n\n##### With Spring Cloud Config, you can change application config dynamically. \nFor example, [EmailService bean](https://github.com/sqshq/PiggyMetrics/blob/master/notification-service/src/main/java/com/piggymetrics/notification/service/EmailServiceImpl.java) is annotated with `@RefreshScope`. That means you can change e-mail text and subject without rebuild and restart the Notification service.\n\nFirst, change required properties in Config server. Then make a refresh call to the Notification service:\n`curl -H \"Authorization: Bearer #token#\" -XPOST http://127.0.0.1:8000/notifications/refresh`\n\nYou could also use Repository [webhooks to automate this process](http://cloud.spring.io/spring-cloud-config/spring-cloud-config.html#_push_notifications_and_spring_cloud_bus)\n\n##### Notes\n- `@RefreshScope` doesn't work with `@Configuration` classes and doesn't ignores `@Scheduled` methods\n- `fail-fast` property means that Spring Boot application will fail startup immediately, if it cannot connect to the Config Service.\n\n### Auth service\nAuthorization responsibilities are extracted to a separate server, which grants [OAuth2 tokens](https://tools.ietf.org/html/rfc6749) for the backend resource services. Auth Server is used for user authorization as well as for secure machine-to-machine communication inside the perimeter.\n\nIn this project, I use [`Password credentials`](https://tools.ietf.org/html/rfc6749#section-4.3) grant type for users authorization (since it's used only by the UI) and [`Client Credentials`](https://tools.ietf.org/html/rfc6749#section-4.4) grant for service-to-service communciation.\n\nSpring Cloud Security provides convenient annotations and autoconfiguration to make this really easy to implement on both server and client side. You can learn more about that in [documentation](http://cloud.spring.io/spring-cloud-security/spring-cloud-security.html).\n\nOn the client side, everything works exactly the same as with traditional session-based authorization. You can retrieve `Principal` object from the request, check user roles using the expression-based access control and `@PreAuthorize` annotation.\n\nEach PiggyMetrics client has a scope: `server` for backend services and `ui` - for the browser. We can use `@PreAuthorize` annotation to protect controllers from an external access:\n\n``` java\n@PreAuthorize(\"#oauth2.hasScope('server')\")\n@RequestMapping(value = \"accounts/{name}\", method = RequestMethod.GET)\npublic List![](\"https://cloud.githubusercontent.com/assets/6069066/14194375/d9a2dd80-f7be-11e5-8bcc-9a2fce753cfe.png\")
\n\n![](\"https://cloud.githubusercontent.com/assets/6069066/14127349/21e90026-f628-11e5-83f1-60108cb33490.gif\")
\t| ![](\"https://cloud.githubusercontent.com/assets/6069066/14127348/21e6ed40-f628-11e5-9fa4-ed527bf35129.gif\")
| ![](\"https://cloud.githubusercontent.com/assets/6069066/14127346/21b9aaa6-f628-11e5-9bba-aaccab60fd69.gif\")
| ![](\"https://cloud.githubusercontent.com/assets/6069066/14127350/21eafe1c-f628-11e5-8ccd-a6b6873c046a.gif\")
\n--- |--- |--- |--- |\n| `0 ms delay` | `500 ms delay` | `800 ms delay` | `1100 ms delay`\n| Well behaving system. Throughput is about 22 rps. Small number of active threads in the Statistics service. Median service time is about 50 ms. | The number of active threads is growing. We can see purple number of thread-pool rejections and therefore about 40% of errors, but the circuit is still closed. | Half-open state: the ratio of failed commands is higher than 50%, so the circuit breaker kicks in. After sleep window amount of time, the next request goes through. | 100 percent of the requests fail. The circuit is now permanently open. Retry after sleep time won't close the circuit again because a single request is too slow.\n\n### Log analysis\n\nCentralized logging can be very useful while attempting to identify problems in a distributed environment. Elasticsearch, Logstash and Kibana stack lets you search and analyze your logs, utilization and network activity data with ease.\n\n### Distributed tracing\n\nAnalyzing problems in distributed systems can be difficult, especially trying to trace requests that propagate from one microservice to another.\n\n[Spring Cloud Sleuth](https://cloud.spring.io/spring-cloud-sleuth/) solves this problem by providing support for the distributed tracing. It adds two types of IDs to the logging: `traceId` and `spanId`. `spanId` represents a basic unit of work, for example sending an HTTP request. The traceId contains a set of spans forming a tree-like structure. For example, with a distributed big-data store, a trace might be formed by a PUT request. Using `traceId` and `spanId` for each operation we know when and where our application is as it processes a request, making reading logs much easier. \n\nThe logs are as follows, notice the `[appname,traceId,spanId,exportable]` entries from the Slf4J MDC:\n\n```text\n2018-07-26 23:13:49.381 WARN [gateway,3216d0de1384bb4f,3216d0de1384bb4f,false] 2999 --- [nio-4000-exec-1] o.s.c.n.z.f.r.s.AbstractRibbonCommand : The Hystrix timeout of 20000ms for the command account-service is set lower than the combination of the Ribbon read and connect timeout, 80000ms.\n2018-07-26 23:13:49.562 INFO [account-service,3216d0de1384bb4f,404ff09c5cf91d2e,false] 3079 --- [nio-6000-exec-1] c.p.account.service.AccountServiceImpl : new account has been created: test\n```\n\n- *`appname`*: The name of the application that logged the span from the property `spring.application.name`\n- *`traceId`*: This is an ID that is assigned to a single request, job, or action\n- *`spanId`*: The ID of a specific operation that took place\n- *`exportable`*: Whether the log should be exported to [Zipkin](https://zipkin.io/)\n\n## Infrastructure automation\n\nDeploying microservices, with their interdependence, is much more complex process than deploying a monolithic application. It is really important to have a fully automated infrastructure. We can achieve following benefits with Continuous Delivery approach:\n\n- The ability to release software anytime\n- Any build could end up being a release\n- Build artifacts once - deploy as needed\n\nHere is a simple Continuous Delivery workflow, implemented in this project:\n\n![](\"https://cloud.githubusercontent.com/assets/6069066/14159789/0dd7a7ce-f6e9-11e5-9fbb-a7fe0f4431e3.png\")
\n\nIn this [configuration](https://github.com/sqshq/PiggyMetrics/blob/master/.travis.yml), Travis CI builds tagged images for each successful git push. So, there are always the `latest` images for each microservice on [Docker Hub](https://hub.docker.com/r/sqshq/) and older images, tagged with git commit hash. It's easy to deploy any of them and quickly rollback, if needed.\n\n## Let's try it out\n\nNote that starting 8 Spring Boot applications, 4 MongoDB instances and a RabbitMq requires at least 4Gb of RAM.\n\n#### Before you start\n- Install Docker and Docker Compose.\n- Change environment variable values in `.env` file for more security or leave it as it is.\n- Build the project: `mvn package [-DskipTests]`\n\n#### Production mode\nIn this mode, all latest images will be pulled from Docker Hub.\nJust copy `docker-compose.yml` and hit `docker-compose up`\n\n#### Development mode\nIf you'd like to build images yourself, you have to clone the repository and build artifacts using maven. After that, run `docker-compose -f docker-compose.yml -f docker-compose.dev.yml up`\n\n`docker-compose.dev.yml` inherits `docker-compose.yml` with additional possibility to build images locally and expose all containers ports for convenient development.\n\nIf you'd like to start applications in Intellij Idea you need to either use [EnvFile plugin](https://plugins.jetbrains.com/plugin/7861-envfile) or manually export environment variables listed in `.env` file (make sure they were exported: `printenv`)\n\n#### Important endpoints\n- http://localhost:80 - Gateway\n- http://localhost:8761 - Eureka Dashboard\n- http://localhost:9000/hystrix - Hystrix Dashboard (Turbine stream link: `http://turbine-stream-service:8080/turbine/turbine.stream`)\n- http://localhost:15672 - RabbitMq management (default login/password: guest/guest)\n\n## Contributions are welcome!\n\nPiggyMetrics is open source, and would greatly appreciate your help. Feel free to suggest and implement any improvements.\n"
},
{
"path": "account-service/Dockerfile",
"content": "FROM java:8-jre\nMAINTAINER Alexander Lukyanchikov \n Creative Commons – Attribution (CC BY 3.0)\n
\n Thanks a lot for icons from The Noun Project collection.\n
\n
\n Here's the list of all used icons:\n
\n Piggy Bank designed by Jezmael Basilio\n
\n Arrow designed by Jardson A.\n
\n Wallet designed by Luis Prado\n
\n Analytics designed by Aneeque Ahmed\n
\n Piggy Bank designed by Michelle Ann\n
\n Light Bulb designed by Chris Brunskill\n
\n Speech Bubble designed by Cengiz SARI\n
\n Bag designed by Agus Purwanto\n
\n Analytics designed by Luboš Volkov\n
\n College Tuition designed by Rediffusion\n
\n Marijuana designed by Gareth\n
\n Stroller designed by Edward Boatman\n
\n Television designed by Piero Borgo\n
\n Island designed by Bohdan Burmich\n
\n Light Bulb designed by Rémy Médard\n
\n Shirt designed by Megan Sheehan\n
\n Telephone designed by Ian Mawle\n
\n Shopping Cart designed by Megan Sheehan\n
\n Gas designed by Jon Testa\n
\n\n\n"
},
{
"path": "gateway/src/main/resources/static/css/animation.css",
"content": "/* ZOOM AVATAR */\n@-webkit-keyframes zoomavatar {\n\t0% {\n\t\t-webkit-transform: scale(0.1);\n\t}\n\t60% {\n\t\t-webkit-transform: scale(1.3);\n\t}\n\t100% {\n\t\t-webkit-transform: scale(1);\n\t}\n}\n@-moz-keyframes zoomavatar {\n\t0% {\n\t\t-moz-transform: scale(0.1);\n\t}\n\t80% {\n\t\t-moz-transform: scale(1.3);\n\t}\n\t100% {\n\t\t-moz-transform: scale(1);\n\t}\n}\n@-o-keyframes zoomavatar {\n\t0% {\n\t\t-o-transform: scale(0.1);\n\t}\n\t60% {\n\t\t-o-transform: scale(1.3);\n\t}\n\t100% {\n\t\t-o-transform: scale(1);\n\t}\n}\n@-ms-keyframes zoomavatar {\n\t0% {\n\t\t-ms-transform: scale(0.1);\n\t}\n\t60% {\n\t\t-ms-transform: scale(1.3);\n\t}\n\t100% {\n\t\t-ms-transform: scale(1);\n\t}\n}\n@keyframes zoomavatar {\n\t0% {\n\t\ttransform: scale(0.1);\n\t}\n\t60% {\n\t\ttransform: scale(1.3);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n/* UNZOOM AVATAR */\n@-webkit-keyframes unzoomavatar {\n\t0% {\n\t\t-webkit-transform: scale(1);\n\t}\n\t40% {\n\t\t-webkit-transform: scale(1.3);\n\t}\n\t100% {\n\t\t-webkit-transform: scale(0.1);\n\t}\n}\n@-moz-keyframes unzoomavatar {\n\t0% {\n\t\t-moz-transform: scale(1);\n\t}\n\t40% {\n\t\t-moz-transform: scale(1.3);\n\t}\n\t100% {\n\t\t-moz-transform: scale(0.1);\n\t}\n}\n@-o-keyframes unzoomavatar {\n\t0% {\n\t\t-o-transform: scale(1);\n\t}\n\t40% {\n\t\t-o-transform: scale(1.3);\n\t}\n\t100% {\n\t\t-o-transform: scale(0.1);\n\t}\n}\n@-ms-keyframes unzoomavatar {\n\t0% {\n\t\t-ms-transform: scale(1);\n\t}\n\t40% {\n\t\t-ms-transform: scale(1.3);\n\t}\n\t100% {\n\t\t-ms-transform: scale(0.1);\n\t}\n}\n@keyframes unzoomavatar {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t40% {\n\t\ttransform: scale(1.3);\n\t}\n\t100% {\n\t\ttransform: scale(0.1);\n\t}\n}\n/* GO LEFT */\n@-webkit-keyframes goleft {\n\t0% {\n\t\tright: 100px; left:0%;\n\t}\n\t60% {\n\t\tright: 300px; left:-20%;\n\t}\n\t100% {\n\t\tright: 300px; left:-18%;\n\t}\n}\n@-moz-keyframes goleft {\n\t0% {\n\t\tright: 100px; left:0%;\n\t}\n\t60% {\n\t\tright: 300px; left:-20%;\n\t}\n\t100% {\n\t\tright: 300px; left:-18%;\n\t}\n}\n@-o-keyframes goleft {\n\t0% {\n\t\tright: 100px; left:0%;\n\t}\n\t60% {\n\t\tright: 300px; left:-20%;\n\t}\n\t100% {\n\t\tright: 300px; left:-18%;\n\t}\n}\n@-ms-keyframes goleft {\n\t0% {\n\t\tright: 100px; left:0%;\n\t}\n\t60% {\n\t\tright: 300px; left:-20%;\n\t}\n\t100% {\n\t\tright: 300px; left:-18%;\n\t}\n}\n@keyframes goleft {\n\t0% {\n\t\tright: 100px; left:0%;\n\t}\n\t60% {\n\t\tright: 300px; left:-20%;\n\t}\n\t100% {\n\t\tright: 300px; left:-18%;\n\t}\n}\n/* GO RIGHT */\n@-webkit-keyframes goright {\n\t0% {\n\t\tright: -100px; left:0%;\n\t}\n\t60% {\n\t\tright: -300px; left:20%;\n\t}\n\t100% {\n\t\tright: -300px; left:18%;\n\t}\n}\n@-moz-keyframes goright {\n\t0% {\n\t\tright: -100px; left:0%;\n\t}\n\t60% {\n\t\tright: -300px; left:20%;\n\t}\n\t100% {\n\t\tright: -300px; left:18%;\n\t}\n}\n@-o-keyframes goright {\n\t0% {\n\t\tright: -100px; left:0%;\n\t}\n\t60% {\n\t\tright: -300px; left:20%;\n\t}\n\t100% {\n\t\tright: -300px; left:18%;\n\t}\n}\n@-ms-keyframes goright {\n\t0% {\n\t\tright: -100px; left:0%;\n\t}\n\t60% {\n\t\tright: -300px; left:20%;\n\t}\n\t100% {\n\t\tright: -300px; left:18%;\n\t}\n}\n@keyframes goright {\n\t0% {\n\t\tright: -100px; left:0%;\n\t}\n\t60% {\n\t\tright: -300px; left:20%;\n\t}\n\t100% {\n\t\tright: -300px; left:18%;\n\t}\n}\n/* GO DOWN */\n@-webkit-keyframes godown {\n\t0% {\n\t\tbottom:20%;\n\t}\n\t60% {\n\t\tbottom:4%;\n\t}\n\t100% {\n\t\tbottom:8%;\n\t}\n}\n@-moz-keyframes godown {\n\t0% {\n\t\tbottom:20%;\n\t}\n\t60% {\n\t\tbottom:4%;\n\t}\n\t100% {\n\t\tbottom:8%;\n\t}\n}\n@-o-keyframes godown {\n\t0% {\n\t\tbottom:20%;\n\t}\n\t60% {\n\t\tbottom:4%;\n\t}\n\t100% {\n\t\tbottom:8%;\n\t}\n}\n@-ms-keyframes godown {\n\t0% {\n\t\tbottom:20%;\n\t}\n\t60% {\n\t\tbottom:4%;\n\t}\n\t100% {\n\t\tbottom:8%;\n\t}\n}\n@keyframes godown {\n\t0% {\n\t\tbottom:20%;\n\t}\n\t60% {\n\t\tbottom:4%;\n\t}\n\t100% {\n\t\tbottom:8%;\n\t}\n}\n/* PLUS */\n@-webkit-keyframes plus {\n\t0% {\n\t\t-webkit-transform: scale(0.85);\n\t}\n\t8% {\n\t\t-webkit-transform: scale(1);\n\t}\n\t80% {\n\t\t-webkit-transform: scale(0.85);\n\t}\n\t100% {\n\t\t-webkit-transform: scale(0.85);\n\t}\n}\n@-moz-keyframes plus {\n\t0% {\n\t\t-moz-transform: scale(0.85);\n\t}\n\t8% {\n\t\t-moz-transform: scale(1);\n\t}\n\t80% {\n\t\t-moz-transform: scale(0.85);\n\t}\n\t100% {\n\t\t-moz-transform: scale(0.85);\n\t}\n}\n@-o-keyframes plus {\n\t0% {\n\t\t-o-transform: scale(0.85);\n\t}\n\t8% {\n\t\t-o-transform: scale(1);\n\t}\n\t80% {\n\t\t-o-transform: scale(0.85);\n\t}\n\t100% {\n\t\t-o-transform: scale(0.85);\n\t}\n}\n@-ms-keyframes plus {\n\t0% {\n\t\t-ms-transform: scale(0.85);\n\t}\n\t8% {\n\t\t-ms-transform: scale(1);\n\t}\n\t80% {\n\t\t-ms-transform: scale(0.85);\n\t}\n\t100% {\n\t\t-ms-transform: scale(0.85);\n\t}\n}\n@keyframes plus {\n\t0% {\n\t\ttransform: scale(0.85);\n\t}\n\t8% {\n\t\ttransform: scale(1);\n\t}\n\t80% {\n\t\ttransform: scale(0.85);\n\t}\n\t100% {\n\t\ttransform: scale(0.85);\n\t}\n}\n\n/* SLIDER */\n@-webkit-keyframes endoflist {\n\t0% {\n\t\t-webkit-transform: translateY(0px);\n\t}\n\t20% {\n\t\t-webkit-transform: translateY(-60px);\n\t}\n\t100% {\n\t\t-webkit-transform: translateY(0px);\n\t}\n}\n@-moz-keyframes endoflist {\n\t0% {\n\t\t-moz-transform: translateY(0px);\n\t}\n\t20% {\n\t\t-moz-transform: translateY(-60px);\n\t}\n\t100% {\n\t\t-moz-transform: translateY(0px);\n\t}\n}\n@-o-keyframes endoflist {\n\t0% {\n\t\t-o-transform: translateY(0px);\n\t}\n\t20% {\n\t\t-o-transform: translateY(-60px);\n\t}\n\t100% {\n\t\t-o-transform: translateY(0px);\n\t}\n}\n@-ms-keyframes endoflist {\n\t0% {\n\t\t-ms-transform: translateY(0px);\n\t}\n\t20% {\n\t\t-ms-transform: translateY(-60px);\n\t}\n\t100% {\n\t\t-ms-transform: translateY(0px);\n\t}\n}\n@keyframes endoflist {\n\t0% {\n\t\ttransform: translateY(0px);\n\t}\n\t20% {\n\t\ttransform: translateY(-60px);\n\t}\n\t100% {\n\t\ttransform: translateY(0px);\n\t}\n}\n\n@-webkit-keyframes startoflist {\n\t0% {\n\t\t-webkit-transform: translateY(0px);\n\t}\n\t20% {\n\t\t-webkit-transform: translateY(60px);\n\t}\n\t100% {\n\t\t-webkit-transform: translateY(0px);\n\t}\n}\n@-moz-keyframes startoflist {\n\t0% {\n\t\t-moz-transform: translateY(0px);\n\t}\n\t20% {\n\t\t-moz-transform: translateY(60px);\n\t}\n\t100% {\n\t\t-moz-transform: translateY(0px);\n\t}\n}\n@-o-keyframes startoflist {\n\t0% {\n\t\t-o-transform: translateY(0px);\n\t}\n\t20% {\n\t\t-o-transform: translateY(60px);\n\t}\n\t100% {\n\t\t-o-transform: translateY(0px);\n\t}\n}\n@-ms-keyframes startoflist {\n\t0% {\n\t\t-ms-transform: translateY(0px);\n\t}\n\t20% {\n\t\t-ms-transform: translateY(60px);\n\t}\n\t100% {\n\t\t-ms-transform: translateY(0px);\n\t}\n}\n@keyframes startoflist {\n\t0% {\n\t\ttransform: translateY(0px);\n\t}\n\t20% {\n\t\ttransform: translateY(60px);\n\t}\n\t100% {\n\t\ttransform: translateY(0px);\n\t}\n}\n\n\n@-webkit-keyframes frameanimate {\n\t0% {\n\t\t-webkit-transform: translateY(-284px);\n\t}\n\t50% {\n\t\t-webkit-transform: translateY(50px);\n\t}\n\t100% {\n\t\t-webkit-transform: translateY(0px);\n\t}\n}\n@-moz-keyframes frameanimate {\n\t0% {\n\t\t-moz-transform: translateY(-284px);\n\t}\n\t50% {\n\t\t-moz-transform: translateY(100px);\n\t}\n\t100% {\n\t\t-moz-transform: translateY(0px);\n\t}\n}\n@-o-keyframes frameanimate {\n\t0% {\n\t\t-o-transform: translateY(-284px);\n\t}\n\t50% {\n\t\t-o-transform: translateY(100px);\n\t}\n\t100% {\n\t\t-o-transform: translateY(0px);\n\t}\n}\n@-ms-keyframes frameanimate {\n\t0% {\n\t\t-ms-transform: translateY(-284px);\n\t}\n\t50% {\n\t\t-ms-transform: translateY(100px);\n\t}\n\t100% {\n\t\t-ms-transform: translateY(0px);\n\t}\n}\n@keyframes frameanimate {\n\t0% {\n\t\ttransform: translateY(-284px);\n\t}\n\t50% {\n\t\ttransform: translateY(100px);\n\t}\n\t100% {\n\t\ttransform: translateY(0px);\n\t}\n}\n\n/*MODAL WINDOWS*/\n\n/* MODAL FORWARD */\n@-webkit-keyframes modalforward {\n\t0% {\n\t\t-webkit-transform: scale(0.4);\n\t}\n\t60% {\n\t\t-webkit-transform: scale(1.1);\n\t}\n\t100% {\n\t\t-webkit-transform: scale(1);\n\t}\n}\n@-moz-keyframes modalforward {\n\t0% {\n\t\t-moz-transform: scale(0.4);\n\t}\n\t80% {\n\t\t-moz-transform: scale(1.1);\n\t}\n\t100% {\n\t\t-moz-transform: scale(1);\n\t}\n}\n@-o-keyframes modalforward {\n\t0% {\n\t\t-o-transform: scale(0.4);\n\t}\n\t60% {\n\t\t-o-transform: scale(1.1);\n\t}\n\t100% {\n\t\t-o-transform: scale(1);\n\t}\n}\n@-ms-keyframes modalforward {\n\t0% {\n\t\t-ms-transform: scale(0.4);\n\t}\n\t60% {\n\t\t-ms-transform: scale(1.1);\n\t}\n\t100% {\n\t\t-ms-transform: scale(1);\n\t}\n}\n@keyframes modalforward {\n\t0% {\n\t\ttransform: scale(0.4);\n\t}\n\t60% {\n\t\ttransform: scale(1.1);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n/* UNZOOM REVERSE */\n@-webkit-keyframes modalreverse {\n\t0% {\n\t\t-webkit-transform: scale(1);\n\t}\n\t40% {\n\t\t-webkit-transform: scale(1.06);\n\t}\n\t100% {\n\t\t-webkit-transform: scale(0.6);\n\t}\n}\n@-moz-keyframes modalreverse {\n\t0% {\n\t\t-moz-transform: scale(1);\n\t}\n\t40% {\n\t\t-moz-transform: scale(1.06);\n\t}\n\t100% {\n\t\t-moz-transform: scale(0.6);\n\t}\n}\n@-o-keyframes modalreverse {\n\t0% {\n\t\t-o-transform: scale(1);\n\t}\n\t40% {\n\t\t-o-transform: scale(1.06);\n\t}\n\t100% {\n\t\t-o-transform: scale(0.6);\n\t}\n}\n@-ms-keyframes modalreverse {\n\t0% {\n\t\t-ms-transform: scale(1);\n\t}\n\t40% {\n\t\t-ms-transform: scale(1.06);\n\t}\n\t100% {\n\t\t-ms-transform: scale(0.6);\n\t}\n}\n@keyframes modalreverse {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t40% {\n\t\ttransform: scale(1.06);\n\t}\n\t100% {\n\t\ttransform: scale(0.6);\n\t}\n}\n/* MODAL VALUE ERROR */\n@-webkit-keyframes modalvalueerror {\n\t0% {\n\t\t-webkit-transform: scale(1);\n\t}\n\t50% {\n\t\t-webkit-transform: scale(1.5);\n\t}\n\t100% {\n\t\t-webkit-transform: scale(1);\n\t}\n}\n@-moz-keyframes modalvalueerror {\n\t0% {\n\t\t-moz-transform: scale(1);\n\t}\n\t40% {\n\t\t-moz-transform: scale(1.5);\n\t}\n\t100% {\n\t\t-moz-transform: scale(1);\n\t}\n}\n@-o-keyframes modalvalueerror {\n\t0% {\n\t\t-o-transform: scale(1);\n\t}\n\t40% {\n\t\t-o-transform: scale(1.5);\n\t}\n\t100% {\n\t\t-o-transform: scale(1);\n\t}\n}\n@-ms-keyframes modalvalueerror {\n\t0% {\n\t\t-ms-transform: scale(1);\n\t}\n\t40% {\n\t\t-ms-transform: scale(1.5);\n\t}\n\t100% {\n\t\t-ms-transform: scale(1);\n\t}\n}\n@keyframes modalvalueerror {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t40% {\n\t\ttransform: scale(1.5);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n/* NEW ITEM ADDED */\n@-webkit-keyframes newitemadded {\n\t20% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t70% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t100% {\n\t\tbackground-color: white;\n\t}\n}\n@-moz-keyframes newitemadded {\n\t30% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t70% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t100% {\n\t\tbackground-color: white;\n\t}\n}\n@-o-keyframes newitemadded {\n\t30% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t70% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t100% {\n\t\tbackground-color: white;\n\t}\n}\n@-ms-keyframes newitemadded {\n\t30% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t70% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t100% {\n\t\tbackground-color: white;\n\t}\n}\n@keyframes newitemadded {\n\t30% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t70% {\n\t\tbackground-color: #f2f2f2;\n\t}\n\t100% {\n\t\tbackground-color: white;\n\t}\n}\n/* BUBBLE */\n\n@-webkit-keyframes bubble {\n\t5% {\n\t\topacity: 0;\n\t\tbackground-position: -280px 0;\n\t\ttop: 21px; right: 10px;\n\t}\n\t10% {\n\t\topacity: 0;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t40% {\n\t\topacity: 1;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t80% {\n\t\topacity: 1;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t90% {\n\t\topacity: 0;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t95% {\n\t\topacity: 0;\n\t\tbackground-position: -280px 0;\n\t\ttop: 21px; right: 10px;\n\t}\n\t100% {\n\t\topacity: 1;\n\t\tbackground-position: -280px 0;\n\t\ttop: 21px; right: 10px;\n\t}\n}\n@-moz-keyframes bubble {\n\t5% {\n\t\topacity: 0;\n\t\tbackground-position: -280px 0;\n\t\ttop: 21px; right: 10px;\n\t}\n\t10% {\n\t\topacity: 0;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t40% {\n\t\topacity: 1;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t80% {\n\t\topacity: 1;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t90% {\n\t\topacity: 0;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t95% {\n\t\topacity: 0;\n\t\tbackground-position: -280px 0;\n\t\ttop: 21px; right: 10px;\n\t}\n\t100% {\n\t\topacity: 1;\n\t\tbackground-position: -280px 0;\n\t\ttop: 21px; right: 10px;\n\t}\n}\n@keyframes bubble {\n\t5% {\n\t\topacity: 0;\n\t\tbackground-position: -280px 0;\n\t\ttop: 21px; right: 10px;\n\t}\n\t10% {\n\t\topacity: 0;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t40% {\n\t\topacity: 1;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t80% {\n\t\topacity: 1;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t90% {\n\t\topacity: 0;\n\t\tbackground-position: -240px 0;\n\t\ttop: 12px; right: 12px;\n\t}\n\t95% {\n\t\topacity: 0;\n\t\tbackground-position: -280px 0;\n\t\ttop: 21px; right: 10px;\n\t}\n\t100% {\n\t\topacity: 1;\n\t\tbackground-position: -280px 0;\n\t\ttop: 21px; right: 10px;\n\t}\n}\n@-webkit-keyframes spincircle {\n\t0% {\n\t\t-webkit-transform: rotate(0deg);\n\t}\n\t95% {\n\t\t-webkit-transform: rotate(360deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(370deg);\n\t}\n}\n@-moz-keyframes spincircle {\n\t0% {\n\t\t-moz-transform: rotate(0deg);\n\t}\n\t95% {\n\t\t-moz-transform: rotate(360deg);\n\t}\n\t100% {\n\t\t-moz-transform: rotate(370deg);\n\t}\n}\n@-o-keyframes spincircle {\n\t0% {\n\t\t-o-transform: rotate(0deg);\n\t}\n\t95% {\n\t\t-o-transform: rotate(360deg);\n\t}\n\t100% {\n\t\t-o-transform: rotate(370deg);\n\t}\n}\n@-ms-keyframes spincircle {\n\t0% {\n\t\t-ms-transform: rotate(0deg);\n\t}\n\t95% {\n\t\t-ms-transform: rotate(360deg);\n\t}\n\t100% {\n\t\t-ms-transform: rotate(370deg);\n\t}\n}\n@keyframes spincircle {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t95% {\n\t\t-transform: rotate(360deg);\n\t}\n\t100% {\n\t\ttransform: rotate(370deg);\n\t}\n}\n"
},
{
"path": "gateway/src/main/resources/static/css/launch.css",
"content": "#createaccount, #enter, #secondenter, #info, #backlogin, #backpassword, #plusavatar, .columnimage {\n\tbackground: url(\"../images/1pagesprites.png\") no-repeat;\n\tbackground-size: 650px 197px;\n}\n\n@media only screen and (-webkit-min-device-pixel-ratio: 1.5),\nonly screen and (min-resolution: 144dpi) {\n\t#createaccount, #enter, #secondenter, #info, #backlogin, #backpassword, #plusavatar, .columnimage {\n\t\tbackground: url(\"../images/1pagesprites@2x.png\") no-repeat;\n\t\tbackground-size: 650px 197px;\n\t}\n}\n\n/*========================== CARDS WRAPPER ===========================*/\n\n#loginpage {\n\ttop:0; bottom: 0; left:0; right: 0;\n\tposition: absolute;\n\tmargin: auto;\n\twidth: 300px;\n\theight: 500px;\n\t-webkit-perspective: 1000px;\n\t-moz-perspective: 1000px;\n\t-ms-perspective: 1000px;\n\t-o-perspective: 1000px;\n\tperspective: 1000px;\n\tdisplay: none;\n}\n.CCattribution {\n\tposition: relative;\n\ttop: 50px;\n\ttext-align: center;\n\tfont-family: \"Helvetica\", \"Arial\";\n\tfont-size: 12px;\n\tline-height: 30px;\n\tcolor: #525252;\n\tpadding-bottom: 90px;\n}\n.CCattribution a {\n\tcolor: #7ba1b4;\n}\n\n#loginpage, .front, .back {\n\twidth: 300px;\n\theight: 500px;\n}\n#flipper {\n\t-webkit-transform-style: preserve-3d;\n\t-moz-transform-style: preserve-3d;\n\t-ms-transform-style: preserve-3d;\n\t-o-transform-style: preserve-3d;\n\ttransform-style: preserve-3d;\n\t-moz-backface-visibility: hidden;\n\t-webkit-transition: 1000ms;\n\t-moz-transition: 1000ms;\n\t-ms-transition: 1000ms;\n\t-o-transition: 1000ms;\n\ttransition: 1000ms;\n\tposition: relative;\n\toverflow: visible;\n}\n.flippedcardinfo {\n\t-webkit-transform: rotateY(180deg);\n\t-moz-transform: rotateY(180deg);\n\t-ms-transform: rotateY(180deg);\n\t-o-transform: rotateY(180deg);\n\ttransform: rotateY(180deg);\n}\n.FRONTCARD, .BACKCARD {\n\t-webkit-backface-visibility: hidden;\n\t-moz-backface-visibility: hidden;\n\t-ms-backface-visibility: hidden;\n\t-o-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\toverflow: visible;\n\ttop:0; bottom: 0; left:0; right: 0;\n\tposition: absolute;\n\ttext-align: center;\n\twidth: 300px;\n}\n.fliptext {\n\tposition: absolute;\n\ttext-transform: uppercase;\n\tleft: 0px; right: 0px; bottom: -10px;\n\theight: 30px;\n\tfont-size: 11px;\n\tcolor: #6e6e6e;\n\tline-height: 0.95em;\n\tdisplay: inline-block;\n\tfont-family: Arial;\n\tbackground-color: white;\n}\n.fliptext a{\n\tcolor: #96bcce;\n\ttext-decoration: none;\n\tborder-bottom: 1px dashed #96bcce;\n}\n.fliptext a:hover{\n\tcolor: #7ba1b4;\n\ttext-decoration: none;\n\tborder-bottom: 1px dashed #7ba1b4;\n}\n\n/*================================= FIRST CARD =================================*/\n.FRONTCARD {\n\tz-index: 2;\n\theight: 450px;\n\tbackground-color: white;\n\t-webkit-transform: rotateY(0deg);\n\t-moz-transform: rotateY(0deg);\n\t-ms-transform: rotateY(0deg);\n\t-o-transform: rotateY(0deg);\n\ttransform: rotateY(0deg);\n}\n.auto-shake{\n\t-webkit-animation: 1s auto-shake ease-out;\n\t-moz-animation: 1s auto-shake ease-out;\n\t-o-animation: 1s auto-shake ease-out;\n\t-ms-animation: 1s auto-shake ease-out;\n\tanimation: 1s auto-shake ease-out;\n}\n.hover-shake{\n\t-webkit-animation: 1.6s hover-shake ease-out;\n\t-moz-animation: 1.6s hover-shake ease-out;\n\t-o-animation: 1.6s hover-shake ease-out;\n\t-ms-animation: 1.6s hover-shake ease-out;\n\tanimation: 1.6s hover-shake ease-out;\n}\n.loadingspin{\n\t-webkit-animation: 2s loadingspin;\n\t-moz-animation: 2s loadingspin;\n\t-o-animation: 2s loadingspin;\n\t-ms-animation: 2s loadingspin;\n\tanimation: 2s loadingspin;\n}\n#piggy {\n\tdisplay: block;\n\tbackground: url(\"../images/piggy_large.gif\") no-repeat;\n\tbackground-size: 178px 178px;\n\twidth: 178px;\n\theight: 178px;\n\tposition: relative;\n\tmargin: auto;\n\tz-index: 50;\n}\n#enter, #secondenter {\n\t-webkit-animation: enterarrow 2s infinite;\n\t-moz-animation: enterarrow 2s infinite;\n\t-o-animation: enterarrow 2s infinite;\n\t-ms-animation: enterarrow 2s infinite;\n\tanimation: enterarrow 2s infinite;\n\tbackground-position: -190px -60px;\n\tmargin-left: 222px;\n\tmargin-top: 18px;\n\twidth: 52px;\n\theight: 12px;\n\tposition: absolute;\n\tcursor: pointer;\n\tdisplay: none;\n\tz-index: 7;\n}\n#secondenter{\n\tposition: absolute;\n\tbottom: 85px;\n\tz-index: 4;\n}\n#preloader{\n\tbackground: url(\"../images/preloader.gif\") center no-repeat;\n\tbackground-size: 18px 18px;\n\tmargin-left: 210px;\n\tbottom: 69px;\n\tposition: absolute;\n\tdisplay: none;\n\twidth: 52px;\n\theight: 46px;\n\tz-index: 5;\n}\n\n/*FLIP BUTTON*/\n#wrapper {\n\tdisplay: block;\n\tfont-size: 13px;\n\tcolor: black;\n\tposition: absolute;\n\ttop: 335px;\n\twidth: 300px;\n\theight: 46px;\n\t-webkit-perspective: 1100px;\n\t-moz-perspective: 1100px;\n\t-ms-perspective: 1100px;\n\t-o-perspective: 1100px;\n\tperspective: 1100px;\n\t-ms-transform: rotated3(1,0,0,0);\n\t-webkit-transform-origin: 50% 46px 0;\n\t-moz-transform-origin: 50% 46px 0;\n\t-ms-transform-origin: 50% 46px 0;\n\t-o-transform-origin: 50% 46px 0;\n\ttransform-origin: 10% 46px 0;\n\tz-index: 3;\n}\n#cube {\n\tposition: absolute;\n\twidth: 300px;\n\theight: 46px;\n\t-webkit-transform-style: preserve-3d;\n\t-moz-transform-style: preserve-3d;\n\t-ms-transform-style: preserve-3d;\n\t-o-transform-style: preserve-3d;\n\ttransform-style: preserve-3d;\n\n\t-webkit-transition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);\n\t-moz-transition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);\n\t-ms-transition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);\n\t-o-transition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);\n\ttransition: all 400ms cubic-bezier(0.67, 0.07, 0.50, 0.88);\n}\n.flippedform{\n\t-webkit-transform-origin: 0 46px -46px;\n\t-moz-transform-origin: 0 46px -46px;\n\t-ms-transform-origin: 0 46px -46px;\n\t-o-transform-origin: 0 46px -46px;\n\ttransform-origin: 0 46px -46px;\n\t-webkit-transform: rotate3d(1,0,0,90deg);\n\t-moz-transform: rotate3d(1,0,0,90deg);\n\t-ms-transform: rotate3d(1,0,0,90deg);\n\t-o-transform: rotate3d(1,0,0,90deg);\n\ttransform: rotate3d(1,0,0,90deg);\n}\n.side {\n\toutline: 3px double #a6ccd9;\n\ttext-indent: 15px;\n\twidth: 300px;\n\theight: 46px;\n\tline-height: 48px;\n\tposition: absolute;\n}\n#backlogin, #backpassword {\n\tdisplay: block;\n\tposition: absolute;\n\tleft: 66px;\n\ttop: 12px;\n\tborder-color: 1px solid;\n\twidth: 22px;\n\theight: 20px;\n}\n#backlogin {\n\tbackground-position: -250px -24px;\n}\n#backpassword {\n\tbackground-position: -250px 0;\n}\n#side1 {\n\tbackground-position: -250px -24px;\n\tbackground-color: white;\n\twidth: 300px;\n\theight: 46px;\n}\n#side2 {\n\tbackground-color: white;\n\t-webkit-transform: translateZ(-23px) translateY(23px) rotateX(-90deg);\n\t-moz-transform: translateZ(-23px) translateY(23px) rotateX(-90deg);\n\t-ms-transform: translateZ(-23px) translateY(23px) rotateX(-90deg);\n\t-o-transform: translateZ(-23px) translateY(23px) rotateX(-90deg);\n\ttransform: translateZ(-23px) translateY(23px) rotateX(-90deg);\n}\n\n/* END OF FLIP BUTTON */\n\n#logotext {\n\tbackground: url(\"../images/logotext_large.gif\") no-repeat;\n\tbackground-size: 172px 65px;\n\twidth: 172px;\n\theight: 65px;\n\tposition: relative;\n\tmargin: auto;\n\tmargin-top: 36px;\n}\n#info {\n\tbackground-position: -190px 0;\n\tcursor: pointer;\n\twidth: 49px;\n\theight: 49px;\n\tposition: absolute;\n\tmargin: auto;\n\ttop:-10px;\n\tright: -20px;\n}\n\n/* FIRST CARD FORMS */\n\ninput[class=\"frontforms\"]{\n\tborder: 0px solid;\n\tposition: relative;\n\tcolor: #4c4c4c;\n\tfont-family: Arial;\n\tfont-size: 15px;\n}\ninput[id=\"frontloginform\"]{\n\tmargin-left: 20px;\n\theight: 25px;\n\twidth: 110px;\n}\ninput[id=\"frontpasswordform\"]{\n\tmargin-left: 25px;\n\theight: 25px;\n\twidth: 95px;\n}\n.ghostform {\n\tdisplay: none;\n}\n\ninput[class=\"backforms\"]:focus { outline: none; }\ninput[class=\"backforms\"]::-webkit-input-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}\ninput[class=\"backforms\"]:-ms-input-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}\ninput[class=\"backforms\"]:-moz-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}\ninput[type=\"text\"]:focus, input[type=\"password\"]:focus { outline: none; }\ninput[class=\"frontforms\"]::-webkit-input-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}\ninput[class=\"frontforms\"]:-ms-input-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}\ninput[class=\"frontforms\"]:-moz-placeholder{font-family: Arial; font-size: 15px; color: #cdcdcd;}\n\n/*================================= SECOND CARD =================================*/\n\n.BACKCARD {\n\t-webkit-transform: rotateY(180deg);\n\t-moz-transform: rotateY(180deg);\n\t-ms-transform: rotateY(180deg);\n\t-o-transform: rotateY(180deg);\n\ttransform: rotateY(180deg);\n\tbackground-color: white;\n\tz-index: 1;\n\theight: 500px;\n}\n#franklin{\n\tborder: 1px solid #b9d6dc;\n\t-webkit-border-radius: 90px;\n\t-ms-border-radius: 90px;\n\t-o-border-radius: 90px;\n\t-moz-border-radius: 90px;\n\tborder-radius: 90px;\n\ttop:0; left: 0; right: 0; bottom: 0;\n\tposition: relative;\n\tmargin: auto;\n\twidth: 162px;\n\theight: 162px;\n\n}\n#plusavatar {\n\t-webkit-transition: 0.4s;\n\t-moz-transition: 0.4s;\n\t-o-transition: 0.4s;\n\t-ms-transition: 0.4s;\n\ttransition: 0.4s;\n\topacity: 0;\n\tfilter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);\n\twidth: 180px;\n\theight: 180px;\n\tposition: absolute;\n\ttop:10px; left:0; right: 0;\n\tbackground-position: 0 -40px;\n\tmargin: auto;\n\tz-index: 2;\n}\n.avataranimation {\n\t-webkit-animation: 2.5s plusavatar;\n\t-moz-animation: 2.5s plusavatar;\n\t-o-animation: 2.5s plusavatar;\n\t-ms-animation: 2.5s plusavatar;\n\tanimation: 2.5s plusavatar;\n}\n.infiniteavataranimation {\n\t-webkit-animation: 1.5s infinite plusavatar;\n\t-moz-animation: 1.5s infinite plusavatar;\n\t-o-animation: 1.5s infinite plusavatar;\n\t-ms-animation: 1.5s infinite plusavatar;\n\tanimation: 1.5s infinite plusavatar;\n}\n\n#createaccount {\n\tbackground-position: -190px -80px;\n\twidth: 134px;\n\theight: 44px;\n\tposition: relative;\n\tmargin: auto;\n\tmargin-top: 24px;\n}\n.inputWrapper {\n\ttop:-335px; left: 0; right: 0; bottom: 0;\n\tmargin: auto;\n\toverflow: hidden;\n\tposition: absolute;\n\tcursor: pointer;\n\twidth: 180px;\n\theight: 180px;\n\tz-index: 3;\n}\n\n.hidden {\n\topacity: 0;\n\t-moz-opacity: 0;\n\tfilter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)\n}\n.upload {\n\t-webkit-animation: plus 2s infinite;\n\t-moz-animation: plus 2s infinite;\n\t-o-animation: plus 2s infinite;\n\t-ms-animation: plus 2s infinite;\n\tanimation: plus 2s infinite;\n}\n#mailform {\n\tposition: absolute;\n\ttop: 190px;\n\tmargin: auto;\n\tright:-120px;\n\ttext-transform: uppercase;\n\twidth: 540px;\n\theight: 330px;\n\tfont-size: 13px;\n\tdisplay: block;\n\topacity: 0.9;\n\tdisplay: none;\n}\n.mailforminfo {\n\tposition: relative;\n\ttext-transform: none;\n\ttop:-60px;\n\tfont-family: \"Museo-500\";\n\tfont-size: 12px;\n\tcolor: #525252;\n}\n.mailforminfosmall {\n\tfont-size: 11px;\n\tposition: relative;\n\ttop: 30px;\n\tline-height: 1.7;\n}\n#skipmail a {\n\tposition: relative;\n\ttext-transform: uppercase;\n\tleft: 0px; right: 0px; bottom: -193px;\n\tfont-size: 11px;\n\tfont-family: Arial;\n\tcolor: #96bcce;\n\ttext-decoration: none;\n\tborder-bottom: 1px dashed #96bcce;\n}\n\n#skipmail a:hover{\n\tcolor: #7ba1b4;\n\ttext-decoration: none;\n\tborder-bottom: 1px dashed #7ba1b4;\n}\n\n/* SECOND CARD FORMS */\n\n#registrationforms {\n\tposition: relative;\n\ttop: 36px;\n\tline-height: 3.3em;\n}\ninput[class=\"backforms\"]{\n\ttext-align: center;\n\tborder: 1px solid #a6ccd9;\n\tcolor: #4c4c4c;\n\tfont-family: Arial;\n\tfont-size: 15px;\n\theight: 30px;\n\twidth: 296px;\n}\ninput[id=\"backmailform\"] {\n\tposition: relative;\n\ttext-align: center;\n\tborder: 1px solid #a6ccd9;\n\tcolor: #4c4c4c;\n\tfont-family: Arial;\n\tfont-size: 15px;\n\theight: 30px;\n\twidth: 296px;\n\ttop: 140px;\n}\n.regbutton, .demobutton, .mailbutton {\n\tcursor: pointer;\n\tposition: relative;\n\tbackground-color: white;\n\tborder: 0px solid;\n\toutline: 3px double #a6ccd9;\n\ttext-transform: uppercase;\n\ttext-shadow: 1px 1px 1px white;\n\tcolor: #6e6e6e;\n}\n.regbutton:hover, .demobutton:hover, .mailbutton:hover {\n\tbackground-color: #f4f9fb;\n}\n.regbutton:active, .demobutton:active, .mailbutton:active {\n\tbackground-color: #ecf3f6;\n}\n\n.regbutton {\n\theight: 34px;\n\twidth: 195px;\n\ttop:18px;\n\tfont-size: 11px;\n}\n.demobutton {\n\tletter-spacing: 3px;\n\theight: 50px;\n\twidth: 300px;\n\ttop: 436px;\n\tfont-size: 12px;\n}\n.mailbutton {\n\tposition: relative;\n\theight: 34px;\n\twidth: 195px;\n\ttop: 178px;\n\tfont-size: 11px;\n}\n\n/* THIRD CARD */\n.flipinfo, .frominfo {\n\tcursor: pointer;\n}\n.infoflipback {\n\tposition: absolute;\n\ttop: -12%;\n\twidth: 100%;\n\theight: 500px;\n\tcursor: pointer;\n}\n#infopage {\n\tmargin-left: -290px;\n\tmargin-top: -90px;\n\theight: 660px;\n\twidth: 870px;\n\tbackground-color: white;\n\tz-index: 4;\n\tdisplay: none;\n\tposition: absolute;\n\tcolor: #525252;\n}\n#regpage {\n\tdisplay: block;\n}\n#infosubtitle, #infotitle, #infofooter, #iconsfooter {\n\tcursor: pointer;\n\tfont-family: \"Museo-500\";\n\tposition: absolute;\n\tleft: 0; right: 0;\n\tmargin: auto;\n\twidth: 100%;\n}\n#infosubtitle {\n\ttext-transform: uppercase;\n\tfont-size: 11px;\n\ttop: 0;\n\theight: 30px;\n}\n#infotitle {\n\ttext-transform: uppercase;\n\tfont-size: 27px;\n\ttop: 35px;\n\theight: 40px;\n}\na#infofooter {\n\tbackground-image: url(\"../images/github.gif\");\n\tbackground-size: 25px 25px;\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tcolor: #757575;\n\ttext-decoration: none;\n\tdisplay: block;\n\tline-height: 120px;\n\tfont-size: 12px;\n\tbottom: 30px;\n\tmargin: auto;\n\twidth: 20%;\n\theight: 25px;\n}\na#iconsfooter {\n\tbackground-position: center;\n\tcolor: #757575;\n\ttext-decoration: none;\n\tfont-size: 10px;\n\tbottom: -30px;\n}\n#infoline {\n\tposition: relative;\n\twidth: 610px;\n\tdisplay: block;\n\tmargin: auto;\n\ttop: 425px;\n\tborder-top: 1px solid #b8d9e1;\n}\n#infolinetext {\n\tfont-family: \"Museo-500\";\n\ttext-transform: uppercase;\n\tletter-spacing: 2px;\n\tfont-size: 10px;\n\tline-height: 30px;\n\tposition: relative;\n\twidth: 245px;\n\theight: 30px;\n\tdisplay: block;\n\tmargin: auto;\n\ttop: 410px;\n\tbackground-color: white;\n}\n.infocolumn {\n\tposition: absolute;\n\ttop: 150px;\n\tmargin: auto;\n\tdisplay: block;\n\twidth: 286px;\n\theight: 236px;\n\toverflow: hidden;\n}\n#infoleft {\n\tleft:0;\n}\n#inforight {\n\tright:0;\n}\n#infocenter {\n\tleft:0; right:0;\n}\n.columnimage {\n\twidth: 104px;\n\theight: 104px;\n\tposition: absolute;\n\tmargin: auto;\n\tleft:0; right: 0; top: 30px;\n}\n#leftcolumn > .columnimage {\n\tbackground-position: -546px 0;\n}\n#rightcolumn > .columnimage {\n\tbackground-position: -330px 0;\n}\n#centercolumn > .columnimage {\n\tbackground-position: -436px 0;\n}\n#leftcolumn, #rightcolumn, #centercolumn {\n\t-moz-transition: 0.8s;\n\t-o-transition: 0.8s ease-out;\n\t-ms-transition: 0.8s ease-out;\n\t-webkit-transition: 0.8s;\n\ttransition: 0.8s;\n\tfont-family: \"Museo-500\";\n\tfont-size: 12px;\n\twidth: 100%;\n\theight: 200%;\n\tposition: absolute;\n\tpadding-top: 157px;\n\ttext-align: center;\n\ttop: 0%;\n}\n#leftcolumn:hover, #rightcolumn:hover, #centercolumn:hover {\n\ttop:-100%;\n}\n.columnfooter {\n\tposition: relative;\n\ttop: 150px;\n\tfont-size: 11px;\n\tline-height: 17px;\n}\n\n@media only screen and (-webkit-min-device-pixel-ratio: 1.5),\nonly screen and (min-resolution: 144dpi) {\n\t#piggy {\n\t\tbackground-image: url(\"../images/piggy_large@2x.gif\");\n\t}\n\t#logotext {\n\t\tbackground-image: url(\"../images/logotext_large@2x.gif\");\n\t}\n}\n\n/* ANIMATION */\n\n/* SPIN THAT SHIT */\n\n@-webkit-keyframes auto-shake {\n\t0% {\n\t\t-webkit-transform: rotate(0deg);\n\t}\n\t35% {\n\t\t-webkit-transform: rotate(55deg);\n\t}\n\t50% {\n\t\t-webkit-transform: rotate(-35deg);\n\t}\n\t70% {\n\t\t-webkit-transform: rotate(20deg);\n\t}\n\t90% {\n\t\t-webkit-transform: rotate(-10deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(0deg);\n\t}\n}\n@-moz-keyframes auto-shake {\n\t0% {\n\t\t-moz-transform: rotate(0deg);\n\t}\n\t35% {\n\t\t-moz-transform: rotate(55deg);\n\t}\n\t50% {\n\t\t-moz-transform: rotate(-35deg);\n\t}\n\t70% {\n\t\t-moz-transform: rotate(20deg);\n\t}\n\t90% {\n\t\t-moz-transform: rotate(-10deg);\n\t}\n\t100% {\n\t\t-moz-transform: rotate(0deg);\n\t}\n}\n@-o-keyframes auto-shake {\n\t0% {\n\t\t-o-transform: rotate(0deg);\n\t}\n\t35% {\n\t\t-o-transform: rotate(55deg);\n\t}\n\t50% {\n\t\t-o-transform: rotate(-35deg);\n\t}\n\t70% {\n\t\t-o-transform: rotate(20deg);\n\t}\n\t90% {\n\t\t-o-transform: rotate(-10deg);\n\t}\n\t100% {\n\t\t-o-transform: rotate(0deg);\n\t}\n}\n@-ms-keyframes auto-shake {\n\t0% {\n\t\t-ms-transform: rotate(0deg);\n\t}\n\t35% {\n\t\t-ms-transform: rotate(55deg);\n\t}\n\t50% {\n\t\t-ms-transform: rotate(-35deg);\n\t}\n\t70% {\n\t\t-ms-transform: rotate(20deg);\n\t}\n\t90% {\n\t\t-ms-transform: rotate(-10deg);\n\t}\n\t100% {\n\t\t-ms-transform: rotate(0deg);\n\t}\n}\n@keyframes auto-shake {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t35% {\n\t\ttransform: rotate(55deg);\n\t}\n\t50% {\n\t\ttransform: rotate(-35deg);\n\t}\n\t70% {\n\t\ttransform: rotate(20deg);\n\t}\n\t90% {\n\t\ttransform: rotate(-10deg);\n\t}\n\t100% {\n\t\ttransform: rotate(0deg);\n\t}\n}\n\n/* SPIN AGAIN */\n\n@-webkit-keyframes hover-shake {\n\t0% {\n\t\t-webkit-transform: rotate(0deg);\n\t}\n\t30% {\n\t\t-webkit-transform: rotate(-30deg);\n\t}\n\t50% {\n\t\t-webkit-transform: rotate(20deg);\n\t}\n\t70% {\n\t\t-webkit-transform: rotate(-10deg);\n\t}\n\t90% {\n\t\t-webkit-transform: rotate(5deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(0deg);\n\t}\n}\n@-moz-keyframes hover-shake {\n\t0% {\n\t\t-moz-transform: rotate(0deg);\n\t}\n\t30% {\n\t\t-moz-transform: rotate(-30deg);\n\t}\n\t50% {\n\t\t-moz-transform: rotate(20deg);\n\t}\n\t70% {\n\t\t-moz-transform: rotate(-10deg);\n\t}\n\t90% {\n\t\t-moz-transform: rotate(5deg);\n\t}\n\t100% {\n\t\t-moz-transform: rotate(0deg);\n\t}\n}\n@-o-keyframes hover-shake {\n\t0% {\n\t\t-o-transform: rotate(0deg);\n\t}\n\t30% {\n\t\t-o-transform: rotate(-30deg);\n\t}\n\t50% {\n\t\t-o-transform: rotate(20deg);\n\t}\n\t70% {\n\t\t-o-transform: rotate(-10deg);\n\t}\n\t90% {\n\t\t-o-transform: rotate(5deg);\n\t}\n\t100% {\n\t\t-o-transform: rotate(0deg);\n\t}\n}\n@-ms-keyframes hover-shake {\n\t0% {\n\t\t-ms-transform: rotate(0deg);\n\t}\n\t30% {\n\t\t-ms-transform: rotate(-30deg);\n\t}\n\t50% {\n\t\t-ms-transform: rotate(20deg);\n\t}\n\t70% {\n\t\t-ms-transform: rotate(-10deg);\n\t}\n\t90% {\n\t\t-ms-transform: rotate(5deg);\n\t}\n\t100% {\n\t\t-ms-transform: rotate(0deg);\n\t}\n}\n@keyframes hover-shake {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t30% {\n\t\transform: rotate(-30deg);\n\t}\n\t50% {\n\t\ttransform: rotate(20deg);\n\t}\n\t70% {\n\t\ttransform: rotate(-10deg);\n\t}\n\t90% {\n\t\ttransform: rotate(5deg);\n\t}\n\t100% {\n\t\ttransform: rotate(0deg);\n\t}\n}\n\n/*LOADING SPIN*/\n\n@-webkit-keyframes loadingspin {\n\t0% {\n\t\t-webkit-transform: rotate(0deg);\n\t}\n\t20% {\n\t\t-webkit-transform: rotate(70deg);\n\t}\n\t70% {\n\t\t-webkit-transform: rotate(-400deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(-360deg);\n\t}\n}\n@-moz-keyframes loadingspin {\n\t0% {\n\t\t-moz-transform: rotate(0deg);\n\t}\n\t20% {\n\t\t-moz-transform: rotate(70deg);\n\t}\n\t70% {\n\t\t-moz-transform: rotate(-400deg);\n\t}\n\t100% {\n\t\t-moz-transform: rotate(-360deg);\n\t}\n}\n@-o-keyframes loadingspin {\n\t0% {\n\t\t-o-transform: rotate(0deg);\n\t}\n\t20% {\n\t\t-o-transform: rotate(70deg);\n\t}\n\t70% {\n\t\t-o-transform: rotate(-400deg);\n\t}\n\t100% {\n\t\t-o-transform: rotate(-360deg);\n\t}\n}\n@-ms-keyframes loadingspin {\n\t0% {\n\t\t-ms-transform: rotate(0deg);\n\t}\n\t20% {\n\t\t-ms-transform: rotate(70deg);\n\t}\n\t70% {\n\t\t-ms-transform: rotate(-400deg);\n\t}\n\t100% {\n\t\t-ms-transform: rotate(-360deg);\n\t}\n}\n@keyframes loadingspin {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t20% {\n\t\ttransform: rotate(70deg);\n\t}\n\t70% {\n\t\ttransform: rotate(-400deg);\n\t}\n\t100% {\n\t\ttransform: rotate(-360deg);\n\t}\n}\n\n/* ENTER ARROW */\n\n@-webkit-keyframes enterarrow {\n\t0% {\n\t\tleft: 0px;\n\t}\n\t5% {\n\t\tleft: -5px;\n\t}\n\t15% {\n\t\tleft: 0px;\n\t}\n\t20% {\n\t\tleft: -5px;\n\t}\n\t35% {\n\t\tleft: 0px;\n\t}\n\t100% {\n\t\tleft: 0px;\n\t}\n}\n@-moz-keyframes enterarrow {\n\t0% {\n\t\tleft: 0px;\n\t}\n\t5% {\n\t\tleft: -5px;\n\t}\n\t15% {\n\t\tleft: 0px;\n\t}\n\t20% {\n\t\tleft: -5px;\n\t}\n\t35% {\n\t\tleft: 0px;\n\t}\n\t100% {\n\t\tleft: 0px;\n\t}\n}\n@-o-keyframes enterarrow {\n\t0% {\n\t\tleft: 0px;\n\t}\n\t5% {\n\t\tleft: -5px;\n\t}\n\t15% {\n\t\tleft: 0px;\n\t}\n\t20% {\n\t\tleft: -5px;\n\t}\n\t35% {\n\t\tleft: 0px;\n\t}\n\t100% {\n\t\tleft: 0px;\n\t}\n}\n@-ms-keyframes enterarrow {\n\t0% {\n\t\tleft: 0px;\n\t}\n\t5% {\n\t\tleft: -5px;\n\t}\n\t15% {\n\t\tleft: 0px;\n\t}\n\t20% {\n\t\tleft: -5px;\n\t}\n\t35% {\n\t\tleft: 0px;\n\t}\n\t100% {\n\t\tleft: 0px;\n\t}\n}\n@keyframes enterarrow {\n\t0% {\n\t\tleft: 0px;\n\t}\n\t5% {\n\t\tleft: -5px;\n\t}\n\t15% {\n\t\tleft: 0px;\n\t}\n\t20% {\n\t\tleft: -5px;\n\t}\n\t35% {\n\t\tleft: 0px;\n\t}\n\t100% {\n\t\tleft: 0px;\n\t}\n}\n\n/*PLUS AVATAR*/\n\n@-webkit-keyframes plusavatar {\n\t0% {\n\t\topacity: 0;\n\t}\n\t30% {\n\t\topacity: 1;\n\t}\n\t80% {\n\t\topacity: 1;\n\t}\n\t100% {\n\t\topacity: 0;\n\t}\n}\n@-moz-keyframes plusavatar {\n\t0% {\n\t\topacity: 0;\n\t}\n\t60% {\n\t\topacity: 1;\n\t}\n\t80% {\n\t\topacity: 1;\n\t}\n\t100% {\n\t\topacity: 0;\n\t}\n}\n@-o-keyframes plusavatar {\n\t0% {\n\t\topacity: 0;\n\t}\n\t60% {\n\t\topacity: 1;\n\t}\n\t80% {\n\t\topacity: 1;\n\t}\n\t100% {\n\t\topacity: 0;\n\t}\n}\n@-ms-keyframes plusavatar {\n\t0% {\n\t\topacity: 0;\n\t}\n\t60% {\n\t\topacity: 1;\n\t}\n\t80% {\n\t\topacity: 1;\n\t}\n\t100% {\n\t\topacity: 0;\n\t}\n}\n@keyframes plusavatar {\n\t0% {\n\t\topacity: 0;\n\t}\n\t60% {\n\t\topacity: 1;\n\t}\n\t80% {\n\t\topacity: 1;\n\t}\n\t100% {\n\t\topacity: 0;\n\t}\n}"
},
{
"path": "gateway/src/main/resources/static/css/style.css",
"content": "@font-face {\n\tfont-family: 'Museo-100';\n\tsrc: url('../fonts/museo-100/museo-100.eot');\n\tsrc: local('@%@'),\n\turl('../fonts/museo-100/museo-100.eot?#iefix') format('embedded-opentype'),\n\turl('../fonts/museo-100/museo-100.woff') format('woff'),\n\turl('../fonts/museo-100/museo-100.svg') format('svg'),\n\turl('../fonts/museo-100/museo-100.ttf') format('truetype');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n@font-face {\n\tfont-family: 'Museo-300';\n\tsrc: url('../fonts/museo-300/museo-300.eot');\n\tsrc: local('@%@'),\n\turl('../fonts/museo-300/museo-300.eot?#iefix') format('embedded-opentype'),\n\turl('../fonts/museo-300/museo-300.woff') format('woff'),\n\turl('../fonts/museo-300/museo-300.svg') format('svg'),\n\turl('../fonts/museo-300/museo-300.ttf') format('truetype');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n@font-face {\n\tfont-family: 'Museo-500';\n\tsrc: url('../fonts/museo-500/museo-500.eot');\n\tsrc: local('@%@'),\n\turl('../fonts/museo-500/museo-500.eot?#iefix') format('embedded-opentype'),\n\turl('../fonts/museo-500/museo-500.woff') format('woff'),\n\turl('../fonts/museo-500/museo-500.svg') format('svg'),\n\turl('../fonts/museo-500/museo-500.ttf') format('truetype');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\nbody {\n\tfont-family: \"Museo-300\", Arial;\n\t-webkit-font-smoothing: antialiased;\n\tmargin: auto;\n\twidth: 100%;\n\theight: 100%;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-o-user-select: none;\n\t-ms-user-select: none;\n\toverflow: hidden;\n}\n.toppage, .bottompage {\n\t-webkit-transition: all 0.6s cubic-bezier(0.94, 0.06, 0.05, 0.95);\n\t-moz-transition: all0.6s cubic-bezier(0.77, 0, 0.175, 1);\n\t-ms-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n\t-o-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n\ttransition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);\n\tposition: absolute;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n}\n.toppage {\n\ttop:0;\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: block;\n}\n.bottompage {\n\ttop:100%;\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: none;\n\tz-index: 600;\n}\n.sectionup {\n\t-webkit-transform: translateY(100%);\n\t-moz-transform: translateY(100%);\n\t-o-transform: translateY(100%);\n\t-ms-transform: translateY(100%);\n\ttransform: translateY(100%);\n}\n.sectionDown {\n\t-webkit-transform: translateY(-100%);\n\t-moz-transform: translateY(-100%);\n\t-o-transform: translateY(-100%);\n\t-ms-transform: translateY(-100%);\n\ttransform: translateY(-100%);\n}\ninput::-ms-clear {\n\tdisplay: none;\n}\ninput[type=\"text\"], input[type=\"password\"], textarea {\n\t-webkit-appearance: none;\n\tbox-shadow: none;\n\t-webkit-box-shadow: none;\n\t-webkit-border-radius: 0px;\n\t-moz-border-radius: 0px;\n\tborder-radius: 0px;\n}\n::-moz-selection {\n\tbackground: rgb(255, 221, 45);\n}\n::selection {\n\tbackground: rgb(255, 221, 45);\n}\n*:focus {outline:0px none transparent;}\n\n#bubble, #indicator, #save, #piggyicon, #rublesign, .arrowup, .arrowdown, .incomes-sprite-title, .close-sign, .modal-save-icon, #modaldeletecross, .initicons-arrow, .expenses-sprite-title, .savings-sprite-title, .triangle, .noUi-handle, .noUi-handle:after {\n\tbackground-size: 538px 84px;\n}\n#chooseicon, .itembackground, .iconbox, .itemlinebackground, #circle-select-1-back, #circle-select-2-back, #circle-select-3-back {\n\tbackground-image: url(\"../images/icons.png\");\n\tbackground-size: 1031px 42px;\n\twidth: 42px;\n\theight: 42px;\n}\n@media only screen and (-webkit-min-device-pixel-ratio: 1.5),\nonly screen and (min-resolution: 144dpi) {\n\t#chooseicon, .itembackground, .iconbox, .itemlinebackground, #circle-select-1-back, #circle-select-2-back, #circle-select-3-back {\n\t\tbackground-image: url(\"../images/icons@2x.png\");\n\t}\n}\n.selectbox .select {\n\twidth: 55px;\n\theight: 24px;\n\tpadding: 0 45px 0 10px;\n\tfont: 12px/24px Arial;\n\tborder: 1px solid #ccc;\n}\n.selectbox .dropdown {\n\ttop: 25px;\n\twidth: 110px;\n\tmargin: 0;\n\tpadding: 0 0;\n\tbackground: #FFF;\n\tborder: 1px solid #ccc;\n\tfont: 12px Arial;\n}\n.selectbox .select .text {\n\tdisplay: block;\n\twidth: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n}\n.selectbox {\n\tcolor: #333;\n\tvertical-align: middle;\n\tcursor: pointer;\n\tmargin-bottom: 26px;\n}\n.selectbox .trigger .arrow {\n\tposition: absolute;\n\ttop: 11px;\n\tright: 10px;\n\tborder-left: 3px solid transparent;\n\tborder-right: 3px solid transparent;\n\tborder-top: 3px solid #a1a1a1;\n\twidth: 0;\n\theight: 0;\n\toverflow: hidden;\n}\n.selectbox .select:active {\n\tbackground: #f8f8f8;\n}\n.selectbox li {\n\tpadding: 5px 10px 6px;\n}\n.selectbox li.selected {\n\tbackground: #f6f6f6;\n}\n.selectbox li:hover {\n\tbackground: #f6f6f6;\n}\n\n#lastlogo {\n\t-webkit-perspective: 1000;\n\t-moz-perspective: 1000px;\n\t-ms-perspective: 1000px;\n\t-o-perspective: 1000px;\n\tperspective: 1000;\n\tposition: absolute;\n\ttop: 8%; left: 0; right: 0;\n\tmargin: auto;\n\tz-index: 1000;\n\twidth: 172px;\n\theight: 204px;\n\tdisplay: none;\n}\n#lastlogoflipper {\n\t-webkit-transform-style: preserve-3d;\n\t-moz-transform-style: preserve-3d;\n\t-ms-transform-style: preserve-3d;\n\t-o-transform-style: preserve-3d;\n\ttransform-style: preserve-3d;\n\t-moz-backface-visibility: hidden;\n\t-webkit-transition: 0.4s;\n\t-moz-transition: 0.4s;\n\t-ms-transition: 0.4s;\n\t-o-transition: 0.4s;\n\ttransition: 0.4s;\n\tposition: relative;\n\toverflow: visible;\n}\n#logo_greeting, #logo_settings {\n\t-moz-transition: 0.3s ease-out;\n\t-o-transition: 0.3s ease-out;\n\t-ms-transition: 0.3s ease-out;\n\t-webkit-transition: 0.3s ease-out;\n\ttransition: 0.3s ease-out;\n\tbackground: url(\"../images/logo_large.gif\") no-repeat;\n\tbackground-size: 137px 204px;\n\tbackground-position: center;\n\twidth: 172px;\n\theight: 204px;\n\tposition: absolute;\n\tmargin: auto;\n\tleft: 0; right: 0;\n\tdisplay: none;\n\tz-index: 600;\n}\n#logo_greeting {\n\tposition: absolute;\n\tdisplay: none;\n\ttop: 8%;\n}\n#logo_settings, #logo_statistic {\n\t-webkit-backface-visibility: hidden;\n\t-moz-backface-visibility: hidden;\n\t-ms-backface-visibility: hidden;\n\t-o-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\toverflow: visible;\n\tposition: absolute;\n\tcursor: pointer;\n}\n#logo_statistic {\n\t-webkit-transform: rotateY(180deg);\n\t-moz-transform: rotateY(180deg);\n\t-ms-transform: rotateY(180deg);\n\t-o-transform: rotateY(180deg);\n\ttransform: rotateY(180deg);\n\tbackground: url(\"../images/logotext_large.gif\") no-repeat;\n\tbackground-size: 172px 65px;\n\twidth: 172px;\n\theight: 65px;\n\tposition: absolute;\n\tcursor: pointer;\n\tz-index: 3000;\n}\n#settings_hat {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 36%;\n\tbackground-color: white;\n\tdisplay: none;\n\tz-index: 500;\n}\n#logoclickplace {\n\twidth: 100%;\n\theight: 100%;\n}\n#bubble {\n\tposition: absolute;\n\ttop:-20px;\n\tright: -60px;\n\tbackground-position: -180px 0;\n\twidth: 57px;\n\theight: 57px;\n\tcursor: pointer;\n\tdisplay: none;\n}\n#indicator {\n\tposition: absolute;\n\tbackground-position: -280px 0;\n\ttop: 21px; right: 10px;\n\twidth: 31px;\n\theight: 31px;\n}\n.bubble-animation {\n\t-webkit-animation: 1s bubble ease-out;\n\t-moz-animation: 1s bubble ease-out;\n\t-o-animation: 1s bubble ease-out;\n\t-ms-animation: 1s bubble ease-out;\n\tanimation: 1s bubble ease-out;\n}\ninput {\n\t-webkit-font-smoothing: antialiased;\n}\n#centerbox {\n\ttop:0; left: 0; right: 0; bottom: 0;\n\tposition: absolute;\n\twidth: 250px;\n\theight: 250px;\n\tmargin: auto;\n\tdisplay: none;\n}\n#avatarcontainer {\n\tfont-family: \"Museo-100\";\n\tborder: 1px solid #b9d6dc;\n\t-webkit-border-radius: 90px;\n\t-moz-border-radius: 90px;\n\tborder-radius: 90px;\n\ttop:0; left: 0; right: 0; bottom: 0;\n\tposition: absolute;\n\tcursor: pointer;\n\twidth: 162px;\n\theight: 162px;\n\tmargin: auto;\n}\n.forward {\n\t-webkit-animation: 0.4s zoomavatar ease-out;\n\t-moz-animation: 0.4s zoomavatar ease-out;\n\t-o-animation: 0.4s zoomavatar ease-out;\n\t-ms-animation: 0.4s zoomavatar ease-out;\n\tanimation: 0.4s zoomavatar ease-out;\n}\n.reverse {\n\t-webkit-animation: 0.5s unzoomavatar ease-out;\n\t-moz-animation: 0.6s unzoomavatar ease-out;\n\t-o-animation: 0.4s unzoomavatar ease-out;\n\t-ms-animation: 0.4s unzoomavatar ease-out;\n\tanimation: 0.5s unzoomavatar ease-out;\n}\n.avatar {\n\tbackground: url(\"../images/userpic.jpg\") center center no-repeat;\n\tposition: absolute;\n\tbox-shadow:0px 0px 0px 5px white inset;\n\twidth: 100%;\n\theight: 100%;\n\t-moz-border-radius: 90px;\n\t-webkit-border-radius: 90px;\n\tborder-radius: 90px;\n\tbackground-size: 100% 100%;\n}\n#lefttitle, #righttitle {\n\ttext-transform: uppercase;\n\tfont-family: \"Museo-300\", Arial;\n\tfont-size: 22px;\n\tposition: absolute;\n\ttext-align: center;\n\tdisplay: none;\n\twidth: 250px;\n\theight: 20px;\n\tmargin: auto;\n}\n#lefttitle {\n\t-webkit-animation: 0.6s goleft ease-out;\n\t-moz-animation: 0.6s goleft ease-out;\n\t-o-animation: 0.6s goleft ease-out;\n\t-ms-animation: 0.6s goleft ease-out;\n\tanimation: 0.6s goleft ease-out;\n\ttop:0; left: -18%; right: 300px; bottom: 0;\n}\n#righttitle {\n\t-webkit-animation: 0.6s goright ease-out;\n\t-moz-animation: 0.6s goright ease-out;\n\t-o-animation: 0.6s goright ease-out;\n\t-ms-animation: 0.6s goright ease-out;\n\tanimation: 0.6s goright ease-out;\n\ttop:0; left: 18%; right: -300px; bottom: 0;\n}\n#bottombuttons {\n\tfont-family: \"Museo-500\";\n\t-webkit-animation: 0.6s godown ease-out;\n\t-moz-animation: 0.6s godown ease-out;\n\t-o-animation: 0.6s godown ease-out;\n\t-ms-animation: 0.6s godown ease-out;\n\tanimation: 0.6s godown ease-out;\n\tposition: absolute;\n\tleft: 0; right: 0; bottom: 8%;\n\tmargin: auto;\n\tdisplay: none;\n\twidth: 90px;\n\theight: 25%;\n}\n#plus {\n\ttext-align: center;\n\ttext-transform: uppercase;\n\tfont-size: 11px;\n\tcolor: #a6cbd4;\n\tposition: absolute;\n\tcursor: pointer;\n\tmargin: auto;\n\twidth: 90px;\n\theight: 90px;\n}\n#plus:hover {\n\tcolor: #9cbac2;\n}\n#plusborder {\n\t-webkit-animation: plus 2s infinite;\n\t-moz-animation: plus 2s infinite;\n\t-o-animation: plus 2s infinite;\n\t-ms-animation: plus 2s infinite;\n\tanimation: plus 2s infinite;\n\tposition: absolute;\n\tborder: 2px solid #cfe6ec;\n\t-webkit-border-radius: 70px;\n\t-moz-border-radius: 70px;\n\tborder-radius: 70px;\n\ttop:0; left: 0; right: 0; bottom: 0;\n\tmargin: auto;\n\twidth: 80%;\n\theight: 80%;\n}\n#plusone, #plustwo {\n\tposition: absolute;\n\ttop: 0; left: 0; right: 0; bottom: 0;\n\tmargin: auto;\n\tbackground-color: #cfe6ec;\n}\n#plusone {\n\twidth: 2px;\n\theight: 50%;\n}\n#plustwo {\n\twidth: 50%;\n\theight: 2px;\n}\n#plustext {\n\tfont-family: Arial;\n\tposition: absolute;\n\tleft: 0; right: 0; bottom: -15px;\n\tmargin: auto;\n}\n#minus {\n\ttop: 70%; left: 0; right: 0;\n\tmargin: auto;\n\ttext-transform: uppercase;\n\tfont-size: 10px;\n\tcolor: #c8c2c4;\n\tposition: absolute;\n\tcursor: pointer;\n\twidth: 35px;\n\theight: 35px;\n}\n#minus:hover {\n\tcolor: #a39b9d;\n}\n#minusborder {\n\tposition: absolute;\n\tborder: 1px solid #c8c2c4;\n\t-webkit-border-radius: 70px;\n\t-moz-border-radius: 70px;\n\tborder-radius: 70px;\n\ttop:0; left: 0; right: 0; bottom: 0;\n\tmargin: auto;\n\twidth: 80%;\n\theight: 80%;\n}\n#minusone {\n\tposition: absolute;\n\ttop: 0; left: 0; right: 0; bottom: 0;\n\tmargin: auto;\n\tbackground-color: #c8c2c4;\n\twidth: 50%;\n\theight: 1px;\n}\n#minustext {\n\twidth: 70px;\n\ttext-align: center;\n\tfont-family: Arial;\n\tleft: -18px; right: 0; bottom: -17px;\n\tmargin: auto;\n\tposition: absolute;\n}\n.bluetext {\n\tcolor: #a6d1d6;\n}\n#settingspage {\n\tdisplay: none;\n}\n#swipefield {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 0;\n}\n\n/* =============== S L I D E R S =============== */\n.incomes-sprite-title, .expenses-sprite-title, .savings-sprite-title {\n\tbackground-size: 538px 84px;\n\tposition: absolute;\n\tcursor: pointer;\n\ttop:-4px;\n}\n.incomes-sprite-title {\n\tbackground-position: 0 -60px;\n\twidth: 108px;\n\theight: 24px;\n\tleft: 35%;\n\tcursor: pointer;\n}\n.expenses-sprite-title {\n\tbackground-position: -114px -60px;\n\twidth: 114px;\n\theight: 24px;\n\tleft: 35%;\n\tcursor: pointer;\n}\n.savings-sprite-title {\n\tbackground-position: -233px -60px;\n\twidth: 164px;\n\theight: 24px;\n\tleft: 30%;\n}\n.zoomplus:hover ~ .plusitem {\n\t-webkit-transform: scale(1.15);\n\t-moz-transform: scale(1.15);\n\t-o-transform: scale(1.15);\n\t-ms-transform: scale(1.15);\n\ttransform: scale(1.15);\n}\n.zoomplus:active ~ .plusitem {\n\t-webkit-transform: scale(1);\n\t-moz-transform: scale(1);\n\t-o-transform: scale(1);\n\t-ms-transform: scale(1);\n\ttransform: scale(1);\n}\n\n.blueline {\n\tbackground-color: #b8d9e1;\n\tposition: absolute;\n\ttop:47px;\n\twidth: 100%;\n\theight: 1px;\n}\n.brownline {\n\tbackground-color: #a6989c;\n\tposition: absolute;\n\ttop:47px;\n\twidth: 12px;\n\theight: 1px;\n}\n.columns {\n\ttext-transform: uppercase;\n\tposition: absolute;\n\tdisplay: block;\n\tmargin: auto;\n\theight: 390px;\n}\n#savebutton {\n\tposition: absolute;\n\tleft: 0; right: 0;\n\tdisplay: block;\n\tcursor: pointer;\n\twidth: 100%;\n\theight: 60px;\n\tbottom: 2%;\n\toverflow: hidden;\n}\n#savebutton:hover > #leftborder, #savebutton:hover > #rightborder, #savebutton:hover > #centerborder {\n\tbackground-color: #fafcfc;\n}\n#savebutton:active > #leftborder, #savebutton:active > #rightborder, #savebutton:active > #centerborder {\n\tbackground-color: #f3f7f8;\n}\n\n#leftborder, #rightborder, #centerborder {\n\tborder-top: 1px solid #b8d9e1;\n\tposition: absolute;\n\tmargin:auto;\n\theight: 100%;\n\tdisplay: block;\n\t-moz-transition: 0.2s;\n\t-o-transition: 0.2s;\n\t-ms-transition: 0.2s;\n\t-webkit-transition: 0.2s;\n\ttransition: 0.2s;\n}\n.saveaction {\n\tbackground-color: #eff6f8;\n}\n\n#leftborder {\n\tleft: -21%; right: 490px;\n\twidth: 340px;\n}\n#rightborder {\n\tleft: 21%; right: -490px;\n\twidth: 340px;\n}\n#centerborder {\n\tleft: 0; right: 0;\n\twidth: 40%;\n}\n#save {\n\tmargin: auto;\n\tposition: absolute;\n\tbottom:15px; left: 25px; right: 0;\n\twidth: 138px;\n\theight: 24px;\n\tbackground-position: -400px -60px;\n}\n\n/* =============== SAVINGS SLIDER =============== */\n\n#piggyicon {\n\tbackground-position: -100px 0;\n\tbackground-size: 538px 84px;\n\tposition: absolute;\n\tdisplay: block;\n\twidth: 46px;\n\theight: 38px;\n\tleft: 25px;\n\ttop: 70px;\n}\n#topsavingsline {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 190px;\n\tborder-bottom: 1px solid #e2e2e2;\n}\n#bottomsavingsline {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 92px;\n\tborder-bottom: 1px solid #e2e2e2;\n}\n#savingsvalue{\n\tdisplay: inline-block;\n\tborder: 0px solid;\n\tbackground-color: transparent;\n\tposition: absolute;\n\ttop: 125px;\n\tleft: 30%;\n\tfont-family: \"Museo-100\";\n\tfont-size: 38px;\n\tpadding: 0;\n}\n#rublesign {\n\tcursor: pointer;\n\tbackground-size: 538px 84px;\n\tdisplay: inline-block;\n\twidth: 22px;\n\theight: 31px;\n\tposition: relative;\n\tz-index: 1000;\n}\n#rublebox {\n\ttop: 135px;\n\twidth: 30%;\n\theight: 40px;\n\tleft: 0;\n\tposition: relative;\n\tdisplay: inline-block;\n}\n#percentvalue{\n\tdisplay: inline-block;\n\tborder: 0px solid;\n\tposition: relative;\n\ttop: 48px;\n\tleft: 125px;\n\tfont-family: \"Museo-300\";\n\tfont-size: 22px;\n\tcolor: #9e9e9e;\n\tbackground-color: white;\n}\n\n/* TOGGLES */\n#deposit + label.button{\n\tposition: absolute;\n\ttop:16px;\n}\n#capitalization + label.button{\n\tposition: absolute;\n\tbottom:-42px;\n}\ninput#deposit, input#capitalization {\n\tmax-height: 0;\n\tmax-width: 0;\n\tdisplay: none;\n}\ninput#deposit + label.button, input#capitalization + label.button{\n\tdisplay: block;\n\tposition: absolute;\n\tright:32px;\n\tbox-shadow: inset 0 0 0px 1px #e3e3e3;\n\theight: 21px;\n\twidth: 33px;\n\tborder-radius: 15px;\n}\ninput#deposit + label.button:before, input#capitalization + label.button:before {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: block;\n\theight: 21px;\n\twidth: 21px;\n\ttop: 0;\n\tleft: 0;\n\tborder-radius: 15px;\n\t-moz-transition: 0.2s ease-out;\n\t-o-transition: 0.2s ease-out;\n\t-ms-transition: 0.2s ease-out;\n\t-webkit-transition: 0.2s ease-out;\n\ttransition: 0.2s ease-out;\n}\ninput#deposit + label.button:after, input#capitalization + label.button:after {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: block;\n\theight: 21px;\n\twidth: 21px;\n\ttop: 0;\n\tleft: 0px;\n\tborder-radius: 15px;\n\tbackground: white;\n\tbox-shadow: inset 0 0 0 1px #e0e0e0, 1px 1px 2px #ebebeb;\n\t-moz-transition: 0.2s ease-out;\n\t-o-transition: 0.2s ease-out;\n\t-ms-transition: 0.2s ease-out;\n\t-webkit-transition: 0.2s ease-out;\n\ttransition: 0.2s ease-out;\n}\n/* END OF TOGGLES */\n\ninput#deposit:checked + label.button:before, input#capitalization:checked + label.button:before {\n\twidth: 33px;\n\theight: 21px;\n\tbackground: #e7f6f8;\n\tbox-shadow: inset 0 0 0px 1px #b4d6da;\n}\ninput#deposit:checked + label.button:after, input#capitalization:checked + label.button:after {\n\tleft: 13px;\n\tbox-shadow: inset 0 0 0 1px #b4d6da, 1px 1px 1px #ebebeb;\n}\n#deposit:checked ~ .savingscapital, #deposit:checked ~ .savingspercent, #deposit:checked ~ input#percentvalue {\n\tcolor: #4b4b4b;\n}\n.savingstitle14 {\n\tfont-family: \"Museo-300\";\n\tfont-size: 14px;\n\tcolor: #4b4b4b;\n\tposition: absolute;\n\tleft: 30%;\n\ttop: 70px;\n}\n.savingstitle12 {\n\tfont-family: \"Museo-300\";\n\tfont-size: 13px;\n\tcolor: #a2c1c6;\n\tfont-style: italic;\n\tposition: absolute;\n\tleft: 30%;\n\ttop: 94px;\n}\n.savingsdeposit {\n\tfont-family: \"Museo-300\";\n\tfont-size: 12px;\n\tcolor: #4b4b4b;\n\tposition: absolute;\n\tleft: 25px;\n\ttop:20px;\n}\n.savingscapital, .savingspercent {\n\tfont-family: \"Museo-300\";\n\tfont-size: 12px;\n\tcolor: #b5b5b5;\n\tposition: absolute;\n}\n.savingscapital {\n\tleft: 25px;\n\tbottom:-40px;\n}\n.savingspercent {\n\tleft: 25px;\n\tbottom:20px;\n}\n\n/* =============== INCOMES SLIDER =============== */\n#noincomes, #noexpenses {\n\twidth: 160px;\n\theight: 160px;\n\tposition: absolute;\n\tdisplay: block;\n\ttop: 30%; left: 0; right: 0;\n\tmargin: auto;\n\tcursor: pointer;\n\tz-index: 10;\n}\n.hoverplace {\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n}\n.hoverplace:hover ~ .plusitemtitle, .majorplusitem:hover ~ .plusitemtitle, .plusitemtitle:hover {\n\tcolor: #a2c1c6;\n}\n.majorplusitem {\n\ttop:0; bottom:0; left: 0; right: 0;\n\tmargin: auto;\n\tposition: absolute;\n\tdisplay: block;\n\twidth: 75px;\n\theight: 75px;\n\t-webkit-transition: 150ms;\n\t-moz-transition: 150ms;\n\t-o-transition: 150ms;\n\t-ms-transition: 150ms;\n\ttransition: 150ms;\n}\n.majorplusitem:hover {\n\t-webkit-transform: scale(1.1);\n\t-moz-transform: scale(1.1);\n\t-o-transform: scale(1.1);\n\t-ms-transform: scale(1.1);\n\ttransform: scale(1.1);\n}\n.majorplusitem:active {\n\t-webkit-transform: scale(1);\n\t-moz-transform: scale(1);\n\t-o-transform: scale(1);\n\t-ms-transform: scale(1);\n\ttransform: scale(1);\n}\n.plusitemtitle {\n\ttext-align: center;\n\twidth: 100%;\n\tfont-family: \"Museo-300\";\n\tfont-size: 14px;\n\tcolor: #4b4b4b;\n\tposition: absolute;\n\tbottom: 0;\n\t-webkit-transition: 0.25s;\n\t-moz-transition: 0.25s;\n\t-o-transition: 0.25s;\n\t-ms-transition: 0.25s;\n\ttransition: 0.25s;\n}\n.plusitemitalic {\n\ttext-align: center;\n\twidth: 100%;\n\tfont-family: \"Museo-300\";\n\tfont-size: 13px;\n\tcolor: #a2c1c6;\n\tfont-style: italic;\n\tposition: absolute;\n\ttop: 0;\n}\n.arrowup, .arrowdown {\n\tposition: absolute;\n\tbackground-size: 538px 84px;\n\twidth: 21px;\n\theight: 12px;\n}\n.arrowup {\n\tbackground-position: -30px 0;\n}\n.arrowdown {\n\tbackground-position: 0 0;\n}\n#incomeup, #incomedown {\n\tfont-family: \"Museo-300\";\n\tfont-size: 12px;\n\tcolor: #a2c1c6;\n\tfont-style: italic;\n\tposition: absolute;\n\tbottom: 0px;\n\tmargin: auto;\n\twidth: 90px;\n\theight: 12px;\n\tcursor: pointer;\n\ttext-align: center;\n}\n#incomeup {\n\tleft: 63%;\n}\n#incomedown {\n\tleft: 35%;\n}\n#incomeslider {\n\t-webkit-transition: 0.25s;\n\t-moz-transition: 0.25s;\n\t-o-transition: 0.25s;\n\t-ms-transition: 0.25s;\n\ttransition: 0.25s;\n\tposition: absolute; /*RELATIVE!*/\n\tbottom: 0px;\n\tmargin: auto;\n\twidth: 100%;\n}\n\n/* =============== EXPENSE SLIDER =============== */\n\n.plusitem {\n\ttop: -8px; left: 9%;\n\tmargin: auto;\n\tposition: absolute;\n\tcursor: pointer;\n\twidth: 33px;\n\theight: 33px;\n\t-webkit-border-radius: 75px;\n\t-moz-border-radius: 75px;\n\tborder-radius: 75px;\n\t-webkit-transition: 150ms;\n\t-moz-transition: 150ms;\n\t-o-transition: 150ms;\n\t-ms-transition: 150ms;\n\ttransition: 150ms;\n}\n.plusitemborder {\n\tposition: absolute;\n\tborder: 1px solid #aad6df;\n\t-webkit-border-radius: 75px;\n\t-moz-border-radius: 75px;\n\tborder-radius: 75px;\n\ttop:0; left: 0; right: 0; bottom: 0;\n\tmargin: auto;\n}\n.plusitem:hover {\n\t-webkit-transform: scale(1.15);\n\t-moz-transform: scale(1.15);\n\t-o-transform: scale(1.15);\n\t-ms-transform: scale(1.15);\n\ttransform: scale(1.15);\n}\n.plusitem:active {\n\t-webkit-transform: scale(1);\n\t-moz-transform: scale(1);\n\t-o-transform: scale(1);\n\t-ms-transform: scale(1);\n\ttransform: scale(1);\n}\n.plusitemone, .plusitemtwo {\n\tposition: absolute;\n\ttop: 0; left: 0; right: 0; bottom: 0;\n\tmargin: auto;\n\tbackground-color: #aad6df;\n}\n.plusitemone {\n\twidth: 50%;\n\theight: 1px;\n}\n.plusitemtwo {\n\twidth: 1px;\n\theight: 50%;\n}\n\n#expenseup, #expensedown {\n\tfont-family: \"Museo-300\";\n\tfont-size: 12px;\n\tcolor: #a2c1c6;\n\tfont-style: italic;\n\tposition: absolute;\n\tbottom:0px;\n\tmargin: auto;\n\twidth: 90px;\n\theight: 12px;\n\tcursor: pointer;\n\ttext-align: center;\n}\n#expenseup {\n\tleft: 63%;\n}\n#expensedown {\n\tleft: 35%;\n}\n.frame {\n\ttext-align: left;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop:50px; left: 0; right: 0; bottom: 0;\n\twidth: 100%;\n\theight: 284px;\n}\n.wrapper {\n\tposition: absolute;\n\ttop:0; left: 0; right: 0; bottom: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n#expenseslider {\n\t-webkit-transition: 0.25s;\n\t-moz-transition: 0.25s;\n\t-o-transition: 0.25s;\n\t-ms-transition: 0.25s;\n\ttransition: 0.25s;\n\tdisplay: none;\n\tposition: absolute; /*RELATIVE!*/\n\tbottom: 0px;\n\tmargin: auto;\n\twidth: 100%;\n}\n.itembackground {\n\tdisplay: block;\n\tposition: relative;\n\ttop: -26px;\n\tleft: 25px;\n}\n.incomeitem, .expenseitem {\n\t-webkit-transition: 350ms ease-out;\n\t-moz-transition: 350ms ease-out;\n\t-o-transition: 350ms ease-out;\n\t-ms-transition: 350ms ease-out;\n\ttransition: 350ms ease-out;\n\tbackground-position: 25px center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: 42px 42px;\n\tborder-bottom: 1px solid #e2e2e2;\n\twidth: 100%;\n\theight: 70px;\n\tz-index: 500;\n\tcursor: pointer;\n\toverflow: hidden;\n}\n.incomeitem:hover, .expenseitem:hover {\n\tbackground-color: #fbfbfb;\n}\n.incomeitem:active, .expenseitem:active {\n\tbackground-color: #f7f7f7;\n}\n.newitemadded {\n\t-webkit-animation: 4s newitemadded ease-out;\n\t-moz-animation: 4s newitemadded ease-out;\n\t-o-animation: 4s newitemadded ease-out;\n\t-ms-animation: 4s newitemadded ease-out;\n\tanimation: 4s newitemadded ease-out;\n}\n.title11museo300 {\n\tfont-family: \"Museo-100\";\n\tfont-size: 14px;\n\tcolor: #676767;\n\tposition: relative;\n\tleft: 35%;\n\ttop:12px;\n}\n.title9museo300 {\n\tfont-family: \"Museo-300\";\n\tfont-size: 9px;\n\tcolor: #676767;\n\tposition: relative;\n\tleft: 35%;\n\ttop:20px;\n}\n.bolddigit20 {\n\tfont-family: \"Museo-500\";\n\tfont-size: 20px;\n\tcolor: #111;\n}\n.lightdigit20 {\n\tfont-family: \"Museo-100\";\n\tfont-size: 20px;\n\tcolor: #111;\n}\n.lighttitle20 {\n\theight: 40px;\n\tfont-family: \"Museo-100\";\n\tfont-size: 20px;\n\tcolor: #4b4b4b;\n\tposition: absolute;\n\tleft: 35%;\n\tcursor: pointer;\n}\n\n/* ITEMS AND FRAMES ANIMATION */\n.sliderup {\n\t-webkit-transform: translateY(71px);\n\t-moz-transform: translateY(71px);\n\t-o-transform: translateY(71px);\n\t-ms-transform: translateY(71px);\n\ttransform: translateY(71px);\n}\n.sliderdown {\n\t-webkit-transform: translateY(-71px);\n\t-moz-transform: translateY(-71px);\n\t-o-transform: translateY(-71px);\n\t-ms-transform: translateY(-71px);\n\ttransform: translateY(-71px);\n}\n.endoflist {\n\t-webkit-animation: 0.5s endoflist ease-out;\n\t-moz-animation: 0.5s endoflist ease-out;\n\t-o-animation: 0.5s endoflist ease-out;\n\t-ms-animation: 0.5s endoflist ease-out;\n\tanimation: 0.5s endoflist ease-out;\n}\n.startoflist {\n\t-webkit-animation: 0.5s startoflist ease-out;\n\t-moz-animation: 0.5s startoflist ease-out;\n\t-o-animation: 0.5s startoflist ease-out;\n\t-ms-animation: 0.5s startoflist ease-out;\n\tanimation: 0.5s startoflist ease-out;\n}\n#expenseslider, #incomeslider {\n\t-webkit-animation: 1s frameanimate ease-out;\n\t-moz-animation: 0.8s frameanimate ease-out;\n\t-o-animation: 0.8s frameanimate ease-out;\n\t-ms-animation: 0.8s frameanimate ease-out;\n\tanimation: 0.8s frameanimate ease-out;\n}\n\n/* NOTES WINDOW */\n\n#add-notes {\n\tvisibility: hidden;\n\tposition: absolute;\n\ttop: 0; left: 0; right: 0; bottom: 0;\n\tmargin: auto;\n\twidth: 465px;\n\theight: 530px;\n\tz-index: 2000;\n\topacity: 1;\n\t-webkit-backface-visibility: hidden;\n\t-moz-backface-visibility: hidden;\n\t-o-backface-visibility: hidden;\n\t-ms-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\t-webkit-perspective: 1300;\n\t-o-perspective: 1300px;\n\t-ms-perspective: 1300px;\n\t-moz-perspective: 1300px;\n\tperspective: 1300;\n}\n#add-notes >.modal-content {\n\theight: 610px;\n}\n.notes-title {\n\tfont-weight: 900;\n\tfont-family: \"Museo-500\";\n\tfont-size: 18px;\n\tcolor: #242424;\n\tposition: absolute;\n\twidth: 240px;\n\theight: 20px;\n\tmargin: auto;\n\tright: 0; left: 0; top: 20px;\n}\n.notes-save {\n\tdisplay: block;\n\tposition: absolute;\n\twidth: 100%;\n\theight: 42px;\n\tbottom: 20px;\n\tbackground-color: #cce5ec;\n\tcursor: pointer;\n\tline-height: 30px;\n}\n.notes-save:hover, .modal-save:hover {\n\tbackground-color: #d6ebf1;\n}\n.notes-save:active, .modal-save:active {\n\tbackground-color: #e0edf0;\n}\n.notes-input {\n\tline-height: 20px;\n\tdisplay: none;\n\tresize: none;\n\tvertical-align: top;\n\tborder: 1px solid #ccc;\n\tbackground-color: white;\n\tposition: absolute;\n\ttop: 78px; left: 0; right: 0;\n\tmargin: auto;\n\tfont-family: \"Museo-300\";\n\tfont-size: 13px;\n\tpadding: 20px;\n\tpadding-top: 30px;\n\twidth: 360px;\n\theight: 60%\n}\n\n/* MODAL WINDOWS */\n#overlay {\n\tdisplay: none;\n\tvisibility: hidden;\n\tposition: fixed;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0; left: 0;\n\tz-index: 1000;\n\topacity: 0;\n\tbackground: rgba(0,0,0,0.65);\n\t-webkit-transition: all 0.3s;\n\t-o-transition: all 0.3s;\n\t-ms-transition: all 0.3s;\n\t-moz-transition: all 0.3s;\n\ttransition: all 0.3s;\n}\n#add-modal {\n\tvisibility: hidden;\n\tposition: absolute;\n\ttop:50px; left: 0; right: 0; bottom: 0;\n\tmargin: auto;\n\twidth: 465px;\n\theight: 530px;\n\tz-index: 2000;\n\topacity: 1;\n\t-webkit-backface-visibility: hidden;\n\t-moz-backface-visibility: hidden;\n\t-o-backface-visibility: hidden;\n\t-ms-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\t-webkit-perspective: 1300px;\n\t-o-perspective: 1300px;\n\t-ms-perspective: 1300px;\n\t-moz-perspective: 1300px;\n\tperspective: 1300px;\n}\n.modal-content {\n\tdisplay: none;\n\tvisibility: hidden;\n\ttext-align: center;\n\ttext-transform: uppercase;\n\tbackground: white;\n\tbox-shadow: 0 0 15px rgba(0,0,0,0.2);\n\tposition: relative;\n\theight: 480px;\n\t-webkit-transform-style: preserve-3d;\n\t-moz-transform-style: preserve-3d;\n\ttransform-style: preserve-3d;\n\t-webkit-transform: rotateY(-60deg);\n\t-moz-transform: rotateY(-60deg);\n\t-ms-transform: rotateY(-60deg);\n\ttransform: rotateY(-60deg);\n\t-webkit-transition: all 0.3s;\n\t-o-transition: all 0.3s;\n\t-moz-transition: all 0.3s;\n\t-ms-transition: all 0.3s;\n\ttransition: all 0.3s;\n\topacity: 0;\n}\n\n.modal-show {\n\topacity: 1;\n\tvisibility: visible;\n}\n.modal-show .modal-content {\n\tvisibility: visible;\n\t-webkit-transform: rotateY(0deg);\n\t-moz-transform: rotateY(0deg);\n\t-ms-transform: rotateY(0deg);\n\ttransform: rotateY(0deg);\n\topacity: 1;\n}\n#overlay.modal-show {\n\topacity: 1;\n\tvisibility: visible;\n}\n.close-sign {\n\tbackground-position: 0 -22px;\n\tbackground-size: 538px 84px;\n\tposition: absolute;\n\twidth: 16px;\n\theight: 16px;\n\ttop: 20px; right: 26px;\n}\n.modal-close {\n\tposition: absolute;\n\twidth: 86px;\n\theight: 62px;\n\ttop: 0; right: 0;\n\tcursor: pointer;\n\tz-index: 3500;\n}\n.modal-title {\n\tfont-weight: 900;\n\tfont-family: \"Museo-500\";\n\tfont-size: 18px;\n\tcolor: #242424;\n\tposition: absolute;\n\twidth: 240px;\n\theight: 20px;\n\tmargin: auto;\n\tright: 0; left: 0; top: 20px;\n}\n.modal-save {\n\tdisplay: block;\n\tposition: absolute;\n\twidth: 100%;\n\theight: 42px;\n\ttop: 415px;\n\tbackground-color: #cce5ec;\n\tcursor: pointer;\n\tline-height: 30px;\n}\n.modal-save-icon {\n\tbackground-position: -60px 0;\n\tbackground-size: 538px 84px;\n\tposition: absolute;\n\twidth: 30px;\n\theight: 30px;\n\tleft: 32%; top: 6px;\n}\n.modal-save-text {\n\tposition: absolute;\n\tdisplay: inline-block;\n\tmargin: auto;\n\ttop:0; bottom:0; left: 32%;\n\twidth: 210px;\n\theight: 30px;\n\tfont-family: \"Museo-500\";\n\tvertical-align: middle;\n\tfont-size: 18px;\n\tcolor: white;\n}\n.modal-delete {\n\t-webkit-transition: 0.2s ease-out;\n\t-moz-transition: 0.2s ease-out;\n\t-ms-transition: 0.2s ease-out;\n\t-o-transition: 0.2s ease-out;\n\tdisplay: none;\n\tposition: absolute;\n\twidth: 56px;\n\theight: 42px;\n\ttop: 415px; right: 0;\n\tbackground-color: #d9ebf0;\n\tborder-left: 2px solid white;\n\tcursor: pointer;\n\tline-height: 30px;\n\toverflow: hidden;\n}\n.modal-delete:hover {\n\twidth: 380px;\n\tbackground-color: #facece;\n}\n.modal-delete:active {\n\tbackground-color: #ffe3e3;\n}\n#modaldeletecross {\n\tposition: absolute;\n\twidth: 30px;\n\theight: 30px;\n\tbackground-position: -320px 0;\n\tmargin-top: 6px;\n\tmargin-left: 13px;\n}\n.modal-delete-text {\n\tbackground-position: -320px 0;\n\tposition: absolute;\n\tdisplay: inline-block;\n\tmargin: auto;\n\ttop:0; bottom:0; left: 13px;\n\twidth: 190px;\n\theight: 30px;\n\tfont-family: \"Museo-500\";\n\tvertical-align: middle;\n\tfont-size: 18px;\n\tcolor: white;\n}\n.modalvalue {\n\ttext-align: center;\n\tdisplay: none;\n\tborder: 0px solid;\n\tbackground-color: transparent;\n\tposition: absolute;\n\ttop: 78px; left: 0; right: 0;\n\tmargin: auto;\n\tfont-family: \"Museo-500\";\n\tfont-size: 86px;\n\tpadding: 0;\n\twidth: 370px;\n\t-webkit-transition: 0.3s;\n\t-moz-transition: 0.3s;\n\t-ms-transition: 0.3s;\n\t-o-transition: 0.3s;\n}\n.modalvalueerror {\n\tcolor: #ffdd33;\n\t-webkit-animation: 0.5s modalvalueerror ease-out;\n\t-moz-animation: 0.5s modalvalueerror ease-out;\n\t-o-animation: 0.5s modalvalueerror ease-out;\n\t-ms-animation: 0.5s modalvalueerror ease-out;\n\tanimation: 0.5s modalvalueerror ease-out;\n}\n.modaltitle {\n\tdisplay: none;\n\ttext-transform: uppercase;\n\tposition: absolute;\n\ttop: 345px; left: 0; right: 0;\n\tmargin: auto;\n\ttext-align: center;\n\tborder: 1px solid #ccc;\n\tcolor: #4c4c4c;\n\tfont-family: \"Museo-300\", Arial;\n\tfont-size: 14px;\n\theight: 30px;\n\twidth: 296px;\n\tletter-spacing: 1px;\n\t-webkit-transition: all 0.4s;\n\t-o-transition: all 0.4s;\n\t-ms-transition: all 0.4s;\n\t-moz-transition: all 0.4s;\n\ttransition: all 0.4s;\n}\n.modaltitleerror {\n\tbackground-color: #ffdd33;\n}\n.modalselects {\n\tz-index: 2000;\n\ttext-transform: lowercase;\n\ttext-align: left;\n\tdisplay: block;\n\tposition: absolute;\n\ttop: 200px; left: 0; right: 0;\n\tmargin: auto;\n\twidth: 260px;\n\theight: 30px;\n}\n* {\n\tmargin: 0;\n\tpadding: 0;\n}\n.modalselects .selectbox {\n\tcolor: #333;\n\tvertical-align: middle;\n\tcursor: pointer;\n\tmargin: 5px;\n}\n.modalselects .selectbox .select {\n\twidth: 60px;\n\theight: 24px;\n\tpadding: 0 45px 0 10px;\n\tfont: 12px/24px Arial;\n\tborder: 1px solid #ccc;\n}\n.modalselects .selectbox .select .text {\n\tdisplay: block;\n\twidth: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n}\n.modalselects .selectbox .trigger .arrow {\n\tposition: absolute;\n\ttop: 11px;\n\tright: 10px;\n\tborder-left: 3px solid transparent;\n\tborder-right: 3px solid transparent;\n\tborder-top: 3px solid #a1a1a1;\n\twidth: 0;\n\theight: 0;\n\toverflow: hidden;\n}\n.modalselects .selectbox .dropdown {\n\ttop: 25px;\n\twidth: 115px;\n\tmargin: 0;\n\tpadding: 0 0;\n\tbackground: #FFF;\n\tborder: 1px solid #ccc;\n\tfont: 12px Arial;\n}\n\n.initicons-arrow {\n\tbackground-position: -32px -24px;\n\tbackground-size: 538px 84px;\n\tposition: absolute;\n\twidth: 15px;\n\theight: 9px;\n\tright: 0; top: 18px;\n}\n.initicons {\n\tcursor: pointer;\n\twidth: 75px;\n\theight: 42px;\n\tposition: absolute;\n\ttext-align: left;\n\ttop: 270px; left: 0; right: 0;\n\tmargin: auto;\n}\n.initicons img {\n\twidth: 42px;\n\theight: 42px;\n}\n.initicons:hover {\n\topacity: 0.8;\n}\n.initicons:active {\n\t-webkit-transform: scale(0.92);\n\t-moz-transform: scale(0.92);\n\t-o-transform: scale(0.92);\n\t-ms-transform: scale(0.92);\n\ttransform: scale(0.92);\n}\n.modalincomessurface {\n\tposition: absolute;\n\tz-index: 3000;\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: white;\n\tdisplay: none;\n}\n.modalexpensessurface {\n\tz-index: 3000;\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: white;\n\tdisplay: none;\n}\n#modalexpensetable {\n\ttext-align: center;\n\tbackground-color: white;\n\tposition: absolute;\n\ttop: 14%; left: 42px;\n\n}\n#modalincomestable {\n\ttext-align: center;\n\tbackground-color: white;\n\tposition: absolute;\n\ttop: 30%; left: 42px;\n}\n.modaltable tr, .modaltable-low tr {\n\tbackground-color: #ddeef1;\n}\n.modaltable td, .modaltable-low td {\n\tcursor: pointer;\n\twidth: 86px;\n\theight: 86px;\n}\n.imgbox {\n\tbackground-color: white;\n\tborder: 2px solid white;\n\t-webkit-transition: all 0.1s;\n\t-o-transition: all 0.1s;\n\t-ms-transition: all 0.1s;\n\t-moz-transition: all 0.1s;\n\ttransition: all 0.1s;\n\twidth: 86px;\n\theight: 86px;\n}\n.imgbox:hover {\n\tborder: 2px solid #ddeef1;\n}\n.modalborderwhite {\n\tborder: 2px solid white;\n}\n.iconbox {\n\tbackground-color: white;\n\tposition: absolute;\n\tmargin:22px;\n}\n.auto {background-position: -989px 0;}\n.gas {background-position: -602px 0;}\n.home {background-position: -473px 0;}\n.baby {background-position: -946px 0;}\n\n.cart {background-position: -903px 0;}\n.clothes {background-position: -817px 0;}\n.phone {background-position: -258px 0;}\n.utilities {background-position: -43px 0;}\n\n.island {background-position: -430px 0;}\n.earth {background-position: -731px 0;}\n.meal {background-position: -387px 0;}\n.sport {background-position: -129px 0;}\n\n.medical {background-position: -344px 0;}\n.tv {background-position: -86px 0;}\n.smoking {background-position: -172px 0;}\n.other {background-position: -301px 0;}\n\n.edu {background-position: -688px 0;}\n.graphs {background-position: -516px 0;}\n.wallet {background-position: 0 0;}\n.case {background-position: -860px 0;}\n\n.rub {background-position: -215px 0;}\n.euro {background-position: -645px 0;}\n.doll {background-position: -774px 0;}\n.gbp {background-position: -559px 0;}\n\n#chooseicon {\n\tposition: absolute;\n\tleft: 0; top: 0;\n}\n\n.imgbox:active {\n\t-webkit-transform: scale(0.8);\n\t-moz-transform: scale(0.8);\n\t-o-transform: scale(0.8);\n\t-ms-transform: scale(0.8);\n\ttransform: scale(0.8);\n}\n.modalforward {\n\t-webkit-animation: 0.4s modalforward ease-out;\n\t-moz-animation: 0.4s modalforward ease-out;\n\t-o-animation: 0.4s modalforward ease-out;\n\t-ms-animation: 0.4s modalforward ease-out;\n\tanimation: 0.4s modalforward ease-out;\n}\n.modalreverse {\n\t-webkit-animation: 0.3s modalreverse ease-out;\n\t-moz-animation: 0.5s modalreverse ease-out;\n\t-o-animation: 0.5s modalreverse ease-out;\n\t-ms-animation: 0.5s modalreverse ease-out;\n\tanimation: 0.3s modalreverse ease-out;\n}\n\n/* ============= STATISTIC PAGE STYLES =============*/\n\n/* MAIN BLOCK */\n#mainblock {\n\t-moz-transition: 0.3s ease-out;\n\t-o-transition: 0.3s ease-out;\n\t-ms-transition: 0.3s ease-out;\n\t-webkit-transition: 0.3s ease-out;\n\ttransition: 0.3s ease-out;\n\twidth: 1370px;\n\theight: 680px;\n\tposition: absolute;\n\tmargin: auto;\n\tleft:0;\tright:0; top:22%;\n}\n.flag {\n\theight: 19px;\n\tborder: 1px solid #c7dade;\n\tfont-family: \"Museo-100\";\n\tfont-size: 11px;\n\tcolor: #242424;\n\ttext-transform: uppercase;\n\tfont-style: italic;\n\tline-height: 20px;\n\tpadding-left: 20px;\n\tleft: 0;\n}\n#deltatitle {\n\tposition: absolute;\n\ttop: -10px;\n\twidth: 130px;\n}\n#savingstitle {\n\tposition: absolute;\n\tbottom: 240px;\n\twidth: 90px;\n}\n.triangle {\n\tposition: absolute;\n\tbottom: -14px;\n\tleft: -1px;\n\twidth: 15px;\n\theight: 13px;\n\tbackground-position: -523px 0;\n}\n/* SAVINGS CHART */\n#savingschart {\n\tposition: absolute;\n\twidth: 504px;\n\theight: 222px;\n\tbottom: 50px;\n\tright: 0;\n}\n#horizontal, #chartline {\n\tposition: absolute;\n}\n#month0 {\n\tposition: absolute;\n\tleft:0;\n\tbottom: 0;\n\tdisplay: block;\n\tmargin-right: -4px;\n\twidth: 0;\n\theight: 68px;\n\tborder-left: 1px solid #cdc6c6;\n}\n#month0 .small-month-circle, #month0 .month-name {\n\tdisplay: block;\n}\n#month0 .month-name {\n\tbottom: 32%;\n}\n#month12 .month-name {\n\twidth: 20px;\n\theight: 16px;\n}\n.months {\n\tposition: relative;\n\tdisplay: inline-block;\n\tmargin-right: -4px;\n\twidth: 42px;\n\theight: 100%;\n}\n.in-month {\n\tposition: absolute;\n\tbottom: 0;\n\twidth: 100%;\n\theight: 50%;\n}\n.small-month-circle {\n\tposition: absolute;\n\tright: -5px;\n\ttop: -4px;\n\twidth: 7px;\n\theight: 7px;\n\tborder: 1px solid #b9b2b4;\n\tborder-radius: 20px;\n\tbackground-color: white;\n}\n.large-month-circle {\n\tposition: absolute;\n\tright: -10px;\n\ttop: -10px;\n\twidth: 17px;\n\theight: 17px;\n\tborder: 1px solid #b9b2b4;\n\tborder-radius: 20px;\n\tbackground-color: white;\n\tdisplay: block;\n}\n.bluedot {\n\tposition: absolute;\n\tright: 3px;\n\ttop: 3px;\n\twidth: 11px;\n\theight: 11px;\n\tborder-radius: 20px;\n\tbackground-color: #d5e4e7;\n}\n.large-month-val {\n\ttext-transform: uppercase;\n\ttext-align: right;\n\tposition: absolute;\n\ttop: -34px; right: 5px;\n\twidth: 160px;\n\theight: 20px;\n\tfont-family: \"Museo-500\";\n\tfont-size: 22px;\n\tcolor: #333;\n}\n.large-month-val .curr {\n\tfont-family: \"Museo-100\";\n\tfont-size: 12px;\n}\n.month-val {\n\ttext-transform: uppercase;\n\ttext-align: center;\n\tposition: absolute;\n\tbottom: -32px; left: -18px;\n\twidth: 120px;\n\theight: 14px;\n\tfont-family: \"Museo-300\";\n\tfont-size: 15px;\n\tcolor: #333;\n\tdisplay: none;\n\tbackground-color: white;\n}\n.month-val .curr {\n\tfont-family: \"Museo-100\";\n\tfont-size: 10px;\n}\n.month-name {\n\tposition: absolute;\n\tbottom: 40%; right: -11px;\n\tfont-family: \"Museo-300\";\n\ttext-transform: uppercase;\n\ttext-align: center;\n\tfont-size: 10px;\n\tcolor: #948b8e;\n\tbackground-color: white;\n\theight: 21px;\n\twidth: 25px;\n\tline-height: 21px;\n\tdisplay: none;\n}\n#month6, #month12{\n\tborder-right: 1px solid #cdc6c6;\n}\n#month6 .small-month-circle, #month6 .month-name, #month12 .month-name {\n\tdisplay: block;\n}\n.months:hover .in-month {\n\tborder-right: 1px solid #cdc6c6;\n}\n.months:hover .small-month-circle, .months:hover .month-name, .months:hover .month-val {\n\tdisplay: block;\n}\n/* SAVINGS SLIDER */\n#savings-slider-container {\n\twidth: 260px;\n\theight: 50px;\n\tposition: absolute;\n\tbottom: 70px; left: 40px;\n}\n.savings-slider {\n\ttext-transform: uppercase;\n\tposition: absolute;\n\ttop: -90px;\n\tfont-family: \"Museo-300\";\n\tfont-size: 11px;\n\tcolor: #5e5e5e;\n}\n#savingsTip0, #savingsTip100 {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 35px;\n\tfont-family: \"Museo-300\";\n\tfont-style: italic;\n\tfont-size: 11px;\n\tcolor: #a59b9e;\n\tdisplay: none;\n}\n#savingsTip0 {\n\tbottom: -5px; left: 38px;\n}\n#savingsTip100 {\n\tbottom: -5px;\n}\n.noUi-target,.noUi-target *\n{\n\t-webkit-touch-callout:none;\n\t-webkit-user-select:none;\n\t-ms-touch-action:none;\n\t-ms-user-select:none;\n\t-moz-user-select:none;\n\t-moz-box-sizing:border-box;\n\tbox-sizing:border-box\n}\n.noUi-base {\n\twidth:100%;\n\theight:100%;\n\tposition:absolute;\n}\n.noUi-origin {\n\tposition:absolute;\n\tright:0;\n\ttop:0;\n}\n.noUi-handle {\n\tcontent: \"\";\n\tposition:relative;\n\tz-index:1;\n\tborder: 1px solid #c4d5d9;\n\tcursor:default;\n\t-webkit-border-radius: 23px;\n\t-ms-border-radius: 23px;\n\t-o-border-radius: 23px;\n\t-moz-border-radius: 23px;\n\tborder-radius: 23px;\n\tbackground-position: -516px -17px;\n}\n.noUi-handle-upper {\n\twidth: 3px;\n}\n.noUi-stacking .noUi-handle {\n\tz-index:10\n}\n\n.noUi-stacking+.noUi-origin {\n\tz-index:-1\n}\n.noUi-state-tap .noUi-origin {\n\t-webkit-transition:left .3s,top .3s;\n\ttransition:left .3s,top .3s\n}\n.noUi-state-drag * {\n\tcursor:inherit!important\n}\n.noUi-horizontal {\n\theight: 4px\n}\n.noUi-horizontal .noUi-handle {\n\twidth:23px;\n\theight:23px;\n\tleft:-12px;\n\ttop:-9px\n}\n.noUi-background {\n\tbackground:#d9e7ea;\n\tborder-left: 2px solid #a39a9d;\n\tborder-right: 2px solid #a39a9d;\n}\n.noUi-dragable\n{\n\tcursor: w-resize\n}\n.noUi-vertical .noUi-dragable {\n\tcursor:n-resize;\n}\n.noUi-active {\n\tborder: 1px solid #95b4b8;\n}\n.noUi-handle:after {\n\tcontent: attr(percent);\n\ttext-align: center;\n\tdisplay:block;\n\tposition:absolute;\n\twidth: 30px; height: 30px;\n\tleft: 4px; top: -38px;\n\tfont-family: \"Museo-300\";\n\tfont-size: 11px;\n\tcolor: #2f2f2f;\n\tbackground-position: -414px 0;\n\tline-height: 18px;\n}\n.noUi-handle:before {\n\tcontent: attr(value);\n\ttext-align: center;\n\tdisplay:block;\n\tposition:absolute;\n\theight:1px;\n\twidth:180px;\n\theight: 15px;\n\tleft: -80px; top: 35px;\n\tfont-family: \"Museo-100\";\n\tfont-size: 16px;\n\tcolor: #2f2f2f;\n}\n[disabled] .noUi-connect,[disabled].noUi-connect {\n\tbackground:#B8B8B8\n}\n[disabled] .noUi-handle {\n\tcursor:not-allowed\n}\n/* SAVINGS CIRCLE */\n#savingscircles {\n\ttext-align: center;\n\twidth: 385px;\n\theight: 385px;\n\tposition: absolute;\n\tleft: 390px; bottom: 30px;\n\tz-index: 800;\n}\n#after-savings, #before-savings {\n\tborder: 1px solid #c9dadd;\n\t-webkit-border-radius: 350px;\n\t-ms-border-radius: 350px;\n\t-o-border-radius: 350px;\n\t-moz-border-radius: 350px;\n\tborder-radius: 350px;\n}\n#after-savings {\n\twidth: 82%;\n\theight: 82%;\n\tposition: absolute;\n\tright:0; top:0;\n}\n#before-savings {\n\twidth: 46%;\n\theight: 46%;\n\tposition: absolute;\n\tleft:0; bottom:0;\n}\n.savings-circle-title {\n\tfont-size: 12px;\n\tposition: absolute;\n\tmargin: auto;\n\ttop: 30%; left:0; right:0;\n}\n.savings-circle-currency {\n\tfont-size: 11px;\n\tposition: absolute;\n\tmargin: auto;\n\tbottom: 22%; left:0; right:0;\n}\n#before-savings-value {\n\tposition: absolute;\n\twidth: 130%;\n\theight: 100%;\n\tmargin: auto;\n\tleft:-15%; right: 0;\n\ttext-align: center;\n\tline-height: 165px;\n\tfont-size: 30px;\n\ttop: 8%;\n}\n#after-savings-value {\n\twidth: 130%;\n\theight: 100%;\n\tposition: absolute;\n\tmargin: auto;\n\tleft:-15%; right: 0;\n\ttop:7%;\n\ttext-align: center;\n\tline-height: 290px;\n}\n/* LINES CONTAINER */\n#incomes-lines-container, #expenses-lines-container {\n\t-moz-transition: 0.3s ease-out;\n\t-o-transition: 0.3s ease-out;\n\t-ms-transition: 0.3s ease-out;\n\t-webkit-transition: 0.3s ease-out;\n\ttransition: 0.3s ease-out;\n\tbackground-color: white;\n\twidth: 270px;\n\theight: 300px;\n\tposition: absolute;\n\tleft: 375px; top: 0;\n\tz-index: 200;\n\tpadding-top: 65px;\n\tpadding-left: 30px;\n}\n#incomes-lines-container {\n\tdisplay: none;\n}\n.lines-title {\n\tcursor: pointer;\n\tposition: absolute;\n\twidth: 400px;\n\ttop: 35px;\n\ttext-transform: uppercase;\n\tfont-family: \"Museo-300\";\n\tfont-size: 13px;\n\tcolor: black;\n}\n.lineitemtitle {\n\tposition: absolute;\n\ttop: 15px;\n\twidth: 280px;\n\theight: 70px;\n}\n.lineitemvalue {\n\tfont-family: \"Museo-300\";\n\tfont-size: 25px;\n\tposition: absolute;\n\ttop: 15px;\n\tleft: 64px; top:50px;\n\twidth: 180px;\n}\n.lineitemcurr {\n\tfont-size: 11px;\n}\n.lineitempercent {\n\tfont-family: \"Museo-500\";\n\tfont-size: 10px;\n\tcolor: #928588;\n\tposition: absolute;\n\ttop: -8px;\n\tleft: -27px;\n}\n.grey {\n\tcolor: #adadad;\n}\n.greysmall {\n\tfont-size: 9px;\n}\n.itemline {\n\t-moz-transition: 0.5s ease-out;\n\t-o-transition: 0.5s ease-out;\n\t-ms-transition: 0.5s ease-out;\n\t-webkit-transition: 0.5s ease-out;\n\ttransition: 0.5s ease-out;\n\tfont-size: 13px;\n\tcursor: pointer;\n\tposition: relative;\n\theight: 9px;\n\tborder-top: 2px solid #d5e4e7;\n\toverflow: hidden;\n\tbackground-color: white;\n\twidth: 1%;\n}\n.itemlinebackground {\n\tposition: absolute;\n\ttop: 36px; left:0;\n\twidth: 42px;\n\theight: 42px;\n}\n.leftpoint {\n\twidth: 2px;\n\theight: 2px;\n\tbackground-color: #a39a9d;\n\tposition: absolute;\n\ttop:-2px; left:0;\n}\n.activeline {\n\tborder-top: 4px solid #a39a9d;\n\theight: 88px;\n\toverflow: visible;\n}\n/* LINES CURSOR */\n#expense-cursor {\n\t-webkit-transform: rotate(68deg);\n\t-moz-transform: rotate(68deg);\n\t-ms-transform: rotate(68deg);\n\t-o-transform: rotate(68deg);\n\ttransform: rotate(68deg);\n\twidth: 310px;\n\theight: 310px;\n\tposition: absolute;\n\tleft: 225px; top: -106px;\n\tz-index: 100;\n\tdisplay: none;\n\tcursor: pointer;\n}\n#incomes-cursor {\n\t-webkit-transform: rotate(52deg);\n\t-moz-transform: rotate(52deg);\n\t-ms-transform: rotate(52deg);\n\t-o-transform: rotate(52deg);\n\ttransform: rotate(52deg);\n\twidth: 370px;\n\theight: 370px;\n\tposition: absolute;\n\tleft: 227px; top: -120px;\n\tz-index: 100;\n\tdisplay: none;\n\tcursor: pointer;\n}\n.cursorline {\n\twidth: 1px;\n\theight: 50%;\n\tposition: absolute;\n\tbottom: 0; left: 149px;\n\tbackground-color: #727272;\n}\n.cursorpoint {\n\tposition: absolute;\n\tbottom: -3px; left: 147px;\n\twidth: 6px;\n\theight: 6px;\n\tborder-radius: 10px;\n\tbackground-color: #727272;\n}\n/* LARGE CIRCLE */\n#outermaindiv {\n\tcolor: black;\n\tposition: absolute;\n\twidth: 265px;\n\theight: 265px;\n\tposition: absolute;\n\ttop: 50px; left:10px;\n\tz-index: 0;\n\tcursor: pointer;\n}\n#innermaindiv {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\ttop:0; left:0;\n\tmargin: 21px;\n}\n#outermaincursordiv {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\ttop:0;\n\tz-index: 500;\n\tmargin: -19px;\n}\n.linesbackground {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-image: url(\"../images/linesbackground.png\");\n\tbackground-repeat: repeat;\n}\n.topmaincircletitle {\n\twidth: 100px;\n\theight: 30px;\n\ttext-align: center;\n\tposition: absolute;\n\tmargin: auto;\n\tleft: 0; right: 0; top:84px;\n\tfont-size: 15px;\n\tfont-style: italic;\n}\n.bottommaincircletitle {\n\twidth: 100px;\n\theight: 30px;\n\ttext-align: center;\n\tposition: absolute;\n\tmargin: auto;\n\tleft: 0; right: 0; bottom:60px;\n\tfont-size: 13px;\n}\n#outer-circle-value {\n\twidth: 100%;\n\theight: 100%;\n\ttext-align: center;\n\tposition: absolute;\n\tmargin: auto;\n\tline-height: 265px;\n\ttop: 5px;\n\tfont-size: 48px;\n}\n.lightcircletitle {\n\tfont-family: \"Museo-100\";\n\ttext-transform: uppercase;\n}\n.boldcircletitle {\n\tfont-family: \"Museo-500\";\n\ttext-transform: uppercase;\n}\n#maincircle100percent {\n\twidth: 30px;\n\theight: 15px;\n\tposition: absolute;\n\ttop: 50px; right: 100px;\n\tfont-size: 12px;\n}\n#maincircleline {\n\twidth: 1px;\n\theight: 27px;\n\tposition: absolute;\n\ttop: 17px; right: 131px;\n\tbackground-color: #898989;\n\tbox-shadow: -1px 0 1px #acacac;\n}\n#outer-circle-percent {\n\tdisplay: none;\n\twidth: 30px;\n\theight: 30px;\n\tposition: absolute;\n\tleft: 0; right: 0; top: 0;\n\tfont-size: 11px;\n\tz-index: 1000;\n}\n/* PENDANTS */\n#firstpendant {\n\toverflow: visible;\n\tz-index: -100;\n\tposition: absolute;\n\tbottom: 0; left:60px;\n\twidth: 60px;\n\theight: 100px;\n}\n#firstpendant > .pendant-circle {\n\tbottom: 77px;\n\tborder: 2px solid #d3d8ce;\n}\n#firstpendant > .pendantline {\n\tbottom: 90px;\n\tbackground-color: #d3d8ce;\n}\n#firstpendant > .pendantfont {\n\tbottom: 50px;\n}\n#secondpendant {\n\toverflow: visible;\n\tz-index: -100;\n\tposition: absolute;\n\tbottom: 0; left:282px;\n\twidth: 45px;\n\theight: 100px;\n}\n#secondpendant > .pendant-circle {\n\tbottom: 57px;\n\tborder: 2px solid #b9b2b4;\n}\n#secondpendant > .pendantline {\n\tbottom: 70px;\n\tbackground-color: #b9b2b4;\n}\n#secondpendant > .pendantfont {\n\tbottom: 30px;\n}\n#thirdpendant {\n\toverflow: visible;\n\tz-index: -100;\n\tposition: absolute;\n\tbottom: 0; right:60px;\n\twidth: 45px;\n\theight: 100px;\n}\n#thirdpendant > .pendant-circle {\n\tbottom: 37px;\n\tborder: 2px solid #abb1bf;\n}\n#thirdpendant > .pendantline {\n\tbottom: 50px;\n\tbackground-color: #abb1bf;\n}\n#thirdpendant > .pendantfont {\n\tbottom: 10px;\n}\n.pendant-circle {\n\tposition: absolute;\n\tleft: 17px;\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 20px;\n}\n.pendantfont {\n\tposition: absolute;\n\ttext-align: center;\n\twidth: 70px;\n\tfont-size: 11px;\n\tfont-style: italic;\n\tleft: -12px;\n}\n.pendantline {\n\tposition: absolute;\n\tleft: 22px;\n\twidth: 1px;\n\theight: 120%;\n}\n/* SMALL CIRCLES */\n#movingcircle-1, #movingcircle-2, #movingcircle-3 {\n\t-webkit-animation: 1s spincircle ease-out infinite;\n\t-moz-animation: 1s spincircle ease-out infinite;\n\t-o-animation: 1s spincircle ease-out infinite;\n\t-ms-animation: 1s spincircle ease-out infinite;\n\tanimation: 1s spincircle ease-out infinite;\n}\n.flippedcard {\n\t-webkit-transform: rotateY(-180deg);\n\t-moz-transform: rotateY(-180deg);\n\t-ms-transform: rotateY(-180deg);\n\t-o-transform: rotateY(-180deg);\n\ttransform: rotateY(-180deg);\n}\n.flippedcardinfo {\n\t-webkit-transform: rotateY(180deg);\n\t-moz-transform: rotateY(180deg);\n\t-ms-transform: rotateY(180deg);\n\t-o-transform: rotateY(180deg);\n\ttransform: rotateY(180deg);\n}\n#small-circles-container {\n\tposition: absolute;\n\tright: 0; top: 40px;\n\twidth: 608px;\n\theight: 290px;\n\toverflow: visible;\n}\n#firstcirclediv, #secondcirclediv, #thirdcirclediv {\n\t-webkit-perspective: 1000;\n\t-moz-perspective: 1000px;\n\t-ms-perspective: 1000px;\n\t-o-perspective: 1000px;\n\tperspective: 1000;\n\t-moz-transition: 0.3s ease-out;\n\t-o-transition: 0.3s ease-out;\n\t-ms-transition: 0.3s ease-out;\n\t-webkit-transition: 0.3s ease-out;\n\ttransition: 0.3s ease-out;\n\tcursor: pointer;\n\tposition: relative;\n\ttop: 0;\n\twidth: 200px;\n\theight: 180px;\n\tdisplay: inline-block;\n\tbackground-color: white;\n}\n/* Backfaces */\n\n.circlesselect {\n\tz-index: 2000;\n\ttext-transform: uppercase;\n\ttext-align: center;\n\tdisplay: block;\n\tposition: absolute;\n\ttop: 94px; left: 0; right: 20px;\n\tmargin: auto;\n\twidth: 136px;\n\theight: 80px;\n}\n.circlesselect > .selectbox .select {\n\tposition: absolute;\n\tmargin: auto;\n\twidth: 136px;\n\theight: 22px;\n\tpadding: 0 10px 0 10px;\n\tfont: 10px/23px \"Museo-500\";\n\tborder: 1px solid #ccc;\n}\n.circlesselect > .selectbox .dropdown {\n\ttop: 23px;\n\twidth: 156px;\n\tmax-height: 220px;\n\tmargin: 0;\n\tpadding: 0 0;\n\tbackground: #FFF;\n\tborder: 1px solid #ccc;\n\tfont-family: \"Museo-300\";\n\tfont-size: 10px;\n}\n\n\n\n\n\n#circle-select-1-back, #circle-select-2-back, #circle-select-3-back {\n\tposition: absolute;\n\tmargin: auto;\n\tleft: 0; right: 0; top: 30px;\n\twidth: 42px;\n\theight: 42px;\n}\n.flippedcircle {\n\t-webkit-transform: rotateY(-180deg);\n\t-moz-transform: rotateY(-180deg);\n\t-ms-transform: rotateY(-180deg);\n\t-o-transform: rotateY(-180deg);\n\ttransform: rotateY(-180deg);\n}\n.frontcircle, .backcircle {\n\t-webkit-backface-visibility: hidden;\n\t-moz-backface-visibility: hidden;\n\t-ms-backface-visibility: hidden;\n\t-o-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\toverflow: visible;\n\tposition: absolute;\n}\n.frontcircle {\n\t-moz-transition: 0.3s ease-out;\n\t-o-transition: 0.3s ease-out;\n\t-ms-transition: 0.3s ease-out;\n\t-webkit-transition: 0.3s ease-out;\n\ttransition: 0.3s ease-out;\n\tposition: absolute;\n\tmargin: auto;\n\tright: 0; left: 0;\n\tz-index: 2;\n\twidth: 165px;\n\theight: 165px;\n}\n.backcircle {\n\t-webkit-transform: rotateY(180deg);\n\t-moz-transform: rotateY(180deg);\n\t-ms-transform: rotateY(180deg);\n\t-o-transform: rotateY(180deg);\n\ttransform: rotateY(180deg);\n\tz-index: 1;\n\tposition: absolute;\n\ttop: -30px;\n\tleft: 0; right: 0;\n\twidth: 200px;\n\theight: 200px;\n}\n.backcircle .circletoptitle {\n\twidth: 170px;\n\theight: 50px;\n\tline-height: 14px;\n\tbottom: -85px;\n}\n#firstcirclediv {\n\tleft: -16px;\n}\n#secondcirclediv {\n\tleft: 0;\n}\n#thirdcirclediv {\n\tleft: 16px;\n}\n#firstcircledivflipper, #secondcircledivflipper, #thirdcircledivflipper {\n\t-webkit-transform-style: preserve-3d;\n\t-moz-transform-style: preserve-3d;\n\t-ms-transform-style: preserve-3d;\n\t-o-transform-style: preserve-3d;\n\ttransform-style: preserve-3d;\n\t-webkit-transition: 1000ms;\n\t-moz-transition: 1000ms;\n\t-ms-transition: 1000ms;\n\t-o-transition: 1000ms;\n\ttransition: 1000ms;\n\tposition: relative;\n\toverflow: visible;\n}\n.frontcircle:active {\n\t-webkit-transform: scale(0.8);\n\t-moz-transform: scale(0.8);\n\t-o-transform: scale(0.8);\n\t-ms-transform: scale(0.8);\n\ttransform: scale(0.8);\n}\n.cursordiv {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0;\n\tz-index: 600;\n\tmargin: -12px;\n}\n.circletoptitle {\n\t-moz-transition: 0.3s ease-out;\n\t-o-transition: 0.3s ease-out;\n\t-ms-transition: 0.3s ease-out;\n\t-webkit-transition: 0.3s ease-out;\n\ttransition: 0.3s ease-out;\n\ttext-align: center;\n\toverflow: hidden;\n\tfont-style: italic;\n\tfont-size: 10px;\n\tposition: absolute;\n\twidth: 120px;\n\theight: 12px;\n\tmargin: auto;\n\tleft: 0; right: 0; top: 52px;\n}\n.circlevalue {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 4px;\n\ttext-align: center;\n\tline-height: 165px;\n\tfont-size: 31px;\n}\n.bottomcircletitle {\n\twidth: 100px;\n\theight: 30px;\n\ttext-align: center;\n\tposition: absolute;\n\tmargin: auto;\n\tleft: 0; right: 0; top: 110px;\n\tfont-size: 10px;\n}\n#first-circle-percent, #second-circle-percent, #third-circle-percent {\n\tdisplay: none;\n\twidth: 30px;\n\theight: 30px;\n\tposition: absolute;\n\tleft: 0; right: 0; top: 0;\n\tfont-size: 11px;\n}\n.circle100percent {\n\twidth: 30px;\n\theight: 15px;\n\tposition: absolute;\n\ttop: 30px; right: 52px;\n\tfont-size: 9px;\n}\n.circleline {\n\twidth: 1px;\n\theight: 17px;\n\tposition: absolute;\n\ttop: 11px;\n\tright: 82px;\n\tbackground-color: #898989;\n}\n#setcurrency {\n\tright: -18px;\n\ttop: -15%;\n\tposition: absolute;\n\twidth: 170px;\n\theight: 42px;\n}\n#rubcurr, #eurcurr, #usdcurr {\n\tvertical-align: top;\n\ttext-align: center;\n\tposition: relative;\n\tfont-size: 11px;\n\ttext-transform: uppercase;\n\tcolor: #444;\n\tdisplay: inline-block;\n\twidth: 42px;\n\theight: 42px;\n\tborder-radius: 42px;\n\tmargin-right: 7px;\n\tline-height: 43px;\n}\n#rubcurr:hover, #eurcurr:hover, #usdcurr:hover {\n\tborder: 2px solid #f6f6f6;\n}\n.currunchecked {\n\tcursor: pointer;\n\tfont-family: \"Museo-100\";\n\tborder: 2px solid white;\n}\n.currchecked {\n\tcursor: default;\n\tfont-family: \"Museo-500\";\n\tborder: 2px solid #e8e8e8;\n}\n\n/* ============== CONDITIONS FOR DIFFERENT SCREEN SIZES ============== */\n@media screen and (max-height: 870px) {\n\t#mainblock {\n\t\theight: 620px; top:19%;\n\t}\n\t#savingschart {\n\t\tbottom: 10px;\n\t}\n\t#savingscircles {\n\t\tbottom: 0px;\n\t}\n\t#savings-slider-container {\n\t\tbottom: 20px;\n\t}\n\t#savingstitle {\n\t\tbottom: 190px;\n\t}\n\t#small-circles-container {\n\t\theight: 274px;\n\t}\n\n}\n@media screen and (max-height: 780px) {\n\t#mainblock {\n\t\theight: 590px; top:17%;\n\t}\n\t#savingschart {\n\t\tbottom: 20px;\n\t}\n\t#savingscircles {\n\t\tbottom: 25px;\n\t}\n\t#savings-slider-container {\n\t\tbottom: 30px;\n\t}\n\t#savingstitle {\n\t\tbottom: 200px;\n\t}\n\t#logo_statistic {\n\t\ttop: -25px;\n\t\t-webkit-transform: rotateY(180deg) scale(0.8);\n\t\t-moz-transform: rotateY(180deg) scale(0.8);\n\t\t-ms-transform: rotateY(180deg) scale(0.8);\n\t\t-o-transform: rotateY(180deg) scale(0.8);\n\t\ttransform: rotateY(180deg) scale(0.8);\n\t}\n\t#small-circles-container {\n\t\theight: 274px;\n\t}\n\t#setcurrency {\n\t\ttop: -12%;\n\t}\n\t#infopage {\n\t\theight: 610px;\n\t\tmargin-top: -70px;\n\t}\n\t#infosubtitle {\n\t\ttop: 40px;\n\t}\n\t#infotitle {\n\t\ttop: 75px;\n\t}\n}\n@media screen and (max-height: 700px) {\n\t.month-val {\n\t\tbottom: 5px;\n\t}\n\t#mainblock {\n\t\theight: 582px; top:14%;\n\t}\n\t#savingschart {\n\t\tbottom: 20px;\n\t}\n\t#savingscircles {\n\t\tbottom: 10px;\n\t}\n\t#savings-slider-container {\n\t\tbottom: 30px;\n\t}\n\t#savingstitle {\n\t\tbottom: 200px;\n\t}\n\t#logo_statistic {\n\t\ttop: -35px;\n\t\t-webkit-transform: rotateY(180deg) scale(0.7);\n\t\t-moz-transform: rotateY(180deg) scale(0.7);\n\t\t-ms-transform: rotateY(180deg) scale(0.7);\n\t\t-o-transform: rotateY(180deg) scale(0.7);\n\t\ttransform: rotateY(180deg) scale(0.7);\n\t}\n\t#small-circles-container {\n\t\theight: 270px;\n\t}\n\t#setcurrency {\n\t\ttop: -10%;\n\t}\n}\n\n@media screen and (max-width: 1100px) {\n\t.columns {\n\t\twidth: 300px; top:24%;\n\t}\n\t#savings {\n\t\tleft: 20%; right: -450px; bottom: 0;\n\t}\n\t#incomes {\n\t\tleft: -20%; right: 450px; bottom: 0;\n\t}\n\t#expenses {\n\t\tleft: 0; right: 0; bottom: 0;\n\t}\n}\n@media screen and (min-width: 1100px) {\n\t.columns {\n\t\twidth: 340px; top:24%;\n\t}\n\t#savings {\n\t\tleft: 21%; right: -490px; bottom: 0;\n\t}\n\t#incomes {\n\t\tleft: -21%; right: 490px; bottom: 0;\n\t}\n\t#expenses {\n\t\tleft: 0; right: 0; bottom: 0;\n\t}\n}\n@media screen and (max-height: 850px) {\n\t#logo_greeting, #logo_settings {\n\t\tbackground: url(\"../images/logo_large.gif\") no-repeat;\n\t\tbackground-position: top center;\n\t\tbackground-size: 137px 204px;\n\t\tz-index: 1000;\n\t\twidth: 172px;\n\t\theight: 204px;\n\t\ttop: 5%;\n\t}\n\t#settings_hat {\n\t\theight: 28%;\n\t}\n\t.columns {\n\t\ttop:16%;\n\t}\n\t#logo_settings {\n\t\theight: 130px;\n\t\ttop: 8%;\n\t}\n\t#savebutton {\n\t\tbottom: 3%;\n\t}\n\t#incomeup, #incomedown, #expenseup, #expensedown {\n\t\tbottom: 20px;\n\t}\n}\n@media screen and (max-height: 700px) {\n\t#settings_hat {\n\t\theight: 22%;\n\t}\n\t#add-notes >.modal-content {\n\t\theight: 530px;\n\t}\n\t.notes-input {\n\t\theight: 56%\n\t}\n\t#logo_greeting, #logo_settings {\n\t\tbackground: url(\"../images/logo.gif\") no-repeat;\n\t\tbackground-size: 114px 145px;\n\t\twidth: 114px;\n\t\theight: 145px;\n\t\ttop: 8%;\n\t}\n\t.columns {\n\t\ttop:16%;\n\t}\n\t#logo_settings {\n\t\theight: 100px;\n\t}\n\t#bubble {\n\t\tright: -70px;\n\t}\n\t#savebutton {\n\t\tbottom: 1%;\n\t}\n\t#incomeup, #incomedown, #expenseup, #expensedown {\n\t\tbottom: 20px;\n\t}\n\t#piggy {\n\t\tbackground: url(\"../images/piggy.gif\") no-repeat;\n\t\tbackground-size: 149px 149px;\n\t\twidth: 149px;\n\t\theight: 149px;\n\t}\n\t#logotext {\n\t\tbackground: url(\"../images/logotext.gif\") no-repeat;\n\t\tsize: 163px 67px;\n\t\twidth: 163px;\n\t\theight: 67px;\n\t\tmargin-top: 24px;\n\t}\n\t#wrapper {\n\t\ttop: 305px;\n\t}\n\t#secondenter{\n\t\tbottom: 115px;\n\t}\n\t#preloader{\n\t\tbottom: 99px;\n\t}\n}\n/* STATISTIC PAGE CONDITIONS */\n@media screen and (max-width: 1500px) {\n\t#mainblock {\n\t\twidth: 1250px;\n\t}\n\t#incomes-lines-container, #expenses-lines-container {\n\t\tleft: 315px; width: 210px;\n\t}\n\t#savingscircles {\n\t\tleft: 330px;\n\t}\n\t#savingscircles {\n\t\tleft: 355px;\n\t\twidth: 345px;\n\t\theight: 345px;\n\t}\n\t#after-savings-value {\n\t\ttop: 2%;\n\t}\n\t#before-savings-value {\n\t\ttop: 0;\n\t}\n}\n@media screen and (max-width: 1200px) {\n\t#mainblock {\n\t\twidth: 1060px;\n\t}\n\t#incomes-lines-container, #expenses-lines-container {\n\t\tleft: 350px; width: 260px;\n\t\tpadding-top: 72px;\n\t}\n\t#savingschart {\n\t\twidth: 396px;\n\t\theight: 222px;\n\t}\n\t.months {\n\t\twidth: 33px;\n\t}\n\t#savingscircles {\n\t\tleft: 345px;\n\t\twidth: 300px;\n\t\theight: 300px;\n\t}\n\t#after-savings-value {\n\t\ttop:-5%;\n\t}\n\t#before-savings-value {\n\t\ttop:-7%;\n\t}\n\t#firstcirclediv, #firstpendant {\n\t\topacity: 0;\n\t}\n\t#small-circles-container {\n\t\theight: 260px;\n\t}\n\t#before-savings-value {\n\t\tfont-size: 24px;\n\t}\n}\n\n/*================ @2x IMAGES FOR RETINA DISPLAYS ================ */\n\n@media only screen and (-webkit-min-device-pixel-ratio: 1.5),\nonly screen and (min-resolution: 144dpi) {\n\t#logo_greeting, #logo_settings {\n\t\tbackground-image: url(\"../images/logo_large@2x.gif\");\n\t}\n\t#logo_statistic {\n\t\tbackground: url(\"../images/logotext_large@2x.gif\");\n\t\tbackground-size: 172px 65px;\n\t}\n\t.imgbox:hover {\n\t\tborder: 2px solid white;\n\t}\n}\n\n"
},
{
"path": "gateway/src/main/resources/static/index.html",
"content": "\n\n\n \n \n \n Thanks a lot for icons from The Noun Project collection.\n
\n
\n Here's the list of all used icons:\n
\n Piggy Bank designed by Jezmael Basilio\n
\n Arrow designed by Jardson A.\n
\n Wallet designed by Luis Prado\n
\n Analytics designed by Aneeque Ahmed\n
\n Piggy Bank designed by Michelle Ann\n
\n Light Bulb designed by Chris Brunskill\n
\n Speech Bubble designed by Cengiz SARI\n
\n Bag designed by Agus Purwanto\n
\n Analytics designed by Luboš Volkov\n
\n College Tuition designed by Rediffusion\n
\n Marijuana designed by Gareth\n
\n Stroller designed by Edward Boatman\n
\n Television designed by Piero Borgo\n
\n Island designed by Bohdan Burmich\n
\n Light Bulb designed by Rémy Médard\n
\n Shirt designed by Megan Sheehan\n
\n Telephone designed by Ian Mawle\n
\n Shopping Cart designed by Megan Sheehan\n
\n Gas designed by Jon Testa\n
\n
\n\n \n
\n \n
\n \n \n
\n
\n \n \n
\n metrics
\n last seen:
\n \n\n \n\n \n \n\n
\n\n \n\n \n \n \n
\n \n \n
\n \n \n \n \n
\n Add income\n Empty space\n \n \n \n \n
\n \n \n forth
\n back
\n \n
\n \n \n
\n \n
\n \n \n
\n \n \n \n \n
\n Add expense\n Empty space\n \n \n \n \n
\n \n \n forth
\n back
\n \n
\n \n \n
\n \n \n \n
\n \n \n \n My spare money\n At the moment\n \n \n
\n \n \n \n \n Interest\n \n \n \n \n
\n \n \n
\n \n\n \n \n
\n\n \n
\n \n
\n Usd
\n Eur
\n Rub
\n \n \n \n
\n \n \n \n
\n \n \n\n Incomes — expenses
\n Savings
\n\n \n \n \n \n \n \n \n
\n\n / Month
\n 100%
\n \n
\n
\n\n \n
\n\n \n
\n \n \n \n \n \n
\n / Hour
\n \n \n
100%
\n \n \n
\n Choose any
item
\n item
\n \n
\n \n \n
\n\n \n
\n \n \n \n \n \n
\n / Day
\n \n \n
100%
\n \n \n
\n Choose any
item
\n item
\n \n
\n \n \n
\n \n
\n \n \n \n \n
\n / Year
\n \n \n
100%
\n \n \n \n
\n Choose any
item
\n item
\n \n
\n \n \n \n Per hour\n \n
\n \n \n Per day\n \n
\n \n \n Per year\n \n
\n \n \n \n
\n\n Without monthly deposit refill
\n All savings go to deposit every month
\n \n
\n\n \n
\n In a year
\n \n \n \n
\n At the moment
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n
\n \n \n \n \n \n \n
\n\n \n \n
\n \n \n \n
\n \n
\n \n Piggy Metrics is the new simple way to deal with personal finances\n This is how it works\n \n
\n \n
\n enter planned periodic
incomes and expenses
\n \n \n
\n incomes and expenses
\n \n \n
\n
\n check all your savings
at the moment
\n \n \n
\n at the moment
\n \n \n
\n
\n \n analyze financial statistics
and forecasts
\n \n \n
\n and forecasts
\n \n \n
Try without registration
\n \n © 2016 sqshq.com\n icons attribution\n \n
\n \n \n
\n \n \n \n \n
\n \n \n Thank you for registration.
\n \n We suggest you to enter an e-mail address so we can occasionally remind you about the service. Continuous tracking your budget statistics might be especially effective.\n \n \n \n
\n \n \n We suggest you to enter an e-mail address so we can occasionally remind you about the service. Continuous tracking your budget statistics might be especially effective.\n \n \n \n
Expenses structure (' + separateNumber(expensesSumMonth) + '/Month)
')\n\t$(\"#incomes-lines-container\").html(' Incomes structure (' + separateNumber(incomesSumMonth) + '/Month)
')\n\n\tvar incomesIdSorted = Object.keys(incomes).sort(function(a,b){return incomes[b].converted - incomes[a].converted});\n\tvar expensesIdSorted = Object.keys(expenses).sort(function(a,b){return expenses[b].converted - expenses[a].converted});\n\n\tinitlines = function(column) {\n\t\tvar container, idSorted, maxConvertedId, i;\n\t\tif (column == incomes) {container = \"#incomes-lines-container\"; idSorted = incomesIdSorted; maxConvertedId = incomesIdSorted[0]; sum = incomesSumMonth; i=0}\n\t\telse {container = \"#expenses-lines-container\"; idSorted = expensesIdSorted; maxConvertedId = expensesIdSorted[0]; sum = expensesSumMonth; i=100}\n\n\t\tidSorted.forEach(function(id) {\n\t\t\t$(container).append('' + column[id].title + '
');\n\t\t\t$(\"#line-\" + i).data({\"item\": column[id]}).css({\"width\": Math.round(100 * column[ id ].converted / column[maxConvertedId].converted ) + \"%\"});\n\t\t\t$(\"#linebackground-\" + i).addClass(column[id].icon);\n\t\t\ti++;\n\t\t});\n\t\t$(\"#line-0, #line-100\").addClass(\"activeline\");\n\t}\n\n\tinitlines(incomes);\n\tinitlines(expenses);\n\n\t// FUTURE SAVINGS CALCULATION\n\tinitSavingsCircles = function (slidervalue, lastslidervalue, beforevalue, beforemiddlevalue, animatetime) {\n\n\t\tvar monthSavings = [],\n\t\t\t\tdepositMonthSavings = [],\n\t\t\t\tdelta = incomesSumMonth - expensesSumMonth,\n\t\t\t\tdeltaDeposit = delta * slidervalue,\n\t\t\t\tdeltaNoDeposit = delta * (1 - slidervalue),\n\t\t\t\tpercent = savings.percent,\n\t\t\t\tdeltapercents = 0;\n\t\tmonthSavings[0] = parseInt(savings.freeMoney, 10);\n\n\t\t// Set deposit tips next to slider\n\t\tif (slidervalue === 0) {\n\t\t\t$(\"#savingsTip100\").hide();\n\t\t\t$(\"#savingsTip0\").fadeIn(200);\n\t\t}\n\t\telse if (slidervalue === 1) {\n\t\t\t$(\"#savingsTip0\").hide();\n\t\t\t$(\"#savingsTip100\").fadeIn(200);\n\t\t}\n\t\telse {\n\t\t\t$(\"#savingsTip0, #savingsTip100\").fadeOut(200);\n\t\t}\n\n\t\tif (delta >= 0) {\t// if incomes > expenses\n\t\t\tif (savings.deposit) {\t// deposit turned on\n\t\t\t\tif (savings.capitalization) { // capitalization turned on (percent adds every month)\n\t\t\t\t\tif (delta === 0) { // delta = 0\n\t\t\t\t\t\t$('#savings-slider').css({\"opacity\": \"0.5\"}).attr('disabled', 'disabled');\n\t\t\t\t\t\t$(\"#savingsTip100, #savingsTip0\").hide();\n\t\t\t\t\t\tfor (var k=1; k < 13; k++) {\n\t\t\t\t\t\t\tmonthSavings[k] = ( parseInt(monthSavings[ (k-1) ], 10) + delta );\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (monthSavings[0] === 0) { // Savings = 0\n\t\t\t\t\t\t\t// Draw horizontal chart\n\t\t\t\t\t\t\t$({ value: 91 }).animate({ value: 155 }, {\n\t\t\t\t\t\t\t\tduration: animatetime,\n\t\t\t\t\t\t\t\teasing: 'swing',\n\t\t\t\t\t\t\t\tstep: function () {\n\t\t\t\t\t\t\t\t\tdrawChartLine(this.value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse { // Savings > 0\n\t\t\t\t\t\t\t// Draw increasing chart\n\t\t\t\t\t\t\t$({ value: 91 }).animate({ value: 70 }, {\n\t\t\t\t\t\t\t\tduration: animatetime,\n\t\t\t\t\t\t\t\teasing: 'swing',\n\t\t\t\t\t\t\t\tstep: function () {\n\t\t\t\t\t\t\t\t\tdrawChartLine(this.value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\telse { // delta > 0\n\t\t\t\t\t\t$('#savings-slider').css({\"opacity\": \"1\"}).removeAttr('disabled');\n\t\t\t\t\t\t// Animate chart\n\t\t\t\t\t\t$({ value: lastslidervalue}).animate({ value: slidervalue }, {\n\t\t\t\t\t\t\tduration: animatetime,\n\t\t\t\t\t\t\teasing: 'swing',\n\t\t\t\t\t\t\tstep: function () {\n\t\t\t\t\t\t\t\tdrawChartLine(110 - (this.value) * 95);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tdepositMonthSavings[0] = monthSavings[0];\n\t\t\t\t\tfor (var i=1; i < 13; i++) {\n\t\t\t\t\t\tdepositMonthSavings[i] = ( deltaDeposit + parseInt(depositMonthSavings[ (i-1) ], 10) + ( parseInt(depositMonthSavings[ (i-1) ], 10) * percent * 30.41666667 / 36500 ) ) // including delta in the last MONTH!\n\t\t\t\t\t\tmonthSavings[i] = (depositMonthSavings[i] + (deltaNoDeposit * i));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\telse {\t // capitalization turned off (percent adds in the last MONTH)\n\t\t\t\t\tif (delta === 0) {\n\t\t\t\t\t\t$('#savings-slider').css({\"opacity\": \"0.5\"}).attr('disabled', 'disabled');\n\t\t\t\t\t\t$(\"#savingsTip100, #savingsTip0\").hide();\n\t\t\t\t\t\tif (monthSavings[0] === 0) {\n\t\t\t\t\t\t\t// Draw horizontal chart\n\t\t\t\t\t\t\t$({ value: 91 }).animate({ value: 155 }, {\n\t\t\t\t\t\t\t\tduration: animatetime,\n\t\t\t\t\t\t\t\teasing: 'swing',\n\t\t\t\t\t\t\t\tstep: function () {\n\t\t\t\t\t\t\t\t\tdrawChartLine(this.value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\t// Draw increasing chart\n\t\t\t\t\t\t\t$({ value: 91 }).animate({ value: 80 }, {\n\t\t\t\t\t\t\t\tduration: animatetime,\n\t\t\t\t\t\t\t\teasing: 'swing',\n\t\t\t\t\t\t\t\tstep: function () {\n\t\t\t\t\t\t\t\t\tdrawChartLine(this.value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\t$('#savings-slider').css({\"opacity\": \"1\"}).removeAttr('disabled');\n\t\t\t\t\t\t// Animate chart\n\t\t\t\t\t\t$({ value: lastslidervalue}).animate({ value: slidervalue }, {\n\t\t\t\t\t\t\tduration: animatetime,\n\t\t\t\t\t\t\teasing: 'swing',\n\t\t\t\t\t\t\tstep: function () {\n\t\t\t\t\t\t\t\tdrawChartLine(110 - (this.value) * 95);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tfor (var j=1; j < 12; j++) {\n\t\t\t\t\t\tmonthSavings[j] = ( parseInt(monthSavings[ (j-1) ], 10) + deltaDeposit );\n\t\t\t\t\t\tdeltapercents = deltapercents + ( deltaDeposit * percent * j / 1200 );\n\t\t\t\t\t}\n\t\t\t\t\tmonthSavings[12] = (monthSavings[0] * (1 + (savings.percent / 100)) ) + (deltaDeposit * 12) + (deltaNoDeposit * 12) + deltapercents; // including delta in the last month!\n\t\t\t\t}\n\t\t\t}\n\t\t\telse {\t\t// deposit turned off\n\t\t\t\t$('#savings-slider').css({\"opacity\": \"0.5\"}).attr('disabled', 'disabled');\n\t\t\t\t$(\"#savingsTip100, #savingsTip0\").hide();\n\t\t\t\t$('.noUi-handle:after').css({\"opacity\": \"0\"})\n\t\t\t\tfor (var k=1; k < 13; k++) {\n\t\t\t\t\tmonthSavings[k] = ( parseInt(monthSavings[ (k-1) ], 10) + delta );\n\t\t\t\t}\n\t\t\t\tif (delta === 0) {\n\t\t\t\t\t// Draw horizontal chart\n\t\t\t\t\t$({ value: 91 }).animate({ value: 155 }, {\n\t\t\t\t\t\tduration: animatetime,\n\t\t\t\t\t\teasing: 'swing',\n\t\t\t\t\t\tstep: function () {\n\t\t\t\t\t\t\tdrawChartLine(this.value);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\t// Draw increasing chart\n\t\t\t\t\t$({ value: 91 }).animate({ value: 120 }, {\n\t\t\t\t\t\tduration: animatetime,\n\t\t\t\t\t\teasing: 'swing',\n\t\t\t\t\t\tstep: function () {\n\t\t\t\t\t\t\tdrawChartLine(this.value);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\telse {\t// if incomes < expenses\n\t\t\t$('#savings-slider').css({\"opacity\": \"0.5\"}).attr('disabled', 'disabled');\n\t\t\t$(\"#savingsTip100, #savingsTip0\").hide();\n\t\t\t$('.noUi-handle:after').css({\"opacity\": \"0\"});\n\t\t\tfor (var n=1; n < 13; n++) {\n\t\t\t\tmonthSavings[n] = ( parseInt(monthSavings[ (n-1) ], 10) + delta );\n\t\t\t}\n\t\t\t// Draw decreasing chart\n\t\t\t$({ value: 91 }).animate({ value: 175 }, {\n\t\t\t\tduration: animatetime,\n\t\t\t\teasing: 'swing',\n\t\t\t\tstep: function () {\n\t\t\t\t\tdrawChartLine(this.value);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\tvar aftervalue = monthSavings[12];\n\n\t\t$(\"#before-savings-value\").html( separateNumber( Math.round(savings.freeMoney) ) );\n\t\t$(\"#after-savings-value\").data({\"lastvalue\": aftervalue, \"lastmiddlevalue\": monthSavings[6]}).html( separateNumber(Math.round((savings.freeMoney * 10.222) / 100) * 100) );\n\t\t$(\"#savings-slider\").data(\"lastpercent\", $(\"#savings-slider\").data(\"checkedPercent\"));\n\n\t\t// Set font-size in big circle\n\t\t(function() {\n\t\t\tif (Math.abs (aftervalue) < 9999999 ) {\n\t\t\t\t$(\"#after-savings-value\").css({\"font-size\": \"48px\"})\n\t\t\t}\n\t\t\telse if (Math.abs (aftervalue) < 99999999) {\n\t\t\t\t$(\"#after-savings-value\").css({\"font-size\": \"42px\"})\n\t\t\t}\n\t\t\telse {\n\t\t\t\t$(\"#after-savings-value\").css({\"font-size\": \"37px\"})\n\t\t\t}\n\t\t\tif (Math.abs (beforevalue) > 9999999 ) {\n\t\t\t\t$(\"#before-savings-value\").css({\"font-size\": \"26px\"})\n\t\t\t}\n\t\t})();\n\n\t\t// Animate last value on chart\n\t\t$({ value: beforevalue }).animate({ value: aftervalue }, {\n\t\t\tduration: animatetime,\n\t\t\teasing: 'linear',\n\t\t\tstep: function () {\n\t\t\t\t$(\"#after-savings-value\").html(separateNumber( Math.round(this.value / 10) * 10));\n\t\t\t\t$(\"#month12\").children(\".large-month-val\").children(\".val\").html(separateNumber(Math.round(this.value / 10) * 10));\n\t\t\t}\n\t\t});\n\t\t// Animate middle value on chart\n\t\t$({ value: beforemiddlevalue }).animate({ value: monthSavings[6] }, {\n\t\t\tduration: animatetime,\n\t\t\teasing: 'linear',\n\t\t\tstep: function () {\n\t\t\t\t$(\"#month6\").children(\".large-month-val\").children(\".val\").html(separateNumber( Math.round(this.value)));\n\t\t\t}\n\t\t});\n\t\t// Set precision value\n\t\tsetTimeout(function() {\n\t\t\t$(\"#after-savings-value\").html(separateNumber( Math.round(aftervalue / 10) * 10));\n\t\t\t$(\"#month12\").children(\".large-month-val\").children(\".val\").html(separateNumber(Math.round(aftervalue / 10) * 10));\n\t\t}, animatetime+20);\n\n\t\t// Set every month values on chart\n\t\tfor (i = 1; i < 12; i++) {\n\t\t\t$(\"#month\" + i).children(\".month-val\").children(\".val\").html(separateNumber(Math.round(monthSavings[i])));\n\t\t}\n\t\t$(\"#month6, #month12\").children(\".month-val\").html(\"\");\n\t}\n\n\t// Launch Savings circles\n\tif (typeof $(\"#savings-slider\").data('checkedPercent') == 'undefined')\n\t{\n\t\t$(\"#savings-slider\").data({\"checkedPercent\": Number(user.checkedPercent) });\n\t}\n\n\t// Change currency stuff\n\t$(\"#rubcurr, #eurcurr, #usdcurr\").removeClass(\"currchecked\");\n\tswitch (user.checkedCurr) {\n\t\tcase \"RUB\": $(\".curr\").html(\" Rub \").data(\"curr\", \" rub.\"); $(\".savings-circle-currency\").html(\" Rubles \"); $(\"#rubcurr\").addClass(\"currchecked\");\n\t\t\tbreak;\n\t\tcase \"EUR\": $(\".curr, .savings-circle-currency\").html(\" Eur \").data(\"curr\", \" \\u20ac\"); $(\"#eurcurr\").addClass(\"currchecked\");\n\t\t\tbreak;\n\t\tcase \"USD\": $(\".curr, .savings-circle-currency\").html(\" USD \").data(\"curr\", \" $\"); $(\"#usdcurr\").addClass(\"currchecked\");\n\t\t\tbreak;\n\t}\n\n\tif (incomesSumMonth > expensesSumMonth) {\n\t\tsetTimeout(function() {\n\t\t\t$(\".topmaincircletitle\").html(\"Spare\");\n\t\t\tsimpleanimatecircle.call($(\"#inner-circle\"), 0, 100, 1200);\n\t\t\t$(\"#outer-circle-value\").css({\"color\": \"black\"});\n\t\t\t$(\"#incomes-cursor\").hide();\n\t\t\t$(\"#expense-cursor\").show();\n\t\t\tanimatecircle.call($(\"#outer-circle\"), 0, Math.round(expensesSumMonth), Math.round(incomesSumMonth));}, 350);\n\t}\n\telse {\n\t\tsetTimeout(function() {\n\t\t\t$(\".topmaincircletitle\").html(\"Loss\");\n\t\t\tsimpleanimatecircle.call($(\"#inner-circle\"), 0, 100, 800);\n\t\t\t$(\"#outer-circle-value\").css({\"color\": \"#eaa7a7\"});\n\t\t\t$(\"#expense-cursor\").hide();\n\t\t\t$(\"#incomes-cursor\").show();\n\t\t\tanimatecircle.call($(\"#outer-circle\"), 0, Math.round(incomesSumMonth), Math.round(expensesSumMonth)); }, 350);\n\t}\n}\n\nfunction separateNumber(val) {\n\tif (Math.abs (val) > 999) {\n\t\tval = val.toString().replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, '$1 ');\n\t}\n\telse {\n\t\tval = val.toString().replace(/(\\.)/g, '$1');\n\t}\n\treturn val;\n};\n\n// ANIMATE CIRCLE PROCESS\nfunction animatecircle(beforevalue, aftervalue, sum, title) {\n\tvar before = (100 * beforevalue/sum),\n\t\t\tafter = (100 * aftervalue/sum),\n\t\t\tR = $(this).data(\"width\") / 2,\n\t\t\talpha = (after * 0.02 * Math.PI),\t// percent to radians\n\t\t\tn = 10,\t\t\t\t\t\t\t\t// margin from circle\n\t\t\tid = $(this).attr(\"id\"),\n\t\t\t$this = $(this),\n\t\t\tycord, xcord;\n\n\t// Set font size\n\t(function() {\n\t\tvar fontpx;\n\t\tif (id == \"outer-circle\") {\n\t\t\tif (sum-aftervalue < 999999) { fontpx = 48 }\n\t\t\telse if (sum-aftervalue < 9999999) {fontpx = 37 }\n\t\t\telse { fontpx = 22 }\n\t\t}\n\t\telse {\n\t\t\tif (aftervalue < 99999) {fontpx = 31}\n\t\t\telse if (aftervalue < 999999) {\tfontpx = 27 }\n\t\t\telse { fontpx = 18 }\n\t\t}\n\t\t$(\"#\" + id + \"-value\").css({\"font-size\": fontpx + \"px\"})\n\t})();\n\n\t// Percent value location\n\tif (after <= 25 ) {\n\t\tycord = Math.round( R + (n / 2) - (R * Math.sin(1.57 - alpha)) );\n\t\txcord = Math.round( R + (n) + (R * Math.cos(1.57 - alpha)) );\n\t\tanimatetime = 500;\n\t}\n\telse if (after <= 50 ) {\n\t\tycord = Math.round( R + (n / 2) + (R * Math.sin(alpha - 1.57)) );\n\t\txcord = Math.round( R + (n * 2) + (R * Math.cos(alpha - 1.57)) );\n\t\tanimatetime = 1400;\n\t}\n\telse if (after <= 75 ) {\n\t\tycord = Math.round( R - (n * 2) + (R * Math.sin(alpha - 1.57)) );\n\t\txcord = Math.round( R - (n * 4) + (R * Math.cos(alpha - 1.57)) );\n\t\tanimatetime = 1500;\n\t}\n\telse {\n\t\tycord = Math.round( R + (- n * 3) - (R * Math.sin(1.57 - alpha)) );\n\t\txcord = Math.round( R + (- n * 3) + (R * Math.cos(1.57 - alpha)) );\n\t\tanimatetime = 1600;\n\t}\n\n\t// Set and show percent value next to cursor\n\t$(\"#\" + id + \"-percent\").hide();\n\t$(\"#\" + id + \"-percent\").empty().append('' + Math.round(after) + '%');\n\tsetTimeout(function () { $(\"#\" + id + \"-percent\").css({\"left\": xcord, \"top\": ycord}).fadeIn(400)}, animatetime-200);\n\n\t// Animate circle with its cursor\n\t$({ value: before }).animate({ value: after }, {\n\t\tduration: animatetime,\n\t\teasing: 'swing',\n\t\tstep: function () {\n\t\t\t$this.val(this.value).trigger('change');\n\t\t\t$(\"#\" + id + \"-cursor\").val(this.value).trigger('change');\n\t\t}\n\t});\n\n\t// Set precision value\n\t(function() {\n\t\tif (id == \"outer-circle\") {\n\t\t\t$(\"#\" + id + \"-value\").html(separateNumber( Math.abs(Math.round((sum-aftervalue) / 10) * 10) ) );\n\t\t}\n\t\telse {\n\t\t\t$(\"#\" + id + \"-value\").html( separateNumber(aftervalue) )\n\t\t\t$(\"#\" + id + \"-title\").html(title);\n\t\t}\n\t})();\n}\n\n// Animate without percent moving and value growing (for inner circle)\nfunction simpleanimatecircle(before, after, duration) {\n\tvar $this = $(this);\n\t$({ value: before }).animate({ value: after }, {\n\t\tduration: duration,\n\t\teasing: 'swing',\n\t\tstep: function () {\n\t\t\t$this.val(this.value).trigger('change');\n\t\t}\n\t});\n}\n\n/**\n * EVENT HANDLERS\n */\n\n// Currency buttons\n$(\".currunchecked\").click(function() {\n\tif (this.id == \"eurcurr\") {\n\t\tuser.checkedCurr = \"EUR\";\n\t}\n\telse if (this.id == \"usdcurr\") {\n\t\tuser.checkedCurr = \"USD\";\n\t}\n\telse {\n\t\tuser.checkedCurr = \"RUB\";\n\t}\n\trunConvert();\n\n\tinitStatisticPage();\n\tsetTimeout(function() { initSavingsCircles($(\"#savings-slider\").data(\"checkedPercent\"), 0.2, savings.freeMoney, savings.freeMoney, 700) }, 100);\n\tinitCircle(\"first\", $(\"#first-circle\").data(\"item\"), 0);\n\tinitCircle(\"second\", $(\"#second-circle\").data(\"item\"), 0);\n\tinitCircle(\"third\", $(\"#third-circle\").data(\"item\"), 0);\n\n\t$('#savings-slider').noUiSlider({\n\t\tstart: (incomesSumMonth-expensesSumMonth) * $(\"#savings-slider\").data(\"checkedPercent\"),\n\t\tstep: (incomesSumMonth-expensesSumMonth) / 20,\n\t\trange: {\n\t\t\t'min': [ 0 ],\n\t\t\t'max': [ Math.abs(incomesSumMonth-expensesSumMonth) ]\n\t\t}\n\t}, true);\n});\n\n$(\"#outermaindiv, #incomes-cursor, #expense-cursor, .lines-title\").click(function() {\n\tsetTimeout(function() { $(\"#expenses-lines-container, #incomes-lines-container\").toggle(); }, 250);\n\t$(\"#expense-cursor, #incomes-cursor\").toggle(300);\n\t$(\".itemline\").removeClass(\"activeline\");\n\t$(\"#line-0, #line-100\").addClass(\"activeline\");\n});\n\n$(\"#expenses-lines-container, #incomes-lines-container\").on(\"hover\", \".itemline\", function() {\n\t$(\".itemline\").removeClass(\"activeline\");\n\t$(this).addClass(\"activeline\");\n});\n\n$(\"#expenses-lines-container, #incomes-lines-container\").on(\"click\", \".itemline\", function() {\n\t$(\".itemline\").removeClass(\"activeline\");\n\t$(this).addClass(\"activeline\");\n\tvar item = $(this).data(\"item\");\n\tinitCircle(\"first\", item, 0);\n\tinitCircle(\"second\", item, 0);\n\tinitCircle(\"third\", item, 0);\n});\n\n$(\"#firstcirclediv, #secondcirclediv, #thirdcirclediv\").click(function() {\n\t$(\"#\" + this.id + \"flipper\").toggleClass(\"flippedcard\");\n});\n\n$(\"#circle-select-1, #circle-select-2, #circle-select-3\").on(\"change\", function() {\n\tvar column, item,\n\t\t\tcircle = this.id,\n\t\t\twhichCircle;\n\tswitch (circle) {\n\t\tcase \"circle-select-1\": whichCircle = \"first\";\n\t\t\tbreak;\n\t\tcase \"circle-select-2\": whichCircle = \"second\";\n\t\t\tbreak;\n\t\tdefault: whichCircle = \"third\";\n\t\t\tbreak;\n\t}\n\tif ($(this).val() < 100 ) {\n\t\tcolumn = incomes;\n\t\titem = $(this).val();\n\t\tsetTimeout(function() { initCircle( whichCircle, column[item], 0) }, 300);\n\t}\n\telse {\n\t\tcolumn = expenses;\n\t\titem = $(this).val() - 100;\n\t\tsetTimeout(function() { initCircle( whichCircle, column[item], 0) }, 300);\n\t}\n\t$(\"#\" + circle + \"-back\").removeClass().addClass( column[item].icon );\n});\n\nfunction initSavingsSlider() {\n\tvar Link = $.noUiSlider.Link,\n\t\t\tsub;\n\tsimpleSeparateNumber = function(val) {\n\t\tif (Math.abs (val) > 999) {\n\t\t\tval = val.toString().replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, '$1 ');\n\t\t}\n\t\telse {\n\t\t\tval = val.toString().replace(/(\\.)/g, '$1');\n\t\t}\n\t\treturn val;\n\t};\n\t$('#savings-slider').noUiSlider({\n\t\tstart: (incomesSumMonth-expensesSumMonth) * user.checkedPercent,\n\t\tstep: (incomesSumMonth-expensesSumMonth) / 20,\n\t\trange: {\n\t\t\t'min': [ 0 ],\n\t\t\t'max': [ incomesSumMonth-expensesSumMonth ]\n\t\t},\n\t\tserialization: {\n\t\t\tlower: [\n\t\t\t\tnew Link({\ttarget: function(value){ $(\"#savings-slider\").data({\"checkedPercent\": Math.round(value / (incomesSumMonth-expensesSumMonth + 0.001) * 100) / 100}); $(\".noUi-handle\").attr({ percent: Math.round(value / (incomesSumMonth-expensesSumMonth + 0.001) * 100) + \"%\" }) }, format: { decimals: 0 } }),\n\t\t\t\tnew Link({\ttarget: function(value){ $(\".noUi-handle\").attr({ value: simpleSeparateNumber(Math.round(value / 10 ) * 10) + $(\".curr\").data(\"curr\")}) }, format: { decimals: 0} })\n\t\t\t]\n\t\t}\n\t});\n}\n\n$('#savings-slider').on('slide', function() {\n\tvar lastVal = $(\"#after-savings-value\").data(\"lastvalue\"),\n\t\t\tanimatetime;\n\tif (lastVal < 99999) animatetime = 200;\n\telse animatetime = 700;\n\tinitSavingsCircles($(\"#savings-slider\").data(\"checkedPercent\"), $(\"#savings-slider\").data(\"lastpercent\"), lastVal, $(\"#after-savings-value\").data(\"lastmiddlevalue\"), animatetime);\n});\n\n(function(){\n\tvar canvas1 = document.getElementById(\"movingcircle-1\"),\n\t\t\tcanvas2 = document.getElementById(\"movingcircle-2\"),\n\t\t\tcanvas3 = document.getElementById(\"movingcircle-3\"),\n\t\t\tctx1 = canvas1.getContext('2d'),\n\t\t\tctx2 = canvas2.getContext('2d'),\n\t\t\tctx3 = canvas3.getContext('2d'),\n\t\t\tx = canvas1.width / 2,\n\t\t\ty = canvas1.height / 2,\n\t\t\tradius = 99,\n\t\t\tstartAngle = 1 * Math.PI,\n\t\t\tendAngle = 2.2 * Math.PI,\n\t\t\tcounterClockwise = false;\n\n\tctx1.beginPath();\n\tctx1.arc(x, y, radius, startAngle, endAngle, counterClockwise);\n\tctx1.lineWidth = 3;\n\tctx1.strokeStyle = \"#f2f2f2\";\n\tctx1.stroke();\n\n\tctx2.beginPath();\n\tctx2.arc(x, y, radius, startAngle, endAngle, counterClockwise);\n\tctx2.lineWidth = 3;\n\tctx2.strokeStyle = \"#f2f2f2\";\n\tctx2.stroke();\n\n\tctx3.beginPath();\n\tctx3.arc(x, y, radius, startAngle, endAngle, counterClockwise);\n\tctx3.lineWidth = 3;\n\tctx3.strokeStyle = \"#f2f2f2\";\n\tctx3.stroke();\n})();\n\n(function(){\n\tvar canvas = document.getElementById(\"horizontal\"),\n\t\t\tcurrentDate = new Date(),\n\t\t\tcurrentMonth = currentDate.getMonth(),\n\t\t\tallMonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\tif (canvas.getContext) {\n\t\tvar ctx = canvas.getContext(\"2d\");\n\t\tctx.canvas.width = $(\"#savingschart\").width();\n\t\tctx.canvas.height = $(\"#savingschart\").height();\n\t\tfor (i=0; i < 11; i++){\n\t\t\tctx.beginPath();\n\t\t\tctx.moveTo(0, 1 + i * 22);\n\t\t\tctx.lineTo($(\"#savingschart\").width(), 1 + i * 22);\n\t\t\tctx.strokeStyle = '#e5e5e5';\n\t\t\tctx.stroke();\n\t\t\tctx.beginPath();\n\t\t\tctx.moveTo(0, 0.5 + i * 22);\n\t\t\tctx.lineTo($(\"#savingschart\").width(), 0.5 + i * 22);\n\t\t\tctx.strokeStyle = '#FFF';\n\t\t\tctx.stroke();\n\t\t}\n\t}\n\tfor (i = 0, j = currentMonth; i <=12; i++, j++) {\n\t\tif (j == 12) {j = 0}\n\t\t$(\"#month\" + i).children(\".month-name\").html(allMonths[j]);\n\t}\n})();\n\nfunction drawChartLine(position) {\n\tvar canvas = document.getElementById(\"chartline\");\n\tvar chartWidth = $(\"#savingschart\").width(),\n\t\t\tchartHeight = $(\"#savingschart\").height(),\n\t\t\tsegmentWidth = $(\".months\").width();\n\tif (canvas.getContext){\n\t\tvar ctx = canvas.getContext(\"2d\");\n\t\tctx.canvas.width = $(\"#savingschart\").width();\n\t\tctx.canvas.height = $(\"#savingschart\").height();\n\t\tctx.beginPath();\n\t\tctx.moveTo(0, 155);\n\t\tctx.lineTo($(\"#savingschart\").width(), position);\n\t\tctx.strokeStyle = '#bed8db';\n\t\tctx.stroke();\n\t}\n\tfor (i = 0, j = 12; i < 12; i++, j--) {\n\t\t$(\"#month\" + j).css({\"height\": chartHeight - position - i * 7 -((i * segmentWidth * (chartHeight - 153 - position) ) / chartWidth) });\n\t}\n}\n"
},
{
"path": "gateway/src/main/resources/static/js/launch.js",
"content": "var global = {\n mobileClient: false,\n savePermit: true,\n usd: 0,\n eur: 0\n};\n\n/**\n * Oauth2\n */\n\nfunction requestOauthToken(username, password) {\n\n\tvar success = false;\n\n\t$.ajax({\n\t\turl: 'uaa/oauth/token',\n\t\tdatatype: 'json',\n\t\ttype: 'post',\n\t\theaders: {'Authorization': 'Basic YnJvd3Nlcjo='},\n\t\tasync: false,\n\t\tdata: {\n\t\t\tscope: 'ui',\n\t\t\tusername: username,\n\t\t\tpassword: password,\n\t\t\tgrant_type: 'password'\n\t\t},\n\t\tsuccess: function (data) {\n\t\t\tlocalStorage.setItem('token', data.access_token);\n\t\t\tsuccess = true;\n\t\t},\n\t\terror: function () {\n\t\t\tremoveOauthTokenFromStorage();\n\t\t}\n\t});\n\n\treturn success;\n}\n\nfunction getOauthTokenFromStorage() {\n\treturn localStorage.getItem('token');\n}\n\nfunction removeOauthTokenFromStorage() {\n return localStorage.removeItem('token');\n}\n\n/**\n * Current account\n */\n\nfunction getCurrentAccount() {\n\n\tvar token = getOauthTokenFromStorage();\n\tvar account = null;\n\n\tif (token) {\n\t\t$.ajax({\n\t\t\turl: 'accounts/current',\n\t\t\tdatatype: 'json',\n\t\t\ttype: 'get',\n\t\t\theaders: {'Authorization': 'Bearer ' + token},\n\t\t\tasync: false,\n\t\t\tsuccess: function (data) {\n\t\t\t\taccount = data;\n\t\t\t},\n\t\t\terror: function () {\n\t\t\t\tremoveOauthTokenFromStorage();\n\t\t\t}\n\t\t});\n\t}\n\n\treturn account;\n}\n\n$(window).load(function(){\n\n\tif(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {\n\t\tFastClick.attach(document.body);\n global.mobileClient = true;\n\t}\n\n $.getJSON(\"https://api.exchangeratesapi.io/latest?base=RUB&symbols=EUR,USD\", function( data ) {\n global.eur = 1 / data.rates.EUR;\n global.usd = 1 / data.rates.USD;\n });\n\n\tvar account = getCurrentAccount();\n\n\tif (account) {\n\t\tshowGreetingPage(account);\n\t} else {\n\t\tshowLoginForm();\n\t}\n});\n\nfunction showGreetingPage(account) {\n initAccount(account);\n\tvar userAvatar = $(\"'+ Math.round(100 * column[id].converted / sum) +'%
' + separateNumber(Math.round(column[id].converted)) + ' /Month
'+optionText+'
'+''+'' + incomes[key].title + '
');\n $(\"#income-\" + incomes[key].income_id).data({\"id\": incomes[key].income_id, \"icon\": incomes[key].icon, \"amount\": incomes[key].amount, \"title\": incomes[key].title, \"currency\": incomes[key].currency ,\"period\": incomes[key].period}).children(\"div\").addClass(incomes[key].icon);\n });\n Object.keys(expenses).forEach(function(key) {\n var value = expenses[key].amount.replace(/(\\d)(?=(\\d\\d\\d)+([^\\d]|$))/g, '$1 ');\n $(\"#expenseslider\").append('' + value + ' ' + checkCurrency(incomes[key].currency) + checkPeriod(incomes[key].period) + '
' + expenses[key].title + '
');\n $(\"#expense-\" + expenses[key].expense_id).data({\"id\": expenses[key].expense_id, \"icon\": expenses[key].icon, \"amount\": expenses[key].amount, \"title\": expenses[key].title, \"currency\": expenses[key].currency ,\"period\": expenses[key].period}).children(\"div\").addClass(expenses[key].icon);\n });\n\n // Show big ADD ITEM button when column is empty\n checkSlidersLength();\n\n // Markup changes according to number of column items\n itemsPosition(\"expense\");\n itemsPosition(\"income\");\n}\n\n// According to number of column items - show/hide up&down buttons and change position:absolute\nfunction itemsPosition(transaction) {\n if ($(\"div#\" + transaction + \"slider\").children().length <= 4) {\n $(\"#\" + transaction + \"slider\").css({\"position\": \"relative\"});\n $(\"#\" + transaction + \"down, #\" + transaction + \"up\").hide();\n }\n else {\n $(\"#\" + transaction + \"slider\").css({\"position\": \"absolute\"});\n $(\"#\" + transaction + \"down, #\" + transaction + \"up\").show();\n }\n}\n\nfunction checkSlidersLength() {\n switch ($(\"div#incomeslider\").children().length) {\n case 0: $(\"#noincomes\").show();\n $(\"#incomesplusitem\").hide();\n break;\n default:\n $(\"#noincomes\").hide();\n $(\"#incomesplusitem\").show();\n break;\n }\n switch ($(\"div#expenseslider\").children().length) {\n case 0: $(\"#noexpenses\").show();\n $(\"#expensesplusitem\").hide();\n break;\n default:\n $(\"#noexpenses\").hide();\n $(\"#expensesplusitem\").show();\n break;\n }\n}\n\nfunction checkPeriod(period) {\n var periodText;\n switch (period) {\n case \"YEAR\":\n periodText = \" / per year\";\n break;\n case \"QUARTER\":\n periodText = \" / per quater\";\n break;\n case \"MONTH\":\n periodText = \" / per month\";\n break;\n case \"DAY\":\n periodText = \" / per day\";\n break;\n case \"HOUR\":\n periodText = \" / per hour\";\n break;\n }\n return periodText\n}\n\nfunction checkCurrency(currency) {\n var currencyText;\n switch (currency) {\n case \"RUB\": currencyText=\"rub.\";\n break;\n case \"USD\": currencyText=\"$\";\n break;\n case \"EUR\": currencyText=\"€\";\n break;\n }\n return currencyText\n}\n\n// SLIDE COLUMNS UP AND DOWN\n\n// Eliminate the frequent calling slide functions\nfunction debounce(f, ms) {\n var state = null;\n var cooldown = 1;\n return function() {\n if (state) return;\n f.apply(this, arguments);\n state = cooldown;\n setTimeout(function() { state = null }, ms);\n }\n}\n\nUp \t = debounce(Up, 300);\nDown = debounce(Down, 300);\n\ninitStatisticPage \t= debounce(initStatisticPage, 900);\nlaunchStatistic \t= debounce(launchStatistic, 2400);\nfadeStatistic \t\t= debounce(fadeStatistic, 1900);\njsonDataSave \t\t= debounce(jsonDataSave, 1800);\nstartOfExpenseList \t= debounce(startOfExpenseList, 500);\nendOfExpenseList \t= debounce(endOfExpenseList, 500);\nstartOfIncomeList \t= debounce(startOfIncomeList, 500);\nendOfIncomeList \t= debounce(endOfIncomeList, 500);\ninitGreetingPage \t= debounce(initGreetingPage, 2000);\n\n// Slide up\nfunction Up(transaction) {\n var length = $(\"#\" + transaction + \"slider\").children().length;\n var itemWidth = 71;\n if (Math.abs($(\"#\" + transaction + \"slider\").position().top % itemWidth) > 0.01) return;\n else if ($(\"#\" + transaction + \"slider\").position().top > -(length-4)*itemWidth) {\n var pixels=$(\"#\" + transaction + \"slider\").position().top + (length-5)*itemWidth;\n var slide = \"translateY(\"+ pixels + \"px)\";\n $(\"#\" + transaction + \"slider\").css({\n \"-webkit-transform\": slide,\n \"-moz-transform\": slide,\n \"-o-transform\": slide,\n \"-ms-transform\": slide,\n \"transform\": slide\n });\n }\n else {\n if (transaction == \"expense\") {\n endOfExpenseList(transaction);\n setTimeout(endOfExpenseList, 500);\n }\n else {\n endOfIncomeList(transaction);\n setTimeout(endOfIncomeList, 500);\n }\n }\n}\n// Slide down\nfunction Down(transaction) {\n var length = $(\"div#\" + transaction + \"slider\").children().length;\n var itemWidth = 71;\n if (Math.abs($(\"#\" + transaction + \"slider\").position().top % itemWidth) > 0.01) return;\n else if ($(\"#\" + transaction + \"slider\").position().top < -20) {\n var pixels=$(\"#\" + transaction + \"slider\").position().top + (length-3)*itemWidth;\n var slide = \"translateY(\"+ pixels + \"px)\";\n $(\"#\" + transaction + \"slider\").css({\n \"-webkit-transform\": slide,\n \"-moz-transform\": slide,\n \"-o-transform\": slide,\n \"-ms-transform\": slide,\n \"transform\": slide\n });\n }\n else {\n if (transaction == \"expense\") {\n startOfExpenseList(transaction);\n setTimeout(startOfExpenseList, 530);\n }\n else {\n startOfIncomeList(transaction);\n setTimeout(startOfIncomeList, 530);\n }\n }\n}\n\n// Bounce end of list functions\nfunction startOfExpenseList(transaction) {\n $(\"#expensewrapper\").toggleClass(\"startoflist\");\n}\nfunction endOfExpenseList(transaction) {\n $(\"#expensewrapper\").toggleClass(\"endoflist\");\n}\nfunction startOfIncomeList(transaction) {\n $(\"#incomewrapper\").toggleClass(\"startoflist\");\n}\nfunction endOfIncomeList(transaction) {\n $(\"#incomewrapper\").toggleClass(\"endoflist\");\n}\n\n// MODAL WINDOWS FUNCTIONS\n\n// ADD ITEMS\nfunction addNewItem() {\n var itemTitle = $(\".modaltitle\").val(),\n itemIcon = $(\".initicons\").data(\"iconselected\"),\n itemCurrency = $(\".modalcurrency\").val(),\n itemPeriod = $(\".modalperiod\").val(),\n itemValue = $(\".modalvalue\").autoNumeric(\"get\"),\n itemId = 0;\n if (checkModalFields(itemValue, itemTitle)) { // If inputs are proper filled, add incomes or expenses\n if ($(\".initicons\").data (\"incomes-expenses\") == \"incomes\") {\n Object.keys(incomes).forEach(function(keys) {\tif (incomes[keys].income_id > itemId) {\titemId = (incomes[keys].income_id)\t}});\n AddIncome(++itemId, itemTitle, itemIcon, itemCurrency, itemPeriod, itemValue);\n addNewDiv(\"income\", itemId, itemTitle, itemIcon, itemCurrency, itemPeriod, itemValue);\n }\n else {\n Object.keys(expenses).forEach(function(keys) {\tif (expenses[keys].expense_id > itemId) {\titemId = (expenses[keys].expense_id)\t}});\n AddExpense(++itemId, itemTitle, itemIcon, itemCurrency, itemPeriod, itemValue);\n addNewDiv(\"expense\", itemId, itemTitle, itemIcon, itemCurrency, itemPeriod, itemValue);\n }\n turnOffModal();\n }\n checkSlidersLength();\n itemsPosition(\"expense\");\n itemsPosition(\"income\");\n setTimeout(function() { runConvert() }, 230);\n}\nfunction addNewDiv(whichColumn, itemId, itemTitle, itemIcon, itemCurrency, itemPeriod, itemValue) {\n var value = itemValue.replace(/(\\d)(?=(\\d\\d\\d)+([^\\d]|$))/g, '$1 ');\n $(\"#\" + whichColumn + \"slider\").append('' + value + ' ' + checkCurrency(expenses[key].currency) + checkPeriod(expenses[key].period) + '
' + itemTitle + '
');\n $(\"#\" + whichColumn + \"-\" + itemId).addClass(\"newitemadded\").data({\"id\": itemId, \"icon\": itemIcon, \"amount\": itemValue, \"title\": itemTitle, \"currency\": itemCurrency ,\"period\": itemPeriod}).children(\"div\").addClass(itemIcon);\n setTimeout(function() { $(\"#\" + whichColumn + \"-\" + itemId).removeClass(\"newitemadded\") }, 4100);\n}\n// EDIT ITEMS\nfunction itemClick(item) {\n // Add delete-button\n $(\".modal-delete\").show();\n var itemDiv = $(\"#\" + item.id),\n itemIcon = itemDiv.data(\"icon\"),\n itemCurrency = itemDiv.data(\"currency\"),\n itemPeriod = itemDiv.data(\"period\"),\n itemValue = itemDiv.data(\"amount\"),\n itemTitle = itemDiv.data(\"title\"),\n itemId = itemDiv.data(\"id\"),\n incomesExpenses = \"expense\",\n whichColumn = expenses;\n\n if (itemDiv.hasClass(\"incomeitem\")) {\n $(\".mainmodaltitle\").empty().append(\"Change income\");\n incomesExpenses = \"income\";\n whichColumn = incomes;\n }\n else {\n $(\".mainmodaltitle\").empty().append(\"Change expense\");\n }\n $(\".initicons\").data({\"iconselected\": itemIcon, \"add-edit\": \"edit\", \"incomes-expenses\": incomesExpenses + \"s\"});\n $(\"#chooseicon\").removeClass().addClass(itemIcon);\n $(\".modalvalue\").show().autoNumeric(\"set\", itemValue);\n $(\".modaltitle\").show().val(itemTitle);\n $(\".modalcurrency\").val(itemCurrency);\n $(\".modalperiod\").val(itemPeriod);\n $(\".modalcurrency, .modalperiod\").trigger(\"refresh\");\n $(\"#overlay, #add-modal\").addClass(\"modal-show\");\n setTimeout(function() { $('.modalvalue').putCursorAtEnd() }, 50);\n saveOldItem = function() {\n if (checkModalFields($(\".modalvalue\").val(), $(\".modaltitle\").val())) { // If inputs are proper filled, save changes\n whichColumn[itemId].title = $(\".modaltitle\").val();\n whichColumn[itemId].amount = $(\".modalvalue\").autoNumeric(\"get\");\n whichColumn[itemId].icon = $(\".initicons\").data(\"iconselected\");\n whichColumn[itemId].currency = $(\".modalcurrency\").val();\n whichColumn[itemId].period = $(\".modalperiod\").val();\n editOldDiv(incomesExpenses, itemId, $(\".modaltitle\").val(), $(\".initicons\").data(\"iconselected\"), $(\".modalcurrency\").val(), $(\".modalperiod\").val(), $(\".modalvalue\").autoNumeric(\"get\"));\n turnOffModal();\n }\n checkSlidersLength();\n itemsPosition(\"expense\");\n itemsPosition(\"income\");\n setTimeout(function() { runConvert() }, 230);\n };\n deleteItem = function() {\n turnOffModal();\n delete whichColumn[itemId];\n itemDiv.css({\"height\": \"0px\", \"background-color\": \"#ffe3e3\"});\n setTimeout(function() { $(\"#\" + incomesExpenses + \"-\" + itemId).remove(); checkSlidersLength() }, 300);\n\n // Way to proper move items list\n var slider = $(\"#\" + incomesExpenses + \"slider\");\n if (slider.position().top > -71 && slider.children().length > 4) {\n setTimeout(function() { Up(incomesExpenses) }, 300);\n }\n itemsPosition(\"expense\");\n itemsPosition(\"income\");\n setTimeout(function() { runConvert() }, 230);\n\n // Save changes on server\n jsonDataSave();\n }\n}\nfunction editOldDiv(whichColumn, itemId, itemTitle, itemIcon, itemCurrency, itemPeriod, itemValue) {\n var value = itemValue.replace(/(\\d)(?=(\\d\\d\\d)+([^\\d]|$))/g, '$1 ');\n $(\"#\" + whichColumn + \"-\" + itemId).replaceWith('' + value + ' ' + checkCurrency(itemCurrency) + checkPeriod(itemPeriod) + '
' + itemTitle + '
');\n $(\"#\" + whichColumn + \"-\" + itemId).addClass(\"newitemadded\").data({\"id\": itemId, \"icon\": itemIcon, \"amount\": itemValue, \"title\": itemTitle, \"currency\": itemCurrency ,\"period\": itemPeriod}).children(\"div\").addClass(itemIcon);\n setTimeout(function() { $(\"#\" + whichColumn + \"-\" + itemId).removeClass(\"newitemadded\") }, 4100);\n}\n// prepare calculations for 4 page\nfunction runConvert() {\n expensesSumMonth = 0; incomesSumMonth = 0;\n $(\"#circle-select-1, #circle-select-2, #circle-select-3\").empty();\n getConverted(incomes);\n getConverted(expenses);\n}\n\n\n\n// EVENT HANDLERS\n\n// MODAL: Call add items modal window\n$(\"#noincomes, #noexpenses, .zoomplus, .plusitemborder\").click(function() {\n $(\".mainmodaltitle\").empty();\n if ($(this).hasClass(\"incomebutton\")) {\n $(\".initicons\").data({\"iconselected\": \"wallet\", \"add-edit\": \"add\", \"incomes-expenses\": \"incomes\"});\n $(\"#chooseicon\").removeClass().addClass(\"wallet\");\n $(\".mainmodaltitle\").append(\"Add income\");\n }\n else {\n $(\".initicons\").data({\"iconselected\": \"cart\", \"add-edit\": \"add\", \"incomes-expenses\": \"expenses\"});\n $(\"#chooseicon\").removeClass().addClass(\"cart\");\n $(\".mainmodaltitle\").append(\"Add expense\");\n }\n $(\".modalvalue, .modaltitle\").show();\n $(\"#overlay, #add-modal\").addClass(\"modal-show\");\n setTimeout(function() { $('.modalvalue').putCursorAtEnd() }, 50);\n});\n\n// MODAL: Save button handlers\n$(\".modal-save\").click(addOrSaveItems);\n$(\".modaltitle, .modalvalue\").keyup(function(e) {\n if(e.which == 13) {\taddOrSaveItems(); this.blur() }\n});\n\nfunction addOrSaveItems () {\n if($(\".initicons\").data(\"add-edit\") == \"add\") {\n addNewItem();\n }\n else {\n saveOldItem();\n }\n jsonDataSave();\n}\n\n// MODAL: Delete button handler\n$(\".modal-delete\").click(function() {\n deleteItem();\n});\n\n// MODAL: Set choosen icon\n$(\".imgbox\").click(function() {\n $(\".modaltable\").addClass(\"modalreverse\");\n setTimeout( function() { $(\".modalincomessurface, .modalexpensessurface\").fadeOut(150); } , 160);\n var icon = $(this).children(\"div\").attr('class').split(' ')[1];\n $(\".initicons\").data(\"iconselected\", icon);\n $(\"#chooseicon\").removeClass().addClass(icon);\n});\n\n// MODAL: Check that fields are not empty\nfunction checkModalFields (itemValue, itemTitle) {\n if (itemValue == 0) { // Check value input\n $(\".modalvalue\").addClass(\"modalvalueerror\");\n setTimeout(function() { $(\".modalvalue\").removeClass(\"modalvalueerror\") }, 500);\n return false;\n }\n else if (itemTitle.length == 0) { // Check title input\n $(\".modaltitle\").addClass(\"modaltitleerror\");\n setTimeout(function() { $(\".modaltitle\").removeClass(\"modaltitleerror\") }, 500);\n return false;\n }\n else {\n return true;\n }\n}\n\n// MODAL: Start icons table \n$(\".initicons\").click(function() {\n $(\".modaltable\").removeClass(\"modalreverse\");\n if ($(\".initicons\").data(\"incomes-expenses\") == \"incomes\") {\n $(\".modalincomessurface\").fadeIn(100);\n }\n else {\n $(\".modalexpensessurface\").fadeIn(100);\n }\n});\n\n// MODAL: Turn off modal/notes window and reset all forms\n$(\"#overlay, .modal-close\").click(turnOffModal);\nfunction turnOffModal() {\n $(\"#overlay, #add-modal, #add-notes\").removeClass(\"modal-show\");\n $(\".modalincomessurface, .modalexpensessurface\").fadeOut(150);\n setTimeout(function() { $(\".modalvalue\").val('0').hide(); $(\".modaltitle\").val('').hide(); $(\".modal-delete\").hide(); $(\"textarea#notes\").val(user.notes).hide(); }, 200);\n}\n\n// MODAL: Change font size according to input value length\n$(\".modalvalue\").bind(\"keyup keydown keypress select focus click\", modalFontSize);\nfunction modalFontSize() {\n var length=$(\".modalvalue\").val().length;\n if (length > 10) {\n $(\".modalvalue\").css({\"font-size\": \"60px\"});\n }\n else if (length > 9) {\n $(\".modalvalue\").css({\"font-size\": \"66px\"});\n }\n else if (length > 8 ) {\n $(\".modalvalue\").css({\"font-size\": \"76px\"});\n }\n else {\n $(\".modalvalue\").css({\"font-size\": \"86px\"});\n }\n}\n\n// MODAL: Set zero when input is empty\n$(\".modalvalue\").bind(\"blur\", function() {\n if (this.value.length == 0) {\n $(\".modalvalue\").val(\"0\");\n }\n});\n\n// COLUMNS: UP and DOWN buttons\n$(\"#expenseup\").click(function() {\n Up(\"expense\");\n});\n$(\"#expensedown\").click(function() {\n Down(\"expense\");\n});\n$(\"#incomeup\").click(function() {\n Up(\"income\");\n});\n$(\"#incomedown\").click(function() {\n Down(\"income\");\n});\n\n// COLUMNS: Touch screen swipe\n$(\"#expensewrapper\").swipe( {\n swipe:function(event, direction, distance, duration, fingerCount) {\n if (direction == \"up\") {\n Up(\"expense\");\n }\n if (direction == \"down\") {\n Down(\"expense\");\n }\n },\n threshold:0\n});\n$(\"#incomewrapper\").swipe( {\n swipe:function(event, direction, distance, duration, fingerCount) {\n if (direction == \"up\") {\n Up(\"income\");\n }\n if (direction == \"down\") {\n Down(\"income\");\n }\n },\n threshold:0\n});\n// COLUMNS: Mouse wheel\n$('#expensewrapper').bind('DOMMouseScroll mousewheel', function (e){\n if(e.originalEvent.wheelDelta > 70) {\n Down(\"expense\");\n }\n if(e.originalEvent.wheelDelta < -70) {\n Up(\"expense\");\n }\n if(e.originalEvent.detail < 0) {\n Down(\"expense\");\n }\n if(e.originalEvent.detail > 0) {\n Up(\"expense\");\n }\n return false;\n});\n\n$('#incomewrapper').bind('DOMMouseScroll mousewheel', function (e){\n if(e.originalEvent.wheelDelta > 70) {\n Down(\"income\");\n }\n if(e.originalEvent.wheelDelta < -70) {\n Up(\"income\");\n }\n if(e.originalEvent.detail < 0) {\n Down(\"income\");\n }\n if(e.originalEvent.detail > 0) {\n Up(\"income\");\n }\n return false;\n});\n\n// SAVINGS: Click on toggles\n$(\"#deposit\").click(function() {\n if ($(\"#deposit\").prop('checked') == false) {\n $(\"#capitalization\").prop('disabled', true);\n $(\"#percentvalue\").prop('disabled', true);\n $(\"#capitalization\").prop('checked', false);\n }\n else {\n $(\"#capitalization\").prop('disabled', false);\n $(\"#percentvalue\").prop('disabled', false);\n }\n});\n// SAVINGS: Moving ruble sign according to input value length\n$(\"#savingsvalue\").bind(\"keyup keydown keypress select click\", function() {savings.freeMoney = $(\"#savingsvalue\").autoNumeric(\"get\"); moveRuble();}).keyup(function(e) { if (e.which == 13) {\tthis.blur() } });\nfunction moveRuble() {\n var length=$(\"#savingsvalue\").val().length;\n length = (length<2)? 1: length;\n $(\"#savingsvalue\").attr('size', length);\n if (length > 9) {\n $(\"#savingsvalue\").css({\"font-size\": \"31px\"});\n $(\"#rublesign\").css({\"left\": (length*15 + 17) + \"px\", \"top\": \"115px\"});\n }\n else if (length > 7 ) {\n $(\"#savingsvalue\").css({\"font-size\": \"38px\"});\n $(\"#rublesign\").css({\"left\": (length*18 + 18) + \"px\", \"top\": \"120px\"});\n }\n else {\n $(\"#savingsvalue\").css({\"font-size\": \"44px\"});\n $(\"#rublesign\").css({\"left\": (length*22 + 20) + \"px\", \"top\": \"125px\"});\n }\n}\n\n//SAVINGS: change currency on sign click\n$(\"#rublesign\").on(\"click\", function() {\n switch (user.checkedCurr) {\n case \"RUB\": user.checkedCurr = \"EUR\"; $(\"#rublesign\").css({\"background-position\": \"-386px 0\"});\n break;\n case \"EUR\": user.checkedCurr = \"USD\"; $(\"#rublesign\").css({\"background-position\": \"-354px 0\"});\n break;\n case \"USD\": user.checkedCurr = \"RUB\"; $(\"#rublesign\").css({\"background-position\": \"-150px 0\"});\n break;\n }\n changeCurrency();\n $(\"#savingsvalue\").autoNumeric('set', Math.round (savings.freeMoney) );\n moveRuble();\n // Update savings slider\n $('#savings-slider').noUiSlider({\n start: (incomesSumMonth-expensesSumMonth) * $(\"#savings-slider\").data(\"checkedPercent\"),\n step: (incomesSumMonth-expensesSumMonth) / 20,\n range: {\n 'min': [ 0 ],\n 'max': [ incomesSumMonth-expensesSumMonth ]\n }\n }, true);\n runConvert();\n});\n\n// SAVINGS: Set zero when input is empty\n$(\"#savingsvalue\").bind(\"blur\", function() {\n if (this.value.length == 0) {\n $(\"#savingsvalue\").val(\"0\");\n }\n});\n$(\"#percentvalue\").keyup(function(e) { if(e.which == 13) {\tthis.blur() } }).bind(\"blur\", function() {\n if (this.value == \" %\") {\n $(\"#percentvalue\").val(\"0 %\");\n }\n});\n\n// NOTES: call window\n$(\"#bubble\").click(function() {\n $(\"#overlay, #add-notes\").addClass(\"modal-show\");\n $(\".notes-input\").show();\n});\n\n// NOTES: save button handler\n$(\".notes-save\").click(function() {\n user.notes = $(\"textarea#notes\").val();\n turnOffModal();\n jsonDataSave();\n});\n\n// Bubble animation\n$(\"#bubble\").bind(\"hover\", function() {\n $(\"#indicator\").toggleClass(\"bubble-animation\");\n});\n\n// ScrollTop\n$(\"input, textarea\").bind(\"blur\", function() {\n $('body').animate({ scrollTop: '0' }, 50)\n});\n\n// PAGE CHANGING\n\n// Cancel swipe on other fields\n$(\"body\").swipe( {\n swipe:function(event, direction, distance, duration, fingerCount) {\n $('body').animate({ scrollTop: '0' }, 50)\n },\n threshold:0\n});\n\n// Go back to Greeting Page\n$(\"#logoclickplace\").click(function() {\n $(\"#logo_settings, #overlay, .modal-content, #settingspage, #expenseslider, #bubble\").fadeOut(300);\n setTimeout(greetingPageAgain, 250);\n});\n\n// All-PAGE SWIPE BETWEEN 3-4 PAGES\n$(\"#swipefield, #savings, #savebutton, #settings_hat\").bind('DOMMouseScroll mousewheel', function (e){\n if(e.originalEvent.wheelDelta < -50) {\n launchStatistic();\n }\n return false;\n});\n$(\".bottompage\").bind('DOMMouseScroll mousewheel', function (e){\n if(e.originalEvent.wheelDelta > 100) {\n fadeStatistic();\n }\n return false;\n});\n$(\"#swipefield, #savings, #savebutton, #settings_hat\").swipe( {\n swipe:function(event, direction, distance, duration, fingerCount) {\n if (direction == \"up\" || direction == \"left\") {\n if (global.mobileClient) launchStatistic();\n }\n },\n threshold:0\n});\n$(\".bottompage\").swipe( {\n swipe:function(event, direction, distance, duration, fingerCount) {\n if (direction == \"down\" || direction == \"right\") {\n if (global.mobileClient) fadeStatistic();\n }\n },\n threshold:0\n});\n$(\"#savebutton\").on(\"click\", function() {\n launchStatistic();\n});\n$(\"#logo_statistic\").on(\"click\", function() {\n fadeStatistic();\n});\n\n// Launch 4 page\nfunction launchStatistic() {\n if ($(\"#incomeslider\").children().length > 0 && $(\"#expenseslider\").children().length > 0) {\n\n $(\".bottompage\").css({\"display\": \"block\"});\n\n // Fill objects form Savings fields\n savings.percent = $(\"#percentvalue\").autoNumeric(\"get\");\n savings.deposit = $(\"#deposit\").prop(\"checked\");\n savings.capitalization = $(\"#capitalization\").prop(\"checked\");\n\n // Launch 4 page\n $(\"#lastlogoflipper\").addClass(\"flippedcard\");\n initStatisticPage();\n setTimeout(function() { initSavingsCircles(user.checkedPercent, 0.2, savings.freeMoney, savings.freeMoney, 700) }, 1600);\n setTimeout(function() { $(\".toppage, .bottompage\").addClass(\"sectionDown\"); }, 400);\n\n // Update savings slider\n $('#savings-slider').noUiSlider({\n start: (incomesSumMonth-expensesSumMonth) * $(\"#savings-slider\").data(\"checkedPercent\"),\n step: (incomesSumMonth-expensesSumMonth) / 20,\n range: {\n 'min': [ 0 ],\n 'max': [Math.abs(incomesSumMonth-expensesSumMonth)]\n }\n }, true);\n\n }\n else {\n alert(\"Please, add at least one item for each column\")\n }\n\n jsonDataSave();\n\n}\n\nfunction jsonDataSave() {\n if (global.savePermit) {\n $.ajax({\n url: 'accounts/current',\n datatype: 'json',\n type: \"put\",\n contentType: \"application/json\",\n headers: {'Authorization': 'Bearer ' + getOauthTokenFromStorage()},\n data: JSON.stringify({\n note: user.notes,\n incomes: $.map(incomes, function(value) {return [value]}),\n expenses: $.map(expenses, function(value) {return [value]}),\n saving: {\n amount: Math.ceil(savings.freeMoney),\n capitalization: savings.capitalization,\n deposit: savings.deposit,\n currency: user.checkedCurr,\n interest: savings.percent\n }\n }),\n success: function () {\n $(\"#leftborder, #rightborder, #centerborder\").addClass(\"saveaction\");\n setTimeout(function() {\n $(\"#leftborder, #rightborder, #centerborder\").removeClass(\"saveaction\");\n }, 400);\n },\n error: function () {\n alert(\"An error during data saving. Please, try again later\");\n }\n });\n }\n}\n\nfunction fadeStatistic() {\n\n switch (user.checkedCurr) {\n case \"RUB\": $(\"#rublesign\").css({\"background-position\": \"-150px 0\"});\n break;\n case \"EUR\": $(\"#rublesign\").css({\"background-position\": \"-386px 0\"});\n break;\n case \"USD\": $(\"#rublesign\").css({\"background-position\": \"-354px 0\"});\n break;\n }\n $(\"#savingsvalue\").autoNumeric('set', savings.freeMoney);\n moveRuble();\n\n $(\".toppage, .bottompage\").removeClass(\"sectionDown\");\n setTimeout(function() { $(\"#lastlogoflipper\").removeClass(\"flippedcard\"); }, 220);\n\n setTimeout(function() { drawChartLine(91); $(\".bottompage\").css({\"display\": \"none\"}); }, 500);\n}"
},
{
"path": "gateway/src/test/java/com/piggymetrics/gateway/GatewayApplicationTests.java",
"content": "package com.piggymetrics.gateway;\n\nimport org.junit.Test;\nimport org.junit.runner.RunWith;\nimport org.springframework.boot.test.context.SpringBootTest;\nimport org.springframework.test.context.junit4.SpringRunner;\n\n@RunWith(SpringRunner.class)\n@SpringBootTest\npublic class GatewayApplicationTests {\n\n\t@Test\n\tpublic void contextLoads() {\n\t}\n\n\t@Test\n\tpublic void fire() {\n\n\t}\n\n}\n"
},
{
"path": "gateway/src/test/resources/bootstrap.yml",
"content": "eureka:\n client:\n enabled: false"
},
{
"path": "mongodb/Dockerfile",
"content": "FROM mongo:3\nMAINTAINER Alexander Lukyanchikov ' + value + ' ' + checkCurrency(itemCurrency) + checkPeriod(itemPeriod) + '