/* Global Styles */

body {
  margin-top: 50px;
}

#wrapper {
  padding-left: 0;
}

#page-wrapper {
  width: 100%;
  padding: 5px 15px;
}

/* Nav Messages */

.messages-dropdown .dropdown-menu .message-preview .avatar,
.messages-dropdown .dropdown-menu .message-preview .name,
.messages-dropdown .dropdown-menu .message-preview .message,
.messages-dropdown .dropdown-menu .message-preview .time {
  display: block;
}

.messages-dropdown .dropdown-menu .message-preview .avatar {
  float: left;
  margin-right: 15px;
}

.messages-dropdown .dropdown-menu .message-preview .name {
  font-weight: bold;
}

.messages-dropdown .dropdown-menu .message-preview .message {
  font-size: 12px;
}

.messages-dropdown .dropdown-menu .message-preview .time {
  font-size: 12px;
}


/* Nav Announcements */

.announcement-heading {
  font-size: 50px;
  margin: 0;
}

.announcement-text {
  margin: 0;
}

/* Table Headers */

table.tablesorter thead {
  cursor: pointer;
}

table.tablesorter thead tr th:hover {
  background-color: #f5f5f5;
}

/* Flot Chart Containers */

.flot-chart {
  display: block;
  height: 400px;
}

.flot-chart-content {
  width: 100%;
  height: 100%;
}

.itemLayout {
    cursor: pointer;
    
}

/*.itemLayout :hover {    
    background-color: #f5f5f5;
}*/

.group {
    background-color: #bfbfbf;
}

/* Edit Below to Customize Widths > 768px */
@media (min-width:768px) {

  /* Wrappers */

  /* Wrapper for page content to push down footer */
    #wrap {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      /* Negative indent footer by its height */
      margin: 0 auto -60px;
      /* Pad bottom by footer height */
      padding: 0 0 60px;
    }

  #wrapper {
    padding-left: 0px;	 
    overflow-y: auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  #wrapper.toggled { 
      padding-left: 225px;   
  }

  #page-wrapper {
	padding: 15px;     
    padding-right: 30px;  
  }

  #togglecontrol {
	margin-left: 100px;
	left: 100px;
	position: fixed;
	top: 29px;
	border-radius: 0;
	border: none;
	overflow-y: auto;
  }
   #togglecontrol.toggled {
	margin-left: 0px;
	left: 0px;
  }

    #togglemenu {
        visibility:hidden;	
  }
   #togglemenu.toggled {	
       visibility:visible;
  }

   .side-nav-credits {
	
	left:-1px;
    bottom:0px;
	width: 226px;
    position: fixed;
    text-align:center;
	height: 50px;
	border-radius: 0;
	border: none;
    background-color: #000000;
    /*background-color: #b84d45;*/
	color:#ffffff;
    opacity:0.54;
    font-size:10pt;
  }

   .side-nav-logo {
	
	left:-1px;
	width: 226px;
	position:absolute;
	/*top: 50px;*/
	height: 200px;
	border-radius: 0;
	border: none;
    /*background-color: #000000;*/
    background-color: #909090;
	color:#ffffff;
  }

  .side-nav-logo a {
      margin-left:10px;	
  }

  .side-nav-logo-img-container {
	padding-top:10px;
    padding-bottom:10px;
  }

  .side-nav-logo-img-container img {
	width:225px;
    height:56px;
  }

  /* Side Nav */
  
  .side-nav {
	margin-left: -225px;
	left: 225px;
	width: 225px;
	position: fixed;
	top: 61px;
	height: 98%;
	border-radius: 0;
	border: none;
    background-color: #1E1E1E;
	overflow-y: auto;
  }

  /* Bootstrap Default Overrides - Customized Dropdowns for the Side Nav */

  .side-nav>li.dropdown>ul.dropdown-menu {
	position: relative;
	min-width: 225px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	-webkit-box-shadow: none;
  }

 
  .side-nav>li.dropdown>ul.dropdown-menu>li>a {
	color: #999999;
	padding: 15px 15px 15px 25px;
  }

  .side-nav>li.dropdown>ul.dropdown-menu>li>a:hover,
  .side-nav>li.dropdown>ul.dropdown-menu>li>a.active,
  .side-nav>li.dropdown>ul.dropdown-menu>li>a:focus {
	color: #fff;
	background-color: #797979;
    border-bottom: 1px solid #909090;
  }

  .side-nav>li>a {
	width: 225px;
  }

   .side-nav > li > ul {
    list-style:none;
    padding:0px;
  }

  .side-nav > li > ul > li > a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;
    color:#fff;
  }

  .side-nav > li > ul > li > a:hover,
  .side-nav > li > ul > li > a:active,
  .side-nav > li > ul > li > a:focus {
    border-bottom: 2px solid #909090;
    /*color:#0099ff;*/   
    font-weight:bold; 
  }
  
  .navbar-inverse .navbar-nav>li>a:hover,
  .navbar-inverse .navbar-nav>li>a:focus {
	/*background-color: #D0D0D0;*/
    border-bottom: 2px solid #909090;
    /*color:#0099ff;*/
    font-weight:bold;
  }

  .navbar-client {
      background-color:#fff;
      border-left: 3px solid #941154;
  }

  #client-user-login {
	color: #1b0000;    
    font-size:16px;
    border:none;
  }

   #client-user-login:hover,
   #client-user-login:active,
   #client-user-login:focus {	
    /*font-weight:normal;*/
    
  }

    @media (max-width: 767px) {
        #client-user-login:hover,
        #client-user-login:active,
        #client-user-login:focus {	
            /*background-color: black;*/
        }
    }

  /* Nav Messages */

  .messages-dropdown .dropdown-menu {
	min-width: 300px;
  }

  .messages-dropdown .dropdown-menu li a {
	white-space: normal;
  }

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

  /* Custom css */
  .checkbox-grid {
    display: block;
    float: left;
    width: 25%;
}

}

