/* reusable styles for for buttons/controls/form elements */

@import url("harmonyButtons.css");

/**
Nice buttons, without needing jQuery UI buttons.  To use, just add .Vibrant
(and if you want, one of the subclasses too) to your buttons.
Still plays nicely even if your buttons are jQuery UI'ed
Be careful mixing different colors; it is recommended that you only have
one special button in a set of 2+ buttons; make the rest plain.
**/

/* Button-style url fields on forms */
.Vibrant /* Common styles for all Vibrant buttons */
{
    cursor: pointer;
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
    color: #555;
    padding: 0.5em 1em .5em .75em;
    margin: 0.5em;
    text-decoration: none;
}
/*For buttons on reports make them a little smaller to fit in report cell */
body.UXV2 .searchResults .linkButton,
body.UXV2 .searchResults .Vibrant {
    padding: .25em 1em;
    margin: 0;
}

body.UXV2 .searchResults .Vibrant {
    text-decoration: none;
}
body.UXV2 .linkButton {
  border: 1px solid #ccc;
  background: #f5f5f5;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
  background-image: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
  background-image: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
  background-image: linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
  cursor: pointer;
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
    padding: 0.5em 1em .5em .75em;
    margin: 0.5em;
    text-decoration: none;
}
body.UXV2 .linkButton >nobr > a {
    color: rgb(85, 85, 85);
    text-decoration: none;
    
}
body.UXV2 .linkButton > nobr > a:hover {
    color: #365ebf;
}
body.IE7 .Vibrant,
body.IE8 .Vibrant {
    padding: 0.4em 0.9em;
}
.Vibrant.ui-button:not(#newVariableFirstTime) {
    padding: 0.25em;
}

/* Vibrant buttons that are a bit taller than default */
/* Taken out for Palm release. Clean up classnames as a part of next release.
.Vibrant.Tall {
    padding: 0.75em 1em;
}
body.IE .Vibrant.Tall {
    padding: 0.75em 1em;
}
*/
.Vibrant.FullWidth {
    display: block;
    margin-left: 0;
    margin-right: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}
.Vibrant.LeftAlign {
    text-align: left;
}

