/*
Normalize
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
Do not change this file. If you want to modify a rule froem this file, please add this in _base.scss or create a new file.
Styleguide 1.0
*/
/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Remove default margin.
*/
body {
margin: 0; }
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block; }
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none; }
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold; }
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000; }
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0; }
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden; }
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px; }
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0; }
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto; }
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em; }
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */ }
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal; }
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
/* 2 */
box-sizing: content-box; }
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto; }
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold; }
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
td,
th {
padding: 0; }
/*! jQuery UI - v1.11.4 - 2015-10-01
* http://jqueryui.com
* Includes: core.css, draggable.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, menu.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=%23cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=%23aaaaaa&fcHeader=%23222222&iconColorHeader=%23222222&bgColorContent=%23ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=%23ececec&fcContent=%23222222&iconColorContent=%23222222&bgColorDefault=%23007dcc&bgTextureDefault=flat&bgImgOpacityDefault=75&borderColorDefault=%23007dcc&fcDefault=%23fff&iconColorDefault=%23fff&bgColorHover=%2326abff&bgTextureHover=flat&bgImgOpacityHover=75&borderColorHover=%2326abff&fcHover=%23fff&iconColorHover=%23fff&bgColorActive=%2326abff&bgTextureActive=flat&bgImgOpacityActive=65&borderColorActive=%2326abff&fcActive=%23fff&iconColorActive=%23fff&bgColorHighlight=%23fcefa1&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=%23fcefa1&fcHighlight=%23363636&iconColorHighlight=%23007dcc&bgColorError=%23cd0a0a&bgTextureError=flat&bgImgOpacityError=95&borderColorError=%23cd0a0a&fcError=%23fff&iconColorError=%23fff&bgColorOverlay=%23aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=%23aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none; }
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none; }
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse; }
.ui-helper-clearfix:after {
clear: both; }
.ui-helper-clearfix {
min-height: 0;
/* support: IE7 */ }
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter: Alpha(Opacity=0);
/* support: IE8 */ }
.ui-front {
z-index: 100; }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.ui-draggable-handle {
-ms-touch-action: none;
touch-action: none; }
.ui-resizable {
position: relative; }
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none; }
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none; }
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0; }
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0; }
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%; }
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%; }
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px; }
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px; }
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px; }
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px; }
.ui-selectable {
-ms-touch-action: none;
touch-action: none; }
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black; }
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none; }
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
min-height: 0;
/* support: IE7 */
font-size: 100%; }
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em; }
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px; }
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto; }
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default; }
.ui-button {
display: inline-block;
position: relative;
padding: 0;
line-height: normal;
margin-right: .1em;
cursor: pointer;
vertical-align: middle;
text-align: center;
overflow: visible;
/* removes extra width in IE */ }
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
text-decoration: none; }
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
width: 2.2em; }
/* button elements seem to need a little more width */
button.ui-button-icon-only {
width: 2.4em; }
.ui-button-icons-only {
width: 3.4em; }
button.ui-button-icons-only {
width: 3.7em; }
/* button text element */
.ui-button .ui-button-text {
display: block;
line-height: normal; }
.ui-button-text-only .ui-button-text {
padding: .4em 1em; }
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
padding: .4em;
text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text {
padding-left: 2.1em;
padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button {
padding: .4em 1em; }
/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px; }
.ui-button-icon-only .ui-icon {
left: 50%;
margin-left: -8px; }
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
left: .5em; }
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
right: .5em; }
/* button sets */
.ui-buttonset {
margin-right: 7px; }
.ui-buttonset .ui-button {
margin-left: 0;
margin-right: -.3em; }
/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
border: 0;
padding: 0; }
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none; }
.ui-datepicker .ui-datepicker-header {
position: relative;
padding: .2em 0; }
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
top: 1px; }
.ui-datepicker .ui-datepicker-prev {
left: 2px; }
.ui-datepicker .ui-datepicker-next {
right: 2px; }
.ui-datepicker .ui-datepicker-prev-hover {
left: 1px; }
.ui-datepicker .ui-datepicker-next-hover {
right: 1px; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px; }
.ui-datepicker .ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center; }
.ui-datepicker .ui-datepicker-title select {
font-size: 1em;
margin: 1px 0; }
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width: 45%; }
.ui-datepicker table {
width: 100%;
font-size: .9em;
border-collapse: collapse;
margin: 0 0 .4em; }
.ui-datepicker th {
padding: .7em .3em;
text-align: center;
font-weight: bold;
border: 0; }
.ui-datepicker td {
border: 0;
padding: 1px; }
.ui-datepicker td span,
.ui-datepicker td a {
display: block;
padding: .2em;
text-align: right;
text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
margin: .7em 0 0 0;
padding: 0 .2em;
border-left: 0;
border-right: 0;
border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: .5em .2em .4em;
cursor: pointer;
padding: .2em .6em .3em .6em;
width: auto;
overflow: visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
float: left; }
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
width: auto; }
.ui-datepicker-multi .ui-datepicker-group {
float: left; }
.ui-datepicker-multi .ui-datepicker-group table {
width: 95%;
margin: 0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%; }
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
border-left-width: 0; }
.ui-datepicker-multi .ui-datepicker-buttonpane {
clear: left; }
.ui-datepicker-row-break {
clear: both;
width: 100%;
font-size: 0; }
/* RTL support */
.ui-datepicker-rtl {
direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev {
right: 2px;
left: auto; }
.ui-datepicker-rtl .ui-datepicker-next {
left: 2px;
right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover {
right: 1px;
left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover {
left: 1px;
right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane {
clear: right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
float: right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px; }
.ui-dialog {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
padding: .2em;
outline: 0; }
.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative; }
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis; }
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 20px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px; }
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto; }
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: .5em;
padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right; }
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer; }
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px; }
.ui-draggable .ui-dialog-titlebar {
cursor: move; }
.ui-menu {
list-style: none;
padding: 0;
margin: 0;
display: block;
outline: none; }
.ui-menu .ui-menu {
position: absolute; }
.ui-menu .ui-menu-item {
position: relative;
margin: 0;
padding: 3px 1em 3px .4em;
cursor: pointer;
min-height: 0;
/* support: IE7 */
/* support: IE10, see #8844 */
list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); }
.ui-menu .ui-menu-divider {
margin: 5px 0;
height: 0;
font-size: 0;
line-height: 0;
border-width: 1px 0 0 0; }
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
margin: -1px; }
/* icon support */
.ui-menu-icons {
position: relative; }
.ui-menu-icons .ui-menu-item {
padding-left: 2em; }
/* left-aligned */
.ui-menu .ui-icon {
position: absolute;
top: 0;
bottom: 0;
left: .2em;
margin: auto 0; }
/* right-aligned */
.ui-menu .ui-menu-icon {
left: auto;
right: 0; }
.ui-progressbar {
height: 2em;
text-align: left;
overflow: hidden; }
.ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%; }
.ui-progressbar .ui-progressbar-overlay {
background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
height: 100%;
filter: alpha(opacity=25);
/* support: IE8 */
opacity: 0.25; }
.ui-progressbar-indeterminate .ui-progressbar-value {
background-image: none; }
.ui-selectmenu-menu {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
display: none; }
.ui-selectmenu-menu .ui-menu {
overflow: auto;
/* Support: IE7 */
overflow-x: hidden;
padding-bottom: 1px; }
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
font-size: 1em;
font-weight: bold;
line-height: 1.5;
padding: 2px 0.4em;
margin: 0.5em 0 0 0;
height: auto;
border: 0; }
.ui-selectmenu-open {
display: block; }
.ui-selectmenu-button {
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
cursor: pointer; }
.ui-selectmenu-button span.ui-icon {
right: 0.5em;
left: auto;
margin-top: -8px;
position: absolute;
top: 50%; }
.ui-selectmenu-button span.ui-selectmenu-text {
text-align: left;
padding: 0.4em 2.1em 0.4em 1em;
display: block;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.ui-slider {
position: relative;
text-align: left; }
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
-ms-touch-action: none;
touch-action: none; }
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0; }
/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
-webkit-filter: inherit;
filter: inherit; }
.ui-slider-horizontal {
height: .8em; }
.ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%; }
.ui-slider-horizontal .ui-slider-range-min {
left: 0; }
.ui-slider-horizontal .ui-slider-range-max {
right: 0; }
.ui-slider-vertical {
width: .8em;
height: 100px; }
.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%; }
.ui-slider-vertical .ui-slider-range-min {
bottom: 0; }
.ui-slider-vertical .ui-slider-range-max {
top: 0; }
.ui-spinner {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
vertical-align: middle; }
.ui-spinner-input {
border: none;
background: none;
color: inherit;
padding: 0;
margin: .2em 0;
vertical-align: middle;
margin-left: .4em;
margin-right: 22px; }
.ui-spinner-button {
width: 16px;
height: 50%;
font-size: .5em;
padding: 0;
margin: 0;
text-align: center;
position: absolute;
cursor: default;
display: block;
overflow: hidden;
right: 0; }
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
border-top: none;
border-bottom: none;
border-right: none; }
/* vertically center icon */
.ui-spinner .ui-icon {
position: absolute;
margin-top: -8px;
top: 50%;
left: 0; }
.ui-spinner-up {
top: 0; }
.ui-spinner-down {
bottom: 0; }
/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
/* need to fix icons sprite */
background-position: -65px -16px; }
.ui-tabs {
position: relative;
/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em; }
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: .5em 1em;
text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor: text; }
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
cursor: pointer; }
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none; }
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
box-shadow: 0 0 5px #aaa; }
body .ui-tooltip {
border-width: 2px; }
/* Component containers
----------------------------------*/
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em; }
.ui-widget .ui-widget {
font-size: 1em; }
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: Verdana,Arial,sans-serif;
font-size: 1em; }
.ui-widget-content {
border: 1px solid #ececec;
background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
color: #222222; }
.ui-widget-content a {
color: #222222; }
.ui-widget-header {
border: 1px solid #aaaaaa;
background: #cccccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
color: #222222;
font-weight: bold; }
.ui-widget-header a {
color: #222222; }
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #007dcc;
background: #007dcc url("images/ui-bg_flat_75_007dcc_40x100.png") 50% 50% repeat-x;
font-weight: normal;
color: #fff; }
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
color: #fff;
text-decoration: none; }
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #26abff;
background: #26abff url("images/ui-bg_flat_75_26abff_40x100.png") 50% 50% repeat-x;
font-weight: normal;
color: #fff; }
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
color: #fff;
text-decoration: none; }
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #26abff;
background: #26abff url("images/ui-bg_flat_65_26abff_40x100.png") 50% 50% repeat-x;
font-weight: normal;
color: #fff; }
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
color: #fff;
text-decoration: none; }
/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #fcefa1;
background: #fcefa1 url("images/ui-bg_glass_55_fcefa1_1x400.png") 50% 50% repeat-x;
color: #363636; }
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: #363636; }
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
border: 1px solid #cd0a0a;
background: #cd0a0a url("images/ui-bg_flat_95_cd0a0a_40x100.png") 50% 50% repeat-x;
color: #fff; }
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
color: #fff; }
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
color: #fff; }
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
font-weight: bold; }
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
opacity: .7;
filter: Alpha(Opacity=70);
/* support: IE8 */
font-weight: normal; }
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
opacity: .35;
filter: Alpha(Opacity=35);
/* support: IE8 */
background-image: none; }
.ui-state-disabled .ui-icon {
filter: Alpha(Opacity=35);
/* support: IE8 - See #6059 */ }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px; }
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url("images/ui-icons_222222_256x240.png"); }
.ui-widget-header .ui-icon {
background-image: url("images/ui-icons_222222_256x240.png"); }
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_fff_256x240.png"); }
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: url("images/ui-icons_fff_256x240.png"); }
.ui-state-active .ui-icon {
background-image: url("images/ui-icons_fff_256x240.png"); }
.ui-state-highlight .ui-icon {
background-image: url("images/ui-icons_007dcc_256x240.png"); }
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url("images/ui-icons_fff_256x240.png"); }
/* positioning */
.ui-icon-blank {
background-position: 16px 16px; }
.ui-icon-carat-1-n {
background-position: 0 0; }
.ui-icon-carat-1-ne {
background-position: -16px 0; }
.ui-icon-carat-1-e {
background-position: -32px 0; }
.ui-icon-carat-1-se {
background-position: -48px 0; }
.ui-icon-carat-1-s {
background-position: -64px 0; }
.ui-icon-carat-1-sw {
background-position: -80px 0; }
.ui-icon-carat-1-w {
background-position: -96px 0; }
.ui-icon-carat-1-nw {
background-position: -112px 0; }
.ui-icon-carat-2-n-s {
background-position: -128px 0; }
.ui-icon-carat-2-e-w {
background-position: -144px 0; }
.ui-icon-triangle-1-n {
background-position: 0 -16px; }
.ui-icon-triangle-1-ne {
background-position: -16px -16px; }
.ui-icon-triangle-1-e {
background-position: -32px -16px; }
.ui-icon-triangle-1-se {
background-position: -48px -16px; }
.ui-icon-triangle-1-s {
background-position: -64px -16px; }
.ui-icon-triangle-1-sw {
background-position: -80px -16px; }
.ui-icon-triangle-1-w {
background-position: -96px -16px; }
.ui-icon-triangle-1-nw {
background-position: -112px -16px; }
.ui-icon-triangle-2-n-s {
background-position: -128px -16px; }
.ui-icon-triangle-2-e-w {
background-position: -144px -16px; }
.ui-icon-arrow-1-n {
background-position: 0 -32px; }
.ui-icon-arrow-1-ne {
background-position: -16px -32px; }
.ui-icon-arrow-1-e {
background-position: -32px -32px; }
.ui-icon-arrow-1-se {
background-position: -48px -32px; }
.ui-icon-arrow-1-s {
background-position: -64px -32px; }
.ui-icon-arrow-1-sw {
background-position: -80px -32px; }
.ui-icon-arrow-1-w {
background-position: -96px -32px; }
.ui-icon-arrow-1-nw {
background-position: -112px -32px; }
.ui-icon-arrow-2-n-s {
background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw {
background-position: -144px -32px; }
.ui-icon-arrow-2-e-w {
background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw {
background-position: -176px -32px; }
.ui-icon-arrowstop-1-n {
background-position: -192px -32px; }
.ui-icon-arrowstop-1-e {
background-position: -208px -32px; }
.ui-icon-arrowstop-1-s {
background-position: -224px -32px; }
.ui-icon-arrowstop-1-w {
background-position: -240px -32px; }
.ui-icon-arrowthick-1-n {
background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne {
background-position: -16px -48px; }
.ui-icon-arrowthick-1-e {
background-position: -32px -48px; }
.ui-icon-arrowthick-1-se {
background-position: -48px -48px; }
.ui-icon-arrowthick-1-s {
background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw {
background-position: -80px -48px; }
.ui-icon-arrowthick-1-w {
background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw {
background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s {
background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw {
background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w {
background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw {
background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n {
background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e {
background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s {
background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w {
background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w {
background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n {
background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e {
background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s {
background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w {
background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n {
background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e {
background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s {
background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w {
background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n {
background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e {
background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s {
background-position: -176px -64px; }
.ui-icon-arrow-4 {
background-position: 0 -80px; }
.ui-icon-arrow-4-diag {
background-position: -16px -80px; }
.ui-icon-extlink {
background-position: -32px -80px; }
.ui-icon-newwin {
background-position: -48px -80px; }
.ui-icon-refresh {
background-position: -64px -80px; }
.ui-icon-shuffle {
background-position: -80px -80px; }
.ui-icon-transfer-e-w {
background-position: -96px -80px; }
.ui-icon-transferthick-e-w {
background-position: -112px -80px; }
.ui-icon-folder-collapsed {
background-position: 0 -96px; }
.ui-icon-folder-open {
background-position: -16px -96px; }
.ui-icon-document {
background-position: -32px -96px; }
.ui-icon-document-b {
background-position: -48px -96px; }
.ui-icon-note {
background-position: -64px -96px; }
.ui-icon-mail-closed {
background-position: -80px -96px; }
.ui-icon-mail-open {
background-position: -96px -96px; }
.ui-icon-suitcase {
background-position: -112px -96px; }
.ui-icon-comment {
background-position: -128px -96px; }
.ui-icon-person {
background-position: -144px -96px; }
.ui-icon-print {
background-position: -160px -96px; }
.ui-icon-trash {
background-position: -176px -96px; }
.ui-icon-locked {
background-position: -192px -96px; }
.ui-icon-unlocked {
background-position: -208px -96px; }
.ui-icon-bookmark {
background-position: -224px -96px; }
.ui-icon-tag {
background-position: -240px -96px; }
.ui-icon-home {
background-position: 0 -112px; }
.ui-icon-flag {
background-position: -16px -112px; }
.ui-icon-calendar {
background-position: -32px -112px; }
.ui-icon-cart {
background-position: -48px -112px; }
.ui-icon-pencil {
background-position: -64px -112px; }
.ui-icon-clock {
background-position: -80px -112px; }
.ui-icon-disk {
background-position: -96px -112px; }
.ui-icon-calculator {
background-position: -112px -112px; }
.ui-icon-zoomin {
background-position: -128px -112px; }
.ui-icon-zoomout {
background-position: -144px -112px; }
.ui-icon-search {
background-position: -160px -112px; }
.ui-icon-wrench {
background-position: -176px -112px; }
.ui-icon-gear {
background-position: -192px -112px; }
.ui-icon-heart {
background-position: -208px -112px; }
.ui-icon-star {
background-position: -224px -112px; }
.ui-icon-link {
background-position: -240px -112px; }
.ui-icon-cancel {
background-position: 0 -128px; }
.ui-icon-plus {
background-position: -16px -128px; }
.ui-icon-plusthick {
background-position: -32px -128px; }
.ui-icon-minus {
background-position: -48px -128px; }
.ui-icon-minusthick {
background-position: -64px -128px; }
.ui-icon-close {
background-position: -80px -128px; }
.ui-icon-closethick {
background-position: -96px -128px; }
.ui-icon-key {
background-position: -112px -128px; }
.ui-icon-lightbulb {
background-position: -128px -128px; }
.ui-icon-scissors {
background-position: -144px -128px; }
.ui-icon-clipboard {
background-position: -160px -128px; }
.ui-icon-copy {
background-position: -176px -128px; }
.ui-icon-contact {
background-position: -192px -128px; }
.ui-icon-image {
background-position: -208px -128px; }
.ui-icon-video {
background-position: -224px -128px; }
.ui-icon-script {
background-position: -240px -128px; }
.ui-icon-alert {
background-position: 0 -144px; }
.ui-icon-info {
background-position: -16px -144px; }
.ui-icon-notice {
background-position: -32px -144px; }
.ui-icon-help {
background-position: -48px -144px; }
.ui-icon-check {
background-position: -64px -144px; }
.ui-icon-bullet {
background-position: -80px -144px; }
.ui-icon-radio-on {
background-position: -96px -144px; }
.ui-icon-radio-off {
background-position: -112px -144px; }
.ui-icon-pin-w {
background-position: -128px -144px; }
.ui-icon-pin-s {
background-position: -144px -144px; }
.ui-icon-play {
background-position: 0 -160px; }
.ui-icon-pause {
background-position: -16px -160px; }
.ui-icon-seek-next {
background-position: -32px -160px; }
.ui-icon-seek-prev {
background-position: -48px -160px; }
.ui-icon-seek-end {
background-position: -64px -160px; }
.ui-icon-seek-start {
background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
background-position: -80px -160px; }
.ui-icon-stop {
background-position: -96px -160px; }
.ui-icon-eject {
background-position: -112px -160px; }
.ui-icon-volume-off {
background-position: -128px -160px; }
.ui-icon-volume-on {
background-position: -144px -160px; }
.ui-icon-power {
background-position: 0 -176px; }
.ui-icon-signal-diag {
background-position: -16px -176px; }
.ui-icon-signal {
background-position: -32px -176px; }
.ui-icon-battery-0 {
background-position: -48px -176px; }
.ui-icon-battery-1 {
background-position: -64px -176px; }
.ui-icon-battery-2 {
background-position: -80px -176px; }
.ui-icon-battery-3 {
background-position: -96px -176px; }
.ui-icon-circle-plus {
background-position: 0 -192px; }
.ui-icon-circle-minus {
background-position: -16px -192px; }
.ui-icon-circle-close {
background-position: -32px -192px; }
.ui-icon-circle-triangle-e {
background-position: -48px -192px; }
.ui-icon-circle-triangle-s {
background-position: -64px -192px; }
.ui-icon-circle-triangle-w {
background-position: -80px -192px; }
.ui-icon-circle-triangle-n {
background-position: -96px -192px; }
.ui-icon-circle-arrow-e {
background-position: -112px -192px; }
.ui-icon-circle-arrow-s {
background-position: -128px -192px; }
.ui-icon-circle-arrow-w {
background-position: -144px -192px; }
.ui-icon-circle-arrow-n {
background-position: -160px -192px; }
.ui-icon-circle-zoomin {
background-position: -176px -192px; }
.ui-icon-circle-zoomout {
background-position: -192px -192px; }
.ui-icon-circle-check {
background-position: -208px -192px; }
.ui-icon-circlesmall-plus {
background-position: 0 -208px; }
.ui-icon-circlesmall-minus {
background-position: -16px -208px; }
.ui-icon-circlesmall-close {
background-position: -32px -208px; }
.ui-icon-squaresmall-plus {
background-position: -48px -208px; }
.ui-icon-squaresmall-minus {
background-position: -64px -208px; }
.ui-icon-squaresmall-close {
background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical {
background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal {
background-position: -16px -224px; }
.ui-icon-grip-solid-vertical {
background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal {
background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se {
background-position: -64px -224px; }
.ui-icon-grip-diagonal-se {
background-position: -80px -224px; }
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 4px; }
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 4px; }
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 4px; }
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 4px; }
/* Overlays */
.ui-widget-overlay {
background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
opacity: .3;
filter: Alpha(Opacity=30);
/* support: IE8 */ }
.ui-widget-shadow {
margin: -8px 0 0 -8px;
padding: 8px;
background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
opacity: .3;
filter: Alpha(Opacity=30);
/* support: IE8 */
border-radius: 8px; }
/*
Variables
In this file will be added all the variable. Use meaningful name for the variables.
Styleguide 2.0
*/
/*
Colors
Base colors:
$light-background: #f5f5f5;
$dark-background: #3b464d;
$black: #000000;
$white: #ffffff;
$link-color: #00ada7;
$light-text-color: #e5e5e5;
$dark-text-color:#4e4e4e;
Markup:
color: $light-background;
color: $dark-background;
color: $black;
color: $white;
color: $link-color;
color: $light-text-color;
color: $dark-text-color;
Styleguide 2.1
*/
/**
* Links
*/
/**
* Breakpoints
*/
/**
*Font sizes
*/
/**
* Containers
*/
/**
* Tables
*/
/**
* List
*/
/**
* Paragraph
*/
/**
* Header
*/
/*
Mixins and utilities classes
In this file will be added all the mixins and utilities classes.
Styleguide 3.0
*/
/*
Breakpoints
There are 2 posibilities:
-breakpoint with max value: @include breakpoint(value)
-breakpoints between values: @mixin breakpoints(min value,max value)
Usage:
Markup:
.container {
...
@include breakpoints(min value,max value) {
width: container-width;
}
}
.container {
...
@include breakpoint(value) {
width: container-width;
}
}
Styleguide 3.1
*/
/**
* Breakpoint
*/
/**
* Breakpoints between values
*/
/*
Horizontal Navigation Lists
A CSS pattern used for unordered lists for navigation purposes.
Usage:
Markup:
nav{
...
@include navigation-list;
}
Styleguide 3.2
*/
/**
* Horizontal Navigation Lists
*/
/*
Hiding Text and Image Replacement
Hiding an element's text and displaying an image using the CSS background property.
Usage:
Markup:
.logo{
background: url("logo.png");
height:XXXpx;
width:XXXpx;
...
@include hide-text;
}
Styleguide 3.3
*/
/*
Font size
Creates a property independent 'rem' calculation with a pixel fallback, default property is set to 'font-size'.
Usage:
Markup:
p {
@include font-size(14px)
}
Styleguide 3.4
*/
/*
Clearfix
Nicolas Gallagher's clearfix method (http://nicolasgallagher.com/micro-clearfix-hack)
Styleguide 3.5
*/
/*
Clearfix in css classes/id's
Usage:
Add @extend %clearfix; to the class that need to have floats cleared
Markup:
.container-with-floated-children {
@extend %clearfix;
}
Styleguide 3.5.1
*/
/*
Clearfix as css class
.clearfix - Class for float clearfix
Markup:
I'm a cleared paragraph.
I am floated left.
I am floated left.
I am floated right.
Styleguide 3.5.2
*/
.clearfix,
.clear {
*zoom: 1; }
.clearfix:before, .clearfix:after,
.clear:before,
.clear:after {
content: " ";
display: table; }
.clearfix:after,
.clear:after {
clear: both; }
/*
Float helpers
.pull-right - Floats the element to the right boundary.
.pull-left - Floats the element to the left boundary.
Markup:
I am floated left or right.
Styleguide 3.6
*/
.pull-right {
float: right !important; }
.pull-left {
float: left !important; }
/*
Visibility helpers
.visible - Display as a block element.
.visible-inline - Display as a inline block element.
.invisible - Hide element, but maintain the layout
.hidden - Hide element from browsers and screenreaders
Markup:
Visible/invisible element.
Styleguide 3.7
*/
.visible {
display: block !important; }
.visible-inline {
display: inline-block !important; }
.invisible {
visibility: hidden; }
.hidden {
visibility: hidden;
display: none !important; }
.hiddenElement * {
visibility: hidden;
display: none !important; }
.hiddenElement ul,
.hiddenElement ul li,
.hiddenElement ul li a {
display: inline-block !important;
visibility: visible !important; }
/*
Colors helpers
.red - Textcolor red.
.blue - Textcolor blue.
.green - Textcolor green.
Markup:
Colored text.
Styleguide 3.8
*/
.red {
color: #e80037; }
.blue {
color: #3e92d1; }
.green {
color: #68991b; }
.grey {
color: #c7c7c7; }
.white {
color: #ffffff; }
.yellow {
color: #ffcc00; }
table.dataTable {
width: 100%;
margin: 0 auto;
clear: both;
border-collapse: separate;
border-spacing: 0; }
table.dataTable thead th, table.dataTable tfoot th {
font-weight: bold; }
table.dataTable thead th, table.dataTable thead td {
padding: 10px 18px;
border-bottom: 1px solid #111; }
table.dataTable thead th:active, table.dataTable thead td:active {
outline: none; }
table.dataTable tfoot th, table.dataTable tfoot td {
padding: 10px 18px 6px 18px;
border-top: 1px solid #111; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
cursor: pointer;
*cursor: hand; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
background-repeat: no-repeat;
background-position: center right; }
table.dataTable thead .sorting {
background-image: url("../Images/sort_both.png"); }
table.dataTable thead .sorting_asc {
background-image: url("../Images/sort_asc.png"); }
table.dataTable thead .sorting_desc {
background-image: url("../Images/sort_desc.png"); }
table.dataTable thead .sorting_asc_disabled {
background-image: url("../Images/sort_asc_disabled.png"); }
table.dataTable thead .sorting_desc_disabled {
background-image: url("../Images/sort_desc_disabled.png"); }
table.dataTable tbody tr {
background-color: #fff; }
table.dataTable tbody tr.selected {
background-color: #B0BED9; }
table.dataTable tbody th, table.dataTable tbody td {
padding: 8px 10px; }
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
border-top: 1px solid #ddd; }
table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td {
border-top: none; }
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
border-top: 1px solid #ddd;
border-right: 1px solid #ddd; }
table.dataTable.cell-border tbody tr th:first-child, table.dataTable.cell-border tbody tr td:first-child {
border-left: 1px solid #ddd; }
table.dataTable.cell-border tbody tr:first-child th, table.dataTable.cell-border tbody tr:first-child td {
border-top: none; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
background-color: #f9f9f9; }
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
background-color: #abb9d3; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
background-color: #f5f5f5; }
table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
background-color: #a9b7d1; }
table.dataTable.order-column tbody tr > .sorting_1, table.dataTable.order-column tbody tr > .sorting_2, table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1, table.dataTable.display tbody tr > .sorting_2, table.dataTable.display tbody tr > .sorting_3 {
background-color: #f9f9f9; }
table.dataTable.order-column tbody tr.selected > .sorting_1, table.dataTable.order-column tbody tr.selected > .sorting_2, table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1, table.dataTable.display tbody tr.selected > .sorting_2, table.dataTable.display tbody tr.selected > .sorting_3 {
background-color: #acbad4; }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: #f1f1f1; }
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
background-color: #f3f3f3; }
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
background-color: #f5f5f5; }
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #a6b3cd; }
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
background-color: #a7b5ce; }
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
background-color: #a9b6d0; }
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: #f9f9f9; }
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
background-color: #fbfbfb; }
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
background-color: #fdfdfd; }
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
background-color: #acbad4; }
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
background-color: #adbbd6; }
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
background-color: #afbdd8; }
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
background-color: #eaeaea; }
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
background-color: #ebebeb; }
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
background-color: #eee; }
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
background-color: #a1aec7; }
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
background-color: #a2afc8; }
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
background-color: #a4b2cb; }
table.dataTable.no-footer {
border-bottom: 1px solid #111; }
table.dataTable.nowrap th, table.dataTable.nowrap td {
white-space: nowrap; }
table.dataTable.compact thead th, table.dataTable.compact thead td {
padding: 4px 17px 4px 4px; }
table.dataTable.compact tfoot th, table.dataTable.compact tfoot td {
padding: 4px; }
table.dataTable.compact tbody th, table.dataTable.compact tbody td {
padding: 4px; }
table.dataTable th.dt-left, table.dataTable td.dt-left {
text-align: left; }
table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty {
text-align: center; }
table.dataTable th.dt-right, table.dataTable td.dt-right {
text-align: right; }
table.dataTable th.dt-justify, table.dataTable td.dt-justify {
text-align: justify; }
table.dataTable th.dt-nowrap, table.dataTable td.dt-nowrap {
white-space: nowrap; }
table.dataTable thead th.dt-head-left, table.dataTable thead td.dt-head-left, table.dataTable tfoot th.dt-head-left, table.dataTable tfoot td.dt-head-left {
text-align: left; }
table.dataTable thead th.dt-head-center, table.dataTable thead td.dt-head-center, table.dataTable tfoot th.dt-head-center, table.dataTable tfoot td.dt-head-center {
text-align: center; }
table.dataTable thead th.dt-head-right, table.dataTable thead td.dt-head-right, table.dataTable tfoot th.dt-head-right, table.dataTable tfoot td.dt-head-right {
text-align: right; }
table.dataTable thead th.dt-head-justify, table.dataTable thead td.dt-head-justify, table.dataTable tfoot th.dt-head-justify, table.dataTable tfoot td.dt-head-justify {
text-align: justify; }
table.dataTable thead th.dt-head-nowrap, table.dataTable thead td.dt-head-nowrap, table.dataTable tfoot th.dt-head-nowrap, table.dataTable tfoot td.dt-head-nowrap {
white-space: nowrap; }
table.dataTable tbody th.dt-body-left, table.dataTable tbody td.dt-body-left {
text-align: left; }
table.dataTable tbody th.dt-body-center, table.dataTable tbody td.dt-body-center {
text-align: center; }
table.dataTable tbody th.dt-body-right, table.dataTable tbody td.dt-body-right {
text-align: right; }
table.dataTable tbody th.dt-body-justify, table.dataTable tbody td.dt-body-justify {
text-align: justify; }
table.dataTable tbody th.dt-body-nowrap, table.dataTable tbody td.dt-body-nowrap {
white-space: nowrap; }
table.dataTable, table.dataTable th, table.dataTable td {
box-sizing: content-box; }
.dataTables_wrapper {
position: relative;
clear: both;
*zoom: 1;
zoom: 1; }
.dataTables_wrapper .dataTables_length {
float: left; }
.dataTables_wrapper .dataTables_filter {
float: right;
text-align: right; }
.dataTables_wrapper .dataTables_filter input {
margin-left: 0.5em; }
.dataTables_wrapper .dataTables_info {
clear: both;
float: left;
padding-top: 0.755em; }
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.25em; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333 !important;
border: 1px solid transparent; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #333 !important;
border: 1px solid #cacaca;
background-color: #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));
background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%); }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid #111;
background-color: #585858;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
background: linear-gradient(to bottom, #585858 0%, #111 100%); }
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
outline: none;
background-color: #2b2b2b;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
box-shadow: inset 0 0 3px #111; }
.dataTables_wrapper .dataTables_paginate .ellipsis {
padding: 0 1em; }
.dataTables_wrapper .dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 40px;
margin-left: -50%;
margin-top: -25px;
padding-top: 20px;
text-align: center;
font-size: 1.2em;
background-color: white;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
color: #333; }
.dataTables_wrapper .dataTables_scroll {
clear: both; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
*margin-top: -1px;
-webkit-overflow-scrolling: touch; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing {
height: 0;
overflow: hidden;
margin: 0 !important;
padding: 0 !important; }
.dataTables_wrapper.no-footer .dataTables_scrollBody {
border-bottom: 1px solid #111; }
.dataTables_wrapper.no-footer div.dataTables_scrollHead table, .dataTables_wrapper.no-footer div.dataTables_scrollBody table {
border-bottom: none; }
.dataTables_wrapper:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0; }
@media screen and (max-width: 767px) {
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
float: none;
text-align: center; }
.dataTables_wrapper .dataTables_paginate {
margin-top: 0.5em; } }
@media screen and (max-width: 640px) {
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
float: none;
text-align: center; }
.dataTables_wrapper .dataTables_filter {
margin-top: 0.5em; } }
/*
* CSS Styles that are needed by jScrollPane for it to operate correctly.
*
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
* may not operate correctly without them.
*/
.jspContainer {
overflow: hidden;
position: relative; }
.jspPane {
position: absolute; }
.jspVerticalBar {
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red; }
.jspHorizontalBar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red; }
.jspCap {
display: none; }
.jspHorizontalBar .jspCap {
float: left; }
.jspTrack {
background: #dde;
position: relative; }
.jspDrag {
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer; }
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
float: left;
height: 100%; }
.jspArrow {
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0; }
.jspArrow.jspDisabled {
cursor: default;
background: #80808d; }
.jspVerticalBar .jspArrow {
height: 16px; }
.jspHorizontalBar .jspArrow {
width: 16px;
float: left;
height: 100%; }
.jspVerticalBar .jspArrow:focus {
outline: none; }
.jspCorner {
background: #eeeef4;
float: left;
height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
margin: 0 -3px 0 0; }
/*
Base
In this file will be added the general style for all elements
Styleguide 4.0
*/
* {
box-sizing: border-box; }
/**
* ToDo: Adding font-family,font-size...
*/
body,
html {
margin: 0;
padding: 0;
height: 100%; }
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-color: #f5f5f5;
font-family: 'Source Sans Pro', Arial;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
margin: 0;
overflow: hidden;
min-height: 400px;
min-width: 1000px; }
@media screen and (max-width: 1000px) {
body {
width: 1000px; } }
.kssBody {
overflow: auto; }
/**
* Responsive image
**/
img {
display: block;
height: auto; }
iframe,
img {
max-width: 100%; }
.ui-widget {
font-family: 'Source Sans Pro', Arial;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 1.5; }
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #68991b;
background: #68991b; }
/**
* Font icons size
**/
i {
font-size: 16px; }
/*
Links
Basic style for links
Markup:
I am a link
:hover - Hover styling for links
Styleguide 4.1
*/
a {
color: #007dcc;
text-decoration: none;
background: transparent;
cursor: pointer;
/* Remove outline */ }
a:active, a:focus, a:hover {
color: #0096f5;
text-decoration: none; }
a:active, a:hover {
outline: 0; }
.button,
button,
input[type=reset],
input[type=submit] {
background: #68991b;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 10px;
font-weight: bold;
line-height: 16px;
/* Remove outline */ }
.button:active, .button:focus, .button:hover,
button:active,
button:focus,
button:hover,
input[type=reset]:active,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=submit]:hover {
background: #80bc21;
text-decoration: none; }
.button:active, .button:hover,
button:active,
button:hover,
input[type=reset]:active,
input[type=reset]:hover,
input[type=submit]:active,
input[type=submit]:hover {
outline: 0; }
button[type=submit]:focus,
input[type=submit]:focus {
background: #0cd384; }
button[type=submit]:focus:hover,
input[type=submit]:focus:hover {
background: #507615;
text-decoration: none; }
button[type=reset],
button[type=reset]:focus,
input[type=reset],
input[type=reset]:focus {
background: #e80037; }
button[type=reset]:active, button[type=reset]:focus, button[type=reset]:hover,
button[type=reset]:focus:active,
button[type=reset]:focus:focus,
button[type=reset]:focus:hover,
input[type=reset]:active,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=reset]:focus:active,
input[type=reset]:focus:focus,
input[type=reset]:focus:hover {
background: #ff124a;
text-decoration: none; }
button.infoButton {
background: transparent;
display: block;
font-size: 24px;
line-height: 28px;
display: inline-block; }
button.infoButton:active, button.infoButton:focus, button.infoButton:hover {
background: none !important;
text-decoration: none; }
/*
Tables
Basic style for tables
.table - Table styling
.table.table-bordered - Table with border styling
.table.table-row-splitter - Table border between rows
.table.table-condensed - Condensed table (smaller padding for each cell)
.table.table-zebra - "Zebra"- styled table with different background color for even and odd rows
Markup:
| 1 |
2 |
3 |
4 |
5 |
| Test |
Test |
Test |
Test |
Test |
| Test |
Test |
Test |
Test |
Test |
| Test |
Test |
Test |
Test |
Test |
| Test |
Test |
Test |
Test |
Test |
| Test |
Test |
Test |
Test |
Test |
Styleguide 4.2
*/
table {
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
margin: 10px; }
th {
vertical-align: middle;
text-align: left; }
td {
vertical-align: middle;
padding: 2px; }
td p {
margin: 6px 0; }
.table {
width: calc(100% - 20px); }
.table td,
.table th {
padding: 2px; }
.table-bordered {
border: 1px solid #e5e5e5;
border-collapse: separate; }
.table-bordered td,
.table-bordered th {
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5; }
.table-bordered td:first-child,
.table-bordered th:first-child {
border-left: 0; }
.table-bordered tr:last-child > td {
border-bottom: 0; }
.table-row-splitter td,
.table-row-splitter th {
border-bottom: 1px solid #e5e5e5; }
.table-condensed td,
.table-condensed th {
padding: 2px; }
.table-zebra tbody tr:nth-child(even) {
background-color: #f5f5f5; }
.table-zebra tbody tr:nth-child(odd) {
background-color: gainsboro; }
/*
Headings
Basic style for headings
Markup:
I'm H1
I'm H2
I'm H3
I'm H4
I'm H5
I'm H6
Styleguide 4.3
*/
h1,
h2,
h3,
h4,
h5,
h6 {
text-rendering: optimizeLegibility; }
h1 {
font-size: 36px;
font-size: 2.25rem; }
h2 {
font-size: 30px;
font-size: 1.875rem; }
h3 {
font-size: 24px;
font-size: 1.5rem; }
h4 {
font-size: 20px;
font-size: 1.25rem; }
h5 {
font-size: 18px;
font-size: 1.125rem; }
h6 {
font-size: 16px;
font-size: 1rem; }
/*
List elements
Basic style for unordered- & ordered- list
.reset-list - Resets the standard properties for unordered- & ordered- list
Markup:
- Unordered-List
- I am a list-element.
- I am a list-element.
- I am a list-element.
- I am a list-element.
- Ordered-List
- I am a list-element.
- I am a list-element..
- I am a list-element.
- I am a list-element.
Styleguide 4.4
*/
ol,
ul {
list-style-type: disc;
padding: 0 0 0 40px; }
ol {
list-style-type: decimal; }
.reset-list {
list-style: none;
margin: 0;
padding: 0; }
/*
Definitions
Basic style for Definitions list
.order - Resets the standard properties for unordered- & ordered- list
Markup:
- Coffee
- - black hot drink
- Milk
- - white cold drink
Styleguide 4.5
*/
.order dt {
float: left;
text-align: left;
width: 20%; }
.order dd {
margin-left: 22%; }
/*
Paragraph
Basic style for Definitions list
.strong - Bold paragraph
.small - 75% font height
.italic - Italic style
.underline - Underline text
Markup:
I'm a paragraph.
Styleguide 4.6
*/
p {
margin: 0 0 5px; }
.strong {
font-weight: bold; }
.small {
font-size: 75%; }
.italic {
font-style: italic; }
.underline {
text-decoration: underline; }
/*
Custom scroll bar
Basic style for custom scroll bar.
Styleguide 4.7
*/
/*
== malihu jquery custom scrollbar plugin ==
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
*/
/*
CONTENTS:
1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited).
2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar.
3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars.
5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars.
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
*/
/*
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE
------------------------------------------------------------------------------------------------------------------------
*/
.mCustomScrollbar {
-ms-touch-action: none;
touch-action: none;
/* MSPointer events - direct all pointer events to js */ }
.mCustomScrollbar.mCS_no_scrollbar,
.mCustomScrollbar.mCS_touch_action {
-ms-touch-action: auto;
touch-action: auto; }
.mCustomScrollBox {
/* contains plugin's markup */
position: relative;
overflow: hidden;
height: 100%;
max-width: 100%;
outline: none;
direction: ltr; }
.mCSB_container {
/* contains the original content */
overflow: hidden;
width: auto;
height: auto;
min-height: 100%; }
/*
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR
y-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_inside > .mCSB_container {
margin-right: 30px; }
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
margin-right: 0; }
/* non-visible scrollbar */
.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
/* RTL direction/left-side scrollbar */
margin-right: 0;
margin-left: 30px; }
.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
margin-left: 0; }
/* RTL direction/left-side scrollbar */
.mCSB_scrollTools {
/* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
position: absolute;
width: 16px;
height: auto;
left: auto;
top: 0;
right: 0;
bottom: 0; }
.mCSB_outside + .mCSB_scrollTools {
right: -26px; }
/* scrollbar position: outside */
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
/* RTL direction/left-side scrollbar */
right: auto;
left: 0; }
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
left: -26px; }
/* RTL direction/left-side scrollbar (scrollbar position: outside) */
.mCSB_scrollTools .mCSB_draggerContainer {
/* contains the draggable element and dragger rail markup */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: auto; }
.mCSB_scrollTools a + .mCSB_draggerContainer {
margin: 20px 0; }
.mCSB_scrollTools .mCSB_draggerRail {
width: 2px;
height: 100%;
margin: 0 auto;
border-radius: 16px; }
.mCSB_scrollTools .mCSB_dragger {
/* the draggable element */
cursor: pointer;
width: 100%;
height: 30px;
/* minimum dragger height */
z-index: 1; }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
/* the dragger element */
position: relative;
width: 4px;
height: 100%;
margin: 0 auto;
border-radius: 16px;
text-align: center; }
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
width: 12px;
/* auto-expanded scrollbar */ }
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
width: 8px;
/* auto-expanded scrollbar */ }
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonUp {
display: block;
position: absolute;
height: 20px;
width: 100%;
overflow: hidden;
margin: 0 auto;
cursor: pointer; }
.mCSB_scrollTools .mCSB_buttonDown {
bottom: 0; }
/*
------------------------------------------------------------------------------------------------------------------------
3. HORIZONTAL SCROLLBAR
x-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_horizontal.mCSB_inside > .mCSB_container {
margin-right: 0;
margin-bottom: 30px; }
.mCSB_horizontal.mCSB_outside > .mCSB_container {
min-height: 100%; }
.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
margin-bottom: 0; }
/* non-visible scrollbar */
.mCSB_scrollTools.mCSB_scrollTools_horizontal {
width: auto;
height: 16px;
top: auto;
right: 0;
bottom: 0;
left: 0; }
.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
bottom: -26px; }
/* scrollbar position: outside */
.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
margin: 0 20px; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
width: 100%;
height: 2px;
margin: 7px 0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
width: 30px;
/* minimum dragger width */
height: 100%;
left: 0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
width: 100%;
height: 4px;
margin: 6px auto; }
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
height: 12px;
/* auto-expanded scrollbar */
margin: 2px auto; }
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
height: 8px;
/* auto-expanded scrollbar */
margin: 4px 0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
display: block;
position: absolute;
width: 20px;
height: 100%;
overflow: hidden;
margin: 0 auto;
cursor: pointer; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
left: 0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
right: 0; }
/*
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS
yx-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_container_wrapper {
position: absolute;
height: auto;
width: auto;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: 30px;
margin-bottom: 30px; }
.mCSB_container_wrapper > .mCSB_container {
padding-right: 30px;
padding-bottom: 30px; }
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
bottom: 20px; }
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
right: 20px; }
/* non-visible horizontal scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical {
bottom: 0; }
/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
right: 0; }
/* RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
left: 20px; }
/* non-visible scrollbar/RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
left: 0; }
.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper {
/* RTL direction/left-side scrollbar */
margin-right: 0;
margin-left: 30px; }
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container {
padding-right: 0;
box-sizing: border-box; }
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container {
padding-bottom: 0;
box-sizing: border-box; }
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
margin-right: 0;
/* non-visible scrollbar */
margin-left: 0; }
/* non-visible horizontal scrollbar */
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
margin-bottom: 0; }
/*
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_scrollTools,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight,
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
-webkit-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; }
/* auto-expanded scrollbar */
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {
-webkit-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; }
/*
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
------------------------------------------------------------------------------------------------------------------------
*/
/*
----------------------------------------
6.1 THEMES
----------------------------------------
*/
/* default theme ("light") */
.mCSB_scrollTools {
opacity: 0.75;
filter: "alpha(opacity=75)";
-ms-filter: "alpha(opacity=75)"; }
.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
opacity: 0.45;
filter: "alpha(opacity=45)";
-ms-filter: "alpha(opacity=45)"; }
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag {
opacity: 1;
filter: "alpha(opacity=100)";
-ms-filter: "alpha(opacity=100)"; }
.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.4);
filter: "alpha(opacity=40)";
-ms-filter: "alpha(opacity=40)"; }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.75);
filter: "alpha(opacity=75)";
-ms-filter: "alpha(opacity=75)"; }
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.85);
filter: "alpha(opacity=85)";
-ms-filter: "alpha(opacity=85)"; }
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.9);
filter: "alpha(opacity=90)";
-ms-filter: "alpha(opacity=90)"; }
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight,
.mCSB_scrollTools .mCSB_buttonUp {
background-image: url("mCSB_buttons.png");
/* css sprites */
background-repeat: no-repeat;
opacity: 0.4;
filter: "alpha(opacity=40)";
-ms-filter: "alpha(opacity=40)"; }
.mCSB_scrollTools .mCSB_buttonUp {
background-position: 0 0;
/*
sprites locations
light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
*/ }
.mCSB_scrollTools .mCSB_buttonDown {
background-position: 0 -20px;
/*
sprites locations
light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
*/ }
.mCSB_scrollTools .mCSB_buttonLeft {
background-position: 0 -40px;
/*
sprites locations
light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
*/ }
.mCSB_scrollTools .mCSB_buttonRight {
background-position: 0 -56px;
/*
sprites locations
light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
*/ }
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover,
.mCSB_scrollTools .mCSB_buttonUp:hover {
opacity: 0.75;
filter: "alpha(opacity=75)";
-ms-filter: "alpha(opacity=75)"; }
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active,
.mCSB_scrollTools .mCSB_buttonUp:active {
opacity: 0.9;
filter: "alpha(opacity=90)";
-ms-filter: "alpha(opacity=90)"; }
/* theme: "dark" */
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.15); }
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.75); }
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: rgba(0, 0, 0, 0.85); }
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: rgba(0, 0, 0, 0.9); }
.mCS-dark.mCSB_scrollTools .mCSB_buttonUp {
background-position: -80px 0; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonDown {
background-position: -80px -20px; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -80px -40px; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonRight {
background-position: -80px -56px; }
/* ---------------------------------------- */
/* theme: "light-2", "dark-2" */
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail {
width: 4px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 1px; }
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 4px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.75);
border-radius: 1px; }
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail {
width: 100%;
height: 4px;
margin: 6px auto; }
.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.85); }
.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.9); }
.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp {
background-position: -32px 0; }
.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown {
background-position: -32px -20px; }
.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -40px -40px; }
.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight {
background-position: -40px -56px; }
/* theme: "dark-2" */
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 1px; }
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 1px; }
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.85); }
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.9); }
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp {
background-position: -112px 0; }
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown {
background-position: -112px -20px; }
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -120px -40px; }
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight {
background-position: -120px -56px; }
/* ---------------------------------------- */
/* theme: "light-thick", "dark-thick" */
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,
.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
width: 4px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 2px; }
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 6px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.75);
border-radius: 2px; }
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail {
width: 100%;
height: 4px;
margin: 6px 0; }
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
width: 100%;
height: 6px;
margin: 5px auto; }
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.85); }
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.9); }
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp {
background-position: -16px 0; }
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown {
background-position: -16px -20px; }
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -20px -40px; }
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight {
background-position: -20px -56px; }
/* theme: "dark-thick" */
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 2px; }
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 2px; }
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.85); }
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.9); }
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp {
background-position: -96px 0; }
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown {
background-position: -96px -20px; }
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -100px -40px; }
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight {
background-position: -100px -56px; }
/* ---------------------------------------- */
/* theme: "light-thin", "dark-thin" */
.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.1); }
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 2px; }
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail {
width: 100%; }
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
width: 100%;
height: 2px;
margin: 7px auto; }
/* theme "dark-thin" */
.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.15); }
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.75); }
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.85); }
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.9); }
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp {
background-position: -80px 0; }
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown {
background-position: -80px -20px; }
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -80px -40px; }
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight {
background-position: -80px -56px; }
/* ---------------------------------------- */
/* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */
.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.15); }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded.mCSB_scrollTools .mCSB_dragger {
height: 14px; }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 14px;
margin: 0 1px; }
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger {
width: 14px; }
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
height: 14px;
margin: 1px 0; }
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
width: 16px;
/* auto-expanded scrollbar */
height: 16px;
margin: -1px 0; }
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
width: 4px;
/* auto-expanded scrollbar */ }
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
height: 16px;
/* auto-expanded scrollbar */
width: 16px;
margin: 0 -1px; }
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
height: 4px;
/* auto-expanded scrollbar */
margin: 6px 0; }
.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp {
background-position: 0 -72px; }
.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown {
background-position: 0 -92px; }
.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft {
background-position: 0 -112px; }
.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight {
background-position: 0 -128px; }
/* theme "rounded-dark", "rounded-dots-dark" */
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.75); }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.15); }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.85); }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.9); }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp {
background-position: -80px -72px; }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown {
background-position: -80px -92px; }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -80px -112px; }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight {
background-position: -80px -128px; }
/* theme "rounded-dots", "rounded-dots-dark" */
.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail {
width: 4px; }
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
background-color: transparent;
background-position: center; }
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
background-repeat: repeat-y;
opacity: 0.3;
filter: "alpha(opacity=30)";
-ms-filter: "alpha(opacity=30)"; }
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
height: 4px;
margin: 6px 0;
background-repeat: repeat-x; }
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp {
background-position: -16px -72px; }
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown {
background-position: -16px -92px; }
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -20px -112px; }
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight {
background-position: -20px -128px; }
/* theme "rounded-dots-dark" */
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); }
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp {
background-position: -96px -72px; }
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown {
background-position: -96px -92px; }
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -100px -112px; }
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight {
background-position: -100px -128px; }
/* ---------------------------------------- */
/* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-repeat: repeat-y;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); }
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
background-repeat: repeat-x;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); }
/* theme "3d", "3d-dark" */
.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,
.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger {
height: 70px; }
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger {
width: 70px; }
.mCS-3d-dark.mCSB_scrollTools,
.mCS-3d.mCSB_scrollTools {
opacity: 1;
filter: "alpha(opacity=30)";
-ms-filter: "alpha(opacity=30)"; }
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
border-radius: 16px; }
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
width: 8px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2); }
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #555; }
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 8px; }
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail {
width: 100%;
height: 8px;
margin: 4px 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2); }
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
width: 100%;
height: 8px;
margin: 4px auto; }
.mCS-3d.mCSB_scrollTools .mCSB_buttonUp {
background-position: -32px -72px; }
.mCS-3d.mCSB_scrollTools .mCSB_buttonDown {
background-position: -32px -92px; }
.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -40px -112px; }
.mCS-3d.mCSB_scrollTools .mCSB_buttonRight {
background-position: -40px -128px; }
/* theme "3d-dark" */
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1); }
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); }
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp {
background-position: -112px -72px; }
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown {
background-position: -112px -92px; }
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -120px -112px; }
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight {
background-position: -120px -128px; }
/* ---------------------------------------- */
/* theme: "3d-thick", "3d-thick-dark" */
.mCS-3d-thick-dark.mCSB_scrollTools,
.mCS-3d-thick.mCSB_scrollTools {
opacity: 1;
filter: "alpha(opacity=30)";
-ms-filter: "alpha(opacity=30)"; }
.mCS-3d-thick-dark.mCSB_scrollTools,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,
.mCS-3d-thick.mCSB_scrollTools,
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
border-radius: 7px; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
border-radius: 5px; }
.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical,
.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical {
right: 1px; }
.mCS-3d-thick-dark.mCSB_scrollTools_vertical,
.mCS-3d-thick.mCSB_scrollTools_vertical {
box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); }
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal,
.mCS-3d-thick.mCSB_scrollTools_horizontal {
bottom: 1px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
width: 12px;
margin: 2px;
position: absolute;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0; }
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #555; }
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
height: 12px;
width: auto; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
background-color: #000;
background-color: rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); }
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail {
background-color: transparent; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp {
background-position: -32px -72px; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown {
background-position: -32px -92px; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -40px -112px; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight {
background-position: -40px -128px; }
/* theme: "3d-thick-dark" */
.mCS-3d-thick-dark.mCSB_scrollTools {
box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); }
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2); }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2); }
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #777; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
background-color: #fff;
background-color: rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail {
background-color: transparent; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {
background-position: -112px -72px; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {
background-position: -112px -92px; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -120px -112px; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight {
background-position: -120px -128px; }
/* ---------------------------------------- */
/* theme: "minimal", "minimal-dark" */
.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical,
.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
right: 0;
margin: 12px 0; }
.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
bottom: 0;
margin: 0 12px; }
/* RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical,
.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
left: 0;
right: auto; }
.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail {
background-color: transparent; }
.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,
.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger {
height: 50px; }
.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger {
width: 50px; }
.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.2);
filter: "alpha(opacity=20)";
-ms-filter: "alpha(opacity=20)"; }
.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.5);
filter: "alpha(opacity=50)";
-ms-filter: "alpha(opacity=50)"; }
/* theme: "minimal-dark" */
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.2);
filter: "alpha(opacity=20)";
-ms-filter: "alpha(opacity=20)"; }
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.5);
filter: "alpha(opacity=50)";
-ms-filter: "alpha(opacity=50)"; }
/* ---------------------------------------- */
/* theme "light-3", "dark-3" */
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail {
width: 6px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.2); }
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 6px; }
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail {
width: 100%;
height: 6px;
margin: 5px 0; }
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
width: 12px; }
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
height: 12px;
margin: 2px 0; }
.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp {
background-position: -32px -72px; }
.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown {
background-position: -32px -92px; }
.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -40px -112px; }
.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight {
background-position: -40px -128px; }
/* theme "dark-3" */
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.75); }
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.85); }
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.9); }
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.1); }
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp {
background-position: -112px -72px; }
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {
background-position: -112px -92px; }
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -120px -112px; }
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight {
background-position: -120px -128px; }
/* ---------------------------------------- */
/* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset.mCSB_scrollTools .mCSB_draggerRail {
width: 12px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.2); }
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 6px;
margin: 3px 5px;
position: absolute;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0; }
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
height: 6px;
margin: 5px 3px;
position: absolute;
width: auto;
top: 0;
bottom: 0;
left: 0;
right: 0; }
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail {
width: 100%;
height: 12px;
margin: 2px 0; }
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset.mCSB_scrollTools .mCSB_buttonUp {
background-position: -32px -72px; }
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset.mCSB_scrollTools .mCSB_buttonDown {
background-position: -32px -92px; }
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -40px -112px; }
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset.mCSB_scrollTools .mCSB_buttonRight {
background-position: -40px -128px; }
/* theme "inset-dark", "inset-2-dark", "inset-3-dark" */
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.75); }
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.85); }
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.9); }
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.1); }
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp {
background-position: -112px -72px; }
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown {
background-position: -112px -92px; }
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft {
background-position: -120px -112px; }
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight {
background-position: -120px -128px; }
/* theme "inset-2", "inset-2-dark" */
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail {
background-color: transparent;
border-width: 1px;
border-style: solid;
border-color: #fff;
border-color: rgba(255, 255, 255, 0.2);
box-sizing: border-box; }
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
border-color: #000;
border-color: rgba(0, 0, 0, 0.2); }
/* theme "inset-3", "inset-3-dark" */
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.6); }
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
background-color: #000;
background-color: rgba(0, 0, 0, 0.6); }
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.75); }
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.85); }
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #000;
background-color: rgba(0, 0, 0, 0.9); }
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.75); }
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.85); }
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.9); }
/* ---------------------------------------- */
/*
Messages
Basic style for messages
jspTrack - scroll background
jspDrag - scroll item
Usage:
Markup:
.jspTrack {
background: #ececec;
}
.jspDrag {
background: #d3d3d3;
}
Styleguide 4.8
*/
#flash-messages,
.checkbox-group > ul,
.checkbox-table > ul,
.input-group ul {
position: relative;
padding: 0;
list-style: none;
margin: 0 0 15px; }
#flash-messages li,
.checkbox-group > ul li,
.checkbox-table > ul li,
.input-group ul li {
border-radius: 4px;
padding: 15px 20px;
color: #ffffff;
position: relative;
font-weight: 700;
margin-top: 1px; }
#flash-messages li a,
.checkbox-group > ul li a,
.checkbox-table > ul li a,
.input-group ul li a {
color: #ffffff;
margin-left: 5px;
font-weight: 700;
font-size: 14px;
text-decoration: underline; }
#flash-messages li.success,
.checkbox-group > ul li.success,
.checkbox-table > ul li.success,
.input-group ul li.success {
background-color: #3e92d1; }
#flash-messages li.error,
.checkbox-group > ul li.error,
.checkbox-table > ul li.error,
.input-group ul li.error {
background-color: #e80037; }
#flash-messages li.warning,
.checkbox-group > ul li.warning,
.checkbox-table > ul li.warning,
.input-group ul li.warning {
background-color: #ffcc00; }
#flash-messages li.info,
.checkbox-group > ul li.info,
.checkbox-table > ul li.info,
.input-group ul li.info {
background-color: #68991b; }
#flash-messages li i,
.checkbox-group > ul li i,
.checkbox-table > ul li i,
.input-group ul li i {
position: absolute;
right: 18px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
padding: 3px;
font-size: 16px;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
#flash-messages li i:hover,
.checkbox-group > ul li i:hover,
.checkbox-table > ul li i:hover,
.input-group ul li i:hover {
font-size: 20px; }
.flashMessages {
padding: 7px 20px;
list-style: none;
margin: 10px 0;
border-radius: 4px;
position: relative;
display: inline-block;
width: 100%; }
.flashMessages li {
padding: 7px 0;
margin-right: 10px;
color: #ffffff;
font-weight: 700;
line-height: 14px; }
.flashMessages li a {
color: #ffffff;
margin-left: 5px;
font-weight: 700;
font-size: 14px;
text-decoration: underline; }
.flashMessages li i {
position: absolute;
right: 18px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
padding: 3px;
font-size: 16px;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
.flashMessages li i:hover {
font-size: 20px;
right: 16px; }
.flashMessages.success {
background-color: #3e92d1; }
.flashMessages.error {
background-color: #e80037; }
.flashMessages.warning {
background-color: #ffcc00; }
.flashMessages.info {
background-color: #68991b; }
.ui-datepicker {
z-index: 1000001 !important; }
.read-only label {
color: #545454 !important;
pointer-events: none;
opacity: 0.6; }
.read-only label > span {
opacity: 0.63; }
.review {
margin-left: -10px; }
.review .fa.fa-asterisk {
vertical-align: top;
font-size: 0.8em; }
select::-ms-expand {
display: none; }
.legend-btn,
.legend-btn:hover {
background: transparent;
color: #68991b; }
.legend-btn {
clear: both;
float: right;
padding: 0 0 15px; }
/*
Form
In this file will be added the style for the Form element
Styleguide 8.0
*/
.main-content form,
.ui-dialog {
padding: 25px;
background-color: #ffffff; }
.main-content form.taskForm,
.ui-dialog.taskForm {
border-radius: 4px; }
.main-content form fieldset,
.ui-dialog fieldset {
border: none;
margin: 0;
padding: 0;
float: left;
min-width: 90%; }
.main-content form fieldset.multipleSubform,
.ui-dialog fieldset.multipleSubform {
margin-bottom: 30px; }
.main-content form fieldset.multipleSubform fieldset,
.ui-dialog fieldset.multipleSubform fieldset {
border-left: 8px solid #68991b;
padding: 0 20px;
margin-left: 25px;
margin-top: 10px; }
.main-content form fieldset.multipleSubform fieldset .input-group.submitElement,
.ui-dialog fieldset.multipleSubform fieldset .input-group.submitElement {
margin-bottom: 3px; }
.main-content form fieldset.multipleSubform.lightbox,
.ui-dialog fieldset.multipleSubform.lightbox {
background: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1450; }
.main-content form fieldset.multipleSubform.lightbox fieldset,
.ui-dialog fieldset.multipleSubform.lightbox fieldset {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(calc(-50% + 123px), -50%);
transform: translate(calc(-50% + 123px), -50%);
display: inline-block;
float: none;
min-width: 60%;
width: 1230px;
background: #ffffff;
padding: 35px;
border: 1px solid #007dcc;
border-radius: 4px; }
.main-content form fieldset.multipleSubform.lightbox fieldset .input-group.submitElement,
.ui-dialog fieldset.multipleSubform.lightbox fieldset .input-group.submitElement {
width: 48% !important;
margin-right: 1% !important;
margin-top: 20px !important; }
.main-content form fieldset.multipleSubform.lightbox fieldset .input-group.submitElement input,
.ui-dialog fieldset.multipleSubform.lightbox fieldset .input-group.submitElement input {
float: right; }
.main-content form fieldset.multipleSubform.lightbox fieldset .input-group.submitElement + .input-group.submitElement input,
.ui-dialog fieldset.multipleSubform.lightbox fieldset .input-group.submitElement + .input-group.submitElement input {
float: left; }
@media screen and (max-width: 1600px) {
.main-content form fieldset.multipleSubform.lightbox fieldset,
.ui-dialog fieldset.multipleSubform.lightbox fieldset {
width: 920px; } }
@media screen and (max-width: 1200px) {
.main-content form fieldset.multipleSubform.lightbox fieldset,
.ui-dialog fieldset.multipleSubform.lightbox fieldset {
width: 800px; } }
.main-content form fieldset > .input-group.submitElement,
.ui-dialog fieldset > .input-group.submitElement {
margin: 0; }
.main-content form fieldset > .input-group.submitElement button,
.ui-dialog fieldset > .input-group.submitElement button {
margin: 10px 0; }
.main-content form fieldset > .input-group.submitElement button.hidden,
.ui-dialog fieldset > .input-group.submitElement button.hidden {
padding: 0; }
.main-content form .input-file,
.main-content form .uneditable,
.main-content form input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]),
.ui-dialog .input-file,
.ui-dialog .uneditable,
.ui-dialog input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]) {
background: none;
border: none;
border-bottom: 1px solid #e5e5e5;
color: #4e4e4e;
display: inline-block;
width: 550px;
font-size: 14px;
font-size: 0.875rem;
padding: 4px 28px 4px 2px; }
.main-content form .input-file:active, .main-content form .input-file:focus,
.main-content form .uneditable:active,
.main-content form .uneditable:focus,
.main-content form input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]):active,
.main-content form input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]):focus,
.ui-dialog .input-file:active,
.ui-dialog .input-file:focus,
.ui-dialog .uneditable:active,
.ui-dialog .uneditable:focus,
.ui-dialog input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]):active,
.ui-dialog input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]):focus {
outline: none; }
@media screen and (max-width: 1400px) {
.main-content form .input-file,
.main-content form .uneditable,
.main-content form input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]),
.ui-dialog .input-file,
.ui-dialog .uneditable,
.ui-dialog input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]) {
width: 450px; } }
.main-content form .sameLine.fields4 .input-file,
.main-content form .sameLine.fields4 input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]),
.ui-dialog .sameLine.fields4 .input-file,
.ui-dialog .sameLine.fields4 input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]) {
width: 265px; }
@media screen and (max-width: 1400px) {
.main-content form .sameLine.fields4 .input-file,
.main-content form .sameLine.fields4 input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]),
.ui-dialog .sameLine.fields4 .input-file,
.ui-dialog .sameLine.fields4 input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]) {
width: 215px !important; } }
.main-content form .sameLine.fields3 .input-group:last-of-type,
.ui-dialog .sameLine.fields3 .input-group:last-of-type {
margin-right: 0; }
.main-content form .sameLine.fields3 .input-file,
.main-content form .sameLine.fields3 input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]),
.ui-dialog .sameLine.fields3 .input-file,
.ui-dialog .sameLine.fields3 input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]) {
width: 169px; }
@media screen and (max-width: 1400px) {
.main-content form .sameLine.fields3 .input-file,
.main-content form .sameLine.fields3 input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]),
.ui-dialog .sameLine.fields3 .input-file,
.ui-dialog .sameLine.fields3 input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]) {
width: 136px !important; } }
.main-content form .sameLine.fields3 .input-group,
.ui-dialog .sameLine.fields3 .input-group {
width: 170px; }
.main-content form .sameLine.fields3 .input-group ul,
.ui-dialog .sameLine.fields3 .input-group ul {
width: 100%;
font-size: 13px;
font-weight: 400; }
.main-content form .sameLine.fields3 .input-group ul li,
.ui-dialog .sameLine.fields3 .input-group ul li {
padding: 5px 10px; }
.main-content form input[disabled="disabled"] + label,
.ui-dialog input[disabled="disabled"] + label {
color: #e5e5e5; }
.main-content form input[type=submit] + input[type=submit],
.ui-dialog input[type=submit] + input[type=submit] {
margin-left: 15px; }
.main-content form input[type=file],
.ui-dialog input[type=file] {
opacity: 0; }
.main-content form textarea,
.ui-dialog textarea {
border: none;
border-bottom: 1px solid #e5e5e5;
width: 550px; }
.main-content form textarea:active, .main-content form textarea:focus,
.ui-dialog textarea:active,
.ui-dialog textarea:focus {
outline: none; }
@media screen and (max-width: 1400px) {
.main-content form textarea,
.ui-dialog textarea {
width: 450px; } }
.main-content form .sameLine.fields4 textarea,
.ui-dialog .sameLine.fields4 textarea {
width: 265px; }
@media screen and (max-width: 1400px) {
.main-content form .sameLine.fields4 textarea,
.ui-dialog .sameLine.fields4 textarea {
width: 215px !important; } }
.main-content form .inputFile label,
.ui-dialog .inputFile label {
width: 550px !important;
background-color: transparent; }
.main-content form .inputFile label.input-file:after,
.ui-dialog .inputFile label.input-file:after {
content: "\f093";
font-family: FontAwesome;
color: #4e4e4e;
position: absolute;
right: 10px;
bottom: 9px;
line-height: 14px;
z-index: 50; }
@media screen and (max-width: 1400px) {
.main-content form .inputFile label,
.ui-dialog .inputFile label {
width: 450px !important; } }
.main-content form .inputFile .help-text,
.ui-dialog .inputFile .help-text {
left: 540px;
text-align: right;
z-index: 50; }
@media screen and (max-width: 1400px) {
.main-content form .inputFile .help-text,
.ui-dialog .inputFile .help-text {
left: 440px; } }
.main-content form .inputFile ul,
.ui-dialog .inputFile ul {
z-index: 950; }
.main-content form .sameLine.fields4 .inputFile label,
.ui-dialog .sameLine.fields4 .inputFile label {
width: 265px; }
@media screen and (max-width: 1400px) {
.main-content form .sameLine.fields4 .inputFile label,
.ui-dialog .sameLine.fields4 .inputFile label {
width: 215px !important; } }
.main-content form h1,
.ui-dialog h1 {
margin-top: 0;
margin-bottom: 10px;
color: #68991b;
font-size: 24px;
font-size: 1.5rem;
line-height: 24px; }
.main-content form .halfWidth,
.ui-dialog .halfWidth {
width: 48% !important;
margin-left: 2%;
float: none; }
.main-content form .halfWidth input[type="email"],
.main-content form .halfWidth input[type="text"],
.ui-dialog .halfWidth input[type="email"],
.ui-dialog .halfWidth input[type="text"] {
width: 260px; }
.main-content form .input-group,
.ui-dialog .input-group {
position: relative;
margin: 15px 0;
float: left;
width: 100%;
min-height: 31px;
/* &.sameLine:nth-of-type(even) {
margin-right: 365px;
@media screen and (max-width: 1400px){
margin-right: 35px;
}
}*/ }
.main-content form .input-group .input-group-content,
.ui-dialog .input-group .input-group-content {
position: relative; }
.main-content form .input-group .input-group-content .help-text,
.ui-dialog .input-group .input-group-content .help-text {
position: absolute;
top: -17px;
left: 540px;
text-align: right;
font-size: 12px;
font-size: 0.75rem;
color: #4e4e4e;
cursor: pointer; }
@media screen and (max-width: 1400px) {
.main-content form .input-group .input-group-content .help-text,
.ui-dialog .input-group .input-group-content .help-text {
left: 440px; } }
.main-content form .input-group label,
.ui-dialog .input-group label {
position: absolute;
top: 4px;
left: 0;
right: 0;
font-weight: bold;
color: #4e4e4e;
background-color: #ffffff;
pointer-events: none;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s; }
.main-content form .input-group ul + input + label,
.ui-dialog .input-group ul + input + label {
top: 52px; }
.main-content form .input-group ul + textarea + label,
.ui-dialog .input-group ul + textarea + label {
top: -20px; }
.main-content form .input-group.read-only label,
.main-content form .input-group .combobox.changed + label,
.main-content form .input-group .combobox.focus + label,
.main-content form .input-group .uneditable + label,
.main-content form .input-group input.has-value + label,
.main-content form .input-group input:focus + input + label,
.main-content form .input-group input:focus + label,
.main-content form .input-group label.has-value,
.main-content form .input-group textarea.has-value + label,
.main-content form .input-group textarea:focus + label,
.ui-dialog .input-group.read-only label,
.ui-dialog .input-group .combobox.changed + label,
.ui-dialog .input-group .combobox.focus + label,
.ui-dialog .input-group .uneditable + label,
.ui-dialog .input-group input.has-value + label,
.ui-dialog .input-group input:focus + input + label,
.ui-dialog .input-group input:focus + label,
.ui-dialog .input-group label.has-value,
.ui-dialog .input-group textarea.has-value + label,
.ui-dialog .input-group textarea:focus + label {
top: -17px;
font-size: 12px;
font-size: 0.75rem;
color: #68991b; }
.main-content form .input-group.read-only label,
.ui-dialog .input-group.read-only label {
color: #4e4e4e !important; }
.main-content form .input-group .combobox select,
.ui-dialog .input-group .combobox select {
line-height: 18px; }
.main-content form .input-group .uneditable,
.main-content form .input-group input.has-value,
.main-content form .input-group input:not([type=button]):not([type=reset]):not([type=submit]):focus,
.main-content form .input-group textarea.has-value,
.main-content form .input-group textarea:focus,
.ui-dialog .input-group .uneditable,
.ui-dialog .input-group input.has-value,
.ui-dialog .input-group input:not([type=button]):not([type=reset]):not([type=submit]):focus,
.ui-dialog .input-group textarea.has-value,
.ui-dialog .input-group textarea:focus {
border-bottom: 2px solid #68991b !important; }
.main-content form .input-group textarea.has-value,
.main-content form .input-group textarea:focus,
.ui-dialog .input-group textarea.has-value,
.ui-dialog .input-group textarea:focus {
height: 60px; }
.main-content form .input-group p,
.ui-dialog .input-group p {
position: absolute;
right: -45%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.main-content form .input-group.sameLine,
.ui-dialog .input-group.sameLine {
width: auto;
vertical-align: top;
margin-right: 20px; }
.main-content form .input-group.sameLine:first-of-type,
.ui-dialog .input-group.sameLine:first-of-type {
clear: left; }
.main-content form .input-group.inputFile label:not(.input-file),
.ui-dialog .input-group.inputFile label:not(.input-file) {
z-index: 50;
width: auto !important; }
.main-content form .input-group.inputFile .input-file,
.ui-dialog .input-group.inputFile .input-file {
height: 30px; }
.main-content form .input-group.read-only input, .main-content form .input-group.read-only select, .main-content form .input-group.read-only textarea,
.ui-dialog .input-group.read-only input,
.ui-dialog .input-group.read-only select,
.ui-dialog .input-group.read-only textarea {
background-color: #f5f5f5 !important;
border-bottom: 1px solid #e5e5e5 !important; }
.main-content form .input-group.cbmultiple .combobox.changed + label,
.main-content form .input-group.cbmultiple .combobox.focus + label,
.ui-dialog .input-group.cbmultiple .combobox.changed + label,
.ui-dialog .input-group.cbmultiple .combobox.focus + label {
top: 5px; }
.main-content form .input-group.cbmultiple select,
.ui-dialog .input-group.cbmultiple select {
color: #4e4e4e; }
.main-content form .input-group.fieldsetLabelwraper,
.ui-dialog .input-group.fieldsetLabelwraper {
padding: 10px 0; }
.main-content form .input-group.fieldsetLabelwraper label.fieldsetLabel,
.ui-dialog .input-group.fieldsetLabelwraper label.fieldsetLabel {
font-size: 18px; }
.main-content form .sameLine .input-group,
.ui-dialog .sameLine .input-group {
width: auto;
vertical-align: top;
margin-right: 20px; }
.main-content form .sameLine .input-group:first-of-type,
.ui-dialog .sameLine .input-group:first-of-type {
clear: left; }
.main-content form .submit-group button:first-of-type,
.ui-dialog .submit-group button:first-of-type {
margin-right: 10px; }
.main-content form .checkbox-group,
.ui-dialog .checkbox-group {
width: 100%;
float: left;
position: relative;
margin-bottom: 15px;
display: inline-block;
margin-right: 20px; }
.main-content form .checkbox-group > .input-group-content,
.ui-dialog .checkbox-group > .input-group-content {
width: 550px !important;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 15px; }
@media screen and (max-width: 1400px) {
.main-content form .checkbox-group > .input-group-content,
.ui-dialog .checkbox-group > .input-group-content {
width: 450px !important; } }
.main-content form .checkbox-group > div > span,
.ui-dialog .checkbox-group > div > span {
margin-right: 15px; }
.main-content form .checkbox-group > .input-group-content > label,
.ui-dialog .checkbox-group > .input-group-content > label {
vertical-align: top;
display: inline-block;
font-weight: bold;
height: 48px;
width: 288px;
color: #4e4e4e; }
.main-content form .checkbox-group > .input-group-content > div,
.ui-dialog .checkbox-group > .input-group-content > div {
width: 255px;
vertical-align: top;
display: inline-block; }
.main-content form .checkbox-group > .input-group-content > div span,
.ui-dialog .checkbox-group > .input-group-content > div span {
display: block; }
.main-content form .checkbox-group > .input-group-content > div span + span,
.ui-dialog .checkbox-group > .input-group-content > div span + span {
margin-top: 5px; }
.main-content form .checkbox-group input[type="checkbox"],
.main-content form .checkbox-group input[type="radio"],
.ui-dialog .checkbox-group input[type="checkbox"],
.ui-dialog .checkbox-group input[type="radio"] {
vertical-align: middle;
margin-top: -2px;
display: inline-block;
opacity: 0;
z-index: 1; }
.main-content form .checkbox-group input[type="checkbox"] + label,
.main-content form .checkbox-group input[type="radio"] + label,
.ui-dialog .checkbox-group input[type="checkbox"] + label,
.ui-dialog .checkbox-group input[type="radio"] + label {
margin-left: -15px;
position: relative;
z-index: 5; }
.main-content form .checkbox-group input[type="checkbox"] + label span,
.ui-dialog .checkbox-group input[type="checkbox"] + label span {
display: inline-block;
width: 15px;
height: 15px;
margin: -3px 10px 0 0;
vertical-align: middle;
background: url("../Images/checkbox.jpg") left -27px no-repeat;
cursor: pointer; }
.main-content form .checkbox-group input[type="checkbox"]:checked + label span,
.ui-dialog .checkbox-group input[type="checkbox"]:checked + label span {
background: url("../Images/checkbox.jpg") left top no-repeat; }
.main-content form .checkbox-group input[type="radio"] + label span,
.ui-dialog .checkbox-group input[type="radio"] + label span {
display: inline-block;
width: 15px;
height: 15px;
margin: -3px 10px 0 0;
vertical-align: middle;
background: url("../Images/radio.jpg") left top no-repeat;
cursor: pointer; }
.main-content form .checkbox-group input[type="radio"]:checked + label span,
.ui-dialog .checkbox-group input[type="radio"]:checked + label span {
background: url("../Images/radio.jpg") left -27px no-repeat; }
.main-content form .checkbox-group.modified > .input-group-content,
.ui-dialog .checkbox-group.modified > .input-group-content {
border-bottom: 2px solid #68991b; }
.main-content form .checkbox-group.large > .input-group-content,
.ui-dialog .checkbox-group.large > .input-group-content {
width: 65% !important;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 15px; }
@media screen and (max-width: 1400px) {
.main-content form .checkbox-group.large > .input-group-content,
.ui-dialog .checkbox-group.large > .input-group-content {
width: 85% !important; } }
.main-content form .checkbox-group.large > .input-group-content > div,
.ui-dialog .checkbox-group.large > .input-group-content > div {
width: 60%; }
.main-content form .checkbox-group.checkTask,
.ui-dialog .checkbox-group.checkTask {
float: none;
width: auto;
display: inline-block; }
.main-content form .sameLine .checkbox-group,
.ui-dialog .sameLine .checkbox-group {
width: auto;
vertical-align: top;
margin-right: 20px; }
.main-content form .sameLine .checkbox-group:first-of-type,
.ui-dialog .sameLine .checkbox-group:first-of-type {
clear: left; }
.main-content form table:not(.ui-datepicker-calendar),
.ui-dialog table:not(.ui-datepicker-calendar) {
margin: 10px 0;
clear: left;
float: left;
min-width: 90%; }
.main-content form table:not(.ui-datepicker-calendar) tr.error,
.ui-dialog table:not(.ui-datepicker-calendar) tr.error {
border-bottom: 3px solid #e80037; }
.main-content form table:not(.ui-datepicker-calendar) tr.error td,
.ui-dialog table:not(.ui-datepicker-calendar) tr.error td {
color: #e80037; }
.main-content form table:not(.ui-datepicker-calendar) tr.error .updateMultipleSubformItem,
.ui-dialog table:not(.ui-datepicker-calendar) tr.error .updateMultipleSubformItem {
background: #e80037 !important; }
.main-content form table:not(.ui-datepicker-calendar) td,
.main-content form table:not(.ui-datepicker-calendar) th,
.ui-dialog table:not(.ui-datepicker-calendar) td,
.ui-dialog table:not(.ui-datepicker-calendar) th {
padding: 8px 15px; }
.main-content form table:not(.ui-datepicker-calendar) th,
.ui-dialog table:not(.ui-datepicker-calendar) th {
background-color: #007dcc;
color: #ffffff; }
.main-content form table:not(.ui-datepicker-calendar) th:last-of-type,
.ui-dialog table:not(.ui-datepicker-calendar) th:last-of-type {
min-width: 100px; }
.main-content form table:not(.ui-datepicker-calendar) tr:nth-child(even),
.ui-dialog table:not(.ui-datepicker-calendar) tr:nth-child(even) {
background-color: #f5f5f5; }
.main-content form table:not(.ui-datepicker-calendar) tr:nth-child(odd),
.ui-dialog table:not(.ui-datepicker-calendar) tr:nth-child(odd) {
background-color: #fafafa; }
.main-content form table:not(.ui-datepicker-calendar) button,
.ui-dialog table:not(.ui-datepicker-calendar) button {
margin-right: 5px;
padding: 7px; }
@media screen and (max-width: 1400px) {
.main-content form table:not(.ui-datepicker-calendar) th:last-of-type,
.ui-dialog table:not(.ui-datepicker-calendar) th:last-of-type {
min-width: 108px; } }
.main-content form .autocompletefield,
.ui-dialog .autocompletefield {
display: inline-block;
position: relative;
color: #4e4e4e; }
.main-content form .autocompletefield:after,
.ui-dialog .autocompletefield:after {
content: '\f002';
font-family: FontAwesome;
position: absolute;
right: 10px;
bottom: 9px;
line-height: 14px;
z-index: 50;
pointer-events: none; }
.main-content form .autocompletefield.selected,
.ui-dialog .autocompletefield.selected {
color: #68991b; }
.main-content form .datepicker:after,
.ui-dialog .datepicker:after {
content: "\f073";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
z-index: 50; }
.input-group.buttonElement,
.input-group.submitElement {
width: auto !important;
margin-right: 15px !important; }
.input-group.buttonElement label,
.input-group.submitElement label {
display: none; }
form.filterForm {
padding: 0;
background-color: transparent; }
form.filterForm .input-group {
position: relative;
margin: 0 !important; }
form.filterForm input:not([type=button]):not([type=reset]):not([type=submit]),
form.filterForm select {
margin-bottom: 12px;
padding: 0 20px 0 10px;
color: #e6e6e6;
line-height: 28px;
height: 28px;
background-color: #e5e5e5;
border: none;
width: 100% !important; }
form.filterForm .autocompletefield {
width: 100%;
margin-bottom: 12px; }
form.filterForm .autocompletefield input {
border-radius: 0 !important;
margin-bottom: 0 !important; }
form.filterForm .combobox {
width: 100%;
padding: 0;
margin-bottom: 12px; }
form.filterForm .combobox select {
margin-bottom: 0;
margin-left: -2px;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
padding: 0 18px 0 0; }
form.filterForm .combobox select::-ms-expand {
display: none; }
form.filterForm .combobox:after {
color: #68991b;
bottom: 22px;
pointer-events: none;
top: 8px; }
form.filterForm ::-webkit-input-placeholder {
color: #e6e6e6; }
form.filterForm :-moz-placeholder {
/* Firefox 18- */
color: #e6e6e6; }
form.filterForm ::-moz-placeholder {
/* Firefox 19+ */
color: #e6e6e6; }
form.filterForm :-ms-input-placeholder {
color: #e6e6e6; }
form.filterForm button {
min-width: 98px;
float: left; }
@media screen and (min-width: 1301px) and (max-width: 1400px) {
form.filterForm button {
min-width: 78px;
padding: 10px 5px; } }
form.filterForm button[type=reset] {
float: right; }
@media screen and (max-width: 1200px) {
form.filterForm button[type=reset] {
margin-top: 8px;
float: left;
margin-right: 20px; } }
.loginForm {
margin: 7px 0; }
.loginForm button {
width: 100%;
padding: 15px;
font-size: 19px;
line-height: 20px;
font-weight: 700; }
.loginForm input {
width: 100%;
background: #ffffff;
border: 1px solid #d3d5d5;
border-radius: 4px;
color: #4e4e4e;
display: inline-block;
font-size: 14px;
font-size: 0.875rem;
padding: 15px;
color: #000000;
margin-bottom: 10px; }
.loginForm input:active, .loginForm input:focus {
outline: none; }
.loginForm ::-webkit-input-placeholder {
color: #000000; }
.loginForm :-moz-placeholder {
/* Firefox 18- */
color: #000000; }
.loginForm ::-moz-placeholder {
/* Firefox 19+ */
color: #000000; }
.loginForm :-ms-input-placeholder {
color: #000000; }
.main-content form .input-group.hiddenElement {
display: inherit;
margin: 0; }
.main-content form .input-group.hiddenElement label {
display: none; }
.main-content form #flash-messages,
.main-content form .checkbox-group > ul,
.main-content form .input-group ul {
width: 550px; }
.main-content form #flash-messages li,
.main-content form .checkbox-group > ul li,
.main-content form .input-group ul li {
padding: 5px 20px; }
@media screen and (max-width: 1400px) {
.main-content form #flash-messages,
.main-content form .checkbox-group > ul,
.main-content form .input-group ul {
width: 450px; } }
.main-content form .sameLine.fields4 #flash-messagesv,
.main-content form .sameLine.fields4 .checkbox-group > ul,
.main-content form .sameLine.fields4 .input-group ul {
width: 265px; }
#schedule-assign-form,
#schedule-plan-form {
display: none; }
.inputFile {
cursor: pointer; }
.inputFile.has-value label:not(.input-file) {
top: -17px;
font-size: 12px;
font-size: 0.75rem;
color: #007dcc; }
.inputFile.has-value ul ~ label:not(.input-file) {
top: 5px; }
.inputFile.has-value ul ~ label + .input-file {
top: 20px; }
.input-group.read-only {
opacity: 0.7; }
.input-group.read-only input {
pointer-events: none; }
form:after,
table:after {
content: "";
display: table;
clear: both; }
.firstButton {
clear: left; }
hr.divider {
border: none;
width: calc(100% + 50px);
border-bottom: 15px solid #f5f5f5;
float: left;
margin: 10px -25px; }
.ui-autocomplete {
z-index: 1500; }
#exportForm {
display: inline-block;
padding: 0;
position: absolute;
top: 50%;
right: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: transparent; }
#exportForm button {
border: 1px solid #ffffff;
border-radius: 4px; }
#exportForm button > i {
margin-right: 10px; }
.import-form {
display: none;
position: absolute;
top: 70%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 9999;
padding-top: 45px !important;
border: 1px solid #68991b;
border-radius: 4px; }
.import-form .notifications-close {
color: #ffffff;
z-index: 50; }
.import-form .title {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #68991b;
color: #ffffff;
font-weight: 700;
line-height: 26px;
padding: 8px 10px 8px 25px; }
.ui-dialog {
display: none; }
.checkbox-table {
clear: both;
margin-bottom: 20px;
display: inline-block; }
.quantity-form-content {
display: none; }
.quantity-form {
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
.quantity-form {
position: absolute;
width: auto;
min-height: 150px;
background: #ffffff;
padding: 15px;
z-index: 1110;
border: 2px solid #68991b;
border-radius: 4px;
white-space: nowrap;
right: 0;
text-align: center; }
.quantity-form p {
padding: 0 !important;
margin: 2px 0; }
.quantity-form input[type=text],
.quantity-form label {
display: block; }
.quantity-form label {
font-weight: bold; }
.quantity-form input[type=text] {
width: 100%;
margin: 10px 0; }
.quantity-form input[type=submit] + input[type=submit] {
margin-left: 15px; }
.main-content form .input-group .input-error.read-only label,
.main-content form .input-group .input-error .combobox.changed + label,
.main-content form .input-group .input-error .combobox.focus + label,
.main-content form .input-group .input-error .uneditable + label,
.main-content form .input-group .input-error input.has-value + label,
.main-content form .input-group .input-error input:focus + input + label,
.main-content form .input-group .input-error input:focus + label,
.main-content form .input-group .input-error label,
.main-content form .input-group .input-error label.has-value,
.main-content form .input-group .input-error textarea.has-value + label,
.main-content form .input-group .input-error textarea:focus + label {
color: #e80037 !important; }
.main-content form .input-group .input-error .uneditable,
.main-content form .input-group .input-error input.has-value,
.main-content form .input-group .input-error input:not([type=button]):not([type=reset]):not([type=submit]):focus,
.main-content form .input-group .input-error input:not([type=button]):not([type=reset]):not([type=submit]):not([type=radio]):not([type=checkbox]),
.main-content form .input-group .input-error textarea.has-value,
.main-content form .input-group .input-error textarea:focus {
border-bottom: 2px solid #e80037 !important; }
.add-form {
display: none;
position: fixed;
background: #ffffff;
top: 50%;
left: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 9999;
border: 1px solid #68991b;
border-radius: 4px;
width: 604px; }
@media screen and (max-width: 1400px) {
.add-form {
width: 504px; } }
.add-form .title {
font-size: 24px;
color: #68991b;
font-weight: 700;
margin-bottom: 10px; }
.add-form button[type=reset] {
margin: 12px; }
.add-form .userdepHead {
margin-top: 5px; }
.add-form button > i {
margin-right: 5px; }
.add-form .input-group ul li {
background-color: #e80037; }
.add-form #task-tabs {
height: 80%; }
.add-form.formTabs button i {
margin: 0 5px; }
.add-form .tabItems {
min-height: 200px;
max-height: 300px;
overflow: hidden; }
.filters-header {
margin-bottom: 10px; }
.filters-header .new-entry-button {
position: relative;
float: left;
border: 1px solid #68991b;
padding: 6px 15px 6px 40px;
font-size: 13px; }
.filters-header .new-entry-button:before {
content: "\f067";
font-family: fontawesome;
position: absolute;
left: 15px;
top: 7px; }
.filters-header .filterFormh {
width: 100%;
padding: 0;
background-color: transparent; }
.filters-header .filterFormh .input-group {
width: 50%;
position: relative;
margin: 0 !important; }
.filters-header .filterFormh .input-group.pull-right {
text-align: right; }
.filters-header .filterFormh .input-group label {
position: relative;
display: inline-block;
font-weight: 400;
background-color: transparent;
line-height: 30px;
vertical-align: top;
top: auto; }
.filters-header .filterFormh .input-group .combobox {
width: auto !important;
padding: 0;
min-width: 175px;
margin-bottom: 0;
margin-left: 5px;
border: none;
background: #e6e6e6;
border-radius: 4px;
height: 30px; }
.filters-header .filterFormh .input-group .combobox:after {
top: 6px; }
.filters-header .filterFormh .input-group select {
width: 100%;
height: 30px;
margin-left: 0; }
.filters-header .filterFormh .input-group input:not([type=button]):not([type=reset]):not([type=submit]) {
border: none !important;
background: #e6e6e6 !important;
border-radius: 4px !important;
width: 155px !important;
padding: 6px 28px 6px 10px !important; }
.filters-header .filterFormh .input-group input:not([type=button]):not([type=reset]):not([type=submit]):focus {
border-bottom: none !important; }
.filters-header .filterFormh .input-group .autocompletefield:after {
bottom: 8px; }
.filters-header .filterFormh .input-group.smallInput {
width: auto;
margin-right: 15px !important; }
.filters-header .filterFormh .button,
.filters-header .filterFormh button,
.filters-header .filterFormh input[type=reset],
.filters-header .filterFormh input[type=submit] {
padding: 7px 10px; }
/**
**
** IE9 styling
**
**/
/*
Combobox
In this file will be added the style for the Combobox element
Styleguide 9.0
*/
.combobox {
width: 550px;
position: relative;
border: none;
border-bottom: 1px solid #e5e5e5;
color: #4e4e4e;
display: inline-block;
font-size: 14px;
font-size: 0.875rem;
cursor: pointer;
padding: 4px 2px; }
.combobox:not(.multiple):after {
content: '\f0dd';
font-family: FontAwesome;
color: #4e4e4e;
position: absolute;
right: 10px;
bottom: 9px;
line-height: 14px;
z-index: 50;
pointer-events: none; }
.combobox:not(.multiple) select {
width: 100%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer; }
.combobox:not(.multiple) select:focus {
outline: none; }
.combobox.focus {
color: #68991b;
border-bottom: 2px solid #68991b; }
.combobox input {
cursor: pointer;
margin-bottom: 0; }
.combobox ul {
display: none;
position: absolute;
top: 25px;
z-index: 60;
list-style: none;
padding: 10px;
background-color: #e5e5e5;
margin: 0;
width: 100%;
border-radius: 4px; }
.combobox ul li {
margin-bottom: 3px; }
.combobox ul li:hover {
cursor: pointer;
color: #007dcc; }
.combobox.darkBg {
background-color: #e5e5e5; }
.combobox.darkBg:after {
color: #68991b; }
.combobox.multiple {
padding-top: 28px; }
.combobox.multiple select {
width: 100%; }
.combobox select {
color: #4e4e4e;
padding-left: 10px; }
@media screen and (max-width: 1400px) {
.combobox {
width: 450px !important; } }
.read-only .combobox {
color: #4e4e4e !important; }
.read-only .combobox.focus {
border-bottom: none; }
.sameLine.fields4 .combobox {
width: 265px; }
@media screen and (max-width: 1400px) {
.sameLine.fields4 .combobox {
width: 215px !important; } }
/**
**
** IE9 styling
**
**/
.ie9 .combobox {
overflow: hidden; }
.ie9 .combobox:not(.multiple) select {
width: 105%; }
/*
Header
In this file will be added the style for header elements
Styleguide 5.0
*/
header {
height: 68px;
color: #4e4e4e;
background-color: #ffffff;
box-shadow: -1px 2px 5px 0 rgba(0, 0, 0, 0.05);
z-index: 200;
position: relative; }
header a > i {
color: #4e4e4e; }
header p {
margin-bottom: 0;
line-height: 1.1; }
/**
* Logo
**/
.logo {
background: url("../Images/logo.png") no-repeat center 0 transparent;
background-size: contain;
width: 245px;
height: 58px;
display: inline-block;
vertical-align: top;
margin: 5px 0;
font: 0/0 a;
text-shadow: none;
color: transparent; }
.endappTitle {
display: inline-block;
line-height: 66px;
vertical-align: top;
margin: 0 25px;
font-size: 21px;
color: black;
text-transform: capitalize;
font-style: italic;
font-weight: 600; }
/**
* Header phone
**/
.header-phone {
font-weight: 700; }
.header-phone i {
margin-right: 5px; }
/**
* Notification dropdown
**/
.dropdown-notification {
display: none;
position: absolute;
top: 27px;
right: -9px;
background-color: transparent;
width: 310px;
height: 265px;
z-index: 50;
padding-top: 10px; }
.dropdown-notification:before {
content: '\f0d8';
font-family: fontawesome;
color: #e1235d;
position: absolute;
right: 14px;
top: -19px;
font-size: 32px;
color: #68991b; }
.dropdown-notification .dropdown-content {
background-color: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 4px; }
.dropdown-notification .notification-title {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: #68991b;
color: #ffffff;
font-weight: 700;
line-height: 32px;
padding-left: 20px; }
.dropdown-notification .notification-title i {
margin-right: 8px; }
.dropdown-notification p:not(.notification-title) {
padding: 20px; }
.dropdown-notification table {
width: 100%;
margin: 10px auto; }
.dropdown-notification table tr {
cursor: pointer; }
.dropdown-notification table thead th,
.dropdown-notification table tbody td {
padding: 5px; }
.dropdown-notification table th {
font-weight: 700;
text-align: left;
border-bottom: none; }
.dropdown-notification table td i {
margin-top: 4px; }
.dropdown-notification table td i,
.dropdown-notification table td a {
font-size: 14px; }
.dropdown-notification table th:first-child,
.dropdown-notification table td:first-child {
padding-left: 20px; }
.dropdown-notification table th:last-child,
.dropdown-notification table td:last-child {
padding-right: 20px; }
.dropdown-notification table td:nth-child(3) {
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
white-space: nowrap;
text-align: left; }
.dropdown-notification .more-task {
font-size: 14px;
font-weight: 700;
line-height: 38px;
padding-left: 20px;
width: 292px;
display: block; }
.dropdown-notification .more-task i {
float: right;
line-height: 38px;
font-size: 16px;
color: #4e4e4e; }
/**
* Setting and logout panel
**/
.header-settings-panel {
margin: 8px 32px 8px 0;
padding: 16px;
text-align: right;
position: relative; }
.header-settings-panel .settings {
display: inline-block; }
.header-settings-panel .settings:last-of-type {
margin-left: 12px; }
.header-settings-panel .setting-date {
display: block;
margin-top: 12px; }
.header-settings-panel .dropdown-notification {
top: 14px !important;
right: 25px !important;
text-align: left;
padding-top: 26px; }
.header-settings-panel .dropdown-notification ul {
width: 272px;
margin: 10px auto; }
.header-settings-panel .dropdown-notification ul li {
line-height: 26px;
padding-left: 25px;
position: relative; }
.header-settings-panel .dropdown-notification ul li i {
position: absolute;
left: 0;
top: 6px; }
.header-settings-panel .dropdown-notification ul li a {
display: block;
color: #4e4e4e;
font-weight: bold; }
.header-settings-panel .dropdown-notification ul li a:hover, .header-settings-panel .dropdown-notification ul li a:hover i {
color: #68991b; }
.header-settings-panel .dropdown-notification ul li.active a {
color: #68991b; }
.header-settings-panel .dropdown-notification ul li.active a i {
color: #68991b; }
.header-settings-panel .dropdown-notification:before {
top: -3px;
right: 21px; }
/**
* User panel
**/
.header-user-infos {
margin: 8px 0;
padding: 5px 0 5px 16px; }
.header-user-infos img {
height: 42px;
width: auto; }
.header-user-infos p {
margin-bottom: 0;
line-height: 1; }
.header-user-infos p.user-function, .header-user-infos p.user-name {
font-weight: 700; }
.header-user-infos p.user-name {
color: #68991b; }
.header-user-infos .pull-left {
border-right: 2px solid #f5f5f5;
padding-right: 10px; }
.header-user-infos .role-wraper {
position: relative; }
.header-user-infos .rounded {
width: 42px;
height: 42px;
overflow: hidden;
margin-left: 10px; }
.header-user-infos .role-title {
cursor: pointer;
font-style: italic;
position: relative;
padding-left: 14px; }
.header-user-infos .role-title.no-cursor {
cursor: default; }
.header-user-infos .role-title:before {
content: "\f0c0";
display: inline-block;
font: normal normal normal 10px/1 FontAwesome;
position: absolute;
left: 0;
top: 4px; }
.header-user-infos .role-title + .role-names {
position: absolute;
background-color: white;
z-index: 25;
padding: 5px 15px;
left: -15px;
border-radius: 4px;
display: none;
box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.1);
top: 20px; }
.header-user-infos .user-name,
.header-user-infos .user-function {
white-space: nowrap;
padding: 3px 0;
text-align: right; }
.header-user-infos .dep-title {
cursor: pointer;
font-style: italic;
position: relative;
padding-left: 14px; }
.header-user-infos .dep-title:before {
content: "\f1fa";
display: inline-block;
font: normal normal normal 10px/1 FontAwesome;
position: absolute;
left: 0;
top: 4px; }
/**
* Alert panel
**/
.header-alert {
height: 68px;
min-width: 60px;
padding-left: 40px;
position: relative; }
.header-alert a {
font-size: 28px;
position: relative;
margin-right: 16px;
cursor: default;
line-height: 68px;
float: left; }
.header-alert a i {
color: #0cd384;
cursor: pointer; }
.header-alert > p {
font-weight: 700;
line-height: 68px;
float: left; }
.header-alert .task-number {
position: absolute;
top: 18px;
right: -4px;
background-color: #e80037;
color: #ffffff;
font-size: 11px;
line-height: 1;
font-weight: 700;
padding: 4px;
border-radius: 50%;
display: block;
width: 19px;
height: 19px;
text-align: center;
cursor: pointer; }
.header-alert .dropdown-notification {
width: 464px;
height: 350px;
top: 58px;
left: 40px;
right: auto;
padding-bottom: 20px;
overflow: hidden; }
.header-alert .dropdown-notification:before {
content: ''; }
.header-alert .dropdown-notification .dropdown-content {
height: 328px;
padding-bottom: 20px;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1); }
.header-alert .dropdown-notification .notification-title {
line-height: 58px;
background-color: #ffffff;
color: #0cd384;
font-weight: 700;
font-size: 24px; }
/* Menu
A description.
Markup:
.class - description of the class state
:pseudo - description of the pseudo state
Styleguide 6.0
*/
.side-menu {
position: relative;
display: inline-block;
width: 245px;
background-color: #3b464d;
padding: 35px 0 30px;
vertical-align: top;
height: 100%;
z-index: 6500; }
.side-menu .menu + .menu {
margin-top: 22px; }
.side-menu .menu-button {
position: absolute;
right: -15px;
top: 0;
background-color: #3b464d;
color: #e5e5e5;
padding: 5px 9px;
border-radius: 4px;
z-index: 50;
-webkit-transition: 0.1s ease;
transition: 0.1s ease; }
.side-menu li,
.side-menu a,
.side-menu p {
color: #e5e5e5;
display: block; }
.side-menu li.active a,
.side-menu a:hover {
color: #0cd384; }
.side-menu ul .fa {
margin-right: 10px; }
.side-menu .menu-title {
position: relative;
cursor: pointer;
font-size: 16px;
font-weight: bold; }
.side-menu .menu-title.small {
margin-left: -11px;
text-align: center;
width: 40px;
background-color: #4c5962;
padding: 4px 2px;
-webkit-transition: color 0.5s ease-in-out;
transition: color 0.5s ease-in-out; }
@-moz-document url-prefix() {
.side-menu .menu-title.small {
word-break: break-all; } }
.side-menu .menu-admin {
position: absolute;
bottom: 12px;
left: 15px;
right: 23px;
background: #3b464d; }
.side-menu .menu-admin ul {
position: absolute;
left: -10px;
bottom: 45px;
background-color: #2d353a;
width: 290px;
padding: 17px;
border-radius: 4px; }
.side-menu .menu-admin ul:after {
content: '\f0d7';
font-family: fontawesome;
font-size: 30px;
position: absolute;
color: #2d353a;
bottom: -27px; }
.side-menu .menu-admin-title {
position: relative;
cursor: pointer;
font-size: 16px;
font-weight: bold;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out; }
.side-menu .menu-admin-title i {
margin-right: 5px; }
.side-menu a {
line-height: 16px;
padding: 5px 0;
position: relative; }
.side-menu ul.closed {
display: none; }
.side-menu .menu ul li {
padding-left: 30px;
position: relative;
line-height: 26px; }
.side-menu .menu ul li i {
position: absolute;
left: -30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.side-menu .menu ul li i.fa.fa-plus-square {
font-size: 16px; }
.side-menu .menu ul li li {
padding-left: 10px; }
.side-menu .selectYear {
display: none;
background-color: #4c5962;
position: relative;
padding: 2px 0 5px;
border-radius: 4px; }
.side-menu .selectYear a {
padding: 0 12px; }
.side-menu .selectYearparent {
background-color: #4c5962; }
.side-menu .tasks-menu {
padding-left: 0 !important;
white-space: nowrap; }
.side-menu .tasks-menu p,
.side-menu .tasks-menu a {
position: relative;
display: inline-block;
width: 64px;
margin-bottom: 0; }
.side-menu .tasks-menu p:hover .process-number,
.side-menu .tasks-menu a:hover .process-number {
background-color: #68991b; }
.side-menu .tasks-menu p:hover .process-number:before, .side-menu .tasks-menu p:hover i,
.side-menu .tasks-menu a:hover .process-number:before,
.side-menu .tasks-menu a:hover i {
color: #68991b;
cursor: default; }
.side-menu .tasks-menu .process-number {
float: left;
margin-left: 24px; }
.side-menu .tasks-menu i {
left: 0 !important; }
.side-menu.closed .menu:not(.menu-admin) {
margin-top: 10px;
position: relative; }
.side-menu.closed .menu:not(.menu-admin) ul {
position: absolute;
top: 15px;
width: 0;
background-color: #4c5962;
z-index: 5000;
left: 25px;
padding: 30px 20px 10px;
border-radius: 4px; }
.side-menu.closed .menu:not(.menu-admin):first-of-type ul {
top: 0; }
.side-menu.closed .menu-button {
right: 50%;
-webkit-transform: translateX(50%);
transform: translateX(50%); }
.side-menu.closed .menu.menu-admin {
left: 50%;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
.side-menu.closed .menu-admin-title {
font: 0/0 a;
text-shadow: none;
color: transparent; }
.side-menu.closed .menu-admin-title i {
font-size: 20px;
color: #e5e5e5; }
.side-menu.closed .menu ul {
display: none; }
.side-menu.closed .menu-title:before {
content: none; }
.side-menu.closed li.menu-title-open {
position: absolute !important;
left: 0;
top: 0;
background-color: #4c5962;
font-size: 16px;
font-weight: bold;
width: 100%; }
.side-menu.closed .menu-title.small.closed {
color: transparent; }
.side-menu.closed .menu ul li {
white-space: nowrap; }
.side-menu .side-menu-content {
height: calc(100% - 30px);
padding: 0 12px 0 15px; }
.side-menu .side-menu-content .mCSB_scrollTools {
right: -4px; }
.side-menu .side-menu-content .mCSB_container {
margin-right: 0;
padding-right: 14px; }
@media screen and (max-width: 1300px) {
.side-menu {
width: 48px;
opacity: 0; } }
.side-menu.closed + .main-content fieldset.multipleSubform.lightbox fieldset {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
/* Container
A description.
Markup:
.class - description of the class state
:pseudo - description of the pseudo state
Styleguide 5.0
*/
.container {
margin: 0 auto;
padding: 15px;
width: 1170px; }
@media screen and (min-width: 1000px) and (max-width: 1300px) {
.container {
width: 1000px; } }
.halfWidth {
width: 49%;
margin-left: 0;
float: left; }
.halfWidth:nth-child(odd) {
margin-left: 2%; }
@media screen and (max-width: 1550px) {
.halfWidth {
width: 100%;
margin-left: 0 !important; } }
.planned-tasks .halfWidth:nth-child(odd) {
margin-left: 0; }
.planned-tasks .halfWidth:nth-child(even) {
margin-left: 2%; }
.planned-tasks .row {
display: inline-block;
width: 100%; }
.fullWidth {
width: 100%;
min-height: 50px;
float: left; }
.column13 {
width: 34%;
float: left; }
.column23 {
width: 64%;
float: left;
margin-left: 2%; }
.contentColumn {
float: left;
width: 79%;
padding: 25px 15px;
-webkit-transition: 0.4s ease;
transition: 0.4s ease; }
.contentColumn.big {
width: calc(100% - 40px); }
@media screen and (max-width: 1400px) {
.contentColumn {
width: 79%; } }
.content {
border-radius: 4px;
background-color: #ffffff;
margin-bottom: 32px;
position: relative; }
.content.column13, .content.column23, .content.halfWidth {
height: 245px; }
.boldTitleunderline {
font-weight: 700;
padding-bottom: 3px;
border-bottom: 4px solid #e5e5e5;
margin-bottom: 12px; }
.process-number {
background-color: #e80037;
color: #ffffff;
border-radius: 4px;
padding: 4px 10px;
font-size: 12px;
font-weight: 700;
line-height: 1;
float: right;
position: relative;
margin-top: 3px; }
.process-number:before {
content: '\f0d9';
font-family: fontawesome;
color: #e80037;
position: absolute;
left: -8px;
top: -2px;
font-size: 25px; }
main {
height: 100%;
position: relative;
display: block;
min-width: 100%; }
/**
* Main content
**/
.main-content {
position: absolute;
background-color: #f5f5f5;
top: 0;
left: 248px;
right: 0;
bottom: 56px;
overflow-x: hidden;
overflow-y: auto;
width: calc(100% - 248px);
padding: 32px; }
.main-content.animated {
-webkit-transition: 0.5s ease;
transition: 0.5s ease; }
.main-content.big {
width: calc(100% - 51px);
left: 48px; }
.main-content > .jspContainer > .jspVerticalBar {
right: 4px; }
.main-content .jspPane {
padding: 32px 32px 88px !important;
box-sizing: border-box;
width: 100% !important;
min-height: 100%; }
.main-content.animate {
-webkit-transition: 0.2s ease;
transition: 0.2s ease; }
/**
* Task graph and legend
**/
.scheduled-tasks {
width: 210px;
height: 210px;
margin-top: 2px;
margin-left: 20px;
z-index: 5; }
@media screen and (max-width: 1600px) {
.scheduled-tasks {
margin-top: 0;
margin-left: 0; } }
.task-graph {
position: relative; }
.task-graph p {
width: 128px;
height: 105px;
position: absolute;
z-index: 50;
text-align: center;
font-weight: 700;
font-size: 22px;
line-height: 1;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-left: 10px; }
.task-graph p .task-graph-text {
display: none;
word-spacing: 128px;
text-align: center; }
.task-graph p .task-graph-text span {
display: block;
font-size: 50px; }
.task-graph p .task-graph-text-default {
display: block; }
@media screen and (max-width: 1600px) {
.task-graph p {
margin-left: 0; } }
@media screen and (max-width: 1400px) {
.task-graph {
float: none !important;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); } }
.task-graph-text {
position: relative; }
.task-graph-text ul {
position: absolute;
left: 45px;
top: 35px;
width: 155px; }
.task-graph-text ul li {
padding-left: 38px;
font-weight: 700;
font-size: 16px;
line-height: 23px;
margin-bottom: 8px;
position: relative; }
.task-graph-text ul li:before {
content: '';
width: 23px;
height: 23px;
border-radius: 4px;
position: absolute;
left: 0;
top: 0; }
.task-graph-text ul li.red:before {
background-color: #e80037; }
.task-graph-text ul li.blue:before {
background-color: #3e92d1; }
.task-graph-text ul li.green:before {
background-color: #68991b; }
.task-graph-text ul li.dark-grey:before {
background-color: #3b464d; }
.task-graph-text ul li.yellow:before {
background-color: #ffcc00; }
@media screen and (max-width: 1600px) {
.task-graph-text ul {
left: 5px; } }
@media screen and (max-width: 1400px) {
.task-graph-text {
display: none; } }
/**
* History panel
**/
.task-history {
padding: 0;
position: relative;
overflow: hidden;
border-bottom: 5px solid #ffffff; }
.task-history > p:not(.tasks-title) {
padding: 12px 17px; }
.task-history .history-content {
position: relative;
padding: 5px 17px;
height: 210px; }
.task-history .vertical-line {
position: absolute;
top: 5px;
bottom: 17px;
left: 30px;
width: 0;
border: 1px solid #f5f5f5; }
.task-history .history-date {
background-color: #f5f5f5;
border-radius: 4px;
color: #68991b;
font-weight: 700;
font-size: 14px;
padding: 6px;
display: inline-block;
z-index: 50;
position: relative;
margin: 0; }
.task-history ul {
padding-left: 45px;
margin: 9px 0;
color: #4e4e4e; }
.task-history .jspPane {
padding: 13px 17px !important; }
.task-history .graphs {
position: relative;
width: 70%;
margin: 0 auto 9px;
height: 209px; }
.task-history .graphs .vertical-graph-with-text {
position: relative;
width: 25%;
height: 180px;
background: transparent;
overflow: visible;
float: left; }
.task-history .graphs .vertical-graph-with-text .graph-bar-itemh {
width: 100%;
border-radius: 4px;
position: absolute;
bottom: 0;
left: -8px;
overflow: hidden; }
.task-history .graphs .vertical-graph-with-text.red .graph-barh {
background-color: #e80037; }
.task-history .graphs .vertical-graph-with-text.green .graph-barh {
background-color: #68991b; }
.task-history .graphs .vertical-graph-with-text.dark-grey .graph-barh {
background-color: #3b464d; }
.task-history .graphs .vertical-graph-with-text.blue .graph-barh {
background-color: #3e92d1; }
.task-history .graphs .vertical-graph-with-text .graph-barh {
position: absolute;
left: 50%;
top: 0;
width: 16px;
height: 100%;
border-radius: 4px;
-webkit-animation-name: verticalGraph;
animation-name: verticalGraph;
-webkit-animation-duration: 2s;
animation-duration: 2s; }
.task-history .graphs .vertical-graph-with-text .graph-texth {
position: absolute;
text-align: center;
bottom: -46px;
font-weight: 700;
-webkit-animation-name: verticalGraph;
animation-name: verticalGraph;
-webkit-animation-duration: 2s;
animation-duration: 2s;
width: 100%;
height: 42px;
line-height: 16px; }
@media screen and (max-width: 1400px) {
.task-history .graphs .vertical-graph-with-text .graph-texth {
bottom: -46px;
line-height: 16px;
height: 32px; } }
@media screen and (max-width: 1400px) {
.task-history .graphs .vertical-graph-with-text {
height: 172px; } }
@media screen and (max-width: 1400px) {
.task-history .graphs {
width: 100%; } }
.task-history:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
bottom: 5px;
left: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 50; }
/**
* Tasks panel
**/
.tasks {
margin-bottom: 20px;
clear: both; }
.tasks .header button {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.tasks form {
background-color: transparent;
padding: 5px 0; }
.tasks form a {
display: inline-block;
background-color: #ebebeb;
padding: 10px;
border-radius: 4px;
margin-right: 7px;
font-weight: bold;
color: #000000; }
.tasks form a i {
line-height: 21px;
font-size: 12px; }
.tasks form a:hover {
color: #0cd384; }
.tasks form a.date-interval {
margin-right: 0; }
/* title */
.date-filters,
.main-content h1,
.main-content h3,
.page-title {
color: #0cd384;
padding: 10px 10px 10px 0;
margin-top: 0;
margin-bottom: 10px;
font-size: 24px;
font-weight: bold;
line-height: 24px;
font-weight: 700;
text-transform: uppercase;
clear: both;
text-transform: none; }
.date-filters > a,
.date-filters p,
.main-content h1 > a,
.main-content h1 p,
.main-content h3 > a,
.main-content h3 p,
.page-title > a,
.page-title p {
display: inline-block;
vertical-align: middle;
color: #ffffff;
margin-right: 15px;
font-size: 18px; }
.date-filters > a,
.main-content h1 > a,
.main-content h3 > a,
.page-title > a {
border: 1px solid #ffffff;
padding: 6px 15px;
border-radius: 4px; }
.date-filters > a:before,
.main-content h1 > a:before,
.main-content h3 > a:before,
.page-title > a:before {
content: "\f0ce";
margin-right: 10px;
font: normal normal normal 14px/1 FontAwesome; }
/* new entry button */
.new-entry {
position: absolute;
top: 22px;
right: 20px;
border: 1px solid #ffffff;
padding: 6px 15px 6px 40px;
font-size: 13px; }
.new-entry:before {
content: "\f067";
font-family: fontawesome;
position: absolute;
left: 15px;
top: 7px; }
/* import button */
.import-button {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 20px;
border: 1px solid #ffffff;
padding: 6px 15px 6px 40px;
font-size: 13px; }
.import-button:before {
content: "\f093";
font-family: fontawesome;
position: absolute;
left: 15px;
top: 7px; }
.import-button + form + .new-entry {
right: 140px; }
.main-content .header {
position: relative; }
.main-content .header .new-entry {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
div#calendar {
padding-top: 25px;
padding-bottom: 25px; }
div#calendar input {
width: 220px;
margin-right: 50px;
margin-bottom: 10px; }
div#calendar label {
display: inline-block;
min-width: 60px;
margin-bottom: 10px; }
.ui-autocomplete-loading {
background: url("../Images/spinner.gif") no-repeat right 50px center !important;
background-size: contain !important; }
.ui-menu .ui-menu-item {
font-size: 12px;
padding-bottom: 3px; }
.spinner,
.spinnerTable {
background: rgba(255, 255, 255, 0.6);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000001; }
.spinnerTable {
background: transparent; }
/*
Footer
In this file will be added the style for footer elements
Styleguide 6.0
*/
footer {
position: fixed;
left: 245px;
right: 0;
bottom: 0;
background-color: #2d353a;
color: #ffffff;
padding: 12px 16px 10px;
height: 56px;
z-index: 1500; }
footer p {
margin: 0;
line-height: 34px;
font-weight: 700; }
/*
Data table
In this file will be added the style for the Data table element
Styleguide 7.0
*/
/*
* Table styles
*/
table.dataTable {
width: 100%;
margin: 0 auto;
clear: both;
border-collapse: separate;
border-spacing: 0;
border-radius: 4px;
/*
* Header and footer styles
*/
/*
* Body styles
*/ }
table.dataTable tfoot th,
table.dataTable thead th {
font-weight: bold;
min-width: 85px; }
table.dataTable tfoot th.buttonColumn,
table.dataTable thead th.buttonColumn {
width: 240px; }
table.dataTable tfoot th.infoColumn,
table.dataTable thead th.infoColumn {
min-width: auto;
width: 35px; }
table.dataTable tfoot th .date,
table.dataTable thead th .date {
display: block;
font-weight: 400;
line-height: 1; }
table.dataTable thead td,
table.dataTable thead th {
padding: 10px;
border-bottom: 0 solid #d7d7d7;
text-align: left;
background: #ebebeb; }
table.dataTable thead td:active,
table.dataTable thead th:active {
outline: none; }
table.dataTable tfoot td,
table.dataTable tfoot th {
padding: 10px 18px 6px;
border-top: 0 solid #d7d7d7; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
cursor: pointer;
*cursor: hand; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_desc_disabled {
background-repeat: no-repeat;
background-position: center right; }
table.dataTable thead .sorting {
background-image: url("../images/sort_both.png"); }
table.dataTable thead .sorting_asc {
background-image: url("../images/sort_asc.png"); }
table.dataTable thead .sorting_desc {
background-image: url("../images/sort_desc.png"); }
table.dataTable thead .sorting_asc_disabled {
background-image: url("../images/sort_asc_disabled.png"); }
table.dataTable thead .sorting_desc_disabled {
background-image: url("../images/sort_desc_disabled.png"); }
table.dataTable tbody tr {
background-color: #ffffff; }
table.dataTable tbody tr.selected {
background-color: #ebebeb; }
table.dataTable tbody tr:nth-child(odd) {
background: #e6e6e6; }
table.dataTable tbody td,
table.dataTable tbody th {
padding: 1px 10px; }
table.dataTable tbody td button {
padding: 5px 10px;
margin-right: 6px;
width: 34px;
float: left; }
table.dataTable tbody td button:hover {
background: #293136; }
table.dataTable tbody td button:last-child {
margin-right: 0; }
table.dataTable tbody td .userTask {
display: inline-block;
vertical-align: top;
width: 19px;
height: 19px;
line-height: 19px;
text-align: center;
font-weight: 700; }
table.dataTable tbody td .userTask.red {
background-color: #e80037;
color: #ffcc00; }
table.dataTable tbody td .userTask.blue {
background-color: #3e92d1;
color: #ffffff; }
table.dataTable tbody td .userTask.green {
background-color: #0cd384;
color: #ffffff; }
table.dataTable tbody td .userTask.grey {
background-color: #3b464d;
color: #ffffff; }
table.dataTable tbody td .userTask.white {
background-color: #ffffff;
color: #3b464d; }
table.dataTable tbody td .userTask.yellow {
background-color: #ffcc00;
color: #3b464d; }
table.dataTable tbody td .userTask.border {
border: 2px solid #000000;
line-height: 13px; }
table.dataTable tbody td .userTask.green-stripe {
background: -webkit-repeating-linear-gradient(45deg, #0cd384, #0cd384 2px, #EFE4B0 4px, #EFE4B0 6px);
background: repeating-linear-gradient(45deg, #0cd384, #0cd384 2px, #EFE4B0 4px, #EFE4B0 6px);
background-attachment: fixed; }
table.dataTable tbody td .userTask.grey-stripe {
background: -webkit-repeating-linear-gradient(45deg, #3b464d, #3b464d 2px, #EFE4B0 4px, #EFE4B0 6px);
background: repeating-linear-gradient(45deg, #3b464d, #3b464d 2px, #EFE4B0 4px, #EFE4B0 6px);
background-attachment: fixed; }
table.dataTable tbody td .userTask:nth-child(odd) {
margin-right: 9px; }
table.dataTable.col-border td:not(:last-child),
table.dataTable.col-border th:not(:last-child) {
border-right: 1px solid #d7d7d7; }
table.dataTable.col-border td:not(:last-child) .fa.fa-user,
table.dataTable.col-border th:not(:last-child) .fa.fa-user {
margin-left: 5px; }
table.dataTable.border th:not(:last-child) {
border-right: 1px solid #d7d7d7; }
table.dataTable.border td {
border-right: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7; }
table.dataTable.border td .fa.fa-user {
margin-left: 5px; }
table.dataTable.border td:last-child {
border-right: none; }
table.dataTable.display tbody td,
table.dataTable.display tbody th, table.dataTable.row-border tbody td,
table.dataTable.row-border tbody th {
border-top: 1px solid #d7d7d7; }
table.dataTable.display tbody tr:first-child td,
table.dataTable.display tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td,
table.dataTable.row-border tbody tr:first-child th {
border-top: none; }
table.dataTable.cell-border tbody td,
table.dataTable.cell-border tbody th {
border-top: 1px solid #d7d7d7;
border-right: 1px solid #d7d7d7; }
table.dataTable.cell-border tbody tr td:first-child,
table.dataTable.cell-border tbody tr th:first-child {
border-left: 1px solid #d7d7d7; }
table.dataTable.cell-border tbody tr:first-child td,
table.dataTable.cell-border tbody tr:first-child th {
border-top: none; }
table.dataTable.display tbody tr.odd, table.dataTable.stripe tbody tr.odd {
background-color: #f9f9f9; }
table.dataTable.display tbody tr.odd.selected, table.dataTable.stripe tbody tr.odd.selected {
background-color: #e5e5e5; }
table.dataTable.display tbody tr:hover, table.dataTable.hover tbody tr:hover {
background-color: #ebebeb; }
table.dataTable.display tbody tr:hover.selected, table.dataTable.hover tbody tr:hover.selected {
background-color: #ebebeb; }
table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3, table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3 {
background-color: #f9f9f9; }
table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3, table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3 {
background-color: #e6e6e6; }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: #f1f1f1; }
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
background-color: #f3f3f3; }
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
background-color: whitesmoke; }
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #dedede; }
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
background-color: #dfdfdf; }
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
background-color: #e1e1e1; }
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: #f9f9f9; }
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
background-color: #fbfbfb; }
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
background-color: #fdfdfd; }
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
background-color: #e6e6e6; }
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
background-color: #e8e8e8; }
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
background-color: #eaeaea; }
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
background-color: #eaeaea; }
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
background-color: #ebebeb; }
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
background-color: #eeeeee; }
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
background-color: #d7d7d7; }
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
background-color: #d9d9d9; }
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
background-color: gainsboro; }
table.dataTable.no-footer {
border-bottom: 0 solid #d7d7d7; }
table.dataTable.nowrap td,
table.dataTable.nowrap th {
white-space: nowrap; }
table.dataTable.compact thead td,
table.dataTable.compact thead th {
padding: 4px 17px 4px 4px; }
table.dataTable.compact tfoot td,
table.dataTable.compact tfoot th {
padding: 4px; }
table.dataTable.compact tbody td,
table.dataTable.compact tbody th {
padding: 4px; }
table.dataTable td.dt-left,
table.dataTable th.dt-left {
text-align: left; }
table.dataTable td.dataTables_empty,
table.dataTable td.dt-center,
table.dataTable th.dt-center {
text-align: center; }
table.dataTable td.dt-right,
table.dataTable th.dt-right {
text-align: right; }
table.dataTable td.dt-justify,
table.dataTable th.dt-justify {
text-align: justify; }
table.dataTable td.dt-nowrap,
table.dataTable th.dt-nowrap {
white-space: nowrap; }
table.dataTable tfoot td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable thead th.dt-head-left {
text-align: left; }
table.dataTable tfoot td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable thead th.dt-head-center {
text-align: center; }
table.dataTable tfoot td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable thead th.dt-head-right {
text-align: right; }
table.dataTable tfoot td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable thead th.dt-head-justify {
text-align: justify; }
table.dataTable tfoot td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable thead th.dt-head-nowrap {
white-space: nowrap; }
table.dataTable tbody td.dt-body-left,
table.dataTable tbody th.dt-body-left {
text-align: left; }
table.dataTable tbody td.dt-body-center,
table.dataTable tbody th.dt-body-center {
text-align: center; }
table.dataTable tbody td.dt-body-right,
table.dataTable tbody th.dt-body-right {
text-align: right; }
table.dataTable tbody td.dt-body-justify,
table.dataTable tbody th.dt-body-justify {
text-align: justify; }
table.dataTable tbody td.dt-body-nowrap,
table.dataTable tbody th.dt-body-nowrap {
white-space: nowrap; }
table.dataTable .unread {
background: #f0f0f0 !important; }
table.dataTable .unread:hover {
background: #ffffff !important; }
table.dataTable.taskTable td .row {
display: inline-block;
width: 100%;
margin: 4px 0; }
table.dataTable,
table.dataTable td,
table.dataTable th {
box-sizing: content-box; }
/*
* Control feature layout
*/
.dataTables_wrapper {
position: relative;
clear: both;
*zoom: 1;
zoom: 1; }
.dataTables_wrapper .dataTables_length {
float: left; }
.dataTables_wrapper .dataTables_filter {
float: right;
text-align: right; }
.dataTables_wrapper .dataTables_filter input {
margin-left: 0.5em; }
.dataTables_wrapper .dataTables_info {
display: none; }
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.25em; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 32px;
padding: 5px 10px;
margin-left: 2px;
line-height: 14px;
border-radius: 4px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333333 !important;
border: 1px solid transparent; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #fff !important;
border: 1px solid transparent;
background: #007dcc; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid #007dcc;
background-color: #5cc0ff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5cc0ff), color-stop(100%, #007dcc));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5cc0ff 0%, #007dcc 100%);
/* Chrome10+,Safari5.1+ */
/* FF3.6+ */
/* IE10+ */
/* Opera 11.10+ */
background: linear-gradient(to bottom, #5cc0ff 0%, #007dcc 100%);
/* W3C */ }
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
outline: none;
background-color: #009cff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009cff), color-stop(100%, #0077c2));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #009cff 0%, #0077c2 100%);
/* Chrome10+,Safari5.1+ */
/* FF3.6+ */
/* IE10+ */
/* Opera 11.10+ */
background: linear-gradient(to bottom, #009cff 0%, #0077c2 100%);
/* W3C */
box-shadow: inset 0 0 3px #111; }
.dataTables_wrapper .dataTables_paginate .ellipsis {
padding: 0 1em; }
.dataTables_wrapper .dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 40px;
margin-left: -50%;
margin-top: -25px;
padding-top: 20px;
text-align: center;
font-size: 1.2em;
background-color: white;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
/* FF3.6+ */
/* IE10+ */
/* Opera 11.10+ */
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* W3C */ }
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_processing {
color: #333333; }
.dataTables_wrapper .dataTables_scroll {
clear: both; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
*margin-top: -1px;
-webkit-overflow-scrolling: touch; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing {
height: 0;
overflow: hidden;
margin: 0 !important;
padding: 0 !important; }
.dataTables_wrapper.no-footer .dataTables_scrollBody {
border-bottom: 0 solid #d7d7d7; }
.dataTables_wrapper.no-footer div.dataTables_scrollBody table,
.dataTables_wrapper.no-footer div.dataTables_scrollHead table {
border-bottom: none; }
.dataTables_wrapper:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0; }
@media screen and (max-width: 767px) {
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
float: none;
text-align: center; }
.dataTables_wrapper .dataTables_paginate {
margin-top: 0.5em; } }
@media screen and (max-width: 640px) {
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
float: none;
text-align: center; }
.dataTables_wrapper .dataTables_filter {
margin-top: 0.5em; } }
.whiteBG {
background-color: #ffffff !important; }
.whiteBG tr {
background-color: #ffffff !important; }
.whiteBG tr:hover {
background-color: #ffffff !important; }
.dataTable th.no-sort.infoColumn:not(:nth-child(1)) {
width: 185px; }
.dataTable td:last-child {
text-align: center; }
.dataTable td:last-child .button-placeholder {
margin-right: 6px;
width: 34px;
height: 26px;
float: left; }
.dataTable td:last-child .button-placeholder:last-child {
margin-right: 0; }
#paging {
display: none; }
/*
Data table
In this file will be added the style for the Data table element
Styleguide 7.0
*/
/*
* Table styles
*/
table.dataTable {
width: 100%;
margin: 0 auto;
clear: both;
border-collapse: separate;
border-spacing: 0;
border-radius: 4px;
/*
* Header and footer styles
*/
/*
* Body styles
*/ }
table.dataTable tfoot th,
table.dataTable thead th {
font-weight: bold; }
table.dataTable tfoot th .date,
table.dataTable thead th .date {
display: block;
font-weight: 400;
line-height: 1; }
table.dataTable thead td,
table.dataTable thead th {
padding: 10px;
border-bottom: 0 solid #d7d7d7;
text-align: left;
background: #ebebeb; }
table.dataTable thead td:active,
table.dataTable thead th:active {
outline: none; }
table.dataTable tfoot td,
table.dataTable tfoot th {
padding: 10px 18px 6px;
border-top: 0 solid #d7d7d7; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
cursor: pointer;
*cursor: hand; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_desc_disabled {
background-repeat: no-repeat;
background-position: center right; }
table.dataTable thead .sorting {
background-image: url("../images/sort_both.png"); }
table.dataTable thead .sorting_asc {
background-image: url("../images/sort_asc.png"); }
table.dataTable thead .sorting_desc {
background-image: url("../images/sort_desc.png"); }
table.dataTable thead .sorting_asc_disabled {
background-image: url("../images/sort_asc_disabled.png"); }
table.dataTable thead .sorting_desc_disabled {
background-image: url("../images/sort_desc_disabled.png"); }
table.dataTable tbody tr {
background-color: #ffffff; }
table.dataTable tbody tr.selected {
background-color: #ebebeb; }
table.dataTable tbody tr:nth-child(odd) {
background: #e6e6e6; }
table.dataTable tbody td,
table.dataTable tbody th {
padding: 1px 10px; }
table.dataTable tbody td button {
float: left;
margin-right: 6px;
padding: 5px 10px;
width: 34px; }
table.dataTable tbody td button:hover {
background: #293136; }
table.dataTable tbody td button:last-child {
margin-right: 0; }
table.dataTable tbody td .userTask {
display: inline-block;
vertical-align: top;
width: 19px;
height: 19px;
line-height: 19px;
text-align: center;
font-weight: 700; }
table.dataTable tbody td .userTask.red {
background-color: #e80037;
color: #ffcc00; }
table.dataTable tbody td .userTask.blue {
background-color: #3e92d1;
color: #ffffff; }
table.dataTable tbody td .userTask.green {
background-color: #0cd384;
color: #ffffff; }
table.dataTable tbody td .userTask.grey {
background-color: #3b464d;
color: #ffffff; }
table.dataTable tbody td .userTask.white {
background-color: #ffffff;
color: #3b464d; }
table.dataTable tbody td .userTask.yellow {
background-color: #ffcc00;
color: #3b464d; }
table.dataTable tbody td .userTask.border {
border: 2px solid #000000;
line-height: 15px; }
table.dataTable tbody td .userTask.green-stripe {
background: -webkit-repeating-linear-gradient(45deg, #0cd384, #0cd384 2px, #EFE4B0 4px, #EFE4B0 6px);
background: repeating-linear-gradient(45deg, #0cd384, #0cd384 2px, #EFE4B0 4px, #EFE4B0 6px);
background-attachment: fixed; }
table.dataTable tbody td .userTask.grey-stripe {
background: -webkit-repeating-linear-gradient(45deg, #3b464d, #3b464d 2px, #EFE4B0 4px, #EFE4B0 6px);
background: repeating-linear-gradient(45deg, #3b464d, #3b464d 2px, #EFE4B0 4px, #EFE4B0 6px);
background-attachment: fixed; }
table.dataTable tbody td .userTask:nth-child(odd) {
margin-right: 9px; }
table.dataTable.col-border td:not(:last-child),
table.dataTable.col-border th:not(:last-child) {
border-right: 1px solid #d7d7d7; }
table.dataTable.col-border td:not(:last-child) .fa.fa-user,
table.dataTable.col-border th:not(:last-child) .fa.fa-user {
margin-left: 5px; }
table.dataTable.border th:not(:last-child) {
border-right: 1px solid #d7d7d7; }
table.dataTable.border td:not(:last-child) {
border-right: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7; }
table.dataTable.border td:not(:last-child) .fa.fa-user {
margin-left: 5px; }
table.dataTable.display tbody td,
table.dataTable.display tbody th, table.dataTable.row-border tbody td,
table.dataTable.row-border tbody th {
border-top: 1px solid #d7d7d7; }
table.dataTable.display tbody tr:first-child td,
table.dataTable.display tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td,
table.dataTable.row-border tbody tr:first-child th {
border-top: none; }
table.dataTable.cell-border tbody td,
table.dataTable.cell-border tbody th {
border-top: 1px solid #d7d7d7;
border-right: 1px solid #d7d7d7; }
table.dataTable.cell-border tbody tr td:first-child,
table.dataTable.cell-border tbody tr th:first-child {
border-left: 1px solid #d7d7d7; }
table.dataTable.cell-border tbody tr:first-child td,
table.dataTable.cell-border tbody tr:first-child th {
border-top: none; }
table.dataTable.display tbody tr.odd, table.dataTable.stripe tbody tr.odd {
background-color: #f9f9f9; }
table.dataTable.display tbody tr.odd.selected, table.dataTable.stripe tbody tr.odd.selected {
background-color: #e5e5e5; }
table.dataTable.display tbody tr:hover, table.dataTable.hover tbody tr:hover {
background-color: #ebebeb; }
table.dataTable.display tbody tr:hover.selected, table.dataTable.hover tbody tr:hover.selected {
background-color: #ebebeb; }
table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3, table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3 {
background-color: #f9f9f9; }
table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3, table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3 {
background-color: #e6e6e6; }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: #f1f1f1; }
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
background-color: #f3f3f3; }
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
background-color: whitesmoke; }
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #dedede; }
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
background-color: #dfdfdf; }
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
background-color: #e1e1e1; }
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: #f9f9f9; }
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
background-color: #fbfbfb; }
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
background-color: #fdfdfd; }
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
background-color: #e6e6e6; }
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
background-color: #e8e8e8; }
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
background-color: #eaeaea; }
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
background-color: #eaeaea; }
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
background-color: #ebebeb; }
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
background-color: #eeeeee; }
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
background-color: #d7d7d7; }
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
background-color: #d9d9d9; }
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
background-color: gainsboro; }
table.dataTable.no-footer {
border-bottom: 0 solid #d7d7d7; }
table.dataTable.nowrap td,
table.dataTable.nowrap th {
white-space: nowrap; }
table.dataTable.compact thead td,
table.dataTable.compact thead th {
padding: 4px 17px 4px 4px; }
table.dataTable.compact tfoot td,
table.dataTable.compact tfoot th {
padding: 4px; }
table.dataTable.compact tbody td,
table.dataTable.compact tbody th {
padding: 4px; }
table.dataTable td.dt-left,
table.dataTable th.dt-left {
text-align: left; }
table.dataTable td.dataTables_empty,
table.dataTable td.dt-center,
table.dataTable th.dt-center {
text-align: center; }
table.dataTable td.dt-right,
table.dataTable th.dt-right {
text-align: right; }
table.dataTable td.dt-justify,
table.dataTable th.dt-justify {
text-align: justify; }
table.dataTable td.dt-nowrap,
table.dataTable th.dt-nowrap {
white-space: nowrap; }
table.dataTable tfoot td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable thead th.dt-head-left {
text-align: left; }
table.dataTable tfoot td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable thead th.dt-head-center {
text-align: center; }
table.dataTable tfoot td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable thead th.dt-head-right {
text-align: right; }
table.dataTable tfoot td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable thead th.dt-head-justify {
text-align: justify; }
table.dataTable tfoot td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable thead th.dt-head-nowrap {
white-space: nowrap; }
table.dataTable tbody td.dt-body-left,
table.dataTable tbody th.dt-body-left {
text-align: left; }
table.dataTable tbody td.dt-body-center,
table.dataTable tbody th.dt-body-center {
text-align: center; }
table.dataTable tbody td.dt-body-right,
table.dataTable tbody th.dt-body-right {
text-align: right; }
table.dataTable tbody td.dt-body-justify,
table.dataTable tbody th.dt-body-justify {
text-align: justify; }
table.dataTable tbody td.dt-body-nowrap,
table.dataTable tbody th.dt-body-nowrap {
white-space: nowrap; }
table.dataTable .unread {
background: #f0f0f0 !important; }
table.dataTable .unread:hover {
background: #ffffff !important; }
table.dataTable.taskTable td .row {
display: inline-block;
width: 100%;
margin: 4px 0; }
table.dataTable,
table.dataTable td,
table.dataTable th {
box-sizing: content-box; }
/*
* Control feature layout
*/
.dataTables_wrapper {
position: relative;
clear: both;
*zoom: 1;
zoom: 1; }
.dataTables_wrapper .dataTables_length {
float: left; }
.dataTables_wrapper .dataTables_filter {
float: right;
text-align: right; }
.dataTables_wrapper .dataTables_filter input {
margin-left: 0.5em; }
.dataTables_wrapper .dataTables_info {
display: none; }
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.25em; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 32px;
padding: 5px 10px;
margin-left: 2px;
line-height: 14px;
border-radius: 4px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333333 !important;
border: 1px solid transparent; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #fff !important;
border: 1px solid transparent;
background: #007dcc; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid #007dcc;
background-color: #5cc0ff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5cc0ff), color-stop(100%, #007dcc));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5cc0ff 0%, #007dcc 100%);
/* Chrome10+,Safari5.1+ */
/* FF3.6+ */
/* IE10+ */
/* Opera 11.10+ */
background: linear-gradient(to bottom, #5cc0ff 0%, #007dcc 100%);
/* W3C */ }
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
outline: none;
background-color: #009cff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009cff), color-stop(100%, #0077c2));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #009cff 0%, #0077c2 100%);
/* Chrome10+,Safari5.1+ */
/* FF3.6+ */
/* IE10+ */
/* Opera 11.10+ */
background: linear-gradient(to bottom, #009cff 0%, #0077c2 100%);
/* W3C */
box-shadow: inset 0 0 3px #111; }
.dataTables_wrapper .dataTables_paginate .ellipsis {
padding: 0 1em; }
.dataTables_wrapper .dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 40px;
margin-left: -50%;
margin-top: -25px;
padding-top: 20px;
text-align: center;
font-size: 1.2em;
background-color: white;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
/* FF3.6+ */
/* IE10+ */
/* Opera 11.10+ */
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
/* W3C */ }
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_processing {
color: #333333; }
.dataTables_wrapper .dataTables_scroll {
clear: both; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
*margin-top: -1px;
-webkit-overflow-scrolling: touch; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing {
height: 0;
overflow: hidden;
margin: 0 !important;
padding: 0 !important; }
.dataTables_wrapper.no-footer .dataTables_scrollBody {
border-bottom: 0 solid #d7d7d7; }
.dataTables_wrapper.no-footer div.dataTables_scrollBody table,
.dataTables_wrapper.no-footer div.dataTables_scrollHead table {
border-bottom: none; }
.dataTables_wrapper:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0; }
@media screen and (max-width: 767px) {
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
float: none;
text-align: center; }
.dataTables_wrapper .dataTables_paginate {
margin-top: 0.5em; } }
@media screen and (max-width: 640px) {
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
float: none;
text-align: center; }
.dataTables_wrapper .dataTables_filter {
margin-top: 0.5em; } }
.whiteBG {
background-color: #ffffff !important; }
.whiteBG tr {
background-color: #ffffff !important; }
.whiteBG tr:hover {
background-color: #ffffff !important; }
.dataTable th.no-sort.infoColumn:not(:nth-child(1)) {
width: 185px; }
.dataTable td:last-child {
text-align: center; }
.dataTable td:last-child .button-placeholder {
margin-right: 6px;
width: 34px;
height: 26px;
float: left; }
#paging {
display: none; }
.centralizingTable {
width: 100%;
height: 100%;
border: 1px solid #d7d7d7;
table-layout: fixed; }
.centralizingTable td,
.centralizingTable th {
width: 55px !important;
min-width: 55px !important; }
.centralizingTable th {
text-overflow: ellipsis;
text-align: center !important;
padding: 3px 2px !important; }
.centralizingTable th .date {
display: block; }
.centralizingTable td {
text-align: center !important;
padding: 3px 2px 0 !important; }
.centralizingTable .dayTask {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 20px; }
.centralizingTable .dayTask.red {
background-color: #e80037;
color: #ffffff; }
.centralizingTable .dayTask.blue {
background-color: #3e92d1;
color: #ffffff; }
.centralizingTable .dayTask.green {
background-color: #0cd384;
color: #ffffff; }
.centralizingTable .dayTask.grey {
background-color: #3b464d;
color: #ffffff; }
.centralizingTable .dayTask.white {
background-color: #ffffff;
color: #ffffff; }
.centralizingTable .dayTask.yellow {
background-color: #ffcc00;
color: #ffffff; }
.centralizingTable .dayTask.border {
border: 3px solid #000000;
line-height: 13px; }
.tableStats {
width: auto !important;
margin: 0 !important; }
.tableStats button {
float: none !important;
margin: 0 auto !important; }
.tableStats td {
padding: 8px 10px !important; }
.tableContainerH tbody tr:nth-child(odd) {
background: transparent !important; }
.tableContainerH tbody tr.unread {
background: #f0f0f0 !important; }
.tableContainerH tbody tr.unread:hover {
background: #ffffff !important; }
.pageNotification .dataTable tbody tr:nth-child(odd) {
background: #ffffff !important; }
.pageNotification .dataTable tbody tr:nth-child(odd):hover {
background: #ebebeb !important; }
.pageNotification .dataTable tbody tr.unread {
background: #f0f0f0 !important; }
.pageNotification .dataTable tbody tr.unread:hover {
background: #ffffff !important; }
.pageNotification .dataTable tbody tr td {
padding: 10px 15px; }
/*
Tooltip
In this file will be added the style for the Tooltip element
Styleguide 10.0
*/
.ui-tooltip {
padding: 7px;
color: white;
border-radius: 4px;
background: #3b464d;
box-shadow: none;
border: none;
max-width: 800px; }
.ui-tooltip-content {
position: relative; }
.ui-tooltip-content::after {
bottom: -12px;
left: 50%;
border-color: #3b464d transparent;
border-width: 15px 15px 0;
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
.ui-tooltip-inverse {
background: #f5f5f5;
color: #3b464d; }
.ui-tooltip-content::after,
.ui-tooltip-bottom .ui-tooltip-content::after {
content: none; }
.ui-tooltip-bottom .ui-tooltip-content::before {
top: -12px;
left: 50%;
border-color: #3b464d transparent;
border-width: 0 15px 15px;
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
/*
Filter Column
In this file will be added the style for the Filter Column element
Styleguide 8.0
*/
.filterColumn {
background-color: #fbfbfb;
width: 21%;
padding: 16px;
position: absolute;
right: 0;
top: 0;
bottom: 0; }
.filterColumn .menu-button {
position: absolute;
left: -15px;
top: 0;
background-color: #fbfbfb;
color: #007dcc;
padding: 5px 9px;
border-radius: 4px;
z-index: 50;
-webkit-transition: 0.3s ease;
transition: 0.3s ease; }
.filterColumn .menu-button:hover i {
color: #3b464d; }
.filterColumn select option:first-child {
display: none; }
.filterColumn.closed {
overflow: hidden; }
.filterColumn.closed .menu-button {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
.selectedYear {
border-radius: 4px;
position: relative;
background-color: #e5e5e5;
margin-bottom: 10px; }
.selectedYear > a {
position: absolute;
left: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.selectedYear > a:active, .selectedYear > a:focus {
color: #007dcc; }
.selectedYear > a.increaseYear {
left: auto;
right: 10px; }
.selectedYear p {
padding: 0 26px;
color: #e6e6e6;
text-align: center;
line-height: 28px; }
/*
Login page
In this file will be added the style for the Login page
Styleguide 9.0
*/
.login {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(../Images/login-bg.png) no-repeat 0 0 transparent;
background-size: cover; }
.login-content {
width: 390px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
color: #000000; }
.login-content .logo {
background: url(../Images/login-logo.png) no-repeat center 0 transparent;
width: 390px;
height: 116px;
display: inline-block;
margin: 10px 0 40px;
font: 0/0 a;
text-shadow: none;
color: transparent; }
.login-content .passForgot {
float: right;
color: #68991b;
font-weight: 700; }
.login-content .closeMessage {
display: none; }
.notifications {
display: none;
position: absolute;
background: #ffffff;
width: 92%;
height: 500px;
top: 0;
left: 28px;
z-index: 150;
border: 1px solid #e5e5e5;
border-radius: 4px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
-webkit-transform: scale(0.7) translateY(-50%);
transform: scale(0.7) translateY(-50%);
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s; }
.notifications.visible {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
.notifications.visible.lightbox-notifications {
bottom: 5px;
height: auto;
overflow: hidden; }
.notifications table {
margin: 10px 0;
width: 100%; }
.notifications td:first-of-type,
.notifications th:first-of-type {
padding-left: 18px; }
.notifications p,
.notifications .notifications-footer {
padding-left: 18px;
padding-right: 18px; }
.notifications td:last-of-type,
.notifications td:last-of-type {
padding-right: 18px; }
.notifications-header {
padding-bottom: 15px; }
.notifications-header .notificationsContent {
height: 455px;
margin-top: 1px; }
.notifications-header > .table,
.notifications-header .notificationsContent .mCSB_container > .table {
table-layout: fixed; }
.notifications-header > .table tr,
.notifications-header .notificationsContent .mCSB_container > .table tr {
background-color: #ffffff; }
.notifications-header > .table tr:hover,
.notifications-header .notificationsContent .mCSB_container > .table tr:hover {
background-color: #ffffff !important; }
.notifications-header > .table td,
.notifications-header .notificationsContent .mCSB_container > .table td {
padding: 2px 10px !important;
border-top: none !important;
text-align: left; }
.notifications-header > .table td:first-of-type,
.notifications-header .notificationsContent .mCSB_container > .table td:first-of-type {
padding: 2px 10px 2px 18px !important; }
.notifications-header > .table td:last-of-type,
.notifications-header .notificationsContent .mCSB_container > .table td:last-of-type {
padding: 2px 18px 2px 10px !important; }
.notifications-header > .table td.strong,
.notifications-header .notificationsContent .mCSB_container > .table td.strong {
max-width: 180px;
word-wrap: break-word;
width: 165px; }
.notifications-header > .table td.strong + td,
.notifications-header .notificationsContent .mCSB_container > .table td.strong + td {
max-width: 40%; }
table.notifications-title {
margin: 0;
font-weight: 700;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
table.notifications-title tbody tr {
background-color: #68991b;
color: #ffffff; }
table.notifications-title tbody tr:hover {
background-color: #68991b !important; }
table.notifications-title td:last-child {
padding-right: 30px; }
.notifications-content {
position: relative;
padding-right: 10px;
margin-bottom: 15px; }
.notifications-content .jspPane {
padding: 0 !important;
max-width: 100%; }
.notifications-content table {
margin: 0; }
.notifications-content table td {
position: relative; }
.notifications-content .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
.notifications-content .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical {
right: -10px;
margin: 12px 0; }
.notifications-content .tableDetails {
display: none;
z-index: 200;
position: absolute;
top: 30px;
right: 0;
border-radius: 4px;
border: 2px solid #68991b;
background-color: #f5f5f5;
max-width: 950px; }
.notifications-content .tableDetails tr {
background-color: #f5f5f5; }
.notifications-content .tableDetails th {
border-bottom: 3px solid #ffffff !important; }
.notifications-content .tableDetails td {
border-bottom: 1px solid #ffffff;
vertical-align: top; }
.notifications-content .tableDetails .notifications-content {
height: auto;
padding: 10px;
white-space: nowrap;
overflow: hidden; }
.notifications-footer {
min-height: 60px;
background-color: #ffffff;
padding-top: 15px;
padding-bottom: 15px; }
.notifications-footer button {
margin-right: 8px; }
.notifications-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.4s;
transition: all 0.4s;
z-index: 100; }
.notifications-close {
position: absolute;
right: 10px;
top: 10px;
font-size: 18px;
color: #68991b;
cursor: pointer;
-webkit-transition: all 0.2s;
transition: all 0.2s; }
.notifications-close:hover {
font-size: 20px;
top: 8px; }
.notifications.lightbox-notifications .notifications-close {
top: 15px; }
.notifications.lightbox-notifications .notifications-close:hover {
top: 12px; }
.notifications.lightbox-notifications .notifications-title td {
padding-top: 12px;
padding-bottom: 12px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
font-weight: 700; }
.notifications.lightbox-notifications .lightbox-notifications-content {
padding: 18px; }
.tableTasks {
padding: 18px; }
.tableTasks .title {
font-weight: 700;
font-size: 24px; }
.tableTasks .dataTables_paginate {
display: none; }
.tomorowTasks .title,
.tomorowTasks .icon {
color: #3e92d1; }
.tomorowTasks button {
background-color: #3e92d1; }
.tomorowTasks .newTask td {
color: #3e92d1; }
.tomorowTasks .newTask button {
background-color: #3e92d1; }
.todayTasks .title,
.todayTasks .icon {
color: #ffcc00; }
.todayTasks button {
background-color: #ffcc00; }
.todayTasks .newTask td {
color: #ffcc00; }
.todayTasks .newTask button {
background-color: #ffcc00; }
.expiredTasks .title,
.expiredTasks .icon {
color: #e80037; }
.expiredTasks button {
background-color: #e80037; }
.unplannedTasks .icon,
.unplannedTasks .title,
.unplannedTasks .icon {
color: #68991b; }
.unplannedTasks button {
background-color: #68991b; }
.unplannedTasks .newTask td {
color: #68991b; }
.unplannedTasks .newTask button {
background-color: #68991b; }
.ui-dialog {
padding-top: 0;
padding-left: 0;
padding-right: 0;
z-index: 1000000 !important; }
.ui-dialog .ui-dialog-titlebar {
background-image: none;
background-color: #68991b;
color: #ffffff; }
.ui-dialog .combobox {
width: 100%; }
.ui-dialog .ui-widget-content a {
margin-top: 5px;
display: inline-block;
color: #ffffff; }
.ui-dialog .ui-widget-content a:hover {
color: #ffffff; }
.ui-dialog .ui-datepicker-calendar a {
display: block;
margin-top: 0; }
.ui-dialog .ui-datepicker-calendar .ui-state-active,
.ui-dialog .ui-datepicker-calendar .ui-widget-content .ui-state-active {
border: 1px solid #fcefa1;
background: #fcefa1 url("images/ui-bg_glass_55_fcefa1_1x400.png") 50% 50% repeat-x;
color: #363636; }
.ui-dialog #dialog-confirm {
text-align: center; }
.ui-dialog #dialog-confirm p {
text-align: justify; }
#tasksreview-tabs {
display: none;
padding: 0; }
.ui-widget-header {
border: #ffffff;
background: #ffffff;
border-radius: 0; }
.ui-tabs .ui-tabs-nav {
border-bottom: 1px solid #68991b;
padding: 1em 1.4em 0; }
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #68991b;
background: #ffffff;
color: #68991b; }
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited,
.ui-widget-content .ui-state-active a,
.ui-widget-content .ui-state-active a:link,
.ui-widget-content .ui-state-active a:visited,
.ui-widget-header .ui-state-active a,
.ui-widget-header .ui-state-active a:link,
.ui-widget-header .ui-state-active a:visited {
color: #68991b;
outline: transparent; }
.ui-tabs .ui-tabs-nav li {
margin: 1px 0.4em 0 0; }
.department {
position: relative;
display: inline-block;
vertical-align: top;
min-height: 180px;
width: 375px;
margin-right: 20px;
margin-bottom: 20px;
padding: 15px;
background-color: #ffffff;
border-radius: 4px; }
.department-text {
display: inline-block;
vertical-align: top;
max-width: 190px;
font-weight: 700;
color: #4e4e4e;
line-height: 16px; }
.department-text h1 {
padding: 10px 0 0; }
.department-chart {
display: inline-block;
vertical-align: top;
width: 150px;
height: 150px; }
.department a {
color: #4e4e4e; }
.depMenulink {
position: absolute;
bottom: 15px;
left: 15px; }
.depMenu {
display: none;
position: absolute;
bottom: -40px;
left: 42px;
background: #ffffff;
margin: 0;
padding: 0;
list-style: none;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); }
.depMenu i {
margin-right: 10px; }
.depMenu li {
line-height: 1.5; }
.depMenu li:hover {
background-color: #ebebeb; }
.depMenu a {
display: block;
padding: 10px 15px;
color: #68991b; }
.main-content.centralizingPage {
overflow: hidden; }
.outerContainer {
position: relative;
display: inline-block;
overflow: hidden;
opacity: 0;
width: 100%;
height: auto; }
.outerContainer table {
border-radius: 0; }
.outerContainer .mCSB_container_wrapper {
margin-right: 0;
padding-right: 16px; }
.outerContainer #mCSB_1_scrollbar_vertical {
right: -4px;
background: #f5f5f5;
opacity: 1; }
.outerContainer.bigTable.userDashbord:not(.sefDep) {
width: auto; }
.outerContainer.bigTable.userDashbord:not(.sefDep) .innerContainer table a {
float: left; }
.outerContainer.bigTable.userDashbord:not(.sefDep) .innerContainer table td {
padding: 10px 0 !important; }
.outerContainer.bigTable.userDashbord:not(.sefDep) .innerContainer table td .userTask:nth-child(odd) {
margin-right: 0;
margin-bottom: 1px; }
.outerContainer.bigTable.userDashbord:not(.sefDep) .innerContainer table .userTask.border {
border: 2px solid #000000;
line-height: 13px; }
.outerContainer.bigTable.userDashbord:not(.sefDep) .topContainer:after {
content: none; }
.outerContainer.bigTable.userDashbord:not(.sefDep) .userTask {
width: 10px; }
.innerContainer {
width: 100%;
height: 100%;
margin-left: 150px;
margin-top: 43px;
overflow: hidden; }
.innerContainer table {
max-width: none; }
.innerContainer .mCSB_container > table {
position: relative;
float: left; }
.innerContainer td {
text-align: left !important; }
.innerContainer td table {
margin: 0; }
.innerContainer .userTask {
margin-bottom: 3px !important;
margin-left: 3px;
margin-right: 3px !important; }
.leftContainer {
position: absolute;
z-index: 5;
left: 0;
top: 0;
width: 150px;
height: 100%;
overflow: hidden; }
.leftContainer table {
width: 100%;
height: 100%;
margin-top: 43px;
position: relative; }
.leftContainer table a {
display: block;
color: #000000; }
.leftContainer table a i {
margin-left: 5px; }
.topContainer {
position: absolute;
z-index: 6;
left: 0;
top: 0;
width: 100%;
height: 43px;
background-color: #ffffff; }
.topContainer table {
width: 100%;
height: 100%;
left: 150px;
top: 0;
position: absolute; }
.tablePlaceholder {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
height: 43px;
width: 150px;
z-index: 7;
border: 1px solid #d7d7d7;
border-bottom: none;
background: #ebebeb;
text-align: center;
line-height: 41px; }
.departmentTitle {
height: 45px; }
.userDashbord .innerContainer .centralizingTable td {
position: relative;
height: 16px;
padding: 1px 0 !important;
border: none !important;
width: 60px !important; }
.userDashbord .innerContainer .centralizingTable td span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100% !important;
height: 16px !important;
margin: 0 !important;
cursor: pointer;
line-height: 38px !important; }
.userDashbord .innerContainer .centralizingTable td span.border {
line-height: 32px !important; }
.userDashbord .innerContainer .centralizingTable td span.border.start {
border-right: none !important; }
.userDashbord .innerContainer .centralizingTable td span.border.inner {
border-right: none !important;
border-left: none !important; }
.userDashbord .innerContainer .centralizingTable td span.border.end {
border-left: none !important; }
.userDashbord .innerContainer .centralizingTable td span:not(.start):not(.inner) {
width: 97% !important; }
.userDashbord:not(.sefDep) .centralizingTable td,
.userDashbord:not(.sefDep) .centralizingTable th {
width: 57px !important; }
.userDashbord:not(.sefDep) .innerContainer tr {
height: 18px !important; }
.userDashbord:not(.sefDep) .topContainer table {
left: 0; }
.userDashbord:not(.sefDep) .innerContainer {
margin-left: 0; }