/* 1-4 value attributes (like margin, border, padding)
   1=top, 2=right, 3=bottom, 4=left
   can be specified in px, em, pt and percentage of bounding box

   rules:
   if no left(4) value is given, use the value of right(2)
   if no bottom(3) value is given, use value of top(1)
   if no right(2) value is given, use value of top(1)
*/


a.noline                { text-decoration:none; }

.wizardInstructions     { color: #6B6C69; }                       /* Instructions in wizard pages */
.instructions           { color: #6B6C69; font-size: 0.9em; }     /* Instructions in snapshots or elsewhere */
.headerInstructions     { color: #6B6C69; font-size: 0.9em; }     /* Instructions in object headers, settings headers, etc. */
.inlineInstructions     {}                                        /* Instructions inline between fields or group of fields */
.supplementInfo         { color: #6B6C69; font-size: 0.9em; }     /* Any kind of supplementary info such as hints, examples, secondary info */
.sampleText             { font-size: 0.9em; font-style: italic; }
.sampleTextChinese      { font-size: 0.7em; font-style: italic; }

/* Menu styles - MOVE THIS */
.menuSeparator
{
  border-bottom: 1px solid #d7d7d7;
  margin: 2px 0;
  height: 1px;
}

.menuText             { font-size: 0.85em; padding-left:4px; padding-right:4px; }
a.titleMenuText         { color:#2c3d45; text-decoration: none;}

.menuItem
{
    cursor: pointer;
    font-size: 0.85em;
    text-align: left;
}

.menuItem span
{
    box-sizing: border-box;
    padding: 3px 4px;
    width: 100%;
}

.lbrborder
{
   border-left: 1px solid #cacaca;
   border-bottom: 1px solid #cacaca;
   border-right: 1px solid #cacaca;
}

.fullborder
{
   border: 1px solid #cacaca;
}

div.subMenu
{
  cursor: default;
  padding: 4px;
  position:absolute;
  left:10px;
  top:10px;
  border: 1px solid #cacaca;
  border-radius:3px;
  background-color:white;
  text-align: center;
  /* Menu appears behind wrapped dojo controls such as xTreeGrid, hence increasing the z-index */
  z-index: 1;
}

table.subMenu
{
  border-collapse: collapse;
  border: 0;
  padding: 0;
}

table.subMenu td
{
  margin: 0;
  border: 0;
  padding: 0;
  text-align: left;
}

table.subMenu td.separator
{
  height: 1px;
  background-color: #AAAAAA;
  border: 2px solid #FFFFFF;
}

html
{
   height:100%;
}

body
{
   font-family: "Trebuchet MS", Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
   font-size: 0.8em;
   background: white;
   color: #2c3d45;
   border: 0px;
   margin: 0px;
   height:100%;
}

body a
{
   color: #039;
}

.truncate
{
   width:            1%;
   cursor:           pointer;
   text-decoration:  underline;
}

.mainTable
{
   width:      100%;
   height:     100%;
   min-height: 100%;
}

.nLogo
{
   /*z-index: 100;*/
}

.loginDialog
{
}

.loginDialog .loginTitle
{
   font-size:        1em;
   font-weight:      bold;
   color:            white;
   padding-top:      3px;
   padding-bottom:   3px;
   padding-left:     10px;
   padding-right:    10px;
}

.loginDialog .loginHelp
{
   font-size:        0.90em;
   text-decoration:  none;
   /*color:            #59828f;*/
   color:            #B8B8B8;
}

.loginDialog .loginContent
{
   border:           1px solid #cacaca;
   border-top-width: 0px;
   background-color: #EDEEEC;
   padding:          10px;
}

.loginDialog .loginFooter
{
   border:           1px solid #cacaca;
   border-top-width: 0px;
}

.loginDialog .copyrightText
{
   font-size:        0.85em;
   text-decoration:  none;
   color:            white;
   opacity:          0.8;
   text-align: left;
   float: left;
   margin: 0px 0px 20px 20px;
   /*  Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property.
   So this needs to be set explicitly */
   flex-shrink: 1;
}

.loginDialog .loginFieldControl, .language
{
    background-color: #26A9E0;
    border: 1px solid #67C3EA;
    color: white;
    font-size: 15px;
    border-radius: 1px;
    padding-left: 35px;
    width: 260px !important;
    height: 40px;
    box-sizing: border-box;
    outline: 0;
}

.loginDialog .loginFieldControl
{
    background-color: transparent;
}
.loginFieldControl:-webkit-autofill
{
    transition: all 5000s ease-in-out 0s;
}

.language option, .language option:checked {
  background: #fff/* #345665 Lighter grey shades are messing up IE*/;
  color: #2c3d45;/* #26A9E0 */;
}

.language::-ms-expand {
    display: none;
}

.language{
	padding: 0px 16px 1px 1px;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: url(/zenworks/images/ArrowDown_white.gif) no-repeat 97% center #26A9E0;
}

/* In chrome, the placeholder's default colour is dark and is hardly visible with the background being dark.
 * So, changing the placeholder colour for chrome, applicable only for the login page.
 * Also, to make it sync, added the pseudo-class for IE.
 * We are avaoiding this change in Mozilla, because their default colour is anyway better(similar but lighter) than this.
*/
.loginFieldControl::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #99ddff;
}

.loginFieldControl:-ms-input-placeholder
{ /*IE 19+*/
    color: #99ddff;
}

#loginButton
{
    background-color: #345665;
    border-color: #345665;
}

#loginButton, #loginButton:hover
{
    color: white;
    border-radius: 40px;
    height: 42px !important;
    width: 260px !important;
    font-size: 15px;
    font-weight: normal;
}

#loginButton:hover
{
    cursor: pointer;
}

/* We want to override the default loading icon for button. 
Other than adding a check in js, there seems to be no other way to do it so that it will work in all browsers.
So, this is a hack to do it for login. We will set the background image for the loading image and reduce the width of the img(default loading icon).
This seems to be working in all browsers.
 */
#loginButtonDiv .loadingButton
{
    left: 95px;
    margin-top: 14px;
    padding: 16px;
    width: 0px;
    background: url("/zenworks/images/ajax-loader-banner.gif") no-repeat scroll 0 0 transparent;
}

#loginButton:disabled{
	opacity: 0.5;
}

.loginDialog .loginZoneLabel
{
   text-decoration:  none;
   font-size:		14px;
   color:           white;
   opacity:         0.8;
}

.loginDialog .errorNotification {
	font-size: 1.2em;
    //opacity: 0.8;
    margin: 35px 4px 0px 10px;
}

.loginDialog .errorNotification  img{
	height:16px;
}

.loginDialog .errorNotification  td:first-child{
	padding-top: 8px;
}

.loginDialog .button_dn {
width:103;
height:27;
background-color:transparent;
background-image:url(/images/login.png);
color:white;
font:normal 12 Ariel;
border:none;
cursor:hand;
}

.verticalDivider
{
    border-left: 1px dotted gray;
    height: 15px;
}

#bannerContent
{
   margin: 0px;
   padding: 0px;
}

#bannerContent .tabOptionsCell
{
   padding-left:   20px;
   padding-right:  20px;
   padding-top:    8px;
}

#bannerContent .tabCell
{
   padding-left:   12px;
   padding-right:  12px;
   padding-top:    8px;
}

#bannerContent .bannerLink
{
    font-size:        0.85em;
    text-decoration:  none;
    color:            white;
    opacity:          0.9;
    cursor:           pointer;
}

#bannerContent .bannerLabel
{
    font-size:        0.85em;
    text-decoration:  none;
    color:            white;
    opacity:          0.9;
}

#bannerContent .bannerLabelWhite
{
   font-size:        0.85em;
   text-decoration:  none;
   color:            white;
}


#bannerContent .username
{
   font-size:     0.9em;
   font-weight:   bold;
   line-height:   22px;
   padding-left:  7px;
}


.navigationTD {
	vertical-align:top;
	width:189px;
	overflow:hidden;
	background-color:#fafafa;
}

#navigationMenu
{
   margin: 0px;
   padding: 0px;
}

#navigationMenu .tabTable
{
   height: 22px;
}

#navigationMenu .tabSelected
{
    background-color: #26a9e0;
    border-radius: 3px 0px 0px 3px;
    cursor: pointer;
}

#navigationMenu .cellIcon
{
    vertical-align:top;
	padding: 1px;
}

#navigationMenu .cellIcon img
{
    width: 16px;
    height: 16px;
}

#navigationMenu .cellText
{
    width:100%;
}

#navigationMenu .divText
{
    padding-left:5px;
    padding-top:0px;
    margin-top:1px;
}


#navigationMenu .tabCell, #navigationMenu .selectedTabCell, #navigationMenu .unselectedTabCell, #navigationMenu .tabNormal, #navigationMenu .tabSelected, #navigationMenu .tabHover
{
    padding-left:   0px;
    padding-top:    0px;
    padding-bottom:    0px;

    margin-left: 8px;

    border-collapse: separate;
    border-spacing: 4px;

    /*font-size: 1.1em;*/
    font-size: 0.97em;
}

#navigationMenu .navLinkText
{
    text-decoration: none; /* To avoid the hyperlink due to anchor tag */
    color: #2c3d45;
}

#navigationMenu .navLinkTextActive
{
    text-decoration: none;
    color: white;
}

#navigationMenu .tabNormal, #navigationMenu .tabBackground
{
   background-color:#fafafa;
   cursor:          default;
}

#navigationMenu .tabHover, #navigationMenu .tabNormal:hover
{
   background-color:#eeeeee;
   cursor:        pointer;
}

#navigationMenu .selectedTabCell
{
   cursor:        pointer;
}

#navigationMenu .unselectedTabCell
{
   cursor:          default;
}

#navigationMenu .tabMargin
{
   padding-left: 82px;
}

#navigationMenu .optionTable
{
   padding-right: 31px;
}

#navigationMenu .pageTitle
{
   font-size: 1.9em;
   font-weight: bold;
   color: white;
}

#navigationMenu .rowBuffer
{
   padding-top:3px;
}

#navigationMenu .optionButton
{
   padding-right: 4px;
}

#navigationMenu .searchBox
{
   padding-right: 2px;
}

#navigationMenu .searchText
{
   font-size: 0.8em;
}

#bannerUser
{
   position: absolute;
   left: 7px;
   top: 26px;

   font-size: 0.9em;
   font-weight: bold;
}

.dialogOutterDiv
{
    position:absolute;
    /*border: 3px solid red;*/
    left:-2000px;
    top:-2000px;
}

.pageRegion
{
}

.verticalResizer
{
    font-size: 1px;
    color: #cacaca;
    /*cursor: move;*/
    cursor: w-resize;
    background-color: #cacaca;
    /*background-color: ThreeDShadow;*/
    /*-moz-opacity: 0.5;*/
    /*opacity: 0.5;*/
    /*filter: Alpha(Opacity=50);*/
    margin: 0;
    width:1px;
}

.pageRegion .bannerRegion
{
   width:      100%;
   /*height:     1px;*/
}

.pageRegion .navigationRegion
{
   /*width:      190px;*/
   height:     100%;
   /*overflow:   hidden; Can't do this because of a defect in FireFox; Messes up our dialogs launched from Navigation */
}

.truncateNavigation
{
    /*width: 173px;*/
    overflow: hidden;
}

.pageRegion .navigationRegion .margin
{
   /*margin-top: 56px;*/
}

.pageRegion .navigationRegion .titleBar
{
    //border-bottom: 1px solid #C1C4BE;
    border-top: 1px solid #C1C4BE;
	margin-top: 5px;
}

.pageRegion .contentRegion
{
   /*width:      100%;*/
   height:     100%;
}

.pageRegion .contentRegion .margin
{
    
}

.pageRegion .navigationRegion #navTable
{
   border-bottom: 1px solid #C1C4BE;
}

.pageRegion .navigationRegion .navigationFiller
{
   background-color: #edeeec;
   border-right: 1px solid #cacaca;
}

.pageRegion .navigationRegion .snapshotContent
{
   padding-top:         2px;
   //padding-bottom:      8px;
   padding-left:        15px;
}

.pageRegion .navigationRegion .snapshotTitle
{
   color:         #2c3d45;
   font-size:     1em;
   padding-left:  7px;
   padding-right: 5px;
}

.pageRegion .navigationRegion .truncateNavigation a,
.pageRegion .navigationRegion .truncateNavigation a>span,
.pageRegion .navigationRegion .snapshotContent span, .pageRegion .navigationRegion .snapshotContent label{
	text-decoration: none;
	//color: #2c3d45;
	font-size: 0.97em;
	margin-left: 2px;
}


.pageRegion .navigationRegion .snapshotContent td{
	padding-top: 2px;
}


.pageRegion .navigationRegion .truncateNavigation table{
	border-spacing: 3px;
}

.pageRegion .contentRegion .portalColumn1
{
   padding-right: 15px;
   width: 70%;
}

.pageRegion .contentRegion .portalColumn2
{
   width: 30%;
}

.pageRegion .contentRegion .contentSectionTitleBar
{
    height: 26px;
    //background-color: #fafafa;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(250, 250, 250,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(250,250,250, 1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(250,250,250, 1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(250,250,250, 1)); /*  */
    border: 1px solid #cacaca;
    border-radius: 3px 3px 0px 0px;
}

.pageRegion .contentRegion .snapshotTitle
{
   color: black;
   padding-left: 10px;
}

.pageRegion .contentRegion .settingsCategoryTitle
{
   padding-bottom:   5px;
   color:            black;
   font-weight:      bold;
   letter-spacing:   0.1em;
   border-bottom:    2px solid #26A9E0;
   opacity:          0.6;
}

.pageRegion .contentRegion .settingsCategoryContent
{
   border-bottom: 1px solid #ebebeb;
}

.settingsCategoryContent .instructions
{
    padding-left: 8px;
}

.pageRegion .contentRegion .snapshotEdit
{
   font-size:        0.9em;
   font-weight:      bold;
   color:            black;
   text-decoration:  none;
   cursor:           pointer;
   margin-right:     7px;
}

.wizardHelp
{
   font-size:        0.9em;
   font-weight:      normal;
   color:            black;
   text-decoration:  none;
   cursor:           pointer;
}

.pageRegion .contentRegion .snapshotDip
{
   position:   relative;
   left:       -29px;
   top:        18px;
}

.pageRegion .contentRegion .snapshotContent
{
   border-left: 1px solid #cacaca;
   border-bottom: 1px solid #cacaca;
   border-right: 1px solid #cacaca;
}

.pageRegion .contentRegion .snapshotContentExtended
{
   border-left: 1px solid #cacaca;
   border-right: 1px solid #cacaca;
}

.pageRegion .contentRegion .listView
{
}

.pageRegion .contentRegion .listView .listTable
{
   border: 1px solid #cacaca;
   border-radius: 3px 3px 0px 0px;
}


.pageRegion .contentRegion .listView .listViewTitle
{
   font-weight:      bold;
   padding-left:     10px;
   height: 26px;
   //background-color: #fafafa;
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(250, 250, 250,1)); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(250,250,250, 1)); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(250,250,250, 1)); /* For Firefox 3.6 to 15 */
   background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(250,250,250, 1)); /*  */
}

