VAADIN.themes.vaadinsample.styles.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-sample Show documentation
There is a newer version: 1.0.5

.v-assistive-device-only {
    position: absolute;
    top: -2000px;
    left: -2000px;
    width: 10px;
    overflow: hidden;
}

.v-vaadin-version:after {
    content: "7.1.0";
}

.v-generated-body {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    overflow: hidden;
}

.v-app .invalidlayout, .v-app .invalidlayout * {
    background: #f99 !important;
}

@font-face {
    font-family: "vdebugfont";
    src: url(../base/debug/fonts/font.eot);
    src: url(../base/debug/fonts/font.eot?#iefix) format("embedded-opentype"), url(../base/debug/fonts/font.woff) format("woff"), url(../base/debug/fonts/font.ttf) format("truetype"), url(../base/debug/fonts/font.svg#fontawesome) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    src: url(fonts/OpenSans-Light-webfont.eot);
    src: url(fonts/OpenSans-Light-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/OpenSans-Light-webfont.woff) format("woff"), url(fonts/OpenSans-Light-webfont.ttf) format("truetype"), url(fonts/OpenSans-Light-webfont.svg#OpenSansLight) format("svg");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    src: url(fonts/OpenSans-Regular-webfont.eot);
    src: url(fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/OpenSans-Regular-webfont.woff) format("woff"), url(fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    src: url(fonts/OpenSans-Semibold-webfont.eot);
    src: url(fonts/OpenSans-Semibold-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/OpenSans-Semibold-webfont.woff) format("woff"), url(fonts/OpenSans-Semibold-webfont.ttf) format("truetype"), url(fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold) format("svg");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "fontello";
    src: url(icons/fontello.eot);
    src: url(icons/fontello.eot?#iefix) format("embedded-opentype"), url(icons/fontello.woff) format("woff"), url(icons/fontello.ttf) format("truetype"), url(icons/fontello.svg#fontello) format("svg");
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"] > .v-button-wrap:before, [class*=" icon-"] > .v-button-wrap:before,*/
[class^="icon-"].v-nativebutton:before, [class*=" icon-"].v-nativebutton:before,
[class^="icon-"].v-label:before, [class*=" icon-"].v-label:before,
[class*="-icon-"].v-menubar-menuitem:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    line-height: 1;
    margin-right: 0.4em;
    vertical-align: 1px;
}

[class^="icon-"] > .v-button-wrap:before, [class*=" icon-"] > .v-button-wrap:before,
[class^="icon-"].v-nativebutton:before, [class*=" icon-"].v-nativebutton:before {
    margin: 0;
    margin-left: -0.3em;
}

[class^="icon-"] > span > .v-button-caption, [class^="icon-"] > .v-nativebutton-caption,
[class*=" icon-"] > span > .v-button-caption, [class*=" icon-"] > .v-nativebutton-caption {
    margin-left: 0.3em;
}

.icon-transactions.v-nativebutton:before, .icon-transactions > .v-button-wrap:before,
.icon-transactions.v-label:before, .v-menubar-menuitem-icon-transactions:before {
    content: "\21c4";
}

.icon-dashboard.v-nativebutton:before, .icon-dashboard > .v-button-wrap:before,
.icon-dashboard.v-label:before, .v-menubar-menuitem-icon-dashboard:before {
    content: "\2302";
}

.icon-reports.v-nativebutton:before, .icon-reports > .v-button-wrap:before,
.icon-reports.v-label:before, .v-menubar-menuitem-icon-reports:before {
    content: "\e7a2";
}

.icon-schedule.v-nativebutton:before, .icon-schedule > .v-button-wrap:before,
.icon-schedule.v-label:before, .v-menubar-menuitem-icon-schedule:before {
    content: "\1f4c5";
}

.icon-sales.v-nativebutton:before, .icon-sales > .v-button-wrap:before,
.icon-sales.v-label:before, .v-menubar-menuitem-icon-sales:before {
    content: "\1f4c8";
}

.icon-cog.v-nativebutton:before, .icon-cog > .v-button-wrap:before,
.icon-cog.v-label:before, .v-menubar-menuitem-icon-cog:before {
    content: "\2699";
}

.icon-cog.v-nativebutton:before, .icon-cog > .v-button-wrap:before,
.icon-cog.v-label:before, .v-menubar-menuitem-icon-cog:before {
    content: "\2699";
}

.icon-user.v-nativebutton:before, .icon-user > .v-button-wrap:before,
.icon-user.v-label:before, .v-menubar-menuitem-icon-user:before {
    content: "\1f464";
}

.icon-attention.v-nativebutton:before, .icon-attention > .v-button-wrap:before,
.icon-attention.v-label:before, .v-menubar-menuitem-icon-attention:before {
    content: "\26a0";
}

.icon-edit.v-nativebutton:before, .icon-edit > .v-button-wrap:before,
.icon-edit.v-label:before, .v-menubar-menuitem-icon-edit:before {
    content: "\270d";
}

.icon-bell.v-nativebutton:before, .icon-bell > .v-button-wrap:before,
.icon-bell.v-label:before, .v-menubar-menuitem-icon-bell:before {
    content: "\1f514";
}

.icon-cancel.v-nativebutton:before, .icon-cancel > .v-button-wrap:before,
.icon-cancel.v-label:before, .v-menubar-menuitem-icon-cancel:before {
    content: "\2715";
}

.icon-refresh.v-nativebutton:before, .icon-refresh > .v-button-wrap:before,
.icon-refresh.v-label:before, .v-menubar-menuitem-icon-refresh:before {
    content: "\27f3";
}

@-webkit-keyframes spinner {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -528px 0;
    }
}

@-moz-keyframes spinner {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -528px 0;
    }
}

@-ms-keyframes spinner {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -528px 0;
    }
}

@-o-keyframes spinner {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -528px 0;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fade-in {
    0% {
        opacity: 0;
    }
}

@-ms-keyframes fade-in {
    0% {
        opacity: 0;
    }
}

@-o-keyframes fade-in {
    0% {
        opacity: 0;
    }
}

@-webkit-keyframes move-up {
    0% {
        -webkit-transform: translateX(100%);
    }
}

@-moz-keyframes move-up {
    0% {
        -moz-transform: translateX(100%);
    }
}

@-ms-keyframes move-up {
    0% {
        -ms-transform: translateX(100%);
    }
}

@-o-keyframes move-up {
    0% {
        -o-transform: translateX(100%);
    }
}

@-webkit-keyframes move-right {
    0% {
        -webkit-transform: translateX(-100%);
    }
}

@-moz-keyframes move-right {
    0% {
        -moz-transform: translateX(-100%);
    }
}

@-ms-keyframes move-right {
    0% {
        -ms-transform: translateX(-100%);
    }
}

@-o-keyframes move-right {
    0% {
        -o-transform: translateX(-100%);
    }
}

@-webkit-keyframes move-up-100 {
    0% {
        -webkit-transform: translateY(100px);
        opacity: 0;
    }
}

@-moz-keyframes move-up-100 {
    0% {
        -moz-transform: translateY(100px);
        opacity: 0;
    }
}

@-ms-keyframes move-up-100 {
    0% {
        -ms-transform: translateY(100px);
        opacity: 0;
    }
}

@-o-keyframes move-up-100 {
    0% {
        -o-transform: translateY(100px);
        opacity: 0;
    }
}

@-webkit-keyframes pull-down {
    0% {
        -webkit-transform: translateY(-50%);
    }
}

@-moz-keyframes pull-down {
    0% {
        -moz-transform: translateY(-50%);
    }
}

@-ms-keyframes pull-down {
    0% {
        -ms-transform: translateY(-50%);
    }
}

@-o-keyframes pull-down {
    0% {
        -o-transform: translateY(-50%);
    }
}

@-webkit-keyframes reveal {
    0% {
        height: 0;
        opacity: 0;
    }
}

@-moz-keyframes reveal {
    0% {
        height: 0;
        opacity: 0;
    }
}

@-ms-keyframes reveal {
    0% {
        height: 0;
        opacity: 0;
    }
}

@-o-keyframes reveal {
    0% {
        height: 0;
        opacity: 0;
    }
}

@-webkit-keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        height: 0;
        opacity: 0;
    }
}

@-moz-keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        height: 0;
        opacity: 0;
    }
}

@-ms-keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        height: 0;
        opacity: 0;
    }
}

@-o-keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        height: 0;
        opacity: 0;
    }
}

.vaadinsample .v-widget {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
    display: inline-block;
    white-space: normal;
    vertical-align: bottom;
    font-size: 14px;
    line-height: normal;
}

.vaadinsample .v-absolutelayout-wrapper {
    position: absolute;
    overflow: hidden;
}

