.cr-keypad-pane {
    background-color: #B2B2B2;
    padding: 0;
    margin: auto;
}
.cr-info-pane {
    background-color: #C8C8C8;
}

.cr-keypad {
    width: 400px;
    text-align: center;
    margin: auto;
}

.cr-input-display-pane {
    height: 172px;
    width: 100%;
    display: inline-block;
    text-align: center;
    background-color: #E0E0E0;
}
.cr-display-msg {
    width: 100%;
    text-align: center;
    font-size: 1.6em;
    margin-top: 40px;
    font-weight: bold;
}
.cr-display-amt {
    width: 100%;
    text-align: center;
    font-size: 5em;
    margin-top: 50px;
    font-weight: bold;
    color: #45494B;
}

.cr-keypad ul li {
    margin: 24px 20px 0 15px;
    display: inline-block;
    padding: 38px 0 10px 0;
    margin-bottom: 0;
    color: #000;
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    background-color: #fff;
    -ms-border-radius: 42px / 42px;
    -o-border-radius: 42px / 42px;
    -moz-border-radius: 42px / 42px;
    -webkit-border-radius: 42px / 42px;
    border-radius: 42px / 42px;
    height: 84px;
    width: 84px;
    box-shadow: 5px 4px 1px #464B4F;
}

/* tender button pane */
.cr-tender-btn-pane {
    margin-top: 30px;
    text-align: center;
    margin-bottom: 10px;
}
.cr-btn {
    margin-bottom: 30px;
    margin-right: 20px;
    width: 110px;
    font-size: 1.5em;
    font-weight: bold;
    color: #45494B;
    padding:20px 10px;
    -ms-border-radius: 22px / 22px;
    -o-border-radius: 22px / 22px;
    -moz-border-radius: 22px / 22px;
    -webkit-border-radius: 22px / 22px;
    border-radius: 22px / 22px;
    border: 2px solid black;
}

/* left pane  */
.btn-pos-controls {

}

.cr-journal {
    margin: 20px auto;
    height: calc(100vh - 50px - 230px);
    width: 90%;
    /* background-color: #C8C8C8; */
    background-color: #fff;
    border: 3px solid #555453;
    /* padding: 10px; */
    overflow: hidden;
    font-size: 1.2em;
    line-height: 1.2em;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.cr-journal-new {
    background-color: #fff;
    padding: 0 15px;
}
.cr-journal-old {
    background-color: #E0E0E0;
    padding: 0 15px;
    min-height: 600px;
}

.cr-old-trans {
    /* background-color: #E0E0E0; */
}
.cr-line {

}
.cr-line-total {
    float: right;
}
.cr-separator {

}
/*
.cr-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #A72822;
}
.cr-separator::before{
    content: '';
    flex: 1;
    border:0;
    border-top: 1px solid #eee;
}
.cr-separator::before {
    margin-right: .25em;
}
.cr-separator::after {
    margin-left: .5em;
}
*/
.cr-success {
    color: #3C6522;
}
.cr-fail {
    color: #C72414;
}

.btn-ctrl-page {
    /* margin-top: calc(100vh - 230px); */
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 0;
    height: 160px;
    width: 130px;
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    background-color: #474B4D;
    /* color: #919191; */
    color: #fff;
}

@charset "utf-8";

/* JeriPOSv2 default style sheet. styles.css v0.2 (amended by SJ) 150106. */


/* Works with localhost for login, control,table-layout.*/


/* styles.css v0.3 (amended by SJ) 150113
Works with localhost for login, control, table-layout, item-ordering, payment*/


/* styles.css v0.4 (amended by SJ) 150115
amended the hover status, added scrollbar for journal-table-container, added selected state for seq firing and amend qty*/


/* styles.css v0.5 (amended by SJ) 150120
amended table-layout css to include change table, merge table, block table, make available table*/


/* styles.css v0.6 (amended by SJ) 150122
added modal css, split bill, collection declaration and default-btn-img*/


/* styles.css v0.7 (amended by SJ) 150205
revised payment page/
/* styles.css v0.8 (amended by SJ) 150303
Novitee Footer, Header/
/* styles.css v0.9 (amended by SJ) 150310
collection declaration css/
/* styles.css v1.0 (amended by SJ) 150508
collection declaration css/
/* ==========================================================================
Base
========================================================================== */

html {
    height: 100vh;
}

body {
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #000;
    line-height: 14px;
    font-family: Arial, Helvetica, sans-serif;
    background: #ddd;
    height: 100vh;
}

img {
    border: 0;
    max-width: 100%;
    height: auto;
}

.err-text {
    color: red;
}

.btn-del {
    background: #f14a25;
   color: #fff;
   font-family: 'Helvetica', 'Arial', sans-serif;
   font-size: 2em;
   font-weight: bold;
   text-align: center;
   width: 40px;
   height: 40px;
   border-radius: 20px;
}

/*fit view to 977px screen width*/

.container {
    /*max-width:977px;*/
    padding: 0 30px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.white-bg {
    background: #FFF;
}

.transfer-bill {
    background: #5e5e5e;
}

.transfer-bill label {
    color: #fff;
}

.modal {
    cursor: pointer;
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.navbar {
    border: none !important;
}
.navbar-brand, .navbar-nav {
    color: #ffffff !important;
    font-size: 12px;
    font-weight: bold;
}


/* ==========================================================================
Typography
========================================================================== */

h1, h2, h3, h4, h5, h6, ul, li, p {
    padding: 0;
    margin: 0;
    -weight: normal;
    color: #000000;
}

h3, h4 {
    color: #fff;
    font-weight: bold;
    margin: 20px 0;
}


/* ==========================================================================
Typography
========================================================================== */

a {
    color: inherit;
    text-decoration: none;
}

a:hover, a.active {
    color: #fff;
    outline: none;
    text-decoration: none;
}

a:focus {
    outline: none;
    text-decoration: none;
}

p {
    padding-bottom: 14px;
}

.clear {
    clear: both;
}

.text-shadow {
    -webkit-box-shadow: 5px 4px 1px #464B4F;
    text-shadow: rgb(125, 135, 147) 1px 1px, rgb(125, 135, 147) 2px 2px, rgb(125, 135, 147) 3px 3px, rgb(125, 135, 147) 4px 4px, rgb(125, 135, 147) 5px 5px, rgb(125, 135, 147) 6px 6px, rgb(125, 135, 147) 7px 7px, rgb(126, 136, 148) 8px 8px, rgb(127, 137, 149) 9px 9px, rgb(128, 139, 151) 10px 10px, rgb(130, 140, 152) 11px 11px, rgb(131, 141, 154) 12px 12px, rgb(132, 143, 155) 13px 13px, rgb(133, 144, 157) 14px 14px, rgb(135, 145, 158) 15px 15px, rgb(136, 147, 160) 16px 16px, rgb(137, 148, 161) 17px 17px, rgb(139, 150, 163) 18px 18px;
}


/* ==========================================================================
Forms
========================================================================== */


/* * Corrects margin displayed oddly in IE 6/7. */

form {
    margin: 0;
}


/* * Define consistent border, margin, and padding. */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}


/* * 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7. */

legend {
    border: 0;
    /* 1 */
    padding: 0;
    white-space: normal;
    /* 2 */
    *margin-left: -7px;
    /* 3 */
}


/* * 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, *    and Chrome.
* 3. Improves appearance and consistency in all browsers. */

button, input, select, textarea {
    font-size: 100%;
    /* 1 */
    margin: 0;
    /* 2 */
    vertical-align: baseline;
    /* 3 */
    *vertical-align: middle;
    /* 3 */
}


/* * Addresses Firefox 3+ setting `line-height` on `input` using ` !important` in
* the UA stylesheet. */

button, input {
    line-height: normal;
}


/* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
*    Known issue:inner spacing remains in IE 6. */

button, html input[type="button"],
/* 1 */

input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
    *overflow: visible;
    /* 4 */
}


/* * Re-set default cursor for disabled elements. */

button[disabled],
input[disabled] {
    cursor: default;
}


/* * 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
*    Known issue:excess padding remains in IE 6. */

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
    *height: 13px;
    /* 3 */
    *width: 13px;
    /* 3 */
}


/* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof). */

input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    /* 2 */
    box-sizing: content-box;
}


/* * Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X. */

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}


/* * Removes inner padding and border in Firefox 3+. */

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


/* * 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers. */

textarea {
    overflow: auto;
    /* 1 */
    vertical-align: top;
    /* 2 */
}


/* ==========================================================================
Header
========================================================================== */

#header {
    background: #000;
    min-height: 50px;
    width: 100%;
    float: left;
    font-weight: bold;
    color: #ffffff;
}

.left-text {
    padding-top: 10px;
    text-align: left;
    color: #ffffff;
}

.left-head-content {
    padding-top: 10px;
    padding-right: 0;
}

.right-head-content {
    padding-top: 10px;
    text-align: right;
}

.head-list {
    display: inline-block;
    width: 110px;
}

.right-text {
    display: inline-block;
    color: #ffffff;
}

.head-list li {
    display: inline-block;
    list-style-type: none;
    padding: 0 10px;
    vertical-align: middle;
}

.head-list li a {
    color: #FFF;
    text-decoration: none;
}

.head-list li span {
    display: block;
    font-size: 10px;
    text-align: center;
    padding-top: 2px;
}

.head-list .na {
    opacity: 0.5;
}

/* ==========================================================================
Login Page
========================================================================== */
.btn-shutdown {
    width: 300px;
    padding-left: 20px;
    padding-top: 110px;
    border-radius: 150px;
    position: absolute;
    margin-left: calc(100% - 100px);
    margin-top: -150px;
    background-color: navy;
    color: yellow;
    font-size: 1.4em;
    line-height: 10em;
}

.powered-by {
    position: absolute;
    top: calc(100vh - 45px);
    left: calc(100% - 180px);
    font-family: Arial, sans-serif;
    font-size: 10pt;
    display: block;
}

.bodycon {
    padding: 50px 0 0 0;
    color: #000;

    display: table;
    width: 100%;
    height: calc(100vh - 50px);
}

#terminal-code {
    padding: 0 0 10px 0;
    font-size: 1.5em;
    font-weight: bold;
    color: brown;
    text-align: center;
}

.text-area {
    max-width: 100%;
}

.text-area textarea {
    border: none;
    background: #fff;
    min-height: 252px;
    width: 100%;
    margin-bottom: 40px;
    max-width: 395px;
    margin-left: 35px;
}

.inupt-text label {
    display: block;
}

.input-text {
    height: 45px;
    ;
    margin-bottom: 22px;
    border: solid 1px #e4e5e6;
    text-align: center;
    color: #4b4b4b;
}

.input-text-selected {
    background-color: #ffdddd;
    border: 1px solid red !important;
}

.home-right {
    float: right;
    padding: 0;
}

