/*****************************************************************
 This file contains structural CSS for skinning support. Visual
 CSS should be added to the individual skin files.
*****************************************************************/

/*****************************************************************
 ExtJS Specific
*****************************************************************/
.x-panel x-border-panel x-panel-noborder.no-bg,
.x-border-layout-ct.no-bg,
.x-panel-body.no-bg
{
	background-color:white;
}

.panel-bg
{
    background-color: #E7E7E7;
}

.x-border-layout-ct 
{
	background-color:#e7e7e7;
}

.x-grid3-row-selected {
	-moz-box-shadow: 0px 0 4px 1px #ccc;
	-webkit-box-shadow: 0px 0 4px 1px #ccc;
	box-shadow: 0px 0 4px 1px #ccc;
}

/*****************************************************************
 Super Select Box
*****************************************************************/
.x-superboxselect-input input {
	background-color: transparent;
}


/*****************************************************************
 Windows / Modules
*****************************************************************/
body 
{ 
	background-color:#fff;
	padding-top:0px;
}

#page-container, .page-container
{
    min-width:771px;
    overflow:hidden;
}


#msg-div .x-box-mc .icon {background:transparent url(images/icons/msg-icons-32.png) no-repeat scroll;}
#msg-div .warning .x-box-mc .icon {background-position:0 0;}
#msg-div .warning .x-box-mc .icon {background-position:-32px 0;}



/*****************************************************************
 Backgrounds
*****************************************************************/
#header 
{
	background: transparent repeat-x scroll 0 0;
}

body.MOSO-main-window { background-image: url(backgrounds/steel/background.png); }

/*#header { background-image: url(backgrounds/steel/header-bg.png); }*/

body.MOSO-redesign-window {
    background-color: #f5f5f5;
}

/*****************************************************************
 Header
*****************************************************************/
#appHeaderInfoLeft
{
	font-size:14px;
	padding-left: 20px;
}

#appHeaderInfoRight
{
	background: transparent none;
	border:none;
}

.header-background {
    width: 100%;
    height: 120px;
    background-size: contain;
}

.header-background.collapsed {
    background: none;
}

/*****************************************************************
 Nav Panel
*****************************************************************/
#nav-panel .x-panel-header 
{
	background:transparent repeat-x scroll 0 0;
	border-style:solid;
	border-width:0 0 2px 0;
	font-size:13px;
	height:32px;
	padding:0px;
}

#nav-panel .x-panel-header 
{
	background: transparent repeat-x scroll 0 0;
}

#nav-panel .x-panel-header-text {
	left:10px;
	position:absolute;
	top:8px;
}

#nav-panel .x-tool-collapse-west 
{
	background:transparent no-repeat scroll 0 -12px;
	height:12px;
	width:12px;	
	position:absolute;
	right:8px;
	top:10px;
}

#nav-panel.x-panel-collapsed .x-tool-collapse-west 
{
	background:transparent no-repeat scroll 0 0;
}

#nav-panel .menu-search-button
{
	background: transparent no-repeat scroll 0 0;
	position:absolute;
	width: 26px;
	height:32px;
	right:24px;
	top:0px;
	cursor:pointer;
}

#nav-panel .menu-search-button.over,
#nav-panel .menu-search-button.on
{
	background-position:-26px 0;
}

#nav-panel .x-toolbar 
{
	background: transparent repeat-x scroll 0 0;
	border:0px;
	padding:5px;
}

#nav-panel .navbody {
    border: 0;
    display: flex;
    overflow: visible;
    flex-direction: column;
    background: none;
}

.main-menu-search__label,
.x-header-label {
    color: #d1d1d1;
}

#app-menu-panel-angle {
    opacity: 0;
    position: absolute;
    padding: 15px 22px;
}

#app-menu-panel-angle.visible {
    opacity: 1;
    position: initial;
}

/*****************************************************************
 Toolbar
*****************************************************************/
.MOSO-toolbar {
    background: transparent url(images/toolbar/bg.png) repeat-x scroll 0 0;
}

/*******************************************************************
MOSOMenu
*******************************************************************/
.MOSO-menu-main
{
    background-color:#353535;
}
.MOSO-menu-text
{
    color: #f5f5f5;
}
.MOSO-menu-status-bar {
    background-color: #EEEEEE;
    padding: 5px;
    min-height: 25px;
}
.MOSO-menu-btn
{
    background-image: background-image: none !important;;
}

