html {
	height: 100%;
}
body
{
    /*margin: 0 auto;
	padding: 0;
	width: 100%;*/
    background-color: #333333; /*width:100%;*/
    height: 100%;
    overflow: hidden;
}

#headerBckEnd1
{
    /*background-repeat: no-repeat;*/
    /*background: rgb(238, 238, 238);*/
    background-image: url(../images/white-wood2.jpg);
    background-repeat: repeat-x;
    height: 80px;
    padding-left: 0px;
    /*padding-top: 10px;*/
    margin-right: 0px;
    position: relative;
    width: 100%;
}

#subHeader
{
    background-image: url(../images/white-wood2.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 80px;
    position: relative;
}
#logo
{
    /*background: url("images/logo32.png");*/
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    left: 20px;
    /*width: 385px;*/
    height: 50px; /*77px*/
}

#bckEndContainer
{
    background-image: url("../images/backEnd/bodypic2.jpg");
    /*background-repeat: repeat-x;*/
    background-repeat:no-repeat;
    background-position:center center;
    margin-left: auto;
    margin-right: auto;
    width: 967px;
    height: 1097px;
}
#subContainer
{
    padding-top: 40px;
    height: 750px;
    width: 967px;
    padding-left: 39px;
}
#mainFooter
{
    width: 967px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#homeText
{
    width: 300px;
    float: left;
    color: #E2001A;
    font-family: 'Helvetica Neue' , 'Segoe UI' , Arial, sans-serif;
    font-size: 36px;
    font-weight: lighter;
}
#hometxt2
{
    padding-top: 10px;
    float: left;
    width: 240px;
    font-family: 'Helvetica Neue' , 'Segoe UI' , Arial, sans-serif;
    font-size: 15px;
    padding-left: 35px;
    font-weight: lighter;
    color: #ffffff;
}
#hometxt3
{
    padding-top: 10px;
    float: right;
    width: 240px;
    padding-right: 100px;
    font-family: 'Helvetica Neue' , 'Segoe UI' , Arial, sans-serif;
    font-size: 15px;
    font-weight: lighter;
    color: #ffffff;
}

#hmeButton
{
    padding-top: 90px;
    border: none;
}

#hmeButton img
{
    border: none;
}

#imgSupplier1
{
    width: 208px;
    height: 121px;
    margin-top: 700px;
    padding-left: 5px;
}

#imgSupplier2
{
    width: 208px;
    height: 121px;
    padding-left: 230px;
    margin-top: -121px;
}

#imgSupplier3
{
    width: 208px;
    height: 121px;
    padding-left: 456px;
    margin-top: -121px;
}

#imgSupplier4
{
    width: 208px;
    height: 121px;
    padding-left: 683px;
    margin-top: -121px;
}

/*#bckEndContainerBlack
{
    background-image: url("../images/bgcontainer.png");
    background-repeat: repeat-x;
    background-repeat: repeat-x;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 1097px;
}*/

#logout
{
    /*width: 240px;*/
    /*float: right;*/
    position: absolute;
    right: 30px;
    bottom: 10px;
    /*padding-right: 39px;*/
    /*padding-top: 30px;*/
    text-align: right;
}
/* css for user name */
#user-name {
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    position: absolute;
    left: 202px;
    bottom: 15px;
}
#user-name::after {
    content: 'Click to Sign-Out';
    display: block;
    width: 120px;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    background-color: #9d9ea0;
    font-size: 14px;
    color: #000;
    border-radius: 3px;
    top: 110%;
    left: 50%;
    padding: 4px;
    -moz-box-shadow: 0 0 10px #000000;
    -webkit-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
    pointer-events: none;
}
#user-name:hover {
    color: #be1b21;
}
#user-name:hover:after {
    opacity: 1; visibility: visible;
    z-index: 2;
}