.number-list {
    width: 100%;
    max-width: 313px;
    margin: auto;
}

.number-list ul {
    list-style-type: none;
    margin-bottom: 20px;
}

.number-list ul li {
    margin: 10px 20px 0 5px;
    display: inline-block;
    padding: 0 10px;
    margin-bottom: 12px;
    color: #FFF;
    font-size: 40px;
    text-align: center;
    padding-top: 25px;
    background-color: #8B96A3;
    -ms-border-radius: 38px / 38px;
    -o-border-radius: 38px / 38px;
    -moz-border-radius: 38px / 38px;
    -webkit-border-radius: 38px / 38px;
    border-radius: 38px / 38px;
    height: 75px;
    width: 75px;
    box-shadow: 5px 4px 1px #464B4F;
}

.number-list ul li:hover {
    cursor: pointer;
    opacity: 0.5;
}
.number-list ul li:active {
    color: #000;
    background-color: #fff;
}

.number-list ul li a:focus {
    color: #fff;
}


/* ==========================================================================
Login Page Footer
========================================================================== */

.footer {
    margin-bottom: 10px;
}

.footer-inner {
    border-top: dashed 2px #fff;
}

.logo {
    float: right;
    position: relative;
}

.logo-text {
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    position: absolute;
    right: 30px;
    top: 80px;
    z-index: 999;
    padding-bottom: 10px;
}

.logo img {
    width: 100%;
    max-width: 120px;
}

.img-inactive {
    opacity: 0.2;
}


/* ==========================================================================
Buttons used in POS system
========================================================================== */
.rm-side-margin {
    padding: 1px;
}

.btn-ops-func {
    width: 500px;        /* 90px; */
}

.func-listing-container a {
    display: table-cell;
}

.btn-ops-func,
.btn-ops-func-hori {
    background-color: #d3dae2;
    border-radius: 5px;
    color: #535F92;
    padding: 6px 4px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 8pt;
    box-shadow: #9FA1A5 2px 2px 2px;
    text-transform: uppercase;
    min-height: 54px;
}

.btn-ops-func-hori, .btn-ops-func-hori:hover {
    padding: 2%
}

.btn-ops-func img {
    padding: 2% 3%;
}

.btn-ops-func-hori img {
    display: inline-block;
    float: left;
    max-height: 160%;
    max-width: 40%;
    margin: -5% -5%;
    padding-right: 1px;
}

.btn-ops-func:hover, .btn-ops-func-hori:hover {
    box-shadow: none;
    cursor: pointer;
    background-color: #e7edf7;
}

.btn-ops-func-emphasis:hover, .btn-ops-func-emphasis-hori:hover {
    opacity: 0.8;
}

.btn-ops-func-emphasis, .btn-ops-func-emphasis-hori {
    background-color: #188b61;
    border-radius: 5px;
    color: #fff;
    padding: 6px 4px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 9pt;
    box-shadow: #1377512px 2px 2px;
    text-transform: uppercase;
}

.btn-ops-func-emphasis-hori {
    padding: 2%
}

.btn-ops-func-emphasis-hori img, .btn-ops-func-emphasis-hori:hover img {
    display: inline-block;
    float: left;
    max-height: 160%;
    max-width: 40%;
    margin: -5% -5%;
}

.btn-primary {
    background-color: #5f7a9b;
    color: #fff;
    border-radius: 3px;
    margin: 0 0 0 10px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    /* font-size: 9pt; */
    box-shadow: #9FA1A5 2px 2px;
    outline: none;
    cursor: pointer;
    border-color: transparent;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: #d3dae2;
    color: #535F92;
    outline: none;
    text-decoration: none;
    border-color: transparent;
}

.btn-enabled {
    background-color: #d3dae2;
    border-radius: 3px;
    color: #535F92;
    margin: 0 0 0 10px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 9pt;
    box-shadow: #9FA1A5 2px 2px;
    outline: none;
    cursor: pointer;
}

.btn-enabled:hover, .btn-enabled a:hover {
    color: #535F92;
    background-color: #e7edf7;
    outline: none;
    text-decoration: none;
}

.btn-enabled:focus, .btn-enabled:active {
    background-color: #5f7a9b;
    color: #FFF;
}

.disabled {
    color: #a0a2a3 !important;
    background-color: #666 !important;
}

.disabled:hover, .disabled a:hover {
    color: #a0a2a3;
    background: #3a3a3a;
}