.MOSO-menu-button {
    height: 75px;
    border-left: .5px;
    border-left-color: #B5B4B5;
    border-left-style: inset;
    border-right: 1px;
    border-right-color: #B5B4B5;
    color: #B5B4B5;
    font-size: 12px;
    vertical-align:top;
    text-transform: uppercase;
}

.MOSO-menu-button-text{
    padding-top: 40px;
    text-align: center;
    color: #B5B4B5;
}

.MOSO-menu-button-text-glow{
    padding-top: 40px;
    text-align: center;
    color: #AF433F;
}

.MOSO-menu-text
{
    color: #B5B4B5;
    font-size: 15px !important;
    font-weight: bolder;
}

.menu-button-icon
{
    background: url("images/app/main-menu/menu-red.png") no-repeat scroll 0 64px transparent;
    height: 25px;
    left: 50%;
    margin-left: -24px;
    opacity: 0.7;
    position: absolute;
    width: 25px;
}

.MOSO-menu-Manage {
    background-position: 0px 0px;
}

.MOSO-menu-Manage-glow {
    background-position: -25px 0px;
}

.MOSO-menu-Find {
    background-position: 0px -175px;
}

.MOSO-menu-Find-glow {
    background-position: -25px -175px;
}

.MOSO-menu-Clear {
    background-position: 0px -225px;
}

.MOSO-menu-Clear-glow {
    background-position: -25px -225px;
}

.MOSO-menu-POS {
    background-position: 0px -25px;
}

.MOSO-menu-POS-glow {
    background-position: -25px -25px;
}

.MOSO-menu-Agreements {
    background-position: 0px -50px;
}

.MOSO-menu-Agreements-glow {
    background-position: -25px -50px;
}

.MOSO-menu-ActivityManagement {
    background-position: 0px -75px;
}

.MOSO-menu-ActivityManagement-glow {
    background-position: -25px -75px;
}

.MOSO-menu-MyPlanner {
    background-position: 0px -100px;
}

.MOSO-menu-MyPlanner-glow {
    background-position: -25px -100px;
}

.MOSO-menu-Done {
   background-position: 0px -125px;
}

.MOSO-menu-Done-glow {
    background-position: -25px -125px;
}

.MOSO-menu-subdown {
    background  : url(/content/skins/images/app/main-menu/Down.png) center 8px no-repeat;
    height: 48px;
    left: 50%;
    margin-left: -24px;
    opacity: 0.7;
    position: absolute;
    width: 48px;
    margin-top: -4px;
}

.MOSO-menu-subdown-glow {
    background  : url(/content/skins/images/app/main-menu/Downglow.png) center 8px no-repeat;
    height: 48px;
    left: 50%;
    margin-left: -24px;
    opacity: 0.7;
    position: absolute;
    width: 48px;
    margin-top: -4px;
}

.MOSO-menu-status {
    padding: 1px 3px 2px;
    color: white;
    white-space: nowrap;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.MOSO-menu-icon {
    background: url("images/app/main-menu/icons.png") no-repeat scroll 0 64px transparent;
    height: 48px;
    left: 50%;
    margin-left: -24px;
    opacity: 0.7;
    position: absolute;
    width: 48px;
}

.MOSO-button-menu-icon {
    background: url("images/app/main-menu/menu.png") no-repeat scroll 0 64px transparent;
    height: 48px;
    left: 50%;
    margin-left: -24px;
    opacity: 0.7;
    position: absolute;
    width: 48px;
}

/*****************************************************************
 Main Menu
*****************************************************************/
    #moso-menu {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    .moso-menu {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        justify-content: space-between;
        overflow: hidden;
    }

    .settings-container {
        position: absolute;
        height: 100%;
        width: 300px;
        display: flex;
    }