@media (max-width:768px) {
    #page-wrapper {
	padding: 15px;     
    padding-right: 25px;  
  }
}

.borderBotton {
    border-bottom:1px;
    border-bottom-color:#BBBDBF;
    border-bottom-style: solid;
}

.borderTop {
    border-top:1px;
    border-top-color:#BBBDBF;
    border-top-style: solid;
}

.borderRight {
    border-right:1px;
    border-right-color:#BBBDBF;
    border-right-style: solid;
}

.borderLeft {
    border-left:1px;
    border-left-color:#BBBDBF;
    border-left-style: solid;
}

/*** Loading ****/
#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;   
   opacity: 0.8;
   background-color: #fff;
   z-index: 99;
   text-align: center;
   display:none;
}

 #loading.toggled { 
   display:block;
}

.loadingContainer {
   position: absolute;
   top: 50%;
   margin-top: -50px;
   left: 0;
   width: 100%;
}

.contentLoading {
   width: 624px;
   margin-left: auto;
   margin-right: auto;
   height: 395px;
}

.visibilityToggled  {
   visibility:hidden;	
}

.visibilityToggled.toggled  {
   visibility:visible;
}

.panel-green {
    border-color: #5cb85c;
}

.panel-green > .panel-heading {
    border-color: #5cb85c;
    color: #fff;
    background-color: #5cb85c;
}

.panel-green > a {
    color: #5cb85c;
}

.panel-green > a:hover {
    color: #3d8b3d;
}

.panel-red {
    border-color: #d9534f;
}

.panel-red > .panel-heading {
    border-color: #d9534f;
    color: #fff;
    background-color: #d9534f;
}

.panel-red > a {
    color: #d9534f;
}

.panel-red > a:hover {
    color: #b52b27;
}

.panel-yellow {
    border-color: #f0ad4e;
}

.panel-yellow > .panel-heading {
    border-color: #f0ad4e;
    color: #fff;
    background-color: #f0ad4e;
}

.panel-yellow > a {
    color: #f0ad4e;
}

.panel-yellow > a:hover {
    color: #df8a13;
}