.func-btn-header-bg {
    background-color: #dedede;
    border: 1px solid #aeaca4;
    border-radius: 5px;
    display: block;
    color: #AEACA4;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}

.func-btn-emphasis-bg {
    background-color: #188b61;
    border-bottom: 2px solid #137751;
    border-radius: 5px;
    display: block;
    height: 105px;
    width: 110px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}

.func-btn-header-bg img, .func-btn-emphasis-bg img {
    display: block;
    padding: 10px 0 7px;
    margin: auto;
    /* max-height: 76px; */
    height: 76px;
}

.func-btn-header-bg:hover, .func-btn-bg:hover {
    opacity: 0.8;
}

.func-btn-emphasis-bg:hover {
    opacity: 0.8;
}

.btn-table-section, .btn-table-section:link, .btn-table-section:visited {
    background-color: #2C3E50;
    box-shadow: #000 2px 2px;
    border-radius: 3px;
    padding: 14px;
    color: #FFF;
    font-size: 16px;
    cursor: pointer;
}

.btn-table-section:hover {
    opacity: 0.8;
    box-shadow: none;
    cursor: pointer;
}


/* ==========================================================================
Default POS Category & Item Button Style
========================================================================== */

.default-btn {
    background: rgba(73, 92, 157, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #2a375f;
    -moz-box-shadow: 0 3px 0 0 #2a375f;
    box-shadow: 0 3px 0 0 #2a375f;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn:hover {
    background: rgba(73, 92, 157, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-yellow {
    background: rgba(219, 198, 134, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #A5925C;
    -moz-box-shadow: 0 3px 0 0 #A5925C;
    box-shadow: 0 3px 0 0 #A5925C;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-yellow:hover {
    background: rgba(219, 198, 134, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-blue {
    background: rgba(73, 92, 157, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #2a375f;
    -moz-box-shadow: 0 3px 0 0 #2a375f;
    box-shadow: 0 3px 0 0 #2a375f;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-blue:hover {
    background: rgba(73, 92, 157, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-green {
    background: rgba(118, 145, 81, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #526638;
    -moz-box-shadow: 0 3px 0 0 #526638;
    box-shadow: 0 3px 0 0 #526638;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-green:hover {
    background: rgba(118, 145, 81, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-red {
    background: rgba(168, 67, 67, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #862f30;
    -moz-box-shadow: 0 3px 0 0 #862f30;
    box-shadow: 0 3px 0 0 #862f30;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-red:hover {
    background: rgba(168, 67, 67, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-plum {
    background: rgba(137, 64, 136, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #5d265d;
    -moz-box-shadow: 0 3px 0 0 #5d265d;
    box-shadow: 0 3px 0 0 #5d265d;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-plum:hover {
    background: rgba(137, 64, 136, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-orange {
    background: rgba(225, 159, 65, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #845e38;
    -moz-box-shadow: 0 3px 0 0 #845e38;
    box-shadow: 0 3px 0 0 #845e38;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-orange:hover {
    background: rgba(225, 159, 65, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-purple {
    background: rgba(128, 107, 144, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #635575;
    -moz-box-shadow: 0 3px 0 0 #635575;
    box-shadow: 0 3px 0 0 #635575;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-purple:hover {
    background: rgba(128, 107, 144, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-brick {
    background: rgba(105, 59, 42, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #4d2a21;
    -moz-box-shadow: 0 3px 0 0 #4d2a21;
    box-shadow: 0 3px 0 0 #4d2a21;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-brick:hover {
    background: rgba(105, 59, 42, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-ocean {
    background: rgba(119, 165, 175, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #608082;
    -moz-box-shadow: 0 3px 0 0 #608082;
    box-shadow: 0 3px 0 0 #608082;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-ocean:hover {
    background: rgba(119, 165, 175, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-mustard {
    background: rgba(187, 146, 61, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #906f29;
    -moz-box-shadow: 0 3px 0 0 #906f29;
    box-shadow: 0 3px 0 0 #906f29;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-mustard:hover {
    background: rgba(187, 146, 61, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-image {
    background-image: url(../images/Photo%20Shoot%20Food%20Pic%20Lowres/img3.png);
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    height: 60px;
    cursor: pointer;
    border: solid 1px #cccccc;
    -webkit-box-shadow: 0 3px 6px 0 #906f29;
    -moz-box-shadow: 0 3px 6px 0 #906f29;
    box-shadow: 0 3px 6px 0 #906f29;
}

.default-btn-image:hover {
    opacity: 0.8;
}

.default-btn-grass-green {
    background: rgba(44, 134, 111, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #906f29;
    -moz-box-shadow: 0 3px 0 0 #906f29;
    box-shadow: 0 3px 0 0 #906f29;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-grass-green:hover {
    background: rgba(44, 134, 111, 0.6);
    color: #fff !important;
    text-decoration: none;
}

.default-btn-dark-green {
    background: rgba(54, 105, 55, 1);
    padding: 10px 2px 4px 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    ;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #906f29;
    -moz-box-shadow: 0 3px 0 0 #906f29;
    box-shadow: 0 3px 0 0 #906f29;
    font-weight: 700;
    font-size: 14px;
    height: 60px;
    overflow: auto;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}

.default-btn-dark-green:hover {
    background: rgba(54, 105, 55, 0.6);
    color: #fff !important;
    text-decoration: none;
}


.selected {
    background-color: #313C63 !important;
    color: #fff;
    opacity: 0.8;
}

.btn-icon {
    color: white;
    font-size: 45px;
    cursor: pointer;
}

.btn-icon:hover {
    opacity: 0.8
}

.icon-bar {
    /*margin: 20px 0 30px;*/
    margin: 20px 20px 30px 10px;
}

.dspPrice {
    display: inline-block;
    margin-top: 2px;
    padding: 5px;
    background-color: #555;
    border-radius: 5px;
}

/* ==========================================================================
Control Page
========================================================================== */
.ctrl-pg-status-box {
    /*background-color: #f6ebd5;*/
    padding: 10px 5px 10px 10px;
}

.carousel-box {
    padding: 10px;
    /*background-color: #b4c592;*/
    height: calc(100vh - 290px);
    overflow-y: hidden;
}

.control-left {
    /*height: 600px;*/
    height: calc(100vh - 100px);
    background-color: #ffffff;
    border: dashed 2px #b6b6b6;
    padding: 20px;
    font-size: 16px;
}

.control-left h4 {
    color: #000000;
    font-size: 12px;
    text-transform: uppercase;
}

.control-content {
    margin: 0;
    padding-top: 35px;
    padding-bottom: 10px;
}

.control-bottom {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 10px;
}

.top-control {
    margin-top: 20px;
    border-bottom: dotted 2px #b6b6b6;
}

.top-control ul li {
    list-style-type: none;
    padding: 10px 10px 0 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    float: left;
    height: 120px;
    width: 130px;
}


/*.top-control ul li a{
	display: block;
}*/

.top-control ul {
    text-align: center;
}

.top-control ul a {
    display: inline-block;
}


/* control-gallery css start here */

.func-btn-bg {
    background-color: #213365;
    margin-bottom: 10px;
    border: 1px solid #aeaca4;
    border-radius: 5px;
    display: block;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 9pt;
    min-height: 120px;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.session-active {
    background-color: #559d26 !important;
    color: #fff;
}

.session-btn {
    background-color: #d49d26;
    color: #fff;
}

.ss-info {
    font-weight: bold;
    color: #d49d26;
}

.void-btn {
    background-color: #75889e;
    color: #fff;
}

.start-btn {
    background-color: #538386;
    color: #fff;
}

.func-permitted {
    /*border-width: 1px;
    border-style: solid;
    border-color: #000000;*/
}
.func-not-permitted {
    color: #a0a2a3 !important;
    background-color: #666666 !important;
}

.func-btn-bg img {
    display: block;
    padding: 20px 0 10px;
    margin: auto;
    width: 52px;
    height: 76px;
}

.func-btn-bg:hover {
    background-color: #54617e;
    color: #FFF;
}

.left-arrow {
    font-size: 40px;
    display: block;
    color: #213365;
    position: inherit;
    /*margin-top: 165px;*/
    margin-top: calc((100vh - 290px) / 2);
}

.right-arrow {
    font-size: 40px;
    display: block;
    color: #213365;
    position: inherit;
    /*margin-top: 165px;*/
    margin-top: calc((100vh - 350px) / 2);
}

ul.report-btn-con li label {
    height: 50px;
    min-width: 50px;
    padding: 10px;
    margin: 5px 5px;
    text-align: center;
    overflow: hidden;
}

ul.report-btn-con li input[type="radio"] {
    display: block;
    margin: auto;
    margin-top: 5px;
}

.text-bold {
    font-weight: bold;
}


/* ==========================================================================
Transfer Bill Pop-Up
========================================================================== */

.transfer-cont {
    margin: 120px 0;
    text-align: center;
}

.transfer-cont h3 {
    font-family: arial;
    font-size: 25px;
    color: #fff;
    font-weight: bold;
    line-height: 50px;
}

.bills-over ul li {
    list-style-type: none;
    background: #d3dae2;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: solid 2px #a0a4a8;
    cursor: pointer;
    padding: 11px 15px;
}

.bills-over ul li a {
    text-decoration: none;
    color: #4c5f96;
    line-height: 20px;
}

.start {
    width: 100%;
    max-width: 490px;
    text-align: center;
    margin: 0 auto;
    min-height: 45px;
    -webkit-border-radius: 8px;
    /* No need for this */
    -moz-border-radius: 8px;
    /* No need for this */
    border-radius: 8px;
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #4c5f96;
}

.start.deactive a {
    color: #a0a4a8;
    cursor: not-allowed;
}

.cancel {
    width: 100%;
    max-width: 405px;
}


/* ==========================================================================
Collection Declaration - Summary
========================================================================== */

.declaration {
    height: 550px;
    overflow-y: auto;
}

.declaration h3 {
    color: #555;
}

.declaration-summary {
    padding-top: 15px;
    width: 95%;
    max-width: 890px;
    min-height: 540px;
    /*margin-left: 35px;*/
    margin-left: auto;
    margin-right: auto;
}

.declaration-summary h3 {
    font-size: 18px;
    color: #555;
    font-weight: bold;
    margin-bottom: 65px;
}

.declaration-summary .btn-navi-container .down {
    position: relative;
    top: 350px;
}

.summary-table tr th:first-child, .summary-table tr td:first-child {
    padding-left: 12px;
    text-align: left;
}

.summary-table tr th, .summary-table tr td {
    font-family: arial;
    font-size: 19px;
    font-weight: bold;
    height: 35px;
    text-align: right;
}

.summary-table {
    max-height: 380px;
}

.summary-table th {
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
    padding-bottom: 5px;
}

.bg {
    background: #a6b5c3;
}

.declare-input {}

.declare-input-selected {
    border-color: red !important;
}


/* ==========================================================================
Collection Declaration - Default Form
========================================================================== */

.default-declaration {
    color: #555;
    margin-left: 10px;
    font-size: 17px;
    font-weight: bold;
    width: 90%;
    margin-right: 10px;
}

.default-declaration thead {
    font-size: 12px;
}

.default-declaration tbody tr {
    height: 83px;
}

.default-declaration tbody tr td, th {
    padding: 0 5px;
    vertical-align: middle;
}

.default-declaration td:first-child {
    width: 30%;
}

.default-declaration td:last-child {
    width: 20%;
    vertical-align: middle;
}

.default-declaration td:nth-last-of-type(2) {
    width: 30%;
    vertical-align: middle;
}

.default-declaration td:nth-last-of-type(3) {
    width: 3%;
}

.default-declaration.table tr td {
    border-top: 0;
}

.declaration-navi-btn {
    position: relative;
    top: 40px;
}

.declaration-navi-btn .down {
    position: relative;
    top: 400px;
}


/* ==========================================================================
Collection Declaration - Cash Confirmation
========================================================================== */

.declare-type-col-1 {
    display: inline-block;
    width: 40%;
    height: 70px;
    overflow-x: hidden;
}

.declare-type-col-2 {
    display: inline-block;
    padding-left: 10px;
    width: 30%;
    height: 70px;
    overflow-x: hidden;
}

.declare-type-col-3 {
    display: inline-block;
    width: 25%;
    height: 70px;
    overflow-x: hidden;
}

.declare-type-col-2 div, .declare-type-col-3 div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


/* ==========================================================================
Collection Declaration - Cash Confirmation
========================================================================== */

.inner-cash ul {
    list-style-type: none;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
}

.inner-cash ul li {
    /*background-color: #eee;*/
    color: #fff;
    display: inline-block;
    padding-left: 20px;
    padding-top: 25px;
    /*font-size: 18px;
  font-weight: bold;
  margin-bottom: 32px;*/
    vertical-align: middle;
    width: 50%;
    height: 90px;
}

.inner-cash ul li img {
    float: left;
}

.inner-cash ul li span {
    /*    padding-left:40px;
    font-size:32px;
    margin-top:28px;*/
    color: #555;
    float: left;
}

.total {
    font-size: 18px;
    color: #555;
    /* #fff */
    font-weight: bold;
    width: 100%;
    margin-bottom: 50px;
}

.total span {
    font-size: 24px;
    text-align: right;
    padding-right: 30px;
}


/* ==========================================================================
Collection Declaration - Cash Form
========================================================================== */

.cash-btn {
    max-width: 90px;
    display: inline-block;
    /*margin-left:12px;*/
    border-radius: 3px;
    min-height: 48px;
    margin-top: 0;
}

.cash-cont {
    width: 61%;
}

.cash-cont1 {
    width: 39%;
    margin-top: 30px;
}

.inner-cash ul li:nth-child(2n+2) {
    float: right;
    width: 50%;
}


/* ==========================================================================
Collection Declaration - Start
========================================================================== */

.collection-cont {
    padding-top: 15px;
}

.collection-list {
    padding-top: 60px;
    text-align: center;
    float: left;
    width: 80%;
}

.collection-list ul li {
    list-style-type: none;
    display: inline-block;
    padding-right: 6px;
    padding-bottom: 16px;
    width: 20%;
}

.collection-list ul li:last-child {
    float: left;
    margin-left: 9%;
}

.collection-list ul li span {
    display: block;
    font: normal 14px arial;
    color: #555;
}

.collection-right {
    float: right;
    width: 20%;
    margin-top: 8%;
}

.bottom-navi-container {
    margin: 0 50px;
    border-top: dashed 2px #fff;
    padding-top: 28px;
}

.bottom-navi-container button {
    height: 50px;
    min-width: 120px;
    font-size: 16px;
    padding: 5px;
}


/* ==========================================================================
Session - View Details
========================================================================== */

.session-cont {
    padding-top: 23px;
}

.inner-session {
    background: #e6e6e6;
    border: solid 8px #59595b;
    border-collapse: inherit;
    padding: 45px 5px 0;
}

.heading-text {
    font: bold 16px arial;
    color: #000;
}

.inner-session .table.table-responsive th {
    padding: 10px 0 10px 45px;
    background: #59595b;
    color: #e6e6e6;
}

.table-heading {
    background: #59595b;
    font: bold 24px arial;
    color: #fff;
}

.inner-session .table.table-responsive td {
    border-bottom: dashed 1px #59595b;
    border-top: 0;
    font: normal 14px arial;
    color: #2e2e2e;
    text-align: center;
}

.inner-session .table.table-responsive td.red-color {
    color: #f83d3d;
}

.inner-session .table.table-responsive tr:nth-child(2n+0) {
    background: #d6d4d4;
}

.session-table th {
    font: bold 16px arial;
    color: #000;
    padding-left: 45px;
}

.session-table td {
    height: 45px;
    padding-left: 45px;
}

.session-footer {
    margin: 0 auto;
    text-align: center;
    padding: 20px 0;
}

.session-footer button {
    background: #b1aea6;
    border-radius: 0;
    border: solid 3px #fff;
    font: bold 20px arial;
    margin-right: 15px;
}

.session-footer button:hover {
    background: #b1aea6;
    border-radius: 0;
    border: solid 3px #fff;
}

.main-border {}


/* ==========================================================================
Overwrite Access-Login
========================================================================== */

.h3 {
    font: bold 19px arial;
    color: #fff;
}


/* overwrite-access css end here */


/*.inner-cash li strong {
    width: 43px;
    margin-top:26px;
    float:left;
}*/

.inupt-text.inupt-text1 input {
    border: 1px solid #e4e5e6;
    color: #000000;
    font: 22px arial;
    margin-bottom: 22px;
    max-width: 273px;
    min-height: 72px;
    text-align: center;
    width: 100%;
}

.number-list.custom-nubmer-list {
    margin-top: 50px;
}

.number-list.custom-nubmer-list1 {
    margin-top: 100px;
}

.cancel-btn {
    float: right;
    margin-right: 39px;
}

.inupt-text1 {
    margin-left: 53px;
}

.number-list button {
    width: 80%;
    padding: 20px;
    font-size: 18px;
    margin: 20px auto;
}

.default-declaration.table.table-responsive td span {
    float: left;
    margin-top: 15px;
}


/* ==========================================================================
Item Ordering
========================================================================== */

.item-bg {
    background: #ddd;
    padding: 0;
}

.left-journal {
    background-color: #e5e5e5;
    /* height:600px; */
    border-bottom-right-radius: 12px;
    width: 430px;
    /* 42%*/
    box-shadow: 2px 1px 1px #999;
    -webkit-box-shadow: 2px 1px 1px #999;
    padding: 0;
}


/* Items buttons */

.right-item-buttons {
    /*width:52%;*/
    width: calc(100% - 430px - 65px);
    /* width - left - right */
    height: calc(100vh - 52px);
}

.journal-details {
    overflow: hidden;
    color: #000;
    font-size: 12pt;
}

.journal-header {
    padding: 15px 0 10px;
    margin: 0;
    font-weight: bold;
}

.journal-input {
    /*margin-top:20px;*/
    background-color: #2d353c;
    /* 313c64 */
    padding: 8px 30px 8px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    width: 380px;            /* 380px */
}

.journal-input input[type="text"] {
    background-color: #2d353c;
    color: #fff;
    border: none;
    width: 150px;            /* new */
}

.journal-subtotal-bar {
    background-color: #2d353c;
    /* 313c64 */
    padding: 10px 1px 10px 1px;
    color: #fff;
    font-size: 17pt;
    font-weight: bold;
    text-align: center;
    width: 92%;
    display: inline-block;
}

.journal-table-container {
    width: 100%;
    color: inherit;
    /*overflow-y: scroll;*/
    height: 100%;
    /* 478px;  580px */
    /*margin-bottom: -30px;*/
}


/*h5.journal-input {text-align:center; width:85%;}*/

.btn-journal-navi {
    font-size: 30px;
    padding: 5px 8px;
    text-align: center;
    cursor: pointer;
}

.item-modifier-listing-box {
    height: 100%;
    overflow-y: auto;
    width: 95%;
    display: inline-block;
}

.journal-receipt-discount-selected,
.journal-combo-item-selected,
.journal-combo-item-modifier-selected,
.journal-item-modifier-selected,
.journal-item-discount-selected {
    background-color: #0c7f0e !important;
    /* red !important; */
    color: white !important;
}

.journal-item-discount {
    color: #ff5a5a;
}

.journal-item-current {
    background-color: #cccccc;
    /* #bdceef; */
}


/*-------------------- pos table - START ------------------------*/

.journal-list {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.journal-list th {
    text-decoration: underline;
}

.journal-list th, .journal-list td {
    padding: 7px 5px;
    text-align: left;
}

.journal-list td:nth-child(1), .journal-list th:nth-child(1) {
    width: 45px;
}

.journal-list td:nth-child(2), .journal-list th:nth-child(2) {
    width: 300px;
}

.journal-list td:nth-child(3), .journal-list th:nth-child(3) {
    width: 70px;
    text-align: right;
}

.journal-list thead {
    background-color: #333333;
    color: #fdfdfd;
}

.journal-list thead tr {
    display: block;
    position: relative;
}

.journal-list tbody {
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 105%;
    height: calc(100vh - 360px);
}

.journal-list tbody tr {
    border-bottom: 1px solid #888;
}

.journal-list tbody tr:hover {
    cursor: pointer;
}

.journal-item-indent {
    padding-left: 30px !important;
}

.journal-item-indent-2 {
    padding-left: 50px !important;
}


/*.journal-list tbody tr:nth-child(even) {
  background-color: #dddddd;
}*/

.journal-receipt-discount {
    background-color: #cacaca;
    padding: 10px 35px 10px 15px;
    font-weight: bold;
    font-size: 14pt;
}

.journal-receipt-discount:hover {
    cursor: pointer;
}

.computation {
    color: blue;
}


/*-------------------- pos table - END ------------------------*/

.sub-category-listing-box ul {
    display: block;
    width: 100%;
}

.sub-category-listing-box li {
    height: 60px !important;
}

.btn-category, .btn-sub-category, .btn-item {
    overflow-x: hidden;
    overflow-y: hidden;
    height: initial;
    min-height: 60px;
    max-height: 90px;
}

.btn-sub-category {
    border: 5px ridge;  /* solid #000; */
}

.btn-active {
    /*background-color: #e66 !important;*/
    opacity: 0.6;
}

.tender_type, .tender_type div.title-container span {
    background-color: #CCC;
    color: #fff;
    padding-bottom: 0;
}

.tender_type .content {
    height: 105px;
}

.tender_type .content ul li {
    width: 18%;
    margin-right: 7px;
}

.tender_type .content ul li:nth-child(5n+5) {
    margin-right: 0;
}

.title-container {
    background: url(../images/head_bg.png) repeat-x 0 7px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    color: #b2b8c3;
    padding-left: 10px;
    text-transform: uppercase
}

.title-container span {
    display: inline-block;
    padding: 0 10px;
    text-align: center;
    background: #d1d6e0;
}

.item-category-container {
    padding: 10px 0 10px 10px;
    height: 160px;
}

.item-category-container .btn-navi-container .down {
    position: relative;
    top: 90px;
}

.item-category-box {
    display: inline-block;
    height: 140px;
    width: 95%;
    overflow-y: auto;
}

.item-category-container ul {
    margin: 0;
    padding: 0;
    width: 100%;
}

.item-category-container li {
    margin: 4px 2px;
    width: 140px;
    /* 23% */
    min-width: 50px;
    max-width: 100%;
    vertical-align: middle;
}

.popup-navi-container {
    display: inline-block;
    width: 94%;
}
.btn-navi-container {
    display: inline-block;
    vertical-align: top;
    max-width: 5%;
    font-size: 24px;
    margin: 0;
    padding: 0;
    color: #2d353c;
    /* 313c64 */
    cursor: pointer;
}

.item-listing-container, .combo-item-choice-listing-container {
    /*height:450px;*/
    padding: 10px 0 10px 10px;
    height: calc(100vh - 52px - 160px - 15px);
}

.item-listing-box, .combo-listing-box, .combo-item-choice-listing-box {
    display: block;
    width: 100%;
    /*  height: 545px;
  overflow-y: scroll;
  width:95%;*/
}

.item-listing-container .btn-navi-container .down {
    position: relative;
    /*top: 470px;*/
    top: calc(100vh - 52px - 160px - 100px);
}

.item-listing-container ul {
    margin: 0;
    padding: 10px 0 0 0;
}

.item-listing-container li, .combo-item-choice-listing-container li {
    width: 142px;
    /* 89px - 18%; */
    min-width: 50px;
    max-width: 100%;
    margin: 4px 1px;
    padding: 2px 0;
    vertical-align: middle;
    height: 70px;        /* 90px */
    overflow: hidden;
    line-height: 1.2em;
}

.item-btn-container {
    /*height: 525px;*/
    height: 100%;
    overflow-y: auto;
    width: 95%;
    display: inline-block;
}

.price-container {
    position: absolute;
    width: 100%;
    margin-top: 45px;
}

.item-listing-container li:nth-child(5n+5) {
    margin-right: 0
}

.func-listing-container {
    padding: 0 0 0 2px;
}

.func-listing-container .btn-navi-container .down {
    position: relative;
    top: 50px;
}

.func-listing-container .title-container span {
    display: inline-block;
    padding: 0 10px;
    text-align: center;
    background: #fff;
}

.func-listing-container ul {
    /*margin: 8px 0 0 0;*/
    padding: 0;
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 2px 3px;
}

.func-listing-container li {
    /*width:14.8%;*/
    display: table-cell;
    /*display: inline-block;*/
    min-width: 55px;
    max-width: 100%;
    margin: 4px 2px;
    padding: 4px 1px;
    height: 45px;        /* 95px */
    vertical-align: middle;
}

.func-listing-container li img {
    margin: auto;
    padding: 5px;
    height: 70%;
    display: block;
}

.func-listing-container li div {
    display: block;
    height: 70%;
}

.func-panel-1,
.func-panel-2 {
     padding-right: 0;
     background-color: #aca4a4;
}


/* ==========================================================================
Receipt Popup
========================================================================== */

.modal-receipt-box-width {
    width: 380px;
}

.modal-body-box {
    width: 100%;
    height: 450px;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-body-box p {
    background-color: #fee;
    font-family: courier;
    font-size: 12px;
    text-align: left;
    line-height: 1.3em;
}

.modal-receipt-print-btns {
    padding-top: 8px;
}


/* ==========================================================================
Discount Popup
========================================================================== */

.disc-info,
.open-item-info {
    width: 50%;
    float: left;
    padding: 0 20px;
    font-size: 18px;
}

.disc-info h3,
.open-item-info h3 {
    color: #59595b;
    text-align: left;
}
.lbl-open-item-name {
    margin: 10px;
    text-align: left;
}
.btn-open-item-amt-ok {
    min-width: 120px;
    padding: 15px;
    background-color: #213365;
    color: #fff;
}

.item-name {
    height: 55%;
    padding-top: 2px;
}

.item-info {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
}

.item-info tr th {
    font-size: 14px;
    font-weight: bold;
    font-variant: uppercase;
}

.item-info td {
    padding: 10px 5px;
    text-align: left;
    color: #7777ff;
}

.input-text {
    height: 45px;
    margin-bottom: 22px;
    border: solid 1px #e4e5e6;
    text-align: center;
    color: #4b4b4b;
}

.disc-info .func-btn-bg {
    min-width: 140px;
    margin: 0 10px;
    line-height: 20px;
    font-size: 16px;
}

.display-inline {
    display: inline;
}

.disc-keypad {
    /*width: 50%;*/
    float: right;
}


/* ==========================================================================
Payment Modal
========================================================================== */

.tender-keypad .number-list ul li {
    width: 60px;
    height: 60px;
    font-size: 24px;
    font-weight: bold;
}

.tender-keypad .number-list ul li.text-shadow {
    -webkit-box-shadow: 5px 4px 1px #464B4F;
    text-shadow: rgb(125, 135, 147) 1px 1px, rgb(125, 135, 147) 2px 2px, rgb(125, 135, 147) 3px 3px, rgb(125, 135, 147) 4px 4px, rgb(125, 135, 147) 5px 5px, rgb(125, 135, 147) 6px 6px, rgb(125, 135, 147) 7px 7px, rgb(126, 136, 148) 8px 8px, rgb(127, 137, 149) 9px 9px;
}

.tender-info h5.journal-input {
    width: 100%;
    padding: 6px;
    font-size: 14px;
}

.tender-info-table td {
    padding: 7px 40px 7px 20px;
    width: 100%;
}

.tender-amt-table td {
    padding: 10px 5px 10px 20px;
}

.tender-info-table tr, .tender-info-table td, .tender-amt-table tr, .tender-amt-table td {
    border-bottom: solid 1px #ccc;
    ;
}

.tender-info-table tr:last-child {
    font-weight: bold;
    font-size: 16px;
    color: #2d353c;
    /* 313c64 */
    border-bottom: double;
}

.tender-info-table td:first-child, .tender-amt-table td:first-child {
    text-align: left;
}

.tender-info-table td:last-child, .tender-amt-table td:last-child {
    text-align: right;
}

.tender-amt-table {
    width: 100%;
    margin: 10px 5;
}

#tender-balance {
    text-align: right;
    /*padding-right: 50px;*/
}

.balance-negative {
    background-color: #b73333 !important;
}

.tender-amt-table th {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    padding: 10px 0 10px 20px;
    background-color: #2d353c;
}

.tender-amt-table tr:first-child {}

ul.tender-group li {
    list-style-type: none;
    padding: 5px 10px 0 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    height: 72px;
    width: 122px;
}

ul.tender-group {
    text-align: left;
    margin: 5px 5px;
}

.payment-header {
    padding-bottom: 0;
}

.quick-keys-box {
    height: 330px !important;
    overflow-y: auto;
}

ul.quick-keys {
    margin: 20px 0;
}

ul.quick-keys li {
    width: 116px;
    height: 88px;
    margin: 5px 0;
}

.tender-group-box {
    border-top: 3px solid #ccc;
    height: 230px;
    overflow-y: scroll;
    text-align: left;
}

.tender-group-list li {
    margin: 2px;
    width: 95px;
}

.tender-group img {
    width: 48px;
    display: block;
    text-align: center;
    margin-top: 0;
    margin: auto;
}

.highlight {
    background-color: #8ca892;
}

.highlight:after {
    content: "\e088";
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #59595b;
    font-size: 24px;
    padding-right: 0.5em;
    margin-top: 10px;
    position: fixed;
    left: 400px;
}

.tender-payment-box {
    height: 180px;
    overflow-y: scroll;
}

#txt-tender-input {
    font-size: 25px;
    text-align: center;
    width: 100%;
}

.tender-journal-payment-mode {
    width: 60% !important;
    /* 250px */
}

.tender-journal-payment-amount {
    width: 30% !important;
    /* 100px */
    text-align: right;
}

.tender-journal-remove-payment {
    width: 10% !important;
    text-align: center !important;
    font-size: 1.5em;
}


/* ==========================================================================
Payment Page
========================================================================== */

.left-payment {
    width: 42%;
}

.payment-container {
    margin-bottom: 20px;
    padding: 0 0 20px 0;
    -webkit-border-radius: 8px;
    background-color: #b1b1b1;
    height: 530px;
    border-bottom-right-radius: 12px;
    width: 42%;
    box-shadow: 2px 1px 1px #999;
    -webkit-box-shadow: 2px 1px 1px #999;
    width: 100%;
}

.payment-container .journal-input {
    width: 100%;
    margin-bottom: 10px;
}

table.payment-info {
    width: 100%;
    font-size: 14px;
}

table.payment-info th {
    background-color: #e6e6e6;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    color: #2d353c;
    /* 313c64 */
}

table.payment-info tr {
    border-bottom: #e6e6e6 1px solid;
}

table.payment-info th:last-child, table.payment-info td:last-child {
    text-align: right;
}

table.payment-info td {
    padding: 10px 20px 10px 35px;
}

.secondary-header {
    background: #cacaca;
    color: #2d353c;
    /* 313c64 */
    padding: 10px 20px;
    font-weight: bold;
    overflow: hidden;
}

.secondary-header td {
    padding: 10px 20px !important;
}

.back_to {
    display: inline-block;
    margin-left: 5px;
    width: 18%;
    height: 180px;
    font-size: 16px;
    line-height: normal;
}

.back_to img {
    padding-top: 10px;
    padding-bottom: 10px;
}

.payment-func-container ul {
    margin: 0;
    padding: 0;
    width: 78%;
    float: right;
}

.payment-func-container li {
    display: inline-block;
    margin: 0 4px 10px 0;
    width: 23%;
    vertical-align: top;
}

.payment-func-container li:last-child {
    height: 102px;
    vertical-align: text-bottom;
}

.payment-func-container li:nth-child(4n+4) {
    margin-right: 0;
}

.payment_type_pan {
    width: 52%;
    padding: 10px 10px 0 10px;
}

.freq_usd_mode {
    margin: auto;
    padding: 10px 0;
}

.freq_usd_mode li {
    display: inline-block;
    margin: 0 7px 0 0;
    width: 23%;
    height: 70px;
    vertical-align: top;
}

.tender_type ul {
    margin: 0;
    padding: 5px 0;
}

.tender_type li {
    width: 19%;
    margin: 0 1px 10px 0;
    display: inline-block;
    padding: 2px 0;
    font-size: 12px;
}

.tender_type li img {
    padding: 0 10px 5px;
    width: 80%;
}

.tender_type li:nth-child(5n+5) {
    margin-right: 0;
}

.tender-mode {
    height: 520px;
}

.tender-mode-selected {
    opacity: 0.6;
}

.tender-mode ul {
    width: 95%;
    padding: 10px 0 0 10px;
}

.tender-mode li {
    display: inline-block;
    margin: 0 5px 10px 0;
    width: 23%;
    height: 70px;
}

.tender-mode .btn-navi-container .down {
    position: relative;
    top: 440px;
}

.key_pad_pan {
    padding-right: 0;
    width: 65px;
    cursor: pointer;
}

.key_pad_pan ul {
    margin: 0;
    padding: 0;
    border-left: dashed 1px #fff;
    border-top: dashed 1px #fff;
}

.key_pad_pan li {
    background-color: #2d353c;
    color: #fff;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    /*line-height: 18px;*/
    /*padding: 15px;*/
    width: 100%;
    border-bottom: dashed 1px #fff;
    list-style-type: none;
    height: calc((100vh - 54px - 65px) / 13 );
    line-height: calc((100vh - 54px - 65px) / 13 );
    vertical-align: middle;
}

.key_pad_pan li:first-child {
    font-size: 18px;
    background: #6b7785;
    /*padding: 15px 0;*/
}

.key_pad_pan li:last-child {
    font-size: 18px;
    background: #45633e;
    border-bottom: none;
    padding: 6px 5px;
    margin-bottom: 0;
    height: 65px;
}

.key_pad_pan li.clear_input {
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 18px;
}

.key_pad_pan li:hover {
    opacity: 0.8;
}


/* ==========================================================================
Reprint Receipt - AW
========================================================================== */

#void-receipt table thead,
#reprint-receipt table thead,
#send-sales-report table thead,
#retrieve-order table thead {
    display: block;
    width: 100%;
}

#void-receipt table tbody,
#reprint-receipt table tbody,
#send-sales-report table tbody,
#retrieve-order table tbody {
    display: block;
    width: 100%;
    height: 350px;
    overflow-y: auto;
}

#void-receipt table tbody tr td,
#reprint-receipt table tbody tr td,
#send-sales-report table tbody tr td,
#retrieve-order table tbody tr td {
    vertical-align: middle;
    font-size: 0.8em;
}


/* -------------------- VOID & REPRINT RECEIIPT table --------- */
#void-receipt table thead tr td:nth-child(1),
#void-receipt table tbody tr td:nth-child(1),
#reprint-receipt table thead tr td:nth-child(1),
#reprint-receipt table tbody tr td:nth-child(1) {
    width: 29%;
}

#void-receipt table thead tr td:nth-child(2),
#void-receipt table tbody tr td:nth-child(2),
#reprint-receipt table thead tr td:nth-child(2),
#reprint-receipt table tbody tr td:nth-child(2) {
    width: 15%;
}

#void-receipt table thead tr td:nth-child(3),
#void-receipt table tbody tr td:nth-child(3),
#reprint-receipt table thead tr td:nth-child(3),
#reprint-receipt table tbody tr td:nth-child(3) {
    width: 15%;
}

#void-receipt table thead tr td:nth-child(4),
#void-receipt table tbody tr td:nth-child(4),
#reprint-receipt table thead tr td:nth-child(4),
#reprint-receipt table tbody tr td:nth-child(4) {
    width: 15%;
}

#void-receipt table thead tr td:nth-child(5),
#void-receipt table tbody tr td:nth-child(5),
#reprint-receipt table thead tr td:nth-child(5),
#reprint-receipt table tbody tr td:nth-child(5) {
    width: 15%;
}

#void-receipt table thead tr td:nth-child(6),
#void-receipt table tbody tr td:nth-child(6),
#reprint-receipt table thead tr td:nth-child(6),
#reprint-receipt table tbody tr td:nth-child(6) {
    width: 90px;
}

/* -------------------- HOLD ORDER LIST table --------- */
#retrieve-order table thead tr td:nth-child(1),
#retrieve-order table tbody tr td:nth-child(1) {
    width: 50px;
}
#retrieve-order table thead tr td:nth-child(2),
#retrieve-order table tbody tr td:nth-child(2) {
    width: 120px;
    text-align: center;
}
#retrieve-order table thead tr td:nth-child(3),
#retrieve-order table tbody tr td:nth-child(3) {
    width: 120px;
}
#retrieve-order table thead tr td:nth-child(4),
#retrieve-order table tbody tr td:nth-child(4) {
    width: 150px;
    text-align: center;
}
#retrieve-order table thead tr td:nth-child(5),
#retrieve-order table tbody tr td:nth-child(5) {
    width: 180px;
}
#retrieve-order table thead tr td:nth-child(6),
#retrieve-order table tbody tr td:nth-child(6) {
    width: 200px;
    text-align: right;
}

.btn-print-order-selected,
.btn-retrieve-order-selected {
    min-width: 75px;
}
/* -------------------- SEND SALES REPORT table --------- */

#send-sales-report table thead tr td:nth-child(1),
#send-sales-report table tbody tr td:nth-child(1) {
    width: 150px;
}
#send-sales-report table thead tr td:nth-child(2),
#send-sales-report table tbody tr td:nth-child(2) {
    width: 230px;
}
#send-sales-report table thead tr td:nth-child(3),
#send-sales-report table tbody tr td:nth-child(3) {
    width: 150px;
}
#send-sales-report table thead tr td:nth-child(4),
#send-sales-report table tbody tr td:nth-child(4) {
    width: 140px;
}
#send-sales-report table thead tr td:nth-child(5),
#send-sales-report table tbody tr td:nth-child(5) {
    width: 140px;
}

/* -------------------- TEST PRINT ------------------------ */
.test-print-content {
    padding: 10px 10px;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.2em;
    /*background-color: #bef097;*/
}

/* -------------------- SEND SALES REPORT CONTENT --------- */

#send-sales-report-content {
    line-height: 1.3em;
    width: 100%;
    height: 350px;
    overflow-y: auto;
}


/* ==========================================================================
Payment Detail Modal - Keyboard
========================================================================== */

.payment-detail tfoot tr {
    border-top: 3px solid #000;
    font-size: 18px;
    font-weight: bold;
}

.payment-detail tbody {
    font-size: 16px;
}

.payment-detail>tbody>tr>td {
    border-top: 1px dashed #ccc !important;
}

.payment-detail thead th {
    text-align: center;
}

.payment-detail {
    max-width: 95% !important;
    margin: auto;
}

.modal-body .btn-navi-container .down {
    position: relative;
    top: 220px;
}


/* ==========================================================================
Data Collection Modal - Keyboard
========================================================================== */

#data-collect h3 {
    color: #59595b;
}

#txtOrderTag,
#past-receipt-no,
#keyboard-remark {
    margin: 0 0 20px;
    padding: 10px;
    /*width: 790px;*/
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    background: #fff;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#keyboard {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: inline-block;
}

#keyboard li {
    float: left;
    margin: 0 5px 5px 0;
    width: 50px;
    height: 50px;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    color: #5b5b5b;
    padding-top: 10px;
    background: #cecece;
    border: 1px solid #c5c5c5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.capslock, .tab, .left-shift {
    clear: left;
}

#keyboard .tab, #keyboard .delete {
    width: 80px;
}

#keyboard .capslock {
    width: 90px;
}

#keyboard .return {
    width: 94px;
}

#keyboard .left-shift {
    width: 110px;
}

#keyboard .right-shift {
    width: 128px;
}

.lastitem {
    margin-right: 0;
}

.uppercase {
    text-transform: uppercase;
}

#keyboard .space {
    clear: left;
    /*width: 794px;*/
    width: 100%;
}

.on {
    display: none;
}

#keyboard li:hover {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
}

#keyboard li.inactive:hover {
    position: static;
    border-color: none;
    cursor: pointer;
    border: 1px solid #c5c5c5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}


/* ==========================================================================
Table Layout Page
========================================================================== */

.table_layout_pan {}

.table_layout_left {
    width: 81%;
    float: left;
}

.table_layout_crcle {
    width: 100%;
    border: solid 10px #b5b2a7;
    position: relative;
    background: #ebebeb;
    padding: 20px;
    height: 540px;
    color: #000;
    margin-top: 10px;
    overflow: scroll;
}

.table_layout_crcle li {
    min-width: 50px;
    height: 50px;
    margin-right: 6px;
    margin-bottom: 10px;
    padding-top: 15px;
}

.lst_li {
    margin: 10px 5px 10px;
    border-bottom: dashed 1px #7f7f7f;
    height: 105px;
}

.lst_li li {
    list-style-type: none;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 8px;
}

.cntrl_pan {}

.cntrl_pan ul {
    margin: 0;
}

.cntrl_pan li {
    list-style-type: none;
    display: inline;
    margin-right: 9px;
    float: left;
    width: 19%;
    height: 55px;
    font-size: 15px;
}

.cntrl_pan li:last-child {
    margin-right: 0;
}

.table_layout_right {
    width: 17%;
    float: right;
}

.table_layout_right figure {
    height: 150px;
    vertical-align: middle;
}

.table_placing ul {
    margin: 0;
    padding: 0;
}

.table_placing li {
    list-style-type: none;
    display: inline;
    margin: 0 10px 10px 0;
    width: 46%;
    float: left;
}

.table_placing li:nth-child(2n+2) {
    margin-right: 0;
}

.legend_pan {
    background: url(../images/light_blu_bg.png) repeat;
    padding: 12px 8px;
    margin: 0 -15px 0 0;
    float: right;
    border-radius: 10px 0 0 10px;
    width: 109%;
    position: relative;
}

.legend_pan ul {
    margin: 0;
    padding: 0;
}

.legend_pan li {
    border-bottom: dashed 1px #606060;
    padding-bottom: 4px;
    margin-bottom: 3px;
    color: #fff;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    list-style-type: none;
    display: inline-block;
    width: 86%;
}

.legend_pan li.time {
    padding-left: 15px;
}

.legend_title {
    position: absolute;
    right: -27px;
    bottom: 50px;
    z-index: 0;
    transform: rotate(270deg);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #354050;
    font-weight: bold;
}

.legend_pan li>div {
    height: 20px;
    width: 24px;
    display: inline-block;
    margin: 0 10px 0 5px;
}

section.table-action {
    background-color: #4C4C4C;
    margin-top: 20px;
    padding: 20px 0 10px 20px;
    border-radius: 10px;
}

.left-info {
    width: 80%;
}

.left-info ul {
    padding-top: 10px;
}

.left-info ul>li {
    height: 40px;
    min-width: 40px;
    display: inline-block;
    margin: 0 10px 10px 5px;
}

.left-info h3 {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
}

.right-action-btn {
    width: 20%;
    margin-top: 50px;
}

.right-action-btn li {
    width: 50px;
}

.table-status-block {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #6f7172;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-status-available {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #fff;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-status-occupied {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #896829;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-status-ordered {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #fde3a7;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-status-ordered-tier1 {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #f9e606;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-status-ordered-tier2 {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #ff7f00;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-status-ordered-tier3 {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #ff0000;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-status-served {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #913d88;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-status-tendering {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #06f4f4;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-status-cleaning {
    border-radius: 50%;
    border: dotted 2px #ccc;
    background-color: #1cc655;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.table-selected {
    background-color: #000;
    color: #fff;
}

.pax-container {
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.95);
    position: absolute;
    z-index: 999999;
    margin-left: -15px;
}

.pax-content {
    padding: 50px 30px 20px 30px;
    width: 94%;
}

.pax-content ul {
    padding-bottom: 10px;
    border-bottom: 3px dotted #CCC;
}

.pax-content li {
    width: 80px;
    height: 100px;
    margin: 15px 20px 15px 0;
    font-size: 24px;
    padding-top: 30px;
}

.pax-container, .pax-container h3 {
    color: #fff;
}

.pax-container h3 {
    color: #fff;
    font-weight: bold;
    margin: 10px 0;
}

.popup-input {
    margin-top: 20px;
}

.popup-input .btn-enabled {
    margin-top: 50px;
    margin-right: 20px;
    font-size: 20px;
    padding: 20px;
}


/* ==========================================================================
Split Bill
========================================================================== */

.split-title, .split-title-paging{
    float: left;
    color:#FFFFFF;
    line-height:60px;
}
.split-title-paging{
    width: 50%;
    text-align: center;
}
.split-title-paging button{
    color:#000000;
    margin:0 10px;
}
.split-journal {
    background-color: #e5e5e5;
    /*
    border-bottom-right-radius: 12px;
    box-shadow: 2px 1px 1px #999;
    -webkit-box-shadow: 2px 1px 1px #999;
    */
    padding: 5px;
}
.split-footer{
    background: #000000;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
.journal {
    background-color: #e5e5e5;
    height: 720px;
    border-bottom-right-radius: 12px;
    box-shadow: 2px 1px 1px #999;
    -webkit-box-shadow: 2px 1px 1px #999;
    padding: 0;
}

.journal:nth-child(odd) {
    background-color: #b1aca5;
}

.container-inline {
    display: inline;
}


/* ==========================================================================
Split Bill
========================================================================== */

.modal-content {
    background-color: #e4e4e4;
    border: 10px #59595b solid;
    max-height: 700px;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-title {
    background-color: #59595b;
    font-size: 24px;
    padding: 5px 10px;
    color: #e4e4e4;
    text-align: left;
    margin-top: 10px;
}

.modal-btn {
    border: 1px #ffffff solid;
    background-color: #aeaba4;
}

.modal-btn:focus {
    border: 1px #ffffff solid;
    background-color: #aeaba4;
    opacity: 0.8
}

.modal-btn:hover {
    background-color: #59595b;
    border: #aeaba4 1px solid;
}

.modal-table thead {
    font-weight: bold;
}

.modal-table td {
    text-align: left;
    padding: 5px 10px;
}

.modal-table tr:nth-child(even) {
    background-color: #d3d2d2;
}

.modal-footer {
    text-align: center;
    border-top: 1px dashed #999;
    clear: both;
}

.modal-close {
    opacity: 1;
}
.split-journal-details {
    width: 430px;
    margin: 0 auto;
}
.split-journal-list {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.split-journal-list th {
    text-decoration: underline;
}

.split-journal-list th, .split-journal-list td {
    padding: 10px 5px;
    text-align: left;
}

.split-journal-list td:nth-child(1), .split-journal-list th:nth-child(1) {
    width: 45px;
}

.split-journal-list td:nth-child(2), .split-journal-list th:nth-child(2) {
    width: 300px;
}

.split-journal-list td:nth-child(3), .split-journal-list th:nth-child(3) {
    width: 70px;
    text-align: right;
}

.split-journal-list thead {
    background-color: #333333;
    color: #fdfdfd;
}

.split-journal-list thead tr {
    display: block;
    position: relative;
}

.split-journal-list tbody {
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 105%;
    height: calc(100vh - 420px);
}

.split-journal-list tbody tr {
    border-bottom: 1px solid #888;
}

.split-journal-list tbody tr:hover {
    cursor: pointer;
}

.split-journal-list tbody tr {
    border-bottom: 1px solid #888;
}

.split-journal-list tbody tr:hover {
    cursor: pointer;
}

.split-info {
    width: 100%;
    float: left;
    padding: 10px 10%;
    font-size: 18px;
}

.split-info h3 {
    color: #59595b;
    text-align: left;
}

.split-info .func-btn-bg {
    min-width: 140px;
    margin: 0 10px;
    line-height: 20px;
    font-size: 16px;
}
select#txt-split-quantity {
    text-align: center;
    text-align-last: center;
    /* webkit*/
  }

  select#txt-split-quantity  option {
    text-align: left;
  }
  .split-mode .split-journal {
    border-bottom-right-radius: 0;
  }
  .split-journal .journal-subtotal-bar {
    width: 100%;
}
.split-journal .journal-list td:nth-child(3), .journal-list th:nth-child(3){
    width: 95px;
}
.journal-split-bar{
    padding: 23px 0px;
    border-bottom: 1px solid #888;
}
.split-mode .journal-list tbody {
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 105%;
    height: calc(100vh - 420px);
}
div#past-ss-report-box object,
div#current-report-box object{
    height:380px;
}

/* ==========================================================================*/

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  {
    div#current-report-box object{
        height:auto;
    }
}

@media (max-width:1024px) {
    .item-category-container li {
        margin: 4px 2px;
        width: 110px;
        /* 23% */
        min-width: 50px;
        max-width: 100%;
        vertical-align: middle;
    }

    .item-listing-container li, .combo-item-choice-listing-container li {
        width: 112px;
        /* 89px - 18%; */
        min-width: 50px;
        max-width: 100%;
        margin: 4px 1px;
        padding: 2px 0;
        vertical-align: middle;
        height: 70px;        /* 90px */
        overflow: hidden;
        line-height: 1.2em;
    }
}

@media only screen and (min-width: 768px)and (max-width: 997px) {
    /* tender popup */
    .tender-info-table td {
        padding: 7px 25px 7px 20px;
    }

    .tender-payment-box {
        height: 140px;
    }

    ul.tender-group li {
        margin-right: 0px;
        width: 75px;
        font-size: 10px;
    }
    ul.quick-keys li img,.tender-group img {
        width: 38px;
    }

    .tender-keypad .number-list ul li {
        width: 60px;
        height: 60px;
        font-size: 24px;
        font-weight: bold;
    }
    .number-list ul li {
        margin: 10px 4px 0 5px;
        padding-top: 18px;
    }
    .tender-keypad .number-list ul li {
        width: 47px;
        height: 47px;
        font-size: 20px;
    }

    .quick-keys-box {
        height: 240px !important;
    }
    ul.quick-keys li {
        width: 70px;
        height: 60px;
        font-size: 10px;
    }

    .tender-group-list li {
        width: 60px;
    }


    /* -----------*/
    .btn-shutdown {
        display: none;
    }

    .disc-info {
        width: 100%;
    }
    .disc-keypad {
        width: 100%;
        float: inherit;
    }

    .text-area textarea {
        margin-left: 10px;
    }
    .inupt-text {
        margin-left: 10px;
    }
    .cash-cont {
        width: 59%;
        float: left;
    }
    .cash-cont1 {
        width: 41%;
        float: right;
    }

    .declaration-summary {
        max-width: 695px;
        margin: 0 auto;
        width: 100%;
    }
    .start-shift h3 {
        font-size: 9px;
    }
    .start-shift p {
        font-size: 11px;
    }
    .working-date {
        background: url(../images/day-img-1_s.png) no-repeat top center;
        min-height: 130px;
    }
    .working-date h3 {
        font-size: 54px;
        line-height: 43px;
    }
    .current p {
        padding-bottom: 4px;
    }
    .current p.started {
        font-size: 10px;
        padding-top: 3px;
    }
    .current p.dd {
        font-size: 10px;
        padding-top: 0;
    }
    .current p.user-name {
        font-size: 11px;
        padding-top: 0;
    }
    .on-hold {
        background: url("../images/receipts-img-1_s.png") no-repeat center 8px;
        min-height: 151px;
    }
    .duty-session {
        padding: 0 6px;
    }
    .duty-progress {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 47px;
        margin-top: -1px;
    }
    .receipts h3 {
        padding-top: 29px;
    }
    .duty-progress {
        margin-bottom: 25px;
    }
    .default-declaration tr td {
        font-size: 13px;
    }
    .custom-text {
        width: 166px;
    }
    .custom-text1 {
        width: 103px;
    }
    .cancel-btn {
        margin-right: 38px;
    }
    .payment_pan .container {
        /*padding: 0 15px;*/
    }
    .tender_mode.items_pan .content li {
        width: 16%;
    }
    .cntrl_pan li {
        width: 18%;
    }
    .legend_pan li {
        margin-bottom: 0;
        padding: 5px 0;
    }
    .tendering {
        left: 70px;
    }
    .legend_pan li span {
        float: none;
    }
    .payment-func-container li {
        width: 22%;
    }
    .lst_li li {
        display: inline-block;
        margin-bottom: 10px;
    }

    .top-control ul li {
        width: 100px;
        margin-bottom: 0;
    }
}
@media (max-width:479px) {
    .btn-shutdown {
        display: none;
    }

    .working-date {
        margin: 10 auto;
    }
    .on-hold {
        margin: 0 auto;
    }
    .content li {
        width: 22%;
    }
    .available {
        right: 38%;
    }
    .navbar-right {
        display: none;
    }
    .powered-by {
        position: relative;
        margin: 0 20px;
        top: 5px;
        left: 20px;
    }
}
@media only screen and (min-width: 320px) and (max-width:767px) {
    div#current-report-box object{
        height:auto;
    }
    .btn-shutdown {
        display: none;
    }

    .disc-info {
        width: 100%;
    }
    .disc-keypad {
        width: 100%;
        float: inherit;
    }

    .text-area {
        text-align: center;
    }
    .text-area textarea {
        margin-left: 0;
        text-align: center;
    }
    .inupt-text {
        margin-left: 0;
        margin: 0 auto;
        float: none;
        text-align: center;
    }
    .number-list {
        text-align: center;
        margin: 0 auto;
    }
    .left-text {
        text-align: center;
        font-size: 12px;
    }
    .right-head-content {
        text-align: center;
    }
    .collection-list {
        width: 100%;
    }
    .collection-list ul li {
        margin-bottom: 10px;
    }
    .collection-list ul li:last-child {}
    .collection-right {
        width: 100%;
        margin-bottom: 25px;
        text-align: center;
    }
    .normal-btn button {
        font: normal 17px arial;
    }
    .normal-btn1 button {
        font-weight: normal;
    }
    .cash-cont, .cash-cont1 {
        width: 100%;
        text-align: center;
    }

    .declaration-summary {
        margin: 0 auto;
        width: 100%;
        margin-bottom: 15px;
    }
    .declaration-summary h3 {
        padding: 0 15px;
    }
    .summary-table tr td {
        height: auto;
        padding: 12px;
        font-size: 15px;
    }
    .btn-lg.btn-default.custom-btn.custom-btn1 {
        float: right;
    }
    .top-control ul li {
        width: 90px;
        border: none;
        margin-bottom: 15px;
        text-align: center;
    }
    .top-control span a {
        display: inline-block;
        width: 100%;
    }
    .open-date>span {
        display: block;
    }
    .view-details>span {
        display: block;
    }
    .dust-session>span {
        display: block;
    }
    .top-control {
        overflow: hidden;
    }
    .top-control .view-details span a {
        margin-top: 15px;
    }
    .top-control .dust-session span a {
        margin-top: 15px;
    }
    .default-declaration {
        margin-left: 0;
    }
    .default-declaration tr td {
        font-size: 12px;
    }
    .custom-text {
        font-size: 11px;
        width: 106px;
        min-height: 46px;
        padding: 6px 2px;
    }
    .custom-text1 {
        font-size: 10px;
        width: 68px;
    }
    .input-float {
        padding-top: 0;
    }
    .table_scroll {
        overflow-x: scroll;
    }
    .session-footer button {
        margin-bottom: 10px;
    }
    .payment_pan .container {
        /*padding: 0 15px;*/
    }
    .tender_mode.items_pan .content li {
        width: 15%;
    }
    .key_pad_pan li {
        width: 23%;
        float: left;
    }
    .lst_li li {
        margin-right: 6.5px;
        margin-bottom: 5px;
        display: inline-block;
    }
    .cntrl_pan {
        margin: 0 auto;
        text-align: center;
        margin-top: 110px;
    }
    .cntrl_pan li {
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
    }
    .table_layout_left {
        width: 100%;
    }
    .table_layout_right {
        width: 95%;
    }
    .table_placing li {
        text-align: center;
    }
    .table_layout_right figure {
        margin-top: 70px;
        text-align: center;
    }
    .legend_pan {
        padding-left: 50px;
    }
    .blocked {
        right: 20px;
    }
    .count_dwn_30 {
        right: 28px;
    }
    .ordered {
        right: 200px;
    }
    .sub_ttl_aftr_dis label, .tips_pan label {
        font-size: 15px;
    }
    .payment-func-container li {
        width: 22%;
    }
    .freq_usd_mode li {
        width: 23%;
    }
    .tender_type li {
        width: 18%;
    }
    .content li {
        width: 22%;
    }
    .key_pad_pan {
        margin-top: 15px;
    }

    /*.navbar-right {
        display: none;
    }*/
    .left-journal {
        width: 100%;
    }
    .right-item-buttons {
        width: 100%;
    }
    .key_pad_pan {
        width: 100%;
    }
    .btn-num {
        height: 80px !important;
    }
    .journal-details {
        width: 430px;
        margin: 0 auto;
    }
    .small-scr-hide {
        display: none !important;
    }
    .carousel-box {
        height: auto;
    }
    .powered-by {
        position: relative;
        margin: 0 20px;
        top: 5px;
        left: 20px;
    }
}
@media only screen and (min-width:480px) and (max-width:767px) {
    .top-control {
        margin: 0 -15px;
        min-height: 120px;
        padding: 5px;
    }
    .top-control ul li {
        width: 120px;
        margin-bottom: 0;
    }
    .top-control a {
        font-size: 11px;
    }
    .top-control a.top-active {
        margin: 0;
    }
    .working-date {
        background: url(../images/day-img-1_s.png) no-repeat top center;
        min-height: 130px;
    }
    .working-date h3 {
        font-size: 47px;
        line-height: 42px;
    }
    .current p {
        padding-bottom: 4px;
    }
    .current p.started {
        font-size: 9px;
        padding-top: 3px;
    }
    .current p.dd {
        padding-top: 0;
        font-size: 10px;
    }
    .current p.user-name {
        font-size: 10px;
        padding-top: 0;
    }
    .on-hold {
        background: url(../images/receipts-img-1_s.png) no-repeat top center;
        min-height: 150px;
    }
    .receipts h3 {
        padding-top: 20px;
    }
    .duty-progress {
        font-size: 12px;
        line-height: 18px;
        margin: -1px 0 24px 0;
    }
    .mobile_brdr {
        border-top: 2px dotted #B6B6B6;
        padding-top: 20px;
    }
    .payment_pan .container {
        /*padding: 0 15px;*/
    }
    .tendering {
        left: 100px;
    }
    .available {
        right: 150px;
    }
    .powered-by {
        position: relative;
        margin: 0 20px;
        top: 5px;
        left: 20px;
    }
}


/********* MEDIA CSS END **********/
::-webkit-input-placeholder, select {
    /* WebKit browsers */
    color: #cfcfcf;
}
:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #cfcfcf;
    opacity: 1;
}
::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #cfcfcf;
    opacity: 1;
}
:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #cfcfcf;
}
.jeri-modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.jeri-modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}
.jeri-modalDialog>div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.jeri-modalClose {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.jeri-modalClose:hover {
    background: #00d9ff;
}
.jeri-disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.65;
    /*pointer-events: none;*/
}
.jeri-enabled {
    background: #d3dae2 !important;
    color: #4c5f96 !important;
}
.jeri-modal-header {
    min-height: 67.43px;
    padding: 15px;
}
.jeri-modal-background {
    background-color: #5E5E5E;
}
.jeri-label {
    color: #000000;
}
.jeri-modal-title {
    background-color: #58585B;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    margin-top: 50px;
    padding: 10px;
}
.jeri-table {
    color: #000;
    font-size: 1em;
}
.jeri-journal-header {
    color: #2d353c;
    /* 313c64 */
    font-size: 12px;
    font-weight: bold;
    padding: 10px 15px;
    height: 20px;
}
.jeri-scroll-table {
    height: 542px;
    overflow: auto;
    margin-top: -21px;
}
.jeri-net-summary-box {
    height: 50px;
    background: #2d353c;
    /* 313c64 */
    width: 100%;
    margin: 28px 0;
    float: left;
}
.jeri-net-summary {
    color: #fff;
    font-style: bold;
    margin-left: 150px;
    font-size: 2.1em;
    padding: 0.4em 0;
    text-align: right;
}
.jeri-journal-list-header {
    padding: 10px;
}
.jeri-type-string {
    margin-left: 250px;
    font-size: 2.1em;
    text-align: right;
    color: #fff;
    margin-top: -7px;
    width: 100px;
}
.jeri-receipt-string {
    color: #fff !important;
    margin-left: 5px !important;
    font-size: 0.8em !important;
    text-align: left !important;
    width: 150px !important;
    padding-top: 11px !important;
}
.jeri-sub-total-label {
    color: #fff;
    font-style: bold;
    margin-left: 10px;
    font-size: 2.1em;
    padding: 0.4em 0;
    text-align: left;
}
.jeri-table-header {
    position: fixed;
}
.jeri-arrow-font {
    font-size: 2em;
}
.jeri-render-category-div {
    margin-top: -3px;
    width: 480px;
}
.jeri-render-category-ul {
    width: 460px;
    float: left;
}
.jeri-category-paginate-down {
    width: 20px;
    float: right;
    margin-top: 140px;
}
.jeri-category-paginate-up {
    width: 20px;
    float: right;
    margin-top: 0;
}
.jeri-render-item-div {
    width: 480px;
}
.jeri-render-item-ul {
    margin-top: 2px !important;
    width: 460px;
    float: left;
}
.jeri-item-paginate-down {
    width: 20px;
    float: right;
    margin-top: 305px;
}
.jeri-item-paginate-up {
    width: 20px;
    float: right;
    margin-top: 0;
}
.jeri-paginate-color {
    color: #000 !important;
}