.moso-menu-scrollable-area {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    scrollbar-color: #d1d1d1 transparent;
    scrollbar-width: thin;
}

    .moso-menu-scrollable-area::-webkit-scrollbar {
        width: 7px;
    }

    .moso-menu-scrollable-area::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
    }

    .moso-menu-scrollable-area::-webkit-scrollbar-thumb {
        background-color: #d1d1d1;
		-webkit-box-shadow: none;
        border-right: 4px solid transparent;
        background-clip: padding-box;
    }

    .moso-menu-block {
        margin-bottom: 20px;
    }

    .moso-menu-block--full {
        flex: 1 1 100%;
    }

    .moso-menu-block--fixed {
        flex: 0 0 auto;
    }

    .moso-menu--show-settings > .moso-menu-block,
    .moso-menu--show-settings > .moso-menu-settings-spacer,
    .moso-menu--show-settings > .main-menu-search,
    .moso-menu--show-settings > #app-menu-panel-angle {
        display: none;
    }

    #moso-menu:not(.moso-menu--show-settings) .settings-container {
        position: absolute;
        top: -3000px;
    }

    #moso-menu:not(.moso-menu--show-settings) {
        overflow: hidden;
    }

    #moso-menu.moso-menu--show-settings .moso-menu {
        display: none;
    }

    .moso-menu-settings-spacer {
        flex: 1 1 auto;
    }

    .moso-menu-settings-mask {
        position: absolute;
        left: 0;
        height: 100%;
        width: 10000px;
        background: rgba(0,0,0,.32);
        z-index: 100;
    }

    .moso-menu-settings-panel {
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-color: #d1d1d1 transparent;
        scrollbar-width: thin;
    }

    .moso-menu-settings-panel::-webkit-scrollbar {
        width: 7px;
    }

    .moso-menu-settings-panel::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
    }

    .moso-menu-settings-panel::-webkit-scrollbar-thumb {
        background-color: #d1d1d1;
		-webkit-box-shadow: none;
        border-right: 4px solid transparent;
        background-clip: padding-box;
    }

    .moso-menu-settings-panel-container {
        flex: 1 1 100%;
        background: white;
        box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
        padding: 17px 0;
        z-index: 101;
        overflow: hidden;
        display: flex;
    }

    .moso-menu-settings-panel__header {
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        color: #3d3d3d;
        padding: 20px 0 20px 60px;
        cursor: pointer;
        background-image: url(/content/images/menu/arrow-left-solid.svg);
        background-repeat: no-repeat;
        background-position: 22px center;
        background-size: 14px;
    }

    .moso-menu-block--level-2 .moso-menu-header {
        padding: 15px 20px 10px 60px;
    }

    .moso-menu-block--level-2 .moso-menu-item {
        padding-left: 100px;
        background-position: 60px center;
    }

    .moso-menu-block--level-2.moso-menu-block--hide-icons .moso-menu-item{
        padding-left: 60px;
    }

    .moso-menu-block--level-2.moso-menu-block--hide-icons .menu-icon-svg {
        display: none;
    }

    .moso-menu-block--level-2 .moso-menu-item__description {
        color: #3d3d3d;
    }

    .moso-menu-block--hide-descriptions .moso-menu-item__description {
        display: none;
    }

    .moso-menu-header {
        padding: 20px;
        height: 17px;
        line-height: 17px;
        font-size: 14px;
        letter-spacing: 1.4px;
        color: #f55f64;
    }

    .moso-menu-item {
        padding: 11px 30px 11px 60px;
        min-height: 40px;
        line-height: 18px;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 600;
        color: #3d3d3d;
        white-space: nowrap;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .moso-menu-item:hover {
        background-color: #EAECF0;
    }

    .moso-menu-item--light {
        font-weight: normal;
    }

    .moso-menu-item__description {
        font-size: 12px;
        font-weight: normal;
        white-space: normal;
    }

    .menu-icon-svg {
        height: 18px;
        width: 18px;
        position: relative;
        margin-left: -40px;
        margin-right: 22px;
        fill: none;
        stroke: #004a8d;
        flex: 0 0 auto;
    }

/*****************************************************************
 Misc
*****************************************************************/
body.MOSO-module-window {
    background: #fff url(/content/skins/images/app/window-bg.png) repeat-x scroll;
    padding: 1px 0px;
}

body.MOSO-module-window h1 {
    font-size: 24px;
    color: #9C9C9C;
}

.progress-bar-small
{
	background-image:url(images/progress_small.gif);
}

.x-body-masked .ext-el-mask {
	background-color:#000 !important;
	opacity:.7;
}
/*fix loading masks inside an Ext.Window appear to dark - "reverts" style above for masks inside a Window */
.x-window-body .ext-el-mask {
    background-color: #fff !important;
    opacity: .50;
}

.ext-el-mask-msg {
	border: none;
	padding: 0px;
}

.x-mask-denied div {
	background-color: #f0f0f0 !important;
	background-image: url(images/deny.gif);
    background-repeat:no-repeat;
	background-position: 8px 12px;
    color: red;
	border: 1px solid red !important;	
	min-width: 90px;
	padding: 15px 10px 15px 30px;	
	text-align: center;
	font-size: 10px;	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	opacity: .75;
	-webkit-box-shadow: 0 0 3px black;
	-moz-box-shadow: 0 0 3px black;
	box-shadow: 0 0 3px black;	
	text-overflow: ellipsis;
	overflow: hidden;
    cursor: default !important;
}

.x-mask-loading div {
	background-color: black;
	background-image: url(images/loading-blue.gif);
	color: white;
	border: none !important;
	
	width: 90px;
	padding: 33px 0 3px 0;
	background-position: center 8px;
	text-align: center;
	font-size: 10px;	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	opacity: .75;
	-webkit-box-shadow: 0 0 3px black;
	-moz-box-shadow: 0 0 3px black;
	box-shadow: 0 0 3px black;	
	text-overflow: ellipsis;
	overflow: hidden;
}

.x-mask-loading.two-lines div {
	height: 35px;
	width: 100px;
	padding: 30px 0 0 0;
	background-position: center 10px;
}

.x-layout-split {
	height:10px;
}

.x-layout-split.x-layout-split-north 
{
	background:transparent none repeat-x scroll 0 0;
}

.x-layout-split.x-layout-split-north:hover
{
	background-position:0 -10px;
}

.x-layout-split-north .x-layout-mini 
{
	background:transparent none no-repeat scroll 0 0;
	background-image:url(images/layout/mini-top.png);
	height:10px;
	width:35px;
	left:auto;
	right:22px;
	opacity:1;
}

.x-layout-split-north .x-layout-mini:hover,
.x-layout-split.x-layout-split-north:hover .x-layout-mini
{
	background-position:0 -10px;
}

.x-layout-cmini-north 
{
	height:10px !important;
	background:transparent none repeat-x scroll 0 0;
}

.x-layout-cmini-north .x-layout-mini {
	background:transparent none no-repeat scroll 0 -20px;
	background-image:url(images/layout/mini-top.png);
	height:10px;
	width:35px;
	opacity:1;	
}

.x-layout-cmini-north:hover .x-layout-mini 
{
	background-position:0 -30px;
}

.x-layout-collapsed-north.x-layout-collapsed-over 
{
	background-position:0 -10px;
}

/*****************************************************************
 Login Box
*****************************************************************/
#login-container .x-box-tl {
	background-image:url(images/box/corners.png);
}