.pageRegion .contentRegion .listView .menuBar
{
   background-color:#F5F5F5;
}

.indentMenuBar
{
   background-color:#F5F5F5;
}

.menuBarColor
{
   background-color:#fafafa;
   border-top: 1px solid white;
   box-shadow: 0px 0px 1px #6A7C87;
}

/* If required, consumers can use along with dojo grids if menu bar styling is required.
    The menuBarColor does not have a border-bottom.
*/
.dojoMenuBarColor{
    background-color: #fafafa;
    border-top: 1px solid white;
    box-shadow: 0px 0px 1px #6A7C87;
    border-bottom: 1px solid #cacaca;
}

.pageRegion .contentRegion .listViewNoPad .menuBar
{
   padding-left:0px;
}

.pageRegion .snapshotContent .menuBar
{
   background-color:#F5F5F5;
}

.datePickerBar
{
   background-color:#DEE0DD;
   padding-left:29px;
}

.pageRegion .contentRegion .listView .searchControls
{
   padding-left:  10px;
   padding-right: 0px;
}

.pageRegion .contentRegion .listView .searchControlsHidden
{
   padding-left:  0px;
   padding-right: 0px;
}

.pageRegion .contentRegion .listViewNoPad .searchControls
{
   padding-left:  10px;
   padding-right: 0px;
}