/* css for budget tag */
#divBudgetTagCtb {
    position:absolute;
    right: 32px;
    top: 10px;
}
#budgetTagDescription {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 12px;
}
#budgetChange {
    position: absolute;
    right: 0;
    top: 20px;
    background: #efefef;
    display: inline-block;
    width: 30px;
    height: 30px;
}
#budgetChange img {
    width: 100%; height: 100%;
    transition: 0.2s;
}
/* css for hovering change budget button */
#budgetChange:hover {
    background: #afafaf;
}
#budgetChange:hover img { opacity: 0.8; }
#budgetChange.selected img { transform: scaleY(-1); }
#budgetRemain {
    position: absolute;
    right: 34px;
    top: 20px;
    display: inline-block;
    width: auto;
    height: 30px;
    font-size: 24px;
    line-height: 30px;
    white-space: nowrap;
    background: #5cb85c;
    color: #fff;
    font-weight: bold;
    padding: 0 5px;
}
/* css for budget change window */
#budgetDetailWindow {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 101;
    width: auto;
    height: auto;
    background: #efefef;
    z-index: 2;
    transition: 0.3s ease;
    padding: 5px;
    -webkit-box-shadow: 0px 0px 5px #252525;
    -moz-box-shadow: 0 0 5px #252525;
    box-shadow: 0 0 5px #252525;
}
#budgetDetailWindow.selected {
    opacity: 1;
    visibility: visible;
    top: 55px;
    z-index: 101;
}
.budgetDetailWindowRow { text-align: left; font-size: 12px; width: auto; position: relative; padding: 4px 0; color: #1e1e1e; white-space: nowrap; }
.budgetDetailWindowRow:last-child { border-top: 2px solid #9d9ea0;}
    .budgetDetailWindowRow b { display: inline-block; vertical-align: middle; padding: 2px 5px; width: auto; min-width: 140px; white-space: nowrap; text-align: left; color: #1e1e1e;}
    .budgetDetailWindowRow font {font-weight: bold; font-size: 16px;}
    .budgetDetailWindowRow button {cursor: pointer;}
    .budgetDetailWindowRow:last-child font {  color: rgb(44, 151, 62);}
    .budgetDetailWindowRow img#budgetDetailChange { display: inline-block; position: absolute; right: 0; vertical-align: middle; width: 20px; height: 20px; }
    .budgetDetailWindowRow img#budgetDetailChange:hover { background: #9d9ea0; border-radius: 3px; }

#budgetInputContainer { height: 0; transition: 0.3s ease; padding: 0;}
    #budgetInputContainer input { visibility: hidden; opacity: 0; position: absolute; left: -35px; height: 20px; line-height: 20px; transition: 0.3s ease; width: calc(100% - 40px); outline: none; border: none; padding: 0;}
    #budgetInputContainer img { display: inline-block; visibility: hidden; opacity: 0; position: absolute; width: 20px; height: 20px; right: 40px; transition: 0.3s ease;}
    #budgetInputContainer img:hover { background: #118811; border-radius: 3px; }
#budgetInputContainer.selected { height: 20px; padding: 4px 0;}
#budgetInputContainer.selected input { visibility: visible; opacity: 1; left: 5px; }
#budgetInputContainer.selected img { visibility: visible; opacity: 1; right: 0;}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
input[type=number]:focus {
    -moz-appearance: number-input;
}

#logout a
{
    text-decoration: none;
    /*font-family: Arial;*/
    font-size: 10pt;
    color: #000;
}
#logout a:hover
{
    color: #E2001A;
}

/* Style for Outlet hierarchy*/
#ctb-outlethierarchy-sliderWrap {
    margin: 0 auto;
    width: 1024px;
}

#ctb-outlethierarchy-slider {
    position: absolute;
    /*background-image:url("../images/dropdown-inactive.png");
    background-repeat:no-repeat;
    background-position: bottom;*/
    width: 1024px;
    height: 360px; /*159px;*/
    margin-top: -345px; /*-141px;*/
    transition: 0.5s;
    z-index:9999;
}

#ctb-outlethierarchy-slider:hover {
    /*background-image:url("../images/dropdown-hover.png");*/
}
#ctb-outlethierarchy-slider img {
    border: 0;
}
#ctb-outlethierarchy-sliderContent {
    /*height: 660px;*/
    /*margin-top: -330px;*/
    position: absolute;
    width: 1024px;
    height: 340px;
    background-color:#ebebeb;
    border: 1px solid #393939;
    border-top: none;

    -webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
#ctb-outlethierarchy-sliderContent > table {
    /*margin-top: 360px;*/
    margin-top: 15px;
    padding: 0px 15px 0 15px;
}
#ctb-outlethierarchy-openCloseWrap {
    position:absolute;
    margin: 341px 0 0 503px;
    font-size:12px;
    font-weight:bold;
    z-index:9999;
}
#ctb-outlethierarchy-open-active {
   cursor:pointer;
}
#ctb-outlethierarchy-sliderWrap:not(.showed) #ctb-outlethierarchy-open-active:hover {
   content: url("../images/openarrow_hover.png");
   background: #acacac;
}
/*#ctb-outlethierarchy-close-active:hover {
   content: url("../images/closearrow_hover.png");
   cursor:pointer;
}*/

