/* @import "//fonts.googleapis.com/css?family=Raleway"; */

html {
  position: relative;
  min-height: 100%;
}


body {
	font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	/* Margin bottom by footer height */
	margin-bottom: 75px;
	overflow-y: scroll;
}

body > .container {
	padding: 60px 15px 0;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.loadingModal {
    display:    none;
    position:   fixed;
    z-index:    2000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                /*url('/app/images/loading.gif')  */
                50% 50% 
                no-repeat;
	
}

#loaderImg {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #398439;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Anytime the body has the loading class, our
   loadingModal element will be visible */
body.loading .loadingModal {
    display: block;
}

.clickable{
	cursor: pointer;   
}

.tokenfield.disabled, 
.tokenfield.disabled .token-input,
.tokenfield.disabled .token:hover,
.form-control[disabled],
input[type="checkbox"][disabled],
.tokenfield.disabled .token:hover .close {
  cursor: default;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: 60px;
	padding-top:20px;
	margin-top:15px;
	background-color: #f5f5f5;
	border-top-color: rgb(231, 231, 231);
	border-top-width: 1px;
	border-top-style: solid;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

.alert.alert-server {
	position: fixed;
	top: 50px; /* appear below the navbar */
	left: 0;
	width: 100%;
	z-index: 99999;
}

label {
    font-weight: normal !important;
}

legend {
    background-color: #eee;
    padding: 15px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 100;
}

h1 {
	font-size: 30px;
}
h1.heading {
    color: #777;
    font-size: 35px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 16px;
}

h4 {
	font-size: 14px;
}

h5 {
	font-size: 12px;
}

h6 {
	font-size: 10px;
}

h3, h4, h5 {
	margin-top: 5px;
	font-weight: 600;
}


.breadcrumb {
	background-color: #ffffff;
	padding: 0;
	margin-bottom: 0;
}

.breadcrumb>li a {
	color: inherit;
}

.breadcrumb>.active {
	color: inherit;
}
.breadcrumb {
    list-style: none;
}

div.logonheading {
   position: relative; 
   left: 150px;
   width: 100%; /* for IE 6 */
}

.heading_text {
   position: absolute; 
   top: -2px; 
   left: 70px; 
   width: 100%; 
}
.heading_image {
    position: relative; 
    width: 55px; 
    height: 55px;
    top: 10px; 
    left: 10px;
}

.navbar-brand, div.heading {
  display: flex;
  align-items: center;
}
.navbar-brand>img {
  width: 30px;
  height: 30px;
}

.synclog-entry {
  padding: 20px;
  margin: 10px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}
.synclog-entry h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.synclog-entry p:last-child {
  margin-bottom: 0;
}

.synclog-tracebtn {
    float: right;
}
.synclog-row {
    display: flex;
    background-color: #f5f5f5;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    margin: 3px 0;
}
.synclog-row-error {
    background-color: #ffebeb;
}
.synclog-row-succes {
    background-color: #ebffeb;
}

.synclog-column {
    flex: 50%;
}

    /* Tighten up space between multiple callouts */
.synclog-entry + .synclog-entry {
    margin-top: -5px;
}

/* Variations */
.synclog-entry-danger {
  border-left-color: #ce4844;
}
.synclog-entry-danger h4 {
  color: #ce4844;
}
.synclog-entry-warning {
  border-left-color: #aa6708;
}
.synclog-entry-warning h4 {
  color: #aa6708;
}
.synclog-entry-info {
  border-left-color: #1b809e;
}
.synclog-entry-info h4 {
  color: #1b809e;
}

.synclog-entry-success {
  border-left-color: #3c763d;
}
.synclog-entry-success h4 {
  color: #3c763d;
}

.float-label-control { position: relative; margin-bottom: 1.5em; }
    .float-label-control ::-webkit-input-placeholder { color: transparent; }
    .float-label-control :-moz-placeholder { color: transparent; }
    .float-label-control ::-moz-placeholder { color: transparent; }
    .float-label-control :-ms-input-placeholder { color: transparent; }
    .float-label-control input:-webkit-autofill,
    .float-label-control textarea:-webkit-autofill { background-color: transparent !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -moz-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; }
    .float-label-control input, .float-label-control textarea, .float-label-control label { font-size: 1.3em; box-shadow: none; -webkit-box-shadow: none; }
        .float-label-control input:focus,
        .float-label-control textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; }
        .float-label-control textarea:focus { padding-bottom: 4px; }
		.float-label-control.has-success input,
        .float-label-control.has-success textarea { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; }
        .float-label-control.has-success textarea { padding-bottom: 4px; }
		.float-label-control.has-success input:focus,
        .float-label-control.has-success textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; }
        .float-label-control.has-success textarea:focus { padding-bottom: 4px; }
		.float-label-control.has-error input,
        .float-label-control.has-error textarea { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; }
        .float-label-control.has-error textarea { padding-bottom: 4px; }
		.float-label-control.has-error input:focus,
        .float-label-control.has-error textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; }
        .float-label-control.has-error textarea:focus { padding-bottom: 4px; }
    .float-label-control input, .float-label-control textarea { display: block; width: 100%; padding: 0.1em 0em 1px 0em; border: none; border-radius: 0px; border-bottom: 1px solid #aaa; outline: none; margin: 0px; background: none; }
    .float-label-control textarea { padding: 0.1em 0em 5px 0em; }
    .float-label-control label { position: absolute; font-weight: normal; top: -1.0em; left: 0.08em; color: #aaaaaa; z-index: -1; font-size: 0.85em; -moz-animation: float-labels 300ms none ease-out; -webkit-animation: float-labels 300ms none ease-out; -o-animation: float-labels 300ms none ease-out; -ms-animation: float-labels 300ms none ease-out; -khtml-animation: float-labels 300ms none ease-out; animation: float-labels 300ms none ease-out; /* There is a bug sometimes pausing the animation. This avoids that.*/ animation-play-state: running !important; -webkit-animation-play-state: running !important; }
    .float-label-control input.empty + label,
    .float-label-control textarea.empty + label { top: 0.1em; font-size: 1.5em; animation: none; -webkit-animation: none; }
    .float-label-control input:not(.empty) + label,
    .float-label-control textarea:not(.empty) + label { z-index: 1; }
    .float-label-control input:not(.empty):focus + label,
    .float-label-control textarea:not(.empty):focus + label { color: #aaaaaa; }
    .float-label-control.label-bottom label { -moz-animation: float-labels-bottom 300ms none ease-out; -webkit-animation: float-labels-bottom 300ms none ease-out; -o-animation: float-labels-bottom 300ms none ease-out; -ms-animation: float-labels-bottom 300ms none ease-out; -khtml-animation: float-labels-bottom 300ms none ease-out; animation: float-labels-bottom 300ms none ease-out; }
    .float-label-control.label-bottom input:not(.empty) + label,
    .float-label-control.label-bottom textarea:not(.empty) + label { top: 3em; }


@keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@-webkit-keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}

@-webkit-keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}

.affix {
    top: 10em;
    width: 20.45em;
}
        
.affix-bottom {
    position: absolute;
    width: 20.45em;
}
    
@media (min-width: 1200px) {
    .affix-bottom {
        width: 20.45em;
    }
}
.side-nav {
    position: fixed;
    top: 50em;
}
.side-nav .nav .active {
    font-weight: bold;
}
        
.nav .nav {
    display: none;
}

.path-style {
    font-weight: bold;
	font-style: italic;
}
        
.nav .active .nav {
    display: block;
}
        
.nav .nav a {
    font-weight: normal;
    font-size: .85em;
}
        
.nav .nav span {
    margin: 0 5px 0 2px;
}
        
.nav .nav .active a,
.nav .nav .active:hover a,
.nav .nav .active:focus a {
    font-weight: bold;
    border-left: 1px solid black;
}
        
.nav .nav .active span,
.nav .nav .active:hover span,
.nav .nav .active:focus span {
    display: none;
}

@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
	.no-more-tables table, 
	.no-more-tables thead, 
	.no-more-tables tbody, 
	.no-more-tables th, 
	.no-more-tables td, 
	.no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.no-more-tables tr { border: 1px solid #ccc; }
 
	.no-more-tables td, .no-more-tables .no-table-td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 20%; 
		white-space: normal;
		text-align:left;
	}
	.no-more-tables .no-table-td-span { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		white-space: normal;
		text-align:left;
	}

	.no-more-tables td:before, .no-more-tables .no-table-td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 15%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	.no-more-tables td:before { content: attr(data-title); }
}
.scrolling table {
    table-layout: inherit;
 *margin-left: -100px;/*ie7*/
}
.scrolling td, .scrolling th {
    vertical-align: top;
    padding: 10px;
    min-width: 100px;
}
.scrolling th {
	left: 0;
	width: 120px;
}
.outer {
	position: relative
}
.inner {
	overflow-x: auto;
	overflow-y: visible;
}
.nav-tabs-top {
    border-bottom: 0px !important;
}

.nav-tabs-top>li.active>a
{
    background-color: #f5f5f5 !important;
}
.btn-group-vertical>.btn-group {
    display: flex;
    flex-direction: row;
}
.btn-group-vertical>.btn-group>.btn:last-child:not(:first-child)
{
    border-top-right-radius: 0;
}

.btn-group-vertical>.btn-group>.dropdown-toggle {
    width: 14% !important;
}
.w-100 {
    width: 100% !important;
}
.w-80 {
    width: 80% !important;
}
.w-60 {
    width: 60% !important;
}
.w-40 {
    width: 40% !important;
}
.w-20 {
    width: 20% !important;
}