.pageRegion .contentRegion .listViewNoPad .searchControlsHidden
{
   padding-left:  0px;
   padding-right: 0px;
}

.dataGridTable
{
border: 0;
border-spacing: 0;
margin: 0;
padding: 0;
/*border: 1px solid #babdb6; This has some issues because of some other change done for border in a grid.*/
/*width: 100%; Causes issue in IE; See "Scrollbar Issues" in javadoc of DataGrid.java*/
 }

.dataGridTable .header
{
   padding: 0px;
   height: 20px;
}

.dataGridTable .headerLink
{
   text-decoration:  none;
   color:            #2C3D45;
   vertical-align:   middle;
}

.dataGridTable .headerImage
{
   vertical-align:   middle;
}

.dataGridTable .emptyGridMessage
{
  font-style: italic;
  vertical-align: middle;
}

.dataGridTable td
{
    vertical-align:   middle;
    padding: 3px;
}

.dataGridTable th
{
   /*color:            black;*/
   font-size:        0.85em;
   font-weight:      bold;
   font-family:      "Trebuchet MS", Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
   padding:          3px 3px 2px;
   height:           20px;
   text-align:       left;
   vertical-align:   middle;
   background-color: #EDEEEC;
   border-bottom:    1px solid #cacaca;
   border-top:       1px solid #cacaca;
}

