﻿/*  Import base compass components */
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/*
* Let's have some support for vendor prefixes
*/
/*
* Global settings
*/
/* Browser support & Vendor prefixes */
/*$experimental-support-for-khtml: true;*/
/* Constants */
/* border-radius */
.borderRadius1 { border-radius: 1px; }

.borderRadiusL1 { border-top-left-radius: 1px; border-bottom-left-radius: 1px; }

.borderRadiusT1 { border-top-left-radius: 1px; border-top-right-radius: 1px; }

.borderRadiusR1 { border-top-right-radius: 1px; border-bottom-right-radius: 1px; }

.borderRadiusB1 { border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; }

.borderRadiusTL1 { border-top-left-radius: 1px; }

.borderRadiusTR1 { border-top-right-radius: 1px; }

.borderRadiusBR1 { border-bottom-right-radius: 1px; }

.borderRadiusBL1 { border-bottom-left-radius: 1px; }

.borderRadius2 { border-radius: 2px; }

.borderRadiusL2 { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }

.borderRadiusT2 { border-top-left-radius: 2px; border-top-right-radius: 2px; }

.borderRadiusR2 { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }

.borderRadiusB2 { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }

.borderRadiusTL2 { border-top-left-radius: 2px; }

.borderRadiusTR2 { border-top-right-radius: 2px; }

.borderRadiusBR2 { border-bottom-right-radius: 2px; }

.borderRadiusBL2 { border-bottom-left-radius: 2px; }

.borderRadius3 { border-radius: 3px; }

.borderRadiusL3 { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }

.borderRadiusT3 { border-top-left-radius: 3px; border-top-right-radius: 3px; }