.google-visualization-orgchart-node{
    border: 1px solid #acacac !important;
    background-color: #ebebeb !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ebebeb)) !important;
    font-weight: bold !important;
    color: #393939 !important;
    -webkit-box-shadow: #ebebeb 0px 0px 0px !important;
    -moz-box-shadow: #ebebeb 0px 0px 0px !important;
}

.google-visualization-orgchart-lineleft {
    border-left: 1px solid #acacac !important;
}
.google-visualization-orgchart-linebottom {
    border-bottom: 1px solid #acacac !important;
}
.google-visualization-orgchart-lineright {
    border-right: 1px solid #acacac !important;
}
.google-visualization-orgchart-nodesel {
    border: 1px solid #acacac !important;
    background-color: #c0c0c0 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#c0c0c0), to(#c0c0c0)) !important;
}

/* .ctb-outlethierarchy-current-node {
    border: 1px solid #acacac !important;
    background-color: #c0c0c0 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#c0c0c0), to(#c0c0c0)) !important;
    font-weight: bold !important;
    color: #393939 !important;
    cursor:pointer !important;
}
.ctb-outlethierarchy-node-hover {
    border: 1px solid #acacac !important;
    background-color: #c0c0c0 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#c0c0c0), to(#c0c0c0)) !important;
    font-weight: bold !important;
    color: #393939 !important;
    cursor:pointer !important;
}

.ctb-outlethierarchy-selected-node {
    border: 1px solid #acacac !important;
    background-color: #c0c0c0 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#c0c0c0), to(#c0c0c0)) !important;
    font-weight: bold !important;
    color: #393939 !important;
   cursor:pointer !important;
}*/
#ctb-outlethierarchy-whereiam { color: #000; }