#login-container .x-box-tr {
	background:transparent none no-repeat scroll right -11px;
	background-image:url(images/box/corners.png);
}

#login-container .x-box-tl, #login-container .x-box-bl {
	padding-left:16px;
}

#login-container .x-box-tc 
{
	background-image:url(images/box/tb.png);
	height:11px;
}

#login-container .x-box-tr, #login-container .x-box-br {
	padding-right:16px;
}

#login-container .x-box-ml {
	background:transparent none repeat-y scroll 0 50%;
	background-image:url(images/box/l.png);
	padding-left:6px;
}

#login-container .x-box-mr {
	background:transparent none repeat-y scroll right center;
	background-image:url(images/box/r.png);
	padding-right:6px;
}

#login-container .x-box-bl 
{
	background:transparent none no-repeat scroll 0 -22px;
	background-image:url(images/box/corners.png);
}

#login-container .x-box-bc 
{
	
	height:25px;
	background:transparent none repeat-x scroll 0 -11px;
	background-image:url(images/box/tb.png);
}

#login-container .x-box-br {
	background:transparent none no-repeat scroll right -47px;
	background-image:url(images/box/corners.png);
}

#login-container .x-box-mc 
{
	background:transparent none repeat-x scroll 0 bottom;
	background-color:#FFFFFF;
	background-image:url(images/box/middle.png);
	color:#2f2f2f;
}


/*****************************************************************
 Box
*****************************************************************/
.x-box-tl {
	background-image: url(images/box-ext/corners.png);
}

.x-box-tc {
	background-image: url(images/box-ext/tb.png);
}

.x-box-tr {
	background-image: url(images/box-ext/corners.png);
}

.x-box-ml {
	background-image: url(images/box-ext/l.png);
}

.x-box-mc {
	background-color: #eee;
    background-image: url(images/box-ext/tb.png);
}

.x-box-mr {
	background-image: url(images/box-ext/r.png);
}

.x-box-bl {
	background-image: url(images/box-ext/corners.png);
}

.x-box-bc {
	background-image: url(images/box-ext/tb.png);
}

.x-box-br {
	background-image: url(images/box-ext/corners.png);
}




.box-pale-green-tl, .box-pale-green-tr, .box-pale-green-bl, .box-pale-green-br {
	background:transparent url(images/box/pale-green/corners.png) no-repeat scroll 0 0;
	overflow:hidden;
	padding:0px;
}

