/*
Layout classes used in Orion.
The model is one of a "side panel" defaulting to 1/3 width on the left and a "main panel" taking the rest
of the room.  A page always has a fixed header but may have a fluid footer (at the bottom of content) or
a fixed footer on the bottom of the page.

To split a page in different proportions, modify the left hand position of the split bar to override the
33% width position described in the class splitLayout

The transition delays used for splitter animation (0.5) have a relationship with the animation delay used
by the splitter bar.  If these values change, then change the delay in the splitter.

Items that should appear on top of other orion visual components should have a z-index of 100 or greater.  Values
under 100 are used to achieve layering of the header, footer, and splitters.
*/

/*
There are implied LESS variables here, for now set up as layout classes that live here and refer to the
hard-coded numbers elsewhere.
*/

/* $HeaderHeight */
.headerLayout {
	height: 35px;
}

/* $ToolbarHeight */
.toolbarLayout {
	height: 35px;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	-webkit-align-items: center;		 		 /* Safari */
	align-items: center;
}

/*
 * Filesystem switcher toolbar.
 */
.fsToolbarLayout {
	height: 26px; /* $FSToolbarHeight */
}

/* $FooterHeight */
.footerLayout {
	height: 35px;
	padding-left: 8px;
	font-size:0.9em;
	font-weight:bold;
}

/* Banner Layout Classes */

.bannerLeftArea{
	
	-ms-flex: 1 6 20%;
	-moz-box-ordinal-group: 1;	
	-webkit-order: 1;
	-ms-flex-order: 1;              /* TWEENER - IE 10 */
	order: 1; 

	-moz-box-flex: 1;

	-webkit-box-flex:1;
	-webkit-box-ordinal-group: 1;
    
    width: 20%;
    
    padding-left:5px;
}

.bannerMiddleArea{
	-ms-flex: 3 1 60%;

	-webkit-order: 2;
	-ms-flex-order: 2;              /* TWEENER - IE 10 */
	order: 2;  

 	-moz-box-flex: 1;
    -moz-box-ordinal-group: 2;
    
    -webkit-box-flex:1;
	-webkit-box-ordinal-group: 2;
    width: 60%; 
}

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
  
  .bannerMiddleArea{
	-ms-flex: 3 1 60%;

	-webkit-order: 2;
	-ms-flex-order: 2;              /* TWEENER - IE 10 */
	order: 2;  

 	-moz-box-flex: 1;
    -moz-box-ordinal-group: 2;
    
    -webkit-box-flex:1;
	-webkit-box-ordinal-group: 2;
    width: 59%; 
}
  
}

.footer {
	display: none;
}

.footer-visible {
	display: block;
}

.bannerRightArea{
	-ms-flex: 1 6 20%;
	-moz-box-ordinal-group: 3;
	-webkit-order: 3;
	-ms-flex-order: 3;              /* TWEENER - IE 10 */
	order: 3;  

	-moz-box-flex: 1;
	
	-webkit-box-flex:1;
	-webkit-box-ordinal-group: 3;

    width: 20%; 
    padding-right:5px;
}

.banner-maximized {
	display: none;
}

.footer-maximized {
	display: none;
}

.content-fixedHeight {
	clear: both;
	overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 35px;
    right: 0;
    background: #3b4b54;
	/*margin-bottom: 29px;*/
}

.content-fixedHeight-animation {
    transition: left 0.3s ease; /* if this is changed SideMenu.js->TRANSITION_DURATION_MS needs to be changed as well */
}

.content-fixedHeight-withFooter {
	/* bottom: 36px; $FooterHeight + footer border (1px) */    
	bottom: 35px;
}

.content-fixedHeight-maximized {
	top: 0;
	bottom: 0;
}

.content-sideMenu-closed {
	left: 0;
}

.content-fluid {
}

.footer-fixed-bottom {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	/* height: 36px;  It has to be this */
	height: 35px;
}

.footerBlock {
	float: left;
	margin: 8px;
	color: #7F7F7F;
	font-weight: bold;
}

.footerBlockShutdown {
	color: red;
	font-size: 10pt;
}

.footerRightBlock {
	float: right;
	margin: 8px 8px 0 4px;
}

.footerRightBlock ul {
	margin: 0;
	margin-top:4px;
	font-size: .9em;
	margin-right: 4px;
}

.footerRightBlock li {
	display: inline;
}