/* ==========================================================================
Canteen Orders Popup
========================================================================== */
.canteen-card-info, .canteen-orders {
    /* width: 90%; */
    margin: auto;
    display: block;
    overflow: hidden;
    padding: 10px 0;
}
/* .canteen-instructions {
    text-align: left;
    font-color: #777;
    margin-left: 30px;
} */
.canteen-order-title {
    padding: 0 0 10px 0;
    font-size: 1.2em;
}
.canteen-order-card-title {
    background-color: #bbbbcc;
    padding:5px;
    border-radius: 5px;
}
#popup-canteen-orders .modal-title {
    background: #714C70 !important;
}
#canteen-order-ss-options > select {
    background: #714C70;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    border: none;
}
.canteen-order-ss-options-left {
    display: inline-block;
    width: 60%;
}
.canteen-order-ss-options-right {
    display: inline-block;
    width: 39%;
    text-align: right;
    font-size: 12pt;
}
.canteen-orders {
    width: 98%;
}
.canteen-orders-bottom {
    display: block;
    /* margin: 20px; */
    /* height: 50px; */
}
.canteen-card-info table {
    width: 100%;
    padding:10px;
}
.canteen-card-info td {
    padding: 5px;
    border: 1px black solid;
    text-align: left;
}

.canteen-order-box {
    display: inline-block;
    vertical-align: top;
    margin: 0 2px;
    /* padding: 2px; */
    background-color: #fff;
    height: 360px;
    font-family: arial;
    font-size: 12pt;
}
.canteen-order-box-2 {
    width: 30%;
    background-color: #bbb;
    vertical-align: top;
    color: #666;
    font-family: arial;
    font-size: 9pt;
}
.canteen-order-box-1 {
    width: 65%;
    color: #555;
}

