/****************************
*
*   _-=/| CLARITY |\=-_
*
* by: Bryan McAnulty
* Available on: Themeforest
*
* Version 2.0
*
* Copyright 2012-2014 Bryan McAnulty
*
* See all of our themes at: http://vibrance.co
*
****************************/
/***------ @JAVASCRIPT MEDIA QUERY SUPPORT ------***/
html {
  font-family: 'mobile'; }

* html {
  /* IE6 */
  font-family: "desktop"; }

* + html {
  /* IE7 */
  font-family: "desktop"; }

@media \0screen {
  html {
    /* IE8 */
    font-family: "desktop"; } }
/* Reset your font families here!
 ----------------------------------- */
body {
  font-family: "Lato", arial, sans-serif; }

/* Queries for supported browsers.
 ----------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  html {
    font-family: "tablet"; } }
@media only screen and (max-width: 940px) {
  html {
    font-family: "tabletPortrait"; } }
@media screen and (min-width: 1025px) {
  html {
    font-family: "desktop"; } }
/***------ @BASE STYLES ------***/
html {
  background: #ccc; }

body {
  font-family: "Lato", arial, sans-serif;
  font-size: 14px;
  background: #888;
  color: #333333;
  overflow: hidden;
  line-height: 18px; }

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px; }

h1 {
  font-size: 30px; }

h2 {
  font-size: 24px; }

h3 {
  font-size: 18px;
  line-height: 27px; }

h4 {
  font-size: 14px; }

h5 {
  font-size: 12px; }

h6 {
  color: #666; }

h1, h2 {
  line-height: 36px; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600; }

h4, h5, h6 {
  line-height: 18px; }

::-moz-selection {
  background: #0075cf;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #0081c7;
  color: #fff;
  text-shadow: none; }

#search input::-webkit-input-placeholder {
  font-style: italic;
  color: #999 !important; }

#search input:focus::-webkit-input-placeholder {
  color: transparent;
  opacity: 0;
  filter: alpha(opacity=0); }

#search input::-moz-placeholder {
  font-style: italic;
  color: #999 !important; }

#search input:focus::-moz-placeholder {
  color: transparent; }

/* Webkit Scrollbars for when jScrolLPane is not in use */
.ui-layout-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0.2); }

.ui-layout-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0); }

.ui-layout-content::-webkit-scrollbar-corner {
  opacity: 0; }

.ui-layout-content::-webkit-resizer {
  opacity: 0; }

.ui-layout-content::-webkit-scrollbar-button {
  opacity: 0; }

.ui-layout-content::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.3); }

.ui-layout-center .ui-layout-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0.1); }

.ui-layout-center .ui-layout-content::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4); }

/***------ @INTERFACE FRAME------***/
.ui-layout-pane {
  /* all 'panes' */
  background: #FFF;
  border: 1px solid #BBB;
  padding: 10px;
  overflow: auto; }

.ui-layout-resizer {
  /* all 'resizer-bars' */
  background: #222; }

.ui-layout-toggler {
  /* all 'toggler-buttons' */
  background: #000; }

.ui-layout-pane-north {
  overflow: visible;
  z-index: 5 !important; }

.scroll-pane {
  overflow: auto;
  height: inherit; }

.ui-layout-west {
  background-color: #272727;
  border: 1px solid #000;
  border-right: 1px solid #333;
  color: #ccc;
  overflow: hidden;
  z-index: 4 !important;
  box-sizing: content-box;
  -moz-box-sizing: content-box; }

.ui-layout-pane-west {
  padding: 0; }

.ui-layout-west h4 {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 13px; }

.ui-layout-west ul {
  font-size: 12px;
  font-weight: 400; }

.ui-layout-west li {
  font-weight: 400; }

.ui-layout-east {
  margin: 0;
  padding: 0;
  background-color: #272727;
  border: 1px solid #000;
  border-right: 1px solid #333;
  color: #ccc;
  overflow: hidden;
  z-index: 4 !important;
  box-sizing: content-box;
  -moz-box-sizing: content-box; }

.ui-layout-center {
  padding: 0;
  border: none;
  overflow: auto;
  background: #eee;
  -webkit-box-shadow: inset 0 0 2px #888;
  box-shadow: inset 0 0 2px #888;
  box-sizing: content-box;
  -moz-box-sizing: content-box; }

.ui-layout-content {
  overflow: auto; }

.ui-layout-pane-center {
  padding: 0;
  border-bottom: none;
  background-color: #eee; }

#page-holder {
  padding: 20px; }

#holder {
  display: block;
  height: auto;
  position: absolute;
  left: 160px;
  bottom: 32px;
  top: 54px;
  right: 0;
  z-index: -2;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.codeContainer {
  display: block;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 29px;
  top: 0;
  right: 0; }

.codeFooter {
  height: 23px;
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  position: relative;
  width: 100%;
  background: #bbb;
  background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
  background: -webkit-linear-gradient(top, #cccccc, #999999);
  background: -moz-linear-gradient(top, #cccccc, #999999);
  background: -o-linear-gradient(top, #cccccc, #999999);
  background: linear-gradient(to bottom, #cccccc, #999999);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #555;
  -webkit-box-shadow: 0 1px 5px #777, 0 -1px 0 #999, inset 0 -1px 0 #ababab, inset 0 -2px 1px #999;
  box-shadow: 0px 1px 5px #777, 0 -1px 0 #999, inset 0 -1px 0 #ababab, inset 0 -2px 1px #999;
  z-index: 3 !important;
  overflow: hidden; }

.styleSwitch {
  position: fixed;
  bottom: 0;
  left: 45%;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 10px;
  font-weight: 700;
  color: #efefef;
  text-shadow: 0 1px 0 #111;
  line-height: 15px;
  border-radius: 5px 5px 0 0; }

.styleBox {
  height: 15px;
  width: 15px;
  border-radius: 3px;
  text-indent: -9999px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.4); }

.grey-box {
  background: #ccc;
  -webkit-box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2);
  box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2); }

.blue-box {
  background: #00649d;
  -webkit-box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2);
  box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2); }

.orange-box {
  background: #9c3e00;
  -webkit-box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2);
  box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2); }

.pink-box {
  background: #9b004e;
  -webkit-box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2);
  box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2); }

.green-box {
  background: #009f00;
  -webkit-box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2);
  box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2); }

.black-box {
  background: #222;
  -webkit-box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2);
  box-shadow: inset 0 -6px 0 rgba(20, 20, 20, 0.2); }

.light-box {
  -webkit-box-shadow: inset 0 -6px 0 rgba(204, 204, 204, 0.2);
  box-shadow: inset 0 -6px 0 rgba(204, 204, 204, 0.2); }