.dataGridTable .totals td
{
   color:            black;
   font-size:        0.85em;
   font-family:      "Trebuchet MS", Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
   padding:          3px 3px 2px;
   height:           20px;
   text-align:       left;
   vertical-align:   middle;
   background-color: #EDEEEC;
   border-top:       1px solid #cacaca;
}

.dataGridTable th.sortableHover
{
   background-color: #d8dad6;
   cursor:           pointer;
}

.dataGridTable th.sortableNoHover
{
   background-color: #EDEEEC;
   cursor:           default;
 }

.dataGridTable th.border, .dataGridTable td.border, .dataGridTable td.footerBorder
{
   border-right:  1px solid #939590;
}

.dataGridTable td.footerBorder
{
   padding: 0 2px 0;
}

.dataGridTable tr.shadedRow
{
   background-color: #f9f9f9;
}

.dataGridTable td.footerLabel
{
   padding:          0 0 0 5px;
   font-size:        0.85em;
   width:            100%;
   height:           19px;
}

.dataGridTable td.footerDD{
   padding:          0 3px 0px 5px;
   font-size:        0.85em;
   width:            100%;
   height:           19px;
   //background-color: #edeeec;
}

.dataGridTable td.footerDD:hover{
	background-color: #edeeec;
}

.dataGridTable td.footerCell
{
   padding:    0px;
   margin:     0px;
   border-top: 1px solid #cacaca;

}