.borderRadiusR3 { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

.borderRadiusB3 { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }

.borderRadiusTL3 { border-top-left-radius: 3px; }

.borderRadiusTR3 { border-top-right-radius: 3px; }

.borderRadiusBR3 { border-bottom-right-radius: 3px; }

.borderRadiusBL3 { border-bottom-left-radius: 3px; }

.borderRadius4 { border-radius: 4px; }

.borderRadiusL4 { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }

.borderRadiusT4 { border-top-left-radius: 4px; border-top-right-radius: 4px; }

.borderRadiusR4 { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.borderRadiusB4 { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }

.borderRadiusTL4 { border-top-left-radius: 4px; }

.borderRadiusTR4 { border-top-right-radius: 4px; }

.borderRadiusBR4 { border-bottom-right-radius: 4px; }

.borderRadiusBL4 { border-bottom-left-radius: 4px; }

.borderRadius5 { border-radius: 5px; }

.borderRadiusL5 { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

.borderRadiusT5 { border-top-left-radius: 5px; border-top-right-radius: 5px; }

.borderRadiusR5 { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

.borderRadiusB5 { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

.borderRadiusTL5 { border-top-left-radius: 5px; }

.borderRadiusTR5 { border-top-right-radius: 5px; }

.borderRadiusBR5 { border-bottom-right-radius: 5px; }

.borderRadiusBL5 { border-bottom-left-radius: 5px; }

.borderRadius6 { border-radius: 6px; }

.borderRadiusL6 { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }

.borderRadiusT6 { border-top-left-radius: 6px; border-top-right-radius: 6px; }

.borderRadiusR6 { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

.borderRadiusB6 { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }

.borderRadiusTL6 { border-top-left-radius: 6px; }

.borderRadiusTR6 { border-top-right-radius: 6px; }

.borderRadiusBR6 { border-bottom-right-radius: 6px; }

.borderRadiusBL6 { border-bottom-left-radius: 6px; }

.borderRadius7 { border-radius: 7px; }

.borderRadiusL7 { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }

.borderRadiusT7 { border-top-left-radius: 7px; border-top-right-radius: 7px; }

.borderRadiusR7 { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }

.borderRadiusB7 { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; }

.borderRadiusTL7 { border-top-left-radius: 7px; }

.borderRadiusTR7 { border-top-right-radius: 7px; }

.borderRadiusBR7 { border-bottom-right-radius: 7px; }

.borderRadiusBL7 { border-bottom-left-radius: 7px; }

.borderRadius8 { border-radius: 8px; }

.borderRadiusL8 { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }

.borderRadiusT8 { border-top-left-radius: 8px; border-top-right-radius: 8px; }

.borderRadiusR8 { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

.borderRadiusB8 { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

.borderRadiusTL8 { border-top-left-radius: 8px; }

.borderRadiusTR8 { border-top-right-radius: 8px; }

.borderRadiusBR8 { border-bottom-right-radius: 8px; }

.borderRadiusBL8 { border-bottom-left-radius: 8px; }

.borderRadius9 { border-radius: 9px; }

.borderRadiusL9 { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }

.borderRadiusT9 { border-top-left-radius: 9px; border-top-right-radius: 9px; }

.borderRadiusR9 { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }

.borderRadiusB9 { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }

.borderRadiusTL9 { border-top-left-radius: 9px; }

.borderRadiusTR9 { border-top-right-radius: 9px; }

.borderRadiusBR9 { border-bottom-right-radius: 9px; }

.borderRadiusBL9 { border-bottom-left-radius: 9px; }

.borderRadius10 { border-radius: 10px; }

.borderRadiusL10 { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

.borderRadiusT10 { border-top-left-radius: 10px; border-top-right-radius: 10px; }

.borderRadiusR10 { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

.borderRadiusB10 { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

.borderRadiusTL10 { border-top-left-radius: 10px; }

.borderRadiusTR10 { border-top-right-radius: 10px; }

.borderRadiusBR10 { border-bottom-right-radius: 10px; }

.borderRadiusBL10 { border-bottom-left-radius: 10px; }

/* menu width */
/*
* Import compass helpers
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/*
* Custom mixins
*/
/* Helper functions  */
/* Mixin for breakpoints */
/* 0, 640px */
/* 641px, 1024px */
/* 1025px, 1440px */
/* 1441px, 1920px */
/** Mixin for custom scrollbar styles */
/* global extends */
/* Global silent extends */
/*
* Typography Guideline Tablet 
*/
/*
* Icons Guideline Tablet 
*/
/*
* Grids Guideline Tablet 
*/
/*
* Color Guideline Tablet 
*/
html, body { height: 100%; }

body { margin: 0; font-family: OpenSans, Tahoma, Geneva, sans-serif !important; font-size: 0.75em; color: #191919; }

.maincontainer { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-flex-direction: column; height: 100%; }

.blurbar { position: absolute; width: 100%; }

.blurtitlebar { position: absolute; height: 28px; width: 100%; background: #fafafa; box-shadow: 0 0px 10px 5px #fafafa; -webkit-box-shadow: 0 0px 10px 5px #fafafa; -moz-box-shadow: 0 0px 10px 5px #fafafa; }

.blursystembar { position: absolute; height: 70px; width: 100%; background: #a5a5a5; box-shadow: 0 0px 10px 5px #a5a5a5; -webkit-box-shadow: 0 0px 10px 5px #a5a5a5; -moz-box-shadow: 0 0px 10px 5px #a5a5a5; }

.blurlogo { position: absolute; z-index: -1; bottom: 0; right: 0; width: 325px; height: 300px; background: #ececed; border-top-left-radius: 16em; box-shadow: 0 0px 40px 25px #ececed; -webkit-box-shadow: 0 0px 40px 25px #ececed; -moz-box-shadow: 0 0px 40px 25px #ececed; }

.topcontainer { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex: 1; padding-top: 25px; }

.bottomcontainer { padding-bottom: 27px; }

.productname { font-size: 2rem; padding-top: 22px; }

.versionnumber { font-size: 1.333333rem; padding-top: 12px; }

.bootloadertooltip { padding-bottom: 38px; }

.flex-container { height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.row { width: auto; }

.card { position: relative; display: inline-block; text-align: center; width: 320px; height: 485px; vertical-align: top; background-color: #f9f9f9; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 5px; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24); }

.card.image { background: url(); color: #fff; }

/* Card Animation */
.animated { visibility: visible; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; -moz-animation-duration: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; }

@-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); transform: translateY(-20px); }
  100% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); }
  100% { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
.animated.fadeInDown { -moz-animation-name: fadeInDown; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

/* Loading Animation */
.spinner { width: 70px; height: 10px; margin: 22px auto; }

.ball { height: 10px; width: 10px; float: left; background: #858585; border-radius: 50%; margin-right: 10px; }

.ball-1 { -moz-animation: jump3 1.8s infinite ease-out; -webkit-animation: jump3 1.8s infinite ease-out; animation: jump3 1.8s infinite ease-out; }

.ball-2 { -moz-animation: jump2 1.8s infinite ease-out; -webkit-animation: jump2 1.8s infinite ease-out; animation: jump2 1.8s infinite ease-out; }

.ball-3 { -moz-animation: jump1 1.8s infinite ease-out; -webkit-animation: jump1 1.8s infinite ease-out; animation: jump1 1.8s infinite ease-out; }

.ball-4 { margin-right: 0; -moz-animation: wipe 1.8s infinite cubic-bezier(0.5, 0, 0.5, 1); -webkit-animation: wipe 1.8s infinite cubic-bezier(0.5, 0, 0.5, 1); animation: wipe 1.8s infinite cubic-bezier(0.5, 0, 0.5, 1); }

@-moz-keyframes jump1 { 12% { -moz-transform: translate(10px, -20px); transform: translate(10px, -20px); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  24% { -moz-transform: translate(20px, 0); transform: translate(20px, 0); }
  100% { -moz-transform: translate(20px, 0); transform: translate(20px, 0); } }
@-webkit-keyframes jump1 { 12% { -webkit-transform: translate(10px, -20px); transform: translate(10px, -20px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  24% { -webkit-transform: translate(20px, 0); transform: translate(20px, 0); }
  100% { -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } }
@keyframes jump1 { 12% { -moz-transform: translate(10px, -20px); -ms-transform: translate(10px, -20px); -webkit-transform: translate(10px, -20px); transform: translate(10px, -20px); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  24% { -moz-transform: translate(20px, 0); -ms-transform: translate(20px, 0); -webkit-transform: translate(20px, 0); transform: translate(20px, 0); }
  100% { -moz-transform: translate(20px, 0); -ms-transform: translate(20px, 0); -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } }
@-moz-keyframes jump2 { 12% { -moz-transform: translate(0, 0); transform: translate(0, 0); }
  24% { -moz-transform: translate(10px, -20px); transform: translate(10px, -20px); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  36% { -moz-transform: translate(20px, 0); transform: translate(20px, 0); }
  100% { -moz-transform: translate(20px, 0); transform: translate(20px, 0); } }
@-webkit-keyframes jump2 { 12% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  24% { -webkit-transform: translate(10px, -20px); transform: translate(10px, -20px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  36% { -webkit-transform: translate(20px, 0); transform: translate(20px, 0); }
  100% { -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } }
@keyframes jump2 { 12% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  24% { -moz-transform: translate(10px, -20px); -ms-transform: translate(10px, -20px); -webkit-transform: translate(10px, -20px); transform: translate(10px, -20px); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  36% { -moz-transform: translate(20px, 0); -ms-transform: translate(20px, 0); -webkit-transform: translate(20px, 0); transform: translate(20px, 0); }
  100% { -moz-transform: translate(20px, 0); -ms-transform: translate(20px, 0); -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } }
@-moz-keyframes jump3 { 24% { -moz-transform: translate(0, 0); transform: translate(0, 0); }
  36% { -moz-transform: translate(10px, -20px); transform: translate(10px, -20px); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  48% { -moz-transform: translate(20px, 0); transform: translate(20px, 0); }
  100% { -moz-transform: translate(20px, 0); transform: translate(20px, 0); } }
@-webkit-keyframes jump3 { 24% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  36% { -webkit-transform: translate(10px, -20px); transform: translate(10px, -20px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  48% { -webkit-transform: translate(20px, 0); transform: translate(20px, 0); }
  100% { -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } }
@keyframes jump3 { 24% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  36% { -moz-transform: translate(10px, -20px); -ms-transform: translate(10px, -20px); -webkit-transform: translate(10px, -20px); transform: translate(10px, -20px); -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  48% { -moz-transform: translate(20px, 0); -ms-transform: translate(20px, 0); -webkit-transform: translate(20px, 0); transform: translate(20px, 0); }
  100% { -moz-transform: translate(20px, 0); -ms-transform: translate(20px, 0); -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } }
@-moz-keyframes wipe { 48% { -moz-transform: translateX(-60px); transform: translateX(-60px); }
  100% { -moz-transform: translateX(-60px); transform: translateX(-60px); } }
@-webkit-keyframes wipe { 48% { -webkit-transform: translateX(-60px); transform: translateX(-60px); }
  100% { -webkit-transform: translateX(-60px); transform: translateX(-60px); } }
@keyframes wipe { 48% { -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); -webkit-transform: translateX(-60px); transform: translateX(-60px); }
  100% { -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); -webkit-transform: translateX(-60px); transform: translateX(-60px); } }
.logobox { width: 105px; height: 105px; margin: auto; background-repeat: no-repeat; }

.logobgbox { background-repeat: no-repeat; }

.microtoolLogo { width: 113px; height: 52px; margin: auto; background-repeat: no-repeat; background-image: url("../Images/ApplicationIcons/microtool-making-it-better.svg"); }