.canteen-order-box-content {
    text-align: left;
    line-height: 1.3em;
}
#canteen-order-box-1 th {
    background-color: #86BFB8;
    line-height: 1.8em;
    text-align: left;
}
#canteen-order-box-2 th {
    background-color: #9F9D9E;
    line-height: 1.8em;
    text-align: left;
}
.canteen-order-box-content td {
    padding: 2px;
}
.canteen-order-box-content hr {
    margin: 4px;
}
.canteen-collected-msg {
    color: #ff2222;
}


.canteen-ppc-lbl {
    display: inline-block;
    width: 15%;
    color: #fff;
    line-height: 2em;
    vertical-align: middle;
}
 .canteen-ppc-field {
     display: inline-block;
     width: 85%;
 }

.btn-canteen-meal-session {
    display: inline-block;
    margin: 8px;
    padding: 15px;
    width: 200px;
    height: 55px;
    /* background-color: #96dfa8; */
    border-radius: 10px;
    border: 1px solid black;
    vertical-align: middle;
    color: #535F92;
}

.btn-canteen {
    display: inline-block;
    padding: 10x;
    width: 210px;
    /* height: 50px; */
    background-color: #3B3378;
    color: #fff;
    border-radius: 15px;
    line-height: 70px;
}
.btn-canteen-sync {
    margin-left: 30px;
    float: left;
    width: 250px;
}
.btn-canteen-next {
    margin-right: 30px;
    float: right;
}