/* css for moving outlet hierarchy window */
#ctb-outlethierarchy-sliderWrap.showed #ctb-outlethierarchy-slider {
    margin-top: 0px;
}
#ctb-outlethierarchy-sliderWrap.showed #ctb-outlethierarchy-topMenuImage {
    border-color: #1e1e1e;
    background-color: #252525;
    transition: 0.2s;
}
#ctb-outlethierarchy-sliderWrap.showed #ctb-outlethierarchy-topMenuImage:hover {
    background-color: #333333;
}
#ctb-outlethierarchy-sliderWrap.showed #ctb-outlethierarchy-topMenuImage img {
    transform: scaleY(-1);
}
/* css for arrow button */
#ctb-outlethierarchy-topMenuImage {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-left: 1px solid #acacac;
    border-right: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#ctb-outlethierarchy-topMenuImage img {
    width: 100%;
    height: 100%;
    transition: 0.2s;
}
/*#outlet { position: absolute; margin-top: -352px; z-index: 10;  text-align: center; width: 100%; transition: 0.5s; font-size: 16px; z-index: 9999;}
        #outlet-map-close-btn { position: absolute; top: 10px; right: 10px; }
            #outlet-map-close-btn img { width: 20px; height: 20px; transform: rotate(45deg);}
            #outlet-map-close-btn img:hover { opacity: 0.6}
		#outlet-map { z-index: 2; min-width: 400px; width: 95%; max-width: 1024px; height: 310px; background: #ebebeb; line-height: 100%; padding: 25px 5px 15px;  margin-left: auto; margin-right: auto; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; border: 1px solid #414141; border-top: none;  border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
			#outlet-map td { padding-left: 0 !important; padding-right: 0 !important; width: 8px; padding: 0 !important;}
            #map {overflow: auto;max-height: 250px; }
			#guide { display: block; position: absolute; color: #f00; font-style: italic; font-weight: 800; bottom: 20px; left: 50%; margin-left: -120px; text-transform: uppercase; font-size: 80%; }
				#confirm { display: none; position: absolute; height: auto; width: auto; border: 1px solid rgb(240,20,20); background: #d3d3d3;  border-radius: 3px; padding: 10px 5px 5px; -moz-box-shadow:  0 0 10px #666; -webkit-box-shadow: 0 0 10px #666; box-shadow: 0 0 10px #666;}
				#confirm:after { content: ''; position: absolute; display: block; top: -9px; left: 15px; width: 15px; height: 15px; transform: rotate(45deg); border-top: 1px solid rgb(240,20,20); border-left: 1px solid rgb(240,20,20); background: #d3d3d3; }
					#confirm > a { display: block; width: 60px; margin: 5px; font-weight: bolder; transition: 0.3s ease;}
					#confirm > a:hover { background: rgb(195, 195, 195); color: rgb(240, 20, 20); }
				.outlet-node { line-height: 100% !important; color: #252525; padding: 0; border: 1px solid #acacac; position: relative; border-radius: 5px; vertical-align: middle; cursor: pointer;}
                .outlet-node.current-node-td { background-color: #c0c0c0; }
					.outlet-node span { padding: 2px; display: inline-block; line-height: 100%; min-width: 90px; white-space: nowrap; font-size: 11px ; font-weight: bold; vertical-align: middle; color: rgb(57,57,57);}
				.outlet-node:hover { background-color: #c0c0c0; transition: 0.2s ease;}*/
					/*.current-outlet { display: block; padding: 8px 5px; }*/
					/*.google-visualization-orgchart-linebottom, .google-visualization-orgchart-lineleft, .google-visualization-orgchart-lineright, .google-visualization-orgchart-linetop { border-color: #858585 !important;}
					.outlet-view { position: absolute; top: 1.5px; right: 1.5px; width: 16px; padding: 0 !important;}
		#outlet-button { display: inline-block; height: 20px; width: auto; margin-left: auto; margin-right: auto; position: relative; z-index:9999999}
			#outlet-button > div { width: 20px; height: 20px; background-image: url(../images/openarrow_inactive.png); background-repeat: no-repeat; background-position: center center; float: left; margin-right: 5px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; cursor: pointer;}
			#outlet-name { line-height: 20px; color: #1e1e1e; background-color: #ffffff; font-size: 80%; min-width: 150px; padding-right: 5px; white-space: nowrap;}*/
        /*#outlet-button:hover:before { content: ' '; display: block; position: absolute; top: 0; left: 1px; height: 100%; width: 20px; background: rgba( 20, 20, 20, 0.3); z-index: 0; }*/
	    /*#outlet-button:not(.showed) > div:hover { background-image: url(../images/openarrow_hover.png); background-color: #aeaeae;}
    #outlet.showed { margin-top: 0px; }
        #outlet.showed #outlet-map { -moz-box-shadow:  0 0 10px #666; -webkit-box-shadow: 0 0 10px #666; box-shadow: 0 0 10px #666; }
		#outlet.showed #outlet-button { background: #252525; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-right: 1px solid #252525; border-left: 1px solid #252525; border-bottom: 2px solid #252525; -moz-box-shadow:  0 0 10px #fff; -webkit-box-shadow: 0 0 10px #fff; box-shadow: 0 0 10px #fff;}
			#outlet.showed #outlet-button div { background-image: url(../images/closearrow_inactive.png);}
			#outlet.showed #outlet-button div:hover { background-image: url(../images/closearrow_hover.png);}
            #outlet.showed #outlet-name { color: #fff; background-color: #000}*/
    #outlet {
	    position: absolute; z-index: 10;  text-align: center; width: 100%; font-size: 16px;
	    -webkit-transform: translateX(0) translateY(-352px) translateZ(0);
	    -moz-transform: translateX(0) translateY(-352px) translateZ(0);
	    -ms-transform: translateX(0) translateY(-352px) translateZ(0);
	    -o-transform: translateX(0) translateY(-352px) translateZ(0);
	    transform: translateX(0) translateY(-352px) translateZ(0); pointer-events: none;
             -webkit-transition: -webkit-transform 0.25s ease-out; /* Changed here */
             -moz-transition: -moz-transform 0.25s ease-out;
               -o-transition: -o-transform 0.25s ease-out;
                  transition: transform 0.25s ease-out;
	}

        #outlet-map-close-btn { position: absolute; top: 10px; right: 10px; }
            #outlet-map-close-btn img { width: 20px; height: 20px; transform: rotate(45deg);}
            #outlet-map-close-btn img:hover { opacity: 0.6}
		#outlet-map { z-index: 2; min-width: 400px; width: 95%; max-width: 1024px; height: 310px; background: #ebebeb; line-height: 100%; padding: 25px 5px 15px;  margin-left: auto; margin-right: auto; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; border: 1px solid #414141; border-top: none;  border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; pointer-events: auto;}
			#outlet-map td { padding-left: 0 !important; padding-right: 0 !important; width: 8px; padding: 0 !important;}
            #map { overflow: auto;max-height: 300px; }
			#guide { display: block; position: absolute; color: #f00; font-style: italic; font-weight: 800; bottom: 20px; left: 50%; margin-left: -120px; text-transform: uppercase; font-size: 80%; }
				#confirm { visibility:hidden; position: absolute; height: auto; width: auto; border: 1px solid rgb(240,20,20); background: #d3d3d3;  border-radius: 3px; padding: 10px 0 0; -moz-box-shadow:  0 0 10px #666; -webkit-box-shadow: 0 0 10px #666; box-shadow: 0 0 10px #666; pointer-events: auto;}
				#confirm:after { content: ''; position: absolute; display: block; top: -9px; left: 15px; width: 15px; height: 15px; transform: rotate(45deg); border-top: 1px solid rgb(240,20,20); border-left: 1px solid rgb(240,20,20); background: #d3d3d3; }
					#confirm > span { display: block; width: 100px; line-height: 30px; font-weight: bold; text-transform: capitalize; cursor: pointer; }
					#confirm > span:hover { background: rgb(195, 195, 195); color: rgb(240, 20, 20); }
				.outlet-node { line-height: 100% !important; color: #252525; padding: 0; border: 1px solid #acacac; position: relative; border-radius: 5px; vertical-align: middle; cursor: pointer; pointer-events: auto; }
                .outlet-node.current-node-td { background-color: #c0c0c0; }
					.outlet-node span { padding: 2px; display: inline-block; line-height: 100%; min-width: 90px; white-space: nowrap; font-size: 11px ; font-weight: bold; vertical-align: middle; color: rgb(57,57,57);}
				.outlet-node:hover { background-color: #c0c0c0; transition: 0.2s ease;}
					/*.current-outlet { display: block; padding: 8px 5px; }*/
					.google-visualization-orgchart-linebottom, .google-visualization-orgchart-lineleft, .google-visualization-orgchart-lineright, .google-visualization-orgchart-linetop { border-color: #858585 !important;}
					.outlet-view { position: absolute; top: 1.5px; right: 1.5px; width: 16px; padding: 0 !important;}
		#outlet-button { display: inline-block; height: 20px; width: auto; margin-left: auto; margin-right: auto; pointer-events: auto; cursor: pointer; }
        #outlet-button.white-bg { background-color: #fff; }
			#outlet-button > div { width: 20px; height: 20px; background-image: url(../images/openarrow_inactive.png); background-repeat: no-repeat; background-position: center center; float: left; margin-right: 5px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee; }
			#outlet-button > div:hover { background-image: url(../images/openarrow_hover.png); background-color: #aeaeae;}
			#outlet-name { line-height: 20px; color: #1e1e1e; font-size: 80%; min-width: 150px; padding-right: 5px; white-space: nowrap; }
	/* #outlet.showed {
	    -webkit-transform: translateX(0) translateY(0) translateZ(0);
	    -moz-transform: translateX(0) translateY(0) translateZ(0);
	    -ms-transform: translateX(0) translateY(0) translateZ(0);
	    -o-transform: translateX(0) translateY(0) translateZ(0);
	    transform: translateX(0) translateY(0) translateZ(0); z-index: 102;
	}
        #outlet.showed #outlet-map { -moz-box-shadow:  0 0 10px #666; -webkit-box-shadow: 0 0 10px #666; box-shadow: 0 0 10px #666; }
		#outlet.showed #outlet-button { background: #252525; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-right: 1px solid #252525; border-left: 1px solid #252525; border-bottom: 2px solid #252525; -moz-box-shadow:  0 0 10px #fff; -webkit-box-shadow: 0 0 10px #fff; box-shadow: 0 0 10px #fff;}
			#outlet.showed #outlet-button div { background-image: url(../images/closearrow_inactive.png);}
			#outlet.showed #outlet-button div:hover { background-image: url(../images/closearrow_hover.png);}
            #outlet.showed #outlet-name {
                color: #fff;
            }

            .iLegend {
                text-transform: uppercase;
                display: block;
                color: white;
                font-size: 20px;
                padding-top: 15px;
                padding-bottom: 15px
            } */