.box-pale-green-tc, .box-pale-green-bc {
	height:8px;
	background:transparent url(images/box/pale-green/tb.png) repeat-x scroll 0 0;
}

.box-pale-green-tl, .box-pale-green-bl {
	padding-left:8px;
}

.box-pale-green-tr, .box-pale-green-br {
	padding-right:8px;
}

.box-pale-green-tl {
	background-position:0 0;
}

.box-pale-green-tr {
	background-position:right 0;
}

.box-pale-green-tc {
	background-position:0 0;
}

.box-pale-green-bl {
	background-position:0 -8px;
}

.box-pale-green-br {
	background-position:right -8px;
}

.box-pale-green-bc {
	background:transparent url(images/box/pale-green/tb.png) repeat-x scroll 0 -8px;
}

.box-pale-green-ml, .box-pale-green-mr {
	background:transparent none repeat-y scroll 0 0;
	overflow:hidden;
}

.box-pale-green-ml {
	background-image: url(images/box/pale-green/l.png);
	background-position:0 50%;
	padding-left:4px;
}

.box-pale-green-mr {
	background-image: url(images/box/pale-green/r.png);
	background-position:right center;
	padding-right:4px;
}

.box-pale-green-mc {
	background:#dee2c7 url(images/box/pale-green/tb.png) repeat-x scroll 0 -16px;
	padding:4px 12px;
	color:#50591b;
	/*text-shadow:#fff 1px 1px;*/
	
}

/*****************************************************************
 Forms
*****************************************************************/
div.x-form-item 
{
	font-size:12px;
	color:#2f2f2f;
}

.x-form-field 
{
	font-size:12px;
}

.x-form-text, textarea.x-form-field {
	-moz-border-radius:3px;
	background-color:#fbfbfb;
	background-image:url(images/form/text-bg.png);
	border-color:#b7b7b7;
}

.x-form-invalid, textarea.x-form-invalid {
	background-color: #FFCCCC;
    background-image: none;
    border: 1px solid #CF0000;
}

.x-form-item label {
	color:#2f2f2f;
}

.MOSO-inherited-field .MOSO-inherited-field-chkbox-ct,
.MOSO-inherited-combofield .MOSO-inherited-field-chkbox-ct
{
	background: transparent url(../images/knobs/knob-red-left.gif) no-repeat scroll 3px 50%;
}

.MOSO-inherited-form .MOSO-inherited-form-chkbox-ct
{
	background: transparent url(../images/knobs/knob-red-down.gif) no-repeat scroll 3px 50%;
}

.MOSO-inherited-field-chkbox-ct .x-form-check-wrap {
    position:relative;
}

.MOSO-inherited-field-chkbox-ct .x-form-checkbox {
    position:absolute;
    left:0;
    top:0;
}

.MOSO-inherited-field-chkbox-ct .x-form-cb-label {
    position:absolute;
    left:24px;
    right:18px;
    top:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;    
}

/*****************************************************************
 Buttons
*****************************************************************/

/* Normal State */
.x-btn-noicon .x-btn-small .x-btn-text {
	height:auto;
}

.x-btn button {
	font-size:12px;
	font-weight:bold;
}

.x-btn-icon .x-btn-small .x-btn-text {
	height:16px;
	width:16px;
}

.x-btn-tl {
	background:transparent none no-repeat scroll 0 0;
	height:6px;
	width:6px;
}

.x-btn-tr {
	background:transparent none no-repeat scroll -6px 0;
	height:6px;
	width:6px;
}

.x-btn-tc {
	background:transparent none repeat-x scroll 0 -12px;
	height:6px;
}

.x-btn-over .x-btn-tc 
{
	background-position: 0 -18px;
}

.x-btn-ml {
	background:transparent none no-repeat scroll 0 -48px;
	width:6px;
}

.x-btn-mc {
	background:transparent none repeat-x scroll 0 -1048px;
	cursor:pointer;
	text-align:center;
	vertical-align:middle;
}

.x-btn-mr {
	background:transparent none no-repeat scroll -6px -48px;
	width:6px;
}

.x-btn-bl {
	background:transparent none no-repeat scroll 0 -6px;
	height:6px;
	width:6px;
}

.x-btn-br {
	background:transparent none no-repeat scroll -6px -6px;
	height:6px;
	width:6px;
}

.x-btn-bc {
	background:transparent none repeat-x scroll 0 -30px;
	height:6px;
}