.dataGridTable td.footerMessage
{
    background-color: #f3f3f3;
    border-bottom: 1px solid #939393;
    font-size:        0.85em;
}

.auditTable th, .auditTable td
{
   padding:    0 10px 0 10px;
   text-align:       left;
   vertical-align:   middle;
}

.listViewBorder
{
   /*border:  1px solid #babdb6;*/
   padding: 0px;
   border-spacing: 0;
}

.objectListEditorBorder
{
   border:  1px solid #cacaca;
   padding: 0px;
   border-spacing: 0;
}

td.title
{
   color: white;
   font-weight: bold;
   line-height: 1.4em;
   background-color: #6b8899;
   text-align: left;
   text-indent: 0.5em;
   letter-spacing: 0.1em;
   vertical-align: middle;
}

.wizardTitle
{
   color: black;
   font-weight: bold;
}

.exampleText
{
   height: 30px;
   vertical-align: top;
   font-size: 0.8em;
   color: #6B6C69;
}

#searchControl .title
{
   font-weight:      bold;
   color:            black;
   padding-bottom:   2px;
   padding-left:     2px;
}

#searchControl .searchTable
{
   border:              1px solid #cacaca;
   background-color:    #f9f9f9;
}

.tabbedHeader
{
	padding-bottom: 5px;
}

.tabbedHeader .objectName
{
   color: black;
   font-weight: bold;
}

.tabbedHeader .objectTab
{
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 3px;
   font-weight: normal;
}

.tabbedHeader .objectTabSelected
{
   color: #2c3d45;
   font-weight: bold;
   padding-top: 3px;
}

.tabbedHeader .objectTabSelected >a{
	border-bottom: 3px solid #F17E12;
	padding-bottom: 5px;
}

.objectTabHover>a:after {
	content: '';
	border-bottom: 3px solid #F17E12;
	position:relative;
	top:4px;
    line-height: 31px;
	display: block;
	height: 1px;
	width: 0px;
	//right:8px;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
	z-index:3;
}

.objectTabHover>a:hover:after{
	width: 100%

}

.tabbedHeader .objectTabTitle
{
   text-decoration:  none;
   color:            #2c3d45;
   width:            100%;
   letter-spacing: 0.05em;
   padding-top: 3px;
}