/* ==========================================================================
POS SETUP Page
========================================================================== */
.pos-setup-welcome-box {
    display: block;
    line-height: 80px;
}
.pos-setup-welcome-box-msg {
    border-style: ridge;
    border-width: 5px;
    background-color: #f7f2e7;
    color: navy;
    padding: 20px 10px;
    vertical-align: middle;
    text-align:center;
    font-size: 1.2em;
}

.domain-text {
    color: white;
}
.pos-setup-input-box {
    padding: 20px;
    background: #2d353c;
}
.pos-setup-form {
    width: 100%;
}
.pos-setup-form-row {
    min-height: 50px;
}
.btn-teal {
    color: white;
    background-color: #00acac;
}

.pos-setup-domain-box {
    display: inline-block;
}

.pos-setup-form label {
    background-color: inherit;
}

.pos-setup-powered-by {
    position: absolute;
    top: calc(100vh - 95px);
    left: calc(100% - 180px);
    font-family: Arial, sans-serif;
    font-size: 10pt;
    display: block;
}

.pos-setup-back-to-pos {
    margin-top: 30px;
    text-align: center;
}
.pos-setup-back-to-pos p {
    color: red;
}
.pos-setup-back-to-pos a {
    width: 100%;
}

/*
== 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{ -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;
	}



/* 
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR 
y-axis
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_inside > .mCSB_container{ margin-right: 10px; }

	.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:30px;
		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;*/
		width:13px;
		height: 100%;
		margin: 0 auto;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; 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;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; 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_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown{
		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_horizontal,
	.mCustomScrollBox + .mCSB_scrollTools + .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 */
	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .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; 
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	}
	
	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ 
		padding-bottom: 0; 
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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_dragger .mCSB_dragger_bar, 
	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
	}
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
		-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-o-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .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; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }
	
	.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollBox:hover > .mCSB_scrollTools,
	.mCustomScrollBox:hover ~ .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ 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);*/
		background:url(../images/scroll_bar_bg.png) no-repeat center center;
		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:active .mCSB_dragger_bar,
	.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		background-image: url(../images/up_arrow.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_buttonUp:hover,
	.mCSB_scrollTools .mCSB_buttonDown:hover,
	.mCSB_scrollTools .mCSB_buttonLeft:hover,
	.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

	.mCSB_scrollTools .mCSB_buttonUp:active,
	.mCSB_scrollTools .mCSB_buttonDown:active,
	.mCSB_scrollTools .mCSB_buttonLeft:active,
	.mCSB_scrollTools .mCSB_buttonRight: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:active .mCSB_dragger_bar,
	.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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-light-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.1);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		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:active .mCSB_dragger_bar,
	.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.75);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; 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:active .mCSB_dragger_bar,
	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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-light-thick.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.1);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 6px;
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 4px;
		margin: 6px 0;
	}

	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-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:active .mCSB_dragger_bar,
	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.75);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; 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:active .mCSB_dragger_bar,
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; }

	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; }

	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-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:active .mCSB_dragger_bar,
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 14px;
		margin: 0 1px;
	}
	
	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; }
	
	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 14px;
		margin: 1px 0;
	}
	
	.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, 
	.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{
		width: 16px; /* auto-expanded scrollbar */
		height: 16px;
		margin: -1px 0;
	}
	
	.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, 
	.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{ width: 4px; /* auto-expanded scrollbar */ }
	
	.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, 
	.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{
		height: 16px; /* auto-expanded scrollbar */
		width: 16px;
		margin: 0 -1px;
	}
	
	.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, 
	.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{
		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:active .mCSB_dragger_bar,
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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.mCSB_scrollTools_vertical .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		background-color: transparent;
		background-position: center;
	}
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.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.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.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.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-repeat: repeat-y;
		background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
		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: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -ms-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.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		background-repeat: repeat-x;
		background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
		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: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -ms-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.mCSB_scrollTools_vertical .mCSB_dragger, 
	.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; }
	
	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; }
	
	.mCS-3d.mCSB_scrollTools, 
	.mCS-3d-dark.mCSB_scrollTools{
		opacity: 1;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d-dark.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.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 	 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }

	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; }

	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-3d-dark.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.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.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.mCSB_scrollTools, 
	.mCS-3d-thick-dark.mCSB_scrollTools{
		opacity: 1;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-3d-thick.mCSB_scrollTools, 
	.mCS-3d-thick-dark.mCSB_scrollTools, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
	
	.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, 
	.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; }
	
	.mCS-3d-thick.mCSB_scrollTools_vertical, 
	.mCS-3d-thick-dark.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.mCSB_scrollTools_horizontal, 
	.mCS-3d-thick-dark.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.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.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.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.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:hover .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.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:hover .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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.mCSB_scrollTools_vertical, 
	.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		right: 0; 
		margin: 12px 0; 
	}
	
	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{
		bottom: 0; 
		margin: 0 12px; 
	}
	
	/* RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		left: 0; 
		right: auto;
	}
	
	.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, 
	.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; }
	
	.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-minimal-dark.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:active .mCSB_dragger_bar,
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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:active .mCSB_dragger_bar,
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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-light-3.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{
		width: 6px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
	}

	.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; }

	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 6px;
		margin: 5px 0;
	}
	
	.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, 
	.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{
		width: 12px;
	}
	
	.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, 
	.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{
		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:active .mCSB_dragger_bar,
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{
		width: 12px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
	}

	.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.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.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.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.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 12px;
		margin: 2px 0;
	}
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "inset-dark", "inset-2-dark", "inset-3-dark" */
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-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-2-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-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	
	/* theme "inset-2", "inset-2-dark" */
	
	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-color: transparent;
		border-width: 1px;
		border-style: solid;
		border-color: #fff;
		border-color: rgba(255,255,255,0.2);
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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:active .mCSB_dragger_bar,
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .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:active .mCSB_dragger_bar,
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
	
	/* ---------------------------------------- */