/*
.x-btn-mc em.x-btn-split {
	background-image:url(images/button/s-arrow.png);
}
*/

/* Hover State */
.x-btn-over .x-btn-tl { background-position: -12px 0; }
.x-btn-over .x-btn-tr { background-position: -18px 0; }
.x-btn-over .x-btn-tc { background-position: 0 -18px; }
.x-btn-over .x-btn-ml { background-position: -12px -48px; }
.x-btn-over .x-btn-mc { background-position: 0 -2048px; }
.x-btn-over .x-btn-mr { background-position: -18px -48px; }
.x-btn-over .x-btn-bl { background-position: -12px -6px; }
.x-btn-over .x-btn-br { background-position: -18px -6px; }
.x-btn-over .x-btn-bc { background-position: -12px -36px; }

/* Hover Click State */
.x-btn-click .x-btn-tl, .x-btn-menu-active .x-btn-tl, .x-btn-pressed .x-btn-tl { background-position: -12px 0; }
.x-btn-click .x-btn-tr, .x-btn-menu-active .x-btn-tr, .x-btn-pressed .x-btn-tr { background-position: -18px 0; }
.x-btn-click .x-btn-tc, .x-btn-menu-active .x-btn-tc, .x-btn-pressed .x-btn-tc { background-position: 0 -18px; }
.x-btn-click .x-btn-ml, .x-btn-menu-active .x-btn-ml, .x-btn-pressed .x-btn-ml { background-position: -12px -48px; }
.x-btn-click .x-btn-mc, .x-btn-menu-active .x-btn-mc, .x-btn-pressed .x-btn-mc { background-position: 0 -2048px; }
.x-btn-click .x-btn-mr, .x-btn-menu-active .x-btn-mr, .x-btn-pressed .x-btn-mr { background-position: -18px -48px; }
.x-btn-click .x-btn-bl, .x-btn-menu-active .x-btn-bl, .x-btn-pressed .x-btn-bl { background-position: -12px -6px; }
.x-btn-click .x-btn-br, .x-btn-menu-active .x-btn-br, .x-btn-pressed .x-btn-br { background-position: -18px -6px; }
.x-btn-click .x-btn-bc, .x-btn-menu-active .x-btn-bc, .x-btn-pressed .x-btn-bc { background-position: -12px -36px; }

.x-toolbar .x-btn button {
	color:#000;
	font-size:11px;
	font-weight:normal;
	text-shadow:none;
}



/* "Flat" button without bg images */
.x-btn.x-btn-flat .x-btn-tl,
.x-btn.x-btn-flat .x-btn-tr,
.x-btn.x-btn-flat .x-btn-tc,
.x-btn.x-btn-flat .x-btn-ml,
.x-btn.x-btn-flat .x-btn-mr,
.x-btn.x-btn-flat .x-btn-mc,
.x-btn.x-btn-flat .x-btn-bl,
.x-btn.x-btn-flat .x-btn-br,
.x-btn.x-btn-flat .x-btn-bc
{
	background: none;
}

.x-btn.x-btn-flat button  {
    color: #000;
    text-shadow: none;
}



/*****************************************************************
 Tabs
*****************************************************************/
.x-tab-strip > li {
    background-color: #dedede;
    position: relative;
}

.x-tab-strip .x-tab-with-icon span.x-tab-strip-text {
    margin-right: 10px;
    margin-left: 7px;
    padding-top: 13px;
    padding-bottom: 13px !important;
    line-height: 14px;
    padding-left: 30px;
}

.x-tab-strip span.x-tab-strip-text {
    color: #2f2f2f;
    font-weight: bold;
    text-shadow: none !important;
}

.x-tab-strip span.x-tab-strip-text.x-icon-loading {
    background-position-y: center;
}

x-tab-strip-closable span.x-tab-strip-text {
    margin-right: 10px;
}

.x-tab-strip-text.menu-no-icon {
    background-image: none;
    padding-left: 10px !important;
}

.tab-icon-svg {
    position: absolute;
    top: 11px;
    left: 13px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #2f2f2f;
    stroke-miterlimit: 10;
}

.x-tab-strip-close {
    background: url('/Content/images/ic_close.svg') no-repeat;
}

.x-tab-strip-over .x-tab-strip-close {
    background: url('/Content/images/ic_close.svg') no-repeat;
}

.x-tab-strip-over span.x-tab-strip-text {
    font-weight: bold;
}

.x-tab-strip-active span.x-tab-strip-text {
    font-weight: bold;
}