.tabbedHeader .belowObjectTab
{
   border-bottom: 2px solid #cacaca;
   margin-top: -1px;
   z-index: -1;
   width: inherit;
   position: absolute;
   width: 100%;
}

.belowTab
{
    height: 1px;
    border-bottom: 1px solid #cacaca;
    box-shadow: 0px 1px 1px #E8EAE9;
	position: relative;
	top: -8px;
}

.subtabHeader
{
	padding: 5px 0px;
}

.subtabHeader .objectName
{
   color: white;
   font-weight: bold;
}

.subtabHeader .objectTabTitle
{
   text-decoration:  none;
   color:            #2c3d45;
   width:            100%;
   letter-spacing: 0.05em;
   /* opacity: 0.8; */
}

.subtabHeader .objectTab
{
   padding: 3px 12px 3px 12px;
   float: left;
   font-weight: normal;
}

.subtabHeader .objectTabSelected
{
   color: #2c3d45;
   font-weight: bold;
   border-right: 1px solid white;
   //background-color: white;
   padding: 3px 10px 3px 10px;
   float: left;
}

.subtabHeader .objectTabSelected >a{
	border-bottom: 3px solid #F17E12;
	padding-bottom: 5px;
	position: relative;
	z-index: 3;
}

.customTabHeader
{
    width : 100%;
    border-bottom: 1px solid #E6E6E6;
}

.customTabHeader .objectName
{
    color: white;
    font-weight: bold;
}

.customTabHeader .objectTab
{
    color: #8c8c8c;
    font-weight: bold;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: none;
    background-color: #FFFFFF;
    padding-left: 5px;
    padding-right: 5px;
}

.customTabHeader .objectTabSelected
{
    color: #F5F5F5;
    font-weight: bold;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 3px solid #F5F5F5;
    background-color: #FFFFFF;
    padding-left: 5px;
    padding-right: 5px;
}

.dividingLine
{
   padding-bottom:   2px;
   color:            black;
   font-weight:      bold;
   font-size:        1em;
   letter-spacing:   0.1em;
   margin-top:       0.4em;
   margin-bottom:    0.4em;
   border-bottom:    2px solid #26A9E0;
   opacity:          0.6;
}

.grayDividingLine
{
   padding-bottom:   2px;
   color:            black;
   font-weight:      bold;
   font-size:        1em;
   letter-spacing:   0.1em;
   margin-top:       0.4em;
   margin-bottom:    0.4em;
   border-bottom:    2px solid #26A9E0;
}

.shade
{
   background-color: #f9f9f9;
}

.stringSelectorTitle
{
   color:           black;
   font-weight:     bold;
   text-decoration: none;
}

.stringSelectorBar
{
}

.borderedBox
{
   border:        1px solid #cacaca;
   padding:       2px;
}

h3.news{
        margin-bottom:0;
        margin-top:0;
        color: gray;
}

hr.news{
        margin-bottom:0;
        margin-top:5px;
}

.textTitle{
	font-size:     0.97em;
   color:         black;
   text-decoration: none;
}
.textTitleBig{
	font-size:     1.0em;
   font-weight:   bold;
   color:         black;
   text-decoration: none;
}


.roundedBox {position:relative; padding:5px;}

.corner {position:absolute; width:5px; height:5px;}

#totalDiv .topLeft {top:0; left:0; background-position:-1px -1px;}
#totalDiv .topRight {top:0; right:0; background-position:-7px -1px;}
#totalDiv .bottomLeft {bottom:0; left:0; background-position:-1px -7px;}
#totalDiv .bottomRight {bottom:0; right:0; background-position:-7px -7px;}
#totalDiv {background-color:#cccb8a; min-height:20px;}

#criticalDiv .topLeft {top:0; left:0; background-position:-13px -1px;}
#criticalDiv .topRight {top:0; right:0; background-position:-19px -1px;}
#criticalDiv .bottomLeft {bottom:0; left:0; background-position:-13px -7px;}
#criticalDiv .bottomRight {bottom:0; right:0; background-position:-19px -7px;}
#criticalDiv {background-color:#ff000e; min-height:20px;}

#warningDiv .topLeft {top:0; left:0; background-position:-25px -1px;}
#warningDiv .topRight {top:0; right:0; background-position:-31px -1px;}
#warningDiv .bottomLeft {bottom:0; left:0; background-position:-25px -7px;}
#warningDiv .bottomRight {bottom:0; right:0; background-position:-31px -7px;}
#warningDiv {background-color:#ffcf00; min-height:20px;}

