/* ###################   collapseCss   ################### */


.toggleOn:before {
	content: "\2193";
}
.toggleOff:before {
	content: "\2192";
}
.toggleOn:hover, .toggleOff:hover {
	text-decoration: none;
}

/* ###################   colors   ################### */


.SBRedText {
	color: red;
}

.SBBlackText {
	color: black;
}

/* ###################   comboBoxCss   ################### */


.SBComboBoxAnchor {
	width:20pt;
	height: 20pt;
	margin: 0pt;
	padding: 0pt;
	margin-top:-4pt;
}
.SBComboBoxAnchor img {
	border: 1pt solid ThreeDDarkShadow;
	background-color: ThreeDFace;
	margin-bottom:-4pt;
	margin-top:-3pt;
	margin-left: 2pt;
	margin-right: -2pt;
}

.SBComboBoxAnchor img.disabled {
	border: 1pt solid ThreeDFace;
	background-color: ThreeDFace;
	margin-bottom:-4pt;
}


.SBComboBoxDiv {
	border:1pt solid black;
	background-color: white;
	overflow-y:scroll;
	overflow-x:hidden;
	z-index: 100;
	height:160pt;
}
.SBComboBoxDiv ul {
	margin: 0pt;
	padding: 0pt;
	list-style-type:none;
}
.SBComboBoxDiv li {
	padding: 1pt;
	white-space: nowrap;
	font-size: 14pt;
	height:16pt;
}
.SBComboBoxDiv li.selected {
	border-top: 1pt solid darkblue;
	border-bottom: 1pt solid darkblue;
	padding: 0pt;
	padding-left: 1pt;
	background-color:lightblue;
}

/* ###################   dialogCss   ################### */


.dialogBackdrop {
	background-color:gray;
	opacity:0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

}
.dialogShaddowBackground {
	opacity:1;
	top:50%;
	left:50%;
	-moz-box-shadow:0 2pt 25pt black;
	-webkit-box-shadow:0 2pt 25pt black;
}

.dialogWindow {
	width:100%;
	height:100%;
	color: black;
	left: 0pt;
	top: 0pt;
}
.dialogTitle {
	left: 0pt;
	top: 0pt;
	background-color: gray;
	padding-top: 1pt;
	font-family: sans-serif;
	font-weight: bold;
	color: white;
}
.dialogTitle span {
	padding-left: 20pt;
}
.dialogContent {
	background-color: white;
	width: 100%;
	left:0pt;
}
.lightboxCanvas {
	background:#fff;
	margin-right: 10pt;
	padding: 10pt; 
}
.dialogBodyEditorOuterDiv {
	background-color: darkgray;
	width:100%;
	height:100%;
}
.dialogBodyEditorInnerDiv {
	border:2pt solid black;
	background-color: white;
}

/* ###################   dialogVertialButtons   ################### */



.OuterButtonContainer {
	max-height: calc(60vh - 120px);
	overflow-y: auto;
	overflow-x: hidden; 
	max-width: 100%;
}

.AllButtonsContainer {
	width: 100%;
	height: auto;
	}

/* ###################   fileUploadCss   ################### */


div.sbFileUploadButton {
	background-image: url('../SBCheserIconsLibrary32/mimetypes/application-x-desktop.png');
	width: 32px;
	height: 32px;
	display:inline-block;
	cursor: pointer;
}
div.sbFileUploadButton input[type=file] {
	opacity: 0; /*responds to clicks, but is not visible*/
	width: 0;
	height: 0;
	display: block;
	padding: 32px 32px 0 0; /* width and height are 0 to get rid of the native button, padding 32x32 creates the same extend */
	cursor: pointer;	/* cursor pointer works only on the area around the native button, hence the fiddle with padding */
}
.sbFileUploadButton:after {
	content: attr(data-sbprogress);
	display: block; /* makes the :after-element behave like a block element, too. So that it does not appear inside the sbFileUploadButton div */
}

/* ###################   ListSelectionDialog   ################### */


	.ListSelectionDialog a {
		cursor: pointer;
	}

