/***********************************************/
/* nav-in.css for nav-in.html */
/* used in all pages where users are logged in */
/***********************************************/

#wrapper {
	min-height:100%; /* height */
	position:relative; /* position */
	background-color: #303030;
}
#header {
	background:#101010; /* background color */
}
#content {
	background-color: #303030;
}
#mySidenav{
	border-right: 1px solid #212121;
}
/* Style page content */

#main {
	position: fixed;
	left:0px !important;
	right:0px !important;
	width: 100%;
   transition: margin-left .5s;
   padding-top: 54px;
   background-color: #303030 !important;
}
@media screen and (min-width: 767px) {
    #main {
			/*
			padding-left:20px;
			padding-right: 20px;*/
		}
}

#footer {
	/* full footer css in footer.css (as it's also used in with pages with nav-out.css) */
	width:100%; /* width */
	height:40px; /* height */
	position:fixed; /* position */
	bottom:0 !important; /* bottom position */
	left:0; /* left position */
	background-color: #212121;
	border-radius: 0px;
}

.iframe-main-container{
	background-color: transparent;
	position: fixed;
	padding: none;
	margin: none;
	left:0px !important;
	right:0px !important;
	top:100px;
	bottom:40px;
	width: 100%;
}

@media screen and (max-width: 767px) 
{
    .iframe-main-container 
    {
        top: 90px;
    }
}

.iframe-main{
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 0;	
}



/****************/
/* fixed navbar */
/****************/
#fixed-header {
	width: 100%;
	position: fixed;
	top:0;
	left:0;
	z-index: 10;
	height: 50px;
}

#fixed-header a:hover {
	color:#FAFAFA;
	text-decoration: none;
}

/* the buttons to turn volume up/down etc */
.nav-sound-options {max-width: 31%; text-align: center;}

/* navbar header + footer background + behavior */
.navbar{	
    /*	border-bottom: 1px solid #676767;
	    background-color: #212121;
    */
    border:0;
	min-width: 100%;
	border-radius: 0px;
}

.navbar-default{
	background-color: #101010;
}

/* navbar title brand */
.navbar-default .navbar-brand{
	text-transform: uppercase; /* font capitolized */
	letter-spacing: 2px;
	font-weight: bold;
}

/* company logo */
.fogwise-logo{
	width:50%;
} /* logo placement and size */