/*** Tree View ****/
.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}

/********************************** HAMBURGER MENU *************************************/

.cmn-toggle-switch {		
	position: absolute;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 45px; /*108*/
	height: 51px; /*96*/
	font-size: 0;
	text-indent: -9999px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	border: none;
	cursor: pointer;
	-webkit-transition: background 0.3s;
	transition: background 0.3s;
	z-index: 1000;
}

@media (max-width: 767px) {
	.cmn-toggle-switch {
		visibility:hidden;
		height: 0px;
	}
}

.cmn-toggle-switch:focus {
		outline: none;
}

.cmn-toggle-switch span {
	display: block;
	position: absolute;
	top: 23px; /*45*/
	left: 5px; /*9*/
	right: 5px; /*9*/
	height: 4px; /*6*/
	background: #909090;
}

.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%; /*100*/
	height: 4px; /*6*/
	background-color: #909090;
	content: "";
}

.cmn-toggle-switch span::before {
	top: -13px; /*27*/
}

.cmn-toggle-switch span::after {
	bottom: -13px; /*45*/
}

	/**
	 * Style 2
	 * 
	 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
	 * down to center and transform into an "x".
	 */
.cmn-toggle-switch__htx {
	background-color: transparent;
	margin-left: 1px;
    transition-property: margin-left;    
    transition-duration: 1s, 1s;
  	transition-delay: 0s, 0.5s;
}

.cmn-toggle-switch__htx span {
	-webkit-transition: background 0 0.3s;
	transition: background 0 0.3s;
}

.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
	-webkit-transition-duration: 0.3s, 0.3s;
	transition-duration: 0.3s, 0.3s;
	-webkit-transition-delay: 0.3s, 0;
	transition-delay: 0.3s, 0;
}

.cmn-toggle-switch__htx span::before {
	-webkit-transition-property: top, -webkit-transform;
	transition-property: top, transform;
}