.footerRightBlock li:after {
	content: ' ';
	padding: 0 8px;
}

.footerRightBlock li:last-child:after {
	content: none;
}

.layoutBlock {
	clear: both;
	margin: 0;
	vertical-align: baseline;
}

.layoutBlock:not(.footerLayout) {
	/* padding: 2px 8px; */
	padding: 4px 4px 0 4px;	
}

.layoutLeft {
	float: left;
	margin: 0;
}

.layoutRight {
	float: right;
	margin: 0;
}

.layoutFlexStretch {
	flex: 1 1;
	-ms-flex: 1 1;
	-webkit-flex: 1 1;
}

.spacingLeft {
	margin-left: 5px;
}

.spacingRight {
	margin-right: 5px;
}

.clear {
	clear: both;
}

.hidden {
	visibility: hidden;
}

.sidePanelLayout {
	display: block;
	position: absolute;
	left: 0;
	width: 33%;
	height: 100%;
}

.generalAnimation {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	z-index: 50;
    overflow: auto;
}

.sidePanelLayoutAnimation {
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-o-transition: width 0.5s ease;
	transition: width 0.5s ease;
	z-index: 50;
    overflow: auto;
}

.sidePanelVerticalLayout {
	display: block;
	position: absolute;
	top: 0;
	height: 33%;
	width: 100%;
}

.sidePanelVerticalLayoutAnimation {
	-webkit-transition: height 0.5s ease;
	-moz-transition: height 0.5s ease;
	-o-transition: height 0.5s ease;
	transition: height 0.5s ease;
	z-index: 50;
    overflow: auto;
}

.sidePanelMargins {
	margin-left: 8px;
	margin-top: 2px;
    margin-bottom: 8px;
    width: auto;
}

.mainPanelLayout {
	display: block;
	position: absolute;
	right: 0;
	height: 100%;
}

.mainPanelLayoutAnimation {
	-webkit-transition: left 0.5s ease;
	-moz-transition: left 0.5s ease;
	-o-transition: left 0.5s ease;
	transition: left 0.5s ease;
}

.mainPanelVerticalLayout {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.mainPanelVerticalLayoutAnimation {
	-webkit-transition: top 0.5s ease;
	-moz-transition: top 0.5s ease;
	-o-transition: top 0.5s ease;
	transition: top 0.5s ease;
}

.fixedToolbarHolder {
	position: relative;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	min-width:140px;
	background:#3b4b54;
}

.sidebarWrapper {
	overflow: hidden;
	min-width: 0;
}

.sidebarWrapper > .sidebar {
	position: relative;
	left: 0;
	top: 0;
	height: calc(100% - 35px);
	overflow-x: visible;
}

.projectNavSidebarWrapper > .sidebar {
	height: calc(100% - 0px);
}

.workingTarget {
	position: absolute;
	top: 0;
	width: 100%;
	bottom: 0;
	overflow-y: auto;
	background:white;
}

.toolbarTarget {
	position: absolute;
	top: 35px;  /* $ToolbarHeight + 2 */
 	width: 100%;
 	overflow-y: auto;
}

.toolbarTarget-toolbarHidden {
	top: 0;
}

.pageLayoutTarget {
	position: absolute;
 	width: calc( 100% - 15px );
 	bottom: 0;
 	overflow-y: auto;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); /* 0 0 0 1px #d1d1d1,0 0 4px 1px #ccc; */
	margin: 5px;
	margin-right: 0;
	padding-top: 10px;
	padding-bottom: 5px;
	background: white;
}

.hasSplit {
   display: none;
}

.editorViewerFrame {
	width: 100%;
	height: 100%;
}

 .editorViewerHeader {
	align-items: center;
 	background: #3B4B54;
	color: white;
	display: flex;
	flex-direction: row;
	height: 35px;
}

.editorTabContainerOuter {
	height: 100%;
	line-height: 26px;
	width: 100%;
	overflow: hidden;
}

.editorTabContainer {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	outline: none;
	overflow-x: hidden;
	padding: 0;
	position: relative;
	white-space: nowrap;
	z-index: 3;
}

.editorTab {
	border-top: 1px solid black;
	border-right: 1px solid black;
	padding-top: 1px;
	display: flex;
	flex: 0 1 auto;
}

.editorTabContent {
	display: flex;
	flex: 0 1 auto;
	margin: 3px;
	overflow-x: hidden;
}