ul.x-tab-strip-top {
    background: transparent;
    padding: 0;
    border-bottom-color: #d0d0d0;
}

ul.x-tab-strip li {
    margin-left: 1px;
    background: none;
}


ul.x-tab-strip li:first-child {
    margin-left: 0;
}

.sub-tab-panel ul.x-tab-strip-top {
    background-position: 0 -36px;
    background-color: transparent;
}

.x-tab-panel-header 
{
	border-bottom:none;
    padding: 0;
    background: none;
}

#tab-panel > .x-tab-panel-header ul.x-tab-strip-top {
    border: none;
}

.sub-tab-panel .x-tab-panel-header {
	background-color:transparent;
	border:none;
}


.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close,
.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover {
    background-image: url('/Content/images/ic_close.svg');
}


.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
	height:16px;
	width:16px;
	right:0;
	top:8px;
}

.x-tab-strip .x-tab-strip-active a.x-tab-strip-close {
	opacity:.8;
}

.bordered { border:1px solid #d0d0d0; }

.x-tab-strip .x-tab-strip-closable.x-tab-strip-active a.x-tab-strip-close,
.x-tab-strip .x-tab-strip-closable.x-tab-strip-active a.x-tab-strip-close:hover {
    background-image: url('/Content/images/ic_close-white.svg');
}

.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
    background-image: url('/Content/images/ic_close.svg');
}

    .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover {
        background-image: url('/Content/images/ic_close-white.svg');
    }

.x-tab-strip .x-tab-strip-closable.x-tab-strip-over a.x-tab-strip-close,
.x-tab-strip .x-tab-strip-closable.x-tab-strip-over a.x-tab-strip-close:hover {
    background-image: url('/Content/images/ic_close-white.svg');
}

.x-tab-strip-active .tab-icon-svg,
.x-tab-strip-over .tab-icon-svg {
    stroke: #fff;
}

.x-tab-strip-active span.x-tab-strip-text {
    color: #fff;
}

.x-tab-strip-over .x-tab-strip-close {
    background-image: url('/Content/images/ic_close-white.svg');
}

/*****************************************************************
 Tool Tip
*****************************************************************/
/*.x-tip .x-tip-tc, 
.x-tip .x-tip-tl, 
.x-tip .x-tip-tr, 
.x-tip .x-tip-bc, 
.x-tip .x-tip-bl, 
.x-tip .x-tip-br, 
.x-tip .x-tip-ml, 
.x-tip .x-tip-mr {	background-image:url(images/qtip/tip-sprite.gif);  }*/