.cmn-toggle-switch__htx span::after {
	-webkit-transition-property: bottom, -webkit-transform;
	transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.cmn-toggle-switch__htx.active {
	/*margin-left: 210px;*/	
}

.cmn-toggle-switch__htx.active span {
	background: none;
}

.cmn-toggle-switch__htx.active span::before {
	top: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.cmn-toggle-switch__htx.active span::after {
	bottom: 0;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
	-webkit-transition-delay: 0, 0.3s;
	transition-delay: 0, 0.3s;
}

  /****************************** FIN HAMBURGER MENU *************************************/

  /****************************** DIV BACKGROUND *************************************/

.background_white {
    z-index:9999;
    padding: 15px;
    background-color: #fff;
    /*border:solid 2px #f2f2f2;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomleft:2px;
    -moz-border-radius-bottomright:2px;
    -webkit-border-top-left-radius:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;*/   
}

  /****************************** FIN DIV BACKGROUND *************************************/

  .welcome_title {
    /*color: #583434;*/
    padding-bottom:25px;
}

.welcome_title h1,
.welcome_title .h1 {
    font-size: 63px;
}

  .welcome_titleHeader {
    vertical-align: bottom;
}

.welcome_titleHeader h3,
.welcome_title .h3 {
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
   
}

.modal-wide .modal-dialog {
  width: 95%; /* or whatever you wish */
}

/*****************************************************************************************/

/*****************************************************************************************/

.header-useraccount-info {
    width:350px;
    height:100px;
    padding:5px;
}

/*****************************************************************************************/

/**************************** TEXT CSS *********************/
.geryText {
    color: #a6a6a6;
}

.redText {
    color: #ff0000;
}

.boldText {
     text-decoration: underline;
}



/*****************************************************************************************/

/**************************** Notes Control *********************/

.detailBox {
    /*max-width:300px;*/
    border:1px solid #bbb;
    /*margin:50px;*/
}
.titleBox {
    background-color:#fdfdfd;
    padding:10px;
}
.titleBox label{
  color:#444;
  margin:0;
  display:inline-block;
}

.commentBox {
    padding:10px;
    border-top:1px dotted #bbb;
}
.commentBox .form-group:first-child, .actionBox .form-group:first-child {
    width:80%;
}
.commentBox .form-group:nth-child(2), .actionBox .form-group:nth-child(2) {
    width:18%;
}
.actionBox .contentlist {
    width:100%;
    max-height:250px;
    overflow-y:scroll;
}
.actionBox .form-group * {
    width:100%;
}
.taskDescription {
    margin-top:10px 0;
}
.commentList {
    padding:0;
    list-style:none;
    max-height:200px;
    overflow:auto;
}
.commentList li {
    margin:0;
    margin-top:10px;
}
.commentList li > div {
    display:table-cell;
}

.commentListAmd {
    padding:0;
    list-style:none;
    max-height:200px;
    overflow:auto;
}
.commentListAmd li {
    margin:0;
    margin-top:10px;
    cursor:pointer;
    cursor: hand;
}

.commentListAmd li > div {
    display:table-cell;
}

.commentListAmd-child {
    padding:0;
    list-style:none;
}
.commentListAmd-child li {
    margin:0;
    margin-top:10px;
    cursor:pointer;
    cursor: hand;
}

.commentListAmd-child li > div {
    display:table-cell;
}

.commenterImage {
    width:30px;
    margin-right:5px;
    height:100%;
    float:left;
}
.commenterImage img {
    width:100%;
    border-radius:50%;
}
.commenterImage-comments {
    width:40px;
    margin-right:5px;
    height:100%;
    float:left;
}
.commenterImage-comments img {
    width:100%;
    border-radius:5%;
}

.commenterImage-comments-right {
    width:40px;
    height:100%;
    float:left;
    margin-left:40px;
}
.commenterImage-comments-right img {
    width:100%;
    border-radius:5%;
}

.commentText:hover {    
    text-decoration: underline;
    text-decoration-color: #e5e5e5;
}
.commentText p {
    margin:0;
}

.commentText-right {
    padding-left:10px;        
}

.commentText-right:hover {
    text-decoration: underline;
    text-decoration-color: #e5e5e5;
}

.commentText-right p {
    margin:0;
    text-align:right;
}
.sub-text {
    color:#aaa;
    font-family:verdana;
    font-size:11px;
}

.sub-text-create {
    color:#909090;
    font-family:verdana;
    font-size:12px;    
}

.sub-text-create-right {
    color:#909090;
    font-family:verdana;
    font-size:12px;
    text-align:right;
}

.sub-text-wrap {
    color:#aaa;
    font-family:verdana;
    font-size:11px;
    width:350px;
}
.actionBox {
    border-top:1px dotted #bbb;
    padding:10px;
}

/*****************************************************************************************/

/**************************** Navbar Plugin *********************/
.navbar-plugin {
    font-size: 14px;
    background-color: rgba(255, 255, 255, 1);    
    border-bottom-width: 2px;
    border-radius: 0px;
    border-left: none;
    border-right: none;
    border-top: none;
}

.footerLog {
    text-align:left;
    vertical-align:top;
    padding-left: 10px;
    background-color:#e0e0e0;
    font-size:8pt;
    color:#808080;
}
/*****************************************************************************************/

.btn-circle-micro {
  width: 19px;
  height: 19px;
  text-align: center;
  padding: 1px 0;
  font-size: 13px;
  line-height: 0.1;
  border-radius: 30px;
}

.panelTitle {
    font-style: italic;
    font-weight: bolder;
}

.progressBar {
    text-align: center;
    position: relative;
    width: 95%;
    height: 25px;
    border: 1px solid #2B689C;
    border-radius: 5px;
    overflow: hidden;
    color: #000;
}

.progressBar div {
  position: relative;
  height: 100%;
  background-color: #8CB5D7;
}

.progressBar .progressText {
    position: absolute;
    margin: 0 auto;
    font-weight: bold;
    top: 1px;
    left: 0;
    right: 0;
    background-color: transparent;
}


.tblScrollSmall {
    width:100%;
    max-height:50px;
    overflow: auto;
}