.editorTabContentFocus {
	outline: none;
	display: flex;
	flex: 0 1 auto;
}

.editorTabsDisabled {
	border: none !important;
	background: inherit !important;
}

.editorTabCloseButton {
	border-radius: 50%;
    margin: auto 5px auto 5px !important;
    font-size: 12px !important;
    height: 10px;
    line-height: 10px !important;
    padding: 0 1.5px 1.5px 0px !important;
    text-align: center;
    width: 10px;
    font-style: normal;
}

.editorTabCloseButton:hover {
	background-color: rgb(61, 114, 179);
	color: #FFFFFF;
}

.editorViewerHeaderDirtyIndicator {
	padding-left: 5px;
}

.editorViewerHeaderTitle {
	padding-left: 5px;
	overflow: hidden;
    white-space: nowrap;
    flex: 1 1 auto;
}
.transient {
	font-style: italic;
}

.editorViewerTabDropdown {
	justify-content: flex-end;
	margin-right: 10px;
	margin-left: 10px;
}

.editorViewerContent {
	position: absolute;
	width: 100%;
	top: 34px;
	bottom: 0;
	overflow: auto
}

.editorViewerPicInPic {
	position: absolute;
	border: 1px solid #ccc;
	background-color: white;
	z-index: 100;
	bottom: 35px;
	right: 35px;
	width: 40%;
	height: 40%;
}

.focusedEditorTab {
	border-top: 2px solid;
	padding-top: 0;
	background: white;
	color: black;
}

.hideOnDrag {
  transform: translateX(-9999px);
}


/* 
 * NOTE: Please don't apply margin values to the splitter as the splitter.js
 * code doen't take them into account during its layout
 */
.splitLayout {
	position: absolute;
	left: 33%;  /* override this value if you want a different proportion of the two split panes */
	height: 100%;
	z-index: 51;
	width: 3px;
	cursor: e-resize;
	visibility: hidden;  /* use visibility vs. display because we need a position in calculations */
}

/* 
 * NOTE: Please don't apply margin values to the splitter as the splitter.js
 * code doen't take them into account during its layout
 */
.splitVerticalLayout {
	position: absolute;
	top: 33%;  /* override this value if you want a different proportion of the two split panes */
	width: 100%;
	z-index: 51;
	height: 3px;
	cursor: n-resize;
	visibility: hidden;  /* use visibility vs. display because we need a position in calculations */
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
	/* 
	 * NOTE: Please don't apply margin values to the splitter as the splitter.js
	 * code doen't take them into account during its layout
	 */
	.splitLayout {
		position: absolute;
		left: 33%;  /* override this value if you want a different proportion of the two split panes */
		height: 100%;
		z-index: 50;
		width: 20px;
		cursor: e-resize;
		visibility: hidden;  /* use visibility vs. display because we need a position in calculations */
	}
	
	/* 
	 * NOTE: Please don't apply margin values to the splitter as the splitter.js
	 * code doen't take them into account during its layout
	 */
	.splitVerticalLayout {
		position: absolute;
		top: 33%;  /* override this value if you want a different proportion of the two split panes */
		width: 100%;
		z-index: 50;
		height: 20px;
		cursor: n-resize;
		visibility: hidden;  /* use visibility vs. display because we need a position in calculations */
	}
	
}

.splitThumbLeftLayout {
	position: absolute;
	left: 100%;
	height: 4em;
	width: 4px;
	top: calc(50% - 2em);
	margin-left: -1px;
	cursor: pointer;
	border-top-right-radius: 5px;
  	border-bottom-right-radius: 5px;
}

.splitThumbRightLayout {
	position: absolute;
	right: 100%;
	height: 4em;
	width: 4px;
	top: calc(50% - 2em);
	margin-right: -1px;
	cursor: pointer;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;	
}

.splitVerticalThumbUpLayout {
	position: absolute;
	top: 100%;
	width: 4em;
	height: 4px;
	left: calc(50% - 2em);
	margin-top: -1px;
	cursor: pointer;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;	
}

