/* style="font-size: 1.2em;" note that the 1.2em means, whatever the font size is of the surrounding text, this text will be 20% larger. */
header, nav, section, main, aside, footer, article, hgroup, figure,
figcaption {
	display: block;
}

html {
	/*width: 100%;
	height: 100%;*/
	min-height: 100%;
	position: relative;
	margin: 0px;
	padding: 0px;
	/*background-color: rgb(169, 199, 215);*/
	font-family: Calibri;
}



body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	/*background-color: rgb(169, 199, 215);*/
}

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

select option:hover {
	background-color: rgb(194, 200, 212);
}

::placeholder { /*rgb(50, 72, 113) Chrome, Firefox, Opera, Safari 10.1+ */
    color: #728dc0;
    opacity: .8; 
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #728dc0;
    opacity: .8; 
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #728dc0;
    opacity: .8; 
}

/* override added because on chrome a textarea doesn't 
*  automatically inhert and text displays as monospaced 
*/
textarea{
	font-size:inherit;
	font-family:inherit;
}

.centerContainerHelpXXX {
	/*width: 20%;
	width: calc(100% - 125px);*/
	/*background-color: rgb(169, 199, 215);
   height: 100%;*/
	width: 24%;
	flex:0 0 24%;
	margin: 0px;
	padding: 0px;
	height: 90%; 
	min-height: 90%;
	max-height: 90%;
	text-align: left;
   background-color: whitesmoke;
position:relative;	
	border-width: 4px;
	border-style: inset;
  resize: horizontal;
}

.ovdialog-dropdown > div:not(.ui-resizable-handle){
	height: 100% !important;
	padding: 0px !important;
	margin: 0px !important;
}

.ovDialogDropDownTextOption {
    border: gray;
    border-style: groove;
    border-width: .5px;
    padding: 5px;
	color: black;
	background-color: white;
}

.ovDialogDropDownTextOption:hover{
	background-color: rgb(30, 144, 255);
	color: white;
}




.centerContainer {
	/*
	width: 75%;
	flex:1 1 75%;
	*/
	width: 100%;
	
	min-height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: left;
    background-color: whitesmoke;
}

.appContainer {
	width: 100%;
	
	height: 100%; 
	min-height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: left;
    background-color: whitesmoke;
}


.knowledgeIframe {
	width: 100%;
	height: 98%; 
	/*
	width: 24%;
	flex:0 0 24%;
	*/
    position: relative;
    left: 0;
    top: 0;
	border-width: 4px;
	border-style: inset;
    /*resize: horizontal;*/
	
	/*
	height: 90%; 
	min-height: 90%;
	max-height: 90%;
	*/
	
	margin: 0px;
	padding: 0px;
	text-align: left;
    background-color: whitesmoke;
    
	/*
	width: calc(100% - 27px);
   position: absolute;
   height: 100%;
	height: inherit; 
    border: 0;
   */
}

.left-of-help{
    float: left;
    width: 100%;
    text-align: left;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.knowledgeIframe1 {
	float: right;
	overflow: auto;
	
	width: 0%;
	width-max: 24%;
	min-height: calc(100vh - 98px);
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
	border-width: 4px;
	border-style: inset;
	margin: 0px;
	padding: 0px;
	text-align: left;
    background-color: whitesmoke;
	z-index: 4000;/*above almost everything, but never above wait mask or status bar*/
    
	/*
	width: calc(100% - 27px);
	position: absolute;
	height: 100%;
	height: inherit; 
    border: 0;
	flex:0 0 24%;
    resize: horizontal;
    */
}

.knowledgeAssist {
	/* cursor param two defines a cursor value as fallback for the url() */
	/*cursor: url(../images/assistant/owl_pointer.png), help !important;*/
	
/*
	cursor: help !important;
	text-shadow: .9px 0px yellow;
	outline-style: outset;
	outline-color: yellow;
	
	outline-style: outset;
	outline-color: brightness(120%);
*/	
}

.knowledgeAssist:hover {
/*	background-color: yellow !important; */
	outline-style: outset;
	outline-color: rgb(233, 251, 179);
}


.knowledgeBtn {
	cursor: pointer !important;
	background-color: rgb(239, 252, 226); /* rgb(249, 244, 181);*/
    margin-top: 6px;
    margin-right: 10px !important;
    margin-bottom: 6px;
    margin-left: 6px !important;
	
	height: 36px;
    font-weight: 700;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 6px;
    margin-right: 5px;
    margin-left: 5px;
    width: 60px;
    text-overflow: ellipsis;
    text-align: center;
}
.knowledgeBtn:hover {
	background-color: yellow !important;
}


.byersOnlyFeature{
	display: none !important;
}


/*
.centerAppContainer {
	width: 50%;
	overflow: scroll;
}
*/

.pageContent {
	display: flex;
	width: 100%;
	height: 100%;
	padding-top: 0px; /* same as header height*/
	/*padding-bottom: 120px;  same as footer height*/
	padding-bottom: 53px;
	background-color: whitesmoke;
	/*background-color: rgb(169, 199, 215);*/
	background-color: rgb(230,233,238);
}

input[type=checkbox] {
	/* Double-sized Checkboxes */
	-ms-transform: scale(1.5); /* IE */
	-moz-transform: scale(1.5); /* FF */
	-webkit-transform: scale(1.5); /* Safari and Chrome */
	-o-transform: scale(1.5); /* Opera */
}

header {
   background-color: whitesmoke;
   background-color: rgb(169, 199, 215);
   display: block;
   /*width: 100%;*/
   padding: 5px 5px;
}

nav {
	background-color: rgb(50, 72, 112);
	display: block;
	width: 100%;
	/*         position:fixed; /*keep it at its location within containing parents content*/
}

/* we'll add this class to nav using javascript
.nav-up {
  top: -40px; // same as header height. use variables in LESS/SASS
} */
section {
	background-color: rgb(169, 199, 215);
	display: block;
	width: 100%;
	min-height: 10px;
	margin: 10px 10px;
}

main {
	background-color: whitesmoke; /*rgb(169, 199, 215);*/
	display: block;
	min-height: 150px;
	margin: 10px 10px;
}

/* 
* This selector is meant to normalize the spacing between sections
* in the Attribute Editor dialog. This sets all direct children
* elements of <main> to have a top margin of 8px
*/
main > * {
	margin-top: 8px;
}

.right75 {
	float: right;
	width: 75%;
}

.left75 {
	float: left;
	width: 75%;
}

.left25 {
	float: left;
	width: 25%;
}
.left15 {
	float: left;
	width: 15%;
}
.left20 {
	float: left;
	width: 20%;
}
.left30 {
	float: left;
	width: 30%;
}

.hide {
	display: none !important;
}

.form-error {
	background-color: yellow;
	color: red;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	font-size: 80%;
	text-align: left;
	border-radius: 15px;
}

.message-output {
	overflow-y: scroll;
}

.formDataSpan {
	/*color: rgb(240, 252, 206);*/
	color: #0ea9d6;
}

.span-output {
	font-family: monospace;
}

#status-image:hover {
   /*background-color: rgb(195, 255, 191);*/
	cursor: pointer;
}