.navbar-default ul {color: #767676;background-color: #101010;} /* navbar list items */

.navbar-default li{color: #767676;} /* navbar list items */
.navbar-default li:hover {background-color: transparent;  color: rgba(255, 171, 64,0.8);}

.navbar-default .nav > li > ul > li > a {color:#999999;} /* dropdown text*/
.navbar-default .nav > li > ul > li > a:hover {background-color: #424242; color:#FAFAFA;}/* dropdown item hover effect */

.nav > li > ul > button {background-color: transparent;} /* navbar dropdown buttons */
.nav > li > ul > button:hover {color:#fafafa; background-color: transparent;}

.navbar-toggle {background-color: transparent; color:#999999; border:none;} /* hambubrger + dots toggles */
.navbar-toggle:hover{background-color: #212121;}

/* toggle effects hover, acive & focus */
.navbar > div > button.navbar-toggle:hover,
.navbar > div > button.navbar-toggle:active,
.navbar > div > button.navbar-toggle:focus,
.navbar > div > span > button.navbar-toggle:hover,
.navbar > div > span > button.navbar-toggle:active,
.navbar > div > span > button.navbar-toggle:focus {color: rgba(255, 171, 64,0.8);}

.navbar-dropdown .dropdown-menu{
	top: 54px;
	background-color: #212121;
	border: 1px solid rgba(255, 255, 255, 0.12);
	-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
}

.dropdown-user-info {
	margin-top: -10px;
  text-align: left;
  background-color: transparent;
  border: none;
  color: rgba(255, 171, 64,0.8);
  font-size: 12px;
  max-height: 40px;
}

.dropdown-user-info .dropdown-menu{
	border: 1px solid rgba(255, 255, 255, 0.12);
	top: 64px;
	background-color: #212121;
	-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
}

@media (min-width: 767px) {
.dropdown-user-info{
  top:-10;
}}

@media (max-width: 767px) {
.dropdown-user-info {
border:none;
}}

.dropdown-user-info > a > small {
  color: rgba(178, 223, 219,0.8);
	font-size: 10px;
}

.dropdown-user-info strong {
	color:rgba(255, 171, 64,0.8) !important;
	font-size: 10px;
} /* highlight text in dropdown */

.navbar .navbar-nav > li:hover {}

/* navbar + dropdown active */
.navbar .navbar-nav > .active,
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
  color: rgba(255, 171, 64,0.8);
  background-color: #212121;
}

.navbar-dropdown a span.badge{
	background-color: rgba(0, 155, 119, 0.8);
}

.navbar .navbar-nav a span,
.navbar .navbar-nav > .open > a > span {
	font-size: 12px;
}

/* Messages dropdown */
.navbar .navbar-nav > li.open > ul >li > a > span.dropdown-msg-sender,
.navbar .navbar-nav > li.open > ul >li > a > span.dropdown-alert-sender {
	color: rgba(255, 171, 64,0.8);
	font-size: 12px !important;
}
.navbar .navbar-nav > li.open > ul >li > a > span.dropdown-msg-date,
.navbar .navbar-nav > li.open > ul >li > a > span.dropdown-alert-date {
	color: rgba(178, 223, 219,0.8);
	font-size: 12px !important;
}

/* Messages maximum text length */
.navbar .navbar-nav > li.open > ul >li > a > p {
  text-overflow: ellipsis; /* adds [...] at the end */
  width: 370px;
  white-space: nowrap; /* one line paragraph */
  overflow:hidden; /* for older browsers */
}

/* navbar + dropdown open */
.navbar .navbar-nav > .open > a,
.navbar .navbar-nav > .open > a:hover,
.navbar .navbar-nav > .open > a:active,
.navbar .navbar-nav > .open > a:focus {
	background-color: transparent;
	color:#FF9800
}

.nav-list-item {cursor: pointer;}
/* END: fixed navbar */



/****************/
/* sidenav menu */
/****************/
.sidenav {
   width: 0; /* 0 width - change this with JavaScript */
   position: fixed; /* Stay in place */
   z-index: 2; /* Stay on top */
	 top: 54px;
   left: 0;
	 bottom:0;
	 border: none;
   background-color: #212121; /* Black*/
	 overflow-y: auto; /* add vertical scroll when content is too long */
   overflow-x: hidden; /* Disable horizontal scroll */
   transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
   padding: 8px 8px 8px 8px;
   text-decoration: none;
	 color: rgba(255, 255, 255, 0.6);
   display: block;
	 text-transform: uppercase;
	 letter-spacing: 1px;
   transition: 0.3s
}

/* sidenav list item icon */
.sidenav i {color: rgba(255, 255, 255, 0.6); font-size: 20px; padding-right: 10px;}

i.sidenav-collapse-toggle:hover,
i.sidenav-collapse-toggle:active,
i.sidenav-collapse-toggle:focus{
	color: rgba(255, 255, 255, 0.4);
	z-index: 5;
}

/* sidenav first list item */
.sidenav > ul > li:first-child {margin-top:34px;} /* spacing between sidenav list and close button */

/* list item */
.sidenav > ul > li,
.sidenav > ul > li {font-weight: bold; vertical-align: middle; padding-top:2px;}
/* list item spacing */
.sidenav > ul > li > a{letter-spacing: 2px;}
/* list item color effects */
.sidenav > ul > li > a:hover,
.sidenav > ul > li > a:active,
.sidenav > ul > li > a:focus {background-color: #424242; color:rgba(255, 171, 64,0.8);}

/* sidenav list item collapse list */
.sidenav > ul > li > div > ul{background-color: #303030;}

/* sidenav list item collapse list items */
.sidenav > ul > li > div > ul > li {color:rgba(255, 255, 255, 0.6);background-color: transparent; border: none;}

/* list item collapse list item effects */
.sidenav > ul > li > div > ul > li:hover{
	background-color: #303030;
	-webkit-box-shadow: inset 0 1px 8px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 1px 8px 0 rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 8px 0 rgba(0, 0, 0, 0.2);
}

.sidenav > ul > li > div > ul > li:active,
.sidenav > ul > li > div > ul > li:focus {background-color: #303030;}

/* list item collapse list item text */
.sidenav > ul > li > div > ul > li > a{font-size: 12px; letter-spacing: 2px;}

/* list item collapse list item text effects */
.sidenav > ul > li > div > ul > li > a:hover,
.sidenav > ul > li > div > ul > li > a:active,
.sidenav > ul > li > div > ul > li > a:focus{color: rgba(255, 171, 64,0.8);}

/* divider */
.sidenav > ul > li > div > ul > li.divider{
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}


/* MOVE TO ALL LISTS: border radius of list items */
.list-group-item:first-child,
.list-group-item:last-child{border-radius: 1px;}


/* Position and style the close button (top right corner) */
.sidenav .closebtn {
   position: absolute;
   top: -20px;
   right: 5px;
   font-size: 36px;
	 padding-bottom:5px;
}
.sidenav .closebtn i {vertical-align: middle;}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
   .sidenav {padding-top: 15px;}
   .sidenav a {font-size: 18px;}
}
/* END: sidenav menu */




/**************/
/* breadcrumb */
/**************/
.breadcrumb {
  font-size: 9px;
	padding: 0;
	background-color: transparent;
	margin-left: 15px;
}
.breadcrumb > li + li:before {
  color: #767676; /* li. seperator icon */
}
.breadcrumb li:last-child{
    color: #ff9800; /* li.active text color */
}

.breadcrumb li a {
    position: relative;
    color: #999999;
    text-decoration: none;
}
.breadcrumb li a:focus, .breadcrumb li a:hover {
    color:#ff9800;
}
/* END: breadcrumb */


/*************************************/
/* nav-pills page-header-title-pills */
/*************************************/
.page-header-title-pills{
	background-color: #212121;	
}
.page-header-title-pills > li > a {
  color: #999999; /* border */
	font-size: 20px; /* font size */
	text-transform: uppercase; /* font capitolized */
	letter-spacing: 1px;
	font-weight: bold; /* font bold */
}
.page-header-title-pills > li > a:hover,
.page-header-title-pills > li > a:active,
.page-header-title-pills > li > a:focus{
	color: rgba(255, 152, 0, 0.8);
  background-color: #212121; /* background color */
}
.page-header-title-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  background-color: #212121; /* hover/active/focus: background color */
	border: none; /* hover/active/focus: border */
	color: rgba(0, 150, 136, 0.8); /* hover/active/focus: font color */
}
@media screen and (max-width: 767px) {
	.page-header-title-pills > li > a{
		font-size: 14px;
	}
}

.page-header{
	border:none; /* border container nav-pills */
}
/* END: nav-pills page-header-title-pills */


/*******************/
/* other nav-pills */
/*******************/

/*nav pills dark gray
.nav-pills-dark-gray{
  margin-bottom: 20px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}*/
.nav-pills-dark-gray,
.nav-pills-dark-gray li a{
  background-color: #212121;
	color: rgba(255, 255, 255, 0.8)
  }
.nav-pills-dark-gray li a{border-radius: 1px;}
.nav-pills-dark-gray li a:hover,
.nav-pills-dark-gray li a:focus{
  background-color: #424242;
  color:#FAFAFA;
  }
.nav-pills-dark-gray .active a,
.nav-pills-dark-gray .active a:hover{
  background-color: #424242 !important;
	font-weight: bold;
}

/*nav pills gray */
.nav-pills-gray{
  margin-bottom: 20px;
}
.nav-pills-gray,
.nav-pills-gray li a{
  background-color: #303030;
  }
.nav-pills-gray li a{border-radius: 1px;}
.nav-pills-gray li a:hover,
.nav-pills-gray li a:focus{
  background-color: #212121;
  color:#FAFAFA;
  }
.nav-pills-gray .active a,
.nav-pills-gray .active a:hover{
  background-color: #212121 !important;
}


/********************/
/* toolbar - button */
/********************/
/* BUTTON IS USED IN RICH TEXT amoungst others */
.inner-top-toolbar-btn {
  vertical-align: middle;
  background-color: #212121;
  color: rgba(189, 189, 189, 0.9);
  border: none;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 4px 10px 4px 10px;
  margin: 1px 2px 0px 2px;
}
.inner-top-toolbar-btn:hover,
.inner-top-toolbar-btn:active,
.inner-top-toolbar-btn:focus {outline:none;border: 0;}