.splitVerticalThumbDownLayout {
	position: absolute;
	bottom: 100%;
	width: 4em;
	height: 4px;
	left: calc(50% - 2em);
	cursor: pointer;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.splitLayoutAnimation {
	-webkit-transition: left 0.5s ease;
	-moz-transition: left 0.5s ease;
	-o-transition: left 0.5s ease;
	transition: left 0.5s ease;
}

.splitVerticalLayoutAnimation {
	-webkit-transition: top 0.5s ease;
	-moz-transition: top 0.5s ease;
	-o-transition: top 0.5s ease;
	transition: top 0.5s ease;
}

.panelTracking {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: auto;
}

/* command layout */

/* spacing for commands in a list */
.commandList {
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	list-style-type: none;
	vertical-align: baseline;
}

.commandList > li {
	float: left;
	margin-left: 4px;
	margin-right: 4px;
}

/* for commands not in a list we add margins for backward compatibility */
.commandMargins {
	margin-left: 4px !important;
	margin-right: 4px !important;
}

.commandMargins:last-child {
	margin-right: 0 !important;
}

/* ----- side menu begin ----- */

.sideMenu{
    width: 35px;
    background: #26343F;
	float: left;
    position: absolute;
    top: 0;
    bottom: 0;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
    display:block;
    margin:0;
    font-family: sans-serif;
	font-size:10px;
	text-decoration:none !important;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
}

.sideMenu.animating {
	z-index: 0;
}

.sideMenu.content-fixedHeight-withFooter {
	/* bottom: 36px; $FooterHeight + footer border (1px) */   
    bottom: 35px;
}

.sideMenu-maximized {
	top: 0;
	bottom: 0;
}

.sideMenu-closed {
	width: 0;
	display: none;
}

.sideMenuHome{
	width: 100%;
	height: 35px;
}

.sideMenuList{
	display:inline-block !important;
	height: calc(100% - 64px);
	margin: 0;
	overflow-y: hidden;
	padding: 0;
	text-align: center;
	width: 100%;
}

.sideMenuItem{
	list-style-type: none;
	font-size:16px !important;
	padding: 0;
	margin: 3px;
}

.sideMenuItem:hover, .sideMenuItem.expanded {
	text-decoration:none;
	color:#F47D64  !important;
}

.sideMenu:hover > .sideMenuScrollButton {
	opacity: 1;
}

.sideMenuScrollButton {
	background-color: rgba(0,0,0,0.5) !important;
	color: white !important;
	cursor: pointer;
	display: none;
	height: 19px;
	opacity: 0.5;
	position: absolute;
	width: 100%;
	z-index: 100;
	outline:none;
}

.sideMenuScrollButton.visible {
	display: block;
}

.sideMenuTopScrollButton {
	-webkit-transform: rotate(180deg);		/* Safari */
	transform: rotate(180deg);
}

.sideMenuBottomScrollButton {
	bottom: 0;
	left: 0;
}

/* Dropdown menu scroll buttons */
.menuScrollButton:hover {
	opacity: 1;
}

.menuScrollButton {
	background: linear-gradient(rgba(1,1,1,.2), white) !important;
	color: black !important;
	display: none;
	cursor: pointer;
	height: 20px;
	position: absolute;
	outline: none; /* these button must not take focus*/
	width: 100%;
	z-index: 200;
}

.menuTopScrollButton {
	-webkit-transform: rotate(180deg);		/* Safari */
	transform: rotate(180deg);
}
/* End of dropdown menu scroll buttons */

/* icon links */
.sideMenuItem > .submenu-trigger {
	color:  #6D8B93 !important;
	font-size:16px;
	text-decoration:none !important;
	width: 100%;
	display: inline-block;
	padding: 4px 0 4px 0;
}
.sideMenuItem>.submenu-trigger:hover, .sideMenuItem.expanded>.submenu-trigger{
	text-decoration:none;
	color:white !important;
}

.sideMenuItemActive {
}

.sideMenuItemActive > .submenu-trigger {
	color: white !important;
}

.sideMenuToggle {
	display: none;
}

.sideMenu-notification {
	position: relative; /* Required for absolute positioning of the badge. */
}
.sideMenu-notification[level=info] {
	background-image: radial-gradient(#1EB3DC, #1EB3DC 2px, transparent 3px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
    background-position: 30px 29px;
}

.sideMenu-notification[level=warn] {
	background-image: radial-gradient(#FFFF66, #FFFF66 2px, transparent 3px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
    background-position: 30px 29px;
}

.sideMenu-notification[level=error] {
	background-image: radial-gradient(#FF0000, #FF0000 2px, transparent 3px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
    background-position: 30px 29px;
}

/* sub menus */
.sideMenuSubMenu{
	display: none;
	list-style-type:none;
	position:absolute;
	font-family:sans-serif;
	padding-left: 0;
	z-index:100;
	text-align: left;
	left: 40px;
}

.sideMenuSubMenuItem{
	display: inline-block;
	width: 100%;
	white-space: nowrap;
	font-size: 12px;
    background: white;
	border-right:1px solid #ddd;
}

/* left arrow */
.sideMenuSubMenuItem:before {
	width: 0;
	height: 0;
	top: 13px;
	content: "";
	left: -8px;
	position: absolute;
	z-index: 200;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid white;
}

.sideMenuSubMenuItem:first-child{
	border-top:1px solid #ddd;
	border-top-right-radius: 4px;
}

.sideMenuSubMenuItem:last-child{
	border-bottom:1px solid #ddd;
	border-bottom-right-radius: 4px;
}

.sideMenuSubMenuItem a {
	display: inline-block;
	color: #444;
	padding: 12px 30px 12px 10px;
	width: calc(100% - 30px - 10px + 8px); /* clamp to container's width, plus 5px fudge factor */
}

.sideMenuSubMenuItem a:hover{
	text-decoration:none;
	color: black !important;
}

/* 1) Set up special hover colors for submenu items */
.sideMenuSubMenuItem:hover {
	background-color: #fde7cf;
}

/* 2) Disable hover colors when submenu has only 1 item */
.sideMenuSubMenuItem:only-child:hover {
	/* background-color: white; */
}
.sideMenuSubMenuItem:only-child:hover a {
	color: #333;
}

.sideMenuSubMenuItem a span {
	display: inline-block;
}

/* Show submenu on hover, and when "expanded" is set programatically
 */
.sideMenuItem:hover .sideMenuSubMenu, .sideMenuSubMenu.expanded { 
    display:inline-block;
}

.sidebar-decorate-active {
	position: relative; /* Required for absolute positioning of the badge. */
    background: 
        radial-gradient(#1EB3DC, #1EB3DC 2px, #47575F 3px) no-repeat,
        #47575F;
    background-position:
        30px 29px,
        0 0;
    background-size: 
    	8px 8px;
}

/* .sideMenuitem:hover > li:hover ul {
    display: block;
    position: absolute;
    border-top: 1px solid #f39cbd;
    border-left: 1px solid #f39cbd;
} */
/* ----- side menu end ----- */

.mainContent{
	position:absolute;
	left:35px;
}

.innerPanels{
	position:absolute;
	width:100%;
	top:35px;
	bottom:0;
}

.userMenu {
}

.splash {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgb(57,75,84)/*rgb(38,52,63)*/;
	z-index: 149;
	display: block;
	box-shadow: 0 3px 7pt 0 rgba(0,0,0,0.3) inset;
}

.splash.modalBackdrop { /* splash should not be semi transparent when a dialog is open */
	opacity: 1;
}

.splashSeeThroughX {
	-webkit-animation-name: splashSeeThrough;
	animation-name: splashSeeThrough;
	animation-duration: 0.7s;
	background-color: rgba(38,52,63, 0.7);
}

@-webkit-keyframes splashSeeThrough { 
	from {background-color: rgb(38,52,63);}
	to {background-color: rgba(38,52,63, 0.7);}
}

@keyframes splashSeeThrough { 
	from {background-color: rgb(38,52,63);}
	to {background-color: rgba(38,52,63, 0.7);}
}


.splashContainer {
    display: flex;
	display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    height:100%;
    flex-direction: column;
    -webkit-flex-direction: column;
    font-family: sans-serif;
    font-size: 14px;
}

.splashLoader {
    display: flex;
	display: -webkit-flex;
    height:300px;
    width:100%;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
	background-color: rgb(57,75,84);
}

.splashAbout {
    text-align: center;
	color: #FFFFFF;
	font-size:16px;
	font-family: 'helvetica';
	font-weight: bold;
	margin-bottom: 10px;
}

.splashSteps {
	margin:20px; 
    max-width: 300px;
}

.splashStep {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
    -webkit-flex-direction: row;
	padding-top: 10px;
	padding-bottom:10px;
	height:24px;
}

.splashMessages {
}

.splashMessage {
	color: white;
	font-size: 14px;
}

.splashDetailedMessage {
	color: white;
	font-size: 12px;
	padding-left: 20px;
}

.splashVisual {
	width: 24px;
}

.splashVerbal {
	margin-left:20px;
	color: #3BDEFF;
	font-family: 'helvetica';
	font-weight: bold;
	margin-top: 3px; /* should not have to do this */
}

.splashVerbalwaiting {
	color:#707070;
}

.splashLoadingImage {
	-webkit-animation: 1.2s dark-theme-spinner steps(6) infinite;
	animation: 1.2s dark-theme-spinner steps(6) infinite;
	
	padding: 0;
	background: inherit;
	display: inline-block;
	vertical-align: middle;
	margin-left: 9px;
	margin-top: 8px;
	width: 6px;
	height: 6px;
	font-size: 10px;
	border-radius: 50%;
	z-index: 101;
	-webkit-font-smoothing: antialiased;
}

.splashLoadingImage.initial {
}

@-webkit-keyframes dark-theme-spinner {
	0%,
  100% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 1), -0.9em 0 0 0 rgba(0, 178, 153, 0.8), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.6), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.4), 0.9em 0 0 0 rgba(0, 178, 153, 0.3), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.1);
	}

	16.67% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.8), -0.9em 0 0 0 rgba(0, 178, 153, 0.6), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.4), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.3), 0.9em 0 0 0 rgba(0, 178, 153, 0.1), 0.45em -0.78em 0 0 rgba(0, 178, 153, 1);
	}

	33.33% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.6), -0.9em 0 0 0 rgba(0, 178, 153, 0.4), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.3), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.1), 0.9em 0 0 0 rgba(0, 178, 153, 1), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.8);
	}

	50% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.4), -0.9em 0 0 0 rgba(0, 178, 153, 0.3), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.1), 0.45em 0.78em 0 0 rgba(0, 178, 153, 1), 0.9em 0 0 0 rgba(0, 178, 153, 0.8), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.6);
	}

	66.67% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.3), -0.9em 0 0 0 rgba(0, 178, 153, 0.1), -0.45em 0.78em 0 0 rgba(0, 178, 153, 1), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.8), 0.9em 0 0 0 rgba(0, 178, 153, 0.6), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.4);
	}

	83.33% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.1), -0.9em 0 0 0 rgba(0, 178, 153, 1), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.8), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.6), 0.9em 0 0 0 rgba(0, 178, 153, 0.4), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.3);
	}
}