.status-bar-text-divs {
	width: calc(100% - 125px);
}

.error-output {
	background-color: yellow;
	color: red;
	font-size: 85%;
	/*padding needs to be 0px for top and bottom to avoid showing color when no text is in divide.  otherwise we will have to hide and unhide div too. */
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	font-weight: 800;
}

.warn-output {
	color: #696464;
	font-size: 85%;
	/*padding needs to be 0px for top and bottom to avoid showing color when no text is in divide.  otherwise we will have to hide and unhide div too. */
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}

.status-output {
	color: navy;
	font-size: 85%;
	/*padding needs to be 0px for top and bottom to avoid showing color when no text is in divide.  otherwise we will have to hide and unhide div too. */
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}

aside {
	background-color: rgb(169, 199, 215);
	display: block;
	float: right;
	width: 25%;
	min-height: 150px;
	margin: 10px 10px
}

.flash {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 0.9s;

    animation-name: flash-animation;
    animation-duration: 0.9s;
}

@-webkit-keyframes flash-animation {  
    from { background: rgb(249, 255, 173); }
    to   { background: default; }
}

@keyframes flash-animation {  
    from { background: rgb(249, 255, 173); }
    to   { background: default; }
}/*rgb(240, 252, 206);yellow;*/

#id-bottom-nav {
	background-color: rgb(50, 72, 112);
	display: block;
	width: 100%;
	padding: 0px 2px 2px 3px;
	border-width: 2px;
	border-bottom-width: 2px;
	border-bottom-color: rgb(152, 185, 202);
	border-bottom-style: solid;
}

#id-tail {
	padding: 5px;
}

footer {
	position: fixed;
	/*keep it at its location within containing parents content*/
	/*    position:absolute; keep it at the end of containing parents content*/
	/*background-color: rgb(213, 244, 208);*/
	text-align: center;
	width: 100%;
	height: 115px;
	left: 0px;
	bottom: 0px;
}

footerStatus {
	position: fixed;
	/*keep it at its location within containing parents content*/
	
	/*background-color: rgb(213, 244, 208);*/
	background-color: rgb(194, 200, 212);
	text-align: left;
	width: 100%;
	height: 50px;
	left: 0px;
	bottom: 0px;
	z-index: 4999; /*above almost everything*/
	resize: vertical;
}

article {
	background-color: rgb(169, 199, 215);
	display: block;
	width: 100%;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

nav li {
	float: left;
}

nav li a {
	display: block;
	text-align: center;
	border-left: 3px solid rgb(50, 72, 112);
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-left: 10px;
	text-decoration: none;
	background-color: rgb(50, 72, 112);
	color: white; /*rgb(0, 75, 142);*/
}

#optionPanel {
	width: 100%;
	/*margin-left: 20px;*/
	background-color: rgb(194, 200, 212);
}

#optionPanel div,
#optionPanel ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	/*
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-top: 5px;
	overflow: hidden;
	width: 200px;
	text-align: center;
	*/
	float: left;
	height: 100%;
}

/*
#optionPanel div:hover,
#optionPanel li:hover {
*/
.opt-unselected:hover {
	font-weight: bold;
	/*
	font-size: larger;
	background-color: rgb(240, 252, 226);
	*/
	cursor: pointer;
	color: #222222;
}

.opt-selected {
	padding: 10px;
/*	text-align: center;
	border-style: inset;
	border-right-width: 0px;
	border-left-width: 7px;
	border-top-width: 7px;
	border-bottom-width: 7px;
	border-color: white;
	background-color: rgb(50, 72, 113); was-> rgb(152, 185, 202);*/
	background-color: rgb(50, 72, 113);
    border-radius: 6px;
	-webkit-animation: fadein 1.5s;
	-moz-animation: fadein 1.5s;
	-ms-animation: fadein 1.5s;
	-o-animation: fadein 1.5s;
	animation: fadein 1.5s;
}

.opt-unselected {
	padding: 10px;
/*	text-align: center;
	border-width: 7px;
	border-style: outset;
	-moz-user-select: none;
	-khtml-user-drag: element;
	border-color: white;
	background-color: rgb(169, 199, 215);
	background-color: unset;*/
	background-color: rgb(194, 200, 212);
	-webkit-animation: fadein 1.5s;
	-moz-animation: fadein 1.5s;
	-ms-animation: fadein 1.5s;
	-o-animation: fadein 1.5s;
	animation: fadein 1.5s;
}

/* Change the link color to #111 (black) on hover */
nav li a:hover {
	/*background-color: rgb(213, 244, 208);*/
	color: rgb(50, 72, 112);
}

section.hidden {
	display: none;
	position: fixed;
}

hiddenDiv {
	display: none !important;
}

.center {
	text-align: center !important;
}