/***------ @CENTER VIEW------***/
.tab-pane .list-box {
  color: #ccc;
  text-shadow: 0 1px 0 #000;
  font-weight: 600;
  background: #252525;
  background: -webkit-gradient(linear, left top, left bottom, from(#252525), to(#2d2d2d));
  background: -webkit-linear-gradient(top, #252525, #2d2d2d);
  background: -moz-linear-gradient(top, #252525, #2d2d2d);
  background: -o-linear-gradient(top, #252525, #2d2d2d);
  background: linear-gradient(to bottom, #252525, #2d2d2d);
  border-bottom: 1px solid #444;
  padding: 0;
  list-style: none;
  overflow: hidden;
  -webkit-box-shadow: inset 0 1px 0 #000;
  box-shadow: inset 0 1px 0 #000;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.tab-pane .list-box a {
  color: #ccc;
  padding: 12px 20px 30px 20px;
  width: 100%;
  height: 18px;
  position: relative;
  display: inline-block;
  font-size: 13px;
  font-weight: 700; }

.tab-pane .list-box:last-child {
  -webkit-box-shadow: inset 0 1px 0 #000, 0 1px 0 #000;
  box-shadow: inset 0 1px 0 #000, 0 1px 0 #000; }

.tab-pane .list-box:hover {
  background: #404040;
  background: -webkit-gradient(linear, left top, left bottom, from(#404040), to(#474747));
  background: -webkit-linear-gradient(top, #404040, #474747);
  background: -moz-linear-gradient(top, #404040, #474747);
  background: -o-linear-gradient(top, #404040, #474747);
  background: linear-gradient(to bottom, #404040, #474747);
  cursor: pointer; }

.tab-pane .list-box:active {
  background: #595959;
  background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#616161));
  background: -webkit-linear-gradient(top, #595959, #616161);
  background: -moz-linear-gradient(top, #595959, #616161);
  background: -o-linear-gradient(top, #595959, #616161);
  background: linear-gradient(to bottom, #595959, #616161);
  color: #fff;
  cursor: pointer; }

.list-box p {
  margin: 0 0 0 10px;
  display: inline; }

.tab-pane .list-box p {
  margin: 0;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  display: inline-block; }

.list-box i {
  margin-right: 9px;
  margin-top: 1px; }

/***------ @TODO LIST PAGE ------***/
.todo-list {
  background: #ddd;
  position: relative;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 35px rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 0; }

.list-box {
  background-color: #efefef;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#efefef));
  background: -webkit-linear-gradient(top, white, #efefef);
  background: -moz-linear-gradient(top, white, #efefef);
  background: -o-linear-gradient(top, white, #efefef);
  background: linear-gradient(to bottom, white, #efefef);
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
  list-style: none;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); }

.todo-list .list-box span {
  text-align: right; }

.ui-sortable-helper {
  cursor: move; }

.list-left {
  width: 80%;
  padding-right: 110px; }

.list-left span {
  margin: 0 0 0 10px;
  font-size: 13px;
  line-height: 18px; }

.list-right {
  position: absolute;
  width: 130px;
  right: 15px;
  display: inline-block; }

.todo-list .list-right .label {
  position: relative;
  top: -2px; }

.todo-list .list-box i {
  margin-right: 3px;
  margin-top: 1px; }

.overdue {
  background: #eee5e9; }

.check {
  display: inline;
  margin: 0 !important;
  padding: 0;
  position: relative;
  top: 2px; }

.todo-list input[type="checkbox"] {
  width: 18px;
  height: 18px; }

.todo-list .label-warning {
  background: #ff892a; }

.todo-list .label-important {
  background: #cf126e; }

.todo-list .label-info {
  background: #32aefd; }

.addTask {
  background: #f9f9f9;
  padding: 10px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }

.addTask form {
  margin: 0 auto; }

.addTask form .newTask {
  width: 60%;
  height: 32px; }

.addTask form #dueDate {
  width: 100px;
  height: 32px; }

.addTask input, .addTask .btn-primary {
  display: inline-block;
  margin: 0 10px; }

.addTask i {
  font-size: 20px;
  position: relative;
  top: 3px;
  color: #999; }

.checked {
  background: #e2e2e2;
  text-decoration: line-through;
  color: #666; }

#ui-datepicker-div {
  /* Minimum of '5' is required */
  z-index: 50; }

/***------ @MESSAGES ------***/
.addComment {
  margin: 0 auto;
  padding: 20px 20px 40px;
  max-width: 500px;
  min-width: 200px; }

.addComment textarea {
  width: 400px;
  min-height: 70px; }

.comment-btn {
  display: block; }

.message-header {
  margin: 0;
  padding: 15px 20px 15px;
  border-bottom: 1px solid #ccc;
  font-size: 28px;
  line-height: 36px; }

.message-box {
  border-bottom: 1px solid #ccc;
  padding: 20px 20px;
  transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear; }

.message-box span {
  color: #888;
  font-size: 11px;
  font-weight: normal;
  margin: 0 0 0 5px; }

.message-box h5 {
  font-size: 16px;
  margin: 0 0 5px 0; }

.message-box p {
  margin: 0;
  color: #555; }

.ui-layout-center .message-box:hover {
  background: #f8f8f8 !important;
  -webkit-box-shadow: 0 1px 3px #ccc;
  box-shadow: 0 1px 3px #ccc; }

.message-box img {
  width: 50px;
  height: 50px;
  border: 1px solid #999;
  display: block;
  float: left;
  margin: 0 15px 0 0;
  border-radius: 5px;
  background: #fff;
  -webkit-box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 #fff; }

.tab-pane .message-box {
  border-bottom: 1px solid #444;
  padding: 15px 20px;
  height: 132px;
  overflow: hidden;
  -webkit-box-shadow: inset 0 -1px 4px #151515;
  box-shadow: inset 0 -1px 4px #151515;
  transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear; }

.tab-pane .message-box span {
  color: #666;
  font-size: 10px;
  font-weight: normal;
  margin: 0; }

.tab-pane .message-box h5 {
  font-size: 14px;
  margin: 0 0 5px 0;
  color: #ccc; }

.tab-pane .message-box p {
  margin: 0;
  height: 55px;
  overflow: hidden;
  color: #888;
  font-size: 12px; }

.tab-pane .message-box:hover {
  background: #333;
  -webkit-box-shadow: 0 1px 3px #111;
  box-shadow: 0 1px 3px #111; }

.tab-pane .message-box img {
  width: 38px;
  height: 38px;
  border: 1px solid #111;
  display: block;
  float: left;
  margin: 0 15px 0 0;
  border-radius: 5px;
  background: #fff;
  -webkit-box-shadow: 0 1px 0 #555;
  box-shadow: 0 1px 0 #555; }

.tab-pane .reply-to {
  color: #ccc; }

.tab-pane .reply-to:hover {
  color: #fff; }

/***------ @DASHBOARD VIEW------***/
.dashTop {
  background: #e5e5e5;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  -webkit-box-shadow: 0 1px 3px #ccc, inset 0 1px 0 #efefef;
  box-shadow: 0 1px 3px #ccc, inset 0 1px 0 #efefef;
  overflow: hidden; }

.dashWidget {
  background: #ddd;
  border: 1px solid #aaa;
  border-top: none;
  padding: 25px;
  height: 450px;
  margin: 0 0 20px;
  border-radius: 0 0 5px 5px;
  -webkit-box-shadow: inset 0 0 0 1px #efefef, inset 0 0 13px 0 #ccc, 0 1px 3px #ccc;
  box-shadow: inset 0 0 0 1px #efefef, inset 0 0 13px 0 #ccc, 0 1px 3px #ccc;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  overflow: auto; }

.dashWidget:hover {
  -webkit-box-shadow: inset 0 0 0 1px #efefef, inset 0 0 13px 0 #ccc, 0 1px 20px #bbb;
  box-shadow: inset 0 0 0 1px #efefef, inset 0 0 13px 0 #ccc, 0 1px 20px #bbb; }

.noPadding {
  padding: 0;
  height: 500px; }

.autoHeight {
  height: auto; }

.iconShow i {
  padding: 10px;
  float: left;
  font-size: 24px;
  text-shadow: 0 1px 0 #fff; }

.dashHead {
  margin: 20px 0 0;
  padding: 3px 25px 2px;
  background: #ccc;
  background: -webkit-gradient(linear, left top, left bottom, from(#d7d7d7), to(#bbbbbb));
  background: -webkit-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -moz-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -o-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: linear-gradient(to bottom, #d7d7d7, #bbbbbb);
  border: 1px solid #979797;
  border-top: 1px solid #bbb;
  border-radius: 5px 5px 0 0;
  text-shadow: 0 1px 0 #eee;
  font-size: 18px;
  -webkit-box-shadow: inset 0 -1px 0 1px #bbb, inset 0 0 0 1px #efefef;
  box-shadow: inset 0 -1px 0 1px #bbb, inset 0 0 0 1px #efefef; }
  .dashHead i {
    margin-right: 10px;
    opacity: 0.7;
    position: relative;
    top: 1px; }
  .dashHead small {
    color: #777;
    margin: 0 7px; }

.dash-row {
  padding: 0 50px;
  max-width: 1300px;
  margin: 0 auto; }

.show-grid div {
  background: #ddd;
  text-align: center;
  line-height: 30px;
  margin: 3px 0;
  border-radius: 5px;
  border: 1px solid #eee; }

.reply-to {
  float: right;
  bottom: 3px;
  position: relative;
  color: #444;
  font-size: 14px;
  opacity: 0.5;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.reply-to:hover {
  opacity: 1;
  text-decoration: none;
  color: #444; }

.message-box:hover {
  background: #eee; }

.message-box p:hover {
  cursor: default; }

.dashWidget .nav-tabs {
  margin: 0; }

.dashWidget .nav-tabs li a {
  margin: 0;
  padding: 7px 20px;
  background: #ccc;
  background: -webkit-gradient(linear, left top, left bottom, from(#d7d7d7), to(#bbbbbb));
  background: -webkit-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -moz-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -o-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: linear-gradient(to bottom, #d7d7d7, #bbbbbb);
  border: 1px solid #979797;
  border-top: 1px solid #bbb;
  border-radius: 5px 5px 0 0;
  text-shadow: 0 1px 0 #eee;
  font-size: 12px;
  -webkit-box-shadow: inset 0 -1px 0 1px #bbb, inset 0 0 0 1px #efefef;
  box-shadow: inset 0 -1px 0 1px #bbb, inset 0 0 0 1px #efefef;
  opacity: 0.6;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.dashWidget .nav-tabs li {
  width: 33.3%;
  margin-top: 5px; }

.dashWidget .nav-tabs .active a {
  opacity: 1; }

.dashWidget .nav-tabs li a:hover {
  opacity: 1; }

.dashWidget .nav-tabs .active a:hover {
  opacity: 1;
  border: 1px solid #979797;
  border-top: 1px solid #bbb; }

.dashWidget .tab-pane img {
  width: 30px;
  vertical-align: middle;
  margin: 5px 5px 5px 0;
  border-radius: 5px; }

.dashWidget .tab-pane {
  border: 1px solid #bbb;
  background: #eee;
  padding: 15px; }

.dashWidget .tab-pane ul {
  margin: 0 0 9px 15px; }

.dashWidget .tab-pane li {
  list-style: none; }

.dashWidget .tab-pane span {
  font-size: 11px;
  color: #888;
  margin-left: 5px;
  padding-left: 5px;
  border-left: 1px solid #ccc; }

/***------ @DATA TABLES ------***/
.dataTables_length {
  float: left;
  margin-right: 20px; }

.dataTables_length label {
  font-size: 11px;
  line-height: 16px;
  width: 50px;
  color: #555;
  text-align: center; }

.dataTables_length select {
  width: 50px;
  margin: 0; }

.dataTables_filter {
  float: left; }

.dataTables_filter label {
  font-size: 11px;
  line-height: 16px;
  width: 220px;
  color: #555; }

.dataTables_wrapper table {
  clear: left; }

#data-table tr, #data-table td {
  border: 1px solid #ccc; }

#data-table td {
  padding: 3px 5px; }

#data-table .odd {
  background: #eee; }

#data-table .even {
  background: #e5e5e5; }

.sorting, .sorting_asc {
  margin: 0;
  padding: 0;
  background: #ccc;
  color: #333;
  background: -webkit-gradient(linear, left top, left bottom, from(#d7d7d7), to(#bbbbbb));
  background: -webkit-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -moz-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -o-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: linear-gradient(to bottom, #d7d7d7, #bbbbbb);
  border: 1px solid #979797;
  border-top: 1px solid #bbb;
  text-shadow: 0 1px 0 #eee;
  font-size: 12px;
  line-height: 13px;
  -webkit-box-shadow: inset 0 -1px 0 1px #bbb, inset 0 0 0 1px #efefef;
  box-shadow: inset 0 -1px 0 1px #bbb, inset 0 0 0 1px #efefef;
  opacity: 0.6;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  cursor: pointer; }

#data-table tfoot tr th {
  margin: 0;
  padding: 0;
  background: #ccc;
  color: #333;
  background: -webkit-gradient(linear, left top, left bottom, from(#d7d7d7), to(#bbbbbb));
  background: -webkit-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -moz-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -o-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: linear-gradient(to bottom, #d7d7d7, #bbbbbb);
  border: 1px solid #979797;
  border-top: 1px solid #bbb;
  text-shadow: 0 1px 0 #eee;
  font-size: 12px;
  line-height: 13px;
  -webkit-box-shadow: inset 0 -1px 0 1px #bbb, inset 0 0 0 1px #efefef;
  box-shadow: inset 0 -1px 0 1px #bbb, inset 0 0 0 1px #efefef;
  opacity: 0.6;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  cursor: pointer; }

.dataTables_filter input {
  border-radius: 33px; }

#data-table_next, #data-table_previous {
  padding: 5px 15px;
  margin: 35px 10px 30px 0;
  background: #ccc;
  color: #333;
  background: -webkit-gradient(linear, left top, left bottom, from(#d7d7d7), to(#bbbbbb));
  background: -webkit-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -moz-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: -o-linear-gradient(top, #d7d7d7, #bbbbbb);
  background: linear-gradient(to bottom, #d7d7d7, #bbbbbb);
  border: 1px solid #979797;
  border-top: 1px solid #bbb;
  border-radius: 5px;
  text-shadow: 0 1px 0 #eee;
  font-size: 14px; }

#data-table_next:hover, #data-table_previous:hover {
  cursor: pointer;
  text-decoration: none;
  background: #efefef;
  -webkit-box-shadow: 0 1px 3px #ccc;
  box-shadow: 0 1px 3px #ccc; }

.dataTables_info {
  font-size: 11px;
  color: #888;
  margin: 10px 0; }

.dataTables_wrapper {
  height: 480px; }

/***------ @STATS CHARTS ------***/
.statNumber {
  font-size: 30px;
  font-family: "Lato", arial, sans-serif; }

.statsBox {
  border-bottom: 1px solid #ccc;
  padding: 15px 10px; }

.statsBox:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden; }

.singleStat {
  width: 43%;
  display: block;
  margin-right: 20px;
  height: 50px;
  float: left; }

.singleStat div {
  text-align: center;
  color: #777; }

.singleStat strong {
  display: block;
  line-height: 30px;
  color: #333;
  width: 100px; }

.singleStat div {
  float: left; }

.statGraph {
  width: 20px;
  position: relative;
  top: 12px;
  left: 10%; }

#lineChart {
  margin: 0 30px;
  width: auto;
  height: 300px;
  overflow: hidden; }

#stackedChart {
  width: auto;
  height: 200px;
  margin: 0 30px; }

/***------ @EMAIL APP ------***/
.email-app {
  background-color: #fff; }
  .email-app th {
    font-size: 12px;
    background-color: #e5e5e5; }
  .email-app .check {
    display: inline-block;
    top: -1px;
    padding: 0 0 0 10px;
    width: 22px; }
  .email-app .star-marker {
    display: inline-block;
    margin-left: 16px; }
    .email-app .star-marker:hover {
      cursor: pointer; }
    .email-app .star-marker i {
      font-size: 15px;
      position: relative;
      top: 1px; }
    .email-app .star-marker .fa-star {
      color: #0075cf; }
  .email-app .sender-name {
    font-size: 13px; }
  .email-app .subject {
    font-size: 13px;
    display: inline-block;
    overflow: hidden;
    height: 17px; }
  .email-app .message-preview {
    color: #888;
    margin: 0;
    overflow: hidden;
    height: 17px; }
  .email-app .date {
    font-size: 13px;
    font-weight: bold;
    margin-right: 10px; }

/***------ @INVOICES ------***/
.invoice {
  background-color: #fff;
  margin: 20px 0 40px;
  padding: 65px 55px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3); }
  .invoice .company-name {
    font-size: 40px; }
    .invoice .company-name img {
      height: auto;
      display: block;
      overflow: hidden;
      z-index: 2;
      width: 300px; }
  .invoice th {
    background-color: #efefef; }

.invoice-header {
  margin: 0 0 35px; }

.address-row {
  margin-bottom: 45px; }

.total-row {
  margin-bottom: 45px; }

.invoice-total {
  font-size: 18px; }

.total-row .table > tbody > tr:first-child > td {
  border: none; }

.invoice-due-date {
  padding: 5px 10px;
  margin: 20px 0 10px;
  display: inline-block;
  background: #d96700;
  color: #fff;
  font-size: 13px; }

/***------ @CODE EDITOR ------***/
.codeContainer {
  display: block;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0; }

.previewHolder {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #eee; }

#preview {
  overflow: auto;
  width: 100%;
  height: 100%;
  position: absolute; }

.codeFooter select {
  display: inline;
  right: 45px;
  margin: 0;
  position: absolute;
  bottom: -6px;
  height: 18px;
  width: 100px;
  font-size: 11px; }

.codeInfo {
  font-size: 11px;
  margin-left: 20px;
  position: relative;
  bottom: 1px; }

/***------ @PROJECTS DASH SECTION------***/
.projectBox {
  border-bottom: 1px solid #ccc;
  padding: 17px 20px 11px;
  margin: -3px 0;
  transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear; }

.projectBox:hover {
  background: #eee;
  -webkit-box-shadow: 0 1px 3px #ccc;
  box-shadow: 0 1px 3px #ccc; }

.projectBox h4 {
  font-size: 17px;
  font-weight: normal;
  margin: 0;
  font-family: "Lato", arial, sans-serif; }

.projectBox strong {
  font-size: 13px;
  margin-right: 10px;
  padding-right: 10px;
  color: #888;
  border-right: 1px solid #ccc; }

.projectBox img {
  width: 48px;
  height: 48px;
  border: 1px solid #999;
  display: block;
  float: left;
  margin: 0 15px 0 0;
  border-radius: 5px;
  background: #fff;
  -webkit-box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 #fff;
  float: left; }

.projectBox div {
  font-size: 12px;
  color: #999;
  font-family: "Lato", arial, sans-serif;
  margin: 3px 0 4px; }

.projectBox:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden; }

/***------ @ELTRE WYSIWYG ------***/
.el-rte .workzone {
  box-sizing: content-box;
  -moz-box-sizing: content-box; }

/***------ @CALENDAR ------***/
.ui-widget-header {
  border: 1px solid #0075cf;
  background: #333; }

.fc-widget-header {
  background: #dddddd;
  background: -webkit-linear-gradient(top, #eeeeee, #dddddd) !important;
  background: -moz-linear-gradient(top, #eeeeee, #dddddd) !important;
  background: -o-linear-gradient(top, #eeeeee, #dddddd) !important;
  background: linear-gradient(to bottom, #eeeeee, #dddddd) !important; }

.fc-widget-content {
  background: #eee; }

.fc-event-skin {
  background: #0075cf !important;
  background: -webkit-linear-gradient(top, #008fd6, #006cb2) !important;
  background: -moz-linear-gradient(top, #008fd6, #006cb2) !important;
  background: -o-linear-gradient(top, #008fd6, #006cb2) !important;
  background: linear-gradient(to bottom, #008fd6, #006cb2) !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); }

.fc-today {
  background: #fff3cb !important; }

.fc-header-title h2 {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  font-size: 20px; }

.fc-button-today .fc-button-inner {
  display: none; }

.fc-header-right {
  position: relative;
  top: 7px;
  right: 7px; }

.fc-header-left {
  position: relative;
  top: 7px;
  left: 7px; }

.fc-button-inner {
  background: #ddd;
  background: -webkit-linear-gradient(top, #eeeeee, #dddddd) !important;
  background: -moz-linear-gradient(top, #eeeeee, #dddddd) !important;
  background: -o-linear-gradient(top, #eeeeee, #dddddd) !important;
  background: linear-gradient(to bottom, #eeeeee, #dddddd) !important;
  border-color: #999 #ccc #888 !important; }

.fc-button-effect {
  display: none; }

.fc-button-prev .fc-button-content, .fc-button-next .fc-button-content {
  color: #666 !important;
  font-size: 0.9em !important; }

.fc-state-hover, .fc-state-hover .fc-button-inner {
  background: #eee !important;
  background: -moz-linear-gradient(top, #efefef, #eeeeee) !important;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#eeeeee)) !important;
  border-color: #aaa !important; }

.fc-state-active, .fc-state-active .fc-button-inner {
  background-color: #999 !important;
  background: -moz-linear-gradient(top, #bbbbbb, #aaaaaa) !important;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#aaaaaa)) !important;
  border-color: #888 !important; }

.calendarHolder {
  background: #ddd;
  border: 1px solid #aaa;
  border-top: none;
  padding: 25px;
  margin: 0;
  -webkit-box-shadow: inset 0 0 0 1px #efefef, inset 0 0 13px 0 #ccc, 0 1px 3px #ccc;
  box-shadow: inset 0 0 0 1px #efefef, inset 0 0 13px 0 #ccc, 0 1px 3px #ccc;
  overflow: auto; }

/***------ @SIDEBARS ------***/
.sidebar-tabs li {
  padding: 0;
  margin: 0; }

.sidebar-tabs li a {
  margin: 0;
  padding: 5px;
  text-align: center;
  color: #777;
  background: #333;
  border-top: 1px solid #444;
  border-left: 1px solid #444;
  border-right: 1px solid #444; }

.sidebar-tabs {
  border-bottom: 1px solid #444;
  padding: 0;
  margin: 10px 0 0; }

.ui-layout-west .tab-pane ul.file-list li {
  list-style: none;
  margin: 4px 0; }

.ui-layout-west .tab-pane ul {
  margin: 0;
  padding: 0; }

.files-pane strong {
  margin: 0 15px;
  line-height: 30px;
  font-size: 13px; }

.files-pane ul {
  padding: 0 0 0 23px !important; }

.files-pane li i, .files-pane p i {
  opacity: 0.5;
  margin-right: 10px; }

.files-pane ul li ul li:hover {
  background: #333;
  cursor: pointer; }

.files-pane li.folder:hover {
  background: none;
  cursor: pointer; }

.files-pane ul li ul li:active {
  background: #444; }

.data-toggle:hover {
  background: #666; }

.sidebar-tabs > li {
  margin-bottom: -1px; }

.sidebar-tabs li {
  width: 33.333%;
  margin: 0 !important;
  padding: 0; }

.list-box i {
  opacity: 0.5;
  font-size: 16px; }

.sidebar-tabs > li > a {
  border: 1px solid #444;
  line-height: 14px;
  border-bottom: 1px solid #222;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.sidebar-tabs > li > a:hover {
  border-color: rgba(200, 200, 200, 0.1);
  border-bottom: 1px solid #222;
  background: rgba(255, 255, 255, 0.1);
  color: #eee; }

.sidebar-tabs > li.active > a, .sidebar-tabs > li.active > a:hover {
  color: #eee;
  background-color: #444;
  border: 1px solid #666;
  border-bottom-color: transparent;
  cursor: default;
  -webkit-box-shadow: 0 1px 6px #111;
  box-shadow: 0 1px 6px #111;
  z-index: 10; }

.ui-layout-west .tab-content {
  -webkit-box-shadow: inset 0 2px 4px #171717;
  box-shadow: inset 0 2px 4px #171717; }

.sidebarFooterStats {
  position: relative;
  bottom: 0;
  border-top: 1px solid #444;
  -webkit-box-shadow: 0 -1px 0 #111, inset 0 -1px 0 #333, inset 0 1px 0 #222, 0 -1px 4px #0f0f0f;
  box-shadow: 0 -1px 0 #111, inset 0 -1px 0 #333, inset 0 1px 0 #222, 0 -1px 4px #0f0f0f;
  width: 100%; }

.sidebarFooterStats div {
  float: left;
  background: #272727;
  width: 50%;
  padding: 3% 5%;
  text-align: center;
  -webkit-box-shadow: -1px 0 0 #111, 1px 0 0 #111, inset -1px 0 0 #333, inset 1px 0 0 #444;
  box-shadow: -1px 0 0 #111, 1px 0 0 #111, inset -1px 0 0 #333, inset 1px 0 0 #444;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.sidebarFooterStats div:hover {
  cursor: pointer;
  background: #333; }

.sidebarFooterStats div strong {
  font-size: 16px;
  text-shadow: 0 -1px 0 #000; }

.sidebarFooterStats p {
  font-size: 11px;
  color: #666;
  margin: 0;
  text-shadow: 0 -1px 0 #111; }

.sidebarFooterStats i {
  opacity: 0.5;
  display: block;
  text-align: center;
  margin: 0 auto 5px; }

.sidebarFooter {
  height: 23px;
  padding: 0;
  position: relative;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  width: 100%;
  background: #272727;
  background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#222222));
  background: -webkit-linear-gradient(top, #333333, #222222);
  background: -moz-linear-gradient(top, #333333, #222222);
  background: -o-linear-gradient(top, #333333, #222222);
  background: linear-gradient(to bottom, #333333, #222222);
  border-top: 1px solid #444;
  -webkit-box-shadow: 0 -1px 0 #111, inset 0 -1px 0 #333, inset 0 1px 0 #222;
  box-shadow: 0 -1px 0 #111, inset 0 -1px 0 #333, inset 0 1px 0 #222;
  z-index: 3 !important;
  overflow: hidden; }

/***------ @SUBMENU SIDEBAR STYLE ------***/
.tab-pane .list-box.submenu a {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  text-decoration: none;
  font-weight: bold; }

.tab-pane .list-box.submenu .caret {
  top: 20px;
  right: 17px;
  position: absolute;
  border-top: 5px solid rgba(255, 255, 255, 0.6);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent; }

.tab-pane .list-box.submenu .panel-body {
  padding: 0; }

.tab-pane .list-box.submenu .panel-body li:hover {
  background: #3d3d3d; }

/***------ @INTERFACE ICON BUTTONS ------***/
#settingsb {
  background: url(../images/settings.png) no-repeat center;
  text-indent: -9999px;
  cursor: pointer;
  border: none;
  outline: none;
  border-right: 1px solid #111;
  border-left: 1px solid #444;
  padding: 0;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0;
  margin-left: -4px;
  height: 26px;
  width: 34px;
  -webkit-box-shadow: 1px 0 0 #444;
  box-shadow: 1px 0 0 #444; }

#newb {
  background: url(../images/new.png) no-repeat center;
  text-indent: -9999px;
  cursor: pointer;
  border: none;
  outline: none;
  border-right: 1px solid #111;
  padding: 0 15px;
  margin: 0;
  height: 26px;
  width: 34px; }

#dragb {
  background: url(../images/drag-dark.png) no-repeat center;
  text-indent: -9999px;
  cursor: move;
  border: none;
  outline: none;
  display: inline;
  padding: 0 15px;
  height: 26px;
  position: absolute;
  right: 0; }

#slideleftb {
  text-indent: -9999px;
  cursor: pointer;
  border: none;
  outline: none;
  border-right: 1px solid #777;
  padding: 0 15px;
  margin: 0;
  height: 26px;
  width: 34px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
  box-shadow: 1px 0 0 #e6e6e6; }

#sliderightb {
  text-indent: -9999px;
  cursor: pointer;
  border: none;
  outline: none;
  border-left: 1px solid #e6e6e6;
  padding: 0 15px;
  margin: 0;
  height: 26px;
  width: 34px;
  position: absolute;
  right: 0;
  -webkit-box-shadow: -1px 0 0 #777;
  box-shadow: -1px 0 0 #777; }

.closed {
  background: url(../images/arrow-left.png) no-repeat center; }

.expanded {
  background: url(../images/arrow-right.png) no-repeat center !important; }

#fullscreenb {
  background: url(../images/fullscreen.png) no-repeat center;
  text-indent: -9999px;
  cursor: pointer;
  border: none;
  outline: none;
  position: absolute;
  height: 18px;
  width: 18px;
  top: 43px;
  right: 17px;
  opacity: 0.3;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

#fullscreenb:hover {
  opacity: 0.7; }

.fullscreenMode {
  background: url(../images/exit-full.png) no-repeat center !important; }

.previewHolder {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; }

#preview {
  overflow: auto;
  width: 100%;
  height: 100%;
  position: absolute; }

.codeFooter select {
  display: inline;
  right: 45px;
  position: absolute;
  bottom: 3px; }

.codeFooter .south-toggler {
  display: inline;
  position: absolute;
  right: 140px;
  bottom: 3px; }

.icon-file {
  margin: 0 7px 0 0;
  padding: 0 5px;
  display: inline; }

/***------ @ICON PAGE ------***/
.icon-row {
  margin: 0; }

.icon-row i, .icon-row li {
  font-size: 26px;
  margin: 5px; }

#icons {
  list-style: none;
  margin: 0 0 30px; }

/***------ @TOPBAR ------***/
.topbar {
  color: #333;
  background-color: #bbb;
  background: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#a6a6a6));
  background: -webkit-linear-gradient(top, #cdcdcd, #a6a6a6);
  background: -moz-linear-gradient(top, #cdcdcd, #a6a6a6);
  background: -o-linear-gradient(top, #cdcdcd, #a6a6a6);
  background: linear-gradient(to bottom, #cdcdcd, #a6a6a6);
  border: none;
  border-bottom: 1px solid #888;
  -webkit-box-shadow: inset 0 -1px 0 #c1c1c1, inset 0 1px 0 #e6e6e6, inset -1px 0 0 #d3d3d3, inset 1px 0 0 #d3d3d3;
  box-shadow: inset 0 -1px 0 #c1c1c1, inset 0 1px 0 #e6e6e6, inset -1px 0 0 #d3d3d3, inset 1px 0 0 #d3d3d3;
  padding: 0;
  height: 41px;
  box-sizing: content-box;
  -moz-box-sizing: content-box; }
  .topbar h1 {
    font-family: "Lato", arial, sans-serif;
    color: #000;
    width: 100px;
    margin-top: 0;
    line-height: 45px;
    margin-left: 22px !important;
    font-size: 18px !important;
    text-shadow: 0 1px 1px #ccc !important;
    text-align: left !important;
    padding: 0 !important;
    font-weight: bold;
    letter-spacing: 1px;
    display: inline; }
    .topbar h1 a {
      color: #000; }
    .topbar h1:hover {
      color: #000;
      text-decoration: none; }
    .topbar h1 img {
      position: relative;
      top: -3px;
      margin-right: 10px;
      width: 25px;
      height: 25px; }

.login {
  position: fixed;
  height: 41px;
  top: 0;
  right: 0;
  display: inline;
  z-index: 3;
  -webkit-box-shadow: inset 1px 0 0 #ccc, inset -1px 0 0 #ccc, -1px 0 0 #ccc, 1px 0 0 #ccc;
  box-shadow: inset 1px 0 0 #ccc, inset -1px 0 0 #ccc, -1px 0 0 #ccc, 1px 0 0 #ccc;
  border: 1px solid #888;
  border-bottom: none;
  border-top: none;
  text-align: center;
  padding: 12px 12px 0 0;
  margin: 0; }

.login:hover {
  background: #cacaca;
  background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c2c2c2));
  background: -webkit-linear-gradient(top, #e3e3e3, #c2c2c2);
  background: -moz-linear-gradient(top, #e3e3e3, #c2c2c2);
  background: -o-linear-gradient(top, #e3e3e3, #c2c2c2);
  background: linear-gradient(to bottom, #e3e3e3, #c2c2c2);
  cursor: pointer; }

.login .dropdown-toggle {
  color: #444;
  font-size: 12px;
  height: 50px;
  text-decoration: none; }

.login .dropdown-menu {
  background: #eee;
  top: 28px;
  left: -46px;
  position: absolute;
  text-align: left;
  border-radius: 0 0 5px 5px; }

.login .dropdown-menu > li > a:hover {
  background-color: #0083ca;
  color: #fff; }

.dropdown-toggle img {
  width: 26px;
  margin: 0 10px;
  display: inline;
  border-radius: 3px;
  border: 1px solid #777;
  position: relative;
  top: -3px;
  float: left;
  -webkit-box-shadow: 0 1px 0 #ddd;
  box-shadow: 0 1px 0 #ddd; }

.dropdown.open .dropdown-toggle {
  background: none;
  color: #444; }

#netmenu {
  list-style: none;
  margin: 2px auto 0 auto;
  height: 26px;
  z-index: 0;
  color: #444 !important;
  -o-transition: all 1.6s ease;
  -moz-transition: all 1.6s ease;
  -webkit-transition: all 1.6s ease;
  transition: all 1.6s ease; }

#netmenu li a {
  font-size: 11px;
  list-style: none;
  padding: 0 7px;
  color: #444;
  margin-top: 0;
  text-shadow: 0 1px 0 #eee;
  font-weight: bold;
  outline: 0;
  text-decoration: none; }

#netmenu a:hover {
  color: #fff;
  text-shadow: 0 1px 0 #000; }

.simple li {
  width: 122px;
  height: 20px;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 5px 0;
  text-align: center;
  line-height: 20px;
  font-weight: 600;
  border-bottom: 1px solid #434343;
  border-top: 1px solid #111; }

.simple li:last-child {
  border-radius: 0 0 7px 7px;
  border-bottom: #000; }

.simple li a {
  outline: 0;
  text-decoration: none;
  color: #999; }

.simple li:hover {
  background: #333;
  list-style: none; }

.logindrop {
  float: left;
  position: absolute;
  left: -999em;
  text-align: left;
  border: 1px solid #777;
  border-top: none;
  opacity: 0;
  background: #222;
  background: -webkit-gradient(linear, left top, left bottom, from(#222222), to(#121212));
  background: -webkit-linear-gradient(top, #222222, #121212);
  background: -moz-linear-gradient(top, #222222, #121212);
  background: -o-linear-gradient(top, #222222, #121212);
  background: linear-gradient(to bottom, #222222, #121212);
  border-radius: 0 0 7px 7px;
  -webkit-box-shadow: 0px 1px 4px #222;
  box-shadow: 0px 1px 4px #222;
  -o-transition: opacity 0.6s ease;
  -moz-transition: opacity 0.6s ease;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  list-style: none; }

.logindrop a {
  color: #DDD; }

#netmenu:hover .logindrop {
  width: 122px;
  left: -2px;
  top: 30px;
  opacity: 1; }

.headerDrop {
  display: inline;
  position: fixed;
  top: 12px;
  left: 400px;
  z-index: 50000; }

#headerNav {
  position: relative;
  top: -2px;
  left: 56px;
  width: 50px;
  text-shadow: 0 1px 0 #ccc;
  color: #000;
  display: none; }

#headerNav .headerNavList {
  display: inline;
  list-style: none;
  font-size: 12px;
  font-weight: bold;
  border-right: 1px solid #888;
  padding-right: 7px;
  padding-left: 5px; }

#headerNav .headerNavList a {
  color: #444;
  text-decoration: none; }

#headerNav .headerNavList:last-child {
  border-right: none; }

#headerNav .headerNavList a:hover {
  color: #000; }

#headerNav .caret {
  top: 15px;
  position: relative; }

#headerNav .dropdown-menu {
  text-shadow: none;
  font-size: 14px;
  top: 25px;
  left: -74px;
  border: 5px solid rgba(0, 0, 0, 0.7);
  border-radius: 0 0 5px 5px;
  border-top: none;
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 10px #777777;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 10px #777777;
  background: #eee; }

#headerNav .dropdown-menu a:hover {
  color: #fff;
  background: #008fd5; }

#headerNav .dropdown-menu a {
  line-height: 23px;
  transition: color 0.2s linear;
  -o-transition: color 0.2s linear;
  -moz-transition: color 0.2s linear;
  -webkit-transition: color 0.2s linear; }

#headerNav .dropdown-menu a i {
  margin-right: 8px;
  margin-top: 1px; }

#headerNav .dropdown-menu:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #eee;
  position: absolute;
  top: -6px;
  left: 82px; }

/***------ @NOTIFICATIONS DROPDOWN ------***/
#notifyNumber {
  padding: 3px 7px 3px 8px;
  height: 20px;
  width: 20px;
  background-color: #ddd;
  border: 1px solid #888;
  display: inline;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 #ddd;
  box-shadow: 0 1px 0 #ddd; }

#notifyNumber:hover {
  background-color: #0075cf;
  border: 1px solid #555;
  color: #fff; }

.notifications {
  display: inline; }

.dropdown {
  display: inline; }

.notifications a:hover {
  text-decoration: none; }

.notifyHeader .dropdown-toggle {
  line-height: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: #333;
  margin: 0; }

.notifyHeader .dropdown .open {
  background: #ffffff !important;
  color: #000;
  border-radius: 3px 3px 0 0; }

.notifyHeader .open #notifyNumber {
  background: #ffffff;
  color: #000;
  border: none;
  text-decoration: none;
  border-radius: 3px 3px 0 0; }

.notifyHeader .dropdown-menu {
  border-top: none;
  left: -2px;
  margin-top: 0;
  border-radius: 0 0 5px 5px;
  min-width: 280px !important; }

.notifyHeader .dropdown-menu a {
  padding: 10px 10px;
  border-bottom: 1px solid #ccc;
  height: 72px;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.notifyHeader .dropdown-menu a:hover {
  background: #eee;
  color: #000; }

.notifyHeader .dropdown-menu img {
  width: 48px;
  height: 48px;
  border: 1px solid #999;
  display: block;
  float: left;
  margin: 0 15px 0 0;
  border-radius: 5px;
  background: #fff;
  -webkit-box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 #fff; }

.notifyHeader .dropdown-menu p {
  color: #999;
  font-size: 11px; }

.notifyHeader .dropdown-menu i {
  padding: 0 2px 0 0;
  position: relative;
  top: 1px;
  color: #000; }

.notifyHeader .dropdown .dropdown-toggle ul {
  width: 400px !important; }

.notifyHeader .open {
  background-color: #ffffff;
  color: #000;
  border: 1px solid #fff;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  -webkit-box-shadow: 0 1px 4px #777;
  box-shadow: 0 1px 4px #777; }

.notifyHeader {
  position: relative;
  left: 50px;
  top: -3px;
  z-index: 15000;
  display: inline; }

.notifyHeader li:first-child {
  border-bottom: 1px solid #ccc;
  padding: 2px 7px;
  font-size: 11px;
  color: #999; }

.notifyHeader li:last-child {
  text-align: center;
  font-size: 11px;
  color: #999;
  height: 33px;
  padding: 0; }

.notifyHeader li:last-child a {
  height: 35px; }

.notificationNav p {
  display: inline;
  position: relative;
  font-family: "Lato", arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 #777;
  font-size: 11px;
  font-weight: bold;
  left: 64px;
  top: -2px;
  z-index: 1000;
  background-color: #0075cf;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid #034056;
  -webkit-box-shadow: 0 1px 0 #555, inset 0 0 1px #00609d, 1px 0 0 #28454d, -1px 0 0 #28454d;
  box-shadow: 0 1px 0 #555, inset 0 0 1px #00609d, 1px 0 0 #28454d, -1px 0 0 #28454d; }

.ui-layout-center form {
  position: relative;
  height: 100%; }

.CodeMirror {
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  position: absolute; }

ul.hmenu {
  list-style: none;
  display: inline; }

ul.hmenu li {
  display: inline; }

ul.hmenu li a {
  display: inline;
  font-size: 11px;
  padding: 0 5px;
  color: #999;
  text-shadow: 0 1px 1px #222; }

.notifyHeader .btn {
  display: inline; }

/***------ @BUTTONS------***/
.btn {
  border: 1px solid #008fd3;
  border-left: 1px solid #00a9f3;
  border-right: 1px solid #4cd4ff;
  border-top: 1px solid #2ec4ff;
  background-color: #0080c7;
  background: -webkit-gradient(linear, left top, left bottom, from(#0092d9), to(#006ab0));
  background: -webkit-linear-gradient(top, #0092d9, #006ab0);
  background: -moz-linear-gradient(top, #0092d9, #006ab0);
  background: -o-linear-gradient(top, #0092d9, #006ab0);
  background: linear-gradient(to bottom, #0092d9, #006ab0);
  -webkit-box-shadow: 0 0 0 1px #004372, 0 1px 1px 1px #777;
  box-shadow: 0 0 0 1px #004372, 0 1px 1px 1px #777;
  font-size: 13px;
  padding: 5px 15px;
  margin: 5px 8px;
  color: #e5f4ff;
  text-shadow: 0 -1px 0 #005a94;
  cursor: pointer;
  border-radius: 5px;
  transition: none;
  -o-transition: none;
  -moz-transition: none;
  -webkit-transition: none;
  font-weight: 600;
  vertical-align: baseline; }

.btn:hover {
  background-color: #007acb;
  background: -webkit-gradient(linear, left top, left bottom, from(#00acff), to(#007acb));
  background: -webkit-linear-gradient(top, #00acff, #007acb);
  background: -moz-linear-gradient(top, #00acff, #007acb);
  background: -o-linear-gradient(top, #00acff, #007acb);
  background: linear-gradient(to bottom, #00acff, #007acb);
  border: 1px solid #1f99d3;
  border-left: 1px solid #1db2f3;
  border-right: 1px solid #70ddff;
  border-top: 1px solid #59d0ff;
  color: #fff; }

.btn:active {
  background-color: #006ab0;
  background: -webkit-gradient(linear, left top, left bottom, from(#006ab0), to(#006ab0));
  background: -webkit-linear-gradient(top, #006ab0, #006ab0);
  background: -moz-linear-gradient(top, #006ab0, #006ab0);
  background: -o-linear-gradient(top, #006ab0, #006ab0);
  background: linear-gradient(to bottom, #006ab0, #006ab0);
  -webkit-box-shadow: 0 0 0 1px #ccc, inset 0 1px 1px 1px #003b61;
  box-shadow: 0 0 0 1px #ccc, inset 0 1px 1px 1px #003b61;
  border: 1px solid #0068a3;
  text-shadow: 0 1px 0 #005a94; }

/***------ @BUTTON COLORS ------***/
.pink-btn {
  border: 1px solid #d30094;
  border-left: 1px solid #f300aa;
  border-right: 1px solid #ff4cc9;
  border-top: 1px solid #ff2ec0;
  background-color: #d90098;
  background: -webkit-gradient(linear, left top, left bottom, from(#d90098), to(#b0007b));
  background: -webkit-linear-gradient(top, #d90098, #b0007b);
  background: -moz-linear-gradient(top, #d90098, #b0007b);
  background: -o-linear-gradient(top, #d90098, #b0007b);
  background: linear-gradient(to bottom, #d90098, #b0007b);
  -webkit-box-shadow: 0 0 0 1px #720050, 0 1px 1px 1px #777;
  box-shadow: 0 0 0 1px #720050, 0 1px 1px 1px #777;
  color: #ffe5f7;
  text-shadow: 0 -1px 0 #940068; }

.pink-btn:hover {
  background-color: #ff00b2;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff00b2), to(#cb008e));
  background: -webkit-linear-gradient(top, #ff00b2, #cb008e);
  background: -moz-linear-gradient(top, #ff00b2, #cb008e);
  background: -o-linear-gradient(top, #ff00b2, #cb008e);
  background: linear-gradient(to bottom, #ff00b2, #cb008e);
  border: 1px solid #d31f9d;
  border-left: 1px solid #f31db3;
  border-right: 1px solid #ff70d4;
  border-top: 1px solid #ff59cd;
  color: #fff; }

.pink-btn:active {
  background-color: #b0007b;
  background: -webkit-gradient(linear, left top, left bottom, from(#b0007b), to(#b0007b));
  background: -webkit-linear-gradient(top, #b0007b, #b0007b);
  background: -moz-linear-gradient(top, #b0007b, #b0007b);
  background: -o-linear-gradient(top, #b0007b, #b0007b);
  background: linear-gradient(to bottom, #b0007b, #b0007b);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #610044;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #610044;
  border: 1px solid #a30072;
  text-shadow: 0 1px 0 #940068; }

.green-btn {
  border: 1px solid #00d36a;
  border-left: 1px solid #00f37a;
  border-right: 1px solid #4cffa5;
  border-top: 1px solid #2eff96;
  background-color: #00d96d;
  background: -webkit-gradient(linear, left top, left bottom, from(#00d96d), to(#00b064));
  background: -webkit-linear-gradient(top, #00d96d, #00b064);
  background: -moz-linear-gradient(top, #00d96d, #00b064);
  background: -o-linear-gradient(top, #00d96d, #00b064);
  background: linear-gradient(to bottom, #00d96d, #00b064);
  -webkit-box-shadow: 0 0 0 1px #007239, 0 1px 1px 1px #777;
  box-shadow: 0 0 0 1px #007239, 0 1px 1px 1px #777;
  color: #e5fff2;
  text-shadow: 0 -1px 0 #00944a; }

.green-btn:hover {
  background-color: #00ff80;
  background: -webkit-gradient(linear, left top, left bottom, from(#00ff80), to(#00cb66));
  background: -webkit-linear-gradient(top, #00ff80, #00cb66);
  background: -moz-linear-gradient(top, #00ff80, #00cb66);
  background: -o-linear-gradient(top, #00ff80, #00cb66);
  background: linear-gradient(to bottom, #00ff80, #00cb66);
  border: 1px solid #1fd379;
  border-left: 1px solid #1df388;
  border-right: 1px solid #70ffb7;
  border-top: 1px solid #59ffac;
  color: #fff; }

.green-btn:active {
  background-color: #00b058;
  background: -webkit-gradient(linear, left top, left bottom, from(#00b058), to(#00b058));
  background: -webkit-linear-gradient(top, #00b058, #00b058);
  background: -moz-linear-gradient(top, #00b058, #00b058);
  background: -o-linear-gradient(top, #00b058, #00b058);
  background: linear-gradient(to bottom, #00b058, #00b058);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #006131;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #006131;
  border: 1px solid #00a352;
  text-shadow: 0 1px 0 #00944a; }

.red-btn {
  border: 1px solid #d31900;
  border-left: 1px solid #f31c00;
  border-right: 1px solid #ff614c;
  border-top: 1px solid #ff462e;
  background-color: #d91900;
  background: -webkit-gradient(linear, left top, left bottom, from(#d91900), to(#b01500));
  background: -webkit-linear-gradient(top, #d91900, #b01500);
  background: -moz-linear-gradient(top, #d91900, #b01500);
  background: -o-linear-gradient(top, #d91900, #b01500);
  background: linear-gradient(to bottom, #d91900, #b01500);
  -webkit-box-shadow: 0 0 0 1px #720d00, 0 1px 1px 1px #777;
  box-shadow: 0 0 0 1px #720d00, 0 1px 1px 1px #777;
  color: #ffe8e5;
  text-shadow: 0 -1px 0 #941100; }

.red-btn:hover {
  background-color: #ff1e00;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff1e00), to(#cb1800));
  background: -webkit-linear-gradient(top, #ff1e00, #cb1800);
  background: -moz-linear-gradient(top, #ff1e00, #cb1800);
  background: -o-linear-gradient(top, #ff1e00, #cb1800);
  background: linear-gradient(to bottom, #ff1e00, #cb1800);
  border: 1px solid #d3341f;
  border-left: 1px solid #f3361d;
  border-right: 1px solid #ff8170;
  border-top: 1px solid #ff6c59;
  color: #fff; }

.red-btn:active {
  background-color: #b01500;
  background: -webkit-gradient(linear, left top, left bottom, from(#b01500), to(#b01500));
  background: -webkit-linear-gradient(top, #b01500, #b01500);
  background: -moz-linear-gradient(top, #b01500, #b01500);
  background: -o-linear-gradient(top, #b01500, #b01500);
  background: linear-gradient(to bottom, #b01500, #b01500);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #610b00;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #610b00;
  border: 1px solid #a31300;
  text-shadow: 0 1px 0 #941100; }

.orange-btn {
  border: 1px solid #d35100;
  border-left: 1px solid #f35d00;
  border-right: 1px solid #ff914c;
  border-top: 1px solid #ff7e2e;
  background-color: #d95300;
  background: -webkit-gradient(linear, left top, left bottom, from(#d95300), to(#b04300));
  background: -webkit-linear-gradient(top, #d95300, #b04300);
  background: -moz-linear-gradient(top, #d95300, #b04300);
  background: -o-linear-gradient(top, #d95300, #b04300);
  background: linear-gradient(to bottom, #d95300, #b04300);
  -webkit-box-shadow: 0 0 0 1px #722c00, 0 1px 1px 1px #777;
  box-shadow: 0 0 0 1px #722c00, 0 1px 1px 1px #777;
  color: #ffefe5;
  text-shadow: 0 -1px 0 #943900; }

.orange-btn:hover {
  background-color: #ff6200;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff6200), to(#cb4e00));
  background: -webkit-linear-gradient(top, #ff6200, #cb4e00);
  background: -moz-linear-gradient(top, #ff6200, #cb4e00);
  background: -o-linear-gradient(top, #ff6200, #cb4e00);
  background: linear-gradient(to bottom, #ff6200, #cb4e00);
  border: 1px solid #d3641f;
  border-left: 1px solid #f36f1d;
  border-right: 1px solid #ffa770;
  border-top: 1px solid #ff9959;
  color: #fff; }

.orange-btn:active {
  background-color: #b04300;
  background: -webkit-gradient(linear, left top, left bottom, from(#b04300), to(#b04300));
  background: -webkit-linear-gradient(top, #b04300, #b04300);
  background: -moz-linear-gradient(top, #b04300, #b04300);
  background: -o-linear-gradient(top, #b04300, #b04300);
  background: linear-gradient(to bottom, #b04300, #b04300);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #612500;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #612500;
  border: 1px solid #a33e00;
  text-shadow: 0 1px 0 #943900; }

.yellow-btn {
  border: 1px solid #d3a200;
  border-left: 1px solid #f3ba00;
  border-right: 1px solid #ffd54c;
  border-top: 1px solid #ffce2e;
  background-color: #d9a600;
  background: -webkit-gradient(linear, left top, left bottom, from(#d9a600), to(#b08700));
  background: -webkit-linear-gradient(top, #d9a600, #b08700);
  background: -moz-linear-gradient(top, #d9a600, #b08700);
  background: -o-linear-gradient(top, #d9a600, #b08700);
  background: linear-gradient(to bottom, #d9a600, #b08700);
  -webkit-box-shadow: 0 0 0 1px #725700, 0 1px 1px 1px #777;
  box-shadow: 0 0 0 1px #725700, 0 1px 1px 1px #777;
  color: #fff9e5;
  text-shadow: 0 -1px 0 #947100; }

.yellow-btn:hover {
  background-color: #ffc400;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffc400), to(#cb9c00));
  background: -webkit-linear-gradient(top, #ffc400, #cb9c00);
  background: -moz-linear-gradient(top, #ffc400, #cb9c00);
  background: -o-linear-gradient(top, #ffc400, #cb9c00);
  background: linear-gradient(to bottom, #ffc400, #cb9c00);
  border: 1px solid #d3a91f;
  border-left: 1px solid #f3c11d;
  border-right: 1px solid #ffde70;
  border-top: 1px solid #ffd859;
  color: #fff; }

.yellow-btn:active {
  background-color: #b08700;
  background: -webkit-gradient(linear, left top, left bottom, from(#b08700), to(#b08700));
  background: -webkit-linear-gradient(top, #b08700, #b08700);
  background: -moz-linear-gradient(top, #b08700, #b08700);
  background: -o-linear-gradient(top, #b08700, #b08700);
  background: linear-gradient(to bottom, #b08700, #b08700);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #614a00;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #614a00;
  border: 1px solid #a37d00;
  text-shadow: 0 1px 0 #947100; }

.purple-btn {
  border: 1px solid #8600d3;
  border-left: 1px solid #9a00f3;
  border-right: 1px solid #bd4cff;
  border-top: 1px solid #b22eff;
  background-color: #8900d9;
  background: -webkit-gradient(linear, left top, left bottom, from(#8900d9), to(#6f00b0));
  background: -webkit-linear-gradient(top, #8900d9, #6f00b0);
  background: -moz-linear-gradient(top, #8900d9, #6f00b0);
  background: -o-linear-gradient(top, #8900d9, #6f00b0);
  background: linear-gradient(to bottom, #8900d9, #6f00b0);
  -webkit-box-shadow: 0 0 0 1px #480072, 0 1px 1px 1px #777;
  box-shadow: 0 0 0 1px #480072, 0 1px 1px 1px #777;
  color: #f5e5ff;
  text-shadow: 0 -1px 0 #5e0094; }

.purple-btn:hover {
  background-color: #a100ff;
  background: -webkit-gradient(linear, left top, left bottom, from(#a100ff), to(#8100cb));
  background: -webkit-linear-gradient(top, #a100ff, #8100cb);
  background: -moz-linear-gradient(top, #a100ff, #8100cb);
  background: -o-linear-gradient(top, #a100ff, #8100cb);
  background: linear-gradient(to bottom, #a100ff, #8100cb);
  border: 1px solid #911fd3;
  border-left: 1px solid #a51df3;
  border-right: 1px solid #cb70ff;
  border-top: 1px solid #c259ff;
  color: #fff; }

.purple-btn:active {
  background-color: #6f00b0;
  background: -webkit-gradient(linear, left top, left bottom, from(#6f00b0), to(#6f00b0));
  background: -webkit-linear-gradient(top, #6f00b0, #6f00b0);
  background: -moz-linear-gradient(top, #6f00b0, #6f00b0);
  background: -o-linear-gradient(top, #6f00b0, #6f00b0);
  background: linear-gradient(to bottom, #6f00b0, #6f00b0);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #3d0061;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 1px 1px #3d0061;
  border: 1px solid #6700a3;
  text-shadow: 0 1px 0 #5e0094; }

.disabled-btn {
  border: none;
  margin: 15px 9px 15px 3px;
  background-color: #999999;
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#999999));
  background: -webkit-linear-gradient(top, #999999, #999999);
  background: -moz-linear-gradient(top, #999999, #999999);
  background: -o-linear-gradient(top, #999999, #999999);
  background: linear-gradient(to bottom, #999999, #999999);
  -webkit-box-shadow: 0 0 0 1px #777, inset 0 1px 1px 1px #888;
  box-shadow: 0 0 0 1px #777, inset 0 1px 1px 1px #888;
  color: #ddd;
  text-shadow: none; }

.disabled-btn:hover {
  border: none;
  background-color: #999999;
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#999999));
  background: -webkit-linear-gradient(top, #999999, #999999);
  background: -moz-linear-gradient(top, #999999, #999999);
  background: -o-linear-gradient(top, #999999, #999999);
  background: linear-gradient(to bottom, #999999, #999999);
  -webkit-box-shadow: 0 0 0 1px #777, inset 0 1px 1px 1px #888;
  box-shadow: 0 0 0 1px #777, inset 0 1px 1px 1px #888;
  color: #ddd;
  text-shadow: none;
  cursor: default; }

.disabled-btn:active {
  border: none;
  background-color: #999999;
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#999999));
  background: -webkit-linear-gradient(top, #999999, #999999);
  background: -moz-linear-gradient(top, #999999, #999999);
  background: -o-linear-gradient(top, #999999, #999999);
  background: linear-gradient(to bottom, #999999, #999999);
  -webkit-box-shadow: 0 0 0 1px #777, inset 0 1px 1px 1px #888;
  box-shadow: 0 0 0 1px #777, inset 0 1px 1px 1px #888;
  color: #ddd;
  text-shadow: none;
  cursor: default; }

/***------ @BUTTON SIZES ------***/
.small-btn {
  padding: 2px 12px;
  font-size: 10px; }

.large-btn {
  padding: 7px 22px;
  font-size: 14px; }

.xlarge-btn {
  padding: 9px 32px;
  font-size: 16px; }

.xxl-btn {
  padding: 12px 32px;
  font-size: 16px; }

.small-gbtn {
  padding: 2px 12px;
  font-size: 10px;
  -webkit-box-shadow: inset 0 8px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 1px #888888;
  box-shadow: inset 0 8px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 1px #888888; }

.large-gbtn {
  padding: 7px 22px;
  font-size: 14px;
  -webkit-box-shadow: inset 0 16px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 1px #888888;
  box-shadow: inset 0 16px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 1px #888888; }

.xlarge-gbtn {
  padding: 9px 32px;
  font-size: 16px;
  -webkit-box-shadow: inset 0 19px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 1px #888888;
  box-shadow: inset 0 19px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 1px #888888; }

.xxl-gbtn {
  padding: 12px 32px;
  font-size: 16px;
  -webkit-box-shadow: inset 0 22px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 1px #888888;
  box-shadow: inset 0 22px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 1px #888888; }

/***------ @BUTTON OPTIONS ------***/
.round-btn {
  border-radius: 150px; }

.half-btn {
  border-radius: 15px 0; }

.no-radius {
  border-radius: 0; }

/***------ @TOPBAR BUTTONS AND INPUT ------***/
.theme-btn {
  top: -3px;
  left: 70px;
  margin: 0;
  position: relative;
  display: inline-block;
  width: 95px;
  padding: 4px 8px;
  font-weight: bold;
  font-size: 12px; }

.theme-btn i {
  position: relative;
  top: 2px;
  margin-right: 3px;
  font-size: 17px; }

.b-small {
  font-size: 10px;
  padding: 0 10px; }

.b-big {
  font-size: 14px;
  padding: 0 20px;
  height: 35px;
  font-weight: bold; }

.admin_new div label {
  line-height: 25px;
  color: #111; }

#search {
  position: fixed;
  top: 7px;
  right: 170px;
  display: inline; }

#search i {
  position: relative;
  top: 0;
  font-size: 11px; }

#search input {
  margin: 0 auto;
  width: 179px;
  font-size: 12px;
  height: 28px;
  font-family: inherit;
  line-height: 14px;
  outline: 0;
  padding: 4px 26px;
  border: 1px solid #ccc;
  border-bottom: 1px solid #e6e6e6;
  -webkit-box-shadow: inset 0 1px 2px #666, inset 0 0 2px #999, 0 1px 3px #ccc;
  -o-box-shadow: inset 0 1px 2px #666, inset 0 0 2px #999, 0 1px 3px #ccc;
  box-shadow: inset 0 1px 2px #666, inset 0 0 2px #999, 0 1px 3px #ccc;
  border-radius: 13px;
  background-color: #ddd;
  background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#efefef));
  background: -webkit-linear-gradient(top, #dddddd, #efefef);
  background: -moz-linear-gradient(top, #dddddd, #efefef);
  background: -o-linear-gradient(top, #dddddd, #efefef);
  background: linear-gradient(to bottom, #dddddd, #efefef);
  text-shadow: 0 -1px 0 #f8f8f8;
  transition: width 0.3s linear;
  -o-transition: width 0.3s linear;
  -moz-transition: width 0.3s linear;
  -webkit-transition: width 0.3s linear; }

#search input:focus {
  width: 224px;
  background: #f4f4f4;
  border: 1px solid #ccc !important;
  border-bottom: 1px solid #e6e6e6 !important;
  -webkit-box-shadow: inset 0 1px 2px #666, inset 0 0 2px #999, 0 1px 3px #ccc !important;
  -o-box-shadow: inset 0 1px 2px #666, inset 0 0 2px #999, 0 1px 3px #ccc !important;
  box-shadow: inset 0 1px 2px #666, inset 0 0 2px #999, 0 1px 3px #ccc !important; }

#search input::-webkit-input-placeholder {
  font-style: italic;
  color: #666; }

#search span {
  position: absolute;
  z-index: 999;
  width: 170px;
  left: 50%;
  margin-left: -85px; }

.search-inside {
  position: relative;
  left: 23px;
  top: 3px;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity=5); }

/***------ @SIDEBAR ACCORDION STYLE ------***/
.ui-layout-east .panel, .ui-layout-west .panel {
  border: 1px solid #444;
  margin-bottom: 2px;
  background-color: #292929; }
.ui-layout-east .panel-heading, .ui-layout-west .panel-heading {
  height: 30px;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 15px;
  border: none;
  border-radius: 3px 3px 0 0; }
.ui-layout-east .panel-heading a, .ui-layout-west .panel-heading a {
  height: 20px !important;
  color: #999; }
.ui-layout-east .panel-heading:hover, .ui-layout-west .panel-heading:hover {
  background: #444;
  color: #DDD; }
.ui-layout-east .panel-heading:hover a, .ui-layout-west .panel-heading:hover a {
  color: #DDD;
  text-decoration: none; }
.ui-layout-east .panel-default > .panel-heading, .ui-layout-west .panel-default > .panel-heading {
  background-color: transparent; }
.ui-layout-east .panel a:hover, .ui-layout-west .panel a:hover {
  text-decoration: none; }
.ui-layout-east .panel-default > .panel-heading + .panel-collapse .panel-body, .ui-layout-west .panel-default > .panel-heading + .panel-collapse .panel-body {
  border-top: 1px solid #444;
  background: #313131;
  padding: 9px 15px; }
.ui-layout-east .panel-body .message-box, .ui-layout-west .panel-body .message-box {
  background: #444;
  border: 1px solid #555;
  border-radius: 5px; }
.ui-layout-east .panel-body .message-box img, .ui-layout-west .panel-body .message-box img {
  border: 1px solid #111;
  -webkit-box-shadow: 0 1px 0 #777;
  box-shadow: 0 1px 0 #777; }
.ui-layout-east .panel-body .message-box p, .ui-layout-east .panel-body .message-box h5, .ui-layout-west .panel-body .message-box p, .ui-layout-west .panel-body .message-box h5 {
  color: #ccc; }
.ui-layout-east .panel-body .message-box i, .ui-layout-west .panel-body .message-box i {
  opacity: 0.5; }

/***------ @BREADCRUMBS ------***/
.breadcrumb {
  width: 100%;
  border-radius: 0;
  border: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #aaa;
  -webkit-box-shadow: 0 0 2px #ccc;
  box-shadow: 0 0 2px #ccc;
  background: #ddd; }

.breadcrumb li {
  display: inline-block;
  line-height: 20px;
  margin: 0 9px 0 -10px;
  padding: 0 20px;
  position: relative;
  z-index: 1; }

.breadcrumb > li + li:before {
  /* Add a hex code here to create an additional breadcrumb separator */
  content: ""; }

.breadcrumb li:before, .breadcrumb li:after {
  border-right: 1px solid #777;
  content: '';
  display: block;
  height: 53%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  -moz-transform: skewX(45deg);
  -ms-transform: skewX(45deg);
  -o-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg); }

.breadcrumb li:after {
  bottom: 0;
  top: auto;
  -moz-transform: skewX(-45deg);
  -ms-transform: skewX(-45deg);
  -o-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg); }

.breadcrumb li:last-of-type:before, li:last-of-type:after {
  display: none; }

.breadcrumb li a {
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #333; 
  text-shadow: 0 -1px 0 #fff; }

.breadcrumb li a:hover {
  color: #000;
  cursor: pointer; }

/***------ @FOOTER ------***/
#footer {
  background-color: #666;
  padding: 0 18px;
  background: #333;
  background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#222222));
  background: -webkit-linear-gradient(top, #333333, #222222);
  background: -moz-linear-gradient(top, #333333, #222222);
  background: -o-linear-gradient(top, #333333, #222222);
  background: linear-gradient(to bottom, #333333, #222222);
  border: 1px solid #555;
  border-bottom: none;
  border-left: none;
  -webkit-box-shadow: 0 -1px 0 #333, 0 -1px 4px #333, inset 0 -2px 1px #111;
  box-shadow: 0 -1px 0 #333, 0 -1px 4px #333, inset 0 -2px 1px #111; }

.codeFooter p {
  font-size: 10px;
  margin: 10px 10px 0 30px;
  text-shadow: 0 1px 1px #999;
  width: 280px;
  font-family: arial, sans-serif;
  color: #333; }

.charleft {
  position: fixed !important;
  right: 15px;
  bottom: 53px;
  z-index: 10;
  width: 120px !important;
  padding: 6px 0 6px 0; }

.stats {
  text-align: left;
  position: absolute;
  top: -10px;
  z-index: 10;
  display: inline;
  color: #444;
  text-shadow: 0 -1px 0 #dcdcdc;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

/***------ @LOGIN PAGE ------***/
.signinBox {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #333;
  -webkit-box-shadow: inset 0 -1px 57px #000;
  box-shadow: inset 0 -1px 57px #000;
  background: -moz-radial-gradient(center center, circle closest-side, #666666 0%, #333333 100%);
  background: -webkit-gradient(radial, center center, 400, center center, 0, from(#333333), to(#666666));
  overflow: auto; }

.signinBox h1 {
  font-size: 80px;
  text-align: center;
  text-shadow: 0 -1px 0 #fff; }

#signinHold {
  top: 30%;
  left: 50%;
  position: absolute;
  margin-top: 70px;
  margin-left: -335px; }

.signin {
  margin-top: 40px;
  height: 130px;
  padding: 10px 62px 10px 61px;
  border-radius: 11px;
  -webkit-box-shadow: 0 1px 3px #444;
  box-shadow: 0 1px 3px #444;
  background: rgba(0, 0, 0, 0.05);
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.signin h2 {
  font-size: 22px;
  font-weight: bold;
  line-height: 50px;
  color: #bbb;
  text-shadow: 0 1px 0 #333; }

.signin a {
  color: #000;
  text-shadow: 0 1px 0 #ccc;
  text-decoration: none;
  line-height: 25px; }

.signin input {
  margin-right: 15px;
  border: 1px solid #aaa;
  height: 31px;
  -webkit-box-shadow: 0 1px 0 #ddd;
  box-shadow: 0 1px 0 #ddd; }

.signin input:focus {
  margin-right: 15px;
  border: 1px solid #aaa !important;
  -webkit-box-shadow: 0 0 23px #222 !important;
  box-shadow: 0 0 23px #222 !important; }

.imgContain img {
  max-width: 600px;
  height: auto;
  display: block;
  overflow: hidden;
  position: absolute;
  top: -80px;
  left: 40px;
  z-index: 2;
  width: 620px; }

#signin-btn {
  display: inline;
  margin: 0;
  line-height: 22px;
  font-size: 14px;
  padding: 5px 24px;
  position: relative; }

#signin-btn:active {
  -webkit-box-shadow: 0 0 1px #222, inset 0 0 5px #222;
  box-shadow: 0 0 1px #222, inset 0 0 5px #222; }

.signin label {
  display: inline; }

.signin p {
  width: 565px;
  padding: 20px 0; }

.goBack {
  color: #999;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  background: rgba(0, 0, 0, 0.1);
  max-width: 300px;
  margin: 20px auto;
  border-radius: 15px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  text-shadow: 0 1px 0 #222; }

.goBack a:hover {
  color: #fff;
  text-decoration: none; }

/***------ @RESPONSIVE LOGIN STRUCTURE ------***/
@media only screen and (max-width: 820px) {
  #signinHold {
    top: 42%;
    left: 50%;
    margin-top: -70px;
    margin-left: -265px; }

  .imgContain img {
    max-width: 570px;
    top: -74px;
    left: -8px; }

  .signin {
    height: 200px;
    display: block;
    margin: 40px auto;
    transition: none;
    -o-transition: none;
    -moz-transition: none;
    -webkit-transition: none; }
    .signin form {
      width: 228px;
      margin: 0 auto; }
      .signin form .btn {
        margin: 10px auto 0;
        width: 228px; }
    .signin h2 {
      width: 402px;
      line-height: 26px;
      margin: 0 0 12px 0;
      padding: 0;
      text-align: center; }
    .signin input {
      width: 228px !important; }
    .signin p {
      width: 415px;
      padding: 20px 0; }

  #signin-btn {
    display: inline;
    margin: 5px 0 0 0; } }
@media only screen and (max-width: 665px) {
  #signinHold {
    top: 290px;
    margin-left: -164px; }

  .imgContain img {
    max-width: 480px;
    top: -62px;
    left: -62px; }

  .signin {
    width: 322px; }
    .signin form {
      left: -15px;
      position: relative; }
    .signin h2 {
      width: 352px;
      font-size: 22px;
      left: -75px;
      position: relative; }
    .signin input {
      width: 218px; }
    .signin p {
      width: 205px;
      line-height: 20px; } }
@media only screen and (max-width: 568px) {
  #signinHold {
    top: 120px;
    left: 50%;
    margin-left: -137px; }

  .imgContain img {
    max-width: 320px;
    top: -42px;
    left: -20px; }

  .signin {
    height: 200px;
    width: 276px; }
    .signin form {
      width: 228px;
      left: -38px; }
    .signin h2 {
      width: 272px;
      left: -60px;
      font-size: 16px; }
    .signin p {
      width: 155px; } }
/***------ @PROFILE DETAIL ------***/
.profile-wrapper {
  margin-bottom: 35px;
  box-shadow: -4px 0 7px -4px #999, 4px 0 7px -4px #999; }

.profile-wrapper.profile-container {
  max-width: 700px;
  margin: 0 auto; }

.profile-box {
  background: #ddd;
  border-bottom: 1px solid #ccc;
  padding: 20px 20px 15px;
  position: relative;
  transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear; }

.profile-box span {
  color: #888;
  font-size: 11px;
  font-weight: normal;
  margin: 0 0 0 5px; }

.profile-box h5 {
  font-size: 16px;
  margin: 0 0 5px 0; }

.profile-box p {
  margin: 0 0 13px;
  color: #555; }

.ui-layout-center .profile-box:hover {
  background: #f8f8f8; }

.profile-box .question-details {
  margin-left: 68px; }

.profile-box img {
  width: 48px;
  height: 48px;
  border: 1px solid #999;
  display: block;
  position: absolute;
  margin: 0 15px 15px 0;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  background: #fff;
  -webkit-box-shadow: 0px 1px 0px #fff;
  box-shadow: 0px 1px 0px #fff; }

.profile-box .joined {
  font-size: 11px;
  color: #999;
  line-height: 14px; }

.profile-box .posts-number, .profile-box .comments-number {
  font-weight: 700; }

.profile-box.profile-section img {
  width: 80px;
  height: 80px;
  float: left;
  position: relative; }

.profile-box.profile-section:hover {
  background: #ddd; }

.profile-box.profile-section h5 {
  font-size: 19px; }

.profile-box.profile-section .follow-btns {
  width: 210px;
  margin-right: 20px; }

.profile-box.profile-section p {
  font-size: 12px;
  margin: 0; }

.profile-box.profile-section .follow-btns a {
  width: auto; }

.profile-box.profile-section .follow-btns {
  margin: 35px 0 20px; }

.profile-box.profile-section .follow-btn a {
  padding: 7px 40px; }

.suggested-users {
  background: #ddd;
  -webkit-box-shadow: inset 0 0 6px #ccc;
  box-shadow: inset 0 0 6px #ccc; }

.suggested-users .profile-box {
  background: none; }

.suggested-users h3 {
  padding: 10px 20px;
  border-bottom: 1px solid #ccc; }

.follow-status, .private-badge {
  padding: 5px 10px;
  background: #777;
  margin: 10px;
  border-radius: 5px; }

.follow-status p, .private-badge p {
  color: #fff;
  text-align: center;
  font-weight: 600; }

.follow-btn {
  position: absolute;
  right: 40px;
  top: 42px; }

.follow-btn a {
  background: #bbb;
  border-radius: 5px;
  color: #000;
  padding: 4px 20px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #999;
  text-shadow: 0 -1px 0 #ddd;
  font-weight: 600; }

.follow-btn a:hover {
  text-decoration: none;
  background: #aaa; }

.follow-btns a, .default-btn {
  padding: 5px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  width: 95px;
  text-align: center;
  background: #777;
  border: 1px solid #666;
  border-top: 1px solid #888;
  font-size: 11px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 -13px 8px -2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -13px 8px -2px rgba(0, 0, 0, 0.15);
  text-shadow: 0 -1px 0 #555; }

.follow-btns a:hover, .default-btn:hover {
  background: #555; }

/***------ @COMMENTS ------***/
.comment-box {
  min-height: 500px;
  background: #eee;
  box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.8), 4px 4px 8px -4px rgba(0, 0, 0, 0.8);
  max-width: 1000px;
  padding: 0; }

.comment-box h3 {
  color: #444;
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
  margin-bottom: 0; }

.comment-box h3 i {
  color: #999;
  margin-right: 5px; }

.comment-box form {
  width: 80%;
  margin: 0 10%;
  display: block; }

.comment-box .message-box {
  border-bottom: 1px solid #ccc;
  padding: 20px 20px;
  min-height: 59px;
  transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear; }

.comment-box .message-box span {
  color: #888;
  font-size: 11px;
  font-weight: normal;
  margin: 0 0 0 5px; }

.comment-box .message-box h5 {
  font-size: 16px;
  margin: 0 0 5px 0; }

.comment-box .message-box p {
  margin: 0;
  color: #555; }

.comment-box .message-box img {
  width: 40px;
  height: 40px;
  border: 1px solid #999;
  display: block;
  float: left;
  margin: 0 15px 0 0;
  border-radius: 5px;
  background: #fff;
  -webkit-box-shadow: 0px 1px 0px #fff;
  box-shadow: 0px 1px 0px #fff; }

.add-reply, .add-comment {
  display: none; }

.reply-to {
  float: right;
  bottom: 3px;
  position: relative;
  color: #444;
  font-size: 14px;
  opacity: 0.5;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear; }

.reply-to:hover {
  opacity: 1;
  text-decoration: none;
  color: #444; }

.comment-box .comment-reply {
  padding: 20px 20px 20px 70px;
  background: rgba(0, 0, 0, 0.045); }

.comment-admin {
  background: #eee; }

.comment-box h4 {
  margin: 20px 0;
  color: #444; }

.comment-box textarea, .comment-box input {
  width: 80%;
  margin: 6px 10%; }

/***------ @MODAL TEMPLATES ------***/
/***------ @PROFILE MODAL ------***/
.profile-modal {
  color: #333; }

.profile-modal:hover {
  color: #009cff;
  text-decoration: none; }

.modal-body .profile-box {
  border-bottom: none;
  box-shadow: none; }

.modal-body .profile-box img {
  width: 80px;
  height: 80px;
  float: left;
  position: relative; }

.modal-profile-style .modal-body {
  padding: 0; }

.modal-profile-style .profile-box p {
  font-size: 12px;
  margin: 0; }

.modal-profile-style.modal.in {
  z-index: 11000 !important;
  /*Keeps profile modal above other modals*/ }

.modal-profile-style .follow-btns {
  height: 25px;
  margin: 20px 0;
  width: auto; }

.modal-profile-style .follow-btns a {
  width: auto; }

.modal-profile-style .follow-btn a {
  padding: 7px 40px; }

/***------ @SHARE MODAL ------***/
.share-text {
  font-size: 20px;
  font-weight: bold;
  margin: 10px;
  line-height: 27px; }

.share-help-text {
  color: #888;
  margin: 10px;
  font-style: italic; }

/***------ @COMMENT MODAL ------***/
.modal-comment .modal-body {
  padding: 0; }

/***------ @FULLSCREEN MODAL ------***/
.modal-fullscreen .modal-dialog {
  width: 90%;
  height: 90%;
  left: 5%;
  margin: 0;
  overflow: auto; }

.modal-fullscreen.fade .modal-dialog {
  top: 5%;
  position: absolute;
  max-width: 1100px; }

.modal-fullscreen .modal-body {
  max-height: none;
  height: auto;
  overflow: auto;
  padding: 0;
  background: #eee;
  -webkit-overflow-scrolling: touch; }

.modal-fullscreen .row {
  margin: 0;
  background: #333; }

.comments-style.bigmodal.fade.in {
  width: 60%;
  left: 20%;
  border-radius: 0;
  top: 0 !important;
  height: 100%;
  -webkit-overflow-scrolling: touch; }

.comments-style.bigmodal.in .modal-header {
  border-radius: 0; }

.comment-box.standalone {
  padding: 0px 0 0;
  margin: 0 auto; }

.modal-img-large img {
  margin: 30px auto;
  display: block;
  width: 90%; }

/***------ @MODIFIED BOOTSTRAP ------***/
h1 small {
  font-size: 18px; }

pre, li {
  line-height: 18px; }

.page-header {
  padding-bottom: 10px;
  margin: 18px 0; }

.label {
  text-transform: uppercase;
  font-size: 10px;
  padding: 1px 4px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); }

.pagination {
  text-align: center;
  margin: 0 auto 61px;
  width: 235px;
  display: block; }

.pagination a {
  padding: 0 10px;
  line-height: 30px; }

.pagination ul > li > a, .pagination ul > li > span {
  background: none; }

.dropdown-toggle:active, .open .dropdown-toggle {
  outline: 0; }

.icon-bar {
  display: block;
  width: 1.5em !important;
  height: 2px;
  background-color: whiteSmoke;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

.navbar-toggle {
  line-height: 2px;
  display: none;
  float: none;
  margin: 0;
  background-color: #2C2C2C;
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(to bottom, #333333, #222222);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
  border-color: #222 #222 black;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); }

.dropdown-menu .divider {
  height: 1px;
  margin: 5px 1px; }

.badge {
  display: inline-block;
  position: absolute;
  right: 8px;
  line-height: 18px;
  border: 1px solid #555;
  background-color: #0080c7;
  background: -webkit-gradient(linear, left top, left bottom, from(#0092d9), to(#006ab0));
  background: -webkit-linear-gradient(top, #0092d9, #006ab0);
  background: -moz-linear-gradient(top, #0092d9, #006ab0);
  background: -o-linear-gradient(top, #0092d9, #006ab0);
  background: linear-gradient(to bottom, #0092d9, #006ab0);
  -webkit-box-shadow: 0 0 0 1px #222, 0 1px 1px 1px #555;
  box-shadow: 0 0 0 1px #222, 0 1px 1px 1px #555;
  height: 19px;
  width: 27px;
  font-size: 12px;
  text-align: center;
  padding: 0;
  color: #e5f4ff;
  text-shadow: 0 -1px 0 #005a94;
  cursor: pointer;
  border-radius: 7px;
  transition: none;
  -o-transition: none;
  -moz-transition: none;
  -webkit-transition: none;
  font-weight: 600; }

.tab-pane .list-box:hover .badge {
  -webkit-box-shadow: 0 0 0 1px #222, 0 1px 1px 1px #777;
  box-shadow: 0 0 0 1px #222, 0 1px 1px 1px #777; }

.tab-pane .list-box:active .badge {
  -webkit-box-shadow: 0 0 0 1px #333, 0 1px 1px 1px #999;
  box-shadow: 0 0 0 1px #333, 0 1px 1px 1px #999; }

.modal-header {
  background: #f5f5f5;
  background: -webkit-gradient(linear, left top, left bottom, from(whitesmoke), to(#dddddd));
  background: -webkit-linear-gradient(top, whitesmoke, #dddddd);
  background: -moz-linear-gradient(top, whitesmoke, #dddddd);
  background: -o-linear-gradient(top, whitesmoke, #dddddd);
  background: linear-gradient(to bottom, whitesmoke, #dddddd);
  border-radius: 7px 7px 0 0;
  border: 1px solid #bbb;
  border-top: 1px solid #fff;
  -webkit-box-shadow: inset 0 0 0 1px #efefef, 0 1px 3px #ddd;
  box-shadow: inset 0 0 0 1px #efefef, 0 1px 3px #ddd; }

.modal {
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
  border-radius: 9px; }

.modal-backdrop, .modal-backdrop.fade.in {
  opacity: 0.6; }

.thumbnails {
  list-style: none; }

.thumbnails li {
  padding: 0 0 0 20px; }

.thumbnail {
  background: #f8f8f8;
  padding: 8px;
  transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease; }

.thumbnail:hover {
  -webkit-box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1); }

.thumbnail img {
  -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  margin-bottom: 10px; }

.help-block {
  font-size: 12px;
  font-style: italic; }

input, textarea {
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.13);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.13);
  padding: 4px;
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 18px;
  color: #555555;
  border: 1px solid #ccc;
  border-radius: 3px; }

input:focus, textarea:focus {
  border-color: rgba(100, 100, 100, 0.7) !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(100, 100, 100, 0.6) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(100, 100, 100, 0.6) !important;
  outline: 0 !important;
  outline: thin dotted \9 !important;
  /* IE6-8 */
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s; }

.dash-row label {
  margin-top: 15px; }

.control-label {
  margin: 0 !important; }

.controls label {
  margin: 0 !important; }

.colorpicker input {
  outline: none;
  width: 30px; }

.form-actions {
  padding: 17px 20px 18px;
  margin-top: 18px;
  margin-bottom: 18px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd; }

/***------ @ALERTS ------***/
.close {
  opacity: 0.4; }

.alert {
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); }

.alert-error {
  background: #f2ab97;
  background: -moz-linear-gradient(top, #f2ab97, #f28465);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f2ab97), to(#f28465));
  border: 1px solid #be5336;
  color: #761900; }

.alert-info {
  background: #c3e2f7;
  background: -moz-linear-gradient(top, #c3e2f7, #7fc7f7);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c3e2f7), to(#7fc7f7));
  border: 1px solid #54b6f7;
  color: #00558f; }

.alert-success {
  background: #b5f0c6;
  background: -moz-linear-gradient(top, #b5f0c6, #7ef09f);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b5f0c6), to(#7ef09f));
  border: 1px solid #53bb70;
  color: #327144; }

/***------ @PROGRESS BARS ------***/
.progress {
  height: 18px; }

.progress-bar-danger {
  background-color: #dd188a !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#dd188a), to(#b1136e));
  background: -webkit-linear-gradient(top, #dd188a, #b1136e);
  background: -moz-linear-gradient(top, #dd188a, #b1136e);
  background: -o-linear-gradient(top, #dd188a, #b1136e);
  background: linear-gradient(to bottom, #dd188a, #b1136e); }

.progress-bar-info {
  background-color: #ff771c !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff771c), to(#ca5e16));
  background: -webkit-linear-gradient(top, #ff771c, #ca5e16);
  background: -moz-linear-gradient(top, #ff771c, #ca5e16);
  background: -o-linear-gradient(top, #ff771c, #ca5e16);
  background: linear-gradient(to bottom, #ff771c, #ca5e16); }

.progress-small, .progress-small .progress-bar {
  height: 6px;
  margin: 0; }

.progress-info .progress-bar {
  background-color: #dd188a !important; }

#gritter-notice-wrapper {
  top: 50px !important; }

/***------ @PREVENT FLASH OF CONTENT ON LOAD ------***/
.ui-layout-west {
  display: none;
  visibility: hidden; }

.ui-layout-east {
  display: none;
  visibility: hidden; }

.ui-layout-north {
  position: fixed;
  display: block;
  width: 100%;
  z-index: 500; }

.modal {
  z-index: -10000; }

.modal-body {
  -webkit-overflow-scrolling: touch; }

.modal.fade.in {
  z-index: 10000; }

/***------ @RESPONSIVE STRUCTURE ------***/
.hidden {
  display: none;
  visibility: hidden; }

/***------ @LARGE DESKTOP ------***/
@media (min-width: 1200px) {
  .row .thumbnails {
    margin-left: -40px; }

  .row .dashWidget .thumbnails {
    margin-left: 0; } }
/***------ @TABLET ------***/
@media (max-width: 1024px) {
  .codeFooter {
    display: none; }

  a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none; }

  input[type="text"], input[type="email"], input[type="submit"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none; }

  #headerNav {
    display: inline-block;
    margin: 0;
    padding: 0; }

  .theme-btn {
    left: 56px; }

  .dashWidget .fc-header-right {
    display: none; }

  .ui-layout-center {
    position: absolute;
    display: block;
    top: 42px;
    right: 0;
    left: 0;
    bottom: 0;
    background: #eee; }

  .addTask form .newTask {
    width: 40%; }

  .addTask form #dueDate {
    width: 80px; }

  .thumbnails {
    padding: 0; } }
@media (max-device-width: 1024px) {
  .ui-layout-center {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; }

  #fullscreenb {
    display: none; } }
@media (max-width: 722px) {
  #search {
    display: none; } }
/***------ @IPAD PORTRAIT ------***/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .dashTop {
    padding: 20px 0 10px; }

  .dash-row {
    padding: 0 60px; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .tab-content {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; }

  .ui-layout-center {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; } }
/***------ @IPAD LANDSCAPE ------***/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .ui-layout-north {
    position: fixed; }

  .ui-layout-east {
    display: none;
    visibility: hidden; }

  #fullscreenb {
    display: none; }

  #dragb {
    display: none; }

  .dashTop {
    padding: 20px 0 10px; }

  .dash-row {
    padding: 0 15px; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .tab-content {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; }

  .ui-layout-center {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; } }
/***------ @TABLET PORTRAIT ------***/
@media (max-width: 778px) {
  body {
    padding: 0; }

  .container {
    width: auto;
    padding: 0 20px; }

  .row {
    width: 100%;
    margin-left: 0; }

  .invoice {
    padding: 20px 10px; }
    .invoice .company-name img {
      width: 220px;
      margin: 0 0 35px; }

  .invoice-header .text-right, .address-row .text-right {
    text-align: left; } }
/***------ @TABLET MENU POSITIONING ------***/
@media (max-width: 940px) {
  .navbar-toggle {
    display: inline-block;
    position: relative;
    top: 1px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 0 #ddd;
    box-shadow: 0 1px 0 #ddd; }

  .navbar-toggle:hover {
    background: #333; }

  .dropdown-toggle:active .navbar-toggle, .open .navbar-toggle {
    background: rgba(0, 0, 0, 0.2) !important; }

  .nav-collapse {
    overflow: hidden;
    height: 0; } }
/***------ @IPHONE AND SMARTPHONES ------***/

@media(max-width: 576px) and (min-width: 1024px) {
  
}
@media (max-width: 568px) {
  .ui-layout-north {
    position: fixed; }

  .ui-layout-west {
    display: none;
    visibility: hidden; }

  .ui-layout-east {
    display: none;
    visibility: hidden; }

  .ui-layout-center {
    position: absolute;
    display: block;
    top: 42px;
    right: 0;
    left: 0;
    bottom: 0;
    background: #eee; }

  .notifyHeader {
    left: -130px; }

  .theme-btn {
    left: -7px; }

  #headerNav {
    left: -8px;
    position: relative; }

  #lineChart {
    margin: 0 5px;
    width: auto;
    height: 190px; }

  #stackedChart {
    margin: 0 5px;
    width: auto;
    height: 200px; }

  #calendar {
    margin: 0 -25px; }

  .addComment textarea {
    width: 280px; }

  .el-rte {
    margin: 0 -25px; }

  .topbar h1 {
    left: 20px;
    position: relative; }

  .message-header {
    font-size: 20px;
    padding: 5px 10px; }

  .dashTop {
    padding: 20px 0 10px; }

  .dash-row {
    padding: 0 10px; }

  #search {
    display: none;
    visibility: hidden; }

  #fullscreenb {
    display: none; }

  .breadcrumb {
    display: none; }

  .login {
    display: none; }

  .nav-collapse {
    -webkit-transform: translate3d(0, 0, 0); }

  .page-header h1 small {
    display: block;
    line-height: 18px; }

  .thumbnails {
    padding: 0; }
    .thumbnails li {
      padding: 0 0 0 10px; }

  .modal-profile-style .profile-box img, .profile-box.profile-section img {
    width: 50px;
    height: 50px;
    margin: 0 15px 24px 0; }

  .modal-profile-style .follow-btn a, .profile-box.profile-section .follow-btn a {
    padding: 5px 20px; }

  .follow-btn {
    right: 15px; }

  /*MODAL ADJUSTMENT*/
  .modal {
    position: fixed !important;
    top: 3%;
    right: 3%;
    left: 3%;
    bottom: 3%;
    width: auto;
    margin: 0;
    z-index: -10000;
    display: none; }

  .modal.fade.in {
    top: auto;
    z-index: 10000; }

  .modal-header .close {
    padding: 10px;
    margin: -10px; } }
@media (max-device-width: 568px) {
  .mywid{
    width: 100% !important;
  }
  .tran_c{
    width: 100% !important;
  }
  .ui-layout-center {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; }

  .modal-body {
    height: 60%;
    -webkit-overflow-scrolling: touch; } }
@media (max-width: 530px) {
  .mywid{
    width: 100% !important;
  }
  .tran_c{
    width: 100% !important;
  }
  .login {
    display: none; }

  .addTask .btn-primary {
    margin: 4%;
    width: 90%;
    font-size: 12px; } }
@media (max-width: 480px) {
  .singleStat {
    width: 49%;
    margin-right: 0;
    height: 84px; }

  .statGraph {
    width: 100px;
    left: 0%; } }




#ContentPlaceHolder1_btn, #ContentPlaceHolder1_btnBooker{
  margin-top: 1px;
  height: 32px;
  margin-right: 0px;
  background-color: #7ab51d;
  color: white;
}
.btn{
  background: linear-gradient(to bottom, #7ab51d, #619413);
  border: 1px solid #7ab51d;
  box-shadow: 0 0 0 1px #507515, 0 1px 1px 1px #777;
  text-shadow: 0 -1px 0 #507515;
}
.btn:hover{
  background-color: #4b710e;
  background: linear-gradient(to bottom, #5e710e, #4b710e);
  border: 1px solid #7ab51d;
  box-shadow: 0 0 0 1px #507515, 0 1px 1px 1px #777;
  text-shadow: 0 -1px 0 #507515;
}
#travel_r, #booker_r, #trip_r, #fligh_r, #acc_r, #car_r, #tran_r, #for_r{
  margin-top: 25px;
  margin-bottom: 10px;
}
.dxeButtonEditSys{
  border-radius: 4px; 
  height: 34px;
  width: 100%;
}
.dxeButtonEditSys .dxeButtonEditButton{
  border: none; background:none;
}
.dxeButtonEditSys .dxic input{
  height: 28px;
}
.fig_r table{
  width: 100%;
}
td{
  padding-right: 10px;
}
#ContentPlaceHolder1_CreateTrip{
  margin-bottom: 30px;
}
@media(min-width: 992px){
  .container-fluid{
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}