#infoDiv .topLeft {top:0; left:0; background-position:-37px -1px;}
#infoDiv .topRight {top:0; right:0; background-position:-43px -1px;}
#infoDiv .bottomLeft {bottom:0; left:0; background-position:-37px -7px;}
#infoDiv .bottomRight {bottom:0; right:0; background-position:-43px -7px;}
#infoDiv {background-color:#0088cb; min-height:20px;}

#totalDiv .corner, #criticalDiv .corner, #warningDiv .corner, #infoDiv .corner {background-image:url(../images/dashboard-bkg.png);}
#count {color:#FFF; font-size:1.6ems; font-weight:bold; font-family:Arial, Helvetica, sans-serif; padding:4px 8px; text-align:center;}

ul.listSquare {list-style-type:square;background-color:#f4f4f4;}


.insertTd
{
	background: #9E9;
	color:#9E9;
	border: solid #DDD 1px;
}

.modTd
{
	background: #FD8;
	color:#FD8;
	border: solid #DDD 1px;
}

.deleteTd
{
	background: #E99;
	color:#E99;
	border: solid #DDD 1px;
}

table .attrName
{
    padding-left: 10px;
    padding-right: 6px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.infoMessageBox
{
    background-color: #e8eefb;
    border: 1px solid #85a1d7;
    border-radius: 5px;
    padding: 10px;
    line-height: 20px;
}

.warningMessageBox
{
    background-color: #fefce9;
    border: 1px solid #d2af0a;
    border-radius: 5px;
    padding: 10px;
    line-height: 20px;
}

.errorMessageBox
{
    background-color: #fdfdcb;
    border: 1px solid red;
    border-radius: 5px;
    padding: 10px;
    line-height: 20px;
}


.imageButton
{
   float: left;
   border: 1px solid transparent;
}

.imageButton:hover
{
    float: left;
    border: 1px solid #cacaca;
    border-radius: 3px;
    background-color: #ebebeb;
}

.objectPath{
    margin-top: 2px;
    background-color: #fafafa;
    padding-top: 5px;
    padding-bottom: 5px;
}

.customSnapshotTitleContainer{
	border: 1px solid #Cacaca;
    border-radius: 3px;
}

.customSnapshotTitleWrapper{
	border: 1px solid #Cacaca;
    border-radius: 3px;
	border-bottom: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.customSnapshotTitle{
    font-weight: bold;
    padding-left: 10px;
    height: 26px;
	line-height: 26px; /* For the text alignment. within the title. If height is changed, change line-height to the same value*/
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(250, 250, 250,1));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(250,250,250, 1));
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(250,250,250, 1));
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(250,250,250, 1));
}

/* The customBorder and the customBorderBottom are used in combination to the above snapshot css classes */
.customBorder{
	border: 1px solid #cacaca;
}

.customBorderBottom{
	border-bottom: 1px solid #cacaca;
}

/* Bug 1091919 - Dashboard Loading take time
 *  We have added a loading icon when we load the application in ZCC.
 *  Say, for patch dashboard, we have <patch><img></patch> which gets rendered from java.
 *  There is a class with the same name in dashboard.scss which is used by ZCC2 to style the icon.
 *  If the below is modified, update the one in dashboard.scss too. Since else the loading icons will not be aligned.
*/
.dashboard-loader{
    left: 50%;
    top: 50%;
    position: absolute;
}

.video-link{
    display: inline-block;
    background-color: #fafafa;
    height: 25px;
    padding: 0px 10px;
    line-height: 25px;
    border-radius: 20px;
    border: 1px solid #26a9e0;
    cursor: pointer;
    width: max-content;
    white-space: nowrap;
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
}
.loading-bar {
    display: inline-block;
    width: 5px;
    height: 30px;
    border-radius: 5px;
    animation: loading 1s ease-in-out infinite;
    -ms-animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
    background-color: #26a9e0;
    animation-delay: 0;
}
.loading-bar:nth-child(2) {
    background-color: #2fd6c3;
    animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
    background-color: #26a9e0;
    animation-delay: .18s;
}
.loading-bar:nth-child(4) {
    background-color: #2fd6c3;
    animation-delay: .27s;
}

@keyframes loading {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1, 1.8);
    }
    40% {
        transform: scale(1);
    }
}