.ldPanel {
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    display: block;
    margin-left: 1%;
    margin-right: 1%;
} 

.panelYellowBackground {
    background-color: #daab27;
    background-image: linear-gradient(315deg, #daab27 0%, #f5f7fa 74%);
}

.panelBlueBackground {
    background-color: #6a93cb;
    background-image: linear-gradient(315deg, #6a93cb 0%, #f5f7fa 74%);
}

.panelGreenBackground {
    background-color: #146a4f;
    background-image: linear-gradient(315deg, #146a4f 0%, #f5f7fa 74%);
}

.panelGrayBackground {
    background-color: #b8c6db;
    background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
}

.panelYellowSide {
    background-color: #f5f7fa;
    background-image: linear-gradient(90deg, #f5f7fa 0%, #f5f7fa 74%);
}

.panelBlueSide {
    background-color: #f5f7fa;
    background-image: linear-gradient(90deg, #f5f7fa 0%, #f5f7fa 74%);
}

.panelGreenSide {
    background-color: #f5f7fa;
    background-image: linear-gradient(90deg, #f5f7fa 0%, #f5f7fa 74%);
}

.panelGraySide {
    background-color: #f5f7fa;
    background-image: linear-gradient(90deg, #f5f7fa 0%, #f5f7fa 74%);
}

.circular {
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

.rButton {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.grpBlackBox {
    background-color: transparent;
    color: Black;
    font-family: 'Segoe UI';
    font-size: larger;
    font-weight: bold;
    border: none 8px Black;
}

.grpBlackBox0 {
    max-width:90%;
    width: 90%;
    background-color: Black;
    color: white;
    font-family: 'Segoe UI';
    font-size: larger;
    border: solid 8px Black;
}

.grpBlackBox1 {
    max-width: 95%; 
    width: 95%;
    background-color: Black;
    color: white;
    font-family: 'Segoe UI';
    font-size: larger;
    border: solid 8px Black;
}

.grpBlackBox2 {
    width: 96%;
    background-color: black; 
    color: white;
    font-family: 'Segoe UI';
    font-size: larger;
    border: solid 8px black;
}


/* Header */
.app-header {
    padding: 0 !important;
    box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.2);
    border-bottom-width: 0 !important;
}

.app-header .left-block {
    float: left;
}

.app-header .right-block {
    float: right;
}

.app-header .menu-container {
    overflow: hidden;
}

.app-header .menu-container > div {
    float: right;
}

.left-panel.expand-bar,
.right-panel.expand-bar {
    border: 0;
}


.left-panel {
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    -webkit-overflow-scrolling: touch;
}

.menuFont {
    font: Segoe UI;
    font-size: 0.9vw;
    max-width: 100%;
    min-width: 50%;
    width:100%;
    background-color: transparent;
    color: Black;
    vertical-align: middle;
}

.smFont {
    font: Segoe UI;
    font-size: 0.75vw;
    max-width: 100%;
    min-width: 50%;
    background-color: transparent;
    color: Black;
    vertical-align: middle;
}

.moduleFont {
    font: Segoe UI;
    font-size: 0.95vw!important;
    color: Black!important;
}

.moduleSMFont {
    font: Segoe UI;
    font-size: 0.70vw;
    color: black!important;
}

.moduleSMFont:hover  {
    font: Segoe UI;
    font-size: 0.8vw;
    color: DarkRed !important;
}


.header {
    font: Segoe UI;
    font-size: 1.15vw;
    background-color: transparent;
    color: black;
    vertical-align: middle;

    /*font-family: Segoe UI;
    font-size: 1.25vw;
    font-weight: normal;
    vertical-align: top;
    text-align: center;
    background-color: transparent;
    width: 20%;
    border: none;*/
    /*padding-left: 42%;
    padding-right: 3%;*/
    /*margin-top:0.5%;*/
    /*color: white;
    text-shadow: 0px 0px 10px lightgray;*/
    /*-webkit-text-stroke: 1px yellow;*/
}

.titleFont {
    font: Segoe UI;
    font-size: 22px;
    background-color: whitesmoke;
    color: white;
    vertical-align: top;
}


.headerFont {
    font: Segoe UI;
    font-size: 14px;
    background-color: transparent;
    color: white;
    vertical-align: top;
}

.footerFont {
    font: Segoe UI;
    font-size: 0.75vw;
    background-color: transparent;
    color: white;
    vertical-align: middle;
    border: 0px none lightgray;  
    width:100%;
    height:100%;
}

.roundedTopConnerMenu {
    text-align: left;
    vertical-align: bottom;
    margin-right: 0.0%;
    border: none;
    border-top-left-radius: 25px;
    font-family: Segoe UI;
    Font-Size: 1.55vh;
    width: 79vw;
    height: 75%;
}

.ReadOnly {
    cursor: not-allowed;
    font-style: italic;
    background-color: lightgray;  
}

.Green {
    background-color: #C5E1A5;
    color: black;
}

.GreenAlt {
    background-color: #F1F8E9;
    color: black;
}

.Blue {
    background-color: #A9CCE3;
    color: white;
}

.BlueAlt {
    background-color: #EAF2F8;
    color: black;
}

.Yellow {
    background-color: #FFF9C4;
    color: black;
}

.YellowAlt {
    background-color: floralwhite; 
    color: black;
}

.GreenTreeBackgroundImage {
    background-image: url(~/Images/resilience@worxQLGreen.png);
    background-size: 100% 100%;
}

.BlueTreeBackgroundImage {
    background-image: url(~/Images/resilience@worxQLBlue.png);
    background-size: 100% 100%;
}

.YellowTreeBackgroundImage {
    background-image: url(~/Images/resilience@worxQLYellow.png);
    background-size: 100% 100%;
}

.menuButtonHover {
    background: none;
    cursor: pointer;
    border: 0;
    border-right-style: none;
    display: inline-block;
    border-radius: 10px;
    background-color: darkred;
    color: white;
    box-shadow: 0px 0px 5px 0px rgb(255, 216, 0), 0px 0px 5px 0px rgb(255, 216, 0);
}

.menuButtonNormal {
    background: none;
    cursor: pointer;
    border: 0;
    background-color: whitesmoke;
    color: black;
}

.menuRButtonHover {
    background: none;
    cursor: pointer;
    border: 0;
    border-right-style: none;
    display: inline-block;
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width:100%;
    box-shadow: 0px 0px 20px 0px rgb(255, 216, 0), 0px 0px 20px 0px rgb(255, 216, 0);
}

.rptLabel {
    background-color: transparent;
    color: black;
    cursor: not-allowed;
}

.rptRow {
    background-color: gainsboro;
    color: black;
    border: 1px ridge black;
    width: 100%;
    height: 25px;
    cursor: not-allowed;
}

.rptAltRow {
    background-color: ghostwhite;
    color: black;
    border: 1px ridge black;
    width: 100%;
    height: 25px;
    cursor: not-allowed;
}

.BIADialogBoxDiv1 {
    width: 100vw;
    height: 93vh;
    vertical-align: top;
}

.BIADialogBoxDiv2 {
    width: 100vw;
    height: 7vh;
}

.BIADialogBoxDiv3 {
    width: 100vw;
    height: 28vh;
}

.BIADialogBoxDiv4 {
    width: 100vw;
    height: 65vh;
}

.BIADialogBoxDiv5 {
    width: 100%;
    height: 7vh;
}
.GreenThemeBackgroundColor {
    background-color: #BBD17E;
    color: black;
}

.myHtmlEditor,
.myHtmlEditor table {
    width: 100% !important;
    height: 100% !important;
}  

.modalBackground {
    background-color: Black;
    filter:blur(); 
    opacity: 0.8;
}

.rot90 {
    top: 0%;
    height: 50%;
    width: 100%;
    position: relative;
    left: 20%;
    font-family: 'Segoe UI';
    font-size:10px; 
    font-weight:bold;  
    vertical-align:bottom; 
    text-align:center;  
    background-color:transparent; 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.rot90B {
    top: 50%;
    height: 0%;
    width: 100%;
    position: relative;
    left: 10%;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.rCircle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 12px;
    color: white;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: red;
    border: 3px gray solid;
}

.yCircle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 12px;
    color: black;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: yellow;
    border: 2px gray solid;
}

.gCircle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 12px;
    color: black;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: green;
    border: 4px gray solid;
}

#rotate-text {
    width: 25px;
    transform: rotate(270deg);
    text-align: center;
    vertical-align: middle; 
}

#rotate-text315 {
    width: 25px;
    transform: rotate(315deg);
}

.bottomBorder {
    border-bottom: solid;
    border-color: lightgray;
    border-bottom-width: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: Segoe UI;
    font-size: 12px;
}

.bottomBorder:hover {
    border-bottom: solid;
    border-color: yellow;
    border-bottom-width: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: Segoe UI;
    font-size: 12px;
}

.bottomBorder:focus {
    border-bottom: solid;
    border-color: lawngreen;
    border-bottom-width: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: Segoe UI;
    font-size: 12px;
}

.nullText {
    color: lightgray;
    font-family: Segoe UI;
    font-size: 12px;
}

.fire {
    vertical-align: middle;
    text-align: center;
    padding-bottom: 0%;
    width: 100% !important;
    height: 25vh !important;
    font-family: Segoe UI;
    font-size: 8vh;
    font-size-adjust: initial;
    border: none;
    background-color: transparent; 
    /*border-radius: 25px 25px 0px 0px;*/
    color: white; /*rgba(255, 255, 255, 0);*/
    text-shadow: 0 0 1px #ffffff, 0 -3px 5px #fffc00, 0 -8px 15px #ff983d, 0 -15px 30px #ff983d;
}

.fire2 {
    vertical-align: middle;
    text-align: right;
    padding-top: 14%;
    padding-right: 5px;
    width: 15% !important;
    height: 50% !important;
    font-family: Segoe UI;
    font-size: 5px;
    font-size-adjust: initial;
    border: none;
    background-color : transparent;
    color: white; /*rgba(255, 255, 255, 0);*/
    text-shadow: 0 0 1px #ffffff, 0 -3px 5px #fffc00, 0 -8px 15px #ff983d, 0 -15px 30px #ff983d;
}

.modalWin {
    color: black;
}

.rRadiusL {
    border-radius: 0px 0px 0px 0px;
    border-style: none;
    background-position: center center;
    background-image: url('~/Images/headerLogin.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color:transparent;
}

.rRadiusC {
    border-radius: 0px 0px 0px 0px;
    border-style: none;
    background-position: center center;
    width: 100%;
    height: 50%;
    background-image: url('~/Images/headerChangePassword.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

.rRadiusF {
    border-radius: 0px 0px 0px 0px;
    border-style: none;
    background-position: center center;
    width: 100%;
    height: 50%;
    background-image: url('~/Images/headerForgotPassword.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

.tableClass {
    width: 100%;
    height: 40%;
    text-align: center;
    font-size: 12px;
    font-family: Segoe UI;
    padding-top: 3%;
}

#myDiv {
    height: 43%;
    width: 100%;
}

    #myDiv img {
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        display: block;
    }

DThideYScroll {
    overflow-y: hidden;
}

TBody > TR > TD.blackLeft
{
    background-color: black !important;
    color: white;
    text-align: left;
}

TBody > TR > TD.darkerblueLeft {
    background-color: midnightblue !important;
    color: white;
    text-align: left;
}

TBody > TR > TD.darkblueLeft {
    background-color: darkblue !important;
    color: white;
    text-align: left;
}

TBody > TR > TD.lightblueLeft {
    background-color: lightsteelblue !important;
    color: white;
    text-align: left;
}

.nodeRedLeft {
    color : white;
    background-color : red;
    font-weight : bold;
}

.nodeYellowLeft {
    color: black;
    background-color: yellow;
    font-weight: bold;
}

.nodeGreenLeft {
    color: black;
    background-color: lawngreen;  
    font-weight: bold;
}

.DataTreeBoldUnderline {
     font-weight :bold;
      font-size : larger;  
}


body {
    overflow: hidden;
}

.hidden {
    max-height : 0px !important; 
    visibility:hidden;
    display:none;
}

TBODY > TR > TD.questionCursor
{
    cursor:help; 
    text-align:left;  
    vertical-align : top;
}

td:disabled  {
     background-color : black;
}

.rowSelector {
    width: 5%;
}


.hideRow {
	visibility: hidden;
	height: 0px !important;
	display: none;
}


.ASPxButton {
    background : none;
    border-style: none;
    border-color: transparent;
    border-width: 0;
    font-family: Segoe UI;
    cursor: pointer;
    font-size: 12px;
    display: inline-block;
    border-radius: 0px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    background-color: transparent;
    color: white;
    height: 25px;
}

.ASPxButtonHover {
    background: none;
    font-family: Segoe UI;
    cursor: pointer;
    border: 0;
    height: 32px;
    font-size: 13px;
    display: inline-block;
    border-radius: 10px;
    background-color: yellow;
    color: black;
    -webkit-box-shadow: 3px 3px 3px 3px rgb(255, 216, 0);
    -moz-box-shadow: 3px 3px 3px 3px rgb(255, 216, 0);
    box-shadow: 3px 3px 3px 3px rgb(255, 216, 0);
}

.ASPxButtonDisabled {
    background: none;
    border: 1px solid #999999;
    background-color: lightgray;
    color: rgb(239, 236, 236);
    cursor: not-allowed;
}


/* Common Button style */
input[type='button'], input[type='submit'], button {
    border-style:ridge; 
    border-color: inherit;
    border-width: 2px;
    font-family: Segoe UI;
    cursor: pointer;
    font-size: 12px;
    display: inline-block;
    border-radius: 10px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    background-color: gray;
    color: white;
    height: 25px;
    -webkit-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 1);
    -moz-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 1);
    box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 1);
}

input[type='button']:hover, input[type='submit']:hover, button:hover {
    font-family: Segoe UI;
    cursor: pointer;
    border: 0;
    height: 25px;
    font-size: 13px;
    display: inline-block;
    border-radius: 10px;
    background-color: yellow;
    color: black;
    -webkit-box-shadow: 3px 3px 3px 0px rgb(255, 216, 0);
    -moz-box-shadow: 3px 3px 3px 0px rgb(255, 216, 0);
    box-shadow: 3px 3px 3px 0px rgb(255, 216, 0);
}

input[type="text"], textarea {
    border: 1px solid #999999;
    width: 100%;
}

input[type="text"]:disabled, textarea:disabled {
  border: 1px solid #999999;
  background-color: lightgray; 
  color: white; 
  cursor: not-allowed;  
}

select:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: rgb(239, 236, 236);
  cursor: not-allowed;  
}

input[type="button"]:disabled, input[type="submit"]:disabled, button:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}


.gray { background : gray; color : black;}
.green { background: #F2555D; color: white; }
.blue { background: #0071BC; color: white; }
.yellow { background: #f7e993; color: black;}
.red { background: #f7e993; color: white;}


input[type="text"]:disabled, textarea:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;  
}


.dialogHeader {
    background-image : none; 
    height :20px;
    background-color : black;
    color: white;
}
        
.rowHeight {
    height: 10px;
}

tbody.thinRows > tr > td {
    background-image : none; 
    line-height : 25px;
    height: 25px;
    max-height : 25px; 
    margin : 0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
	overflow: hidden;
    white-space: nowrap;
    padding-left: 1px;
    padding-right: 1px;
}

tbody.altthinRows > tr > td {
    background-image : none; 
    line-height : 25px;
    height: 25px;
    max-height : 25px; 
    margin : 0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
	overflow: hidden;
    white-space: nowrap;
    background-color : darkgray;  
    padding-left: 1px;
    padding-right: 1px;   
}

th.redTengah {
	vertical-align: middle;
	text-align: center;
	background-color : red;
}

th.middleTengah {
    vertical-align: middle;
    text-align: center;
}


.headerHeight {
    margin: 0% 0% 0% 0%;
    background-image : none;
    text-align : left;
    vertical-align: middle;
    width: 100% !important;
}

#rcorners2 {
    border-top-left-radius: 25px; border-bottom-right-radius: 25px; border-top-right-radius: 2px; border-bottom-left-radius: 2px;
    border: 3px ridge white;
            
    /*padding: 20px; 
    width: 200px;
    height: 150px;*/    
}

.statusLabel
{
    text-align:center; 
    height: 10px;
    top: 0%;
    color: black;
    font-family: Arial;
    font-size: 12px;
    border: ridge #BF1E2E 1px;
    background-color: #FFFF66;
}

.AlignRight
{
    text-align: right !important;
    vertical-align : middle;
}

.AlignLeft {
    text-align: left !important;
    vertical-align: middle;
}

.AlignMiddle {
    text-align:center; 
    vertical-align: middle;
}

TBODY > TR > TD.Test {
    color: white;
    background-color: Blue;
    background-image: none;
    overflow: hidden;
    white-space: nowrap;
}

.tblHeaderImpactLevel 
{
    font-family : Segoe UI;
    font-size : 12px; 
    color : white;
    background-color:Blue;
    text-align : center; 
}


th.tengahSUM {
	text-align: center !important;
	vertical-align: top;
}


TBODY > TR > TD.tengah 
{
    text-align:center;  
    vertical-align : top;
}


TBODY > TR > TD.kanan
{
    text-align:right;  
    vertical-align : top;
}

TBODY > TR > TD.kiri
{
    text-align:left;  
    vertical-align : top;
}

TBody > TR > TD.white {
    background-color: white !important;
    color: black;
    text-align: center;
}

TBody > TR > TD.whiteLeft {
    background-color: white !important;
    color: black;
    text-align: left;
}

TBody > TR > TD.green {
	background-color: lawngreen !important;
	color: black;
	text-align: center;
}

TBody > TR > TD.greenFont {
    background-color: lawngreen !important;
    color: lawngreen;
    text-align: center;
}

TBody > TR > TD.greenLeft {
	background-color: lawngreen !important;
	color: black;
	text-align: left;
}

TBody > TR > TD.orange {
	background-color: orange !important;
	color: black;
	text-align: center;
}

TBody > TR > TD.orangeFont {
    background-color: orange !important;
    color: orange;
    text-align: center;
}

TBody > TR > TD.orangeLeft {
	background-color: orange !important;
	color: black;
	text-align: left;
}

TBody > TR > TD.red {
	background-color: red !important;
	color: white;
	text-align: center;
}

TBody > TR > TD.redLeft {
	background-color: red !important;
	color: white;
	text-align: left;
}

TBody > TR > TD.redFont {
    background-color: red !important;
    color: red;
    text-align: center;
}

TBody > TR > TD.orangered {
    background-color: orangered !important;
    color: white;
    text-align: center;
}

TBody > TR > TD.blue {
    background-color: blue !important;
    color: white;
    text-align: center;
}

TBody > TR > TD.blueLeft {
    background-color: blue !important;
    color: white;
    text-align: left;
}

TBody > TR > TD.yellow {
    background-color: yellow !important;
    color: black;
    text-align: center;
}

TBody > TR > TD.yellowLeft {
    background-color: yellow !important;
    color: black;
    text-align: left;
}

TBody > TR > TD.gray {
	background-color: gray !important;
	color: white;
	text-align: center;
}

TBody > TR > TD.grayLeft {
	background-color: gray !important;
	color: white;
	text-align: left;
}


.blinking {
    animation: blinker 0.6s linear infinite;
    color: darkred;
    font-size: 16px;
    font-weight: bold;
    font-family: Segoe UI;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink-one {
    animation: blinker-one 1s linear infinite;
}

@keyframes blinker-one {
    0% {
        opacity: 0;
    }
}

.blink-two {
    animation: blinker-two 1.4s linear infinite;
}

@keyframes blinker-two {
    100% {
        opacity: 0;
    }
}

.blink {
    -webkit-animation-name: textblink;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: textblink;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
   
    color : White;
    background-color: darkred;  
    font-weight: bold; 
    animation-name: textblink;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    font-family:Segoe UI; 
    font-size: 12px;
    }
    @-moz-keyframes textblink {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    }
    @-webkit-keyframes textblink {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    }
    @keyframes textblink {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
    }  
         
    .abc {
    background: rgba(152, 209, 8, 1.00);
    -webkit-animation: expand 0.3s;
}

@-webkit-keyframes expand{
    0%{height:0%}
    100%{height:20%}
}


div.slide-up {
    animation: 0.5s slide-up;
    position:absolute; 
    /*top:96.75%; left:70.15%; width:28.55; height:0%;left:60%;*/ 
    font-family: 'Segoe UI'; 
    font-size:20px; 
    font-weight:bolder;  
    border: 10px inset grey;
    text-align:center; 
    vertical-align:middle; 
}

@keyframes slide-up {
    from {
    /*top: 96.75% width:0%; height: 0%; left:98.75%;*/ 
    bottom: 1%;
    right:-10%;
    }

    to {
    /*top: 76.75%; height: 20%; width:28.75%; left:70.00%;*/
    bottom: 1%;
    right:1%;
    }
}

.textButtonX 
{
    background-color : rgb(239, 236, 236);
    border-left: 1px solid rgb(239, 236, 236);
    border-right: 1px solid rgb(239, 236, 236);
    border-top: 1px solid rgb(239, 236, 236); 
    border-bottom: 1px solid rgb(239, 236, 236);
    background-image :none;
    color: black;
}

.textEditorLogin 
{
    background-color : rgb(154, 197, 88); 
    color:black;
    border-left: 1px solid rgb(239, 236, 236);
    border-right: 1px solid rgb(239, 236, 236);
    border-top: 1px solid rgb(239, 236, 236); 
    border-bottom: 1px solid rgb(239, 236, 236);
    /*border-left: none;
    border-right: none;
    border-top: none; 
    border-bottom: 1px solid red;*/
    background-image :none;
}


.rotate270 
{
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Safari 3-8 */
    transform: rotate(270deg);
    transform-origin: 52% 79%;

    font-family:Segoe UI;
    font-size: 30px;
    font-weight : bolder;  
    color: white;
    vertical-align:bottom; 
    background-color :  transparent;
    /*width:40px; 
    height:100px;*/
}



.headerBlueThemeFontColor {
    color: White;
    font-size : 12px;
}

.headerGreenThemeFontColor {
    color: White;
    font-size: 12px;
}

.headerYellowThemeFontColor {
    color: White;
    font-size: 12px;
}

.footer
{
    vertical-align:middle; 
    font-family:Segoe UI;
    font-size: 8px;
    font-weight : normal;
    text-align : right; 
    top:20%;
    margin-right: 5%; 
    color: white;
    text-shadow: 0px 0px 10px black;
}

.GoodtoHaveColor
{
    background-color : lawngreen ! important;
    color : white;
}

.NeedtoHaveColor
{
    background-color :  darkorange  ! important;
    color : white;
}

.MustHaveColor
{
    background-color : red ! important;
    color : white;
}


[data-title]
{
position: relative;
padding: 0;
}
[data-title]::before,
[data-title]::after
{
position: absolute;
left: 50%;
z-index: 5;
opacity: 0;
visibility: hidden;
background: #000;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, .8);
-moz-transition: opacity 200ms 50ms linear;
-webkit-transition: opacity 200ms 50ms linear;
-o-transition: opacity 200ms 50ms linear;
transition: opacity 200ms 50ms linear;
}
[data-title]:hover::before,
[data-title]:hover::after
{
opacity: 1;
visibility: visible;
}
/* the tooltip */
[data-title]::before
{
content: attr(data-title);
width: 120px;
padding: 4px;
margin: -30px 0 0 -68px;
font: normal 12px/16px Arial, Sans-serif;
color: #fff;
cursor: default;
border-top-left-radius: 25px; border-top-right-radius: 2px;
border-bottom-left-radius: 2px; border-bottom-right-radius: 25px;
}
/* the pointer */
[data-title]::after
{
content: "";
width: 8px;
height: 8px;
margin: -34px 0 0 -6px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

.rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

.rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

.PanelTopClass
{
   font:12px Segoe UI;
	z-index: 1; 
	width: 100%;
	height : 32px;
}
.PanelGridClass 
{
	font:12px Segoe UI;
	top: 0px;
	width: 100%;
	height: 50%;
}
.PanelActionClass 
{
	font:12px Segoe UI;
	background-color : #C00000;
	Height:36px;
	z-index: 101; 
	Width:100%;
}
.GridClass 
{
	font:12px Segoe UI;
	width: 100%;
	height: 440px; 
}
.LabelDataClass
{
	font: 12px Segoe UI;
	PADDING-LEFT: 5px;
	width: 95%;
	height: 18px;
	background-color: transparent;
	color: GrayText; 
	vertical-align :middle; 
}
.DataEntryClass
{
	Font : Segoe UI;
	Font-Size:12px; 
	Width:98%;
	border: 1px solid #c1d5e9;
	PADDING-LEFT: 5px;

}
.DropdownListClass{
	Font : Segoe UI;
	Font-Size:12px; 
	Width:98%;
	height:22px;
	PADDING-LEFT: 5px;
	margin-left : 2px;
	margin-right : 2px; 
}
.gridOddRow{
	font: Segoe UI;
	font-size : 12px;
	background-color : red;
}
.IDLabelClass 
{
	background-color : yellow;
	font: 12px Segoe UI black;
	margin: 0% 2px 0% 2px;
	border : 1px solid gray;
	width: 98%;
	height: 20px;
}

.panelCss 
{
    min-height : 100%;
    width : 100%;
    font : normal 12px Segoe UI;
    cursor : pointer; 
}

.listBoxCSS
 {
    min-height : 100%;
    width : 100%;
    font : normal 12px Segoe UI;
    cursor : pointer;
}

.listBoxCss 
    tr:nth-child(odd)		
    { background-color:#eee; }

.listBoxCss 
    tr:nth-child(even)		
    { background-color:#fff; }


.LabelCss
{
    padding-left:5px; 
    font-size : 12px; 
    font-family:Arial;
    color :black;
    background-color : transparent;
    text-align:right;
}

.FontClass
{
    padding-left:5px;
    font-family:Arial;
    font-size:12px;
}

.hideMyColumn {
            display: none;
}

.HeaderCaptionCssClassHideColumn {
            display: none;
}

.PanelTopClass
{
   font:12px Segoe UI;
	z-index: 1; 
	width: 100%;
	height : 32px;
}
.PanelGridClass 
{
	font:12px Segoe UI;
	top: 0px;
	width: 100%;
	height: 50%;
}
.PanelActionClass 
{
	font:12px Segoe UI;
	background-color : #C00000;
	Height:36px;
	z-index: 101; 
	Width:100%;
}
.GridClass 
{
	font:12px Segoe UI;
	width: 100%;
	height: 440px; 
}

.lblDataClass
{
    font: 12px Segoe UI;
    text-align: right;
    padding-right:5%; 
    vertical-align : middle;
    background-color : transparent;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display:inline-block; 
    min-width:1px;
}
.DataEntryClass
{
	Font : Segoe UI;
	Font-Size:12px; 
	Width:98%;
	border: 1px solid #c1d5e9;
	PADDING-LEFT: 5px;

}
.DropdownListClass{
	Font : Segoe UI;
	Font-Size:12px; 
	Width:98%;
	height:22px;
	PADDING-LEFT: 5px;
	margin-left : 2px;
	margin-right : 2px; 
}
.gridOddRow{
	font: Segoe UI;
	font-size : 12px;
	background-color : red;
}
.IDLabelClass 
{
	background-color : yellow;
	font: 12px Segoe UI black;
	margin: 0% 2px 0% 2px;
	border : 1px solid gray;
	width: 98%;
	height: 20px;
}

.buttonNormalClass {
    font-family : Segoe UI;
    font-size : 12px;
    cursor : auto;
}

.leafShape {
    border-top-left-radius: 25px; border-bottom-right-radius: 25px; border-top-right-radius: 2px; border-bottom-left-radius: 2px;
    border: 3px ridge white;
            
    /*padding: 20px; 
    width: 200px;
    height: 150px;*/    
}


.grid-delete-btn {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 2px 4px 2px 4px;
	filter: blur();
	opacity: 0.5;
}

.grid-delete-btn-img {
	background-image: url('/images/BCMS Icons/trashbin-16.png');
	width: 30px;
	height: 16px;
	display: inline-block;
	margin-bottom: -3px;
}

/* Use this to remove the default delete button X*/
.grid-delete-btn:before {
	content: '';
	margin: 0px;
}

.grid-delete-btn-hover {
	filter: blur();
	opacity: 1;
}

.grid-delete-btn-pressed {
	background-color: #BBB;
	border-color: #660000;
}

.modalBackground {
	background-color: Black;
	filter: blur(); 
	opacity: 0.8;
}

.modalPopup {
	background-color: #FFFFFF;
	border-width: 3px;
	border-style: solid;
	border-color: black;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	width: 1000px;
	height: 520px;
}

.lblMode {
	vertical-align: middle;
	text-align: center;
	height: 16px;
	font-weight: bold;
	font-family: Segoe UI;
	font-size: 12px;
}



/* BlueBall button */
.blueBall {
    background-image: url('../Images/BCMS Icons/SMS Text Messaging-16.png');
    width: 44px;
    height: 44px;
}

.blueBallHottracked {
    background-position: -44px 0px;
}

.blueBallPressed {
    background-position: -88px 0px;
}

/* Wine button */
.wine,
.wineHottracked,
.winePressed {
    background: url(../Images/Wine.png) !important;
    color: White !important;
    border: 0 !important;
    padding: 0 !important;
    width: 90px;
    height: 30px;
}

.wineHottracked {
    background-position: -92px 0px !important;
    color: #FAD9E0 !important;
}

.winePressed {
    background-position: -184px 0px !important;
    color: #DCB7C8 !important;
}

/* ICQ button */
.icq {
    border: 1px solid #51CF04;
    padding: 4px;
    color: #51CF04;
    background-color: #E0FFBB;
    background-image: url('') !important;
    font-size: 8pt;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

    .icq div.dxb {
        padding: 1px 5px;
        border: 0px;
    }

    .icq div.dxbf {
        padding: 0px 4px;
        border: dotted 1px black;
    }

.icqHovered {
    background-color: #EFFFDC;
}

.icqPressed {
    border-color: #CECF40;
    padding: 5px 3px 3px 5px;
}