.float-left {
	float: left;
	text-align: left;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.float-left-fixed-width {
	float: left;
	text-align: left;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	min-width: 550px;
	max-width: 550px;
}

.float-right {
	float: right;
	text-align: right;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}


.layer-create-opts input,
.layer-create-opts label {
  display: inline-block;
  vertical-align: top;
  font-weight: normal;
}

.zeroMargin {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.fixedElement {
	z-index: 800;
}

.combobox-select-editable {
	position: relative;
	background-color: white;
	border: solid grey 1px;
	width: 120px;
	height: 18px;
}

.selectedTxtOpt {
	/* shadow (horizontal offset, vertical offset, blur radius, spread radius, color)  */
	/*text-shadow: 3px 3px 2px rgb(152, 185, 202);*/
	font-weight: bold;
   /*font-size: larger;
	color: rgb(240, 252, 206);
	color: rgb(50, 72, 112);*/
	color: white;
}

.notAvailableForTest{
	font-weight: lighter !important;
	color: gray !important;
	opacity: 0.5 !important;
}

.notAvailable {
	/* Used for any component that has not been complted yet. */
	font-weight: lighter !important;
	color: gray !important;
	opacity: 0.5 !important;
	display: none !important;
}

.inputModified {
	/*border-style: outset !important;*/
	/*border-color: #94e875 !important;*/
	/*background-color: rgb(221, 247, 217) !important;*/
	/*background-color: rgb(213, 244, 208) !important;*/
	background-color: honeydew !important;
}

//input:read-only, textarea:read-only,  
input:disabled, textarea:disabled, select:disabled{
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: rgba(177, 188, 208, 1);
    color: #484848;
}

/* Uniform icon-only buttons */
.icon-small{
	width: 20px;
	height: 20px;
}

.pull-center{
	text-align:center;
}

.text-center{
	text-align:center;
}

.pull-left{
	float:left;
	text-align: left;
}

.pull-right{
	float:right;
}

.w-100{
	width: 100% !important;
}

.w-75{
	width: 75% !important;
}

.w-50{
	width: 50% !important;
}

.w-25{
	width: 25% !important;
}



.d-none{
	display:none !important;
}

.d-inlineblock{
	display:inline-block;
}

.d-block{
	display:block;
}

.v-hidden{
	visibility: hidden !important;
}

.v-collapse{
	visibility:collapse !important;
}

.tl-fixed{
	table-layout: fixed;
}

.p-0{
	padding: 0px !important;
}

.pl-0{
	padding-left: 0px !important;
}

.pl-1{
	padding-left: 5px !important;
}

.p-1{
	padding: 5px !important;
}

.p-2{
	padding: 10px !important;
}

.px-0{
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.py-0{
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.px-1{
	padding-left: 5px !important;
	padding-right: 5px !important;
}

.py-1{
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

.px-2{
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.py-2{
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.px-3{
	padding-left: 15px !important;
	padding-right: 15px !important;
}

.py-3{
	padding-top: 15px !important;
	padding-bottom: 15px !important;
}

.mx-0{
	margin-left: 0px !important;
	margin-right: 0px !important;
}

.my-0{
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}

.mx-1{
	margin-left: 5px !important;
	margin-right: 5px !important;
}

.my-1{
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}

.mx-2{
	margin-left: 10px !important;
	margin-right: 10px !important;
}

.my-2{
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}

.mx-3{
	margin-left: 15px !important;
	margin-right: 15px !important;
}

.my-3{
	margin-top: 15px !important;
	margin-bottom: 15px !important;
}

.pb-0{
	padding-bottom: 0px !important;
}
.pb-1{
	padding-bottom: 5px !important;
}
.pt-0{
	padding-top: 0px !important;
}
.mb-0{
	margin-bottom: 0px !important;
}
.mb-1{
	margin-bottom: 5px !important;
}
.mb-2{
	margin-bottom: 10px !important;
}
.mt-0{
	margin-top: 0px !important;
}
.mt-1{
	margin-top: 5px !important;
}
.ml-1{
	margin-left: 5px !important;
}
.ml-2{
	margin-left: 10px !important;
}
.ml-3{
	margin-left: 15px !important;
}
.ml-4{
	margin-left: 20px !important;
}
.ml-10{
	margin-left: 50px !important;
}
.mr-0{
	margin-right: 0px !important;
}
.mr-1{
	margin-right: 5px !important;
}
.mr-2{
	margin-right: 10px !important;
}
.mr-3{
	margin-right: 15px !important;
}
.mr-4{
	margin-right: 20px !important;
}
.mr-5{
	margin-right: 25px !important;
}

.icon-lg{
	width: 2em;
	height: 2em;
	background-size: cover!important;
}

.icon-xs{
	width: 1em;
	height: 1em;
	background-size: cover!important;
}

.icon-m{
	width: 1.3em;
	height: 1.3em;
	background-size: cover!important;
	border: none;
}

.icon{
	width: 2em;
	height: 2em;
	background-size: cover!important;
	border: none;
}

.tinyIconDiv{
    margin-top: 10px;
    margin-bottom: 10px;
}

.propertyicon{
	padding: 3px;
    padding-right: 9px;
    /*
    margin-top: 10px;
    margin-bottom: 10px;
    */
}
.propertyicon-withnumber{
	padding: 3px;
    padding-right: 0px;
    /*
    margin-top: 0px;
    margin-bottom: 0px;
    */
}

.propertyicon:hover {
	/*background: rgb(195, 255, 191);*/
	background-color: rgb(194, 200, 212);
	cursor: pointer;
}

.icon-loading{
	background: url('../images/status/gear_wait_ani_med.gif');
}

.icon-country{
	background: url('../images/icons/country.png');
}
.icon-country:hover{
	background: url('../images/icons/country.png');
}

.icon-view{
	background: url('../images/icons/view.png');
}
.icon-view:hover{
	background: url('../images/icons/view.png');
}

.icon-square{
	background: url('../images/icons/square.png');
}
.icon-square:hover{
	background: url('../images/icons/square.png');
}
.icon-trash{
	background: url('../images/Trash_off.png');
}
.icon-trash:hover{
	background: url('../images/Trash_on.png');
}

.icon-linecontrol-newline{
	background: url('../images/newline_off.png');
}
.icon-linecontrol-newline:hover{
	background: url('../images/newline_on.png');
}
.icon-linecontrol-sameline{
	background: url('../images/sameline_off.png');
}
.icon-linecontrol-sameline:hover{
	background: url('../images/sameline_on.png');
}

.icon-fontincrease{
	background: url('../images/FontIncrease_off.png');
}
.icon-fontincrease:hover{
	background: url('../images/FontIncrease_on.png');
}

.icon-fontdecrease{
	background: url('../images/FontDecrease_off.png');
}
.icon-fontdecrease:hover{
	background: url('../images/FontDecrease_on.png');
}

.icon-fontbold{
	background: url('../images/FontBold_off.png');
}
.icon-fontbold:hover{
	background: url('../images/FontBold_on.png');
}

.icon-check{
	background: url('../images/apply_off.png');
}
.icon-check:hover{
	background: url('../images/apply_on.png');
}

.icon-fontitalic{
	background: url('../images/FontItalic_off.png');
}
.icon-fontitalic:hover{
	background: url('../images/FontItalic_on.png');
}

.icon-fontcolor{
	background: url('../images/FontColor_off.png');
}
.icon-fontcolor:hover{
	background: url('../images/FontColor_on.png');
}

.icon-paintbucket{
	background: url('../images/Background_off.png');
}
.icon-paintbucket:hover{
	background: url('../images/Background_on.png');
}

.icon-pencil{
	background: url('../images/Edit_off.png');
}
.icon-pencil:hover{
	background: url('../images/Edit_on.png');
}

.formpreview-overlay{
	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
}

.formpreview-container{
	display:block;
	position: relative;
	width: 100%;
	height: 100%!important;
	padding-bottom: 0px;
}

.formpreview-iframe{
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height: 100%;
	/*border: none;*/
	border-style: ridge;
}

.lblbld_attrselect{
	max-width: 175px;
}

.lblbld_txt{
	max-width: 100px;
}

.proj_user_id_column{
    max-width: 60%;
    word-break: break-all;
}



/**************************************************************************************************************************************/
/***********************   BELOW THIS LINE HAS BEEN SECTIONED OFF BY USAGE  ***********************************************************/
/**************************************************************************************************************************************/

/******************************************** POPUP DIALOG WITH GRAYED OUT BACKGROUND ****START**/
section article.popup {
	/* default popup dialog design. */
	position: relative;
	height: auto;
	background-color: transparent;
	padding: 0px 0px;
	margin: 2% auto;
	max-width: 80%;
	max-height: calc(90% - 30px);
	z-index: 3003;
	overflow: auto;
}

section article.popup_login {
	/* dialog specific alteration to the 
	default popup dialog design. */
}

section article.popup_new_account {
	/* dialog specific alteration to the 
	default popup dialog design. */
	width: 60%;
	top: 70px;	
}

section article.popup_reset {
	/* dialog specific alteration to the 
	default popup dialog design. */
	width: 60%;
	top: 70px;	
}

section article.popup_new_user {
	/* dialog specific alteration to the 
	default popup dialog design. */
	width: 85%;
}

section article.popup_attribute {
	/* dialog specific alteration to the 
	default popup dialog design. */
	
	width: 74.7%;
	
	max-height: calc(100vh - 205px + 29px + 33px); /*(match to part of section main.attrEditorMainScrollArea )listingSheet + componentNameSpan + paddingAndOtherSpacing*/
	height:     calc(100vh - 205px + 29px + 33px);
	position: absolute;
	top: 40px; /*calc(64px + 39px)header + menue*/
	margin: unset;
	
	left: 0px;
}

section main.attrEditorMainScrollArea {
	width: 100%;
	overflow: auto;
	max-height: calc(100vh - 205px + 29px + 33px - 31px); /*(match to section article.popup_attribute -31)listingSheet + componentNameSpan + paddingAndOtherSpacing - editor title bar*/
	margin: 0px;
}

section article nav.popup_nav {
	/* default popup dialog nav design. */
	background-color: rgb(50, 72, 112);
	border-top: 0px solid white;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

section article nav li.popup_title {
	/* default popup dialog title design. */
	/*color: rgb(213, 244, 208);*/
	color: rgb(194, 200, 212);
	margin: 5px 10px;
}

section.popup_hidden_login {
	/* the following "popup_hidden_* classes are duplicated because 
	their settings are altered seperatly by java script so they 
	must be kept sepearate. */
	display: none;
	position: fixed;
	z-index: 2000;
	/*background-image: url(http://34.210.141.104:8088/OneViewConsole/images/skyline-839795_1920.jpg);*/
	background-image: url(../images/accountBGImage.jpg);
	/*background-image: linear-gradient(to bottom,rgba(94,229,252,.7),rgba(21,110,191,.7)), url(../images/accountBGImage.jpg);*/
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

section.popup_hidden_user_def {
	/* the following "popup_hidden_* classes are duplicated because 
	their settings are altered seperatly by java script so they 
	must be kept sepearate. */
	display: none;
	position: fixed;
	z-index: 1999;
}

section.popup_hidden_attribute {
	/* the following "popup_hidden_* classes are duplicated because 
	their settings are altered seperatly by java script so they 
	must be kept sepearate. */
	display: none;
	position: fixed;
	z-index: 1999;
}

section.popup_hidden_reset,
section.popup_hidden_resetnow,
section.popup_hidden_new_account { 
	/* the following "popup_hidden_* classes are duplicated because 
	their settings are altered seperatly by java script so they 
	must be kept sepearate. */
	display: none;
	position: fixed;
	z-index: 2001;
	background-color: transparent;
}

div.marketSubtitle {
	font-weight: 700;
	background: rgb(194, 200, 212); /*(213, 244, 208);*/
	color: rgb(50, 72, 112);
	text-align: center;
	padding: 3px 3px;
}

div.close {
	/* text-transform: uppercase; */
	color: black;
	background: rgb(194, 200, 212); /*rgb(213, 244, 208);*/
	/* rgb(239, 252, 226);  */
	float: right;
	margin: 5px 10px
}

div.close:hover {
	/*background: rgb(195, 255, 191);*/
	cursor: pointer;
}

div.close1 {
	/* text-transform: uppercase; */
	color: black;
	background: rgb(194, 200, 212); /*rgb(213, 244, 208);*/
	/* rgb(239, 252, 226);  */
	float: right;
	margin: 5px 10px
}

div.close1:hover {
	/*background: rgb(195, 255, 191);*/
	cursor: pointer;
}


/******************************************** POPUP DIALOG WITH GRAYED OUT BACKGROUND ****END**/

/******************************************** LOGIN/SIGNIN Window ************************START**/
.signinBG {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	background-color: rgb(50, 72, 112);
	/***************************************************/
	/**** CHANGE THE IMAGE FILE NOT THE IMAGE NAME, ****/
	/**** IT IS REFERENCED IN OVC CONSOLE AND OVC   ****/
	/**** WEBPAGE INDEX SO THEY WILL MATCH.         ****/
	background-image: url(../../images/indexPageTopBG.jpg);
	/***************************************************/
	background-size: 100% 100%;
	/* background-size: contain; */
	background-size: cover;
	/* padding: 5em 0 20em 0; */
}

.byersbtn {
	height: 36px;
	/*font-weight: 700;*/
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	border-radius: 6px;
	/*background-color: rgb(213, 244, 208);*/
	background-color: rgb(50, 72, 113);
	color: white;
	margin-right: 5px;
	margin-left: 5px;
	width: 150px;
	text-overflow: ellipsis;
}

.byersbtnOVDialogTop {
	height: 36px;
	/*font-weight: 700;*/
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	border-radius: 6px;
	/*background-color: rgb(213, 244, 208);*/
	background-color: rgb(50, 72, 113);
	color: white;
	margin-right: 5px;
	margin-left: 5px;
	width: 150px;
	text-overflow: ellipsis;
}

.byersbtn_small {
	height: 20px;
	/*font: 700 13.3333px Arial !important;*/
	font: 13.3333px Arial !important;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	border-radius: 6px;
	/*background-color: rgb(213, 244, 208);*/
	background-color: rgb(50, 72, 113);
	color: white;
	margin-right: 5px;
	margin-left: 5px;
    /*width: 150px;*/
    text-overflow: ellipsis;
}

.byersbtn_small:disabled, .byersbtn:disabled{
    background: rgb(136, 147, 167);
    cursor: not-allowed; /* ment to match the selected geometry cursor, see .lft-selector input:checked+.icon-lft */
}

.byersbtn:hover, .byersbtn:active, .byersbtn:focus,
.byersbtn_small:hover, .byersbtn_small:active, .byersbtn_small:focus
{
	/*background-color: rgb(195, 255, 191);
	font-weight: 700;*/
	background-color: rgb(66, 87, 124) !important;
}


.checkbox_div-list{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 7px;
	padding-right: 7px;
}

.proj-exportto-layer-all{
	color: lightgray;
	padding-right: 7px;
	margin-bottom: 10px;
	margin-top: 10px;
	font-size: small;
	font-style: italic;
}


.ui-blocked{
	cursor:not-allowed;
	pointer-events: none;
}

.ui-disabled{
	opacity: 0.5;
	cursor:not-allowed;
	pointer-events: none;
}

.byersbtn-fixed-width{
	width: 135px;
	text-overflow: ellipsis;
}

.reauth-uid {
	display: block;
	color: black;
	line-height: 2;
	margin-bottom: 10px;
	font-size: 14px;
	/*text-align: center;*/
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.form-signin {
	text-align: left;
	width: 100%;
	color: black;
	padding: 24px;	
}

.reqInput {
    background-image: url('../images/icons/icon_required.gif') !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
	padding-left: 11px !important;
}

.form-PUUserDef input[type=email], .form-PUUserDef input[type=password],
	.form-PUUserDef input[type=passwordConfirm], .listingSheet input[type=email],
	.listingSheet input[type=password], .listingSheet input[type=passwordConfirm],
	input[type=text]{
	/*width: 360px;*/
	width: 315px; /*width minus the padding of 45px*/
	padding-left: 11px;
}

/*#layerdatasheet label {*/
.layer-setting-inputs label {
	width:185px;
	font-weight: normal;
	text-align: right;
	display: inline-block;
    margin-bottom: 5px;
}
.td_input_label {
	text-align:right;
}

#layerdatasheet legend {
	font-size: 16px;
	font-family: serif;
    /*font-size: larger;*/
    /*padding-bottom: 6px;*/
    font-weight: bold;
    padding-top: 6px;
    color: threedface;
}

#layerdatasheet fieldset {
    width: fit-content;
}


.pwInputField input[type=password], .pwInputField input[type=passwordConfirm],
	.pwInputField input[type=text] {
	width: 180px;
	
	/*
	height: 45px;
	font-size: 16px;
	line-height: 24px;
	
    color: unset !important;
	background: #EAEAEA;
	background-color: #EAEAEA !important;
    background-image: none !important;
    */
}

.form-signin #createAcctP1Frm-inputUserName, 
    .form-signin #createAcctP1Frm-inputEmail,
    .form-signin #loginFrm-inputUserName,
	.form-signin #inputPasswordL, .form-signin #inputPasswordN,
	.form-signin #inputPasswordConfirm, .form-signin #inputName,
	.form-signin #inputOptName, .form-signin #inputOrgName {
	direction: ltr;
	/*height: 90%;
	font-size: 14px;*/
	/*
	font-size: 16px;
	line-height: 24px;
	height: 45px;
    color: unset !important;
	background: #EAEAEA;
	background-color: #EAEAEA !important;
    background-image: none !important;
    */
	
	/*background-color: WHITE;
	margin: 0px 5px;*/
}

.form-signin input {
	font-size: 16px;
	line-height: 24px;
	height: 45px;
    color: unset !important;
	background: #EAEAEA;
	background-color: #EAEAEA !important;
    background-image: none !important;
    
    border: none;
    border-bottom: thin;
    border-color: darkgrey;
    border-bottom-style: ridge;
}

.form-signin input[type=email], .form-signin input[type=password],
    .form-signin #loginFrm-inputUserName,
    .form-signin #createAcctP1Frm-inputUserName,
	.form-signin input[type=passwordConfirm], .form-signin input[type=text]
	{
	width: 90%;
	display: block;
	z-index: 1;
	position: relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*
	font-size: 16px;
	line-height: 24px;
	height: 45px;	
    color: unset !important;
	background: #EAEAEA;
	background-color: #EAEAEA !important;
    background-image: none !important;
    */
}

.form-signin showTxtImgPWConf 
.form-signin showTxtImgPW {
/*	height: 12px;
	width: 20px;*/
	margin: 1px;
	padding: 0px;
}

.form-signin button {
	width: 50%;
	display: block;
	margin: 10px 10px;
	z-index: 1;
	position: relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.form-signin .form-control:focus {
	/*
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
		rgb(7, 47, 77);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(7, 47, 77);
	*/
}

/*input:-internal-autofill-selected {
    background-color: unset !important;
    background-image: unset !important;
    color: unset !important;
}*/

.byersbtn.bbtn-signin {
	/*
	background-color: rgb(213, 244, 208);
	 */
    background-color: rgb(50, 72, 113);
    color: white;
	padding: 0px;
	font-weight: 700;
	font-size: 14px;
	height: 36px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: none;
	-o-transition: all 0.218s;
	-moz-transition: all 0.218s;
	-webkit-transition: all 0.218s;
	transition: all 0.218s;
}

.byersbtn.bbtn-signin:hover, .byersbtn.bbtn-signin:active, .byersbtn.bbtn-signin:focus
	{
	background-color: rgb(66, 87, 124);
}

.forgot {
	color: rgb(104, 145, 162);
	margin: 10px 10px
}

.forgot-password {
	color: rgb(104, 145, 162);
}

.forgot-password:hover, .forgot-password:active, .forgot-password:focus
	{
	/*color: rgb(195, 255, 191);*/
}

.create-new {
	color: rgb(104, 145, 162);
	margin: 10px 10px
}

.create-new-account {
	color: rgb(104, 145, 162);
}

.create-new-account:hover, .create-new-account:active,
	.create-new-account:focus {
	/*background-color: rgb(195, 255, 191);*/
}

.byersbtn.bbtn-signinVia {
	padding: 10px;
	font-weight: 700;
	font-size: 12px;
	height: 36px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: none;
	-o-transition: all 0.218s;
	-moz-transition: all 0.218s;
	-webkit-transition: all 0.218s;
	transition: all 0.218s;
	color: rgb(239, 252, 226);
	margin: 10px 10px;
}

.byersbtn.bbtn-fb {
	background-color: rgb(0, 32, 96);
}

.byersbtn.bbtn-li {
	background-color: rgb(66, 87, 124);  /*rgb(0, 112, 192);*/
}

.byersbtn.bbtn-g {
	background-color: rgb(255, 0, 0);
}

/******************************************** LOGIN/SIGNIN Window ************************END**/

/******************************************** CODE Window ******************************START**/
.codeRequest, .codeConfirm {
	border: ridge;
	padding: 10px 10px;
	margin: 20px 0px;
	background-color: rgb(229, 231, 232); 
}
/******************************************** CODE Window ******************************END**/

/******************************************** DROP DOWN MENU **************************START**/
.dropbtn {
	/* Dropdown Button */
	color: rgb(239, 252, 226);
	padding: 0px;
	font-size: 0px;
	border: none;
}

.dropbtn:hover, .dropbtn:focus {
	/* Dropdown button on hover & focus */
	cursor: pointer;
}

.dropdown {
	/* The container <div> - needed to position 
	the dropdown content */
	position: relative;
	display: inline-block;
	z-index: 900; /*keep it on top*/
}

.dropdown-content {
	/* Dropdown Content (Hidden by Default) */
	display: none;
	position: absolute;
	padding: 3px;
	text-align: left;
	background-color: rgb(239, 252, 226);
	/* shift from left, shift from top, +hight, +width, transparency */
	box-shadow: 10px 25px 25px 15px rgba(0, 0, 0, 0.5);
	opacity: .92;
}

.dropdown-content a {
	/* Links inside the dropdown */
	color: black;
	padding: 3px 2px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	/* Change color of dropdown links on hover */
	/*background-color: rgb(213, 244, 208)*/
}

.dropdown-content a:focus {
	/*background-color: rgb(213, 244, 208)*/
}

.show {
	/* Show the dropdown menu (use JS to add this 
	class to the .dropdown-content container when 
	the user clicks on the dropdown button) */
	display: block;
}

.shadow{
	box-shadow: 8px 15px 20px 3px black;
}

/******************************************** DROP DOWN MENU **************************END**/


/******************************************** TEXT BLOCK TRUNCATED ***************************START**/
/* Note this truncates the text from view but the text is still in the compontet.  This is so that  */
/* the js that may reference the text will still get the entire text string.                        */
.truncate-long-textblock {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: calc(1.2em * 1); /*only one line of text wanted*/
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  background: whitesmoke;
}

.truncate-long-textblock::before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    background: whitesmoke;
    color: red;

   /*
    background: pink;
   */
}

.truncate-long-textblock::after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1.2em;
    background: whitesmoke;
}
/******************************************** TEXT BLOCK TRUNCATED **************************END**/


/******************************************** TEXTAREA AS TEXTBOX ***************************START**/
.textarea-textbox {
  resize: none;
  overflow: hidden;
  height: 1.2em;
}

.textarea-textbox-hiddendiv {
  display: none;
  color: red;
  white-space: pre-wrap;
  /*word-wrap: break-word;*/
  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'textarea-textbox-common' are applied to both the textarea and the 
   hidden clone these must be the same. */
.textarea-textbox-common {
  width: 315px;
  overflow: hidden;
}

.lbr {
  line-height: 3px;
}
/******************************************** TEXTAREA AS TEXTBOX **************************END**/


/******************************************** LISTING SHEET ***************************START**/
.componentTitleBar {
	/*padding-left: 15px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 0px;*/
	padding: 0px;
	padding-top: 5px;
	width: 100%;
	background-color: rgb(194,200,212);
	/*height: 100%;*/
	display: block;
	/*font-size: 150%;*/
	color: rgb(50, 72, 113);
	/*background-color: whitesmoke;*/
    /*max-width: 96%;*/
    word-break: break-all;
}

.listingSheet {
	border-left-width: 0px;
	border-right-width: 0px;
	border-top-width: 2px;
	border-bottom-width: 0px;
	border-style: inset;
	-moz-user-select: none;
	-khtml-user-drag: element;
	border-color: lightgray;
	color: rgb(50, 72, 113);
	/*color: white;*/
	/*background-color: whitesmoke;rgb(50, 72, 113)*/
	background-color: rgb(230,233,238);
	/*margin-left: 20px;*/
	/*margin-right: 20px;
	margin-top: 5px;
	margin-bottom: 5px;*/
	margin: 0px;
	width: 100%;
	/*
	height: 100%;
	max-height: calc(100vh - 205px);
	min-height: calc(100vh - 205px);
	*/
	max-height: calc(100vh - 181px);
	min-height: calc(100vh - 181px);
	overflow: auto;
	z-index: 700;
	-webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1.5s; /* Firefox < 16 */
	-ms-animation: fadein 1.5s; /* Internet Explorer */
	-o-animation: fadein 1.5s; /* Opera < 12.1 */
	animation: fadein 1.5s;
	float: right;
	/*text-align: right;*/
	padding: 10px;
}

.listingSheet-btn-div{
    /*left: 135px;*/
    /*bottom: 40px;*/
    /*background-color: rgb(0, 0, 0, .5);*/
    /*left: 107px;99px;*/
    /*bottom: 71px;*/
    /*bottom: 55px;*/
    
	position: fixed;
	height: 37px;
    left: 117px;
    bottom: 52px;
    
/*  position: -webkit-sticky;
  position: sticky;
  bottom: 0;*/
	
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 701;
}

@keyframes fadein {
	from {opacity:0;}
	to {opacity: 1;}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from {opacity:0;}
	to {opacity: 1;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from {opacity:0;}
	to {opacity: 1;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from {opacity:0;}
	to {opacity: 1;}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
	from {opacity:0;}
	to {opacity: 1;}
}

.listingSheetItem {
	float: left;
	display: block;
	/* height: 25%; /* this causes crazy box size issues on ie11, OV-706*/
	height: 12.2em; /*150px; 215px; /*212px;*/
	min-height: 12.2em;
	max-height: 12.2em;
	width: 245px; /* width: 22%; */
	min-width: 245px;
	margin: 8px; /*1%;20px; position: relative;*/
	padding: 0px;
	border-width: 3px;
	border-style: outset;
	-moz-user-select: none;
	-khtml-user-drag: element;
	border-color: white;
	background-color: whitesmoke;
	/*background-color: rgb(169, 199, 215);*/
	font-size: 0.80em;
}

.listingSheetItemLIST{
	height: 2.2em;
	min-height: 12.2em;
	margin: 8px; /*1%;20px; position: relative;*/
	padding: 0px;
	border-width: 3px;
	border-style: outset;
	border-color: white;
	background-color: whitesmoke;
	font-size: 0.80em;
}

.listingSheetItemLISTCell{
	padding: 15px;
}

.listingSheetItemBlocker{
	/*border-color: red;*/
}

.listingSheetItemListMode1 {
	height: 7.2em !important;
	min-height: 7.2em !important;
	margin: 2px;
}
.listingSheetItemListMode1_user {
	height: 9em !important;
	min-height: 9em !important;
	margin: 2px;
}
.listingSheetItemListMode1_project {
	height: 7.2em !important;
	min-height: 7.2em !important;
	margin: 2px;
}

.listingSheetItemListMode2 {
	height: 63px !important;  /* 35px +28px for the tiny icons +2px for subscript number */
	min-height: 63px !important;
	margin: 2px;
}
.listingSheetItemListMode2_user {
	height: 92px !important;  /* 62px +28px for the tiny icons +2px for subscript number */
	min-height: 92px !important;
	margin: 2px;
}
.listingSheetItemListMode2_project {
	height: 63px !important;  /* 35px +28px for the tiny icons +2px for subscript number */
	min-height: 63px !important;
	margin: 2px;
}

.listingSheetViewListMode {
	/*margin-bottom:8px !important;*/ 
	margin-left:0px !important; 
}

.listingSheetView {
/*	height:17px;*/
	min-height:17px;  
	width:100%; 
	float:left; 
	margin-top:0px; 
	margin-bottom:0px; 
	margin-left:8px; 
	margin-right:0px;
}

.listingSheetItemBodyListMode1,
.listboxBtnTblListMode2,
.listingSheetItemBodyDescrpTxtListMode2,
.listingSheetItemBodyExtraTxtListMode2{
	visibility: hidden !important;
	display: none;
}

.listingSheetItemLst{
	margin-top: 25px;
}

.showToggleFullDetailBoxOpt{
	display: block !important;
}


.listingSheetItemBodyDescrpTxt {
	/*
	font-style: italic;
	color: #62acd4;
	*/
	color:rgb(215, 229, 241);
	margin-block-start: 13px;
	margin-block-end: 0px;
	height:4.5em;
	min-height:4.5em;
	max-height:4.5em;
	word-break:break-all;
	font-size: x-small;
}

.listingSheetItemBodyExtraTxt {
	margin-block-start: 0px;
	margin-block-end: 0px;
	height:3.5em;
	min-height:4.5em;
	max-height:4.5em;
	word-break:break-all;
}

.listingSheetItemHeader {
	margin: 0px;
	padding: 0px;
	/*height: 30px;  15px;*/
	object-fit: contain;
    height: 7.2em; /*105px;*/
    min-height: 7.2em;
    max-height: 7.2em;
    background-color: rgb(66, 87, 124);
}

.listingSheetItemOptions {
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 0px;
	background: rgb(169, 199, 215);
	color: black;
	float: right;
	text-align: right;
}

.listingSheetItemOptions:hover {
	/*background: rgb(195, 255, 191);*/
	cursor: pointer;
}

.listingSheetItemLaunch:hover {
	/*border-color: rgb(195, 255, 191);*/
	cursor: pointer; 
	/*    cursor:  url(images/icons/ovw.ani), wait;/*trys to use the ovw.ani but if that fails it uses wait.*/
	/*   cursor:  url(images/icons/ovw.ani), auto; /*I get nothing, but this is the icon that works in a os mouse properties.*/
	/*  cursor:  url(images/icons/ov_wait.gif), auto; /*works but image is static, no animation==============*/
	/*
	  If you are declaring an image cursor, remember to always define a generic cursor 
	  at the end of the list in case none of the url-defined cursors can be used. A list 
	  of cursors should be specified, followed by a standard cursor designation. Then, 
	  if the user�s browser cannot handle the image cursor, it will use the the other 
	  specified cursor. If that doesn�t work, it will use the default cursor defined 
	  by the browser. {cursor: url("firstcursor.cur"), url("secondcursor.cur"), pointer;}
  */
}

.listingSheetItemTitle{
	float:left; 
	padding: 2px; 
	text-align:left;
	width:calc(100% - 35px);  /*29px   85%;*/ 
    max-width:calc(100% - 35px);  /*22px  85%;*/
    word-break: break-all;
    font-size: 14px;
}

.listingSheetItemBody {
	text-align: left;
	overflow: hidden;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	float: left;
	width: 95%;
	object-fit: contain;
	display: block;
	color: black;
}

.listingSheetItemBodyText {
	padding: 5px;
}

.right-listsheetTitle {
	padding-left: 5px !important;
	padding-right: 25px !important;
}

.left-listsheetTitle {
	padding-left: 5px;
	padding-right: 5px;
	color: rgb(50, 72, 113);
}

.tight {
	padding: 0px;
	margin: 0px;
	/* width: 100%; */
	border: none;
	text-align: center;
}

.tight100 {
	padding: 0px;
	margin: 0px;
	width: 100%;
	border: none;
	background-color: rgb(204,220,228)
   /*rgb(152, 185, 202);*/
	/*rgb(213, 244, 208);*/
}

.toolIcon {
	padding: 0px;
	margin: 0px;
	font-size: 0px;
	border: none;
}

.imgWrap {
	position: relative;
	/* height: 45px;
  width: 45px; */
}

.imgDescription {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: 20px;
	margin-top: 20px;
	/* background: rgba(29, 106, 154, 0.72);*/
	color: rgb(0, 0, 165); /*blue;rgb(31, 150, 36);rgb(40, 133, 255);*/
	background-color: rgb(169, 199, 215); /*powderblue;*/
	font-weight: bold;
	visibility: hidden;
	opacity: 0;
	/*remove comment if you want a gradual transition between states*/
	-webkit-transition: visibility opacity 0.2s;
}

.imgWrap:hover .imgDescription {
	visibility: visible;
	opacity: 1;
}

.imgWrap:hover .toolIcon {
	visibility: visible;
	opacity: .2;
	-webkit-transition: visibility opacity 0.2s;
}

.imageWrapTable {
	width: 100%;
	border-spacing: 0px;
}

.imageWrapRow {
	width: 100%;
}

.imageWrapCell {
	width: 15%;
}
/******************************************** LISTING SHEET ***************************END**/

/******************************************** TOOL TIP FUNCTIONALITY ******************START**/
.tooltip {
	position: relative;
	display: inline-block;
	/* border-bottom: 1px dotted rgb(219, 204, 227);*/
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: rgb(219, 204, 227);
	color: rgb(7, 47, 77);
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	/* Position the tooltip */
	position: absolute;
	z-index: 800;
	opacity: 11;
}

.tooltip-left {
	top: -15px;
	bottom: auto;
	right: 102%;
}

.tooltip-left::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -7px;
	border-width: 7px;
	border-style: solid;
	border-color: transparent transparent transparent rgb(219, 204, 227);
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}
/******************************************** TOOL TIP FUNCTIONALITY ******************END**/

/******************************************** FEATURE LAYER TYPE ICON PICKER **********START**/
.lft-selector input {
	margin: 0;
	padding: 0;
	display: none;
}

.point {
	background-image: url(../images/icons/featurePoint.png);
}

.line {
	background-image: url(../images/icons/featureLine.png);
}

.poly {
	background-image: url(../images/icons/featurePoly.png);
}

.nongeo {
	background-image: url(../images/icons/featureNonGeo.png);
}

.interpret {
	background-image: url(../images/icons/featureInterpret.png);
}

.lft-selector input:active+.icon-lft {
	opacity: 1;
}

.lft-selector input:checked+.icon-lft {
	-webkit-filter: none;
	-moz-filter: none;
	filter: none;
    cursor: not-allowed; /* ment to match the disabled input cursor, see input[type=text]:disabled */
    color: #A0A0A0;
}

.icon-lft {
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 37px !important;
	padding-top: 40px;
	-webkit-transition: all 100ms ease-in;
	-moz-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
	-webkit-filter: brightness(1.8) grayscale(1) opacity(.4);
	-moz-filter: brightness(1.8) grayscale(1) opacity(.4);
	filter: brightness(1.8) grayscale(1) opacity(.4);
	font: 12px/13px Georgia, serif;
}

.icon-lft:hover {
	-webkit-filter: brightness(1.2) grayscale(.5) opacity(.8);
	-moz-filter: brightness(1.2) grayscale(.5) opacity(.8);
	filter: brightness(1.2) grayscale(.5) opacity(.8);
}
/******************************************** FEATURE LAYER TYPE ICON PICKER **********END**/

/******************************************** FILE UPLOAD *****************************START***/
#progressbox {
	border: 1px solid #CAF2FF;
	padding: 1px;
	position: relative;
	width: 400px;
	border-radius: 3px;
	margin: 10px;
	display: none;
	text-align: left;
}

#progressbar {
	height: 20px;
	border-radius: 3px;
	background-color: #CAF2FF;
	width: 1%;
}

#statustxt {
	top: 3px;
	left: 50%;
	position: absolute;
	display: inline-block;
	color: #FFFFFF;
}
/******************************************** FILE UPLOAD *****************************END**/

/******************************************** DATA SOURCE SELECTION *****************************START***/
.dataSourceHeader {
	width:25%; 
	background: whitesmoke; 
	color: rgb(50, 72, 113);
}

.dataSourceOption {
	
}
/******************************************** DATA SOURCE SELECTION *****************************END**/

/******************************************** FOLDERS *********************************START**/
.scrolly {
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	/***********this is messing things up****************/
	margin: 0px 0px;
	padding: 5px;
	text-align: center;
	/*  width: 98.5%; */
	width: calc(100% - 17px);
	/** subtract 14px listingSheet boarder & 3px listingSheetItem boarder **/
	height: 100px;
	min-height: 100px;
}

#FolderList a {
	margin: 0px 0px;
	display: inline-block;
	text-decoration: none;
	color: black;
}

#FolderList img {
	width: 100px;
	height: 85px;
}

.caption {
	display: flex;
	position: relative;
	top: -65px;
	left: 8px;
	font-size: 0.95em;
	color: rgb(7, 47, 77);
	height: 0px;
	margin: 0px 0px;
	padding: 0px;
}
/******************************************** FOLDERS *********************************END**/

/******************************************** PROJECT USERS ***************************START**/
.utable {
	width: 100%;
	max-width: 100%;
	margin-bottom: 2rem;
	background-color: rgb(152, 185, 202); /**#ffffff;**/
}

.utable>thead>tr, .utable>tbody>tr, .utable>tfoot>tr {
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.utable>thead>tr>th, .utable>tbody>tr>th, .utable>tfoot>tr>th, .utable>thead>tr>td,
	.utable>tbody>tr>td, .utable>tfoot>tr>td {
	text-align: left;
	padding: 0.3rem;
	vertical-align: top;
	border-top: 0;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.utable>thead>tr>th {
	font-weight: 900;
	color: rgb(169, 199, 215); /**#757575;**/
	background-color: rgb(30, 76, 110);
	vertical-align: bottom;
	/**border-bottom: 1px solid green;rgba(0, 0, 0, 0.12);**/
}

.utable>caption+thead>tr:first-child>th, .utable>colgroup+thead>tr:first-child>th,
	.utable>thead:first-child>tr:first-child>th, .utable>caption+thead>tr:first-child>td,
	.utable>colgroup+thead>tr:first-child>td, .utable>thead:first-child>tr:first-child>td
	{
	border-top: 0;
}

.utable .no-border {
	border: 0;
}

.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th,
	.table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td,
	.table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
	padding: 0.8rem;
}

.table-bordered {
	border: 0;
}

.table-bordered>thead>tr>th, .table-bordered>tbody>tr>th,
	.table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td,
	.table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td {
	border: 0;
	border-bottom: 1px solid rgb(30, 76, 110);
}

.table-bordered>th.utabletr>th, .table-bordered>thead>tr>td {
	border-bottom-width: 2px;
}

.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th
	{
	background-color: rgb(169, 199, 215); /**#f5f5f5;**/
}

.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
	background-color: white;
	/*
	background-color: rgb(239, 252, 226);
	color: rgb(7, 47, 77);
	*/
	/**rgba(0, 0, 0, 0.12);**/
}
/******************************************** PROJECT USERS ***************************END**/

/******************************************** JQUERY ACCORDION OVERRIDES **************START**/
.bui-accordion-header-widthfix{
	width: calc(100% - 5px) !important;
	margin-left: -1px!important;
}

.ui-accordion .bui-accordion-header {
	cursor: pointer;
	position: relative;
	margin: 1px;
	min-height: 30px; /* support: IE7 */
	width: 900px;
	height: 35px;
	padding: 2px;
	font-weight: 900;
	font-size: 17px;
	line-height: 1.5; 
	
	color: black;
	/*
	color: white;
	background: linear-gradient(#abc8f1, #455d84, #22417d, #455d84, #abc8f1);
	*/
	background: linear-gradient(#6b93e0, #6e83a7, #bdd6f9, #abc8f1, #6e83a7, #5b75a2, #4770c1);

	/*   background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
	/*   background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
	/*   background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
	/*   background: linear-gradient(red, yellow); /* Standard syntax */
}

.ui-widget {
    /* font-family: Verdana,Arial,sans-serif; */
    /* font-size: 1.1em; */
    font-family: inherit;
    font-size: inherit;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    /* font-family: Verdana,Arial,sans-serif; */
    /* font-size: 1.1em; */
    font-family: inherit;
    font-size: inherit;
}

.ui-widget-content {
	border: 1px solid #aaaaaa;
	color: #222222;
	/*background-color: rgb(118, 159, 181); this color messes up the dialog popups when you stretch them larger than scroll area.*/
	background-color: rgb(230, 233, 238);  /*rgb(169, 199, 215);*/
}

.ui-helper-reset {
    line-height: 1.0;
    text-decoration: none;
}

/*the green check icon*/
.ui-icon {
	background-image:
		/*url(https://download.jqueryui.com/themeroller/images/ui-icons_81f577_256x240.png)
		!important;*/
}

.ui-icon {
	font-size: 2em;
}

.ui-state-active{

}

.ui-state-highlight{
	border: 1px solid #222222 !important;
	background-color: rgb(195, 255, 191) !important;
	color: #363636 !important;
	font-weight: bold !important;
	box-shadow: inset 1px 1px 3px #999;
}

.ui-accordion p:not .ui-state-active :hover {
	color: #a1f29b
}

.ui-accordion .ui-accordion-icons {
	/* width: 900px; */
	height: 30px;
	min-height: 30px;
}

.ui-accordion .ui-accordion-content {
	overflow: auto;
	border: 3px solid rgb(169, 199, 215);
	margin: 0px;
	padding: 10px;
	border-top: 10px;
}

.ui-accordion .acc_header {
	font-size: 24px;
	font-weight: bold;
	font-family: "CordiaUPC";
	font-color: white;
}

#accordion .p {
	-webkit-margin: 5px;
	-margin: 5px;
}

#accordion .all-icon {
	background-image: url(../images/icons/noFilterSm.png);
	background-repeat: no-repeat;
	padding-left: 40px;
	min-height: 60px;
	height: 60px;
}

#accordion .build-icon {
	background-image: url(../images/icons/buildFilter.png);
	background-repeat: no-repeat;
	padding-left: 40px;
	min-height: 60px;
}

#accordion .advanced-icon {
	background-image: url(../images/icons/advancedFilter.png);
	background-repeat: no-repeat;
	padding-left: 40px;
	min-height: 60px;
}
/******************************************** JQUERY ACCORDION OVERRIDES **************END**/

.ui-dialog .ui-resizable-n {
	height: 10px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 10px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 10px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 10px;
	left: 0;
}








/********************************** The switch - the box around the slider *****************************start*/
.switch {
  position: relative;
  display: block;
  width: 35px; /*55*/ 
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0dede;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #800000;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/********************************** The switch - the box around the slider *****************************end*/