/*****************************************************************
 Combo Box
*****************************************************************/
.x-combo-list .x-combo-selected { background-color:#DFE8F6; }
.x-combo-list .background-external-member{ background-color: #8cd28f; }
.x-combo-list .background-external-member.x-combo-selected{ background-color: #abb6ab; }

/*****************************************************************
 Progress Bar
*****************************************************************/
.x-progress-text-back { color: #333; }


/********************************************************
Member Info Toolbar (appears in Member, Activity, POS
*********************************************************/
.memberinfo-tb-name-toolbar {
    font-size: 18px !important;
    font-weight: bold !important;
    width: 82% !important;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
}

.memberinfo-tb-name {
	font-size: 20px !important;
	font-weight: bold !important;
	max-width: 312px;
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
}
.memberinfo-tb-otherinfo {
	font-size: 11px !important;
	font-weight: normal !important;
}
.memberinfo-tb-name-big {
    font-size: 30px !important;
    font-weight: bold !important;
    max-width: 312px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
}

/********************************************************
Activity Management and History
*********************************************************/
.width-Full {
width: 100%;
}

.text-Bolder-Larger{
    font-weight: bolder;
    font-size: larger;
}
.text-Bold-Large{
	font-size: large;
	font-weight: bold;
}

.text-12px
{
    font-size: 12px;
}

/********************************************
DataView
*********************************************/
.div-thinborder-padding {
          	border: thin solid;
          	padding-top:5px;
          	padding-bottom:5px;
          	padding-right:5px;
          	padding-left:5px;
          }
/**searchBalance-div**/
.div-item-balance{
    text-align: center;
    width: 100px;
    height: 25px;
    vertical-align: middle;
    font-size: larger;
    color: White;
    font-weight: bold;
    padding-top: 6px;
    background-color: gray;
    -moz-border-radius:5px; /* Firefox */
    border-radius:5px;
}
//*searchBalance-div-important*/
.div-item-balance-important{
        text-align: center;
        width: 100px;
        height: 25px;
        vertical-align: middle;
        font-size: larger;
        color: White;
        font-weight: bold;
        padding-top: 6px;
        background-color:#8B0000;
        -moz-border-radius:5px; /* Firefox */
        border-radius:5px;
}

.moso-timerecords-rightsidecontainer{
    background: url(/Content/skins/images/timeclock/pattern8.gif) repeat 0 0;
}

/********************************************
Payment Source
*********************************************/
.payment-source-panel{
	background-color:#7b7b7b;
	color:#fff;
}

.payment-source-panel a{
	color:#fff;
}
.payment-source-panel img{
	margin-right:5px;
}
.payment-source-panel .payment-source-title{
	background-color:#888888;
	font-size: 14px; 
	font-weight: bold; 
	margin-bottom: 5px; 
	margin-top: 10px;
	padding:3px 5px;
}

.payment-source-panel .x-toolbar{
	background-color:#888888;
	border: none;
	background-image: none;
}

.payment-source-panel .x-toolbar .x-btn button{
	color:#fff;
	text-decoration:underline;
}

.payment-source-panel .x-toolbar .x-btn-over button{
	color:#000;
}

.tablet-interface-window .x-window-tl .x-window-header {
    color: #666;
    font: bold 16px arial,tahoma,verdana,sans-serif;
}

.iPad {
    background: transparent url('images/app/ipad.png') no-repeat left;
    width: 550px;
    height: 80px;
    margin: 5px 30px;
}
.iPad .text {
    padding: 30px 70px;
    font-size: 20px;
    font-weight: bold;
    color: #555;
}
.interaction-area {
    width: 520px;
    height: 140px;
    margin: 0 auto;
}
.interaction-area .interaction {
    background: #fff;
    width: 520px;
    height: 120px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: scroll !important;
    font-size: 12px;
}

.interaction-area .label {
    font-size: 12px;
    color: #555;
}
.signature-area {
    width: 340px;
    height: 100px;
}
.signature-area .signature {
    width: 340px;
    height: 80px;
    border: 1px solid #ccc;
    background: #fff;
    padding: 0 10px;
    font-size: 12px;
}
.signature-area .label {
    font-size: 12px;
    color: #555;
}

.buttons-container {
    margin: 30px 0;
    padding: 0 15px;
}
.buttons-container  .x-box-inner {
    margin: 0 auto;
}

.button {
    width: 160px;
    height: 40px !important;
}
.button .x-btn-tl,
.button .x-btn-tr,
.button .x-btn-tc,
.button .x-btn-ml,
.button .x-btn-mr,
.button .x-btn-mc,
.button .x-btn-bl,
.button .x-btn-br,
.button .x-btn-bc { background-image: url('images/button/btn.gif') !important; }
.deny-btn {
    margin: 20px;
}
.cancel-btn {
    padding-right: 10px;
}
.button .x-btn-text {
    color: #a83626;
    text-shadow: none;
}
.green-btn {
    margin-top: 10px;
}
.done-btn .x-btn-text, .green-btn .x-btn-text{
    color: #009200;
    text-shadow: none;
}



/*****************************************************************
 DataView
*****************************************************************/
.x-view-over {
    border-color:#ddd;
    background-color:#efefef;
}
.x-view-over-cc{    
    border-color:#ddd;
    background-color: #000;
    opacity: .5;
}
.x-view-selected {
    opacity: 1;
    /*background-color: inherit;*/
}
.x-view-selected-cc{
    border-color:#ddd;
    background-color: #000;
    opacity: .5;
}

/*****************************************************************
 Added for MOSO-20273
*****************************************************************/
.highlight-blue{
    color:#7FD2FD;
}

/*****************************************************************
 Added for MOSO-21598
*****************************************************************/
.margin-right-1px{
    margin-right:1px;
}

/*****************************************************************
 Added for MOSO-3289 (disabled button was not visible)
*****************************************************************/
.whitebg .x-item-disabled{
    background:white;
}

.skin-icon-blue {
    background-color: #0facf2;
}

.skin-icon-wood-bw {
    background-image: url(wood-bw/skin-icon.png);
}

.skin-icon-green {
    background-color: #0b984d;
}

.skin-icon-greenblue {
    background: linear-gradient(-45deg, #0facf2 50%, #0b984d 50%);
}

.skin-icon-wood-color {
    background-image: url(wood-color/skin-icon.png);
}

.skin-icon-purple {
    background-color: #d300e2;
}

.skin-icon-red {
    background-color: #ed1c24;
}