/*
 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 @font-face {
   font-family: "Source Sans Pro";
   src: url("../font/SourceSansPro-Regular.otf"); }

 @font-face {
   font-family: "source";
   src: url("../font/SourceSansPro-Regular.otf");
   font-weight: normal;
   font-style: normal; }

 @font-face {
   font-family: "source-l";
   src: url("../font/SourceSansPro-Light.otf");
   font-weight: 300;
   font-style: normal; }

 @font-face {
   font-family: "source-sb";
   src: url("../font/SourceSansPro-Semibold.otf");
   font-weight: 600;
   font-style: normal; }

 /* Fonts
 	100 = thin
 	200 = extra-light
 	300 = light
 	400 = normal, book
 	500 = medium
 	600 = demi-bold
 	700 = bold
 	800 = heavy
 	900 = black
 */
 /* Icons
 	pl = 23x23
 	lg = 22x18
 	wi = 20x13
 	md = 18x18
 	sm = 16x16
 	xs = 13x13
 */
 /* Fonts
 	100 = thin
 	200 = extra-light
 	300 = light
 	400 = normal, book
 	500 = medium
 	600 = demi-bold
 	700 = bold
 	800 = heavy
 	900 = black
 */
 /* Icons
 	pl = 23x23
 	lg = 22x18
 	wi = 20x13
 	md = 18x18
 	sm = 16x16
 	xs = 13x13
 */
 .standard-structure {
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 3px;
   display: inline-block;
   font-size: 12px;
   height: 21px;
   line-height: 21px;
   min-width: 15px;
   margin: 0 5px 5px 0;
   max-width: 150px;
   overflow: hidden;
   padding: 0 8px;
   position: relative;
   text-decoration: none;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
 }
 .icon-structure {
   background-repeat: no-repeat;
   display: inline-block;
   vertical-align: top;
 }
 .light-focus-style {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
   outline: none;
 }
 .quiet-style {
   background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
   border: 1px solid rgba(0, 0, 0, 0.21);
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0);
   color: #454545;
   text-shadow: none;
 }
 .quiet-hover-style {
   background-image: linear-gradient(top, #f9f9f9, #f9f9f9);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f9f9f9));
 }
 .quiet-down-style {
   background: #e5e7e7;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   text-decoration: none;
 }
 .quiet-focus-style {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
   outline: none;
 }
 .dark-focus-style {
   border: 1px solid #000000;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.69);
   outline: none;
 }
 .dark-quiet-style {
   background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
   border: 1px solid rgba(255, 255, 255, 0.21);
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0);
   color: #eff1f1;
   text-shadow: none;
 }
 .dark-quiet-hover-style {
   background-image: linear-gradient(top, #555555, #555555);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#555555));
 }
 .dark-quiet-down-style {
   background: #2b2d2d;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   text-decoration: none;
 }
 .dark-quiet-focus-style {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
   outline: none;
 }
 .cta-style {
   background-image: linear-gradient(top, #4fa3e1, #237fcb);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#4fa3e1), to(#237fcb));
   border: 1px solid #014994;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.27);
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.36);
 }
 .cta-hover-style {
   background-image: linear-gradient(top, #5dafed, #3892de);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#5dafed), to(#3892de));
 }
 .cta-down-style {
   background: #4290d1;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.12);
   text-decoration: none;
 }
 .cta-focus-style {
   border: 1px solid #0940fd;
   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
   outline: none;
 }
 body {
   color: #454545;
   font: 14px "source", helvetica, arial, sans-serif;
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: subpixel-antialiased !important;
   text-rendering: optimizeLegibility;
 }
 .disabled {
   cursor: default;
   opacity: 0.6;
   pointer-events: none;
 }
 .bg-white {
   background: #fff;
   font-size: 12px;
   padding: 20px;
 }
 .bg-lightgray {
   background: #dfe2e2;
   font-size: 12px;
   padding: 20px;
 }
 .bg-slategray {
   background: #3a3f42 url("../img/bg_dark.png") repeat-x;
   color: #c7c7c7;
   font-size: 12px;
   padding: 20px;
 }
 .bg-white .title {
   color: #000;
   font-size: 18px;
   font-weight: 300;
 }
 .bg-lightgray .title {
   font-size: 18px;
   font-weight: 300;
   text-shadow: 0 1px 0 #fff;
 }
 .bg-slategray .title {
   color: #fff;
   font-size: 18px;
   text-shadow: 0 -1px 0 #000000;
 }
 .bg-slategray .group-label {
   color: #a4b4b7;
   font-size: 14px;
   text-shadow: 0 -1px 0 #000000;
 }
 .large {
   font-family: source-sb !important;
   font-size: 14px !important;
   line-height: 27px !important;
 }
 .button.large {
   height: 27px !important;
   margin: 0 10px 10px 0 !important;
   padding: 0 15px !important;
 }
 .button.large.no-label {
   padding: 0 !important;
 }
 .button.large.no-label i {
   margin-left: 6px;
 }
 .text,
 .inline-block {
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 3px;
   display: inline-block;
   font-size: 12px;
   height: 21px;
   line-height: 21px;
   min-width: 15px;
   margin: 0 5px 5px 0;
   max-width: 150px;
   overflow: hidden;
   padding: 0 8px;
   position: relative;
   text-decoration: none;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   min-width: auto;
   max-width: auto;
   padding-left: 0;
   padding-right: 0;
 }
 a {
   color: #0083e8;
   text-decoration: none;
   margin: 0 5px 0 0;
 }
 a:active {
   text-decoration: underline;
 }
 .link {
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 3px;
   display: inline-block;
   font-size: 12px;
   height: 21px;
   line-height: 21px;
   min-width: 15px;
   margin: 0 5px 5px 0;
   max-width: 150px;
   overflow: hidden;
   padding: 0 8px;
   position: relative;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   color: #0083e8;
   min-width: auto;
   max-width: auto;
   padding-left: 0;
   padding-right: 0;
   text-decoration: none;
 }
 .link:active {
   text-decoration: underline;
 }
 .link:focus {
   color: #0083e8;
   outline: none;
   text-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
 }
 .link.dark {
   color: #6bc3fa;
 }
 .drop-down-triangle {
   background-image: url(../img/drop-down-triangle.png);
   background-repeat: no-repeat;
   display: inline-block;
   height: 6px;
   position: absolute;
   right: 6px;
   top: 9px;
   width: 9px;
 }
 .drop-down-triangle.dark {
   background-image: url(../img/drop-down-triangle-dark.png) !important;
   top: 8px;
   right: 0;
 }
 .large .drop-down-triangle {
   background-image: url(../img/drop-down-triangle.png);
   background-repeat: no-repeat;
   display: inline-block;
   height: 6px;
   position: absolute;
   right: 6px;
   top: 12px;
   width: 9px;
 }
 .icon-xs {
   background-repeat: no-repeat;
   display: inline-block;
   vertical-align: top;
   background: #aaa;
   height: 13px;
   width: 13px;
   margin: 4px 4px 0 -3px;
 }
 .icon-sm {
   background-repeat: no-repeat;
   display: inline-block;
   vertical-align: top;
   background: #aaa;
   height: 16px;
   width: 16px;
   margin: 5px 6px 0 -9px;
 }
 .button,
 .button.disabled:hover,
 .button.disabled:active {
   background-clip: padding-box;
   border-radius: 3px;
   display: inline-block;
   font-size: 12px;
   height: 21px;
   line-height: 21px;
   min-width: 15px;
   margin: 0 5px 5px 0;
   max-width: 150px;
   overflow: hidden;
   padding: 0 8px;
   position: relative;
   text-decoration: none;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
   user-select: none;
   -webkit-font-smoothing: antialiased !important;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   background-image: none, linear-gradient(top, #f5f8fa, #e3e5e5);
   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#f5f8fa), to(#e3e5e5));
   background-position: center;
   background-repeat: none;
   border: 1px solid rgba(0, 0, 0, 0.3);
   box-shadow: inset 0 1px 0 #ffffff;
   color: #454545;
   text-shadow: 0 1px 0 #ffffff;
 }
 .button:hover {
   background-image: none, linear-gradient(top, #f8fafb, #edefef);
   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#f8fafb), to(#edefef));
   background-position: center;
   background-repeat: none;
 }
 .button:active {
   background-color: #D3D7D7;
   background-image: none;
   background-position: center;
   background-repeat: none;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   text-decoration: none;
 }
 .button:focus {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
   outline: none;
 }
 .button.quiet,
 .button.quiet.disabled:hover,
 .button.quiet.disabled:active {
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 3px;
   display: inline-block;
   font-size: 12px;
   height: 21px;
   line-height: 21px;
   min-width: 15px;
   margin: 0 5px 5px 0;
   max-width: 150px;
   overflow: hidden;
   padding: 0 8px;
   position: relative;
   text-decoration: none;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
   border: 1px solid rgba(0, 0, 0, 0.21);
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0);
   color: #454545;
   text-shadow: none;
 }
 .button.quiet:hover {
   background-image: linear-gradient(top, #f9f9f9, #f9f9f9);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f9f9f9));
 }
 .button.quiet:active {
   background: #e5e7e7;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   text-decoration: none;
 }
 .button.quiet:focus {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
   outline: none;
 }
 .button.dark,
 .button.dark.disabled:hover,
 .button.dark.disabled:active {
   background-image: none, linear-gradient(top, #7a7c7c, #5f6060);
   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#7a7c7c), to(#5f6060));
   background-position: center;
   background-repeat: none;
   border: 1px solid rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
   color: #eff1f1;
   text-shadow: 0 -1px 0 #000000;
 }
 .button.dark:hover {
   background-image: none, linear-gradient(top, #828585, #6a6b6b);
   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#828585), to(#6a6b6b));
   background-position: center;
   background-repeat: none;
 }
 .button.dark:active {
   background-color: #2b2d2d;
   background-image: none;
   background-position: center;
   background-repeat: none;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   text-decoration: none;
 }
 .button.dark:focus {
   border: 1px solid #000000;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.69);
   outline: none;
 }
 .button.quiet.dark,
 .button.quiet.dark.disabled:hover,
 .button.quiet.dark.disabled:active {
   background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
   border: 1px solid rgba(255, 255, 255, 0.21);
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0);
   color: #eff1f1;
   text-shadow: none;
 }
 .button.quiet.dark:hover {
   background-image: linear-gradient(top, #555555, #555555);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#555555));
 }
 .button.quiet.dark:active {
   background: #2b2d2d;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   text-decoration: none;
 }
 .button.quiet.dark:focus {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
   outline: none;
 }
 .button.no-label {
   padding: 0 0 0 8px;
 }
 .button.drop-down {
   min-width: 70px;
/*   overflow: visible;*/
   padding: 0 30px 0 5px !important;
   position: relative;
 }
 .menu {
   background: #ffffff;
   border-top: none !important;
   border-radius: 3px;
   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
   font-size: 12px;
   left: 0px;
   margin: 0;
   overflow: hidden;
   padding: 3px 0 !important;
   position: absolute;
   top: 22px;
   min-width: 100%;
   z-index: 1000;
 }
 .menu li {
   list-style: none;
 }
 .menu li:last-child {
   border-radius: 3px;
 }
 .menu a {
   color: #454545;
   display: block;
   outline: none;
   padding: 0 0 0 10px;
   text-shadow: none;
 }
 .menu a:hover,
 .menu a:focus {
   background-color: #e0f0fa;
 }
 .menu a:active {
   text-decoration: none;
 }
 .dark .menu {
   border-top: none !important;
 }
 .large .menu {
   border-top: none !important;
   top: 28px !important;
 }
 .large.dark .menu {
   border-top: none !important;
   top: 28px !important;
 }
 .button.drop-down.large {
   min-width: 100px;
   padding: 0 30px 0 10px !important;
 }
 .button.drop-down.large .menu {
   top: 28px;
 }
 .button-group {
   display: inline-block;
   vertical-align: top;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   overflow: visible;
   position: relative;
 }
 .button-group .menu {
   left: 1px;
   top: 23px;
 }
 .button.inside {
   border-left: 1px solid rgba(0, 0, 0, 0);
   border-right: 1px solid rgba(187, 187, 187, 0.8);
   border-radius: 0;
   margin: 0 0 0 -3px !important;
 }
 .button.start {
   border-right: 1px solid rgba(187, 187, 187, 0.8);
   border-radius: 3px 0 0 3px !important;
   margin: 0;
 }
 .button.end {
   border-left: 1px solid rgba(0, 0, 0, 0);
   border-radius: 0 3px 3px 0 !important;
   margin: 0 5px 5px -3px;
 }
 .button.more {
   border-left: 1px solid rgba(0, 0, 0, 0);
   border-radius: 0 3px 3px 0 !important;
   margin: 0 5px 5px -3px;
   padding: 0;
   width: 20px;
 }
 .button.inside.dark {
   border-left: 1px solid rgba(0, 0, 0, 0);
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 3px 0 0 3px !important;
   margin: 0;
 }
 .button.start.dark {
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 3px 0 0 3px !important;
   margin: 0;
 }
 .button-group.large {
   margin: 0 10px 10px 0 !important;
 }
 .button-group.large .menu {
   top: 29px !important;
 }
 .button.inside.large {
   margin: 0 0 0 -4px !important;
 }
 .button.start.large {
   margin: 0 !important;
 }
 .button.end.large {
   margin: 0 5px 5px -4px !important;
 }
 .button.more.large {
   margin: 0 5px 5px -4px !important;
   padding: 0 !important;
 }
 select.button {
   background-image: url(../img/pop-up-triangle.png), linear-gradient(top, #f5f8fa, #e3e5e5);
   background-image: url(../img/pop-up-triangle.png), -webkit-gradient(linear, left top, left bottom, from(#f5f8fa), to(#e3e5e5));
   background-position: right;
   background-repeat: no-repeat;
   border: 1px solid rgba(0, 0, 0, 0.3);
   box-shadow: inset 0 1px 0 #ffffff;
   color: #454545;
   text-shadow: 0 1px 0 #ffffff;
   height: 23px;
   min-width: 70px;
   padding: 0 30px 0 5px;
   -webkit-appearance: none !important;
 }
 select.button:hover {
   background-image: url(../img/pop-up-triangle.png), linear-gradient(top, #f8fafb, #edefef);
   background-image: url(../img/pop-up-triangle.png), -webkit-gradient(linear, left top, left bottom, from(#f8fafb), to(#edefef));
   background-position: right;
   background-repeat: no-repeat;
 }
 select.button:active {
   background-color: #e5e7e7;
   background-image: url(../img/pop-up-triangle.png);
   background-position: right;
   background-repeat: no-repeat;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   text-decoration: none;
 }
 select.button:focus {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
   outline: none;
 }
 select.button.dark {
   background-image: url(../img/pop-up-triangle-dark.png), linear-gradient(top, #7a7c7c, #5f6060);
   background-image: url(../img/pop-up-triangle-dark.png), -webkit-gradient(linear, left top, left bottom, from(#7a7c7c), to(#5f6060));
   background-position: right;
   background-repeat: no-repeat;
   border: 1px solid rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
   color: #eff1f1;
   text-shadow: 0 -1px 0 #000000;
   height: 23px;
   min-width: 70px;
   padding: 0 30px 0 5px;
   -webkit-appearance: none !important;
 }
 select.button.dark:hover {
   background-image: url(../img/pop-up-triangle-dark.png), linear-gradient(top, #828585, #6a6b6b);
   background-image: url(../img/pop-up-triangle-dark.png), -webkit-gradient(linear, left top, left bottom, from(#828585), to(#6a6b6b));
   background-position: right;
   background-repeat: no-repeat;
 }
 select.button.dark:active {
   background-color: #2b2d2d;
   background-image: url(../img/pop-up-triangle-dark.png);
   background-position: right;
   background-repeat: no-repeat;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   text-decoration: none;
 }
 select.button.dark:focus {
   border: 1px solid #000000;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.69);
   outline: none;
 }
 select.button.large {
   height: 29px !important;
   min-width: 70px;
   padding: 0 30px 0 10px !important;
 }
 .button.cta,
 .button.cta.disabled:hover,
 .button.cta.disabled:active {
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 3px;
   display: inline-block;
   font-size: 12px;
   height: 21px;
   line-height: 21px;
   min-width: 15px;
   margin: 0 5px 5px 0;
   max-width: 150px;
   overflow: hidden;
   padding: 0 8px;
   position: relative;
   text-decoration: none;
   text-overflow: ellipsis;
   text-align: center;  
   vertical-align: top;
   white-space: nowrap;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   background-image: linear-gradient(top, #4fa3e1, #237fcb);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#4fa3e1), to(#237fcb));
   border: 1px solid #014994;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.27);
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.36);
 }
 .button.cta:hover {
   background-image: linear-gradient(top, #5dafed, #3892de);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#5dafed), to(#3892de));
 }
 .button.cta:active {
   background: #4290d1;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.12);
   text-decoration: none;
 }
 .button.cta:focus {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
   outline: none;
 }
 /* Approx. Slider */
 .approx-slider {
   background: #d4d7d7;
   border: 1px solid #babdbd;
   border-radius: 3px;
   display: inline-block;
   height: 3px;
   outline: none;
   width: 100px;
   cursor: pointer;
   -webkit-appearance: none !important;
 }
 .approx-slider::-webkit-slider-thumb {
   background-image: none, linear-gradient(top, #f5f8fa, #e3e5e5);
   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#f5f8fa), to(#e3e5e5));
   background-position: center;
   background-repeat: none;
   border: 1px solid rgba(0, 0, 0, 0.3);
   box-shadow: inset 0 1px 0 #ffffff;
   color: #454545;
   text-shadow: 0 1px 0 #ffffff;
   border-radius: 3px;
   height: 17px;
   width: 11px;
   -webkit-appearance: none !important;
 }
 .approx-slider:focus::-webkit-slider-thumb {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
   outline: none;
 }
 .approx-slider.large {
   height: 5px;
   width: 140px !important;
 }
 .approx-slider.large::-webkit-slider-thumb {
   height: 15px;
   width: 13px;
 }
 .approx-slider.dark {
   background: #1f1f1f;
   border: 1px solid #000000;
 }
 .approx-slider.dark::-webkit-slider-thumb {
   background-image: none, linear-gradient(top, #7a7c7c, #5f6060);
   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#7a7c7c), to(#5f6060));
   background-position: center;
   background-repeat: none;
   border: 1px solid rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
   color: #eff1f1;
   text-shadow: 0 -1px 0 #000000;
 }
 .approx-slider.dark:focus::-webkit-slider-thumb {
   border: 1px solid #000000;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.69);
   outline: none;
 }
 /* Slide Switch */
 .slide-switch {
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 3px;
   display: inline-block;
   font-size: 12px;
   height: 21px;
   line-height: 21px;
   min-width: 15px;
   margin: 0 5px 5px 0;
   max-width: 150px;
   overflow: hidden;
   padding: 0 8px;
   text-decoration: none;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   background-color: #ccc;
   border: 1px solid rgba(0, 0, 0, 0.3);
   font-family: source-sb;
   cursor: pointer;
   padding: 0;
   position: relative;
   width: 54px;
 }
 .slide-switch input {
   display: none;
 }
 .slide-switch input:checked + .wrapper {
   left: -38px;
 }
 .slide-switch::focus {
   border: 1px solid rgba(9, 64, 253, 0.84);
   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
   outline: none;
 }
 .wrapper {
   display: block;
   height: 21px;
   position: relative;
   top: 0px;
   -moz-transition: left 0.2s ease-out;
   -webkit-transition: left 0.2s ease-out;
   transition: left 0.2s ease-out;
   width: 90px;
   z-index: 1;
 }
 .switch,
 .on,
 .off {
   display: block;
   height: 21px;
   font-size: 12px;
   line-height: 21px;
   position: absolute;
   text-align: center;
   text-shadow: 0 1px 0 #ffffff;
   top: 0;
 }
 .switch {
   background-image: linear-gradient(top, #f5f8fa, #e3e5e5);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f8fa), to(#e3e5e5));
   border-left: 1px solid rgba(0, 0, 0, 0.3);
   border-right: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 3px;
   box-shadow: inset 0 1px 0 #ffffff;
   left: 37px;
   width: 16px;
 }
 .on {
   background: #e0f0fa;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   color: #0083e8;
   width: 37px;
 }
 .off {
   background: #e5e7e7;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   left: 55px;
   width: 37px;
 }
 .slide-switch.dark {
   background-color: #2b2d2d;
   border: 1px solid rgba(0, 0, 0, 0.8);
 }
 .dark .switch,
 .dark .on,
 .dark .off {
   text-shadow: 0 -1px 0 #000000;
 }
 .dark .switch {
   background-image: linear-gradient(top, #7a7c7c, #5f6060);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#7a7c7c), to(#5f6060));
   border-left: 1px solid rgba(0, 0, 0, 0.8);
   border-right: 1px solid rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
 }
 .dark .on {
   background: #2b2d2d;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   color: #56badf;
 }
 .dark .off {
   background: #2b2d2d;
   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
   color: #999;
 }
 .slide-switch.large {
   height: 27px;
   width: 69px;
 }
 .slide-switch.large .wrapper {
   display: block;
   height: 27px;
   position: relative;
   top: 0px;
   -moz-transition: left 0.2s ease-out;
   -webkit-transition: left 0.2s ease-out;
   transition: left 0.2s ease-out;
   z-index: 1;
 }
 .slide-switch.large .switch,
 .slide-switch.large .on,
 .slide-switch.large .off {
   height: 27px;
   font-size: 14px;
   line-height: 28px;
 }
 .slide-switch.large .switch {
   left: 47px;
   width: 21px;
 }
 .slide-switch.large .on {
   width: 48px;
 }
 .slide-switch.large .off {
   left: 70px;
   width: 48px;
 }
 .slide-switch.large input:checked + .wrapper {
   left: -48px;
 }
 /* Checkbox */
 input[type=checkbox] {
   display: none;
 }
 input[type=checkbox] + label {
   background: url("../img/checkbox_unchecked_dark.png") no-repeat 0 50%;
   display: inline-block;
   font-weight: 400;
   padding: 0 0 0 20px;
 }
 input[type=checkbox]:checked + label {
   background: url("../img/checkbox_checked_dark.png") no-repeat 0 50%;
   display: inline-block;
   padding: 0 0 0 20px;
 }
 input.dark[type=checkbox] + label {
   background: url("../img/checkbox_unchecked_dark.png") no-repeat 0 50%;
   display: inline-block;
   padding: 0 0 0 20px;
 }
 input.dark[type=checkbox]:checked + label {
   background: url("../img/checkbox_checked_dark.png") no-repeat 0 50%;
   display: inline-block;
   padding: 0 0 0 20px;
 }
 /* Spinner */
 .spinner {
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: .75s;
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: .75s;
   -webkit-animation-name: rotate;
   -webkit-animation-duration: .75s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   -moz-animation-name: rotate;
   -moz-animation-duration: .75s;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;
 }
 .spinner {
   display: inline-block;
   margin: 0 5px 5px 0;
   width: 16px;
   height: 16px;
   background: url(../img/spinner-sml.png) 50% no-repeat;
   background-size: 100%;
 }
 .spinner.large {
   width: 36px;
   height: 36px;
   background: url(../img/spinner-lrg.png) 50% no-repeat;
   background-size: 100%;
 }
 @-webkit-keyframes rotate {
   from {
     -webkit-transform: rotate(0deg);
   }
   to {
     -webkit-transform: rotate(360deg);
   }
 }
 @-moz-keyframes rotate {
   from {
     -moz-transform: rotate(0deg);
   }
   to {
     -moz-transform: rotate(360deg);
   }
 }
 /* Swatch */
 .swatch.large {
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 3px;
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
   height: 27px;
   width: 27px;
 }
 /* End Swatch */
 /* Text Field */
 .text-field {
   border: 1px solid #a5a8a8;
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
   color: #000;
   font-family: "Source Sans Pro", "source", helvetica, arial, sans-serif;
   -webkit-border-radius: 4px;
   border-radius: 3px;
   font-size: 12px;
   font-weight: 400;
   height: 21px;
   line-height: 21px;
   margin: 0 3px 3px 0;
   padding: 0 4px;
   min-width: 150px;
 }
 .text-field.large {
   font-size: 14px;
   padding: 1px 4px 0 4px;
   height: 27px;
 }
 .text-field.dark {
   background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(0, 0, 0, 0.7);
   color: #fff;
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
   -webkit-border-radius: 4px;
   border-radius: 3px;
   font-size: 12px;
   font-weight: 400;
   height: 21px;
   line-height: 21px;
   margin: 0 3px 3px 0;
   padding: 0 4px;
   min-width: 80px;   
 }
 /* Error state before Focus state on purpose */
 .text-field.error {
   border: 1px solid #ea015e;
   -webkit-box-shadow: 0 0 4px #ff0078;
   box-shadow: 0 0 4px #ff0078, inset 0px 1px 0px rgba(0, 0, 0, 0.15);
 }
 .text-field.dark.error {
   border: 1px solid #ea015e;
   -webkit-box-shadow: 0 0 4px #ff0078;
   box-shadow: 0 0 4px #ff0078, inset 0px 1px 0px rgba(0, 0, 0, 0.15);
 }
 .text-field:focus {
   border: 1px solid #0940fd;
   -webkit-box-shadow: 0 0 4px #0088ff;
   box-shadow: 0 0 4px #0088ff;
   outline: none;
 }
 .text-field.dark:focus {
   border: 1px solid #000;
   -webkit-box-shadow: 0 0 4px #222;
   box-shadow: 0 0 4px #222;
   outline: none;
 }
 .text-field[disabled=disabled] {
   opacity: 0.6;
 }
 /* End Text Field */
 /* Breadcrumbs */
 .breadcrumbs {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 .breadcrumbs li {
   background: url("../img/breadcrumb.png") no-repeat right 3px;
   color: #000;
   display: inline-block;
   font-size: 12px;
   font-weight: 400;
   line-height: 18px;
   margin: 0 3px 0 0;
   padding: 0 11px 0 0;
 }
 .breadcrumbs li:last-child {
   background: none;
 }
 .bg-slategray .breadcrumbs li {
   color: #fff;
 }
 .breadcrumbs a {
   color: #888;
   text-decoration: none;
 }
 .bg-slategray .breadcrumbs a {
   color: #bbb;
 }
 /* End Breadcrumbs */