/* remove the padding in IE; ugh box model */
body.IE .Vibrant.ui-button {
    padding: 0;
}
/* A standard button.  Good in sets where all options are equal (e.g. "Save" vs "Save & Quit") */
.Vibrant,
.Vibrant.ui-button {
    background: #E9E9E9;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #E9E9E9 0%, #E9E9E9 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E9E9E9), color-stop(100%,#E9E9E9));
    background-image: -webkit-linear-gradient(top, #E9E9E9 0%,#E9E9E9 100%);
    background-image: -o-linear-gradient(top, #E9E9E9 0%,#E9E9E9 100%);
    background-image: -ms-linear-gradient(top, #E9E9E9 0%,#E9E9E9 100%);
    background-image: linear-gradient(top, #E9E9E9 0%,#E9E9E9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9E9E9', endColorstr='#E9E9E9',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
    border: 1px solid #E9E9E9;
    color: #333;
}
.Vibrant:not(.Disabled):hover,
.Vibrant:not(.Disabled):focus {
    background: #F3F3F3;
    border: 1px solid #F3F3F3;
    color: #333;
}

.Vibrant.Confirm.Primary.ui-button:not(.Disabled):hover,
.Vibrant.Confirm.Primary.ui-button:not(.Disabled):focus {
    background: #36CEFF;
    border: 1px solid #36CEFF;
}

/* A button for drawing focus to the main action a user can take (e.g. "Save", as contrasted with "Cancel") */
.Vibrant.Primary {
    color: #FFFFFF !important;
    background: #02B8F3;
    background-image: -moz-linear-gradient(top, #02B8F3 0%, #02B8F3 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02B8F3), color-stop(100%,#02B8F3));
    background-image: -webkit-linear-gradient(top, #02B8F3 0%, #02B8F3 100%);
    background-image: -o-linear-gradient(top, #02B8F3 0%, #02B8F3 100%);
    background-image: -ms-linear-gradient(top, #02B8F3 0%, #02B8F3 100%);
    background-image: linear-gradient(top, #02B8F3 0%, #02B8F3 100%);;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02B8F3', endColorstr='#02B8F3',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
    border: 1px solid #02B8F3;
}
.Vibrant.Primary:not(.Disabled):hover,
.Vibrant.Primary:not(.Disabled):focus {
    background: #36CEFF;
    border: 1px solid #36CEFF;
    color: #FFFFFF;
}

.Vibrant.Secondary {
    color: #02B8F3 !important;
    background: #FFFFFF;
    background-image: -moz-linear-gradient(top, # FFFFFF 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF));
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);
    background-image: linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
    border: 1px solid #02B8F3;
}
.Vibrant.Secondary:not(.Disabled):hover,
.Vibrant.Secondary:not(.Disabled):focus {
    background: rgba(2, 184, 243, 0.10);
    border: 1px solid #36CEFF;
    color: #36CEFF !important;
}

/* A button indicating something happened correctly; also can be used to denote creation or addition of something */
.Vibrant.Success {
    color: white !important;
    background: #02B8F3;
    background-image: -moz-linear-gradient(top, # 02B8F30%, #02B8F30 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02B8F3), color-stop(100%,#02B8F30));
    background-image: -webkit-linear-gradient(top, #02B8F3 0%, #02B8F30 100%);
    background-image: -o-linear-gradient(top, #02B8F3 0%, #02B8F30 100%);
    background-image: -ms-linear-gradient(top, #02B8F3 0%, #02B8F30 100%);
    background-image: linear-gradient(top, #02B8F3 0%, #02B8F30 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02B8F3', endColorstr='#02B8F30',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
    border: 1px solid #02B8F3;
    border-bottom-color: #02B8F3;
    font-weight: normal;
}
.Vibrant.Success:not(.Disabled):hover,
.Vibrant.Success:not(.Disabled):focus {
    background: #36CEFF;
    border: 1px solid #36CEFF;
}

.Vibrant.Success.Disabled {
    color: white !important;
    background: #02B8F3;
    background-image: -moz-linear-gradient(top, # 02B8F30%, #02B8F30 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02B8F3), color-stop(100%,#02B8F30));
    background-image: -webkit-linear-gradient(top, #02B8F3 0%, #02B8F30 100%);
    background-image: -o-linear-gradient(top, #02B8F3 0%, #02B8F30 100%);
    background-image: -ms-linear-gradient(top, #02B8F3 0%, #02B8F30 100%);
    background-image: linear-gradient(top, #02B8F3 0%, #02B8F30 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02B8F3', endColorstr='#02B8F30',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
    border: 1px solid #02B8F3;
    opacity: 0.4;
}

.Vibrant.Primary.Disabled {
    color: #FFF!important;
    background: #b2d9f4;
    border: 1px solid #b2ceef;
}


/* A button indicating that it will do something potentially hazardous or un-undoable (like "Delete"); users should proceed with caution */
.Vibrant.Danger {
    color: white !important;
    background: #F33C02;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #F33C02 0%, #F33C02 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F33C02), color-stop(100%,#F33C02));
    background-image: -webkit-linear-gradient(top, #F33C02 0%,#F33C02 100%);
    background-image: -o-linear-gradient(top, #F33C02 0%,#F33C02 100%);
    background-image: -ms-linear-gradient(top, #F33C02 0%,#F33C02 100%);
    background-image: linear-gradient(top, #F33C02 0%,#F33C02 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F33C02', endColorstr='#F33C02',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
    border: 1px solid #F33C02;
}
.Vibrant.Danger:hover,
.Vibrant.Danger:focus {
    color: white !important;
    background: #FF6549;
    border: 1px solid #FF6549;
}


/* A white-as-fresh-snow button.  Good for being unobtrusive against light backgrounds.  Use sparingly */
.Vibrant.Snowy,
.Vibrant.Snowy.ui-button {
    color: #6ae;
    background: #f7f7f8;
    background-repeat: repeat-x;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2Y3ZjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background-image: -moz-linear-gradient(top, #ffffff 0%, #f7f7f8 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f7f8));
    background-image: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f8 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%,#f7f7f8 100%);
    background-image: -ms-linear-gradient(top, #ffffff 0%,#f7f7f8 100%);
    background-image: linear-gradient(top, #ffffff 0%,#f7f7f8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f8',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
    border: 1px solid #ddd;
    border-bottom-color: #ccc;
}
.Vibrant.Snowy:not(.Disabled):hover,
.Vibrant.Snowy:not(.Disabled):focus {
    border-color: #ccc;
    color: #48c;
    background: #d1e1fa;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iI2Y3ZjdmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMWUxZmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f8 84%, #d1e1fa 95%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(84%,#f7f7f8), color-stop(95%,#d1e1fa));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f8 84%,#d1e1fa 95%);
    background: -o-linear-gradient(top,  #ffffff 0%,#f7f7f8 84%,#d1e1fa 95%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#f7f7f8 84%,#d1e1fa 95%);
    background: linear-gradient(top,  #ffffff 0%,#f7f7f8 84%,#d1e1fa 95%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1e1fa',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
}


/* A button for putting inside of an .AlertBanner */
.Vibrant.Alert,
.Vibrant.Alert.ui-button {
    color: #FFFFFF !important;
    background: #FFA00d;
    background-image: -moz-linear-gradient(top, #FFA00d 0%, #FFA00d 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFA00d), color-stop(100%,#FFA00d));
    background-image: -webkit-linear-gradient(top, #FFA00d 0%,#FFA00d 100%);
    background-image: -o-linear-gradient(top, #FFA00d 0%,#FFA00d 100%);
    background-image: -ms-linear-gradient(top, #FFA00d 0%,#FFA00d 100%);
    background-image: linear-gradient(top, #FFA00d 0%,#FFA00d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFA00d', endColorstr='#FFA00d',GradientType=0 ) 
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
    border: 1px solid #FFA00d;
}
.Vibrant.Alert:hover,
.Vibrant.Alert:focus {
    color: #fff !important;
    background: #FFB749;
    background-image: -moz-linear-gradient(top, #FFB749 0%, #FFB749 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFB749), color-stop(100%,#FFB749));
    background-image: -webkit-linear-gradient(top, #FFB749 0%,#FFB749 100%);
    background-image: -o-linear-gradient(top, #FFB749 0%,#FFB749 100%);
    background-image: -ms-linear-gradient(top, #FFB749 0%,#FFB749 100%);
    background-image: linear-gradient(top, #FFB749 0%,#FFB749 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFB749', endColorstr='#FFB749',GradientType=0 )
            progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* Opacity filter prevents gradient filter from maxing button text transparent*/
    border-color: #FFB749;
}


/* Hover effect for buttons */
.Vibrant:not(.Disabled):hover,
.Vibrant:not(.Disabled):focus {
    background-position: 0 -15px;
    text-decoration: none;
}

body.IE .Vibrant:not(.Disabled):hover,
body.IE .Vibrant:not(.Disabled):focus {
    filter: none;
}

.Vibrant[disabled],
.Vibrant[disabled]:hover {
    cursor: default;
    opacity: 0.4;
    filter: none;
    background: #E9E9E9;
    border-color: #E9E9E9;
    color: #333;
}

.Vibrant.Primary[disabled],
.Vibrant.Primary[disabled]:hover {
    background: #02B8F3;
    border-color: #02B8F3;
    color: #fff;
    opacity: 0.4;
}


.Vibrant.Success[disabled],
.Vibrant.Success[disabled]:hover {
    background: #02B8F3;
    border-color: #02B8F3;
    color: #fff;
    opacity: 0.4;
}


.Vibrant.Danger[disabled],
.Vibrant.Danger[disabled]:hover {
    background: #c88;
    border-color: #c88;
    color: #fff;
}



#changedCustomizeButton a{
    color: inherit;
}
/** Split Button styles for widget defined in widget.js **/
.qb-splitbutton-btn 
{
    text-align: center;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.qb-splitbutton-menubtn {
	margin-left: 0 !important;
	-moz-border-radius-topleft: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-left-width: 0 !important;
}

.Menu.qb-splitbutton-menu li a {
    color: #333;
}
.Menu.qb-splitbutton-menu li a:hover {
    color: black;
}

.ToggleSectionIcon {
cursor: pointer;
}

/* Expand/collapse styles for sections, used in qbPersistentUserPrefs widget */
.qbPersist.ToggleSectionIcon, .lb .ToggleSectionIcon, .icr .ToggleSectionIcon {
    width:18px;
    height:18px;
    display:block;
    position: relative;
    top: 1.2em;
    margin-top: -8px;
    left: .909em;
}
.qbPersist.ToggleSectionIcon.SectionExpandedIcon, .icr .ToggleSectionIcon.SectionExpandedIcon, .lb .ToggleSectionIcon.SectionExpandedIcon {
    -webkit-transform: rotate(90deg);  
    -moz-transform: rotate(90deg);  
    -o-transform: rotate(90deg);  
    transform: rotate(90deg);
    top: 0em;
}

body.IE9 .ToggleSectionIcon.SectionExpandedIcon,
body.IE8 .ToggleSectionIcon.SectionExpandedIcon,
body.IE7 .ToggleSectionIcon.SectionExpandedIcon
{
    background-image: url('images/icons/caret_form_down.png');
}
.qbPersist.ToggleSectionIcon, .icr .ToggleSectionIcon, .lb .ToggleSectionIcon {
    background-image:url('images/icons/caret_form.png');
    webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);  
    -ms-transform: rotate(0deg);  
    -o-transform: rotate(0deg);  
    transform: rotate(0deg);
}


/* open/close panel icon */
.TogglesHorizontal {
    width:16px;
    height:16px;
    display: inline-block;
    position: relative;
    background-repeat: no-repeat;
    background-image:url('images/icons/icons_collapse_UD.png');
    margin-top :.25em;
    vertical-align: top;
}

.HorizontalOpenIcon {
    background-position: 0px 0;
}

.HorizontalCloseIcon {
    background-position: -16px 0;
    width: 16px;
}

/* Styling for forms with expand collpase sections */
body.UXV2 .WithToggleSections .UserInput {
    padding: 0.4em 0.5em;
}

.WithToggleSections .ToggleSection {
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 10px;
    min-height: 20px;
}

.WithToggleSections .ToggleSection + section {
    padding-bottom: 1em;
}

.WithToggleSections .ToggleSection#appNameDesc {
    margin-top: 0;
}

.WithToggleSections .ToggleSectionIcon {
    display: inline-block;
    top: 0; 
    left: 0;
    margin-right: 5px;
    vertical-align: middle;
}

.WithToggleSections .ToggleSection .Divider {
    height: 1px;
    background-image: url("images/section_divider_A.png");
    background-repeat: repeat-x;
    margin-top: 10px;
}
.WithToggleSections .ToggleSection.expanded .Divider {
    background-image: url("images/section_divider_A.png");
}

.WithToggleSections div.SettingLine{
    margin-bottom: 1em;
    clear: both;
}

.WithToggleSections .SettingLine > .Left {
    width: 150px;
}
.WithToggleSections .SettingLine{
    margin-left: 32px;
}

.WithToggleSections .qbPersist.ToggleSectionIcon {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    margin-right: 4px;
}
body.IE8 .WithToggleSections .qbPersist.ToggleSectionIcon {
    margin: 0;
}
body.UXV2 .WithToggleSections .sectionTitle {
    cursor: pointer;
    vertical-align: middle;
    font-size: 16px;
    font-family: 'Gibson-SemiBold', Helvetica, Arial, Sans-Serif;
    letter-spacing: 0;
    color: #333;
}

/*These style were used in ReminderEdit.html, NotificationEdit.html & PreiodicReportEdit.html*/

.notifications .WithToggleSections .ToggleSection 
{
    margin-bottom: 20px;
}
.notifications .WithToggleSections .SettingLine 
{
    margin-bottom: 20px !important; /*override setting from widgets.css */
}
.notifications .SettingLine > .content 
{
    margin-left: 150px;
}
    .notifications .SettingLine > .content > div {
        vertical-align: middle;
        padding-bottom: 7px;
    }

.notifications .WithToggleSections section.ownerSection
{
    margin-top: 30px;
    text-align: center;
}
    .notifications .WithToggleSections section.ownerSection div 
    {
        display: inline-block;
    }
    .notifications .WithToggleSections section.ownerSection > div 
    {
        background-color: #f4f4f4;
        padding: 20px;
    }
.notifications .combobox-input {
    min-width: 25em;
    width: 25em;
}

.notifications .multiselect-container .FS-Note {display: none;}
.notifications .multiselect-container {visibility: hidden; display: inline;}

/* Announcement styling */
.Announcement 
{
    border-radius: 0.235em;
    margin: 1em 1em 1em 0;
    padding: 0;
    background-color: #FFEBB0;
	border: 2px solid #FEC82a;
	display: none;
}
.Announcement .TopBar
{
    display: block; 
    margin: 0;
    padding: 0.5em;
    border-bottom: 1px solid #FEC82a;
    background: #FFEBB0;
    font-size: 1.2em;
}
.Announcement a.Corner 
{
    float: right;
    margin: 0.5em;
    text-decoration: none;
    color: #9C770E;
}
.Announcement ul 
{
    margin-top: 1em;
    margin-bottom: 1em;
}
.Announcement li
{
    line-height: 1.75em;
    margin-left: 1.5em;
}
.Announcement p
{
    padding:1.563em;
    margin: 0;
	color: #505050;    
}

.Announcement a
{
    text-decoration: none;
}

.Announcement.InTableProps
{
    width: auto;
    margin: 1em;
    display: inline-block;
}
.Announcement.InTableProps div
{
    margin-right: 3em;
}
.Announcement_noHide
{
    display:block;
    width:700px;
    line-height:140%;
}
/* announcement w/ 32px icon background 
all you need to do is set your own background-image*/
.Announcement.WithIcon
{
    padding-left: 49px;
    background-position: 0.75em 0.7em;
    background-repeat: no-repeat;
}

.Announcement.Centered
{
    margin-right: auto; 
    margin-left: auto;
    margin-bottom: 2em;    
}


/* Add the .AlertBanner class to an element containing alerts to 
have it styled in the manner of the V2 alerts spec

To get good looking buttons inside your .AlertBanner,
use a <button class="Vibrant Alert">Alert button</button>
*/
.ui-dialog.AlertBanner,
.AlertBanner
{
    position: relative;
    background: #FFCC0F;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    /* Margin, padding, font */
    margin: 1em;
    padding:1.5em;
    font-weight: normal;
    color: #505050;
}

/*A lighter, less obtrusive banner used for tips and low-importance info for users (see wiki spec) */
.AlertBanner.Helpful {
    background: #fff8d4;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjhkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZGVjYzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #fff8d4 0%, #fdecc1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff8d4), color-stop(100%,#fdecc1));
    background: -webkit-linear-gradient(top,  #fff8d4 0%,#fdecc1 100%);
    background: -o-linear-gradient(top,  #fff8d4 0%,#fdecc1 100%);
    background: -ms-linear-gradient(top,  #fff8d4 0%,#fdecc1 100%);
    background: linear-gradient(to bottom,  #fff8d4 0%,#fdecc1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff8d4', endColorstr='#fdecc1',GradientType=0 );
    border-width: 1px;
    font-weight: normal;
}

.AlertBanner.FullWidth {
    margin-left: 0;
    margin-right: 0;
}

/* Alerts that appear as a modal popup (such as the Saving... overlay) */
.ui-dialog.AlertBanner {
    font-size:1.5em;
    font-weight:normal;
}

span.BusyIcon {
    background-image:url('./images/icons/icon_saving.png');
    height:54px;
    width:60px;
    display:inline-block;
    vertical-align:middle;
    background-repeat:no-repeat;
}

.ui-widget-overlay {
    background-image:none;
    background-color:White;
    opacity: .85;
}

.ui-widget-overlay.darkOverlay {
	background:	#555;
	background: -moz-radial-gradient(circle, rgba(150, 150, 150, 0.9) 20%, #555555 45%, #000000);
	background: -webkit-radial-gradient(rgba(150, 150, 150, .9) 20%, #555 45%, #000);
    opacity: .70;
    filter:Alpha(Opacity=70); 
}

.ui-dialog.no-titlebar .ui-dialog-content {
    padding-top:1em;
}

/*
For an alert banner that has a nice icon on the left side, use markup like this (using one of the icon types here):

<div class="AlertBanner Error">
    <div><span class="AlertIcon"></span></div>
    <div>This is the text of the alert</div>
</div>

In addition, the icon changes when you hover over the primary action in the alert.  There's a general mechanism
for this already set up in widgets.js.  If you want the icon to change state when hovering over a particular
<a> tag inside your AlertBanner, simply give that <a> tag the AlertAction class; the rest is handled for you.

*/

.AlertBanner.SampleData, /* This app contains sample data */
.AlertBanner.Error,      /* Exclamation point in a triangle; for errors or warnings */
.AlertBanner.Question,   /* Question mark; prompting the user if they are sure/ need help */
.AlertBanner.Info,       /* "i" in a diamond; useful for pointing out things */
.AlertBanner.ProTip,     /* Lightbulb.  For pointing out help / useful information */
.AlertBanner.DragDrop {  /* Drag/drop symbol; for help on places where things can be dragged and/or dropped */
    padding: 0;
}

.AlertBanner.SampleData > *,
.AlertBanner.Error      > *,
.AlertBanner.Question   > *,
.AlertBanner.Info       > *,
.AlertBanner.ProTip     > *,
.AlertBanner.DragDrop   > * {
    display: table-cell;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.AlertBanner.SampleData .AlertIcon,
.AlertBanner.Error      .AlertIcon,
.AlertBanner.Question   .AlertIcon,
.AlertBanner.Info       .AlertIcon,
.AlertBanner.ProTip     .AlertIcon,
.AlertBanner.DragDrop   .AlertIcon {
    display: inline-block;
    width: 96px;
    height: 46px;
    padding: 0;
    margin: 0 ;
    background: url("./images/icons/alert-icons-sprite.png") no-repeat top left;     
}
 
.AlertBanner.SampleData .AlertIcon { background-position:    0px 0px; }
.AlertBanner.Error      .AlertIcon { background-position:  -96px 0px; }
.AlertBanner.Question   .AlertIcon { background-position: -192px 0px; }
.AlertBanner.Info       .AlertIcon { background-position: -288px 0px; }
.AlertBanner.ProTip     .AlertIcon { background-position: -384px 0px; }
.AlertBanner.DragDrop   .AlertIcon { background-position: -480px 0px; }

.AlertBanner.Active.SampleData .AlertIcon { background-position:    0px -48px; }
.AlertBanner.Active.Error      .AlertIcon { background-position:  -96px -48px; }
.AlertBanner.Active.Question   .AlertIcon { background-position: -192px -48px; }
.AlertBanner.Active.Info       .AlertIcon { background-position: -288px -48px; }
.AlertBanner.Active.ProTip     .AlertIcon { background-position: -384px -48px; }
.AlertBanner.Active.DragDrop   .AlertIcon { background-position: -480px -48px; }

.AlertBannerHead {
    font-weight: normal;
    color: #505050;
}

.AlertBanner .AlertIconDiv {
    border-right: 1px solid #FEC82A;
    background-color: #FFEB9E;
}

.AlertBanner .AlertButtonDiv {
   padding-left:  5.87em;
   display: block;
}

.AlertBanner .AlertCloseDiv {
   padding-left: 3.13em;
   display: block;
}

.AlertBanner .AlertMessageDiv {
   padding-left: 2em;
   display: block;
}

.AlertBanner .AlertMultiMessageDiv {
   padding-top:  1.57em;
   padding-bottom: 1.57em;
}

.AlertBanner .AlertLearnMore {
    display: block;
    margin: 1em 0 0 1em;
}

.AlertBanner .Vibrant {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: normal;
}

.AlertBanner .Remove.Icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('./images/icons/16x16_close_yellow.png') no-repeat center center;
    cursor: pointer;
    margin-left: 3px;
    background-position: 0px 0;    
}


.AlertBanner a.Corner {
    text-decoration: none;
    position: absolute;
    top: 0;
    right: 0;
}

.NotificationBanner {
    display: flex;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px 0px;
    font-size: 16px;
    font-weight: normal;
    color: rgb(80, 80, 80);
    border-top-color: rgb(0, 157, 235);
    border-style: solid;
    border-width: 10px 0px 0px;
    margin-bottom: 16px;
    margin-right: 22px;
}

.NotificationBanner .NotificationMsgDiv 
{
    padding: 8px 16px 8px 16px;
}

/* classes for user info qtip */
span.userHoverLabel {
    display:inline-block;
    width: 100%;
}
    
span.Approved, div.Approved {
    color: Green;
}

span.Denied, div.Denied {
    color: red !important;
}

/*
    Client-side charts error messages
*/
.ChartErrorMsg
{
    display:block;
    text-align:center;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    top:50%;
    margin-top:-10px;
    right:0;
    left:0;
}
.ChartError
{
	width:100%;
	border-bottom:1px solid #d0d0d0;
}
.ChartErrorBar
{
    box-sizing:border-box;
    height:65px;
    width:100%;
    display:block;
    border-top:1px solid #d0d0d0;
}
.ChartError.pie{background:url("./images/chartEmptyPie.png") no-repeat left center;}
.ChartError.pie.funnel{background:url("./images/chartEmptyFunnel.png") no-repeat center bottom;}
.ChartError.bar{background:url("./images/chartEmptyStackBar.png") no-repeat center bottom;}
.ChartError.line{background:url("./images/chartEmptyArea.png") no-repeat center bottom;}
.ChartError.line.scatter{background:url("./images/chartEmptyScatter.png") no-repeat center bottom;}
.ChartError.line.bubble{background:url("./images/chartEmptyBubble.png") no-repeat center bottom;}
.ChartError.line.lbar{background:url("./images/chartEmptyLinebar.png") no-repeat center bottom;}
.ChartError.solidgauge{background:url("./images/chartEmptyGauge.png") no-repeat center bottom;}
.ChartError.waterfall{background:url("./images/chartEmptyWaterfall.png") no-repeat center bottom;}


.ChartSelectIcon
{
    height:24px;
    width: 24px;
    display: inline-block;
    margin-right: 5px;
    background-color: transparent;
    vertical-align: -8px;
    background: url("./images/chartPickerIcon.png") no-repeat;
    background-color: transparent;
}

.ChartSelectIcon.bar{ background-position: 0 0;}
.ChartSelectIcon.sbar{ background-position: -24px 0;}
.ChartSelectIcon.hbar{ background-position: -48px 0;}
.ChartSelectIcon.hsbar{ background-position: -72px 0;}
.ChartSelectIcon.line{ background-position: -96px 0;}
.ChartSelectIcon.lbar{ background-position: -120px 0;}
.ChartSelectIcon.area{ background-position: -144px 0;}
.ChartSelectIcon.pie{ background-position: -168px 0;}
.ChartSelectIcon.funnel{ background-position: -192px 0;}
.ChartSelectIcon.scatter{ background-position: -216px 0;}
.ChartSelectIcon.bubble{ background-position: -240px 0;}
.ChartSelectIcon.solidgauge{ background-position: -264px 0;}
.ChartSelectIcon.waterfall{ background-position: -288px 0;}
.ChartSelectIcon.rbar{ background-position: -312px 0;}
.ChartSelectIcon.vwbar{ background-position: -336px 0;}
.ChartSelectIcon.bullet{ background-position: -360px 0;}
.ChartSelectIcon.spline{ background-position: -384px 0;}
.ChartSelectIcon.larea{ background-position: -408px 0;}
.ChartSelectIcon.streamgraph{ background-position: -432px 0;}
.ChartSelectIcon.donut{ background-position: -456px 0;}
.ChartSelectIcon.scatter3d{ background-position: -480px 0;}
.ChartSelectIcon.kpi{ background-position: -504px 0;}
.ChartSelectIcon.heatmap{ background-position: -528px 0;}

.hover .ChartSelectIcon.bar{ background-position: 0 -24px;}
.hover .ChartSelectIcon.sbar{ background-position: -24px -24px;}
.hover .ChartSelectIcon.hbar{ background-position: -48px -24px;}
.hover .ChartSelectIcon.hsbar{ background-position: -72px -24px;}
.hover .ChartSelectIcon.line{ background-position: -96px -24px;}
.hover .ChartSelectIcon.lbar{ background-position: -120px -24px;}
.hover .ChartSelectIcon.area{ background-position: -144px -24px;}
.hover .ChartSelectIcon.pie{ background-position: -168px -24px;}
.hover .ChartSelectIcon.funnel{ background-position: -192px -24px;}
.hover .ChartSelectIcon.scatter{ background-position: -216px -24px;}
.hover .ChartSelectIcon.bubble{ background-position: -240px -24px;}
.hover .ChartSelectIcon.solidgauge{ background-position: -264px -24px;}
.hover .ChartSelectIcon.waterfall{ background-position: -288px -24px;}
.hover .ChartSelectIcon.rbar{ background-position: -312px -24px;}
.hover .ChartSelectIcon.vwbar{ background-position: -336px -24px;}
.hover .ChartSelectIcon.bullet{ background-position: -360px -24px;}
.hover .ChartSelectIcon.spline{ background-position: -384px -24px;}
.hover .ChartSelectIcon.larea{ background-position: -408px -24px;}
.hover .ChartSelectIcon.streamgraph{ background-position: -432px -24px;}
.hover .ChartSelectIcon.donut{ background-position: -456px -24px;}
.hover .ChartSelectIcon.scatter3d{ background-position: -480px -24px;}
.hover .ChartSelectIcon.kpi{ background-position: -504px -24px;}
.hover .ChartSelectIcon.heatmap{ background-position: -528px -24px;}

.ui-effects-transfer {
    border: 1px dotted #55A0EF;
    z-index: 8;
  }

/** The  problem is that highcharts usually doesnt calculate the zindex of the tooltip correctly. we need to force them to be higher than
   data lables **/
.highcharts-tooltip > span {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.6);
    z-index: 9998 !important;
}