.vaadinsample .v-absolutelayout-margin, .vaadinsample .v-absolutelayout-canvas {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-absolutelayout.v-has-height > div, .vaadinsample .v-absolutelayout.v-has-height > div > div {
    height: 100%;
}

.vaadinsample .v-absolutelayout.v-has-width > div, .vaadinsample .v-absolutelayout.v-has-width > div > div {
    width: 100%;
}

.vaadinsample .v-accordion {
    position: relative;
    outline: none;
    overflow: visible;
    text-align: left;
    font-size: 0;
}

.vaadinsample .v-accordion-item {
    position: relative;
    display: inline-block;
    width: 100%;
}

.vaadinsample .v-accordion-item-caption {
    overflow: visible;
    white-space: nowrap;
    background: #eee;
    border-bottom: 1px solid #ddd;
}

.vaadinsample .v-accordion-item-caption .v-caption {
    cursor: pointer;
    font-size: 14px;
}

.vaadinsample .v-accordion-item-open .v-accordion-item-caption .v-caption {
    cursor: default;
}

.vaadinsample .v-accordion-item-content {
    position: absolute;
    width: 100%;
}

.vaadinsample .v-button {
    display: inline-block;
    zoom: 1;
    text-align: center !important;
    text-decoration: none;
    border: 2px outset #ddd;
    background: #eee;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    padding: 0.2em 1em;
    color: inherit;
    font: inherit;
    font-size: 14px;
    line-height: normal;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-button.v-disabled {
    cursor: default;
}

.vaadinsample .v-button-wrap, .vaadinsample .v-button-caption {
    vertical-align: baseline;
    white-space: nowrap;
    font: inherit;
    color: inherit;
    line-height: normal;
    padding: 0;
    
}

.vaadinsample .v-button .v-icon {
    vertical-align: middle;
    margin-right: 3px;
    border: none;
}

.vaadinsample .v-button .v-errorindicator {
    display: inline-block;
    zoom: 1;
    vertical-align: middle;
    float: none;
}

.vaadinsample .v-button-link {
    border: none;
    text-align: left !important;
    background: transparent;
    padding: 0;
    color: inherit;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ie-user-select: text;
    user-select: text;
}

.v-sa .vaadinsample .v-button-link:focus {
    outline-offset: -3px;
}

.vaadinsample .v-button-link .v-button-caption {
    text-decoration: underline;
    color: inherit;
    text-align: left;
}

.vaadinsample .v-nativebutton .v-icon {
    vertical-align: middle;
    margin-right: 3px;
    border: none;
}

.vaadinsample .v-nativebutton .v-errorindicator {
    display: inline-block;
    zoom: 1;
    vertical-align: middle;
    float: none;
}

.vaadinsample .v-nativebutton-link {
    border: none;
    text-align: left !important;
    background: transparent;
    padding: 0;
    color: inherit;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ie-user-select: text;
    user-select: text;
}

.vaadinsample .v-nativebutton-link .v-nativebutton-caption {
    text-decoration: underline;
    color: inherit;
    text-align: left;
}

.vaadinsample .v-nativebutton {
    text-align: center !important;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
}

.vaadinsample .v-nativebutton .v-nativebutton-caption {
    vertical-align: middle;
    white-space: nowrap;
    font: inherit;
    color: inherit;
}

.vaadinsample .v-nativebutton .v-icon {
    vertical-align: middle;
    margin-right: 3px;
}

.vaadinsample .v-nativebutton .v-errorindicator {
    display: inline-block;
    zoom: 1;
    float: none;
}

.v-ie .vaadinsample .v-nativebutton {
    overflow: visible;
    padding-left: 1em;
    padding-right: 1em;
}

.v-ie .vaadinsample .v-nativebutton-link {
    padding: 0;
}

.vaadinsample .v-checkbox {
    display: block;
}

.vaadinsample .v-checkbox, .vaadinsample .v-checkbox label, .vaadinsample .v-checkbox input,
.vaadinsample .v-checkbox .v-icon {
    vertical-align: middle;
    white-space: nowrap;
}

.vaadinsample .v-checkbox .v-icon {
    margin: 0 2px;
}

.vaadinsample .v-checkbox .v-errorindicator {
    float: none;
    display: inline;
    display: inline-block;
    zoom: 1;
}

.vaadinsample .v-captionwrapper {
    text-align: left;
}

.vaadinsample .v-caption {
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}

.vaadinsample .v-errorindicator {
    display: inline-block;
}

.vaadinsample .v-caption .v-icon {
    display: inline-block;
    padding-right: 2px;
    vertical-align: middle;
}

.vaadinsample .v-caption .v-captiontext {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}

.vaadinsample .v-caption .v-required-field-indicator {
    display: inline-block;
}

.vaadinsample .v-colorpicker {
    text-align: center;
}

.vaadinsample .v-colorpicker-button-color {
    border: 1px solid silver;
    float: left;
    width: 10px;
    height: 10px;
    margin-top: 2px;
    margin-right: 5px;
}

.vaadinsample .v-colorpicker-area {
    border: 1px solid silver;
    margin: 1px auto;
}

.vaadinsample .v-colorpicker-history {
    margin: 5px;
}

.vaadinsample .v-colorpicker-history td {
    border: 1px solid silver !important;
}

.vaadinsample .v-colorpicker-history td {
    line-height: 15px;
}

.vaadinsample .v-colorpicker-popup {
    width: 244px;
}

.vaadinsample .v-colorpicker-popup .v-scrollable {
    background-color: #dddddd;
}

.vaadinsample .v-colorpicker-popup .v-tabsheet-content .v-scrollable {
    background-color: #eaeaea;
}

.vaadinsample .v-colorpicker-popup .v-tabsheet-content .v-tabsheet-tabsheetpanel {
    background: transparent;
}

.vaadinsample .v-colorpicker-popup .resize-button {
    border: 0px solid silver;
    background: url(../base/colorpicker/images/resizebg.png);
    margin-top: 5px;
}

.vaadinsample .v-colorpicker-popup .resize-button-caption {
    display: none;
}

.vaadinsample .v-colorpicker-popup .resize-button:hover {
    background: url(../base/colorpicker/images/resizebg-selected.png);
}

.vaadinsample .v-colorpicker-popup .resize-button:focus {
    outline: none;
}

.vaadinsample .v-colorpicker-gradient {
    width: 220px;
    height: 220px;
    padding-left: 10px;
    margin-top: 0px;
}

.vaadinsample .v-colorpicker-gradient .v-colorpicker-gradient-clicklayer {
    background-color: white;
    filter: alpha(opacity = 0);
    opacity: 0;
}

.vaadinsample .v-colorpicker-popup .rgb-gradient .v-colorpicker-gradient-background {
    width: 220px;
    height: 220px;
    background: url(../base/colorpicker/images/gradient2.png);
}

.vaadinsample .v-colorpicker-popup .hsv-gradient .v-colorpicker-gradient-foreground {
    background: url(../base/colorpicker/images/gradient.png);
}

.vaadinsample .v-colorpicker-popup .v-colorpicker-gradient-lowerbox {
    border-right: 1px solid white;
    border-top: 1px solid white;
}

.vaadinsample .v-colorpicker-popup .v-colorpicker-gradient-higherbox {
    border-left: 1px solid white;
    border-bottom: 1px solid white;
}

.vaadinsample .v-colorpicker-popup .rgb-sliders {
    width: 227px;
    padding-left: 10px;
    color: #444444;
    text-shadow: 0 1px 0 #FFFFFF;
}

.vaadinsample .v-colorpicker-popup .rgb-sliders .red .v-slider-base {
    background-color: red;
}

.vaadinsample .v-colorpicker-popup .rgb-sliders .green .v-slider-base {
    background-color: green;
}

.vaadinsample .v-colorpicker-popup .rgb-sliders .blue .v-slider-base {
    background-color: blue;
}

.vaadinsample .v-colorpicker-popup .hsv-sliders {
    padding-left: 10px;
    color: #444444;
    text-shadow: 0 1px 0 #FFFFFF;
}

.vaadinsample .v-colorpicker-popup .hue-slider {
    height: 10px;
    border: 0px solid silver;
    background-image: url(../base/colorpicker/images/slider_hue_bg.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 3px;
    margin-top: 0px;
}

.vaadinsample .v-colorpicker-popup .hue-slider .v-slider-handle {
    margin-top: -2px;
}

.vaadinsample .v-colorpicker-popup .hue-slider .v-slider-base {
    border: 0px none;
    height: 0px;
    background-color: transparent;
}

.vaadinsample .v-colorpicker-popup .v-colorpicker-preview {
    margin-top: 5px;
    padding-left: 11px;
    padding-right: 10px;
    margin-bottom: 0px;
}

.vaadinsample .v-colorpicker-popup .v-absolutelayout-wrapper {
    width: 100%;
    height: 100%;
}

.vaadinsample .v-colorpicker-popup .v-colorpicker-preview-textfield {
    background: none;
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
}

.vaadinsample .v-colorpicker-popup .v-textfield-dark {
    color: #FFFFFF;
}

.vaadinsample .v-colorpicker-popup .v-textfield-light {
    color: #000000;
}

.vaadinsample .v-colorpicker-popup .colorselect {
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.vaadinsample .v-colorpicker-popup .v-tabsheet .v-colorpicker-grid {
    height: 319px;
}

.vaadinsample .v-colorpicker-popup .colorselect td {
    line-height: 15px;
}

.vaadinsample .v-colorpicker-popup .v-filterselect {
    padding-right: 16px;
}

.vaadinsample .v-calendar-nresize DIV DIV {
    cursor: n-resize !important;
}

.vaadinsample .v-calendar-sresize DIV DIV {
    cursor: s-resize !important;
}

.vaadinsample .v-calendar {
    background-color: #fff;
}

.vaadinsample .v-calendar-header-month, .vaadinsample .v-calendar-header-week {
    border-bottom: 1px solid #c1c1c1;
}

.vaadinsample .v-calendar-header-day {
    text-align: center;
    color: #666;
    font-size: 12px;
    line-height: normal;
}

.vaadinsample .v-calendar-header-week .v-calendar-header-day:hover {
    cursor: pointer;
    color: #222;
}

.vaadinsample .v-calendar-header-day-today {
    font-weight: bold;
    color: #444;
}

.vaadinsample .v-calendar-header-month td:first-child {
    padding-left: 19px;
}

.vaadinsample .v-calendar-header-week .v-calendar-back, .vaadinsample .v-calendar-header-week .v-calendar-next {
    border: none;
    padding: 0;
    margin: 0;
    height: 12px;
    width: 12px;
    overflow: hidden;
    background: transparent url(../base/calendar/img/arrows.png) no-repeat 50% 0;
    opacity: 0.3;
    filter: alpha(opacity = 30);
    cursor: default;
}

.vaadinsample .v-calendar-header-week .v-calendar-back:hover, .vaadinsample .v-calendar-header-week .v-calendar-next:hover {
    opacity: 0.6;
    filter: alpha(opacity = 60);
}

.vaadinsample .v-calendar-header-week .v-calendar-back:active, .vaadinsample .v-calendar-header-week .v-calendar-next:active {
    opacity: 1;
    filter: alpha(opacity = 100);
}

.vaadinsample .v-calendar-header-week .v-calendar-next {
    background-position: 50% -12px;
}

.vaadinsample .v-calendar-month {
    outline: none;
}

.vaadinsample .v-calendar-week-numbers {
    width: 20px;
    border-right: 1px solid #ccc;
}

.vaadinsample .v-calendar-week-number {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.5;
    width: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.vaadinsample .v-calendar-week-number:hover {
    opacity: 1;
}

.vaadinsample .v-calendar-month-day {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    outline: none;
}

.vaadinsample .v-calendar-month-day-today {
    background-color: #e7f0f5;
}

.vaadinsample .v-calendar-month-day-selected {
    background-color: #fffee7;
}

.vaadinsample .v-calendar-month-day-dragemphasis {
    background-color: #a8a8a8;
}

.vaadinsample .v-calendar-month-day-scrollable {
    overflow-y: scroll;
}

.vaadinsample .v-calendar-day-number {
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-align: right;
    padding-right: 3px;
    white-space: nowrap;
}

.vaadinsample .v-calendar-day-number:hover {
    cursor: pointer;
    opacity: 0.6;
    filter: alpha(opacity = 60);
}

.vaadinsample .v-calendar-month .v-calendar-spacer, .vaadinsample .v-calendar-month .v-calendar-bottom-spacer,
.vaadinsample .v-calendar-month .v-calendar-bottom-spacer-empty {
    height: 15px;
    font-size: 11px;
}

.vaadinsample .v-calendar-month .v-calendar-bottom-spacer:hover {
    cursor: pointer;
    opacity: 0.6;
    filter: alpha(opacity = 60);
}

.vaadinsample .v-calendar-event {
    line-height: 14px;
    font-size: 11px;
    padding: 0 0 0 4px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}

.vaadinsample .v-calendar-event-month {
    margin-bottom: 1px;
    white-space: nowrap;
}

.vaadinsample .v-calendar-event-month:hover {
    text-decoration: underline;
}

.vaadinsample .v-calendar-event-all-day {
    background: #999;
    display: block;
    margin-left: -2px;
}

.vaadinsample div.v-calendar-event-all-day {
    color: #fff;
    height: 14px;
}

.vaadinsample .v-calendar-event-continued-from {
    margin-left: 0;
}

.vaadinsample .v-calendar-event-start {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    margin-left: 0;
}

.vaadinsample .v-calendar-event-end {
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.vaadinsample .v-calendar-week-wrapper {
    position: relative;
}

.vaadinsample .v-calendar-times {
    width: 51px;
}

.vaadinsample .v-calendar-time {
    padding: 0 8px 7px 0;
    margin-top: -7px;
    text-align: right;
    font-size: 11px;
    color: #666;
    border-right: 1px solid #ccc;
}

.vaadinsample .v-calendar-weekly-longevents {
    border-left: 1px solid #ccc;
    border-bottom: 2px solid #bbb;
    margin-left: 50px;
}

.vaadinsample .v-calendar-weekly-longevents .v-calendar-datecell {
    border-right: 1px solid #ccc;
    padding: 1px 0 0;
}

.vaadinsample .v-calendar-weekly-longevents .v-calendar-event {
    height: 14px;
    margin-bottom: 1px;
}

.vaadinsample .v-calendar-weekly-longevents .v-calendar-event:hover {
    text-decoration: underline;
}

.vaadinsample .v-calendar-day-times {
    border-right: 1px solid #ccc;
    outline: none;
}

.vaadinsample .v-calendar-day-times .v-datecellslot, .vaadinsample .v-calendar-day-times .v-datecellslot-even {
    border-bottom: 1px solid #ccc;
}

.vaadinsample .v-calendar-day-times .v-datecellslot-even {
    border-bottom-color: #eee;
}

.vaadinsample .v-calendar-day-times .v-daterange {
    background-color: #a8a8a8;
}

.vaadinsample .v-calendar-day-times .v-reserved {
    background-color: #FF3333;
}

.vaadinsample .v-calendar-day-times .dragemphasis {
    background-color: #a8a8a8;
}

.vaadinsample .v-calendar-week-wrapper .v-calendar-event {
    padding: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-top: -1px;
}

.vaadinsample .v-calendar-event-caption {
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 4px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

.vaadinsample .v-calendar-event-content {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #777;
    background: #eee;
    opacity: 0.8;
    filter: alpha(opacity = 80);
    height: 14px;
}

.vaadinsample .v-calendar-current-time {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    overflow: hidden;
    background: #5a6c86;
    opacity: 0.6;
    filter: alpha(opacity = 60);
    z-index: 2;
}

.vaadinsample .v-calendar-event-resizetop {
    position: absolute;
    cursor: n-resize;
    height: 5%;
    min-height: 3px;
    top: 0;
    width: 100%;
    z-index: 1;
}

.vaadinsample .v-calendar-event-resizebottom {
    position: absolute;
    cursor: s-resize;
    height: 5%;
    min-height: 3px;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.vaadinsample .v-calendar-month-sizedheight .v-calendar-month-day {
    height: 100px;
}

.vaadinsample .v-calendar-month-sizedwidth .v-calendar-month-day {
    width: 100px;
}

.vaadinsample .v-calendar-header-month-Hsized .v-calendar-header-day {
    width: 101px;
}

.vaadinsample .v-calendar-header-month-Hsized td:first-child {
    padding-left: 21px;
}

.vaadinsample .v-calendar-header-day-Hsized {
    width: 200px;
}

.vaadinsample .v-calendar-week-numbers-Vsized .v-calendar-week-number {
    height: 100px;
    line-height: 100px;
}

.vaadinsample .v-calendar-week-wrapper-Vsized {
    height: 400px;
    overflow-x: hidden !important;
}

.vaadinsample .v-calendar-times-Vsized .v-calendar-time {
    height: 38px;
}

.vaadinsample .v-calendar-times-Hsized .v-calendar-time {
    width: 42px;
}

.vaadinsample .v-calendar-day-times-Vsized .v-datecellslot, .vaadinsample .v-calendar-day-times-Vsized .v-datecellslot-even {
    height: 18px;
}

.vaadinsample .v-calendar-day-times-Hsized, .vaadinsample .v-calendar-day-times-Hsized .v-datecellslot,
.vaadinsample .v-calendar-day-times-Hsized .v-datecellslot-even {
    width: 200px;
}

.vaadinsample.v-app {
    height: 100%;
}

.vaadinsample.v-app, .vaadinsample .v-window, .vaadinsample .v-popupview-popup,
.vaadinsample .v-label, .vaadinsample .v-caption {
    cursor: default;
}

body .vaadinsample.v-app .v-app-loading {
    background-image: url(../base/common/img/loading-indicator.gif);
    background-repeat: no-repeat;
    background-position: 50%;
    width: 100%;
    height: 100%;
}

.vaadinsample .v-ui {
    height: 100%;
    width: 100%;
    outline: none;
    position: relative;
}

.vaadinsample .v-ui.v-ui-embedded {
    margin-top: -1px;
    border-top: 1px solid transparent;
}

.vaadinsample .v-ui:active, .vaadinsample .v-ui:focus {
    outline: none;
}

.vaadinsample.v-app select, .vaadinsample .v-window select {
    margin: 0;
}

.vaadinsample .v-disabled {
    opacity: 0.3;
    filter: alpha(opacity=30);
    cursor: default;
}

.vaadinsample .v-disabled * {
    cursor: default;
}

* html .vaadinsample .v-disabled {
    zoom: 1;
}

* + html .vaadinsample .v-disabled {
    zoom: 1;
}

.vaadinsample .v-disabled .v-disabled {
    opacity: 1;
}

.vaadinsample .v-required-field-indicator {
    padding-left: 2px;
    color: red;
}

.vaadinsample .v-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
    height: 100%;
}

.vaadinsample .v-form-content {
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-tooltip {
    cursor: default;
    background: #fff;
}

.vaadinsample .v-tooltip-text {
    overflow: auto;
}

.vaadinsample .v-tooltip .v-errormessage {
    overflow: auto;
}

.vaadinsample .v-contextmenu {
    background: #fff;
}

.vaadinsample .v-contextmenu .gwt-MenuItem {
    cursor: pointer;
    vertical-align: middle;
    padding: 0;
    border: 0;
    margin: 0;
}

.vaadinsample .v-contextmenu .gwt-MenuItem div {
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
}

.vaadinsample .v-contextmenu .gwt-MenuItem-selected div {
    background: #aaa;
    color: #fff;
}

.vaadinsample .v-contextmenu table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

.vaadinsample .v-contextmenu .gwt-MenuItem img {
    margin-right: 1em;
    vertical-align: middle;
}

.vaadinsample .v-label pre {
    margin: 0;
}

.vaadinsample .v-label-undef-w {
    white-space: nowrap;
}

.vaadinsample .v-label h1, .vaadinsample .v-label h2, .vaadinsample .v-label h3,
.vaadinsample .v-label h4, .vaadinsample .v-label h5, .vaadinsample .v-label h6 {
    line-height: normal;
}

.vaadinsample .v-loading-indicator, .vaadinsample .v-loading-indicator-delay,
.vaadinsample .v-loading-indicator-wait {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 30000;
    width: 31px;
    height: 31px;
    background: transparent url(../base/common/img/loading-indicator.gif);
    margin-right: 5px;
    margin-top: 5px;
}

.vaadinsample .v-loading-indicator-delay {
    background-image: url(../base/common/img/loading-indicator-delay.gif);
}

.vaadinsample .v-loading-indicator-wait {
    background-image: url(../base/common/img/loading-indicator-wait.gif);
}

.vaadinsample.v-app input[type="text"], .vaadinsample.v-app input[type="password"],
.vaadinsample.v-app input[type="reset"], .vaadinsample.v-app select, .vaadinsample.v-app textarea,
.vaadinsample .v-window input[type="text"], .vaadinsample .v-window input[type="password"],
.vaadinsample .v-window input[type="reset"], .vaadinsample .v-window select,
.vaadinsample .v-window textarea {
    padding: 2px;
}

.vaadinsample input::-ms-clear {
    display: none;
}

.vaadinsample .v-drag-element {
    z-index: 60000;
    position: absolute !important;
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}

.vaadinsample .v-clip {
    overflow: hidden;
}

.vaadinsample .v-scrollable {
    overflow: auto;
    font-size: 0;
    line-height: normal;
}

.v-ios.v-sa6 .vaadinsample .v-scrollable {
    -webkit-overflow-scrolling: touch;
}

.vaadinsample.v-overlay-container {
    width: 0;
    height: 0;
}

.vaadinsample .v-vertical.v-margin-top, .vaadinsample .v-horizontal.v-margin-top {
    padding-top: 12px;
}

.vaadinsample .v-vertical.v-margin-right, .vaadinsample .v-horizontal.v-margin-right {
    padding-right: 12px;
}

.vaadinsample .v-vertical.v-margin-bottom, .vaadinsample .v-horizontal.v-margin-bottom {
    padding-bottom: 12px;
}

.vaadinsample .v-vertical.v-margin-left, .vaadinsample .v-horizontal.v-margin-left {
    padding-left: 12px;
}

.vaadinsample .v-gridlayout.v-layout-margin-top {
    padding-top: 24px;
}

.vaadinsample .v-gridlayout, .vaadinsample .v-verticallayout, .vaadinsample .v-horizontallayout {
    font-size: 0;
    line-height: normal;
}

.vaadinsample .v-gridlayout.v-layout-margin-bottom {
    padding-bottom: 24px;
}

.vaadinsample .v-gridlayout.v-layout-margin-left {
    padding-left: 24px;
}

.vaadinsample .v-gridlayout.v-layout-margin-right {
    padding-right: 24px;
}

.vaadinsample .v-gridlayout .v-layout-spacing-on {
    padding-left: 12px;
    padding-top: 12px;
}

.vaadinsample .v-spacing {
    width: 6px;
    height: 6px;
}

.vaadinsample .v-vertical, .vaadinsample .v-horizontal {
    display: inline-block;
}

.vaadinsample div.v-layout.v-horizontal.v-widget {
    white-space: nowrap;
}

.vaadinsample .v-layout.v-vertical > .v-expand, .vaadinsample .v-layout.v-horizontal > .v-expand {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.vaadinsample .v-slot, .vaadinsample .v-spacing {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

.vaadinsample .v-vertical > .v-slot:after {
    display: inline-block;
    clear: both;
    width: 0;
    height: 0;
    overflow: hidden;
    line-height: 0;
}

.vaadinsample .v-vertical > .v-slot, .vaadinsample .v-vertical > .v-expand > .v-slot {
    display: block;
    clear: both;
}

.vaadinsample .v-horizontal > .v-slot, .vaadinsample .v-horizontal > .v-expand > .v-slot {
    height: 100%;
}

.vaadinsample .v-horizontal > .v-expand > .v-slot {
    position: relative;
}

.vaadinsample .v-vertical > .v-spacing, .vaadinsample .v-vertical > .v-expand > .v-spacing {
    width: 0;
    display: block;
    clear: both;
}

.vaadinsample .v-horizontal > .v-spacing, .vaadinsample .v-horizontal > .v-expand > .v-spacing {
    height: 0;
}

.vaadinsample .v-align-middle:before, .vaadinsample .v-align-bottom:before,
.vaadinsample .v-expand > .v-align-middle:before, .vaadinsample .v-expand > .v-align-bottom:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
}

.vaadinsample .v-align-middle, .vaadinsample .v-align-bottom {
    white-space: nowrap;
}

.vaadinsample .v-align-middle > .v-widget, .vaadinsample .v-align-bottom > .v-widget {
    display: inline-block;
}

.vaadinsample .v-align-middle, .vaadinsample .v-align-middle > .v-widget {
    vertical-align: middle;
}

.vaadinsample .v-align-bottom, .vaadinsample .v-align-bottom > .v-widget {
    vertical-align: bottom;
}

.vaadinsample .v-align-center {
    text-align: center;
}

.vaadinsample .v-align-center > .v-widget {
    margin-left: auto;
    margin-right: auto;
}

.vaadinsample .v-align-right {
    text-align: right;
}

.vaadinsample .v-align-right > .v-widget {
    margin-left: auto;
}

.vaadinsample .v-has-caption, .vaadinsample .v-has-caption > .v-caption {
    display: inline-block;
}

.vaadinsample .v-caption {
    overflow: visible;
    vertical-align: middle;
}

.vaadinsample .v-caption-on-left, .vaadinsample .v-caption-on-right {
    white-space: nowrap;
}

.vaadinsample .v-caption-on-top > .v-caption, .vaadinsample .v-caption-on-bottom > .v-caption {
    display: block;
}

.vaadinsample .v-caption-on-left > .v-caption {
    padding-right: 0.5em;
}

.vaadinsample .v-caption-on-right > .v-caption {
    vertical-align: top;
}

.vaadinsample .v-caption-on-left > .v-widget, .vaadinsample .v-caption-on-right > .v-widget {
    display: inline-block;
    vertical-align: middle;
}

.vaadinsample .v-has-caption.v-has-width > .v-widget {
    width: 100% !important;
}

.vaadinsample .v-has-caption.v-has-height > .v-widget {
    height: 100% !important;
}

.vaadinsample .v-errorindicator {
    vertical-align: middle;
}

.vaadinsample .v-csslayout {
    overflow: hidden;
}

.vaadinsample div.v-csslayout {
    display: block;
}

.vaadinsample .v-csslayout-margin, .vaadinsample .v-csslayout-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-has-width > .v-csslayout-margin, .vaadinsample .v-has-width > .v-csslayout-margin > .v-csslayout-container {
    width: 100%;
}

.vaadinsample .v-has-height > .v-csslayout-margin, .vaadinsample .v-has-height > .v-csslayout-margin > .v-csslayout-container {
    height: 100%;
}

.vaadinsample .v-csslayout-margin-top {
    padding-top: 12px;
}

.vaadinsample .v-csslayout-margin-bottom {
    padding-bottom: 12px;
}

.vaadinsample .v-csslayout-margin-left {
    padding-left: 12px;
}

.vaadinsample .v-csslayout-margin-right {
    padding-right: 12px;
}

.vaadinsample .v-customcomponent {
    overflow: hidden;
}

.vaadinsample .v-customlayout {
    overflow: hidden;
}

.vaadinsample .v-datefield {
    white-space: nowrap;
    display: inline-block;
}

.vaadinsample .v-datefield-textfield {
    vertical-align: top;
}

.v-ie .vaadinsample .v-datefield-button:after {
    content: "\200B";
}

.vaadinsample .v-datefield-button {
    cursor: pointer;
    vertical-align: top;
}

.vaadinsample .v-has-width > input.v-datefield-textfield {
    width: 100%;
}

.vaadinsample .v-datefield-prompt .v-datefield-textfield {
    color: #999;
    font-style: italic;
}

.vaadinsample .v-datefield .v-datefield-button-readonly {
    display: none;
}

.vaadinsample .v-datefield-calendarpanel table {
    width: 100%;
}

.vaadinsample .v-datefield-calendarpanel td {
    padding: 0;
    margin: 0;
}

.vaadinsample .v-datefield-calendarpanel:focus {
    outline: none;
}

.vaadinsample .v-datefield-calendarpanel-header td {
    text-align: center;
}

.vaadinsample .v-datefield-calendarpanel-month {
    text-align: center;
    white-space: nowrap;
}

.vaadinsample .v-datefield-calendarpanel-weeknumber {
    color: #999;
    border-right: 1px solid #ddd;
    font-size: 11.7px;
}

.vaadinsample .v-datefield-calendarpanel-day, .vaadinsample .v-datefield-calendarpanel-day-today {
    cursor: pointer;
}

.vaadinsample .v-datefield-calendarpanel-day-today {
    border: 1px solid #ddd;
}

.vaadinsample .v-disabled .v-datefield-calendarpanel-day, .vaadinsample .v-disabled .v-datefield-calendarpanel-day-today {
    cursor: default;
}

.vaadinsample .v-datefield-calendarpanel-day-disabled, .vaadinsample .v-datefield-calendarpanel-day-outside-range {
    cursor: default;
    opacity: 0.5;
}

.vaadinsample .v-datefield-calendarpanel-prevyear button.outside-range,
.vaadinsample .v-datefield-calendarpanel-nextyear button.outside-range,
.vaadinsample .v-datefield-calendarpanel-prevmonth button.outside-range,
.vaadinsample .v-datefield-calendarpanel-nextmonth button.outside-range {
    opacity: 0.5;
}

.vaadinsample .v-datefield-calendarpanel-day-selected {
    cursor: default;
    background: #333;
    color: #fff;
}

.vaadinsample .v-datefield-calendarpanel-day-focused {
    outline: 1px dotted black;
}

.vaadinsample .v-datefield-calendarpanel-day-offmonth {
    color: #666;
}

.vaadinsample .v-datefield-time {
    white-space: nowrap;
}

.vaadinsample .v-datefield-time .v-label {
    display: inline;
}

.vaadinsample .v-datefield-popup {
    background: #fff;
}

.vaadinsample .v-datefield-popupcalendar input.v-datefield-textfield {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-inline-datefield {
    white-space: nowrap;
    display: inline-block;
}

.vaadinsample .v-inline-datefield-textfield {
    vertical-align: top;
}

.v-ie .vaadinsample .v-inline-datefield-button:after {
    content: "\200B";
}

.vaadinsample .v-inline-datefield-button {
    cursor: pointer;
    vertical-align: top;
}

.vaadinsample .v-has-width > input.v-inline-datefield-textfield {
    width: 100%;
}

.vaadinsample .v-inline-datefield-prompt .v-inline-datefield-textfield {
    color: #999;
    font-style: italic;
}

.vaadinsample .v-inline-datefield .v-inline-datefield-button-readonly {
    display: none;
}

.vaadinsample .v-inline-datefield-calendarpanel table {
    width: 100%;
}

.vaadinsample .v-inline-datefield-calendarpanel td {
    padding: 0;
    margin: 0;
}

.vaadinsample .v-inline-datefield-calendarpanel:focus {
    outline: none;
}

.vaadinsample .v-inline-datefield-calendarpanel-header td {
    text-align: center;
}

.vaadinsample .v-inline-datefield-calendarpanel-month {
    text-align: center;
    white-space: nowrap;
}

.vaadinsample .v-inline-datefield-calendarpanel-weeknumber {
    color: #999;
    border-right: 1px solid #ddd;
    font-size: 11.7px;
}

.vaadinsample .v-inline-datefield-calendarpanel-day, .vaadinsample .v-inline-datefield-calendarpanel-day-today {
    cursor: pointer;
}

.vaadinsample .v-inline-datefield-calendarpanel-day-today {
    border: 1px solid #ddd;
}

.vaadinsample .v-disabled .v-inline-datefield-calendarpanel-day, .vaadinsample .v-disabled .v-inline-datefield-calendarpanel-day-today {
    cursor: default;
}

.vaadinsample .v-inline-datefield-calendarpanel-day-disabled, .vaadinsample .v-inline-datefield-calendarpanel-day-outside-range {
    cursor: default;
    opacity: 0.5;
}

.vaadinsample .v-inline-datefield-calendarpanel-prevyear button.outside-range,
.vaadinsample .v-inline-datefield-calendarpanel-nextyear button.outside-range,
.vaadinsample .v-inline-datefield-calendarpanel-prevmonth button.outside-range,
.vaadinsample .v-inline-datefield-calendarpanel-nextmonth button.outside-range {
    opacity: 0.5;
}

.vaadinsample .v-inline-datefield-calendarpanel-day-selected {
    cursor: default;
    background: #333;
    color: #fff;
}

.vaadinsample .v-inline-datefield-calendarpanel-day-focused {
    outline: 1px dotted black;
}

.vaadinsample .v-inline-datefield-calendarpanel-day-offmonth {
    color: #666;
}

.vaadinsample .v-inline-datefield-time {
    white-space: nowrap;
}

.vaadinsample .v-inline-datefield-time .v-label {
    display: inline;
}

.vaadinsample .v-inline-datefield-popup {
    background: #fff;
}

.vaadinsample .v-inline-datefield-popupcalendar input.v-inline-datefield-textfield {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-ddwrapper {
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    position: relative;
}

.vaadinsample [draggable=true] {
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

.v-ie .vaadinsample .v-ddwrapper a.drag-start {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: cyan;
    filter: alpha(opacity=0);
}

.vaadinsample .v-ddwrapper-over {
    border: 2px solid #1d9dff;
    background-color: #bcdcff;
    padding: 0;
}

.vaadinsample .v-ddwrapper-over {
    background-color: rgba(169, 209, 255, 0.6);
}

.vaadinsample .no-box-drag-hints .v-ddwrapper-over {
    border: none;
    background-color: transparent;
    padding: 2px;
}

.vaadinsample.v-app .v-ddwrapper-over-top, .vaadinsample .v-window .v-ddwrapper-over-top,
.vaadinsample .v-popupview-popup .v-ddwrapper-over-top {
    border: none;
    border-top: 2px solid #1d9dff;
    background-color: transparent;
    padding: 2px;
    padding-top: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.vaadinsample.v-app .v-ddwrapper-over-bottom, .vaadinsample .v-window .v-ddwrapper-over-bottom,
.vaadinsample .v-popupview-popup .v-ddwrapper-over-bottom {
    border: none;
    border-bottom: 2px solid #1d9dff;
    background-color: transparent;
    padding: 2px;
    padding-bottom: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.vaadinsample.v-app .v-ddwrapper-over-left, .vaadinsample .v-window .v-ddwrapper-over-left,
.vaadinsample .v-popupview-popup .v-ddwrapper-over-left {
    border: none;
    border-left: 2px solid #1d9dff;
    background-color: transparent;
    padding: 2px;
    padding-left: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.vaadinsample.v-app .v-ddwrapper-over-right, .vaadinsample .v-window .v-ddwrapper-over-right,
.vaadinsample .v-popupview-popup .v-ddwrapper-over-right {
    border: none;
    border-right: 2px solid #1d9dff;
    background-color: transparent;
    padding: 2px;
    padding-right: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.vaadinsample .v-ddwrapper, .vaadinsample .v-ddwrapper-over, .vaadinsample.v-app .v-ddwrapper-over-top,
.vaadinsample .v-window .v-ddwrapper-over-top, .vaadinsample .v-popupview-popup .v-ddwrapper-over-top,
.vaadinsample.v-app .v-ddwrapper-over-bottom, .vaadinsample .v-window .v-ddwrapper-over-bottom,
.vaadinsample .v-popupview-popup .v-ddwrapper-over-bottom, .vaadinsample.v-app .v-ddwrapper-over-left,
.vaadinsample .v-window .v-ddwrapper-over-left, .vaadinsample .v-popupview-popup .v-ddwrapper-over-left,
.vaadinsample.v-app .v-ddwrapper-over-right, .vaadinsample .v-window .v-ddwrapper-over-right,
.vaadinsample .v-popupview-popup .v-ddwrapper-over-right {
    border-color: rgba(0, 109, 232, 0.6);
}

.vaadinsample .v-ddwrapper-over-top:before, .vaadinsample .v-ddwrapper-over-bottom:after,
.vaadinsample .v-ddwrapper-over-left:before, .vaadinsample .v-ddwrapper-over-right:before {
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    margin-left: -2px;
    background: transparent url(../base/common/img/drag-slot-dot.png) no-repeat;
}

.vaadinsample .v-ddwrapper-over-bottom:after {
    margin-top: -2px;
}

.vaadinsample .v-ddwrapper-over-left:before, .vaadinsample .v-ddwrapper-over-right:before {
    background-position: 0 -6px;
    margin-top: -2px;
    margin-left: -4px;
}

.vaadinsample .v-ddwrapper-over-right:before {
    position: relative;
    margin-bottom: -4px;
    margin-right: -4px;
    margin-left: 0;
    width: auto;
    background-position: 100% -6px;
}

.vaadinsample .no-horizontal-drag-hints .v-ddwrapper-over-left {
    padding-left: 2px;
    border-left: none;
}

.vaadinsample .no-horizontal-drag-hints .v-ddwrapper-over-right {
    padding-right: 2px;
    border-right: none;
}

.vaadinsample .no-vertical-drag-hints .v-ddwrapper-over-top {
    padding-top: 2px;
    border-top: none;
}

.vaadinsample .no-vertical-drag-hints .v-ddwrapper-over-bottom {
    padding-bottom: 2px;
    border-bottom: none;
}

.vaadinsample .no-horizontal-drag-hints .v-ddwrapper-over-left:before,
.vaadinsample .no-horizontal-drag-hints .v-ddwrapper-over-right:before,
.vaadinsample .no-vertical-drag-hints .v-ddwrapper-over-top:before,
.vaadinsample .no-vertical-drag-hints .v-ddwrapper-over-bottom:after {
    display: none;
}

.vaadinsample .v-table .v-embedded-image {
    display: inline-block;
}

.vaadinsample .v-formlayout.v-has-width > table {
    width: 100%;
}

.vaadinsample .v-formlayout.v-has-height > table {
    height: 100%;
}

.vaadinsample .v-formlayout-cell .v-errorindicator {
    display: block;
}

.vaadinsample .v-formlayout-error-indicator {
    width: 12px;
}

.vaadinsample .v-formlayout-captioncell {
    text-align: right;
    white-space: nowrap;
}

.vaadinsample .v-formlayout-errorcell, .vaadinsample .v-formlayout-captioncell {
    width: 1px;
}

.vaadinsample .v-formlayout-captioncell .v-caption {
    overflow: visible;
}

.vaadinsample .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-captioncell,
.vaadinsample .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell,
.vaadinsample .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell {
    padding-top: 6px;
}

.vaadinsample .v-formlayout-spacing > tbody > .v-formlayout-firstrow > .v-formlayout-captioncell,
.vaadinsample .v-formlayout-spacing > tbody > .v-formlayout-firstrow > .v-formlayout-contentcell,
.vaadinsample .v-formlayout-spacing > tbody > .v-formlayout-firstrow > .v-formlayout-errorcell {
    padding-top: 0;
}

.vaadinsample .v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-captioncell,
.vaadinsample .v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-contentcell,
.vaadinsample .v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-errorcell {
    padding-top: 12px;
}

.vaadinsample .v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-captioncell,
.vaadinsample .v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-contentcell,
.vaadinsample .v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-errorcell {
    padding-bottom: 12px;
}

.vaadinsample .v-formlayout-margin-left > tbody > .v-formlayout-row > .v-formlayout-captioncell {
    padding-left: 12px;
}

.vaadinsample .v-formlayout-margin-right > tbody > .v-formlayout-row > .v-formlayout-contentcell {
    padding-right: 12px;
}

.vaadinsample .v-formlayout-captioncell .v-caption .v-required-field-indicator {
    float: none;
}

.vaadinsample .v-gridlayout {
    position: relative;
}

.vaadinsample .v-gridlayout-slot {
    position: absolute;
}

.vaadinsample .v-gridlayout-margin-top {
    padding-top: 12px;
}

.vaadinsample .v-gridlayout-margin-bottom {
    padding-bottom: 12px;
}

.vaadinsample .v-gridlayout-margin-left {
    padding-left: 12px;
}

.vaadinsample .v-gridlayout-margin-right {
    padding-right: 12px;
}

.vaadinsample .v-gridlayout-spacing-on {
    padding-left: 6px;
    padding-top: 6px;
    overflow: hidden;
}

.vaadinsample .v-gridlayout-spacing, .vaadinsample .v-gridlayout-spacing-off {
    padding-left: 0;
    padding-top: 0;
}

.vaadinsample .v-gridlayout-spacing-off {
    overflow: hidden;
}

.vaadinsample .v-label {
    overflow: hidden;
}

.vaadinsample .v-label.v-has-width {
    white-space: normal;
}

.vaadinsample .v-link {
    white-space: nowrap;
}

.vaadinsample .v-link a {
    vertical-align: middle;
    text-decoration: none;
}

.vaadinsample .v-link span {
    text-decoration: underline;
    vertical-align: middle;
}

.vaadinsample .v-disabled a {
    cursor: default;
}

.vaadinsample .v-link img {
    vertical-align: middle;
    border: none;
}

.vaadinsample .v-loginform {
    height: 140px;
    width: 200px;
}

.vaadinsample .v-app-loginpage .v-button, .vaadinsample .v-app-loginpage .v-button {
    float: left;
}

.vaadinsample .v-menubar {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

.vaadinsample .v-menubar .v-menubar-menuitem {
    cursor: default;
    vertical-align: middle;
    white-space: nowrap;
    display: inline;
    display: inline-block;
    zoom: 1;
}

.vaadinsample .v-menubar .v-menubar-menuitem-caption .v-icon {
    vertical-align: middle;
    white-space: nowrap;
}

.vaadinsample .v-menubar-submenu {
    background: #fff;
}

.vaadinsample .v-menubar-menuitem-selected {
    background: #333;
    color: #fff;
}

.vaadinsample .v-menubar-submenu .v-menubar-menuitem {
    cursor: default;
    display: block;
    position: relative;
    padding-right: 1.5em;
}

.vaadinsample .v-menubar-submenu .v-menubar-menuitem-caption {
    display: block;
}

.vaadinsample .v-menubar-submenu .v-menubar-menuitem *, .vaadinsample .v-menubar-submenu .v-menubar-menuitem-caption * {
    white-space: nowrap;
}

.vaadinsample .v-menubar-submenu-indicator {
    display: none;
    font-family: arial, helvetica, sans-serif;
}

.vaadinsample .v-menubar-submenu .v-menubar-submenu-indicator {
    display: block;
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    font-size: 11.7px;
}

.vaadinsample .v-menubar-menuitem-disabled, .vaadinsample .v-menubar span.v-menubar-menuitem-disabled:hover,
.vaadinsample .v-menubar span.v-menubar-menuitem-disabled:focus, .vaadinsample .v-menubar span.v-menubar-menuitem-disabled:active {
    color: #999;
}

.vaadinsample .v-menubar-more-menuitem {
    font-family: arial, helvetica, sans-serif;
}

.vaadinsample .v-menubar-separator {
    overflow: hidden;
}

.vaadinsample .v-menubar-separator span {
    display: block;
    text-indent: -9999px;
    font-size: 1px;
    line-height: 1px;
    border-top: 1px solid #ddd;
    margin: 3px 0 2px;
    overflow: hidden;
}

.vaadinsample .v-menubar .v-icon, .vaadinsample .v-menubar-submenu .v-icon {
    margin-right: 3px;
}

.vaadinsample .v-menubar:focus, .vaadinsample .v-menubar-popup:focus,
.vaadinsample .v-menubar-popup .popupContent:focus, .vaadinsample .v-menubar-popup .popupContent .v-menubar-submenu:focus {
    outline: none;
}

.vaadinsample .v-menubar-submenu-check-column .v-menubar-menuitem {
    padding-left: 6px;
}

.vaadinsample .v-menubar-submenu-check-column .v-menubar-menuitem-caption {
    padding-left: 18px;
}

.vaadinsample .v-menubar-submenu .v-menubar-menuitem-checked .v-menubar-menuitem-caption {
    background: transparent url(../base/menubar/img/check.gif) no-repeat left;
}

.vaadinsample .v-Notification {
    background: #999;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    padding: 1em;
    max-width: 85%;
}

.vaadinsample .v-Notification h1, .vaadinsample .v-Notification p, .vaadinsample .v-Notification-error h1,
.vaadinsample .v-Notification-error p, .vaadinsample .v-Notification-warning h1,
.vaadinsample .v-Notification-warning p {
    display: inline;
    margin: 0 0.5em 0 0;
}

.vaadinsample .v-Notification-warning {
    background: orange;
}

.vaadinsample .v-Notification-error {
    background: red;
}

.vaadinsample .v-Notification-tray h1 {
    display: block;
}

.vaadinsample .v-Notification-tray p {
    display: block;
}

.vaadinsample .v-Notification-system {
    background-color: red;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.vaadinsample .v-Notification-system h1 {
    display: block;
    margin: 0;
}

.vaadinsample .v-orderedlayout, .vaadinsample .v-horizontallayout, .vaadinsample .v-verticallayout {
    position: relative;
}

.vaadinsample .v-orderedlayout-margin-top, .vaadinsample .v-horizontallayout-margin-top,
.vaadinsample .v-verticallayout-margin-top {
    padding-top: 12px;
}

.vaadinsample .v-orderedlayout-margin-right, .vaadinsample .v-horizontallayout-margin-right,
.vaadinsample .v-verticallayout-margin-right {
    padding-right: 12px;
}

.vaadinsample .v-orderedlayout-margin-bottom, .vaadinsample .v-horizontallayout-margin-bottom,
.vaadinsample .v-verticallayout-margin-bottom {
    padding-bottom: 12px;
}

.vaadinsample .v-orderedlayout-margin-left, .vaadinsample .v-horizontallayout-margin-left,
.vaadinsample .v-verticallayout-margin-left {
    padding-left: 12px;
}

.vaadinsample .v-orderedlayout-spacing-on, .vaadinsample .v-horizontallayout-spacing-on,
.vaadinsample .v-verticallayout-spacing-on {
    padding-top: 6px;
    padding-left: 6px;
}

.vaadinsample .v-orderedlayout-spacing-off, .vaadinsample .v-horizontallayout-spacing-off,
.vaadinsample .v-verticallayout-spacing-off {
    padding-top: 0;
    padding-left: 0;
}

.vaadinsample .v-horizontallayout-slot, .vaadinsample .v-verticallayout-slot {
    position: absolute;
}

.vaadinsample .v-panel, .vaadinsample .v-panel-caption, .vaadinsample .v-panel-content,
.vaadinsample .v-panel-deco, .vaadinsample .v-panel-light, .vaadinsample .v-panel-caption-light,
.vaadinsample .v-panel-content-light, .vaadinsample .v-panel-deco-light {
    outline: none;
    text-align: left;
}

.vaadinsample .v-panel-caption .v-errorindicator {
    float: none;
    display: inline;
}

.vaadinsample .v-panel-caption .v-icon {
    display: inline;
    vertical-align: middle;
}

.vaadinsample .v-panel-caption span {
    vertical-align: middle;
}

.vaadinsample .v-panel-caption {
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
}

.vaadinsample .v-panel-nocaption {
    overflow: hidden;
}

.vaadinsample .v-panel-content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-panel.v-has-width > .v-panel-content {
    width: 100%;
}

.vaadinsample .v-panel.v-has-height > .v-panel-content {
    height: 100%;
}

.vaadinsample .v-popupview {
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.vaadinsample .v-popupview-popup {
    overflow: auto;
}

.vaadinsample .v-popupview-loading {
    width: 30px;
    height: 30px;
    background: transparent url(../base/common/img/ajax-loader-medium.gif) no-repeat 50%;
}

.vaadinsample .v-progressbar {
    width: 150px;
}

.vaadinsample .v-progressbar-wrapper {
    height: 7px;
    border: 1px solid #ddd;
}

.vaadinsample .v-progressbar-indicator {
    height: 7px;
    background: #ddd;
}

.vaadinsample div.v-progressbar-indeterminate {
    height: 20px;
    width: 20px;
    background: #fff url(../base/common/img/ajax-loader-medium.gif) no-repeat 50%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

.vaadinsample .v-progressbar-indeterminate .v-progressbar-wrapper,
.vaadinsample .v-progressbar-indeterminate .v-progressbar-indicator,
.vaadinsample .v-progressbar-indeterminate-disabled .v-progressbar-wrapper,
.vaadinsample .v-progressbar-indeterminate-disabled .v-progressbar-indicator {
    display: none;
}

.vaadinsample div.v-progressbar-indeterminate-disabled {
    height: 20px;
    width: 20px;
    background: transparent;
}

.vaadinsample .v-progressindicator {
    width: 150px;
}

.vaadinsample .v-progressindicator-wrapper {
    height: 7px;
    border: 1px solid #ddd;
}

.vaadinsample .v-progressindicator-indicator {
    height: 7px;
    background: #ddd;
}

.vaadinsample div.v-progressindicator-indeterminate {
    height: 20px;
    width: 20px;
    background: #fff url(../base/common/img/ajax-loader-medium.gif) no-repeat 50%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

.vaadinsample .v-progressindicator-indeterminate .v-progressindicator-wrapper,
.vaadinsample .v-progressindicator-indeterminate .v-progressindicator-indicator,
.vaadinsample .v-progressindicator-indeterminate-disabled .v-progressindicator-wrapper,
.vaadinsample .v-progressindicator-indeterminate-disabled .v-progressindicator-indicator {
    display: none;
}

.vaadinsample div.v-progressindicator-indeterminate-disabled {
    height: 20px;
    width: 20px;
    background: transparent;
}

.vaadinsample .v-select {
    text-align: left;
}

.vaadinsample .v-select-optiongroup .v-select-option {
    display: block;
    white-space: nowrap;
}

.vaadinsample .v-select-optiongroup .v-icon {
    vertical-align: middle;
    white-space: nowrap;
    margin: 0 2px;
}

.v-ie .vaadinsample .v-select-optiongroup .v-select-option {
    zoom: 1;
}

.vaadinsample .v-select-select {
    display: block;
}

.vaadinsample .v-select-twincol {
    white-space: nowrap;
}

.vaadinsample .v-select-twincol-options {
    float: left;
}

.vaadinsample .v-select-twincol-caption-left {
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vaadinsample .v-select-twincol-selections {
    font-weight: bold;
}

.vaadinsample .v-select-twincol-caption-right {
    float: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vaadinsample .v-select-twincol-buttons {
    float: left;
    text-align: center;
}

.vaadinsample .v-select-twincol-buttons .v-select-twincol-deco {
    clear: both;
}

.vaadinsample .v-select-twincol .v-textfield {
    display: block;
    float: left;
    clear: left;
}

.vaadinsample .v-select-twincol .v-button {
    float: left;
}

.vaadinsample .v-select-twincol-buttons .v-button {
    float: none;
}

.vaadinsample .v-filterselect {
    white-space: nowrap;
    text-align: left;
    display: inline-block;
    padding-right: 1em;
}

.vaadinsample .v-filterselect .v-icon {
    float: left;
}

.vaadinsample.v-app .v-filterselect-input, .vaadinsample .v-window .v-filterselect-input,
.vaadinsample .v-popupview-popup .v-filterselect-input {
    margin: 0;
    float: left;
    -webkit-border-radius: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-filterselect-prompt .v-filterselect-input {
    color: #999;
    font-style: italic;
}

.vaadinsample .v-filterselect-button {
    display: inline-block;
    cursor: pointer;
    width: 1em;
    margin-right: -1em;
    height: 1em;
    background: transparent url(../base/common/img/sprites.png) no-repeat -5px -8px;
}

.vaadinsample .v-filterselect.v-readonly .v-filterselect-button {
    display: none;
}

.vaadinsample .v-filterselect.v-readonly, .vaadinsample .v-filterselect.v-readonly .v-filterselect-input {
    background: transparent;
}

.vaadinsample .v-filterselect-suggestpopup {
    background: #fff;
    border: 1px solid #eee;
}

.vaadinsample .v-filterselect-suggestmenu table {
    border-collapse: collapse;
    border: none;
    vertical-align: top;
}

.vaadinsample .v-filterselect-suggestmenu .gwt-MenuItem {
    white-space: nowrap;
}

.vaadinsample .v-filterselect-suggestmenu .gwt-MenuItem .v-icon {
    margin-right: 3px;
    vertical-align: middle;
}

.vaadinsample .v-filterselect-suggestmenu .gwt-MenuItem span {
    vertical-align: middle;
}

.vaadinsample .v-filterselect-suggestmenu .gwt-MenuItem-selected {
    background: #333;
    color: #fff;
}

.vaadinsample .v-filterselect-nextpage, .vaadinsample .v-filterselect-nextpage-off,
.vaadinsample .v-filterselect-prevpage-off, .vaadinsample .v-filterselect-prevpage {
    width: 100%;
    background: #aaa;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}

.vaadinsample .v-filterselect-nextpage-off, .vaadinsample .v-filterselect-prevpage-off {
    color: #666;
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}

.vaadinsample .v-filterselect-nextpage-off span, .vaadinsample .v-filterselect-prevpage-off span {
    cursor: default;
}

.vaadinsample .v-filterselect-status {
    white-space: nowrap;
    text-align: center;
}

.vaadinsample .v-filterselect-no-input .v-filterselect-input {
    cursor: default;
}

.vaadinsample .v-shadow {
    position: absolute;
}

.vaadinsample .v-shadow .top-left {
    position: absolute;
    overflow: hidden;
    top: -3px;
    left: -5px;
    width: 10px;
    height: 10px;
    background: transparent url(../base/shadow/img/top-left.png);
}

.vaadinsample .v-shadow .top {
    position: absolute;
    overflow: hidden;
    top: -3px;
    left: 5px;
    height: 10px;
    right: 5px;
    background: transparent url(../base/shadow/img/top.png);
}

.vaadinsample .v-shadow .top-right {
    position: absolute;
    overflow: hidden;
    top: -3px;
    right: -5px;
    width: 10px;
    height: 10px;
    background: transparent url(../base/shadow/img/top-right.png);
}

.vaadinsample .v-shadow .left {
    position: absolute;
    overflow: hidden;
    top: 7px;
    left: -5px;
    width: 10px;
    bottom: 3px;
    background: transparent url(../base/shadow/img/left.png);
}

.vaadinsample .v-shadow .center {
    position: absolute;
    overflow: hidden;
    top: 7px;
    left: 5px;
    bottom: 3px;
    right: 5px;
    background: transparent url(../base/shadow/img/center.png);
}

.vaadinsample .v-shadow .right {
    position: absolute;
    overflow: hidden;
    top: 7px;
    right: -5px;
    width: 10px;
    bottom: 3px;
    background: transparent url(../base/shadow/img/right.png);
}

.vaadinsample .v-shadow .bottom-left {
    position: absolute;
    overflow: hidden;
    bottom: -7px;
    left: -5px;
    width: 10px;
    height: 10px;
    background: transparent url(../base/shadow/img/bottom-left.png);
}

.vaadinsample .v-shadow .bottom {
    position: absolute;
    overflow: hidden;
    bottom: -7px;
    left: 5px;
    right: 5px;
    height: 10px;
    background: transparent url(../base/shadow/img/bottom.png);
}

.vaadinsample .v-shadow .bottom-right {
    position: absolute;
    overflow: hidden;
    bottom: -7px;
    right: -5px;
    width: 10px;
    height: 10px;
    background: transparent url(../base/shadow/img/bottom-right.png);
}

.vaadinsample .v-slider {
    margin: 5px 0;
}

.vaadinsample .v-slider-base {
    height: 2px;
    border-top: 1px solid #ddd;
    background: #eee;
    border-left: 1px solid #ddd;
    border-right: 1px solid #eee;
}

.vaadinsample .v-slider-handle {
    background: #aaa;
    width: 12px;
    height: 12px;
    margin-top: -5px;
    font-size: 0;
}

.vaadinsample .v-slider-vertical {
    width: 2px;
    height: auto;
    margin: 0 5px;
    border: none;
    border-left: 1px solid #cccfd0;
    border-right: 1px solid #cccfd0;
}

.vaadinsample .v-slider-vertical .v-slider-base {
    width: 2px;
    border-bottom: 1px solid #eee;
    border-right: none;
}

.vaadinsample .v-slider-vertical .v-slider-handle {
    width: 12px;
    height: 12px;
    font-size: 0;
    margin-left: -5px;
}

.vaadinsample .v-slider-feedback {
    padding: 2px 5px;
    background: #444;
    color: #fff;
    font-size: 11px;
    line-height: 13px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin: -2px 0 0 2px;
    text-shadow: 0 1px 0 #000;
}

.vaadinsample .v-splitpanel-horizontal, .vaadinsample .v-splitpanel-vertical {
    overflow: hidden;
}

.vaadinsample .v-splitpanel-hsplitter {
    width: 6px;
}

.vaadinsample .v-splitpanel-hsplitter div {
    width: 6px;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #ddd;
    cursor: e-resize;
    cursor: col-resize;
}

.vaadinsample .v-disabled .v-splitpanel-hsplitter div {
    cursor: default;
}

.vaadinsample .v-splitpanel-vsplitter {
    height: 6px;
}

.vaadinsample .v-splitpanel-vsplitter div {
    height: 6px;
    background: #ddd;
    cursor: s-resize;
    cursor: row-resize;
}

.vaadinsample .v-disabled .v-splitpanel-vsplitter div {
    cursor: default;
}

.vaadinsample .v-table {
    overflow: hidden;
    text-align: left;
}

.vaadinsample .v-table-header-wrap {
    overflow: hidden;
    border: 1px solid #aaa;
    border-bottom: none;
    background: #efefef;
}

.vaadinsample .v-table-header table, .vaadinsample .v-table-table {
    border-spacing: 0;
    border-collapse: separate;
    margin: 0;
    padding: 0;
    border: 0;
}

.vaadinsample .v-table-table {
    font-size: 14px;
}

.vaadinsample .v-table-header td {
    padding: 0;
}

.vaadinsample .v-table-header-cell, .vaadinsample .v-table-header-cell-asc,
.vaadinsample .v-table-header-cell-desc {
    cursor: pointer;
}

.vaadinsample .v-table.v-disabled .v-table-header-cell, .vaadinsample .v-table.v-disabled .v-table-header-cell-asc,
.vaadinsample .v-table.v-disabled .v-table-header-cell-desc {
    cursor: default;
}

.vaadinsample .v-table-footer-wrap {
    overflow: hidden;
    border: 1px solid #aaa;
    border-top: none;
    background: #efefef;
}

.vaadinsample .v-table-footer table {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    border: 0;
}

.vaadinsample .v-table-footer td {
    padding: 0;
    border-right: 1px solid #aaa;
}

.vaadinsample .v-table-footer-cell {
    cursor: pointer;
}

.vaadinsample .v-table-footer-container {
    float: right;
    padding-right: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.vaadinsample .v-table-resizer {
    display: block;
    height: 1.2em;
    float: right;
    background: #aaa;
    cursor: e-resize;
    cursor: col-resize;
    width: 1px;
    overflow: hidden;
}

.vaadinsample .v-table.v-disabled .v-table-resizer {
    cursor: default;
}

.vaadinsample .v-table-caption-container {
    overflow: hidden;
    white-space: nowrap;
    margin-left: 6px;
}

.vaadinsample .v-table-caption-container-align-right {
    float: right;
}

.vaadinsample .v-table-sort-indicator {
    width: 0px;
    height: 1.2em;
    float: right;
}

.vaadinsample .v-table-header-cell-asc .v-table-sort-indicator, .vaadinsample .v-table-header-cell-desc .v-table-sort-indicator {
    width: 16px;
    height: 1.2em;
    float: right;
}

.vaadinsample .v-table-header-cell-asc .v-table-sort-indicator {
    background: transparent url(../base/common/img/sprites.png) no-repeat right 6px;
}

.vaadinsample .v-table-header-cell-desc .v-table-sort-indicator {
    background: transparent url(../base/common/img/sprites.png) no-repeat right -10px;
}

.vaadinsample .v-table-caption-container-align-center {
    text-align: center;
}

.vaadinsample .v-table-caption-container-align-right {
    text-align: right;
}

.vaadinsample .v-table-caption-container .v-icon, .vaadinsample .v-table-header-drag .v-icon {
    vertical-align: middle;
}

.vaadinsample .v-table-body {
    border: 1px solid #aaa;
}

.vaadinsample .v-table-row-spacer {
    height: 10px;
    overflow: hidden;
}

.vaadinsample .v-table-row, .vaadinsample .v-table-row-odd {
    background: #fff;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.vaadinsample .v-table-generated-row {
    background: #efefef;
}

.vaadinsample .v-table-body-noselection .v-table-row, .vaadinsample .v-table-body-noselection .v-table-row-odd {
    cursor: default;
}

.vaadinsample .v-table .v-selected {
    background: #999;
    color: #fff;
}

.vaadinsample .v-table-cell-content {
    white-space: nowrap;
    overflow: hidden;
    padding: 0 6px;
    border-right: 1px solid #aaa;
}

.vaadinsample .v-table-cell-wrapper {
    white-space: nowrap;
    overflow: hidden;
}

.vaadinsample .v-table-cell-wrapper-align-center {
    text-align: center;
}

.vaadinsample .v-table-cell-wrapper-align-right {
    text-align: right;
}

.vaadinsample .v-table-column-selector {
    float: right;
    background: transparent url(../base/common/img/sprites.png) no-repeat 4px -37px;
    margin: -1.2em 0 0 0;
    height: 1.2em;
    width: 14px;
    position: relative;
    cursor: pointer;
}

.vaadinsample .v-table.v-disabled .v-table-column-selector {
    cursor: default;
}

.vaadinsample .v-table-focus-slot-left {
    border-left: 2px solid #999;
    float: none;
    margin-bottom: -1.2em;
    width: auto;
    background: transparent;
    border-right: 1px solid #aaa;
}

.vaadinsample .v-table-focus-slot-right {
    border-right: 2px solid #999;
    margin-left: -2px;
}

.vaadinsample .v-table-header-drag {
    position: absolute;
    background: #efefef;
    border: 1px solid #eee;
    opacity: 0.9;
    filter: alpha(opacity=90);
    margin-top: 20px;
    z-index: 30000;
}

.vaadinsample .v-table-header-drag .v-icon {
    vertical-align: middle;
}

.vaadinsample .v-table-scrollposition {
    width: 160px;
    background: #eee;
    border: 1px solid #aaa;
}

.vaadinsample .v-table-scrollposition span {
    display: block;
    text-align: center;
}

.vaadinsample .v-table-body:focus, .vaadinsample .v-table-body-wrapper:focus {
    outline: none;
}

.vaadinsample .v-table-body.focused {
    border-color: #388ddd;
}

.vaadinsample .v-table-focus .v-table-cell-content {
    border-top: 1px dotted #0066bd;
    border-bottom: 1px dotted #0066bd;
}

.vaadinsample .v-table-focus .v-table-cell-wrapper {
    margin-top: -1px;
    margin-bottom: -1px;
}

.vaadinsample .v-off {
    color: #ddd;
}

.vaadinsample .v-table-drag .v-table-body {
    border-color: #1d9dff;
}

.vaadinsample .v-table-row-drag-middle .v-table-cell-content {
    background-color: #bcdcff;
}

.vaadinsample .v-table-row-drag-top .v-table-cell-content {
    border-top: 2px solid #1d9dff;
}

.vaadinsample .v-table-row-drag-top .v-table-cell-wrapper {
    margin-top: -2px;
}

.vaadinsample .v-table-row-drag-bottom .v-table-cell-content {
    border-bottom: 2px solid #1d9dff;
}

.vaadinsample .v-table-row-drag-bottom .v-table-cell-wrapper {
    margin-bottom: -2px;
}

.vaadinsample .v-table-row-drag-top .v-table-cell-content:first-child:before,
.vaadinsample .v-table-row-drag-bottom .v-table-cell-content:first-child:after {
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    margin-left: -6px;
    background: transparent url(../base/common/img/drag-slot-dot.png);
}

.v-ff .vaadinsample .v-table-row-drag-bottom .v-table-cell-content:first-child:after,
.v-ie .vaadinsample .v-table-row-drag-bottom .v-table-cell-content:first-child:after {
    margin-top: -2px;
}

.vaadinsample .v-tabsheet, .vaadinsample .v-tabsheet-content, .vaadinsample .v-tabsheet-deco {
    outline: none;
    text-align: left;
}

.vaadinsample .v-tabsheet-tabs {
    empty-cells: hide;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    overflow: hidden;
}

.vaadinsample .v-tabsheet-tabitemcell:focus {
    outline: none;
}

.vaadinsample .v-tabsheet-tabitemcell, .vaadinsample .v-tabsheet-spacertd {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

.vaadinsample .v-tabsheet-spacertd {
    width: 100%;
}

.vaadinsample .v-tabsheet-spacertd div {
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    height: 1em;
    padding: 0.2em 0;
}

.vaadinsample .v-tabsheet-hidetabs > .v-tabsheet-tabcontainer {
    display: none;
}

.vaadinsample .v-tabsheet-scroller {
    white-space: nowrap;
    text-align: right;
    margin-top: -1em;
}

.vaadinsample .v-disabled .v-tabsheet-scroller {
    display: none;
}

.vaadinsample .v-tabsheet-scrollerPrev, .vaadinsample .v-tabsheet-scrollerNext,
.vaadinsample .v-tabsheet-scrollerPrev-disabled, .vaadinsample .v-tabsheet-scrollerNext-disabled {
    border: 1px solid #aaa;
    background: #fff;
    width: 12px;
    height: 1em;
    cursor: pointer;
}

.vaadinsample .v-tabsheet-scrollerPrev-disabled, .vaadinsample .v-tabsheet-scrollerNext-disabled {
    opacity: 0.5;
    cursor: default;
}

.vaadinsample .v-tabsheet-tabs .v-caption, .vaadinsample .v-tabsheet-tabs .v-caption span {
    white-space: nowrap;
}

.vaadinsample .v-tabsheet-caption-close {
    display: inline;
    display: inline-block;
    zoom: 1;
    width: 16px;
    height: 16px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.vaadinsample .v-tabsheet .v-disabled .v-tabsheet-caption-close {
    cursor: default;
    visibility: hidden;
}

.vaadinsample .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
    visibility: visible;
}

.vaadinsample .v-tabsheet-tabitem {
    border: 1px solid #aaa;
    border-right: none;
    cursor: pointer;
    padding: 0.2em 0.5em;
}

.vaadinsample .v-tabsheet-tabitem .v-caption {
    cursor: inherit;
}

.vaadinsample .v-tabsheet.v-disabled .v-tabsheet-tabitem, .vaadinsample .v-tabsheet-tabitemcell-disabled .v-tabsheet-tabitem {
    cursor: default;
}

.vaadinsample .v-tabsheet-tabitem-selected {
    cursor: default;
    border-bottom-color: #fff;
}

.vaadinsample .v-tabsheet-tabitem-selected .v-caption {
    cursor: default;
}

.vaadinsample .v-tabsheet-content {
    border: 1px solid #aaa;
    border-top: none;
    border-bottom: none;
    position: relative;
}

.vaadinsample .v-tabsheet-deco {
    height: 1px;
    background: #aaa;
    overflow: hidden;
}

.vaadinsample .v-tabsheet-hidetabs .v-tabsheet-content {
    border: none;
}

.vaadinsample .v-tabsheet-hidetabs .v-tabsheet-deco {
    height: 0;
}

.vaadinsample .v-textfield {
    text-align: left;
}

.vaadinsample .v-textarea {
    resize: none;
    white-space: pre-wrap;
}

.vaadinsample input.v-textfield-prompt, .vaadinsample textarea.v-textarea-prompt {
    color: #999;
    font-style: italic;
}

.vaadinsample input.v-textfield-readonly, .vaadinsample textarea.v-textarea-readonly {
    background: transparent;
    border: none;
    resize: none;
}

.vaadinsample input.v-disabled, .vaadinsample textarea.v-disabled {
    resize: none;
}

.vaadinsample input.v-textfield-readonly:focus, .vaadinsample textarea.v-textarea-readonly:focus {
    outline: none;
}

.v-sa .vaadinsample input:focus, .v-sa .vaadinsample textarea:focus {
    outline-width: medium;
}

.vaadinsample .v-richtextarea {
    border: 1px solid #aaa;
    overflow: hidden;
}

.vaadinsample .v-richtextarea .gwt-RichTextArea {
    background: #fff;
    border: none;
}

.vaadinsample .v-richtextarea .gwt-HTML {
    height: 100%;
    font-size: 14px;
}

.vaadinsample .v-richtextarea .gwt-RichTextToolbar {
    white-space: nowrap;
    background: #959595 url(../base/textfield/img/richtext-toolbar-bg.png) repeat-x 0 -42px;
    border-bottom: 1px solid #7d7d7d;
    padding: 2px;
    overflow: hidden;
}

.vaadinsample .v-richtextarea .gwt-RichTextToolbar-top {
    padding-bottom: 1px;
    overflow: hidden;
    white-space: normal;
}

.vaadinsample .v-richtextarea .gwt-RichTextToolbar-bottom {
    clear: left;
    overflow: hidden;
    white-space: nowrap;
}

.vaadinsample .v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
.vaadinsample .v-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
    float: left;
    display: inline;
    width: 22px;
    height: 21px;
    overflow: hidden;
    background: transparent url(../base/textfield/img/richtext-toolbar-bg.png) repeat-x;
    cursor: pointer;
    margin-right: 2px;
    text-align: center;
}

.vaadinsample .v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down,
.vaadinsample .v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down,
.vaadinsample .v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down-hovering,
.vaadinsample .v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down-hovering {
    background-position: 0 -21px;
}

.vaadinsample .v-richtextarea .gwt-RichTextToolbar .gwt-ListBox {
    width: 24.5%;
    margin-right: 2px;
}

.vaadinsample .v-richtextarea-readonly {
    border: none;
}

.vaadinsample .v-tree {
    text-align: left;
    padding: 1px 0;
    outline: none;
}

.vaadinsample .v-tree-node {
    background: transparent url(../base/common/img/sprites.png) no-repeat 5px -37px;
    padding: 1px 0;
}

.vaadinsample .v-tree-node-caption:focus {
    outline: none;
}

.vaadinsample div.v-tree-node-leaf {
    background: transparent;
}

.vaadinsample .v-tree-node-expanded {
    background: transparent url(../base/common/img/sprites.png) no-repeat -5px -10px;
}

.vaadinsample .v-tree-node-caption {
    margin-left: 1em;
}

.vaadinsample .v-tree-node span {
    cursor: pointer;
}

.vaadinsample .v-tree-node-caption div {
    white-space: nowrap;
}

.vaadinsample .v-tree-node-caption span, .vaadinsample .v-tree-node-caption .v-icon {
    vertical-align: middle;
}

.vaadinsample .v-tree-node-selected span {
    background: #999;
    color: #fff;
}

.vaadinsample .v-tree-node-children {
    padding-left: 1em;
}

.vaadinsample .v-tree .v-tree-node-drag-top {
    border-top: 2px solid #1d9dff;
    margin-top: -1px;
    padding-top: 0;
}

.vaadinsample .v-tree .v-tree-node-drag-bottom {
    border-bottom: 2px solid #1d9dff;
    margin-bottom: -1px;
    padding-bottom: 0;
}

.vaadinsample .v-tree .v-tree-node-drag-top:before, .vaadinsample .v-tree .v-tree-node-drag-bottom:after,
.vaadinsample .v-tree .v-tree-node-caption-drag-center:after {
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    background: transparent url(../base/common/img/drag-slot-dot.png);
}

.vaadinsample .v-tree .v-tree-node-drag-bottom:after {
    margin-top: -2px;
}

.vaadinsample .v-tree .v-tree-node-caption-drag-center:after {
    margin-left: 14px;
}

.v-ff .vaadinsample .v-tree .v-tree-node-caption-drag-center:after,
.v-ie .vaadinsample .v-tree .v-tree-node-caption-drag-center:after {
    margin-top: -2px;
}

.vaadinsample .v-tree .v-tree-node-drag-top {
    background-position: 5px -38px;
}

.vaadinsample .v-tree .v-tree-node-drag-top.v-tree-node-expanded {
    background-position: -5px -11px;
}

.vaadinsample .v-tree .v-tree-node-caption-drag-center div {
    border: 2px solid #1d9dff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin: -2px 2px -2px -2px;
    background-color: #bcdcff;
}

.vaadinsample .v-tree .v-tree-node-caption-drag-center div {
    background-color: rgba(169, 209, 255, 0.6);
}

.vaadinsample .v-tree .v-tree-node-caption-drag-center div, .vaadinsample .v-tree .v-tree-node-drag-top,
.vaadinsample .v-tree .v-tree-node-drag-bottom {
    border-color: rgba(0, 109, 232, 0.6);
}

.vaadinsample .v-tree-connectors .v-tree-node-caption {
    padding-top: 1px;
}

.vaadinsample .v-tree-connectors .v-tree-node {
    background: transparent url(../base/tree/img/connector-expand.png) no-repeat 2px -52px;
}

.vaadinsample .v-tree-connectors .v-tree-node-expanded {
    background: transparent url(../base/tree/img/connector-collapse.png) no-repeat 2px -52px;
}

.vaadinsample .v-tree-connectors .v-tree-node-last {
    background: transparent url(../base/tree/img/connector-expand-last.png) no-repeat 2px -52px;
}

.vaadinsample .v-tree-connectors .v-tree-node-expanded.v-tree-node-last {
    background: transparent url(../base/tree/img/connector-collapse-last.png) no-repeat 2px -52px;
}

.vaadinsample .v-tree-connectors .v-tree-node-leaf {
    background: transparent url(../base/tree/img/connector-leaf.png) repeat-y 2px 50%;
}

.vaadinsample .v-tree-connectors .v-tree-node-leaf-last {
    background: transparent url(../base/tree/img/connector-leaf-last.png) repeat-y 2px 50%;
}

.vaadinsample .v-tree-connectors .v-tree-node-children {
    background: transparent url(../base/tree/img/connector.png) repeat-y 2px 0;
}

.vaadinsample .v-tree-connectors .v-tree-node-children-last {
    background: transparent;
}

.vaadinsample .v-tree-connectors .v-tree-node-drag-top, .vaadinsample .v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top {
    background-position: 2px -53px;
}

.vaadinsample .v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
    background-position: 2px 50%;
}

.vaadinsample .v-treetable-treespacer {
    display: inline-block;
    background: transparent;
    height: 10px;
    width: 18px;
    position: absolute;
    left: 0;
    top: 5px;
}

.vaadinsample .v-treetable-node-closed {
    background: url(../base/treetable/img/arrow-right.png) right top no-repeat;
}

.vaadinsample .v-treetable-node-open {
    background: url(../base/treetable/img/arrow-down.png) right top no-repeat;
}

.vaadinsample .v-treetable .v-checkbox {
    display: inline-block;
    padding-bottom: 4px;
}

.vaadinsample .v-treetable .v-table-row .v-table-cell-content, .vaadinsample .v-treetable .v-table-row-odd .v-table-cell-content {
    position: relative;
    z-index: 10;
}

.vaadinsample .v-treetable .v-table-cell-wrapper {
    position: relative;
}

.vaadinsample .v-treetable .v-table-body .v-table-table .v-table-row-animating {
    zoom: 1;
    z-index: 1;
}

.vaadinsample .v-treetable .v-table-body .v-table-table .v-table-row-animating,
.vaadinsample .v-treetable .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content {
    background: transparent;
}

.vaadinsample .v-treetable-animation-clone {
    border-spacing: 0;
    zoom: 1;
}

.vaadinsample div.v-treetable-animation-clone-wrapper {
    position: absolute;
    z-index: 2;
    background-color: #fff;
}

.vaadinsample div.v-treetable-animation-clone-wrapper table.v-treetable-animation-clone {
    background-color: #fff;
}

.vaadinsample div table.v-treetable-animation-clone tr.v-table-row,
.vaadinsample div table.v-treetable-animation-clone tr.v-table-row-odd,
.vaadinsample div table.v-treetable-animation-clone tr.v-table-row td.v-table-cell-content,
.vaadinsample div table.v-treetable-animation-clone tr.v-table-row-odd td.v-table-cell-content {
    visibility: visible;
}

.vaadinsample .v-upload {
    white-space: nowrap;
}

.vaadinsample .v-upload-immediate {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.v-ff .vaadinsample .v-upload-immediate, .v-op .vaadinsample .v-upload-immediate {
    display: inline-block;
}

.vaadinsample .v-upload-immediate input {
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 2;
    position: absolute;
    right: 0;
    height: 21px;
    text-align: right;
    border: none;
    background: transparent;
}

.vaadinsample .v-upload-immediate button {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    text-align: left;
}

.vaadinsample .v-window {
    background: #fff;
}

.vaadinsample .v-window-contents {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-window.v-has-width > div.popupContent, .vaadinsample .v-window.v-has-width .v-window-wrap,
.vaadinsample .v-window.v-has-width .v-window-contents, .vaadinsample .v-window.v-has-width .v-window-contents > div {
    width: 100%;
}

.vaadinsample .v-window.v-has-height > div.popupContent, .vaadinsample .v-window.v-has-height .v-window-wrap,
.vaadinsample .v-window.v-has-height .v-window-contents, .vaadinsample .v-window.v-has-height .v-window-contents > div {
    height: 100%;
}

.vaadinsample .v-window-outerheader {
    padding: 0.3em 1em;
    height: 1.6em;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-window-outerheader, .vaadinsample .v-window-draggingCurtain {
    cursor: move;
}

.vaadinsample .v-window-header {
    font-weight: bold;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ie-user-select: none;
    user-select: none;
}

.vaadinsample div.v-window-header {
    white-space: nowrap;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    overflow: hidden;
    padding: 0;
}

.vaadinsample .v-window-header .v-icon {
    vertical-align: middle;
}

.vaadinsample .v-window-contents > div {
    outline: none;
}

.vaadinsample .v-window-footer {
    overflow: hidden;
    zoom: 1;
    height: 10px;
    position: relative;
    cursor: move;
}

.vaadinsample .v-window-resizebox {
    width: 10px;
    height: 10px;
    background: #ddd;
    overflow: hidden;
    position: absolute;
    right: 0;
}

.vaadinsample .v-window-resizebox, .vaadinsample .v-window-resizingCurtain {
    cursor: se-resize;
}

.vaadinsample .v-window div.v-window-footer-noresize {
    height: 0;
}

.vaadinsample .v-window-resizebox-disabled, .vaadinsample .v-window-restorebox-disabled,
.vaadinsample .v-window-maximizebox-disabled {
    cursor: default;
    display: none;
}

.vaadinsample .v-window-closebox, .vaadinsample .v-window-restorebox,
.vaadinsample .v-window-maximizebox {
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    height: 1em;
    cursor: pointer;
    overflow: hidden;
}

.vaadinsample .v-window-maximizebox, .vaadinsample .v-window-restorebox {
    right: 1.1em;
}

.vaadinsample .v-window-closebox {
    background: red;
}

.vaadinsample .v-window-maximizebox {
    background: blue;
}

.vaadinsample .v-window-restorebox {
    background: yellow;
}

.vaadinsample .v-window-modalitycurtain {
    top: 0;
    left: 0;
    background: #999;
    opacity: 0.5;
    position: fixed;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=50);
}

.vaadinsample .v-shadow-window {
    position: absolute;
}

.vaadinsample .v-shadow-window .top-left {
    position: absolute;
    overflow: hidden;
    top: -10px;
    left: -15px;
    width: 28px;
    height: 28px;
    background: transparent url(../base/window/img/shadow/top-left.png);
}

.vaadinsample .v-shadow-window .top {
    position: absolute;
    overflow: hidden;
    top: -10px;
    left: 13px;
    height: 28px;
    right: 13px;
    background: transparent url(../base/window/img/shadow/top.png);
}

.vaadinsample .v-shadow-window .top-right {
    position: absolute;
    overflow: hidden;
    top: -10px;
    right: -15px;
    width: 28px;
    height: 28px;
    background: transparent url(../base/window/img/shadow/top-right.png);
}

.vaadinsample .v-shadow-window .left {
    position: absolute;
    overflow: hidden;
    top: 18px;
    left: -15px;
    width: 28px;
    bottom: 10px;
    background: transparent url(../base/window/img/shadow/left.png);
}

.vaadinsample .v-shadow-window .center {
    position: absolute;
    overflow: hidden;
    top: 18px;
    left: 13px;
    bottom: 10px;
    right: 13px;
    background: transparent url(../base/window/img/shadow/center.png);
}

.vaadinsample .v-shadow-window .right {
    position: absolute;
    overflow: hidden;
    top: 18px;
    right: -15px;
    width: 28px;
    bottom: 10px;
    background: transparent url(../base/window/img/shadow/right.png);
}

.vaadinsample .v-shadow-window .bottom-left {
    position: absolute;
    overflow: hidden;
    bottom: -18px;
    left: -15px;
    width: 28px;
    height: 28px;
    background: transparent url(../base/window/img/shadow/bottom-left.png);
}

.vaadinsample .v-shadow-window .bottom {
    position: absolute;
    overflow: hidden;
    bottom: -18px;
    left: 13px;
    right: 13px;
    height: 28px;
    background: transparent url(../base/window/img/shadow/bottom.png);
}

.vaadinsample .v-shadow-window .bottom-right {
    position: absolute;
    overflow: hidden;
    bottom: -18px;
    right: -15px;
    width: 28px;
    height: 28px;
    background: transparent url(../base/window/img/shadow/bottom-right.png);
}

.vaadinsample .v-loading-indicator, .vaadinsample .v-loading-indicator-delay,
.vaadinsample .v-loading-indicator-wait {
    top: 50%;
    left: 50%;
    right: auto;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    margin-left: -22px;
    background: transparent url(img/spinner.png);
    -webkit-animation: spinner 1s steps(12, end) 0 infinite;
    -moz-animation-name: spinner;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: steps(12, end);
    -moz-animation-iteration-count: infinite;
    -o-animation-name: spinner;
    -o-animation-duration: 1s;
    -o-animation-timing-function: steps(12, end);
    -o-animation-iteration-count: infinite;
    -ms-animation: spinner 1s steps(12, end) 0 infinite;
}

.v-ie .vaadinsample .v-loading-indicator, .v-ie .vaadinsample .v-loading-indicator-delay,
.v-ie .vaadinsample .v-loading-indicator-wait, .v-op .vaadinsample .v-loading-indicator,
.v-op .vaadinsample .v-loading-indicator-delay, .v-op .vaadinsample .v-loading-indicator-wait {
    background-image: url(img/spinner.gif);
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.vaadinsample .v-widget {
    color: inherit;
    font: inherit;
    font-size: 14px;
}

.vaadinsample.v-app, .vaadinsample .v-drag-element, .vaadinsample .v-contextmenu,
.vaadinsample .v-menubar-popup, .vaadinsample .v-filterselect-suggestpopup,
.vaadinsample .v-datefield-popup, .vaadinsample .v-popupview-popup, .vaadinsample .v-Notification,
.vaadinsample .v-window, .vaadinsample .v-tooltip {
    color: #5a6066;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.vaadinsample .v-spacing {
    height: 12px;
    width: 12px;
}

.vaadinsample .v-caption .v-captiontext {
    overflow: visible;
}

.vaadinsample .v-caption {
    font-size: 13px;
    color: #6c737a;
}

.vaadinsample .v-caption-on-top .v-caption {
    padding-bottom: 0.3em;
}

.vaadinsample .v-drag-element {
    opacity: 0.7;
    cursor: move;
}

.vaadinsample .v-drag-element * {
    cursor: move !important;
}

.vaadinsample .v-drag-element.v-widget {
    border: 2px solid #2d90f3;
    background: #fff;
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    max-width: 50%;
    max-height: 50%;
}

.vaadinsample .v-icon, .vaadinsample .v-embbedded img {
    -ms-interpolation-mode: bicubic;
}

.vaadinsample .v-contextmenu, .vaadinsample .v-menubar-popup, .vaadinsample .v-filterselect-suggestpopup,
.vaadinsample .v-datefield-popup, .vaadinsample .v-popupview-popup, .vaadinsample .v-tooltip,
.vaadinsample .v-window.dialog, .vaadinsample .v-Notification-tray {
    background: #343638;
    background: rgba(52, 54, 56, 0.92);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    padding: 4px;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;
    border: none;
    min-width: 10em;
    -webkit-animation: fade-in 160ms ease-out;
    -moz-animation: fade-in 160ms ease-out;
    -ms-animation: fade-in 160ms ease-out;
    -o-animation: fade-in 160ms ease-out;
    animation: fade-in 160ms ease-out;
    opacity: 1;
}

.vaadinsample .v-tooltip, .vaadinsample .v-window.dialog {
    min-width: 0;
}

.vaadinsample .v-tooltip {
    font-size: 12px;
    padding: 0 4px;
}

.vaadinsample .v-contextmenu table, .vaadinsample .v-filterselect-suggestpopup table,
.vaadinsample .v-menubar-submenu {
    width: 100%;
    background: transparent;
}

.vaadinsample .v-filterselect-suggestpopup table {
    width: auto;
}

.vaadinsample .v-contextmenu, .vaadinsample .v-menubar-popup, .vaadinsample .v-filterselect-suggestpopup-small {
    font-size: 13px;
}

.vaadinsample .v-contextmenu .gwt-MenuItem, .vaadinsample .v-menubar-popup .v-menubar-menuitem,
.vaadinsample .v-filterselect-suggestpopup .gwt-MenuItem {
    padding: 0.1em 0.6em;
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
}

.vaadinsample .v-contextmenu .gwt-MenuItem-selected, .vaadinsample .v-menubar-popup .v-menubar-menuitem-selected,
.vaadinsample .v-filterselect-suggestpopup .gwt-MenuItem-selected {
    text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
    background: #6ba7e4;
    background: -moz-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #75b0e7), color-stop(100%, #5f9de1));
    background: -webkit-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
    background: -o-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
    background: -ms-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
}

.vaadinsample .v-contextmenu .gwt-MenuItem-selected div {
    background: transparent;
}

.vaadinsample .v-contextmenu .v-off div:before {
    opacity: 0.3;
}

.vaadinsample .v-contextmenu .v-off div:before, .vaadinsample .v-contextmenu .v-on div:before {
    display: inline;
    content: "\2713";
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    margin-right: 0.5em;
}

.vaadinsample .v-contextmenu .v-off {
    color: #fff;
}

.vaadinsample .v-contextmenu .gwt-MenuItem-selected .v-off {
    opacity: 1;
}

.vaadinsample .v-shadow {
    display: none;
}

.v-ie8 .vaadinsample .v-shadow {
    display: block;
}

.vaadinsample .v-menubar-separator span {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.vaadinsample .v-button {
    color: #5a6066;
    padding: 0.3em 1.4em;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.75);
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
    border: 0.1em solid #b3b4b5;
    border-top-color: #d4d4d6;
    border-bottom-color: #989b9c;
    -webkit-box-shadow: 0 0 0 2px rgba(49, 50, 51, 0.07);
    -moz-box-shadow: 0 0 0 2px rgba(49, 50, 51, 0.07);
    box-shadow: 0 0 0 2px rgba(49, 50, 51, 0.07);
    background: #f2f2f3;
    background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 5%, #eaebec 94%, #e2e3e4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(5%, #fafafa), color-stop(94%, #eaebec), color-stop(100%, #e2e3e4));
    background: -webkit-linear-gradient(top, #ffffff 0%, #fafafa 5%, #eaebec 94%, #e2e3e4 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #fafafa 5%, #eaebec 94%, #e2e3e4 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #fafafa 5%, #eaebec 94%, #e2e3e4 100%);
}

.v-webkit .vaadinsample .v-button {
    padding-bottom: 0.35em;
}

.vaadinsample .v-has-height.v-button:before {
    display: inline-block;
    content: "";
    vertical-align: middle;
    height: 100%;
    width: 0;
}

.vaadinsample .v-button:focus {
    outline: none;
    border-color: #69a5e4;
}

.vaadinsample .v-button:active, .vaadinsample .v-pressed.v-button {
    border-color: #9fa0a2;
    border-top-color: #b1b1b3;
    border-bottom-color: #bfc0c1;
    background: #e2e4e4;
    background: -moz-linear-gradient(top, #cecfd0 0%, #e7e8e9 5%, #dcdee0 94%, #e4e5e6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cecfd0), color-stop(5%, #e7e8e9), color-stop(94%, #dcdee0), color-stop(100%, #e4e5e6));
    background: -webkit-linear-gradient(top, #cecfd0 0%, #e7e8e9 5%, #dcdee0 94%, #e4e5e6 100%);
    background: -o-linear-gradient(top, #cecfd0 0%, #e7e8e9 5%, #dcdee0 94%, #e4e5e6 100%);
    background: -ms-linear-gradient(top, #cecfd0 0%, #e7e8e9 5%, #dcdee0 94%, #e4e5e6 100%);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    x_padding: 0;
}

.vaadinsample .wide.v-button {
    padding-left: 1.8em;
    padding-right: 1.8em;
}

.vaadinsample .default.v-button {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    border-color: #216ec6;
    border-top-color: #2875ce;
    border-bottom-color: #37679d;
    background: #499bea;
    background: -moz-linear-gradient(top, #4fa8f7 0%, #499bea 6%, #207ce5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4fa8f7), color-stop(6%, #499bea), color-stop(100%, #207ce5));
    background: -webkit-linear-gradient(top, #4fa8f7 0%, #499bea 6%, #207ce5 100%);
    background: -o-linear-gradient(top, #4fa8f7 0%, #499bea 6%, #207ce5 100%);
    background: -ms-linear-gradient(top, #4fa8f7 0%, #499bea 6%, #207ce5 100%);
}

.vaadinsample .default.v-button:focus {
    xborder-color: #207ce5;
    -webkit-box-shadow: 0 0 4px #207ce5;
    -moz-box-shadow: 0 0 4px #207ce5;
    box-shadow: 0 0 4px #207ce5;
}

.vaadinsample .default.v-button:active, .vaadinsample .v-pressed.v-button.default {
    border-color: #1c64b1;
    border-top-color: #346d9f;
    border-bottom-color: #3c81be;
    background: #3d80bf;
    background: -moz-linear-gradient(top, #3d80bf 0%, #408ac9 6%, #1a6abf 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3d80bf), color-stop(8%, #408ac9), color-stop(100%, #1a6abf));
    background: -webkit-linear-gradient(top, #3d80bf 0%, #408ac9 6%, #1a6abf 100%);
    background: -o-linear-gradient(top, #3d80bf 0%, #408ac9 6%, #1a6abf 100%);
    background: -ms-linear-gradient(top, #3d80bf 0%, #408ac9 6%, #1a6abf 100%);
    -webkit-box-shadow: 0 0 0 2px rgba(49, 50, 51, 0.07);
    -moz-box-shadow: 0 0 0 2px rgba(49, 50, 51, 0.07);
    box-shadow: 0 0 0 2px rgba(49, 50, 51, 0.07);
}

.vaadinsample .small.v-button {
    padding: 0.1em 1.2em;
    font-size: 13px;
}

.vaadinsample .link.v-button, .vaadinsample .link.v-button:active, .vaadinsample .link.v-pressed.v-button,
.vaadinsample .link.v-button:focus {
    background: transparent;
    border: none;
    font-weight: inherit;
    color: #349aff;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0;
    x_padding: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: inherit;
}

.vaadinsample .icon-only.v-button {
    padding-left: 0.8em;
    padding-right: 0.8em;
}

.vaadinsample .icon-only.v-button .v-button-wrap:before {
    margin: 0;
}

.vaadinsample .icon-only.v-button .v-button-caption {
    display: none;
}

.vaadinsample .borderless.v-button {
    border: none !important;
    background: transparent !important;
    -webkit-box-shadow: none;
    -mox-box-shadow: none;
    box-shadow: none;
}

.vaadinsample .v-filterselect {
    position: relative;
}

.vaadinsample .v-filterselect-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0 1.5em 0 0;
    margin: 0;
    font-size: inherit;
    width: 100% !important;
}

.vaadinsample .v-filterselect-input:focus {
    outline: none;
}

.vaadinsample .v-filterselect-button {
    position: absolute;
    right: 1.5em;
    width: 0;
    height: 0;
    border: 1px solid;
    border-width: 0.5em 0.45em;
    border-color: #646E77 transparent transparent;
    top: 0.8em;
    background: transparent;
}

.vaadinsample .v-filterselect-suggestpopup {
    margin-top: 0.4em !important;
}

.vaadinsample .v-filterselect-suggestmenu tr {
    line-height: inherit;
}

.vaadinsample .v-filterselect-prevpage-off, .vaadinsample .v-filterselect-prevpage,
.vaadinsample .v-filterselect-nextpage-off, .vaadinsample .v-filterselect-nextpage {
    background: transparent;
}

.vaadinsample .v-filterselect-prevpage-off, .vaadinsample .v-filterselect-prevpage {
    padding-bottom: 5px;
}

.vaadinsample .v-filterselect-nextpage-off, .vaadinsample .v-filterselect-nextpage {
    padding-top: 5px;
}

.vaadinsample .v-filterselect-prevpage-off span, .vaadinsample .v-filterselect-prevpage span,
.vaadinsample .v-filterselect-nextpage-off span, .vaadinsample .v-filterselect-nextpage span {
    width: 0;
    height: 0;
    border: 1px solid;
    border-width: 0.5em 0.45em;
    border-color: transparent transparent #aaa;
    overflow: hidden;
    display: inline-block;
}

.vaadinsample .v-filterselect-nextpage-off span, .vaadinsample .v-filterselect-nextpage span {
    border-color: #aaa transparent transparent;
}

.vaadinsample .v-filterselect-prevpage:hover span {
    border-bottom-color: #fff;
}

.vaadinsample .v-filterselect-nextpage:hover span {
    border-top-color: #fff;
}

.vaadinsample .v-filterselect-status {
    color: #999;
    font-size: 13px;
}

.vaadinsample .v-label {
    overflow: visible;
}

.vaadinsample .v-label.heading {
    font-size: 36px;
    line-height: 1;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.05em;
    color: #fff;
}

.vaadinsample .v-label.h1 {
    font-size: 36px;
    line-height: 1;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.05em;
}

.vaadinsample .v-label.h2 {
    color: #404346;
    font-size: 22px;
    line-height: 1;
    font-weight: normal;
    padding: 0.5em 0;
    -webkit-font-smoothing: antialiased;
}

.vaadinsample .v-label.light {
    color: #979699;
}

.vaadinsample .v-label.h4 {
    font-weight: bold;
    text-transform: uppercase;
    color: #349aff;
}

.vaadinsample .v-Notification {
    background: #000000;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(45, 45, 45, 0.45) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.45)), color-stop(100%, rgba(45, 45, 45, 0.45)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(45, 45, 45, 0.45) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(45, 45, 45, 0.45) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.45) 0%, rgba(45, 45, 45, 0.45) 100%);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-size: 18px;
    line-height: 1.4;
    font-weight: normal;
    padding: 1em 2em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.vaadinsample .v-Notification h1 {
    font-size: inherit;
    color: #fff;
    font-weight: normal;
}

.vaadinsample .v-Notification h1, .vaadinsample .v-Notification p {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

.vaadinsample .v-Notification h1 + p {
    margin-left: 2em;
    color: #d5d5d5;
    max-width: 28em;
}

.vaadinsample .v-Notification-system {
    background: -webkit-linear-gradient(bottom, rgba(76, 76, 76, 0) 0%, rgba(76, 76, 76, 0.9) 60%, rgba(76, 76, 76, 1) 95%, rgba(52, 52, 52, 1) 100%);
    width: 100%;
    max-width: 100%;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    font-size: 14px;
    text-align: center;
    padding-bottom: 3em;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-animation: pull-down 300ms ease-in-out;
    -moz-animation: pull-down 300ms ease-in-out;
    -ms-animation: pull-down 300ms ease-in-out;
    -o-animation: pull-down 300ms ease-in-out;
    animation: pull-down 300ms ease-in-out;
}

.vaadinsample .v-Notification-system h1 {
    display: inline-block;
    font-size: 14px;
    margin-right: 3em;
    vertical-align: top;
    line-height: 1;
    margin-bottom: 1em;
    color: #fff;
}

.vaadinsample .v-Notification-system p {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    line-height: 1.3;
    color: #ececec;
}

.vaadinsample .v-Notification-tray {
    font-size: 14px;
    line-height: 18px;
    margin: 0 14px 14px 0;
}

.vaadinsample .v-Notification-tray h1, .vaadinsample .v-Notification-tray p {
    display: block;
    margin: 0;
}

.vaadinsample .v-Notification-tray h1 {
    font-weight: bold;
}

.vaadinsample .v-Notification-tray h1 + p {
    margin: 0.8em 0 0;
}

.vaadinsample .v-table-header-wrap, .vaadinsample .v-table-footer-wrap {
    border: 0.1em solid #d4d5d5;
    background: #f4f4f4;
    background: -moz-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f0f0f0));
    background: -webkit-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
    background: -o-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
    background: -ms-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
}

.vaadinsample .v-table-header-wrap {
    border-bottom: none;
}

.vaadinsample .v-table-footer-wrap {
    border-top: none;
}

.vaadinsample .v-table-footer td {
    border: none;
    border-left: 0.1em solid #e5e8e8;
}

.vaadinsample .v-table-footer td:first-child {
    border: none;
}

.vaadinsample .v-table-footer-container {
    padding: 0.1em 0 0.1em 6px;
    float: none;
    font-size: 13px;
    color: #979699;
    text-shadow: 0 0.1em rgba(255, 255, 255, 0.7);
}

.vaadinsample .v-table-footer td:first-child .v-table-footer-container {
    padding-left: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-table-footer td:last-child .v-table-footer-container {
    padding-right: 6px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-table-caption-container {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 0.1em rgba(255, 255, 255, 0.7);
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-left: 6px;
    margin-left: 0;
    border-left: 1px solid #e5e8e8;
}

.vaadinsample .v-table-caption-container-align-right {
    float: none;
}

.vaadinsample .v-table-header td:first-child .v-table-caption-container {
    border-left-color: transparent;
    margin-left: 8px;
    padding-left: 4px;
}

.vaadinsample .v-table-header td:last-child .v-table-caption-container {
    padding-right: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-table-resizer {
    font-size: 13px;
    height: 1.8em;
    background: transparent;
    width: 4px;
}

.vaadinsample .v-table-cell-wrapper {
    font-size: 14px;
}

.vaadinsample .v-table-cell-content {
    border: none;
    border-left: 1px solid #e5e8e8;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.vaadinsample .v-table-cell-content:first-child {
    border-left-color: transparent;
}

.vaadinsample .v-table-cell-content:first-child .v-table-cell-wrapper {
    padding-left: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-table-cell-content:last-child .v-table-cell-wrapper {
    padding-right: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vaadinsample .v-table-body {
    border: 0.1em solid #d4d5d5;
}

.vaadinsample .v-table-row-odd {
    background-color: #f3f4f5;
}

.vaadinsample .v-table .v-selected {
    text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
    background: #6ba7e4;
    background: -moz-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #75b0e7), color-stop(100%, #5f9de1));
    background: -webkit-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
    background: -o-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
    background: -ms-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
}

.vaadinsample .v-table .v-selected + .v-selected {
    background: #5f9de1;
}

.vaadinsample .v-table .v-selected .v-table-cell-content {
    border-left-color: transparent;
}

.vaadinsample .v-table-header-cell-asc .v-table-sort-indicator, .vaadinsample .v-table-header-cell-desc .v-table-sort-indicator {
    background: transparent;
    width: 0.5em;
    height: 1.8em;
    font-size: 13px;
    line-height: 2;
    text-shadow: 0 0.1em rgba(255, 255, 255, 0.7);
}

.vaadinsample .v-table-header-cell-asc .v-table-sort-indicator:before,
.vaadinsample .v-table-header-cell-desc .v-table-sort-indicator:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
}

.vaadinsample .v-table-header-cell-asc .v-table-sort-indicator:before {
    content: "\25b4";
}

.vaadinsample .v-table-header-cell-desc .v-table-sort-indicator:before {
    content: "\25be";
}

.vaadinsample .v-table.borderless .v-table-header-wrap, .vaadinsample .v-table.borderless .v-table-body {
    border: none;
}

.vaadinsample .v-table.borderless .v-table-header-wrap {
    border-bottom: 1px solid #d4d5d5;
}

.vaadinsample .v-table.borderless .v-table-footer-wrap {
    border-top: 1px solid #d4d5d5;
}

.vaadinsample .v-table.plain .v-table-header-wrap {
    background: transparent;
    border: none;
}

.vaadinsample .v-table.plain .v-table-caption-container {
    padding-top: 0.4em;
    padding-bottom: 0.8em;
}

.vaadinsample .v-table.plain .v-table-row, .vaadinsample .v-table.plain .v-table-row-odd {
    background: transparent;
}

.vaadinsample .v-table.plain .v-table-cell-content {
    border-left-color: transparent;
    border-bottom: 1px solid #eee;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.vaadinsample .v-table.plain .v-table-caption-container {
    border-left-color: transparent;
}

.vaadinsample .v-tabsheet {
    border: 1px solid #d3d6d6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.vaadinsample .v-tabsheet-tabcontainer, .vaadinsample .v-tabsheet-content {
    border: none;
}

.vaadinsample .v-tabsheet-tabcontainer {
    height: auto !important;
}

.vaadinsample .v-tabsheet-deco {
    height: 0;
}

.vaadinsample .v-tabsheet-tabcontainer {
    background: #e6e7e8;
    background: -moz-linear-gradient(top, #f5f5f5 0%, #e6e6e7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e6e6e7));
    background: -webkit-linear-gradient(top, #f5f5f5 0%, #e6e6e7 100%);
    background: -o-linear-gradient(top, #f5f5f5 0%, #e6e6e7 100%);
    background: -ms-linear-gradient(top, #f5f5f5 0%, #e6e6e7 100%);
}

.vaadinsample .v-tabsheet-tabs {
    border-collapse: separate;
    border-spacing: 0;
}

.vaadinsample .v-tabsheet-tabitemcell {
    color: #979699;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 1;
    border: 1px solid #d3d6d6;
    border-width: 0 1px 1px 0;
    border-bottom-color: #cfd1d1;
}

.vaadinsample .v-tabsheet-tabitem {
    padding: 0;
}

.vaadinsample .v-tabsheet-tabitem .v-caption {
    padding: 10px 1.3em;
}

.vaadinsample .v-tabsheet-tabitemcell-selected .v-caption {
    padding-bottom: 11px;
}

.vaadinsample .v-tabsheet-tabitemcell-selected {
    background: #fff;
    color: #404346;
    border-bottom-width: 0;
}

.vaadinsample .v-tabsheet-tabitemcell .v-caption {
    color: inherit;
}

.vaadinsample .v-tabsheet-tabitemcell .v-captiontext {
    vertical-align: baseline;
}

.vaadinsample .v-tabsheet-tabitem {
    border: none;
}

.vaadinsample .v-tabsheet-spacertd div {
    border: none;
    font-size: 13px;
    line-height: 1;
    height: 1.4em;
    border-bottom: 0.1em solid #cfd1d1;
}

.vaadinsample .v-tabsheet-content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1em;
    z-index: 10;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.vaadinsample .v-tabsheet-borderless {
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.vaadinsample .v-tabsheet-caption-close {
    margin: -2px 0 0 5px;
    font-size: 16px;
    font-weight: normal;
    color: #db5020;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.vaadinsample .v-tabsheet-caption-close:hover {
    background: #e7e7e7;
}

.vaadinsample .v-tabsheet-caption-close:active {
    background: #999;
    color: #fff;
}

.vaadinsample .v-tabsheet-tabs-small .v-tabsheet-tabitem .v-caption {
    padding: 0.5em 1.2em;
    font-size: 12px;
}

.vaadinsample .v-tabsheet-content-small::before {
    display: none;
}

.vaadinsample .v-textfield, .vaadinsample .v-filterselect {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #c9c8c7;
    border-top-color: #d8d7d6;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(51, 50, 49, 0.07);
    font: inherit;
    color: inherit;
    line-height: 1;
    margin: 0;
}

.vaadinsample input.v-widget.v-textfield, .vaadinsample .v-filterselect {
    padding: 0.25em 0.3em;
}

.v-webkit .vaadinsample input.v-textfield, .v-webkit .vaadinsample .v-filterselect {
    padding-bottom: 0.3em;
}

.vaadinsample .v-textfield:focus, .vaadinsample .v-filterselect-focus {
    outline: none;
    border-color: #69a5e4;
}

.vaadinsample input.v-textfield-prompt, .vaadinsample .v-filterselect-prompt .v-filterselect-input {
    font-style: normal;
}

.vaadinsample input.v-widget.v-textfield.small, .vaadinsample .v-filterselect.small {
    padding: 0.15em 0.2em;
    font-size: 12px;
}

.v-webkit .vaadinsample input.v-textfield.small, .v-webkit .vaadinsample .v-filterselect.small {
    padding-bottom: 0.2em;
}

.vaadinsample .v-window {
    -webkit-animation: fade-in 160ms ease-out;
    -moz-animation: fade-in 160ms ease-out;
    -ms-animation: fade-in 160ms ease-out;
    -o-animation: fade-in 160ms ease-out;
    animation: fade-in 160ms ease-out;
    opacity: 1;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.vaadinsample .v-shadow-window {
    display: none;
}

.v-ie8 .vaadinsample .v-shadow-window {
    display: block;
}

.vaadinsample .v-window-closebox:before {
    font-family: arial, sans-serif;
    content: "\00D7";
}

.vaadinsample .v-window-closebox {
    background: #343638;
    color: #ddd;
    font-size: 16px;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    top: 10px;
    right: 10px;
}

.vaadinsample .v-window-closebox:hover {
    color: #fff;
}

.vaadinsample .v-window-closebox:active {
    color: #ddd;
    background: #000;
}

.vaadinsample .v-window-modalitycurtain {
    opacity: 0.7;
    filter: alpha(opacity=70);
    background: #353637;
    background: -moz-radial-gradient(center, ellipse cover, #4c4d4e 0%, #1b1c1c 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4c4d4e), color-stop(100%, #1b1c1c));
    background: -webkit-radial-gradient(center, ellipse cover, #4c4d4e 0%, #1b1c1c 100%);
    background: -o-radial-gradient(center, ellipse cover, #4c4d4e 0%, #1b1c1c 100%);
    background: -ms-radial-gradient(center, ellipse cover, #4c4d4e 0%, #1b1c1c 100%);
}

.vaadinsample .v-window-outerheader {
    padding: 0.5em 20px;
    height: 1.7em;
    font-weight: 300;
    font-size: 20px;
}

.vaadinsample .v-window-header {
    font-weight: inherit;
}

.vaadinsample .dialog.v-window {
    color: #a6a9aa;
    font-size: 13px;
}

.vaadinsample .dialog.v-window .v-window-header {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

.vaadinsample .v-window .footer {
    background: #eee;
    border-top: 1px solid #e0e0e0;
}

.vaadinsample .schedule {
    position: relative;
}

.vaadinsample .cover {
    text-align: center;
}

.vaadinsample .cover .v-image {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    -webkit-user-drag: none;
}

.vaadinsample .catalog .v-csslayout {
    display: inline-block;
    position: relative;
    vertical-align: top;
    cursor: pointer;
}

.vaadinsample .catalog .v-image {
    width: 100px;
    height: 145px;
    position: absolute;
    top: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    overflow: hidden;
}

.vaadinsample .catalog .v-csslayout:hover .v-image {
    border-color: #69a5e4;
}

.vaadinsample .catalog .v-csslayout:hover .v-caption {
    color: #000;
}

.vaadinsample .catalog .v-csslayout:before, .vaadinsample .cover:before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    right: 32px;
    width: 66px;
    height: 128px;
    background: url(img/poster-gloss.png);
    z-index: 2;
}

.vaadinsample .cover:before {
    top: 0;
    right: 0;
    z-index: 2;
}

.vaadinsample .catalog .v-csslayout .v-caption {
    position: relative;
    padding-top: 160px;
    width: 120px;
    white-space: normal;
    font-size: 12px;
    padding-right: 1em;
    padding-bottom: 1em;
    cursor: pointer;
}

.vaadinsample .catalog.v-layout {
    padding: 20px 0 100px 30px;
    background: #eee;
}

.vaadinsample .schedule .tray {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border-top: 1px solid #cdcecf;
    background: #dfe0e1;
    background: -moz-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d8d9da), color-stop(10%, #e6e7e8), color-stop(100%, #e0e1e2));
    background: -webkit-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
    background: -o-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
    background: -ms-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
}

.vaadinsample .v-calendar-weekly-longevents {
    display: none;
}

.vaadinsample .schedule .v-calendar-time, .vaadinsample .schedule .v-calendar-header-week,
.vaadinsample .schedule .v-calendar-day-times, .vaadinsample .schedule .v-calendar-day-times .v-datecellslot-even {
    border-color: transparent;
}

.vaadinsample .schedule .v-calendar-day-times .v-datecellslot {
    border-color: #efefef;
}

.vaadinsample .schedule .v-calendar-event {
    overflow: visible;
}

.vaadinsample .schedule .v-calendar-event-content {
    margin-left: 10px;
}

.vaadinsample .schedule .v-calendar-event-caption {
    left: 14px;
    right: 0;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.vaadinsample .schedule .v-calendar-event-caption span {
    color: #979699;
}

.vaadinsample .schedule .v-calendar-current-time {
    width: 100% !important;
}

.vaadinsample .schedule .v-calendar-time {
    color: #979699;
}

.vaadinsample .schedule .v-calendar-header-day {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #349aff;
    -webkit-font-smoothing: antialiased;
}

.vaadinsample .schedule .v-calendar-event-content {
    background-repeat: repeat-x, no-repeat;
    background-size: auto, cover;
    border: 1px solid #000;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.vaadinsample .timeline .h1 {
    padding: 0.6em 0 0.3em;
}

.vaadinsample .v-timeline:focus {
    outline: none;
}

.vaadinsample .timeline .toolbar, .vaadinsample .timeline .h1 {
    padding-left: 20px;
}

.vaadinsample .timeline .v-timeline-widget-modelegend {
    background: transparent;
}

.vaadinsample .timeline .v-timeline-widget-display .gwt-HTML {
    left: 0 !important;
    width: 100%;
    text-align: center;
    top: 40% !important;
    margin-top: -0.5em;
}

.vaadinsample .timeline .v-timeline-widget-display-bottombar {
    background: transparent;
}

.vaadinsample .timeline .v-timeline-widget-legend-value {
    font-size: 12px;
    line-height: 16px;
    color: #979699;
    height: 18px !important;
}

.vaadinsample .timeline .v-timeline-widget-legend-label {
    font-size: 13px;
}

.vaadinsample .help-overlay.timeline-add {
    left: 500px !important;
    top: 100px !important;
    max-width: 20em;
}

.vaadinsample .help-overlay.timeline-clear {
    top: 100px !important;
    left: auto !important;
    right: 80px !important;
}

.vaadinsample .help-overlay.timeline-browse {
    top: auto !important;
    bottom: 80px;
}

.vaadinsample .reports .drafts {
    padding-bottom: 100px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.vaadinsample .reports .drafts .v-slot {
    padding: 0 10px;
}

.vaadinsample .reports .create {
    padding: 10px 0;
}

.vaadinsample .reports .create .v-slot {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    width: 160px;
    height: 200px;
    padding: 0;
}

.vaadinsample .reports .drafts .h1 {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    margin-bottom: 20px;
}

.vaadinsample .reports .draft-thumb {
    cursor: pointer;
    overflow: visible;
    height: 216px;
    position: relative;
    padding: 10px;
}

.vaadinsample .reports .draft-thumb .v-label {
    display: block !important;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    padding-top: 1em;
    text-align: center;
    line-height: 18px;
}

.vaadinsample .reports .draft-thumb .v-label span {
    color: #c1c3c8;
    font-size: 12px;
}

.vaadinsample .reports .draft-thumb .v-image {
    -webkit-box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.5);
}

.vaadinsample .reports .draft-thumb .v-image:hover {
    border: 2px solid #5198df;
    margin: -2px;
}

.vaadinsample .reports .palette {
    position: fixed;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    padding: 14px;
    width: 17%;
}

.vaadinsample .reports .palette .help {
    font-size: 12px;
    color: #cfd1d3;
    display: block;
    white-space: normal;
    padding-top: 1em;
    width: 140px;
}

.vaadinsample .reports .palette .v-caption {
    display: none;
}

.vaadinsample .reports .palette .v-ddwrapper {
    display: block;
    text-align: center;
}

.vaadinsample .reports .palette .v-image {
    width: 75px;
    height: 47px;
    margin: 2em 0 0.3em 0;
}

.vaadinsample .reports .palette .v-label {
    display: block !important;
}

.vaadinsample .canvas {
    padding: 2em !important;
}

.vaadinsample .canvas-layout {
    min-height: 29cm;
    background: #fff;
    padding: 1.5cm 1.5cm 3cm 1.5cm;
    -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.vaadinsample .reports .canvas .title {
    font-size: 24px;
    font-weight: 600;
    border: 1px solid transparent;
    color: #404346;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1cm;
}

.vaadinsample .reports .canvas .title:hover {
    background: #fff9e6;
}

.vaadinsample .reports .canvas .title:focus {
    cursor: text;
    border-color: #eee;
    background: transparent;
}

.vaadinsample .reports .canvas .placeholder {
    text-align: center;
}

.vaadinsample .reports .canvas .placeholder .v-label {
    min-height: 10cm;
    line-height: 5cm;
    color: #979699;
    font-size: 18px;
}

.vaadinsample .reports .v-tabsheet-content::before {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    height: 0.5em;
}

.vaadinsample .reports .v-tabsheet-content {
    background: #75787c;
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), url(img/dark-canvas-bg.jpg);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0))), url(img/dark-canvas-bg.jpg);
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), url(img/dark-canvas-bg.jpg);
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), url(img/dark-canvas-bg.jpg);
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), url(img/dark-canvas-bg.jpg);
}

.vaadinsample .reports .v-timeline-widget-display-hscale-left {
    font-size: 10px;
    margin-top: -14px;
    padding-left: 3px;
}

.vaadinsample .reports .canvas .v-ddwrapper {
    padding-top: 20px;
    padding-bottom: 20px;
}

.vaadinsample .reports .text-editor {
    position: relative;
    overflow: visible;
}

.vaadinsample .reports .text-editor:hover {
    background: #fff9e6;
}

.vaadinsample .reports .text-editor.edit:hover {
    background: transparent;
}

.vaadinsample .text-editor .v-button {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: -20px;
    display: none;
}

.vaadinsample .text-editor .v-button-wrap:before {
    margin: 0 -0.3em;
}

.vaadinsample .text-editor:hover .v-button {
    display: inline-block;
}

.vaadinsample .reports .text-editor.edit .v-button {
    display: inline-block;
    position: static;
    margin-top: 3px;
}

.vaadinsample .delete-button {
    width: 19px;
    height: 19px;
    border: 1px solid #a3a7ab;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #73767a;
    color: #fff;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    text-align: center;
    cursor: default;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.vaadinsample .delete-button:hover {
    background: #4e5153;
}

.vaadinsample .delete-button:focus {
    outline: none;
}

.vaadinsample .delete-button:active {
    background: #3c3f40;
}

.vaadinsample .draft-thumb .delete-button {
    position: absolute;
    top: 1px;
    right: 1px;
    display: none;
}

.vaadinsample .draft-thumb:hover .delete-button {
    display: block;
}

.vaadinsample .help-overlay.palette {
    top: 200px !important;
    left: 200px !important;
}

.vaadinsample .help-overlay.reorder {
    margin-left: 200px !important;
}

.vaadinsample .reports .transaction {
    position: relative;
    float: left;
    width: 47%;
    margin-right: 2.5%;
    margin-top: 10px;
    background: #eee;
    border: 1px solid #e0e0e0;
}

.vaadinsample .reports .transaction .time, .vaadinsample .reports .transaction .seats {
    font-size: 12px;
    color: #9fa2a6;
    position: absolute;
    top: 5px;
    left: 5px;
    line-height: normal;
}

.vaadinsample .reports .transaction .movie-title {
    font-size: 16px;
    font-weight: 300;
    white-space: normal;
    padding: 40px 5px 5px;
}

.vaadinsample .reports .transaction .seats {
    left: 60%;
}

.vaadinsample .transactions .h1 {
    padding: 10px 1em 0.5em 8px;
}

.vaadinsample .transactions .borderless .v-table-header-wrap {
    border-top: 1px solid #d4d5d5;
}

.vaadinsample .v-view {
    overflow: hidden;
}

.vaadinsample.v-app {
    background: #353637;
}

.vaadinsample.v-app[id*="overlays"] {
    height: 0;
}

.vaadinsample .login-bg {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #353637;
    background: -moz-radial-gradient(center, ellipse cover, #4c4d4e 0%, #303131 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4c4d4e), color-stop(100%, #303131));
    background: -webkit-radial-gradient(center, ellipse cover, #4c4d4e 0%, #303131 100%);
    background: -o-radial-gradient(center, ellipse cover, #4c4d4e 0%, #303131 100%);
    background: -ms-radial-gradient(center, ellipse cover, #4c4d4e 0%, #303131 100%);
    opacity: 0;
    -webkit-transition: opacity 300ms linear;
    -moz-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
    -webkit-animation: fade-in 160ms ease-out;
    -moz-animation: fade-in 160ms ease-out;
    -ms-animation: fade-in 160ms ease-out;
    -o-animation: fade-in 160ms ease-out;
    animation: fade-in 160ms ease-out;
    opacity: 1;
}

.vaadinsample .main-view, .vaadinsample .login-layout {
    position: relative;
    z-index: 2;
}

.vaadinsample div.login-panel {
    -webkit-animation: move-up-100 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-animation: move-up-100 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-animation: move-up-100 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vaadinsample .login-panel {
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    padding: 1em 1em 2em;
}

.vaadinsample .login-panel .labels, .vaadinsample .login-panel .fields {
    display: block;
}

.vaadinsample .login-panel .v-textfield {
    width: 150px;
}

.vaadinsample .login-panel .h2 {
    padding: 0;
    font-size: 20px;
    color: #c4cacf;
    letter-spacing: -0.05em;
}

.vaadinsample .login-panel .error {
    font-size: 13px;
    height: 20px;
    padding-left: 14px;
}

.vaadinsample .v-animate-reveal {
    opacity: 1;
    -webkit-animation: reveal 100ms ease-in-out;
    -moz-animation: reveal 100ms ease-in-out;
    -o-animation: reveal 100ms ease-in-out;
}

.vaadinsample .v-animate-hide {
    opacity: 0;
    z-index: 0;
    -webkit-animation: hide 300ms ease-in-out;
    -moz-animation: hide 300ms ease-in-out;
    -o-animation: hide 300ms ease-in-out;
}

.vaadinsample .login .login-bg {
    opacity: 1;
}

.vaadinsample .sidebar {
    background: #414243 url(img/sidebar-gradient.png) repeat-y top right;
    position: relative;
    left: 0;
    -webkit-animation: move-right 300ms ease-in-out;
    -moz-animation: move-right 700ms ease-out;
    -o-animation: move-right 500ms ease-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.vaadinsample .sidebar .branding {
    border-bottom: 1px solid #353637;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

.vaadinsample .sidebar .branding .v-label {
    position: relative;
    z-index: 2;
    white-space: normal;
    font-size: 16px;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    display: block !important;
    padding: 0.8em 0.8em 1.2em;
}

.vaadinsample .sidebar .branding .v-label span {
    font-size: 13px;
    color: #d0d1d3;
    display: block;
}

.vaadinsample .sidebar .branding .v-image {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
}

.vaadinsample .sidebar .menu {
    overflow: auto;
    height: 100%;
}

.vaadinsample .sidebar .menu .v-ddwrapper {
    padding: 2px;
}

.vaadinsample .sidebar .menu .v-ddwrapper .v-nativebutton {
    margin: -2px -2px;
}

.vaadinsample .sidebar .menu .v-ddwrapper-over {
    padding: 0;
    border: 2px solid #2d90f3;
    background: transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.vaadinsample .sidebar .menu .v-nativebutton {
    -webkit-appearance: none;
    display: block;
    padding: 10px 14px 10px;
    width: 100%;
    border: none;
    margin: 0;
    position: relative;
    border-top: 1px solid #4b4c4d;
    border-top-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid #353637;
    border-bottom-color: rgba(0, 0, 0, 0.18);
    background: transparent;
    color: #888a8c;
    font-weight: normal;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    text-align: center;
}

.vaadinsample .sidebar .menu:after {
    content: "";
    display: block;
    border-top: 1px solid #4b4c4d;
    border-top-color: rgba(255, 255, 255, 0.05);
    height: 0;
}

.vaadinsample .sidebar .menu .v-nativebutton-caption {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin: 0.2em 0 0 0;
}

.vaadinsample .sidebar .menu .v-nativebutton:focus {
    outline: none;
}

.vaadinsample .sidebar .menu .v-nativebutton:hover, .vaadinsample .sidebar .menu .v-nativebutton:focus {
    color: #e1e1e1;
}

.vaadinsample .sidebar .menu .v-nativebutton:before {
    font-size: 24px;
    line-height: 1;
    margin: 0;
}

.v-webkit .vaadinsample .menu .v-nativebutton:before {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e8e8), color-stop(100%, #d3d3d3));
    background: -webkit-linear-gradient(top, #fff 0%, #777 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    opacity: 0.5;
    -webkit-transition: opacity ease-in-out 200ms;
    -moz-transition: opacity ease-in-out 200ms;
    -ms-transition: opacity ease-in-out 200ms;
    -o-transition: opacity ease-in-out 200ms;
    transition: opacity ease-in-out 200ms;
}

.v-webkit .vaadinsample .menu .v-nativebutton:hover:before, .v-webkit .vaadinsample .menu .v-nativebutton:focus:before {
    opacity: 1;
}

.vaadinsample .sidebar .menu .v-nativebutton:active {
    background: rgba(0, 0, 0, 0.1);
}

.vaadinsample .sidebar .menu .v-nativebutton.selected {
    color: #e1e1e1;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    border-top-color: #262729;
    border-bottom-color: #2b2c2e;
    background: #333537;
    background: -moz-linear-gradient(top, #2d2f30 0%, #333537 10%, #333537 90%, #2d2f30 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d2f30), color-stop(10%, #333537), color-stop(90%, #333537), color-stop(100%, #2d2f30));
    background: -webkit-linear-gradient(top, #2d2f30 0%, #333537 10%, #333537 90%, #2d2f30 100%);
    background: -o-linear-gradient(top, #2d2f30 0%, #333537 10%, #333537 90%, #2d2f30 100%);
    background: -ms-linear-gradient(top, #2d2f30 0%, #333537 10%, #333537 90%, #2d2f30 100%);
    -webkit-transition: none;
}

.v-webkit .vaadinsample .menu .v-nativebutton.selected:before {
    text-shadow: none;
    opacity: 1;
}

.vaadinsample .badge, .vaadinsample .notifications .v-button-caption {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    padding: 0.1em 0.4em 0.2em;
    background: #f16433;
    background: -moz-linear-gradient(top, #faa290 0%, #f77b62 14%, #ec3120 87%, #ce2314 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #faa290), color-stop(14%, #f77b62), color-stop(87%, #ec3120), color-stop(100%, #ce2314));
    background: -webkit-linear-gradient(top, #faa290 0%, #f77b62 14%, #ec3120 87%, #ce2314 100%);
    background: -o-linear-gradient(top, #faa290 0%, #f77b62 14%, #ec3120 87%, #ce2314 100%);
    background: -ms-linear-gradient(top, #faa290 0%, #f77b62 14%, #ec3120 87%, #ce2314 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.vaadinsample .menu .v-nativebutton .badge {
    position: absolute;
    top: 6px;
    right: 8px;
}

.vaadinsample .sidebar .user {
    display: block;
    border-top: 1px solid #303132;
    background: #3b3c3d;
    background-color: rgba(0, 0, 0, 0.1);
    color: #898c8e;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.vaadinsample .sidebar .user > .v-slot {
    display: inline-block;
    width: 50%;
}

.vaadinsample .sidebar .user > .v-slot:first-child {
    width: 34px;
}

.vaadinsample .sidebar .user .v-image {
    width: 34px;
    height: 34px;
    border-right: 1px solid #313132;
}

.vaadinsample .sidebar .user .v-label {
    white-space: normal;
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    max-width: 50px;
    overflow: visible;
    padding: 2px 8px;
    height: 34px;
    color: inherit;
    -webkit-font-smoothing: antialiased;
}

.vaadinsample .sidebar .user .v-nativebutton, .vaadinsample .sidebar .user .v-menubar {
    -webkit-appearance: none;
    border: none;
    border-top: 1px solid #303132;
    background: transparent;
    width: 100%;
    padding: 0;
    color: inherit;
}

.vaadinsample .sidebar .user .v-nativebutton:focus {
    outline: none;
}

.vaadinsample .sidebar .user .v-nativebutton:hover, .vaadinsample .sidebar .user .v-menubar-menuitem:hover {
    color: #e1e1e1;
}

.vaadinsample .sidebar .user .v-nativebutton-caption {
    display: none;
}

.vaadinsample .sidebar .user .v-nativebutton:before, .vaadinsample .sidebar .user .v-menubar-menuitem:before {
    font-size: 16px;
    margin: 0;
    display: block;
    border-top: 1px solid #434445;
    padding: 0.3em 0 0.4em;
}

.vaadinsample .sidebar .user .v-menubar-menuitem {
    border-right: 1px solid #434445;
    display: block !important;
    cursor: pointer;
}

.vaadinsample .sidebar .user .icon-cancel {
    border-left: 1px solid #303132;
}

.vaadinsample .layout-panel {
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.07);
}

.v-ie8 .vaadinsample .layout-panel {
    border: 1px solid #d8d9d9;
}

.vaadinsample .layout-panel .v-caption {
	border-bottom: 1px solid #d8d9d9;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #6c737a;
	color: #fff;
}

.vaadinsample .layout-panel .v-slot {
	padding: 10px;
}

.vaadinsample .main-view {
    -webkit-animation: fade-in 160ms ease-out;
    -moz-animation: fade-in 160ms ease-out;
    -ms-animation: fade-in 160ms ease-out;
    -o-animation: fade-in 160ms ease-out;
    animation: fade-in 160ms ease-out;
    opacity: 1;
}

.vaadinsample .view-content {
    overflow: visible;
}

.vaadinsample .main-view {
    background: #fff;
}

.vaadinsample .help-overlay {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    padding: 15px 20px;
    background: #464646;
    background-color: rgba(40, 40, 40, 0.85);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    color: #a6a9aa;
    font-size: 12px;
    -webkit-animation: fade-in 160ms ease-out;
    -moz-animation: fade-in 160ms ease-out;
    -ms-animation: fade-in 160ms ease-out;
    -o-animation: fade-in 160ms ease-out;
    animation: fade-in 160ms ease-out;
    opacity: 1;
    opacity: 0;
    -webkit-animation-duration: 1500ms;
    -moz-animation-duration: 1500ms;
    -ms-animation-duration: 1500ms;
    -o-animation-duration: 1500ms;
    animation-duration: 1500ms;
    -webkit-animation-delay: 2000ms;
    -moz-animation-delay: 2000ms;
    -ms-animation-delay: 2000ms;
    -o-animation-delay: 2000ms;
    animation-delay: 2000ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    max-width: 50em;
}

.vaadinsample .help-overlay .v-window-outerheader {
    padding: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.vaadinsample .help-overlay .v-window-header {
    font-weight: normal;
    overflow: visible;
}

.vaadinsample .help-overlay .v-window-footer {
    height: 0;
}

.vaadinsample .help-overlay .v-label p {
    margin: 7px 0 0 0;
}

.vaadinsample .help-overlay a {
    color: #a6a9aa;
    text-decoration: underline;
}

.vaadinsample .help-overlay.login {
    top: auto !important;
    bottom: 20px;
}

.vaadinsample .vaadinsample-view .v-horizontallayout {
    padding: 0 20px 20px;
}

.vaadinsample .vaadinsample-view .v-spacing {
    width: 20px;
    height: 20px;
}

.vaadinsample .vaadinsample-view .toolbar .v-spacing {
    width: 10px;
}

.vaadinsample .vaadinsample-view .v-csslayout {
    padding: 50px 20px 0;
    overflow: auto;
    position: relative;
}

.vaadinsample .vaadinsample-view .v-caption {
    font-weight: 600;
    font-size: 13px;
    color: #349aff;
    text-transform: uppercase;
    padding: 0 20px;
    line-height: 38px;
    border-bottom: 1px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.vaadinsample .vaadinsample-view .configure {
    position: absolute;
    z-index: 1;
    top: 9px;
    right: 5px;
}

.vaadinsample .vaadinsample-view .notes {
    padding: 40px 0 0;
}

.vaadinsample .vaadinsample-view .notes .v-caption {
    color: #fff;
    text-shadow: 0 1px 1px #000;
    background: #5d6167;
    background: -moz-linear-gradient(top, #5d6167 0%, #393939 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5d6167), color-stop(100%, #393939));
    background: -webkit-linear-gradient(top, #5d6167 0%, #393939 100%);
    background: -o-linear-gradient(top, #5d6167 0%, #393939 100%);
    background: -ms-linear-gradient(top, #5d6167 0%, #393939 100%);
}

.vaadinsample .vaadinsample-view .notes .v-textarea {
    border: none;
    padding: 20px 20px 0;
    line-height: 20px;
    background: #fffdf2 url(img/notes-bg.png) repeat;
    color: #545145;
}

.vaadinsample .vaadinsample-view .notes .v-textarea:focus {
    outline: none;
}

.vaadinsample .vaadinsample-view .notes .configure {
    color: #ddd;
    text-shadow: 0 1px 1px #000;
}

.vaadinsample .vaadinsample-view .toolbar {
    padding: 20px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    background: transparent;
}

.vaadinsample .vaadinsample-view .toolbar .v-button {
    position: relative;
    font-size: 16px;
}

.vaadinsample .vaadinsample-view .toolbar .notifications.unread .v-button-caption {
    display: block;
    position: absolute;
    top: 2px;
    right: 3px;
}

.vaadinsample .vaadinsample-view .h1 {
    padding-right: 1em;
}

.vaadinsample .vaadinsample-view {
    background: #dfe0e1;
    background: -moz-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d8d9da), color-stop(10%, #e6e7e8), color-stop(100%, #e0e1e2));
    background: -webkit-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
    background: -o-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
    background: -ms-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
}

.vaadinsample .notifications.v-window {
    margin-top: 45px !important;
    margin-left: -193px !important;
    font-size: 13px;
}

.vaadinsample .notifications.v-window .v-widget {
    font-size: 13px;
}

.vaadinsample .notifications.v-window::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 80px;
    border: 7px solid #fff;
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-left: -7px;
}

.vaadinsample .notifications.v-window .v-window-outerheader {
    font-size: 16px;
    color: #f16433;
    line-height: 25px;
    padding-left: 14px;
}

.vaadinsample .notifications.v-window .v-label span {
    font-size: 12px;
    color: #979699;
}

.vaadinsample .notifications.v-window .v-label hr {
    height: 0;
    border: none;
    border-top: 1px solid #ddd;
    margin: 0 -12px 12px;
}

.vaadinsample .v-formlayout-captioncell {
    vertical-align: top;
}

.vaadinsample .edit-dashboard .v-formlayout {
    padding: 10px 8px;
}

.vaadinsample .edit-dashboard .v-formlayout .v-formlayout-captioncell {
    vertical-align: middle;
}