/* ###################   panel   ################### */


.panel-alpha { 
	background: transparent !important;
	border-color: rgba(0 ,0 ,0 , 0.2) !important;
}

.panel-alpha>.card-header { 
		background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(200,200,200,0.7) );
		border-color: rgba(0 ,0 ,0 , 0.2) !important;
		color: #505050;
}


.panel-alpha>.card-body { 
		border-color: rgba(0 ,0 ,0 , 0.2) !important;
		background-color: rgba(255,255,255,0.8) ;
}

.panel-alpha>.card-footer {
		border-color: rgba(0 ,0 ,0 , 0.2) !important;
		background-color: rgba(220,220,220,0.8) ;
	
}

/* ###################   SBKeepFocusOverlay   ################### */


.SBKeepFocusOverlay {
	/*For version information placement in panel headings*/
	 position: fixed; 
	 left: 0px; 
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 1000000;
	display: none;
      opacity: 0.1;       
	background-color: white;
}

/* ###################   tabCss   ################### */


div.tabs ul { /* general settings */
		background: transparent;
		display: inline;
		text-align: left; /* set to left, right or center */
		margin: 1px 0 1px 0; /* set margins as desired */
		/*border-bottom: 1px solid darkgray; */ /* set border COLOR as desired */
		list-style-type: none;
		padding: 0px /*3px 10px 3px 10px; THIRD number must change with respect to padding-top (X) below */
}

div.tabs ul li.tab { /* do not change */
	display: inline;
	margin-left: 1px;
	background: transparent; /* set background color to match above border color */
}

div.tabs ul li.tab a { /* settings for all tab links */
	padding: 3px 2px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
	border: 1px solid darkgray; /* set border COLOR as desired; usually matches border color specified in #tabs */
	margin-right: 0pt; /* set additional spacing between tabs as desired */
	text-decoration: none;
	border-bottom: none;
	display: inline-block;
}

.tabs li.selected { /* settings for selected tab */
	border-bottom: 1px solid #fff; /* set border color to page background color */
	background: transparent; /* set background color to match above border color */
}

.tabs li.selected a { /* settings for selected tab link */
	background: white ; /* set selected tab background color as desired */
	color: #000; /* set selected tab link color as desired */
	position: relative;
	top: 1px;
	padding-top: 4px; /* must change with respect to padding (X) above and below */

	padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to 	padding-top (X) above */
	border: 1px solid darkgray; /* set border COLOR as desired; usually matches border color specified in #tabs */
	margin-right: 0pt; /* set additional spacing between tabs as desired */
	text-decoration: none;
	border-bottom: none;

}

div.tabs ul a:hover { /* settings for hover effect */
	background: #fff; /* set desired hover color */
}

/* ###################   versionInformationContainer   ################### */


.seamless-version-information {
	/*For version information placement in panel headings*/
	 	position: absolute; 
          right: 20px; 
          top: 0px; 
	z-index: 1000;
	opacity: 0.6;
	text-shadow: 1px 1px white;
}


.seabreeze-version-information-container {

}

.seabreeze-version-information-container .seamless-appname{
		font-family: "Trebuchet MS", "Times";
		/*font-style: italic;*/
		font-weight: normal;
		font-size: 18px;
}

.seabreeze-version-information-container .seamless-version {
		font-family: "Arial Narrow";
		font-weight: normal;
		font-size: 14px;
}

/* ###################   backgroundImageContainer   ################### */
 

.SBBackgroundImageContainer__ {

	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: hidden;

}

.SBBackgroundImageContainer__ img {
	width: 100%;
	height: auto;
	
}

/* ###################   contentContainer   ################### */
 

.SBContentContainer__ {

	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: auto;
	padding: 20px;
}

/* ###################   SBLayoutTable   ################### */


table.SBLayoutTable {
	border-collapse: collapse;
	border: none;
	margin: 0px !important;
}

td.SBLayoutCell {
	border: 0px !important;
	padding: 0px !important;
}