@keyframes dark-theme-spinner {
	0%,
  100% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 1), -0.9em 0 0 0 rgba(0, 178, 153, 0.8), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.6), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.4), 0.9em 0 0 0 rgba(0, 178, 153, 0.3), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.1);
	}

	16.67% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.8), -0.9em 0 0 0 rgba(0, 178, 153, 0.6), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.4), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.3), 0.9em 0 0 0 rgba(0, 178, 153, 0.1), 0.45em -0.78em 0 0 rgba(0, 178, 153, 1);
	}

	33.33% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.6), -0.9em 0 0 0 rgba(0, 178, 153, 0.4), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.3), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.1), 0.9em 0 0 0 rgba(0, 178, 153, 1), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.8);
	}

	50% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.4), -0.9em 0 0 0 rgba(0, 178, 153, 0.3), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.1), 0.45em 0.78em 0 0 rgba(0, 178, 153, 1), 0.9em 0 0 0 rgba(0, 178, 153, 0.8), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.6);
	}

	66.67% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.3), -0.9em 0 0 0 rgba(0, 178, 153, 0.1), -0.45em 0.78em 0 0 rgba(0, 178, 153, 1), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.8), 0.9em 0 0 0 rgba(0, 178, 153, 0.6), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.4);
	}

	83.33% {
		box-shadow: -0.45em -0.78em 0 0 rgba(0, 178, 153, 0.1), -0.9em 0 0 0 rgba(0, 178, 153, 1), -0.45em 0.78em 0 0 rgba(0, 178, 153, 0.8), 0.45em 0.78em 0 0 rgba(0, 178, 153, 0.6), 0.9em 0 0 0 rgba(0, 178, 153, 0.4), 0.45em -0.78em 0 0 rgba(0, 178, 153, 0.3);
	}
}

.splashSuccessImage {
	background: url(../images/message_success_24.png) no-repeat top left;
	vertical-align: middle;
	display: inline-block;
	border: none;	
	height:24px;
	width:24px;
}
