/****************************  TABLE OF CONTENT   ***********************************************

1. General Setting


****************************  TABLE OF CONTENT   ***********************************************/
/* General Setting */
html * {
  outline: 0 !important;
}
body {
  background: none repeat scroll 0 0 #e6e9ee;
  margin: 0;
  overflow-x: hidden;
  padding: 0;
}
li {
  list-style: none;
}
a,
a:hover {
  color: #333;
  text-decoration: none;
}
.highcharts-container {
  border-radius: 6px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #333333;
  font-family: Roboto;
}
p {
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
  color: #777777;
  letter-spacing: 0.3px;
  float: left;
  width: 100%;
  line-height: 24px;
}
.radio label
 {
  padding-left: 1px;
  display: inline-flex;
      margin-right: 28px;
}

.checkbox .tests-checkbox {
  margin-left: 22px;
}
.heading-part {
font-size: 12px;
}
.checkbox label {
  padding-left: 1px;
  
  margin-right: 25px;
  font-size: 14px;
}

.newlabelc label {
  padding-left: 22px;
  
  margin-right: 25px;
  font-size: 14px;
}

.checkbox-list {

  margin: -3px 45px;
}
.edit-checkbox-list{
  margin: -3px 26px;
}
input[type="radio"], input[type="checkbox"] {
  margin: 2px 10px 13px 0px;
}
.full-width {
  float: none;
  margin: 0 -30px;
  width: auto;
}
a:hover {
  text-decoration: none;
}
.aa {
  padding: 6px;
}
a {
  text-decoration: none;
}
.top-margin {
  float: left;
  width: 100%;
  margin-top: -30px;
}
body .no-padding {
  padding: 0;
}
.full-width {
  float: none;
  margin: 0 -30px;
  width: auto;
}
.widget-area.blank {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

/* Account sec */
.account-sec {
  display: table;
  float: none;
  margin: 100px auto 0;
  text-align: center;
  width: 420px;
}
.account-sec h1 {
  color: #ffffff;
  float: left;
  font-family: Roboto;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin: 0 0 50px;
  text-align: center;
  width: 100%;
}
.account-form {
  float: left;
  width: 100%;
}
.lockscreen > p {
  float: left;
  margin-bottom: 30px;
  width: 100%;
}
.user-lock-avatar {
  float: left;
  margin-bottom: 30px;
  width: 100%;
}
.user-lock-avatar h3 {
  color: #464646;
  float: left;
  font-weight: 900;
  margin: 17px 0 14px;
  padding-bottom: 15px;
  position: relative;
  width: 100%;
}
.user-lock-avatar > i {
  color: #777777;
  float: left;
  font-family: lato;
  font-size: 14px;
  letter-spacing: 0.4px;
  line-height: 10px;
  margin-top: 0;
  width: 100%;
}
.lockscreen .account-form > input[type="submit"] {
  display: table;
  float: none;
  margin: 0 auto;
}
.lockscreen .account-form > fieldset {
  margin-bottom: 20px;
}
.lockscreen .account-feature {
  margin: 0;
}
.lockscreen:before {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.03);
  content: "";
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 50%;
  z-index: -1;
}
.user-lock-avatar h3:before {
  background: none repeat scroll 0 0 #9f9f9f;
  bottom: 0;
  content: "";
  height: 3px;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  width: 20px;
}
.user-lock-avatar > span {
  border: 1px solid #838383;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  display: table;
  float: none;
  margin: 0 auto;
  overflow: hidden;
  padding: 2px;
}
.user-lock-avatar > span > img {
  border: 1px solid #bfbfbf;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  width: 100%;
}
.account-option {
  float: left;
  list-style: outside none none;
  margin: 0 0 40px;
  padding: 0;
  position: relative;
  width: 100%;
}
.account-form > fieldset {
  background: none repeat scroll 0 0 #fff;
  float: left;
  height: 50px;
  margin-bottom: 10px;
  padding: 0 20px;
  width: 100%;
}
.account-form > fieldset > input {
  border: medium none !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;

  float: left;
  font-family: Roboto;
  font-size: 14px;
  height: 50px;
  letter-spacing: 0.3px;
  margin-left: 20px;
  padding: 14px 30px;
  width: 320px;
}
.account-form > label {
  color: #737373;
  float: left;
  font-family: Roboto;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.3px;
  line-height: 13px;
  margin: 20px 0 0;
}
.account-form > label > input {
  float: left;
  margin: 0 10px 0 0;
}
.account-form > fieldset > i {
  color: #555555;
  float: left;
  font-size: 17px;
  line-height: 50px;
}
.account-option > li {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
}
.account-option > li a > i {
  float: left;
  line-height: 10px;
}
.account-option > li a {
  color: #ffffff;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  font-weight: lighter;
  letter-spacing: 0.3px;
  line-height: 10px;
  padding: 15px 0;
  width: 100%;
}
.account-option > li a.facebook {
  background: none repeat scroll 0 0 #44619d;
  padding-left: 18px;
  padding-right: 40px;
}
.account-option > li a.twitter {
  background: #00acee;
  padding-right: 18px;
  padding-left: 40px;
}
.min-nav .menu ul li > ul.mega {
  padding-left: 3px;
  width: 208px;
  padding: 10px 0px;
  position: absolute;
  background-color: #000;
  top: 15px;
  left: 60px;
  z-index: 44;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.min-nav .menu ul li:hover > ul {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.min-nav .menu ul li ul li a {
  padding: 5px 30px;
}

.account-option:before {
  background: none repeat scroll 0 0 #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  color: #333333;
  content: "OR";
  font-family: LATO;
  font-size: 13px;
  height: 40px;
  left: 50%;
  line-height: 40px;
  margin-left: -20px;
  position: absolute;
  top: 0;
  width: 40px;
  z-index: 9;
}
.account-form > input[type="submit"] {
  border: medium none;
  color: #ffffff;
  float: right;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  margin-top: 10px;
  padding: 10px 45px;
  text-transform: uppercase;
}
.account-feature {
  float: left;
  list-style: outside none none;
  margin: 20px 0 0;
  padding: 0;
  width: 100%;
}
.account-feature a {
  color: #737373;
  float: left;
  font-family: Lato;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin: 10px 0;
  text-transform: uppercase;
  width: 100%;
}
.account-form p {
  float: left;
  margin: 0;
  width: 100%;
}
.account-form p > label {
  float: left;
  font-family: Roboto;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin-left: 10px;
  margin-right: 30px;
  text-transform: uppercase;
}

/* Select Box Styling */
.your-age {
  float: left;
  margin: 15px 0;
  width: 100%;
}
.custom-dropdown {
  float: left;
  margin-right: 10px;
  width: auto;
}
.menu {
  float: left;
  position: relative;
  width: 100%;
  z-index: 2;
}
.parent-menu {
  background: none repeat scroll 0 0 #06142c;
  float: left;
  list-style: outside none none;
  margin: 0;
  width: 100%;
  padding: 18px 0;
}
.parent-menu > li {
  float: left;
  margin-bottom: 5px;
  padding: 0 18px;
  position: relative;
  width: 100%;
  line-height: 22px;
}
.menu ul li a {
  color: #8b91a0;
  display: block;
  font-family: Roboto;
  font-size: 13px;
  padding: 5px 15px;
  position: relative;
  text-decoration: none;
  z-index: 0;
  text-transform: uppercase;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.menu ul li ul li a {
  padding: 2px 30px;
}

.menu ul li a > span i {
  color: #ffffff;
  float: right;
  font-size: 10px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.5px;
  line-height: 10px;
  padding: 5px;
}
.menu ul li a > i {
  float: left;
  font-size: 13px;
  margin-right: 15px;
  margin-top: 4px;
}

.menu ul li a:hover {
  background-color: transparent;
  cursor: pointer;
}
.menu ul li:hover > ul {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.menu ul li > ul.mega {
  padding-left: 23px;
  width: 208px;
}
.menu ul li > ul.mega > li {
  float: left;
  width: 100%;
}
.menu ul li > ul {
  left: 100%;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  z-index: 1;
}
.menu ul li > ul a {
  font-size: 13px;
  padding-left: 34px;
  text-transform: none;
}
.menu ul li > ul a:hover:before {
  border-color: #fff;
}
.menu ul li > ul a:before {
  background: url(../images/arrow.png);
  content: "";
  height: 10px;
  left: 15px;
  margin-top: -3px;
  position: absolute;
  top: 43%;
  width: 9px;
  background-size: 100% 100%;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
/*.menu ul li > ul li a:hover
{
	background-color:#2e2e2e;
}*/

/* Message Dropdown */
.smear-list {
  width: 58px;
}
.gene-list {
  width: 84px;
}
.culture-list {
  width: 71px;
}
.dst-list {
  width: 64px;
}
.new-dst-list {
  width: 58px;
}
.lpa-list {
  width: 63px;
}

#smear_count {
  left: 26px;
}

#xpert_count {
  left: 40px;
}

#culture_count {
  left: 30px;
}
#dst_count {
  left: 19px;
}
#new_dst_count {
  left: 19px;
}
#lpa_count {
  left: 18px;
}
.custom-dropdowns {
  float: left;
  left: 20px;
  position: relative;
  z-index: 333;
}
.custom-dropdowns .dropdown {
  margin-top: 18px;
  float: left;
}

.custom-dropdowns .dropdown > a {
  color: #7f7f7f;
  cursor: pointer;
  float: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  margin-right: 0;
  font-family: system-ui;
}
.custom-dropdowns .dropdown > a > span {
  border-radius: 20px;
  color: #ffffff;
  float: left;
  font-family: Roboto;
  font-size: 11px;
  line-height: 19px;

  padding: 1px 7px;
  position: absolute;
  text-align: center;
  top: -12px;
}
.custom-dropdown select {
  border: medium none;
  color: #888888;
  float: left;
  font-family: Roboto;
  padding-left: 6px;
  width: auto;
}
.account-form p input {
  float: left;
}
.drop-list {
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #e0e0e0;
  display: none;
  margin-top: 22px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 260px;
}
.notification.drop-list {
  float: none;
  margin-top: 22px;
  width: 260px;
}
.drop-list:before {
  background: none repeat scroll 0 0 #fff;
  border-left: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  content: "";
  height: 12px;
  right: 36px;
  position: absolute;
  top: -7px;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);

  width: 12px;
}
.drop-list > span {
  border-bottom: 1px solid #e0e0e0;
  color: #777777;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 13px;
  text-align: center;
  width: 100%;
}
.drop-list > ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.drop-list > ul > li {
  border-bottom: 1px solid #e0e0e0;
  float: left;
  min-height: 71px;
  padding: 15px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 100%;
}
.drop-list > ul > li:hover {
  background: none repeat scroll 0 0 #fafafa;
}
.drop-list > ul > li > a {
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 12px;
  letter-spacing: 0.3px;
  line-height: 17px;
  padding-left: 55px;
  position: relative;
  width: 100%;
}
.drop-list > ul > li > a > i {
  color: #222222;
  float: left;
  font-style: normal;
  font-weight: bold;
  margin-bottom: 3px;
  width: 100%;
}
.drop-list > ul > li > a span {
  float: left;
  height: 40px;
  left: 0;
  margin-right: 10px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 40px;
}
.drop-list > ul > li > a span > i {
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  float: left;
}
.drop-list > ul > li > a h6 {
  color: #777777;
  display: block;
  font-family: Open Sans;
  font-size: 11px;
  letter-spacing: 0.3px;
  margin: 2px 0 0;
  width: 100%;
}
.drop-list > ul > li > a .status {
  color: #fff;
  font-size: 10px;
  line-height: 12px;
  margin-top: -9px;
  padding: 3px 4px;
  position: absolute;
  right: -15px;
  text-transform: uppercase;
  top: -7px;
  width: auto;
}
.drop-list > a {
  color: #333;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 13px 0;
  text-align: center;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 100%;
}
.drop-list > ul > li .progress {
  background: none repeat scroll 0 0 #ededed;
  border: medium none;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  color: transparent;
  float: left;
  height: 8px;
  margin: 16px 0 0;
  width: 100%;
}
.drop-list > ul > li .progress .progress-bar {
  border: medium none;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  color: transparent;
}

/* Profile Dropdown */
.dropdown.profile {
  float: right;
  margin-top: 4px;
  padding: 8px;
  position: relative;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  z-index: 222;
}
.dropdown.profile:hover {
  background: none repeat scroll 0 0 #f7f7f7;
}
.dropdown.profile > a {
  border: medium none;
  float: left;
  margin: 0;
  padding: 0;
}
.dropdown.profile > a img {
  float: left;
  width: 38px;
  height: 38px;
  border-radius: 100%;
}
.dropdown.profile > a {
  border: medium none;
  color: #7f7f7f;
  float: left;
  font-family: Lato;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 36px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.dropdown.profile > a i {
  margin-left: 8px;
  margin-top: 0;
}
.dropdown-menu {
  border: 1px solid #e0e0e0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.profile.drop-list {
  margin-top: 10px;
  width: 200px;
  right: 40px;
}
.profile.drop-list > ul > li > a {
  padding: 0;
}
.profile.drop-list > ul > li {
  min-height: inherit;
}
.profile.drop-list > ul > li > a i {
  color: #777777;
  float: left;
  font-size: 14px;
  font-weight: normal;
  margin-right: 14px;
  text-align: center;
  width: 30px;
}
.profile.profile-head {
  float: right;
  margin: 5px -7px 0 0;
  padding: 8px;
  min-height: auto;
  position: relative;
  /* right:20px */
}
.profile.profile-head h3 {
  margin: 0;
  line-height: 19px;
  font-size: 14px;
  color: #7f7f7f;
  font-weight: 400;
}
.user-details {
  float: right;
  font-weight: 700;
  font-size: 16px;
  color: #514b4be6;
}
.mian {
  float: left;
  width: 100%;
}
header {
  background-color: #fff;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}
aside:hover {
  z-index: 8;
}

/* Logo */
.logo {
  float: left;
}
.logo > a {
  display: inline-block;
}
.toggle-menu {
  float: right;
  margin: 16px 8px;
  cursor: pointer;
  font-size: 17px;
  text-align: center;
  display: inline-block;
}
.toggle-menu {
  font-size: 28px;
}

/* Search */
.search {
  float: left;
  margin: 19px 0;
  padding-left: 30px;
}
.search > button {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: medium none;
  color: #979797;
  float: left;
  font-size: 11px;
  margin-top: 5px;
  padding: 0;
}
.search input[type="text"] {
  border: medium none;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  color: #373737;
  font-family: Roboto;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin: 0;
  padding: 0 0 0 20px;
}
.active {
  background-color: white;
  border-radius: 5px;
}
.active:hover {
  background-color: #06142c;
}
/* Horizontal Menu */
.horizontal-menu {
  float: left;
  text-align: center;
  width: 100%;
}
.horizontal-menu > ul {
  background: none repeat scroll 0 0 #fafafa;
  float: left;
  margin: 0;
  width: 100%;
}
.horizontal-menu > ul > li {
  display: inline-flex;
  position: relative;
}
.horizontal-menu > ul > li ul {
  left: 0;
  margin: 0;
  position: absolute;
  top: 100%;
}
.horizontal-menu > ul > li ul.mega {
  width: 400px;
}
.horizontal-menu > ul > li ul.mega li {
  width: 200px;
}
.horizontal-menu > ul > li > a > span > i {
  font-size: 11px;
  font-style: normal;
  line-height: 8px;
  padding: 5px;
  position: absolute;
  right: 0;
  top: 0;
}
.horizontal-menu > ul > li > a {
  color: #333333;
  float: left;
  font-family: Roboto;
  letter-spacing: 0.3px;
  padding: 20px;
}
.horizontal-menu > ul > li > a > i {
  float: left;
  line-height: 22px;
  margin-right: 9px;
}
.horizontal-menu > ul > li ul {
  background: none repeat scroll 0 0 #ffffff;
  left: 0;
  margin: 0;
  position: absolute;
  top: 100%;

  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);

  width: 200px;
}
.horizontal-menu > ul > li:hover ul {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.horizontal-menu > ul > li:hover {
  background: none repeat scroll 0 0 #ffffff;
}
.horizontal-menu > ul > li ul li {
  float: left;
  list-style: outside none none;
  width: 100%;
}
.horizontal-menu > ul > li ul li a {
  border-bottom: 1px solid #e8ecec;
  color: #666666;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  line-height: 10px;
  padding: 16px;
  width: 100%;
  text-align: left;
}

/* Nav Light */
.nav.light {
  background: none repeat scroll 0 0 #fff;
}
.nav.light .nav-profile {
  background: none repeat scroll 0 0 #fafafa;
  border-top: 1px solid #e8ecec;
}
.nav.light .nav-profile > span {
  border-color: #bababa;
}
.light .nav-profile > i {
  color: #777777;
}
.light .status {
  color: #777777;
}
.light .nav-profile h3 {
  color: #333;
}
.light .parent-menu {
  background: none repeat scroll 0 0 #ffffff;
}
.light .menu ul li a {
  color: #535353;
}
.light .menu ul li:hover a {
  color: #fff;
}
.light .nav-profile > ul a {
  background: none repeat scroll 0 0 #d4d4d4;
  color: #636363;
}

/* aside nav */
aside {
  bottom: 0;
  left: 0;
  padding: 0;
  position: absolute;
  top: 65px;
  width: 240px;
  overflow-y: scroll;
  z-index: 1;
  overflow-x: inherit;
}
aside::-webkit-scrollbar {
  width: 8px;
  border-radius: 20px;
}

aside::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

aside::-webkit-scrollbar-thumb {
  background-color: rgb(33 55 93);
  border-radius: 20px;
}
aside .nav {
  height: 100%;
  position: absolute;
  width: 100%;
  background: none repeat scroll 0 0 #06142c;
}

.nav-profile {
  background: none repeat scroll 0 0 #080a0e;
  float: left;
  padding: 34px 0 30px 101px;
  width: 100%;
}
.nav-profile > span {
  border: 3px solid #323843;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  height: 72px;
  left: 17px;
  overflow: hidden;
  position: absolute;
  top: 17px;
  width: 72px;
}
.nav-profile > i {
  color: #b2b9cb;
  float: left;
  font-family: Lato;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.3px;
  margin-top: 0;
  text-transform: uppercase;
  width: 100%;
  font-weight: bold;
}
.nav-profile h3 {
  color: #fff;
  display: inline;
  float: left;
  font-family: Lato;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3px;
  margin: 2px 0 0;
}
#container {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  position: absolute;
  right: 0;
  overflow-x: hidden;
  top: 100px;

  -webkit-transition: none 0s ease 0s;
  -moz-transition: none 0s ease 0s;
  -ms-transition: none 0s ease 0s;
  -o-transition: none 0s ease 0s;
  transition: none 0s ease 0s;

  width: 100%;
}
#container {
  left: 240px;
  top: 61px;
  width: auto;
}
.content-sec {
  float: left;
  padding: 24px;
  width: 100%;
}

/* minimize Sidebar */
.min-nav .nav-profile {
  display: none;
}
aside.min-nav {
  width: 60px;
  background: #06142c;
}
.min-nav .parent-menu > li span {
  display: none;
}
.min-nav .parent-menu > li {
  margin: 0;
  padding: 0;
}
.min-nav .parent-menu > li > a {
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 60px;
}

.min-nav .parent-menu > li > a i {
  font-size: 17px;
  line-height: 44px;
  margin: 0;
  text-align: center;
  margin-left: -5px;
  width: 100%;
}
#container.min-nav {
  left: 60px;
}

/* Breadcrumbs */
.breadcrumbs {
  background: none repeat scroll 0 0 #fafafa;
  float: left;
  margin-top: 1px;
  width: 100%;
}
.breadcrumbs > ul {
  float: left;
  list-style: outside none none;
  margin: 0;
  padding: 4px 0 0 30px;
  width: 100%;
}
.breadcrumbs > ul > li {
  color: #777;
  float: left;
  line-height: 21px;
  margin-right: 20px;
  padding: 6px 0;
}
.breadcrumbs > ul > li a {
  color: #777777;
  float: left;
  font-family: Roboto;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding-right: 20px;
}
.breadcrumbs > ul > li a i {
  float: left;
  font-size: 13px;
  line-height: 21px;
}

/* Title sec */
.title {
  float: left;
  margin-top: -2px;
  /* width: 40%; */
}
.title > h1 {
  color: #333333;
  float: left;
  font-family: Lato;
  font-size: 23px;
  font-weight: bold;
  letter-spacing: 0.3px;
  width: 100%;
  margin: -3px 0px 0px 0px;
}
.imp-buttons {
  float: right;
  text-align: right;
  width: 60%;
}
.dropdown.rounded {
  float: right;
}
.dropdown.rounded > button {
  background: none repeat scroll 0 0 #f5f5f5;
  border: 3px solid #ffffff;

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  color: #2f2f2f;
  font-family: Roboto;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.dropdown.rounded > button span {
  margin: 0 0 0 4px;
}
.dropdown.rounded > .dropdown-menu {
  border: medium none;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  left: auto;
  padding: 10px;
  right: 0;
}
.dropdown.rounded > .dropdown-menu a {
  border-bottom: 1px solid #e8ecec;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 9px 10px;
  width: 100%;
}
.dropdown.rounded > .dropdown-menu li:last-child a {
  border: medium none;
}
.dropdown.rounded > .dropdown-menu a:hover {
  background: none repeat scroll 0 0 #f4f4f4;
  border-color: #f4f4f4;
}
.dropdown.rounded.open > button {
  background: none repeat scroll 0 0 #ffffff;
  border-color: #e5e5e5;
}

/* top bar chart */
.top-bar-chart {
  float: right;
}
.bar-chart-details {
  float: right;
  margin-left: 10px;
}
.top-bar-chart {
  float: right;
  margin-left: 30px;
}
.bar-chart-details > p {
  color: #333333;
  font-family: Roboto;
  margin: 0;
}
.bar-chart-details h5 {
  color: #131313;
  font-family: Roboto;
  font-weight: bold;
  margin: 0;
}
.imp-buttons .dropdown.rounded {
  margin-left: 30px;
  margin-top: 4px;
}

.admin-content {
  float: left;
  width: 100%;
}
.stats-sec {
  float: left;
  width: 100%;
}
.no-gape .row {
  margin: 0 -1px;
}
.no-gape .row .col-md-12,
.no-gape .row .col-md-11,
.no-gape .row .col-md-10,
.no-gape .row .col-md-9,
.no-gape .row .col-md-8,
.no-gape .row .col-md-7,
.no-gape .row .col-md-6,
.no-gape .row .col-md-5,
.no-gape .row .col-md-4,
.no-gape .row .col-md-3,
.no-gape .row .col-md-2,
.no-gape .row .col-md-1 {
  padding: 0 1px;
}

/* Earning Stats */
.stats-sec .stats {
  height: 124px;
}
.earning-stats {
  background: none repeat scroll 0 0 #fff;
  float: left;
  padding: 25px 20px 25px 78px;
  position: relative;
  width: 100%;
}
.earning-stats > i {
  font-size: 16px;
  height: 38px;
  left: 20px;
  line-height: 38px;
  margin-top: -19px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 38px;
}
.earning-stats > span {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 11px;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin-bottom: 8px;
  text-transform: uppercase;
  width: 100%;
}
.earning-stats > h3 {
  color: #444444;
  float: left;
  font-family: Roboto;
  font-size: 20px;
  font-weight: bold;
  line-height: 15px;
  margin: 0;
  letter-spacing: 0.3px;
  width: 100%;
}
.earning-stats > .progress {
  background: none repeat scroll 0 0 #dde4ef;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  float: left;
  height: 4px;
  margin-bottom: 12px;
  margin-top: 15px;
  width: 100%;
}
.earning-stats > .progress .progress-bar {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.earning-stats > p {
  color: #777777;
  font-family: Roboto;
  font-size: 11px;
  line-height: 9px;
  margin: 0;
}

/* Order Stats */
.order-stats {
  float: left;
  position: relative;
  width: 100%;
}
.order-stats > h3 {
  float: left;
  font-family: Roboto;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 17px 20px 5px;
  width: 100%;
  color: #fff;
}
.order-stats > span {
  color: #ffffff;
  float: left;
  font-family: Lato;
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 0 20px;
  width: 100%;
}
.up-or-down {
  background: none repeat scroll 0 0 #f6f6f6;
  color: #666;
  font-family: Lato;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin: 8px;
  padding: 3px 10px;
  position: absolute;
  right: 0;
  top: 0;
}
.order-stats > .sparkline {
  float: left;
  margin-top: 20px;
  overflow: hidden;
  padding: 0;
  text-align: center;
  width: 100%;
}

/* Visitor Stats */
.visitor-stats {
  background: none repeat scroll 0 0 #363b46;
  float: left;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.visitor-stats span {
  color: #f5f5f5;
  float: left;
  font-family: Lato;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 10px;
  padding: 25px 20px 9px;
  width: 100%;
}
.visitor-stats h3 {
  color: #fff;
  float: left;
  font-family: Roboto;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 15px;
  margin: 0;
  padding: 0 20px;
  width: 100%;
}
.visitor-stats > .sparkline {
  margin-top: -6px;
  padding: 0;
}
#ticker {
  float: left;
  height: 60px !important;
  width: 100%;
}
#ticker li {
  list-style: none;
}

/* Live Visitor Stats */
.live-visitor {
  background: none repeat scroll 0 0 #fff;
  float: left;
  padding: 25px;
  position: relative;
  width: 100%;
}
.live-visitor > ul {
  list-style: outside none none;
  margin: 0;
  position: absolute;
  right: 0;
  top: 10px;
}
.live-visitor > ul > li {
  color: #585858;
  float: left;
  font-family: Lato;
  font-size: 10px;
  letter-spacing: 0.3px;
  line-height: 7px;
  margin-right: 10px;
  text-transform: uppercase;
}
.live-visitor > ul > li > i {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  height: 7px;
  margin-right: 5px;
  width: 7px;
}
.live-visitor > ul > li.new > i {
  background: none repeat scroll 0 0 #e8e8e8;
}
.live-visitor > h3 {
  color: #444444;
  float: left;
  font-family: Roboto;
  font-size: 32px;
  font-weight: 900;
  line-height: 25px;
  margin: 0;
  width: 100%;
}
.live-visitor > span {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 11px;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin-top: 12px;
  width: 100%;
}
.live-visitor > .progress {
  background: none repeat scroll 0 0 #efefef;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  float: left;
  height: 8px;
  margin: 17px 0 0;
  width: 100%;
}
.live-visitor > .progress .progress-bar {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

/* Widget */
.widget,
.widget2 {
  float: left;
  margin-top: 15px;
  padding: 16px 17px 22px 17px;
  width: 100%;
}
.widget.white,
.widget2.white {
  background: none repeat scroll 0 0 #fff;
  border-radius: 6px;
}
.widget.white.patient-tracking {
  
  height: 94px;
}
.today-ttl-patients {
  background-image: linear-gradient(to left, #0db2de 0%, #005bea 100%) !important;

}

.month-ttl-patients{
  background-image: linear-gradient(to left, #48d6a8 0%, #029666 100%) !important;

}

.processing-tests{
  background-image: linear-gradient(to left, #efa65f, #f76a2d) !important;
}
.today-ttl-tests{
  background-image: linear-gradient(to left, #b860f7 0%, #9000ea 100%) !important;

}
.month-ttl-tests{
  background-image: linear-gradient(to left, #6d70e5 0%, #5c21eb 100%) !important;
}
.pending-tests{
  background-image: linear-gradient(
    45deg, #f93a5a, #f7778c) !important;
    
}
.static-list-1 li {
  border-left: 1px solid #ccc;
  text-align: center;
  padding: 0px;
  padding-left: 0px !important;

}
.static-list-1 {
margin-left: 0px !important;
  padding-left: 0px !important;
  border-radius: 6px;
  background-color: white;
  padding-top: 12px;
    padding-bottom: 7px;
    text-align: center;
}
.static-list-1 li p {
  margin: 0px;
  font-size: 16px;
  color: #363636;
  font-weight: 500;
}
.static-list-1 li p strong {
  font-size: 21px;
  color: #115f5e;
  font-weight: 700;
}
.test-stats{

  border-radius: 6px;
  margin-top: 5px;
  margin-bottom: -4px;

}
.test-number
{
  font-size: 19px;
  color: #e05b49;
  font-weight: 600;
}.stats-sec .widget {
  margin: 0;
}

/* Visitor Chart */
.visitor-chart {
  float: left;
  position: relative;
  width: 100%;
}
.visitor-chart > span {
  background: none repeat scroll 0 0 #fff;
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 11px;
  left: 0;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 0;
  width: auto;
  z-index: 9;
}
.visitor-chart > h3 {
  background: none repeat scroll 0 0 #fff;
  color: #444444;
  float: left;
  font-family: Roboto;
  font-size: 28px;
  font-weight: bold;
  left: 0;
  line-height: 25px;
  margin: 0;
  position: absolute;
  top: 20px;
  width: auto;
  z-index: 9;
}
.visitor-chart > ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
}
.visitor-chart > #flot-sp1ine {
  float: left;
  width: 100%;
}
.visitor-chart > ul > li {
  background: none repeat scroll 0 0 #ffffff;
  font-family: Roboto;
  font-size: 11px;
  letter-spacing: 0.3px;
  margin-bottom: 0;
  padding-left: 20px;
  position: relative;
}
.visitor-chart > ul > li:before {
  content: "";
  height: 8px;
  left: 0;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  width: 8px;
}
.visitor-chart > ul > li.all:before {
  background: #8878ff;
}
.visitor-chart > ul > li.mob:before {
  background: #6f7685;
}

/* Earning Widget */
.earning-widget {
  float: left;
  padding: 25px 30px 0;
  width: 100%;
}
.earning-graph {
  float: left;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.earning-graph > h3 {
  float: left;
  font-family: Roboto;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 18px;
  margin: 0;
  position: relative;
  width: 100%;
  z-index: 9;
}
.earning-graph > span {
  background: none repeat scroll 0 0 #f8f8f8;
  border: 3px solid #eae9e9;

  -webkit-border-radius: 26px;
  -moz-border-radius: 26px;
  -ms-border-radius: 26px;
  -o-border-radius: 26px;
  border-radius: 26px;

  color: #6c6c6c;
  font-family: Lato;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 5px 16px;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
  z-index: 9;
}
.earning-graph #flot-1ine {
  float: left;
  margin-top: 20px;
  width: 100%;
}
.earning-graph > h3 > i {
  color: #777777;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  margin-top: 5px;
  width: 100%;
}
.earning-status {
  background: none repeat scroll 0 0 #efefef;
  float: left;
  margin-top: 20px;
  padding: 30px 0;
  width: 100%;
}
.earning-status > ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.earning-status > ul > li {
  float: left;
  position: relative;
  width: 33.3333%;
}
.earning-status > ul > li:before {
  background: none repeat scroll 0 0 #e1e1e1;
  content: "";
  height: 24px;
  margin-top: -12px;
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
}
.earning-status > ul > li:last-child:before {
  display: none;
}
.earning-status span {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-align: center;
  width: 100%;
}
.earning-status h4 {
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 21px;
  margin: 3px 0 -4px;
  text-align: center;
  width: 100%;
}

/* profile Views Widget */
.profile-views-widget {
  float: left;
  width: 100%;
}
.profile-thumb {
  float: left;
  min-height: 60px;
  padding-left: 80px;
  position: relative;
  width: 100%;
}
.profile-thumb > span {
  height: 60px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 60px;
}
.profile-thumb > h3 {
  float: left;
  font-family: Roboto;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 15px;
  margin: 10px 0 0;
  width: 100%;
  color: #fff;
}
.profile-thumb > i {
  color: #ffffff;
  float: left;
  font-family: Lato;
  font-size: 11px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin-top: 5px;
  width: 100%;
}
.profile-views-progress {
  float: left;
  margin-top: 20px;
  width: 100%;
}
.profile-views-progress > h5 {
  color: #ffffff;
  float: left;
  font-family: Lato;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin: 0;
  text-transform: uppercase;
  width: 100%;
}
.profile-views-progress > ul {
  list-style: outside none none;
  margin: 18px -7px 0;
  width: 100%;
}
.profile-views-progress > ul > li {
  float: left;
  margin-top: 18px;
  padding: 0 7px;
  width: 33.333%;
}
.profile-views-progress > ul > li .progress {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  float: left;
  height: 8px;
  width: 100%;
}
.profile-views-progress > ul > li .progress > .progress-bar {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  position: relative;
}
.profile-views-progress > ul > li .progress > .progress-bar:before {
  background: none repeat scroll 0 0 #000;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.25;
  position: absolute;
  top: 0;
  width: 100%;
}
.profile-views-progress > ul > li i {
  float: left;
  font-family: Lato;
  font-size: 11px;
  font-style: normal;
  font-weight: bold;
  line-height: 10px;
  width: 100%;
}
.profile-views-progress > ul > li h4 {
  float: left;
  font-family: Roboto;
  font-size: 20px;
  font-weight: bold;
  margin: 8px 0 0;
  width: 100%;
  color: #fff;
}

/* database Migration */
.database-migration {
  float: left;
  position: relative;
  width: 100%;
}
.database-migration > h3 {
  color: #444444;
  float: left;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0;
  width: 100%;
}
.database-migration > .progress {
  margin-top: 34px !important;
}
.progress.w-tooltip .progress-bar > i {
  color: #777;
  float: left;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  line-height: 10px;
  margin-top: -19px;
}
.progress.w-tooltip {
  background: none repeat scroll 0 0 #efefef;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  float: left;
  height: 8px;
  margin: 0;
  overflow: visible;
  width: 100%;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
.progress.w-tooltip > .progress-bar {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  position: relative;
}
.progress.w-tooltip > .progress-bar span {
  background: none repeat scroll 0 0 #efefef;

  bottom: 100%;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 500;
  height: 20px;
  right: -10px;
  letter-spacing: 0.3px;
  line-height: 18px;
  margin-bottom: 7px;
  margin-top: -9px;
  padding: 0 9px;
  position: absolute;
  width: auto;
  color: #777777;
}
.progress.w-tooltip > .progress-bar span i {
  font-style: normal;
  margin-right: 10px;
}
.progress.w-tooltip > .progress-bar span:before {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #efefef;
  bottom: -4px;
  content: "";
  margin-left: -6px;
  position: absolute;
  right: 10px;
}

/* Quick Stats */
.quick-stats {
  float: left;
  text-align: center;
  width: 100%;
}
.quick-stats > .sparkline {
  float: left;
  width: 100%;
}
.quick-stats > h4 {
  color: #444444;
  float: left;
  font-family: Roboto;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 10px 0 0;
  width: 100%;
}
.quick-stats > p {
  line-height: 10px;
  margin: 10px 0 0;
}

/* Widget Title */
.widget-title {
  color: white;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: -7px;
}
.widget-content {
  float: left;
  width: 100%;
  margin-top: 8px;
}
.monthly-patient-content{
	 float: left;
  width: 100%;
 
}
.card-widget-content,.card-widget-content-1,.card-widget-content-4{
	 float: left;
  width: 100%;
}
.panel-function {
  float: right;
}
.panel-function > a {
  color: #333333;
  cursor: pointer;
  float: left;
  font-size: 15px;
  margin-left: 16px;
}

/* Scroll */
.track3 {
  width: 10px;
  background: rgba(0, 0, 0, 0);
  margin-right: 0;
  -webkit-transition: background 250ms linear;
  -moz-transition: background 250ms linear;
  -ms-transition: background 250ms linear;
  -o-transition: background 250ms linear;
  transition: background 250ms linear;

  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  -ms-border-radius: 1px;
  -o-border-radius: 1px;
  border-radius: 1px;
}
.track3:hover,
.track3.dragging {
  background: #d9d9d9; /* Browsers without rgba support */
  background: rgba(0, 0, 0, 0.15);
}
.handle3 {
  width: 7px;
  right: 0;
  background: #999;
  background: rgba(0, 0, 0, 0.4);
  -webkit-transition: width 250ms;
  -moz-transition: width 250ms;
  -ms-transition: width 250ms;
  -o-transition: width 250ms;
  transition: width 250ms;

  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  -ms-border-radius: 1px;
  -o-border-radius: 1px;
  border-radius: 1px;
}
.track3:hover .handle3,
.track3.dragging .handle3 {
  width: 10px;
}

#ticket-scroll {
  overflow: auto;
  height: 361px !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Support Ticket */
.support-ticket {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}
.support-ticket > li {
  border-bottom: 1px solid #e8ecec;
  float: left;
  padding: 20px 0;
  width: 100%;
}
.support-ticket > li:first-child {
  padding-top: 0;
}
.support-ticket > li:last-child {
  border: medium none;
  padding-bottom: 0;
}
.tckt-status {
  float: left;
  width: 25%;
}
.tckt-number {
  float: left;
  width: 25%;
}
.ticket-info {
  float: left;
  width: 50%;
}
.tckt-status > span {
  color: #fff;
  float: left;
  font-family: Lato;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
}
.tckt-status > i {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.3px;
  line-height: 11px;
  width: 100%;
}
.tckt-number > span {
  color: #555555;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  line-height: 25px;
  width: 100%;
}
.ticket-info > a {
  color: #555555;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.ticket-info > h6 {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 11px;
  letter-spacing: 0.3px;
  margin: 5px 0 0;
  width: 100%;
}

/* Widget Tabs */
.widget-tabs {
  float: left;
  width: 100%;
}
.widget-tabs > .nav {
  background: none repeat scroll 0 0 #efefef;
  border: medium none;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}
.widget-tabs > .nav > li > a {
  border: medium none !important;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  color: #555555;
  cursor: pointer;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin: 0;
  padding: 20px 30px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.widget-tabs > .nav > li {
  float: left;
  margin: 0;
}
.widget-tabs > .nav > li > a:hover {
  background: none repeat scroll 0 0 #e9e9e9;
}
.widget-tabs > .nav > li.active > a:hover {
  background: none repeat scroll 0 0 #fff;
}
.tab-content {
  float: left;
  padding: 30px 25px;
  width: 100%;
}

/* User Comments */
.user-comments {
  float: left;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.user-comments > li {
  border-bottom: 1px solid #e8ecec;
  float: left;
  padding: 20px 0 20px 77px;
  position: relative;
  width: 100%;
}
.user-comments > li .user-avatar {
  height: 53px;
  left: 0;
  position: absolute;
  top: 20px;
  width: 53px;
}
.user-comments > li h3 {
  color: #3f3f3f;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  margin: 0;
  width: 100%;
}
.user-comments > li h3 i {
  color: #777777;
  font-family: Roboto;
  font-size: 11px;
  font-weight: normal;
}
.user-comments > li h3 a {
  color: #ff5050;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
}
.user-comments > li:first-child > .user-avatar {
  top: 0;
}
.user-comments p {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 13px;
  line-height: 15px;
  margin: 7px 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.user-comments > li > i {
  color: #777777;
  float: left;
  font-family: Roboto;
  font-size: 10px;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin-top: 7px;
  width: 100%;
}
.user-comments > li .user-avatar span {
  float: left;
  height: 53px;
  overflow: hidden;
  width: 53px;
}
.user-comments > li .user-avatar span img {
  float: left;
}
.edit-remove {
  height: 32px;
  margin: -16px 0 0;
  padding: 0;
  position: absolute;
  right: -8px;
  top: 50%;
  width: 16px;
}
.edit-remove > li {
  float: left;
  height: 16px;
  list-style: outside none none;
  width: 100%;
}
.edit-remove > li > a {
  float: left;
  font-size: 10px;
  height: 16px;
  line-height: 18px;
  text-align: center;
  width: 16px;
}
.user-comments > li:first-child {
  padding-top: 0;
}
.user-comments > li:last-child {
  border: medium none;
  padding-bottom: 0;
}
#comment-scroll {
  overflow: auto;
  height: 341px !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Forum Thread */
.forum-threads {
  float: left;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#forum-scroll {
  overflow: auto;
  height: 341px !important;
  padding: 0 !important;
  width: 100% !important;
}
.forum-threads > li {
  border-bottom: 1px solid #e8ecec;
  float: left;
  padding: 20px 0 20px 77px;
  position: relative;
  width: 100%;
}
.forum-threads > li > a {
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.forum-threads > li > i {
  color: #777777;
  float: left;
  font-family: Roboto;
  font-size: 10px;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin-top: 7px;
  width: 100%;
}
.user-avatar {
  left: 0;
  position: absolute;
  top: 20px;
}
.forum-threads > li:first-child {
  padding-top: 0;
}
.forum-threads > li:last-child {
  padding-bottom: 0;
  border: none;
}
.forum-threads > li:first-child > .user-avatar {
  top: 0;
}
.forum-threads > li h3 {
  color: #3f3f3f;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  margin: 0;
  width: 100%;
}
.forum-threads > li h3 i {
  color: #777777;
  font-family: Roboto;
  font-size: 11px;
  font-weight: normal;
}
.forum-threads > li h3 a {
  color: #ff5050;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
}

/* My Profile Widget */
.my-profile-widget {
  float: left;
  width: 100%;
  text-align: center;
}
.profile-widget-head {
  float: left;
  padding: 30px 0 55px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 0;
  margin-bottom: 50px;
}
.profile-widget-head:before {
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.profile-widget-head > h3 {
  color: #fff;
  float: left;
  font-family: Lato;
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin: 0;
  text-align: center;
  width: 100%;
}
.profile-widget-head > i {
  color: #ffffff;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.3px;
  margin-top: 6px;
  text-align: center;
  width: 100%;
}
.profile-widget-head > span > img {
  float: left;
  width: 70px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.profile-widget-head > span {
  border: 3px solid #fff;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  bottom: 0;
  left: 50%;
  margin-bottom: -35px;
  margin-left: -40px;
  overflow: hidden;
  position: absolute;
}
.my-profile-widget > h4 {
  float: left;
  font-family: Lato;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin: 0 0 15px;
  text-align: center;
  width: 100%;
}
.my-profile-widget > span {
  -webkit-border-radius: 21px;
  -moz-border-radius: 21px;
  -ms-border-radius: 21px;
  -o-border-radius: 21px;
  border-radius: 21px;

  color: #fff;
  display: inline-block;
  float: none;
  font-family: Lato;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 7px 16px;
}
.my-profile-widget > p {
  margin-top: 15px;
  padding: 0 22px;
  text-align: center;
}
.my-profile-widget > a {
  color: #a5a5a5;
  float: left;
  font-family: lato;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin-bottom: 25px;
  margin-top: 8px;
  text-align: center;
  width: 100%;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.my-profile-widget > .social-btns {
  float: left;
  margin: 0 auto 40px;
  text-align: center;
  width: 100%;
}
.my-profile-widget > .social-btns li {
  display: inline-block;
  float: none;
}
.my-profile-widget > span > i {
  margin-right: 7px;
}

/* Work Progress table */

.panel.work-progress-table {
  border: medium none;
  border-radius: 0;
  box-shadow: none;
  float: left;
  /* height: 560px; */
  margin: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  width: 100%;
  border-radius: 6px;
}
.panel.work-progress-table1 {
  border: none;
  border-radius: 0;
  box-shadow: none;
  float: left;
  /* height: 560px; */
  margin: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  width: 100%;
}
.content-sec u {
  /* color: #777!important;
    text-decoration: inherit; 
	display: block;
	*/
  font-family: Roboto;
  font-size: 13px;
  margin-top: 30px;
}
.panel.work-progress-table > .panel-heading {
  background: none repeat scroll 0 0 #efefef;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  color: #333333;
  float: left;
  font-family: roboto;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.3px;
  padding: 17px 30px 11px;
  width: 100%;
}
.panel.work-progress-table > .panel-bottom {
  background: none repeat scroll 0 0 #efefef;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  color: #333333;
  float: left;
  font-family: roboto;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.3px;
  padding: 17px 30px 11px;
  width: 100%;
}
.work-progress-table > .panel-heading > i {
  color: #888888;
  float: left;
  font-family: Lato;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin-bottom: 10px;
  margin-top: 7px;
  width: 100%;
}
.panel-default > .panel-heading > .dropdown {
  float: right;
  margin-top: -42px;
}
.work-progress-table td .progress {
  background: none repeat scroll 0 0 #f3f3f3;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  height: 6px;
  margin: 7px 0 0;
  overflow: visible;
}
.work-progress-table td .progress > .progress-bar {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  position: relative;
}
.work-progress-table td .progress > .progress-bar > span {
  background: none repeat scroll 0 0 #8d8d8d;

  font-family: Roboto;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
  margin-top: -9px;
  position: absolute;
  right: 0;
  top: 50%;
  width: 31px;
}
.work-progress-table .table td {
  /* padding: 15px 10px; */
}
.work-progress-table .table tbody td {
  /* font-family: Lato;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 15px 10px; */
  font-size: 13px;
}
.table > thead > tr > th{
  vertical-align: unset !important;
}
.work-progress-table.work-content .table td {
  padding: 2px 10px;
}

/* Social Btns */
.social-btns {
  float: right;
  list-style: outside none none;
  margin: -35px 0 0;
  padding: 0;
}
.social-btns > li {
  float: right;
  list-style: outside none none;
  margin-left: 6px;
}
.social-btns > li > a {
  float: left;
}
.social-btns > li > a > i {
  color: #fff;
  float: left;
  font-size: 16px;
  height: 31px;
  line-height: 31px;
  text-align: center;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  width: 31px;
}
.social-btns > li > a > i.ti-facebook {
  background: none repeat scroll 0 0 #3b5998;
}
.social-btns > li > a > i.ti-google {
  background: none repeat scroll 0 0 #dd4b39;
}
.social-btns > li > a > i.ti-twitter {
  background: none repeat scroll 0 0 #439ed6;
}

/* SLide Panel */
.slide-panel-btn {
  cursor: pointer;
  float: right;
  font-size: 17px;
  height: 36px;
  line-height: 36px;
  margin-left: 15px;
  margin-right: 10px;
  margin-top: 11px;
  text-align: center;
  width: 36px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.slide-panel-btn.active {
  background: none repeat scroll 0 0 #a7a7a7;
}
.slide-panel {
  background: none repeat scroll 0 0 #1d2127;
  height: 100%;
  position: fixed;
  left: -240px;
  top: 0;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 240px;
  z-index: 14;
}
.slide-panel.active {
  left: 0;
}
.slide-panel .panel-tab-btn {
  border: medium none;
  float: left;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.slide-panel .panel-tab-btn > li {
  float: left;
  margin: 0;
  padding: 0;
  width: 50%;
}
.slide-panel .panel-tab-btn > li > a {
  background: none repeat scroll 0 0 #14171b !important;
  border: medium none !important;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  color: #ffffff !important;
  float: left;
  font-size: 16px;
  margin: 0;
  padding: 20px 0 !important;
  position: relative;
  text-align: center;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  width: 100%;
}
#panel-scroll {
  overflow: auto;
  height: 100% !important;
  padding: 0 !important;
  width: 240px !important;
}
.slide-panel .panel-tab-btn > li.active > a > i {
  float: left;
  padding-bottom: 7px;
  width: 100%;
}
.slide-panel .panel-tab-btn > li > a > span {
  bottom: 0;
  font-family: lato;
  font-size: 12px;
  left: 0;
  letter-spacing: 0.3px;
  opacity: 0;
  position: absolute;
  text-align: center;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 100%;
}
.slide-panel .panel-tab-btn > li.active > a > span {
  bottom: 7px;
  opacity: 1;
}
.slide-panel .panel-tab-btn > li.active > a {
  background: none repeat scroll 0 0 #1d2127 !important;
  padding-bottom: 22px !important;
  padding-top: 18px !important;
}
.slide-panel .panel-tab {
  float: left;
  padding: 0;
  width: 100%;
}
.tab-content > .tab-pane {
  float: left;
  width: 100%;
}

/* Recent Mail Widget */
.recent-mails-widget {
  float: left;
  width: 100%;
}
.recent-mails-widget > form {
  border-bottom: 1px solid #2b2e33;
  float: left;
  padding: 20px;
  width: 100%;
  margin: 0;
}
.recent-mails-widget .filterform {
  background: none repeat scroll 0 0 #43464a;
  float: left;
  margin: 0;
  padding: 11px 36px 11px 15px;
  position: relative;
  width: 100%;
}
.recent-mails-widget .filterform input {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: medium none;
  color: #cfcfcf;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  margin: 0;
  padding: 0;
  width: 100%;
}

.recent-mails-widget .filterform:before {
  color: #626262;
  content: "";
  font-family: fontawesome;
  position: absolute;
  right: 10px;
  top: 10px;
}
.recent-mails-widget > h3 {
  color: #e5e5e5;
  float: left;
  font-family: Lato;
  font-size: 13px;
  letter-spacing: 0.3px;
  margin: 0;
  padding: 20px;
  text-transform: uppercase;
  width: 100%;
}
.mail-list {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0 20px;
  width: 100%;
  margin-bottom: 15px;
}
.mail-list > li {
  border-bottom: 1px solid #2b2e33;
  float: left;
  padding: 20px 0;
  position: relative;
  width: 100%;
}
.mail-list > li:first-child {
  padding-top: 0;
}
.mail-list > li > .title {
  float: left;
  padding-left: 55px;
  position: relative;
  width: 100%;
}
.mail-list > li > .title > span {
  border: 1px solid #a1a4af;
  float: left;
  left: 0;
  padding: 2px;
  position: absolute;
  top: 0;
  width: 40px;
}
.mail-list > li > .title > span > img {
  float: left;
  width: 100%;
}
.mail-list > li > .title > h3 {
  color: #fff;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin: 8px 0 0;
  padding-right: 20px;
  width: 100%;
}
.mail-list > li > .title > h3 > a {
  color: #fff;
}
.mail-list > li > .title > h3 span {
  color: #9a9ea9;
  float: left;
  font-family: Lato;
  font-size: 11px;
  font-weight: normal;
  margin-top: 3px;
  width: 100%;
}
.mail-list > li > .title > a {
  color: #afafaf;
  font-size: 14px;
  position: absolute;
  right: 0;
  top: 9px;
}
.mail-list > li > h4 {
  color: #f4f4f4;
  float: left;
  font-family: Lato;
  font-size: 13px;
  font-weight: bold;
  margin: 13px 0 0;
  width: 100%;
}
.mail-list > li > p {
  color: #babec9;
  font-size: 12px;
  line-height: 19px;
  margin-top: 5px;
}
.mail-list > li > .title > span > i {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  bottom: 5px;
  height: 8px;
  position: absolute;
  right: 0;
  width: 8px;
}

.recent-mails-widget > a {
  display: table;
  float: none;
  font-family: Roboto;
  font-size: 12px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 26px;
  color: #fff;
  text-transform: uppercase;
}
.file-action-btn {
  position: absolute;
  right: 0;
  width: 50px;
}
.file-action-btn > a {
  float: right;
  font-size: 11px;
  height: 19px;
  line-height: 19px;
  margin-left: 5px;
  margin-top: -1px;
  text-align: center;
  width: 19px;
}

/* File Transfer Widget */
.file-transfer-widget {
  float: left;
  margin-bottom: 0;
  margin-top: 40px;
  width: 100%;
}
.file-transfer-widget > h3 {
  background: none repeat scroll 0 0 #404349;
  color: #e5e5e5;
  cursor: pointer;
  float: left;
  font-family: Lato;
  font-size: 14px;
  letter-spacing: 0.3px;
  margin: 0;
  padding: 15px 30px;
  text-transform: uppercase;
  width: 100%;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.file-transfer-widget > .active {
  background: none repeat scroll 0 0 #4c4c4c;
}
.file-transfer-widget > .active > i {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.file-transfer-widget > h3 > i {
  float: right;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.file-transfer-widget .toggle {
  float: left;
  padding: 20px;
  width: 100%;
}
.file-transfer-widget .toggle > ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.file-transfer-widget .toggle > ul > li h4 {
  color: #ececec;
  display: inline;
  float: none;
  font-size: 13px;
  font-weight: normal;
  margin: -1px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.file-transfer-widget .toggle > ul > li h4 > i {
  color: #9a9ea9;
  display: block;
  float: none;
  font-size: 11px;
  font-style: normal;
  margin-top: 3px;
  width: 100%;
}
.file-transfer-widget .toggle > ul > li {
  float: left;
  margin-bottom: 20px;
  padding-right: 60px;
  position: relative;
  width: 100%;
}
.file-transfer-widget .toggle > ul > li > i {
  color: #ececec;
  float: left;
  font-size: 14px;
  margin-bottom: 12px;
  margin-right: 12px;
  margin-top: 6px;
}
.file-transfer-widget .toggle > ul > li > .progress {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  float: left;
  height: 5px;
  margin-bottom: 0;
  margin-top: 11px;
  overflow: visible;
  width: 100%;

  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}
.file-transfer-widget .toggle > ul > li > .progress > .progress-bar {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  color: #333333;
  font-size: 11px;
  line-height: 7px;
  position: relative;
  z-index: 0;

  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}
.file-transfer-widget .toggle > ul > li > .progress > .progress-bar:before {
  background: none repeat scroll 0 0 #fff;

  content: "";
  height: 16px;
  left: 50%;
  margin-left: -16px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  width: 32px;
  z-index: -1;
}
.file-action-btn > a {
  color: #fff;
  float: right;
  font-size: 8px;
  height: 19px;
  line-height: 20px;
  margin-left: 5px;
  margin-top: -1px;
  text-align: center;
  width: 19px;

  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}

/* Setting Widget */
.setting-widget {
  float: left;
  padding: 20px;
  width: 100%;
}
.setting-widget form:last-child {
  margin: 0;
  padding-bottom: 0;
}
.setting-widget > form {
  float: left;
  padding-bottom: 40px;
  width: 100%;
}
.setting-widget > form > h3 {
  color: #858585;
  float: left;
  font-family: Lato;
  font-size: 11px;
  letter-spacing: 0.3px;
  margin: 0;
  text-transform: uppercase;
  width: 100%;
}

.toggle-setting {
  border-bottom: 1px dotted #333333;
  float: left;
  padding: 15px 0;
  width: 100%;
}
.toggle-setting > span {
  color: #fff;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.toggle-setting > .toggle-switch {
  float: right;
  margin: 0;
}

/* Fancy Input */
.toggle-switch {
  background: none repeat scroll 0 0 #404349;

  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 0.125em;
  width: 60px;
}
.toggle-switch input {
  position: absolute;
  visibility: hidden;
}
.toggle-switch span {
  position: relative;
  left: 0%;
  display: block;
  text-transform: uppercase;
  text-align: center;

  -webkit-transition: left 200ms ease-out;
  -moz-transition: left 200ms ease-out;
  -o-transition: left 200ms ease-out;
  transition: left 200ms ease-out;
}
.toggle-switch :checked + span {
  left: 50%;
}

/* Default unchecked state */
.toggle-switch span:before {
  color: #b3b3b3;
  content: attr(data-unchecked);
  display: block;
  font-family: Roboto;
  font-size: 10px;
  padding: 2px 0;
  width: 50%;
}

/* Checked state */
.toggle-switch :checked + span:before {
  content: attr(data-checked);
}

/* Carousal Widget */
.ticker-widget {
  float: left;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.carousal-widget {
  float: left;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
.carousal-widget > div > div > li {
  background-image: url("../images/resource/bg.jpg");
  background-size: cover;
  float: left;
  padding: 62px 30px !important;
  z-index: 0;
}
.carousal-widget > div > div > li > i {
  color: #cccccc;
  float: left;
  font-size: 34px;
  position: relative;
  width: 100%;
  z-index: 9;
}
.carousal-widget > div > div > li > h3 {
  color: #fff;
  float: left;
  font-family: Roboto;
  font-size: 19px;
  font-weight: lighter;
  letter-spacing: 0.3px;
  line-height: 30px;
  position: relative;
  width: 100%;
  z-index: 99;
}
.carousal-widget > div > div > li:before {
  background: none repeat scroll 0 0 #13171e;
  content: "";
  left: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  height: 100%;
}
.carousal-avatar {
  float: left;
  margin-top: 22px;
  padding-left: 75px;
  position: relative;
  width: 100%;
  z-index: 99;
}
.carousal-avatar > span {
  border: 3px solid #434a57;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  height: 55px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 55px;
}
.carousal-avatar > h3 {
  color: #ffffff;
  float: left;
  font-family: Lato;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3px;
  margin: 10px 0 0;
  text-transform: uppercase;
  width: 100%;
}
.carousal-avatar > i {
  color: #ff3c3c;
  float: left;
  font-family: Roboto;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.3px;
  margin-top: 1px;
  text-transform: uppercase;
  width: 100%;
}

/* Balance WIdgte */
/* Balance Widget */
.balance-widget {
  float: left;
  position: relative;
  width: 100%;
}
.example-space > .row > div {
  float: left;
  margin-bottom: 20px;
  text-align: center;
  width: 16%;
}
.balance-widget > span.sparkpie {
  left: 0;
  position: absolute;
  top: 0;
}
.balance-widget {
  float: left;
  padding-left: 55px;
  position: relative;
  width: 100%;
}
.balance-widget > h3 {
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 15px;
  letter-spacing: 0.3px;
  margin: 0 0 -3px;
  width: 100%;
}
.balance-widget > h2 {
  color: #555555;
  float: left;
  font-family: ROBOTO;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin: 0;
  width: 100%;
}
.balance-widget > h2 > i {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  margin-bottom: 5px;
  margin-top: 9px;
  width: 100%;
}
.balance-widget .progress {
  margin-top: 40px;
}

/* Slick Slider */ /*

@charset "UTF-8";
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-loading .slick-list { background: #fff url("./ajax-loader.gif") center center no-repeat; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

*/
/* Icons */ /*

@font-face { font-family: "slick"; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }
*/
/* Arrows */ /*

.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev { left: -25px; }
[dir="rtl"] .slick-prev { left: auto; right: -25px; }
.slick-prev:before { content: "←"; }
[dir="rtl"] .slick-prev:before { content: "→"; }

.slick-next { right: -25px; }
[dir="rtl"] .slick-next { left: -25px; right: auto; }
.slick-next:before { content: "→"; }
[dir="rtl"] .slick-next:before { content: "←"; }

*/
/* Dots */ /*

.slick-slider { margin-bottom: 30px; }

.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }

*/

/* Map sec */
.visit-table {
  float: left;
  width: 100%;
}
.visit-table > ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.visit-table > ul > li.table-head h2.location {
  border-right: 1px solid #e0e0e0;
}
.visit-table > ul > li {
  float: left;
  width: 100%;
}
.visit-table > ul > li.table-head {
  float: left;
  width: 100%;
  background: none repeat scroll 0 0 #fff;
}
.visit-table li .location {
  width: 70%;
}
.visit-table li .visit {
  width: 30%;
}
.visit-table > ul > li.table-head h2 {
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin: 0;
  padding: 10px 23px;
}
.visit-table > ul > li:nth-child(2n + 3) {
  background: none repeat scroll 0 0 #f5f5f5;
}
.visit-table > ul > li > span img {
  float: left;
  margin-right: 14px;
  margin-top: 5px;
}
.visit-table > ul > li > i {
  color: #333333;
  float: left;
  font-family: Lato;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  padding: 12px 0;
  text-align: center;
}
.visit-table > ul > li > span {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 12px 15px;
}

/* Task Graph */
.task-graph {
  float: left;
  width: 100%;
}
.task-graph-chart {
  float: left;
  min-height: 100px;
  padding-left: 125px;
  position: relative;
  width: 100%;
}
.task-graph-chart .sparkpie {
  left: 0;
  position: absolute;
  top: 0;
}
.task-graph-chart > i {
  border-bottom: 1px solid #e8ecec;
  color: #555555;
  float: left;
  font-family: Lato;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 13px;
  padding-bottom: 9px;
  text-transform: uppercase;
  width: 100%;
}
.task-graph-chart > h3 {
  float: left;
  font-family: Roboto;
  font-size: 23px;
  font-weight: bold;
  line-height: 19px;
  margin: 0;
  width: 100%;
}
.task-graph > ul {
  float: left;
  list-style: outside none none;
  margin: 21px 0 0;
  width: 100%;
}
.task-graph > ul > li {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.3px;
  text-align: center;
  width: 33.3334%;
}
.task-graph > ul > li span {
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  margin-top: 3px;
  width: 100%;
}

/* Social Activity */
.social-activities {
  float: left;
  width: 100%;
}
.social-activities > ul {
  float: left;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.social-activities > ul > li {
  float: left;
  margin-bottom: 25px;
  padding-left: 50px;
  position: relative;
  width: 50%;
}
.social-activities > ul > li > i {
  color: #fff;
  font-size: 14px;
  height: 35px;
  left: 0;
  line-height: 35px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 35px;
}
.social-activities h3 {
  color: #000000;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin: 0;
  width: 100%;
}
.social-activities span {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 9px;
  letter-spacing: 0.3px;
  line-height: 20px;
  width: 100%;
}
.social-activities a {
  background: none repeat scroll 0 0 #f5f5f5;
  border: 3px solid #eaeaea;

  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;

  box-shadow: none;
  color: #2f2f2f;
  display: table;
  float: none;
  font-family: Roboto;
  font-size: 12px;
  letter-spacing: 0.3px;
  margin: 0 auto;
  padding: 7px 24px;
}

/* Twitter Widget */
.twitter-widget {
  float: left;
  width: 100%;
}
.twitter-avatar {
  float: left;
  position: relative;
  width: 100%;
}
.twitter-avatar img {
  float: left;
  width: 100%;
}
.twitter-avatar > h3 {
  bottom: 40px;
  color: #000000;
  font-family: Roboto;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin: 0;
  padding-left: 20px;
  position: absolute;
}
.twitter-avatar > h3 i {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  display: inline-block;
  font-size: 11px;
  height: 22px;
  line-height: 22px;
  margin-left: 10px;
  text-align: center;
  width: 22px;
}
.twitter-avatar > span {
  bottom: 17px;
  color: #000000;
  font-family: Lato;
  font-size: 13px;
  left: 20px;
  letter-spacing: 0.3px;
  position: absolute;
}
.twitter-widget > ul {
  float: left;
  list-style: outside none none;
  margin: 20px 0;
  width: 100%;
}
.twitter-widget > ul > li {
  color: #777777;
  float: left;
  font-family: Lato;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.3px;
  text-align: center;
  width: 33.3334%;
}
.twitter-widget > ul > li span {
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  margin-top: 3px;
  width: 100%;
}

/* Server */
.server {
  float: left;
  padding: 0 30px;
  width: 100%;
}
.server > .btn-group {
  float: right;
  margin-bottom: 33px;
  margin-top: 0;
  padding: 0;
  width: auto;
}
.server label.btn {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  border-radius: 0 !important;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  font-family: Roboto;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 5px 10px;
}
.server-status {
  float: left;
  margin-bottom: -25px;
  width: 100%;
}
.server > span {
  color: #fff;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  margin-right: 20px;
  margin-top: 8px;
}
.server > span > i {
  float: left;
  height: 14px;
  margin-right: 10px;
  margin-top: 2px;
  width: 14px;
}
.server > span.server1 > i {
  background: #363b46;
}
.server > span.server2 > i {
  background: #fafafa;
}
.rickshaw_graph {
  float: left;
  overflow: hidden;
  width: 100%;
}

/* Mini Profile Widget */
.mini-profile-widget {
  float: left;
  width: 100%;
  background: #13171e;
  padding: 25px 30px;
}
.mini-profile-area {
  float: left;
  padding-left: 90px;
  position: relative;
  width: 100%;
}
.mini-profile-area > span {
  border: 3px solid #adadad;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}
.mini-profile-area > span > img {
  float: left;
  width: 65px;
}
.mini-profile-area > h3 {
  color: #fff;
  float: left;
  font-family: Roboto;
  font-size: 16px;
  letter-spacing: 0.3px;
  margin: 20px 0 0;
  width: 100%;
  font-weight: 600;
}
.mini-profile-area > i {
  float: left;
  font-family: Lato;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.3px;
  margin-top: 5px;
  width: 100%;
  color: #ff4141;
}
.mini-profile-widget > p {
  color: #ddd;
  margin-bottom: 0;
  margin-top: 30px;
}

/* Status Upload Widget */
.status-upload {
  background: none repeat scroll 0 0 #f5f5f5;
  float: left;
  width: 100%;
}
.status-upload form {
  float: left;
  margin: 0;
  width: 100%;
}
.status-upload form textarea {
  background: none repeat scroll 0 0 #fff;
  border: medium none !important;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;

  color: #000000;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  font-weight: normal;
  height: 139px;
  letter-spacing: 0.3px;
  padding: 20px;
  width: 100%;
}
.social-widget p {
  color: #333333;
  font-size: 20px;
  font-weight: 500;
}
.status-upload ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0 0 0 15px;
  width: auto;
}
.status-upload ul > li {
  float: left;
}
.status-upload ul > li > a {
  color: #777777;
  float: left;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  margin: 10px 0 10px 10px;
  text-align: center;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 30px;
  cursor: pointer;
}
.status-upload ul > li > a:hover {
  background: none repeat scroll 0 0 #606060;
  color: #fff;
}
.status-upload form button {
  border: medium none;

  color: #fff;
  float: right;
  font-family: Lato;
  font-size: 14px;
  letter-spacing: 0.3px;
  margin-right: 9px;
  margin-top: 9px;
  padding: 6px 15px;
}
.status-upload form button > i {
  margin-right: 7px;
}

/* Timeline */
.timeline-sec {
  float: left;
  width: 100%;
}
.timeline-sec > ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.timeline-content > .btn-group > label {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  border-radius: 0 !important;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  font-family: Roboto;
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 2px 8px;
}
.timeline-content p a {
  color: red;
}
.timeline-sec > ul:before {
  background: none repeat scroll 0 0 #fafafa;
  content: "";
  height: 100%;
  left: 22px;
  position: absolute;
  top: 0;
  width: 2px;
}
.timeline-sec > ul > li {
  float: left;
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}
.timeline {
  float: left;
  padding-left: 70px;
  position: relative;
  width: 100%;
}
.user-timeline {
  left: 0;
  position: absolute;
  top: 0;
  width: 70px;
}
.user-timeline > span {
  float: left;
  position: relative;
  width: 100%;
}
.user-timeline > span > img {
  border: 3px solid #f5f5f5;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  height: 45px;
  overflow: hidden;
  width: 45px;
}
.timeline-detail {
  background: none repeat scroll 0 0 #f5f5f5;
  float: left;
  position: relative;
  width: 100%;
}
.timeline-head {
  background: none repeat scroll 0 0 #fafafa;
  float: left;
  width: 100%;
}
.timeline-head > h3 {
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.3px;
  line-height: 22px;
  margin: 0;
  padding: 9px 0 9px 20px;
}
.timeline-head > h3 > span {
  color: #999999;
  font-size: 11px;
  letter-spacing: 0.3px;
  margin-left: 20px;
  margin-right: 12px;
}
.timeline-head > h3 > i {
  font-family: Lato;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.3px;
  padding: 2px 6px;
}
.social-share {
  float: right;
  padding: 8px;
  position: relative;
}
.social-share > a {
  background: none repeat scroll 0 0 #fff;
  color: #777777;
  cursor: pointer;
  float: right;
  height: 25px;
  line-height: 25px;
  text-align: center;
  width: 25px;
  position: relative;
}
.social-share > a:before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  bottom: -4px;
  content: "";
  left: 50%;
  margin-left: -5px;
  position: absolute;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.social-share > .social-btns {
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 100%;

  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);

  width: 25px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.social-share:hover > .social-btns {
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.social-share > .social-btns > li {
  float: left;
  margin: 0 0 2px;
  width: 100%;
}
.social-share > .social-btns > li > a > i {
  font-size: 13px;
  height: 25px;
  line-height: 25px;
  width: 25px;
}
.timeline-content {
  float: left;
  padding: 15px 20px;
  width: 100%;
}
.timeline-content > .btn-group {
  float: left;
  margin-top: 15px;
  width: 100%;
}

.timeline-detail:before {
  border-bottom: 8px solid transparent;
  border-right: 8px solid #fafafa;
  border-top: 8px solid transparent;
  content: "";
  left: -7px;
  position: absolute;
  top: 12px;
}
.post-reply {
  background: none repeat scroll 0 0 #ffffff;
  float: left;
  margin-top: 11px;
  position: relative;
  width: 100%;
}
.post-reply > textarea {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: medium none;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  color: #888888;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  height: 36px;
  letter-spacing: 0.3px;
  padding: 7px 45px 7px 19px;
  resize: vertical;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  width: 100%;
}
.post-reply > textarea:focus {
  height: 100px;
}
.post-reply > i {
  color: #999999;
  font-size: 14px;
  margin-top: -7px;
  position: absolute;
  right: 13px;
  top: 50%;
}
.timeline .progress.w-tooltip {
  margin-top: 35px;
}
.timeline-gallery {
  float: left;
  margin-top: 15px;
  width: 100%;
}
.timeline-gallery > ul {
  float: left;
  list-style: none outside none;
  margin: -10px 0 0;
  padding: 0;
  width: 100%;
}
.timeline-gallery > ul > li {
  float: left;
  margin-right: 10px;
  margin-top: 10px;
}
.timeline-gallery > ul > li > a {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.timeline-gallery > ul > li > a > img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  width: 100%;
}
.timeline-gallery > ul > li > a i {
  color: #fff;
  left: 0;
  margin-top: -5px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;

  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 100%;
  z-index: 9;
}
.timeline-gallery > ul > li > a:before {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  content: "";
  height: 90%;
  left: 5%;
  opacity: 0;
  position: absolute;
  top: 5%;

  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 90%;
}
.timeline-gallery > ul > li > a:hover:before {
  opacity: 1;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.timeline-gallery > ul > li > a:hover i {
  color: #333;
  opacity: 1;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/* Mail Area */
.mail-area {
  float: left;
  margin-top: 30px;
  width: 100%;
}
.inbox-nav {
  background: none repeat scroll 0 0 #fff;
  float: left;
  position: relative;
  width: 100%;
}
.user-mail {
  border-bottom: 1px dashed #e8ecec;
  float: left;
  padding: 40px 20px 20px;
  text-align: center;
  width: 100%;
}
.user-mail > span {
  border: 1px solid #676767;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  display: table;
  float: none;
  margin: 0 auto;
  padding: 2px;
}
.user-mail > span img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  overflow: hidden;
  width: 100%;
}
.user-mail > h3 {
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin: 12px 0 0;
  text-align: center;
  width: 100%;
}
.user-mail > i {
  float: left;
  font-family: Lato;
  font-style: normal;
  letter-spacing: 0.3px;
  margin-bottom: 17px;
  margin-top: 4px;
  text-align: center;
  width: 100%;
}
.user-mail > .social-btns {
  display: table;
  float: none;
  margin: 0 auto 37px;
  width: auto;
}
.compose-btn {
  border: 2px solid #555555;

  color: #555555;
  display: table;
  float: none;
  font-family: Roboto;
  font-size: 20px;
  letter-spacing: 0.3px;
  margin: 0 auto;
  padding: 10px 30px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.mail-menu {
  background: none repeat scroll 0 0 #fafafa;
  float: left;
  width: 100%;
}
.mail-menu > ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.mail-menu > ul > li {
  float: left;
  width: 100%;
}
.mail-menu > ul > li > a:hover {
  background: none repeat scroll 0 0 #5a5a5a;
  color: #fff;
  padding-left: 40px;
}
.mail-menu > ul > li > a {
  border-bottom: 1px solid #ededed;
  color: #333333;
  float: left;
  font-family: Roboto;
  font-weight: normal;
  letter-spacing: 0.3px;
  padding: 14px 30px;
  width: 100%;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.mail-menu > ul > li > a > span {
  float: right;
  font-size: 12px;
  line-height: 14px;
  padding: 3px 10px;
}
.mail-labels {
  float: left;
  padding: 20px 30px;
  width: 100%;
}
.mail-labels > h3 {
  float: left;
  font-family: Roboto;
  font-size: 16px;
  letter-spacing: 0.3px;
  margin: 0 0 13px;
  width: 100%;
}
.mail-labels > ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.mail-labels > ul > li {
  float: left;
  width: 100%;
}
.mail-labels > ul > li > a {
  color: #777777;
  float: left;
  font-family: Lato;
  font-weight: normal;
  letter-spacing: 0.3px;
  padding: 7px 0;
  width: 100%;
}
.mail-labels > ul > li > a > i {
  margin-right: 20px;
}
.all-mail {
  float: left;
  width: 100%;
}
.all-mail > h2 {
  color: #333333;
  float: left;
  font-family: Roboto;
  margin: 0 0 30px;
  width: 100%;
}
.mail-head {
  float: left;
  width: 100%;
}
.search-emails {
  float: left;
  width: 100%;
}
.search-emails input {
  border: 1px solid #dadada;

  float: left;
  font-family: Roboto;
  font-weight: lighter;
  height: 40px;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  padding: 0 30px;
  width: 100%;
}
.mail-head > form {
  background: none repeat scroll 0 0 #fafafa;
  float: left;
  width: 100%;
}
.mail-head form > label {
  background: none repeat scroll 0 0 #ffffff;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin: 8px 25px 8px 8px;
  padding: 6px 15px;
}
.mail-head form > label input[type="checkbox"] {
  float: left;
  margin-right: 8px;
  margin-top: 3px;
}
.btn-group,
.btn-group-vertical {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.mail-head > form > .btn-group {
  float: left;
  margin: 7px;
}
.mail-head > form > .btn-group > label {
  border: 1px solid #e8ecec;
  color: #757575;
  font-size: 14px;
}
.mail-head > form > .btn-group.mail-pagination {
  float: right;
  text-align: left;
}
.mail-head > form > .btn-group.mail-pagination span {
  float: left;
}
.mail-head > form > .btn-group.mail-pagination span {
  color: #666666;
  float: left;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 33px;
  margin-right: 20px;
}
.your-emails {
  background: none repeat scroll 0 0 #ffffff;
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.your-emails > li {
  border-left: 3px solid #dfdfdf;
  float: left;
  margin-bottom: 1px;
  padding: 0 20px;
  position: relative;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 100%;
}
.email > input {
  float: left;
  margin: 13px 10px 0 0 !important;
}
.star-email {
  cursor: pointer;
  float: left;
  height: 20px;
  line-height: 20px;
  margin-top: 9px;
  text-align: center;
  width: 20px;
}
.star-email.starred {
  color: #e0d341;
}
.email > h3 {
  float: left;
  font-family: lato;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  margin: 0;
  overflow: hidden;
  padding: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 130px;
}
.email.unread a {
  font-weight: 500;
  color: #333;
}
.email.unread {
  background: none repeat scroll 0 0 #fafafa;
}
.inbox-msg:hover {
  color: #333;
}
.inbox-msg {
  color: #777777;
  float: left;
  font-family: Roboto;
  font-size: 12px;
  letter-spacing: 0.3px;
  line-height: 21px;
  overflow: hidden;
  padding: 9px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 270px;
}
.inbox-msg > span {
  float: left;
  font-family: Roboto;
  font-size: 11px;
  line-height: 11px;
  margin-right: 10px;
  margin-top: 3px;
  padding: 3px 5px;
}
.email > span {
  color: #999999;
  float: right;
  font-family: Roboto;
  font-size: 11px;
  letter-spacing: 0.3px;
  line-height: 10px;
  padding: 14px 0;
}
.attachment {
  color: #939393;
  float: left;
  margin-left: 10px;
  padding: 10px 0;
  text-align: center;
  width: 40px;
}

.mail-modal {
  text-align: center;
  padding: 0!important;
  
}
.mail-modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.mail-modal .modal-dialog{
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: 638px;
  left: 83px;
}

.read-email .modal-dialog {
  margin: 120px auto;
}
.read-email-sec {
  background: none repeat scroll 0 0 #ffffff;
  float: left;
  width: 100%;
}
.read-email-head {
  background: none repeat scroll 0 0 #fafafa;
  float: left;
  padding: 10px 20px;
  width: 100%;
}
.read-email-head > h3 {
  float: left;
  font-size: 15px;
  line-height: 50px;
  margin: 0;
}
.read-email-head > h3 > span {
  border: 1px solid #666666;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  height: 50px;
  margin-right: 20px;
  overflow: hidden;
  padding: 2px;
  width: 50px;
}
.read-email-head > h3 > span img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  width: 100%;
}
.read-email-head > h3.mail-user {
  float: right;
}
.read-email-head > h3.mail-user span {
  float: right;
  margin: 0 0 0 20px;
}
.read-email-head > h3.mail-user a {
  color: #777777;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin-right: 20px;
}
.message-container {
  float: left;
  padding: 20px 30px;
  width: 100%;
}
.message-container > p {
  margin-bottom: 20px;
}
.quick-reply {
  background: none repeat scroll 0 0 #fafafa;
  border: 1px solid #e8ecec;
  float: left;
  padding: 10px;
  width: 100%;
}
.quick-reply .clear {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #e8ecec;
  float: left;
  padding: 20px;
  width: 100%;
}
.quick-reply > .c-btn {
  float: right;
  margin-top: 10px;
}

/* Compose Email */
.compose-email-sec {
  background: none repeat scroll 0 0 #ffffff;
  float: left;
  margin-top: 70px;
  padding-top: 30px;
  width: 100%;
}
.compose-email-sec > form {
  float: left;
  padding: 0 15px;
  width: 100%;
}
.compose-email-sec > form input {
  border: 1px solid #e8ecec;
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  padding: 9px 30px;
  width: 100%;
}
.your-emails {
  height: 636px !important;
  overflow: auto;
  padding: 0 !important;
  width: 100% !important;
}
.mail-head label {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  border-radius: 0 !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
}
.read-email {
  height: 100%;
  position: fixed;
  right: -500px;
  top: 0;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  width: 500px;
  z-index: 20;
}
.read-email:before {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
  content: "";
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;

  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);

  width: 100%;
  z-index: -1;
}

.read-email.reading:before {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.read-email.reading {
  right: 0;
}
.quick-reply textarea {
  border: medium none;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  float: left;
  font-family: Roboto;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
  color: #000;
}
.close-reading {
  background: none repeat scroll 0 0 #fafafa;
  color: #333;
  font-size: 10px;
  height: 30px;
  left: 0;
  line-height: 30px;
  position: absolute;
  text-align: center;
  top: 71px;
  width: 30px;
}
.compose-email form input {
  border: medium none;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;

  float: left;
  height: 40px;
  margin: 0 0 25px;
  padding: 0 20px;
  width: 100%;
}
.compose-email > form {
  margin: 0;
}
.send-mail {
  color: #fff;
  float: left;
  font-family: Lato;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 6px 15px;
  text-transform: uppercase;
}

/* Profile Sec */
.profile-sec {
  float: left;
  margin-top: 30px;
  width: 100%;
}
.profile-head {
  /* background-image: url("../images/resource/profile-bg.jpg"); */
  background-size: 100% 100%;
  min-height: 226px;
  overflow: hidden;
  padding: 40px;
  position: relative;
}
.profile-avatar {
  float: left;
  max-width: 460px;
  padding-left: 180px;
  position: relative;
}
.profile-avatar > span {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  left: 0;
  overflow: hidden;
  padding: 3px;
  position: absolute;
  top: 0;
}
.profile-avatar > span img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
}
.profile-name {
  float: left;
  padding-top: 16px;
  width: 100%;
}
.profile-name > h3 {
  color: #ffffff;
  float: left;
  font-family: Roboto;
  font-size: 23px;
  letter-spacing: 0.3px;
  margin: 0;
  width: 100%;
}
.profile-name > i {
  color: #d7d7d7;
  float: left;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.3px;
  margin-top: 6px;
  width: 100%;
}
.profile-name .social-btns {
  float: left;
  margin: 20px 0 0;
  width: 100%;
}
.profile-name .social-btns > li {
  float: left;
}
.profile-name .social-btns > li:first-child {
  margin: 0;
}
.profile-count {
  bottom: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 10px;
}
.profile-count > li {
  color: #ffffff;
  float: left;
  font-family: Roboto;
  font-size: 31px;
  font-weight: bold;
  letter-spacing: 0.3px;
  list-style: none outside none;
  text-align: center;
  width: auto;
}
.profile-count > li > i {
  color: #d4d4d4;
  float: left;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  width: 100%;
}
.profile-connect {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 20px;
  top: 20px;
}
.profile-connect > li {
  float: left;
  margin-left: 20px;
}
.profile-connect > li > a {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 11px 22px;
}

/* Friend list */
.friend-list {
  float: left;
  width: 100%;
}
.friend-list > ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.friend-list li {
  border-bottom: 1px dotted #e8ecec;
  float: left;
  padding: 20px 0;
  position: relative;
  width: 100%;
}
.friend-list li img {
  border: 1px solid #d8d8d8;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  margin-right: 20px;
  padding: 2px;
}
.friend-list li h3 {
  display: block;
  font-family: Roboto;
  font-size: 14px;
  letter-spacing: 0.3px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.friend-list li h3 i {
  float: left;
  font-family: Lato;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin-top: 4px;
  width: 100%;
  color: #999;
}
.friend-list li > span {
  bottom: 7px;
  font-family: Roboto;
  font-size: 11px;
  letter-spacing: 0.3px;
  position: absolute;
  right: 0;
}
.friend-list li > span:before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  content: "";
  height: 6px;
  left: -10px;
  position: absolute;
  top: 6px;
  width: 6px;
}

/* Birthday */
.birthday {
  float: left;
  width: 100%;
}
.birthday > h3 {
  float: left;
  font-family: Roboto;
  font-size: 14px;
  margin: 0;
  width: 100%;
  z-index: 0;
}
.birthday > h3 > i {
  font-size: 16px;
  margin-right: 12px;
  top: 6px;
  z-index: 0;
}
.birthday > h3 > span {
  color: #efefef;
  float: right;
  font-size: 12px;
  font-weight: lighter;
}

/* My Location */
.my-location {
  float: left;
  width: 100%;
}
.my-location iframe {
  float: left;
  width: 100%;
  border: none;
}
.my-location > h3 {
  float: left;
  font-family: Roboto;
  font-size: 14px;
  margin: 20px 0;
  padding: 0 20px;
  width: 100%;
}
.my-location > h3 > i {
  margin-right: 10px;
}
#frnd-list {
  height: 505px !important;
  overflow: auto;
  padding: 0 !important;
  width: 100% !important;
}

/* Rickshaw Css */ /*

.rickshaw_graph .detail{pointer-events:none;position:absolute;top:0;z-index:2;background:rgba(0,0,0,0.1);bottom:0;width:1px;transition:opacity 0.25s linear;-moz-transition:opacity 0.25s linear;-o-transition:opacity 0.25s linear;-webkit-transition:opacity 0.25s linear;}.rickshaw_graph .detail.inactive{opacity:0;}.rickshaw_graph .detail .item.active{opacity:1;}.rickshaw_graph .detail .x_label{font-family:Arial,sans-serif;border-radius:3px;padding:6px;opacity:0.5;border:1px solid #e0e0e0;font-size:12px;position:absolute;background:white;white-space:nowrap;}.rickshaw_graph .detail .item{position:absolute;z-index:2;border-radius:3px;padding:0.25em;font-size:12px;font-family:Arial,sans-serif;opacity:0;background:#fcc87c;color:white;margin-left:1em;margin-top:-1em;white-space:nowrap;}.rickshaw_graph .detail .item.active{opacity:1;background:#fcc87c;}.rickshaw_graph .detail .item:before{content:"\25c2";position:absolute;left:-0.5em;color:rgba(0,0,0,0.7);width:0;}.rickshaw_graph .detail .dot{width:6px;height:6px;margin-left:-4px;margin-top:-3px;border-radius:5px;position:absolute;background:#fac87d;border-width:3px;border-style:solid;border-color:#fff!important;display:none;background-clip:padding-box;}.rickshaw_graph .detail .dot.active{display:block;}.rickshaw_graph{position:relative;}.rickshaw_graph svg{display:block;overflow:hidden;}.rickshaw_graph .x_tick{position:absolute;top:0;bottom:0;width:0px;border-left:1px dotted rgba(0,0,0,0.2);pointer-events:none;}.rickshaw_graph .x_tick .title{position:absolute;font-size:12px;font-family:Arial,sans-serif;opacity:0.5;white-space:nowrap;margin-left:3px;bottom:1px;}.rickshaw_annotation_timeline{height:1px;border-top:1px solid #e0e0e0;margin-top:10px;position:relative;}.rickshaw_annotation_timeline .annotation{position:absolute;height:6px;width:6px;margin-left:-2px;top:-3px;border-radius:5px;background-color:rgba(0,0,0,0.25);}.rickshaw_graph .annotation_line{position:absolute;top:0;bottom:-6px;width:0px;border-left:2px solid rgba(0,0,0,0.3);display:none;}.rickshaw_graph .annotation_line.active{display:block;}.rickshaw_graph .annotation_range{background:rgba(0,0,0,0.1);display:none;position:absolute;top:0;bottom:-6px;}.rickshaw_graph .annotation_range.active{display:block;}.rickshaw_graph .annotation_range.active.offscreen{display:none;}.rickshaw_annotation_timeline .annotation .content{background:white;color:black;opacity:0.9;padding:5px 5px;box-shadow:0 0 2px rgba(0,0,0,0.8);border-radius:3px;position:relative;z-index:20;font-size:12px;padding:6px 8px 8px;top:18px;left:-11px;width:160px;display:none;cursor:pointer;}.rickshaw_annotation_timeline .annotation .content:before{content:"\25b2";position:absolute;top:-11px;color:white;text-shadow:0 -1px 1px rgba(0,0,0,0.8);}.rickshaw_annotation_timeline .annotation.active,.rickshaw_annotation_timeline .annotation:hover{background-color:rgba(0,0,0,0.8);cursor:none;}.rickshaw_annotation_timeline .annotation .content:hover{z-index:50;}.rickshaw_annotation_timeline .annotation.active .content{display:block;}.rickshaw_annotation_timeline .annotation:hover .content{display:block;z-index:50;}.rickshaw_graph .y_axis,.rickshaw_graph .x_axis_d3{fill:none;}.rickshaw_graph .y_ticks .tick,.rickshaw_graph .x_ticks_d3 .tick{stroke:rgba(0,0,0,0.16);stroke-width:2px;shape-rendering:crisp-edges;pointer-events:none;}.rickshaw_graph .y_grid .tick,.rickshaw_graph .x_grid_d3 .tick{z-index:-1;stroke:rgba(0,0,0,0.20);stroke-width:1px;stroke-dasharray:1 1;}.rickshaw_graph .y_grid path,.rickshaw_graph .x_grid_d3 path{fill:none;stroke:none;}.rickshaw_graph .y_ticks path,.rickshaw_graph .x_ticks_d3 path{fill:none;stroke:#808080;}.rickshaw_graph .y_ticks text,.rickshaw_graph .x_ticks_d3 text{opacity:0.5;font-size:12px;pointer-events:none;}.rickshaw_graph .x_tick.glow .title,.rickshaw_graph .y_ticks.glow text{fill:black;color:black;text-shadow:-1px 1px 0 rgba(255,255,255,0.1),1px -1px 0 rgba(255,255,255,0.1),1px 1px 0 rgba(255,255,255,0.1),0px 1px 0 rgba(255,255,255,0.1),0px -1px 0 rgba(255,255,255,0.1),1px 0px 0 rgba(255,255,255,0.1),-1px 0px 0 rgba(255,255,255,0.1),-1px -1px 0 rgba(255,255,255,0.1);}.rickshaw_graph .x_tick.inverse .title,.rickshaw_graph .y_ticks.inverse text{fill:white;color:white;text-shadow:-1px 1px 0 rgba(0,0,0,0.8),1px -1px 0 rgba(0,0,0,0.8),1px 1px 0 rgba(0,0,0,0.8),0px 1px 0 rgba(0,0,0,0.8),0px -1px 0 rgba(0,0,0,0.8),1px 0px 0 rgba(0,0,0,0.8),-1px 0px 0 rgba(0,0,0,0.8),-1px -1px 0 rgba(0,0,0,0.8);}.rickshaw_legend{font-family:Arial;font-size:12px;color:white;background:#404040;display:inline-block;padding:12px 5px;border-radius:2px;position:relative;}.rickshaw_legend:hover{z-index:10;}.rickshaw_legend .swatch{width:10px;height:10px;border:1px solid rgba(0,0,0,0.2);}.rickshaw_legend .line{clear:both;line-height:140%;padding-right:15px;}.rickshaw_legend .line .swatch{display:inline-block;margin-right:3px;border-radius:2px;}.rickshaw_legend .label{margin:0;white-space:nowrap;display:inline;font-size:inherit;background-color:transparent;color:inherit;font-weight:normal;line-height:normal;padding:0px;text-shadow:none;}.rickshaw_legend .action:hover{opacity:0.6;}.rickshaw_legend .action{margin-right:0.2em;font-size:10px;opacity:0.2;cursor:pointer;font-size:14px;}.rickshaw_legend .line.disabled{opacity:0.4;}.rickshaw_legend ul{list-style-type:none;margin:0;padding:0;margin:2px;cursor:pointer;}.rickshaw_legend li{padding:0 0 0 2px;min-width:80px;white-space:nowrap;}.rickshaw_legend li:hover{background:rgba(255,255,255,0.08);border-radius:3px;}.rickshaw_legend li:active{background:rgba(255,255,255,0.2);border-radius:3px;}#y_axis{position:absolute;top:0;left:0;bottom:0;width:40px;z-index:999;}#chart{position:relative;}#chart_container{position:relative;}
*/

/*!
 * Hover.css (http://ianlunn.co.uk/)
 * Version: 1.0.9
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */
/* Default styles for the demo buttons */
.button {
  margin: 0.4em;
  padding: 1em;
  cursor: pointer;
  background: #e1e1e1;
  text-decoration: none;
  color: #666666;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 2D TRANSITIONS */
/* Grow */
.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover,
.grow:focus,
.grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Shrink */
.shrink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shrink:hover,
.shrink:focus,
.shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

/* Pulse */ /*

@-webkit-keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.pulse {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse:hover, .pulse:focus, .pulse:active {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

*/
/* Pulse Grow */ /*

@-webkit-keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.pulse-grow {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active {
  -webkit-animation-name: pulse-grow;
  animation-name: pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

*/
/* Pulse Shrink */ /*

@-webkit-keyframes pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.pulse-shrink {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-shrink:hover, .pulse-shrink:focus, .pulse-shrink:active {
  -webkit-animation-name: pulse-shrink;
  animation-name: pulse-shrink;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

*/
/* Push */ /*

@-webkit-keyframes push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.push {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.push:hover, .push:focus, .push:active {
  -webkit-animation-name: push;
  animation-name: push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

*/
/* Pop */ /*

@-webkit-keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.pop {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pop:hover, .pop:focus, .pop:active {
  -webkit-animation-name: pop;
  animation-name: pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

*/
/* Rotate */ /*

.rotate {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.rotate:hover, .rotate:focus, .rotate:active {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}

*/
/* Grow Rotate */ /*

.grow-rotate {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}

*/
/* Float */ /*

.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float:hover, .float:focus, .float:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

*/
/* Sink */ /*

.sink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.sink:hover, .sink:focus, .sink:active {
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}

*/
/* Hover */ /*

@-webkit-keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

.hover {
  display: inline-block;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover:hover, .hover:focus, .hover:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

*/
/* Hang */ /*

@-webkit-keyframes hang {
  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@keyframes hang {
  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}

.hang {
  display: inline-block;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hang:hover, .hang:focus, .hang:active {
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-animation-name: hang;
  animation-name: hang;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

*/
/* Skew */ /*

.skew {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew:hover, .skew:focus, .skew:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
}

*/
/* Skew Forward */ /*

.skew-forward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-forward:hover, .skew-forward:focus, .skew-forward:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
}

*/
/* Skew Backward */ /*

.skew-backward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-backward:hover, .skew-backward:focus, .skew-backward:active {
  -webkit-transform: skew(10deg);
  transform: skew(10deg);
}

*/
/* Wobble Vertical */ /*

@-webkit-keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.wobble-vertical {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active {
  -webkit-animation-name: wobble-vertical;
  animation-name: wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

*/
/* Wobble Horizontal */ /*

@-webkit-keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.wobble-horizontal {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-horizontal:hover, .wobble-horizontal:focus, .wobble-horizontal:active {
  -webkit-animation-name: wobble-horizontal;
  animation-name: wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

*/
/* Wobble To Bottom Right */ /*

@-webkit-keyframes wobble-to-bottom-right {
  16.65% {
    -webkit-transform: translate(8px, 8px);
    transform: translate(8px, 8px);
  }

  33.3% {
    -webkit-transform: translate(-6px, -6px);
    transform: translate(-6px, -6px);
  }

  49.95% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }

  66.6% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }

  83.25% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes wobble-to-bottom-right {
  16.65% {
    -webkit-transform: translate(8px, 8px);
    transform: translate(8px, 8px);
  }

  33.3% {
    -webkit-transform: translate(-6px, -6px);
    transform: translate(-6px, -6px);
  }

  49.95% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }

  66.6% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }

  83.25% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.wobble-to-bottom-right {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-bottom-right:hover, .wobble-to-bottom-right:focus, .wobble-to-bottom-right:active {
  -webkit-animation-name: wobble-to-bottom-right;
  animation-name: wobble-to-bottom-right;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

*/
/* Wobble To Top Right */ /*

@-webkit-keyframes wobble-to-top-right {
  16.65% {
    -webkit-transform: translate(8px, -8px);
    transform: translate(8px, -8px);
  }

  33.3% {
    -webkit-transform: translate(-6px, 6px);
    transform: translate(-6px, 6px);
  }

  49.95% {
    -webkit-transform: translate(4px, -4px);
    transform: translate(4px, -4px);
  }

  66.6% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  83.25% {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes wobble-to-top-right {
  16.65% {
    -webkit-transform: translate(8px, -8px);
    transform: translate(8px, -8px);
  }

  33.3% {
    -webkit-transform: translate(-6px, 6px);
    transform: translate(-6px, 6px);
  }

  49.95% {
    -webkit-transform: translate(4px, -4px);
    transform: translate(4px, -4px);
  }

  66.6% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  83.25% {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.wobble-to-top-right {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-top-right:hover, .wobble-to-top-right:focus, .wobble-to-top-right:active {
  -webkit-animation-name: wobble-to-top-right;
  animation-name: wobble-to-top-right;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

*/
/* Wobble Top */ /*

@-webkit-keyframes wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

.wobble-top {
  display: inline-block;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-top:hover, .wobble-top:focus, .wobble-top:active {
  -webkit-animation-name: wobble-top;
  animation-name: wobble-top;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

*/
/* Wobble Bottom */ /*

@-webkit-keyframes wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

.wobble-bottom {
  display: inline-block;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-bottom:hover, .wobble-bottom:focus, .wobble-bottom:active {
  -webkit-animation-name: wobble-bottom;
  animation-name: wobble-bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

*/
/* Wobble Skew */ /*

@-webkit-keyframes wobble-skew {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes wobble-skew {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

.wobble-skew {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-skew:hover, .wobble-skew:focus, .wobble-skew:active {
  -webkit-animation-name: wobble-skew;
  animation-name: wobble-skew;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

*/
/* Buzz */ /*

@-webkit-keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

.buzz {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz:hover, .buzz:focus, .buzz:active {
  -webkit-animation-name: buzz;
  animation-name: buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

*/
/* Buzz Out */ /*

@-webkit-keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.buzz-out {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out:hover, .buzz-out:focus, .buzz-out:active {
  -webkit-animation-name: buzz-out;
  animation-name: buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
*/

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.border-fade:hover,
.border-fade:focus,
.border-fade:active {
  box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Hollow */
.hollow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background;
  transition-property: background;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hollow:hover,
.hollow:focus,
.hollow:active {
  background: none;
}

/* Trim */
.trim {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.trim:before {
  content: "";
  position: absolute;
  border: white solid 4px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.trim:hover:before,
.trim:focus:before,
.trim:active:before {
  opacity: 1;
}

/* Outline Outward */
.outline-outward {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-outward:before {
  content: "";
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-outward:hover:before,
.outline-outward:focus:before,
.outline-outward:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

/* Outline Inward */
.outline-inward {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-inward:before {
  pointer-events: none;
  content: "";
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-inward:hover:before,
.outline-inward:focus:before,
.outline-inward:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}

/* Round Corners */
.round-corners {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: border-radius;
  transition-property: border-radius;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.round-corners:hover,
.round-corners:focus,
.round-corners:active {
  border-radius: 1em;
}

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.glow:hover,
.glow:focus,
.glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Outset */
.box-shadow-outset {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.box-shadow-outset:hover,
.box-shadow-outset:focus,
.box-shadow-outset:active {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Inset */
.box-shadow-inset {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.box-shadow-inset:hover,
.box-shadow-inset:focus,
.box-shadow-inset:active {
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Float Shadow */
.float-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 80%
  );
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.float-shadow:hover,
.float-shadow:focus,
.float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.float-shadow:hover:before,
.float-shadow:focus:before,
.float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/* Hover Shadow */
@-webkit-keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@-webkit-keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: 0.4;
  }

  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: 0.4;
  }
}

@keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: 0.4;
  }

  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: 0.4;
  }
}

.hover-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 80%
  );
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hover-shadow:hover,
.hover-shadow:focus,
.hover-shadow:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
.hover-shadow:hover:before,
.hover-shadow:focus:before,
.hover-shadow:active:before {
  opacity: 0.4;
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-animation-name: hover-shadow;
  animation-name: hover-shadow;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Shadow Radial */
.shadow-radial {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shadow-radial:before,
.shadow-radial:after {
  pointer-events: none;
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.shadow-radial:before {
  bottom: 100%;
  background: radial-gradient(
    ellipse at 50% 150%,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 80%
  );
}
.shadow-radial:after {
  top: 100%;
  background: radial-gradient(
    ellipse at 50% -50%,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 80%
  );
}
.shadow-radial:hover:before,
.shadow-radial:focus:before,
.shadow-radial:active:before,
.shadow-radial:hover:after,
.shadow-radial:focus:after,
.shadow-radial:active:after {
  opacity: 1;
}

/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-top:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top;
  transition-property: top;
  left: calc(50% - 10px);
  top: 0;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #e1e1e1 transparent;
}
.bubble-top:hover:before,
.bubble-top:focus:before,
.bubble-top:active:before {
  top: -10px;
}

/* Bubble Right */
.bubble-right {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-right:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: right;
  transition-property: right;
  top: calc(50% - 10px);
  right: 0;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #e1e1e1;
}
.bubble-right:hover:before,
.bubble-right:focus:before,
.bubble-right:active:before {
  right: -10px;
}

/* Bubble Bottom */
.bubble-bottom {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-bottom:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: bottom;
  transition-property: bottom;
  left: calc(50% - 10px);
  bottom: 0;
  border-width: 10px 10px 0 10px;
  border-color: #e1e1e1 transparent transparent transparent;
}
.bubble-bottom:hover:before,
.bubble-bottom:focus:before,
.bubble-bottom:active:before {
  bottom: -10px;
}

/* Bubble Left */
.bubble-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-left:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: left;
  transition-property: left;
  top: calc(50% - 10px);
  left: 0;
  border-width: 10px 10px 10px 0;
  border-color: transparent #e1e1e1 transparent transparent;
}
.bubble-left:hover:before,
.bubble-left:focus:before,
.bubble-left:active:before {
  left: -10px;
}

/* Bubble Float Top */
.bubble-float-top {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-top:before {
  position: absolute;
  z-index: -1;
  content: "";
  left: calc(50% - 10px);
  top: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #e1e1e1 transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top;
  transition-property: top;
}
.bubble-float-top:hover,
.bubble-float-top:focus,
.bubble-float-top:active {
  -webkit-transform: translateY(5px) translateZ(0);
  transform: translateY(5px) translateZ(0);
}
.bubble-float-top:hover:before,
.bubble-float-top:focus:before,
.bubble-float-top:active:before {
  top: -10px;
}

/* Bubble Float Right */
.bubble-float-right {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-right:before {
  position: absolute;
  z-index: -1;
  top: calc(50% - 10px);
  right: 0;
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #e1e1e1;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: right;
  transition-property: right;
}
.bubble-float-right:hover,
.bubble-float-right:focus,
.bubble-float-right:active {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}
.bubble-float-right:hover:before,
.bubble-float-right:focus:before,
.bubble-float-right:active:before {
  right: -10px;
}

/* Bubble Float Bottom */
.bubble-float-bottom {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-bottom:before {
  position: absolute;
  z-index: -1;
  content: "";
  left: calc(50% - 10px);
  bottom: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #e1e1e1 transparent transparent transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: bottom;
  transition-property: bottom;
}
.bubble-float-bottom:hover,
.bubble-float-bottom:focus,
.bubble-float-bottom:active {
  -webkit-transform: translateY(-5px) translateZ(0);
  transform: translateY(-5px) translateZ(0);
}
.bubble-float-bottom:hover:before,
.bubble-float-bottom:focus:before,
.bubble-float-bottom:active:before {
  bottom: -10px;
}

/* Bubble Float Left */
.bubble-float-left {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-left:before {
  position: absolute;
  z-index: -1;
  content: "";
  top: calc(50% - 10px);
  left: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #e1e1e1 transparent transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: left;
  transition-property: left;
}
.bubble-float-left:hover,
.bubble-float-left:focus,
.bubble-float-left:active {
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}
.bubble-float-left:hover:before,
.bubble-float-left:focus:before,
.bubble-float-left:active:before {
  left: -10px;
}

/* CURLS */
/* Curl Top Left */
.curl-top-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(
    135deg,
    white 45%,
    #aaaaaa 50%,
    #cccccc 56%,
    white 80%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Top Right */
.curl-top-right {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-right:before {
  pointer-events: none;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  top: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(
    225deg,
    white 45%,
    #aaaaaa 50%,
    #cccccc 56%,
    white 80%
  );
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-right:hover:before,
.curl-top-right:focus:before,
.curl-top-right:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Right */
.curl-bottom-right {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-bottom-right:before {
  pointer-events: none;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  bottom: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(
    315deg,
    white 45%,
    #aaaaaa 50%,
    #cccccc 56%,
    white 80%
  );
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-bottom-right:hover:before,
.curl-bottom-right:focus:before,
.curl-bottom-right:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Left */
.curl-bottom-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-bottom-left:before {
  pointer-events: none;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  bottom: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(
    45deg,
    white 45%,
    #aaaaaa 50%,
    #cccccc 56%,
    white 80%
  );
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-bottom-left:hover:before,
.curl-bottom-left:focus:before,
.curl-bottom-left:active:before {
  width: 25px;
  height: 25px;
}

/* Button Example */
.btn-example {
  float: left;
  margin-top: -10px;
  width: 100%;
}
.btn-example > a {
  margin-right: 10px;
  margin-top: 10px;
}
.btn-example > p > a,
.btn-example > p > button {
  margin-top: 10px;
  margin-right: 10px;
}
.tag-button {
  background: none repeat scroll 0 0 #e1e1e1;

  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  padding: 6px 13px;
  position: relative;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  margin: 5px;
}
.tag-button:before {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 8px;
  left: -3px;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  width: 8px;
}
.tag-button:after {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 8px;
  right: -3px;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  width: 8px;
}

/* Dynamic Tags */
.dynamic-tags {
  float: left;
  width: 100%;
}
.dynamic-tags .tagsinput {
  float: left;
  height: auto !important;
  width: 100% !important;
}
.dynamic-tags .tagsinput .tag {
  float: left;
}
.dynamic-tags .tagsinput .tag {
  background: none repeat scroll 0 0 #e1e1e1;
  color: #333333;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  margin-right: 10px;
  margin-top: 10px;
  padding: 6px 13px;
  position: relative;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.dynamic-tags .tagsinput .tag:hover {
  color: #fff;
}
.dynamic-tags .tagsinput .tag:hover a {
  color: #fff;
}
.dynamic-tags .tagsinput .tag > a {
  color: #333333;
  font-family: Roboto;
  font-weight: bold;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.dynamic-tags .tagsinput input {
  border: 1px solid #e8ecec;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  margin-top: 10px;
  padding: 6px 19px;
  width: 100% !important;
}
.dynamic-tags .tagsinput .tag:before {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 8px;
  left: -3px;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  width: 8px;
}
.dynamic-tags .tagsinput .tag:after {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 8px;
  right: -3px;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  width: 8px;
}

/* Custom buttons */
.c-btn {
  color: #fff;
  cursor: pointer;
  float: left;
  font-family: Roboto;
  font-weight: normal;
  letter-spacing: 0.3px;
  line-height: 17px;
  transition: all 0.4s ease 0s;
  border: none;
  display: inline-block;
}
.c-btn:hover {
  opacity: 0.8;
  color: #fff;
}
a.large,
input[type="submit"].large,
button.large {
  font-size: 15px;
  padding: 13px 21px;
}
a.medium,
input[type="submit"].medium,
button.medium {
  padding: 10px 12px;
}
a.small,
input[type="submit"].small,
button.small {
  padding: 7px 18px;
}
a.mini,
input[type="submit"].mini,
button.mini {
  font-size: 11px;
  padding: 5px 13px;
}

/* Icon btn */
.icon-btn {
  background: none repeat scroll 0 0 #ffffff;
  color: #333333;
  float: left;
  font-family: Roboto;
  height: auto;
  letter-spacing: 0.3px;
  line-height: 32px;
  margin-right: 5px;
  overflow: hidden;
  padding: 0 24px 0 0;
  position: relative;
  transition: all 0.4s ease 0s;
  width: auto;
}
.icon-btn:hover {
  background: none repeat scroll 0 0 #f7f7f7;
}
.icon-btn > i {
  float: left;
  height: 34px;
  left: 0;
  line-height: 34px;
  margin-right: 15px;
  position: relative;
  text-align: center;
  top: 0;
  width: 34px;
}

/*!
 * FullCalendar v1.6.4 Stylesheet
 * Docs & License: http://arshaw.com/fullcalendar/
 * (c) 2013 Adam Shaw
 */

.fc {
  direction: ltr;
  float: left;
  margin: 10px 0 0;
  text-align: left;
  width: 100%;
}

.fc table {
  border-collapse: collapse;
  border-spacing: 0;
}

html .fc,
.fc table {
  font-size: 1em;
}

.fc td,
.fc th {
  padding: 0;
  vertical-align: top;
}

/* Header
------------------------------------------------------------------------*/

.fc-header td {
  white-space: nowrap;
}

.fc-header-left {
  float: left;
  margin-left: 10px;
  text-align: left;
  width: 25%;
}

.fc-header-center {
  float: left;
  text-align: center;
  width: 100%;
}

.fc-header-right {
  float: right;
  margin-right: 10px;
  margin-top: -79px;
  text-align: left;
}

.fc-header-title {
  display: inline-block;
  float: left;
  vertical-align: top;
  width: 100%;
}
.fc-header-title h2 {
  display: table;
  float: left;
  font-family: open sans;
  font-size: 28px;
  font-weight: 100;
  line-height: 23px;
  margin: 0 0 15px;
  white-space: nowrap;
  width: 100%;
}

.fc .fc-header-space {
  padding-left: 10px;
}

.fc-header .fc-button {
  margin-bottom: 1em;
  vertical-align: top;
}

/* buttons edges butting together */

.fc-header .fc-button {
  margin-right: -1px;
}

.fc-header .fc-corner-right,  /* non-theme */
.fc-header .ui-corner-right {
  /* theme */
  margin-right: 0; /* back to normal */
}

/* button layering (for border precedence) */

.fc-header .fc-state-hover,
.fc-header .ui-state-hover {
  z-index: 2;
}

.fc-header .fc-state-down {
  z-index: 3;
}

.fc-header .fc-state-active,
.fc-header .ui-state-active {
  z-index: 4;
}

/* Content
------------------------------------------------------------------------*/

.fc-content {
  clear: both;
  zoom: 1; /* for IE7, gives accurate coordinates for [un]freezeContentHeight */
}

.fc-view {
  width: 100%;
  overflow: hidden;
}

/* Cell Styles
------------------------------------------------------------------------*/

.fc-widget-header,
.fc-widget-content {
  border: 1px solid #dddddd;
  color: #303030;
  font-family: open sans;
  font-size: 15px;
  font-weight: 600;
}

.fc-state-highlight {
  /* <td> today cell */ /* TODO: add .fc-today to <th> */
  background: #fcf8e3;
}

.fc-cell-overlay {
  /* semi-transparent rectangle while dragging */
  background: #bce8f1;
  opacity: 0.3;
  filter: alpha(opacity=30); /* for IE */
}

/* Buttons
------------------------------------------------------------------------*/

.fc-button {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.fc-state-default {
  /* non-theme */
  border: 1px solid;
}

.fc-state-default.fc-corner-left {
  /* non-theme */
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.fc-state-default.fc-corner-right {
  /* non-theme */
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/*
	Our default prev/next buttons use HTML entities like &lsaquo; &rsaquo; &laquo; &raquo;
	and we'll try to make them look good cross-browser.
*/

.fc-text-arrow {
  margin: 0 0.1em;
  font-size: 2em;
  font-family: "Courier New", Courier, monospace;
  vertical-align: baseline; /* for IE7 */
}

.fc-button-prev .fc-text-arrow,
.fc-button-next .fc-text-arrow {
  /* for &lsaquo; &rsaquo; */
  font-weight: bold;
}

/* icon (for jquery ui) */

.fc-button .fc-icon-wrap {
  position: relative;
  float: left;
  top: 50%;
}

.fc-button .ui-icon {
  position: relative;
  float: left;
  margin-top: -50%;
  *margin-top: 0;
  *top: -50%;
}

/*
  button states
  borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
*/
.fc-state-default {
  background-color: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #333333;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25px;
  line-height: 22px;
  padding: 2px 11px;
  text-transform: uppercase;
}
.fc-state-down,
.fc-state-active,
.fc-state-disabled {
  background: none repeat scroll 0 0 #4d4e53;
  color: #ffffff;
  font-family: open sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 10px;
  padding: 9px 11px;
  text-shadow: none;
  text-transform: uppercase;
}

.fc-state-down,
.fc-state-active {
  background-color: #cccccc;
  border: 1px solid #cccccc;
  color: #ffffff;
  font-family: open sans;
  font-size: 12px;
  font-weight: 700;
  line-height: 8px;

  -webkit-box-shadow: 0 0 3px #b8b8b8 inset;
  -moz-box-shadow: 0 0 3px #b8b8b8 inset;
  -ms-box-shadow: 0 0 3px #b8b8b8 inset;
  -o-box-shadow: 0 0 3px #b8b8b8 inset;
  box-shadow: 0 0 3px #b8b8b8 inset;
}

.fc-state-disabled {
  cursor: default;
  background-image: none;
  box-shadow: none;
}

/* Global Event Styles
------------------------------------------------------------------------*/

.fc-event-container > * {
  z-index: 8;
}

.fc-event-container > .ui-draggable-dragging,
.fc-event-container > .ui-resizable-resizing {
  z-index: 9;
}

.fc-event {
  background-color: #4d4e53;
  color: #ffffff;
  cursor: default;
  font-size: 0.85em;
  padding: 0 10px;
  text-align: center;
}

a.fc-event {
  text-decoration: none;
}

a.fc-event,
.fc-event-draggable {
  cursor: pointer;
}

.fc-rtl .fc-event {
  text-align: right;
}

.fc-event-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.fc-event-time,
.fc-event-title {
  font-family: Roboto;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.4px;
  padding: 0 1px;
}
.fc .ui-resizable-handle {
  display: block;
  position: absolute;
  z-index: 99999;
  overflow: hidden; /* hacky spaces (IE6/7) */
  font-size: 300%; /* */
  line-height: 50%; /* */
}

/* Horizontal Events
------------------------------------------------------------------------*/
.fc-event-hori {
  border-radius: 0 !important;
  border-width: 1px 0;
  margin-bottom: 1px;
}

.fc-ltr .fc-event-hori.fc-event-start,
.fc-rtl .fc-event-hori.fc-event-end {
  border-left-width: 1px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.fc-ltr .fc-event-hori.fc-event-end,
.fc-rtl .fc-event-hori.fc-event-start {
  border-right-width: 1px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* resizable */

.fc-event-hori .ui-resizable-e {
  top: 0 !important; /* importants override pre jquery ui 1.7 styles */
  right: -3px !important;
  width: 7px !important;
  height: 100% !important;
  cursor: e-resize;
}

.fc-event-hori .ui-resizable-w {
  top: 0 !important;
  left: -3px !important;
  width: 7px !important;
  height: 100% !important;
  cursor: w-resize;
}

.fc-event-hori .ui-resizable-handle {
  _padding-bottom: 14px; /* IE6 had 0 height */
}

/* Reusable Separate-border Table
------------------------------------------------------------*/

table.fc-border-separate {
  border-collapse: separate;
}

.fc-border-separate th,
.fc-border-separate td {
  border-width: 1px 0 0 1px;
}

.fc-border-separate th.fc-last,
.fc-border-separate td.fc-last {
  border-right-width: 1px;
}

.fc-border-separate tr.fc-last th,
.fc-border-separate tr.fc-last td {
  border-bottom-width: 1px;
}

.fc-border-separate tbody tr.fc-first td,
.fc-border-separate tbody tr.fc-first th {
  border-top-width: 0;
}

/* Month View, Basic Week View, Basic Day View
------------------------------------------------------------------------*/

.fc-grid th {
  text-align: center;
}

.fc .fc-week-number {
  width: 22px;
  text-align: center;
}

.fc .fc-week-number div {
  padding: 0 2px;
}

.fc-grid .fc-day-number {
  float: right;
  padding: 0 2px;
}

.fc-grid .fc-other-month .fc-day-number {
  opacity: 0.3;
  filter: alpha(opacity=30); /* for IE */
  /* opacity with small font can sometimes look too faded
	   might want to set the 'color' property instead
	   making day-numbers bold also fixes the problem */
}

.fc-grid .fc-day-content {
  clear: both;
  padding: 2px 2px 1px; /* distance between events and day edges */
}

/* event styles */

.fc-grid .fc-event-time {
  font-weight: bold;
}

/* right-to-left */

.fc-rtl .fc-grid .fc-day-number {
  float: left;
}

.fc-rtl .fc-grid .fc-event-time {
  float: right;
}

/* Agenda Week View, Agenda Day View
------------------------------------------------------------------------*/

.fc-agenda table {
  border-collapse: separate;
}

.fc-agenda-days th {
  font-family: open sans;
  font-weight: 600;
  text-align: center;
}
.fc-agenda .fc-agenda-axis {
  font-family: open sans;
  font-size: 13px;
  font-weight: normal;
  padding: 0 4px;
  text-align: right;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  width: 50px;
}

.fc-agenda .fc-week-number {
  font-weight: bold;
}

.fc-agenda .fc-day-content {
  padding: 2px 2px 1px;
}

/* make axis border take precedence */

.fc-agenda-days .fc-agenda-axis {
  border-right-width: 1px;
}

.fc-agenda-days .fc-col0 {
  border-left-width: 0;
}

/* all-day area */

.fc-agenda-allday th {
  border-width: 0 1px;
}

.fc-agenda-allday .fc-day-content {
  min-height: 34px; /* TODO: doesnt work well in quirksmode */
  _height: 34px;
}

/* divider (between all-day and slots) */

.fc-agenda-divider-inner {
  height: 2px;
  overflow: hidden;
}

.fc-widget-header .fc-agenda-divider-inner {
  background: #eee;
}

/* slot rows */

.fc-agenda-slots th {
  border-width: 1px 1px 0;
}

.fc-agenda-slots td {
  border-width: 1px 0 0;
  background: none;
}

.fc-agenda-slots td div {
  height: 20px;
}

.fc-agenda-slots tr.fc-slot0 th,
.fc-agenda-slots tr.fc-slot0 td {
  border-top-width: 0;
}

.fc-agenda-slots tr.fc-minor th,
.fc-agenda-slots tr.fc-minor td {
  border-top-style: dotted;
}

.fc-agenda-slots tr.fc-minor th.ui-widget-header {
  *border-top-style: solid; /* doesn't work with background in IE6/7 */
}

/* Vertical Events
------------------------------------------------------------------------*/

.fc-event-vert {
  border-width: 0 1px;
}

.fc-event-vert.fc-event-start {
  border-top-width: 1px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.fc-event-vert.fc-event-end {
  border-bottom-width: 1px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.fc-event-vert .fc-event-time {
  white-space: nowrap;
  font-size: 10px;
}

.fc-event-vert .fc-event-inner {
  position: relative;
  z-index: 2;
}

.fc-event-vert .fc-event-bg {
  /* makes the event lighter w/ a semi-transparent overlay  */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.25;
  filter: alpha(opacity=25);
}

.fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */
.fc-select-helper .fc-event-bg {
  display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
}

/* resizable */

.fc-event-vert .ui-resizable-s {
  bottom: 0 !important; /* importants override pre jquery ui 1.7 styles */
  width: 100% !important;
  height: 8px !important;
  overflow: hidden !important;
  line-height: 8px !important;
  font-size: 11px !important;
  font-family: monospace;
  text-align: center;
  cursor: s-resize;
}

.fc-agenda .ui-resizable-resizing {
  /* TODO: better selector */
  _overflow: hidden;
}

/* jquery.Jcrop.min.css v0.9.10 (build:20120429) */
.jcrop-holder {
  direction: ltr;
  float: left;
  text-align: left;
  width: 100% !important;
}
.jcrop-vline,
.jcrop-hline {
  background: #fff url(Jcrop.gif) top left repeat;
  font-size: 0;
  position: absolute;
}
.jcrop-vline {
  height: 100%;
  width: 1px !important;
}
.jcrop-hline {
  height: 1px !important;
  width: 100%;
}
.jcrop-vline.right {
  right: 0;
}
.jcrop-hline.bottom {
  bottom: 0;
}
.jcrop-handle {
  background-color: #333;
  border: 1px #eee solid;
  font-size: 1px;
}
.jcrop-tracker {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  height: 100%;
  width: 100%;
}
.jcrop-handle.ord-n {
  left: 50%;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -4px;
  margin-left: -4px;
}
.jcrop-handle.ord-e {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 50%;
}
.jcrop-handle.ord-w {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 50%;
}
.jcrop-handle.ord-nw {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-ne {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 0;
}
.jcrop-handle.ord-se {
  bottom: 0;
  margin-bottom: -4px;
  margin-right: -4px;
  right: 0;
}
.jcrop-handle.ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -4px;
  margin-left: -4px;
}
.jcrop-dragbar.ord-n,
.jcrop-dragbar.ord-s {
  height: 7px;
  width: 100%;
}
.jcrop-dragbar.ord-e,
.jcrop-dragbar.ord-w {
  height: 100%;
  width: 7px;
}
.jcrop-dragbar.ord-n {
  margin-top: -4px;
}
.jcrop-dragbar.ord-s {
  bottom: 0;
  margin-bottom: -4px;
}
.jcrop-dragbar.ord-e {
  margin-right: -4px;
  right: 0;
}
.jcrop-dragbar.ord-w {
  margin-left: -4px;
}
.jcrop-light .jcrop-vline,
.jcrop-light .jcrop-hline {
  background: #fff;
  filter: Alpha(opacity=70) !important;
  opacity: 0.7 !important;
}
.jcrop-light .jcrop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #000;
  border-color: #fff;
  border-radius: 3px;
}
.jcrop-dark .jcrop-vline,
.jcrop-dark .jcrop-hline {
  background: #000;
  filter: Alpha(opacity=70) !important;
  opacity: 0.7 !important;
}
.jcrop-dark .jcrop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #fff;
  border-color: #000;
  border-radius: 3px;
}
.jcrop-holder img,
img.jcrop-preview {
  max-width: none;
}

/* Image Crop */ /*
.image-crop {
    border: 1px solid #e8ecec;
    float: left;
    width: 100%;
}
.bheader {
    background-color: #fafafa;
    float: left;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}
.bheader > h2 {
    color: #333333;
    float: left;
    font-family: Roboto;
    letter-spacing: 0.3px;
    margin: 0;
    padding: 20px 0;
    width: 100%;
}
.bbody {
    color: #000;
    float: left;
    overflow: hidden;
    padding-bottom: 20px;
    text-align: center;
    width: 100%;

    background: -moz-linear-gradient(#ffffff, #f2f2f2);
    background: -ms-linear-gradient(#ffffff, #f2f2f2);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(#ffffff, #f2f2f2);
    background: -o-linear-gradient(#ffffff, #f2f2f2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
    background: linear-gradient(#ffffff, #f2f2f2);
}
.bbody > form {
    display: table;
    float: none;
    margin: 0 auto;
    width: auto;
}
#upload_form > h2 {
    color: #555555;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.3px;
}
.step2, .error {
    display: none;
}
.error {
    font-size: 18px;
    font-weight: bold;
    color: red;
}
.info {
    float: left;
    padding: 20px;
    width: 100%;
}
.info > label {
    color: #333333;
    font-family: Roboto;
    font-size: 13px;
    font-weight: normal;
    margin-right: 10px;
}
.info input {
    background: none repeat scroll 0 0 #fff;
    border: medium none;
    
	-webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

	
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
	
    display: inline-block;
    font-family: Roboto;
    font-size: 14px;
    height: auto;
    margin-bottom: 17px;
    margin-left: 12px;
    padding: 6px 16px;
}
.image-crop label {
    margin: 0 5px;
}
.image-crop input[type="file"] {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #cccccc;
    color: #888888;
    float: left;
    font-family: Lato;
    font-size: 13px;
    height: auto;
    letter-spacing: 0.3px;
    margin-top: 11px;
    padding: 4px 8px;
    text-align: center;
    width: 100%;
}
#upload_form > div {
    display: table;
    float: none;
    margin: 0 auto;
}
.step2 > h2 {
    color: #555555;
    float: left;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
}
.jcrop-holder {
    display: inline-block;
}
.image-crop input[type=submit] {
    background: #e3e3e3;
    border: 1px solid #bbb;
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -o-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
	
    color: #333;
    font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    width: 150px;
}
.image-crop input[type=submit]:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
    -ms-box-shadow: inset 0 0 1px 1px #eaeaea;
    -o-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
	
    color: #222;
    cursor: pointer;
}
.image-crop input[type=submit]:active {
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -ms-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -o-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
	
    color: #000;
}

#upload_form > div > img {
    visibility: visible;
}


.introjs-overlay {
position: absolute;
z-index: 999999;
background-color: #000;
opacity: 0;
background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.introjs-fixParent {
z-index: auto !important;
opacity: 1.0 !important;
position: absolute !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
z-index: 9999999 !important;
}
.introjs-disableInteraction {
z-index: 99999999 !important;
position: absolute;
}
.introjs-relativePosition,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
position: relative;
}
.introjs-helperLayer {
position: absolute;
z-index: 9999998;
background-color: #FFF;
background-color: rgba(255,255,255,.9);
border: 1px solid #777;
border: 1px solid rgba(0,0,0,.5);
    
	-webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

box-shadow: 0 2px 15px rgba(0,0,0,.4);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.introjs-tooltipReferenceLayer {
position: absolute;
z-index: 10000000;
background-color: transparent;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.introjs-helperLayer *,
.introjs-helperLayer *:before,
.introjs-helperLayer *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}
.introjs-helperNumberLayer {
position: absolute;
top: -16px;
left: -16px;
z-index: 9999999999 !important;
padding: 2px;
font-family: Arial, verdana, tahoma;
font-size: 13px;
font-weight: bold;
color: white;
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
background: #ff3019; */ /* Old browsers */ /*
background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); */ /* Chrome10+,Safari5.1+ */ /*
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); */ /* Chrome,Safari4+ */ /*
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); */ /* FF3.6+ */ /*
background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); */ /* IE10+ */ /*
background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); */ /* Opera 11.10+ */ /*
background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); */ /* W3C */ /*
width: 20px;
height:20px;
line-height: 20px;
border: 3px solid white;
    
	-webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); */ /* IE6-9 */ /*
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); */ /* IE10 text shadows */ /*
box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.introjs-arrow {
border: 5px solid white;
content:'';
position: absolute;
}
.introjs-arrow.top {
top: -10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:white;
border-left-color:transparent;
}
.introjs-arrow.top-right {
top: -10px;
right: 10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:white;
border-left-color:transparent;
}
.introjs-arrow.top-middle {
top: -10px;
left: 50%;
margin-left: -5px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:white;
border-left-color:transparent;
}
.introjs-arrow.right {
right: -10px;
top: 10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:white;
}
.introjs-arrow.right-bottom {
bottom:10px;
right: -10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:white;
}
.introjs-arrow.bottom {
bottom: -10px;
border-top-color:white;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-arrow.left {
left: -10px;
top: 10px;
border-top-color:transparent;
border-right-color:white;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-arrow.left-bottom {
left: -10px;
bottom:10px;
border-top-color:transparent;
border-right-color:white;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-tooltip {
position: absolute;
padding: 10px;
background-color: white;
min-width: 200px;
max-width: 300px;
    
	-webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

box-shadow: 0 1px 10px rgba(0,0,0,.4);
-webkit-transition: opacity 0.1s ease-out;
-moz-transition: opacity 0.1s ease-out;
-ms-transition: opacity 0.1s ease-out;
-o-transition: opacity 0.1s ease-out;
transition: opacity 0.1s ease-out;
}
.introjs-tooltipbuttons {
text-align: right;
white-space: nowrap;
}*/
/*
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
Changed by Afshin Mehrabani
*/ /*

.introjs-button {
position: relative;
overflow: visible;
display: inline-block;
padding: 0.3em 0.8em;
border: 1px solid #d4d4d4;
margin: 0;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
font: 11px/normal sans-serif;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-webkit-background-clip: padding;
-moz-background-clip: padding;
-o-background-clip: padding-box;
*/
/*background-clip: padding-box;*/ /*
 */
/* commented out due to Opera 11.10 bug */ /*

-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
*/
/* IE hacks */ /*

zoom: 1;
*display: inline;
margin-top: 10px;
}
.introjs-button:hover {
border-color: #bcbcbc;
text-decoration: none;
box-shadow: 0px 1px 1px #e3e3e3;
}
.introjs-button:focus,
.introjs-button:active {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
background-image: -moz-linear-gradient(#ececec, #f4f4f4);
background-image: -o-linear-gradient(#ececec, #f4f4f4);
background-image: linear-gradient(#ececec, #f4f4f4);
}
*/
/* overrides extra padding on button elements in Firefox */ /*

.introjs-button::-moz-focus-inner {
padding: 0;
border: 0;
}
.introjs-skipbutton {
margin-right: 5px;
color: #7a7a7a;
}
.introjs-prevbutton {
-webkit-border-radius: 0.2em 0 0 0.2em;
-moz-border-radius: 0.2em 0 0 0.2em;
border-radius: 0.2em 0 0 0.2em;
border-right: none;
}
.introjs-nextbutton {
-webkit-border-radius: 0 0.2em 0.2em 0;
-moz-border-radius: 0 0.2em 0.2em 0;
border-radius: 0 0.2em 0.2em 0;
}
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
color: #9a9a9a;
border-color: #d4d4d4;
	
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
	
cursor: default;
background-color: #f4f4f4;
background-image: none;
text-decoration: none;
}
.introjs-bullets {
text-align: center;
}
.introjs-bullets ul {
clear: both;
margin: 15px auto 0;
padding: 0;
display: inline-block;
}
.introjs-bullets ul li {
list-style: none;
float: left;
margin: 0 2px;
}
.introjs-bullets ul li a {
display: block;
width: 6px;
height: 6px;
background: #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-decoration: none;
}
.introjs-bullets ul li a:hover {
background: #999;
}
.introjs-bullets ul li a.active {
background: #999;
}
.introjs-progress {
overflow: hidden;
height: 10px;
margin: 10px 0 5px 0;
border-radius: 4px;
background-color: #ecf0f1
}
.introjs-progressbar {
float: left;
width: 0%;
height: 100%;
font-size: 10px;
line-height: 10px;
text-align: center;
background-color: #08c;
}
.introjsFloatingElement {
position: absolute;
height: 0;
width: 0;
left: 50%;
top: 50%;
}
*/

/* Collapse Style */
.collapse-sec {
  float: left;
  width: 100%;
}
.c-collapse {
  float: left;
  width: 100%;
}
.c-collapse > h2 {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #e5e5e5;
  color: #333333;
  cursor: pointer;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  letter-spacing: 0.3px;
  line-height: 43px;
  margin: 0 0 10px;
  opacity: 0.6;
  overflow: hidden;
  padding: 0 21px;
  position: relative;
  text-overflow: ellipsis;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  white-space: nowrap;
  width: 100%;
}

.c-collapse > h2 i {
  float: left;
  font-size: 12px;
  height: 26px;
  line-height: 24px;
  margin-right: 10px;
  margin-top: 8px;
  position: relative;
  text-align: center;
  width: 26px;
}
.c-collapse > h2.active {
  opacity: 1;
}
.c-collapse > h2:hover {
  opacity: 1;
}
.c-collapse > .content {
  background: none repeat scroll 0 0 #f9f9f9;
  border: 1px solid #fcfcfc;
  float: left;
  margin-bottom: 10px;
  padding: 15px 25px;
  position: relative;
  width: 100%;
}
.c-collapse > .content:before {
  background: none repeat scroll 0 0 #f9f9f9;
  border-left: 1px solid #fcfcfc;
  border-top: 1px solid #fcfcfc;
  content: "";
  height: 15px;
  left: 30px;
  position: absolute;
  top: -3px;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);

  width: 15px;
}

/* Form Wizard */
.wizard-form-h {
  float: left;
  width: 100%;
}
.swMain {
  float: left;
  width: 100%;
}
.anchor {
  float: left;
  list-style: none outside none;
  margin: 0 0 15px;
  padding: 0;
  width: 100%;
}
.anchor > li {
  float: left;
  margin-right: 15px;
}
.anchor > li > a {
  background: none repeat scroll 0 0 #fafafa;
  border: 1px solid #e8ecec;
  color: #333;
  float: left;
  font-family: Roboto;
  letter-spacing: 0.3px;
  line-height: 14px;
  padding: 11px 28px;
  position: relative;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.anchor > li > a > span {
  color: #fff;
  font-size: 11px;
  height: 20px;
  line-height: 17px;
  position: absolute;
  right: -9px;
  text-align: center;
  top: -9px;
  width: 20px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.stepContainer {
  float: left;
  width: 100%;
}
.stepContainer > .content {
  margin: 0 -15px;
}
.StepTitle,
.StepTitle2 {
  float: left;
  font-family: Roboto;
  font-size: 20px;
  margin: 10px 0 0;
  padding: 0 15px;
  width: 100%;
}
.StepTitle3{
  float: left;
  font-family: Roboto;
  font-size: 13px;
  margin: 8px 0 20px;
  width: 100%;
}
thead {
  font-size: 15px;
}
.table.new-patient-tbls > thead > tr > th{
font-size: 14px;
}
.inline-form {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #e8ecec;
  float: left;
 margin-top: 23px;
  position: relative;
  width: 100%;
}
.inline-form > label {
  background: none repeat scroll 0 0 #fff;
  color: #000;
  font-family: lato;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.3px;
  padding: 1px 19px;
  position: absolute;
  left: 1px;
  text-transform: uppercase;
  top: -11px;
}
.inline-form > input,
.inline-form > textarea {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: medium none !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;

  color: #757575;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  height: 23px;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 0 20px;
  width: 100%;
}

textarea, input[type="text"], input[type="password"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border linear .2s, box-shadow linear .2s;
  -moz-transition: border linear .2s, box-shadow linear .2s;
  -o-transition: border linear .2s, box-shadow linear .2s;
  transition: border linear .2s, box-shadow linear .2s;
  width: 221px;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    padding: 0px 15px;
    border-radius: 5px;
}

input[type="datetime"], input[type="date"], .dateinput {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border linear .2s, box-shadow linear .2s;
  -moz-transition: border linear .2s, box-shadow linear .2s;
  -o-transition: border linear .2s, box-shadow linear .2s;
  transition: border linear .2s, box-shadow linear .2s;
  height: 32px;
  padding: 7px;
  border-radius: 4px;
      width: 167px;
    font-size: 14px;
    font-weight: 400;
    color: #80808080;
   
}

.dateinput {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border linear .2s, box-shadow linear .2s;
  -moz-transition: border linear .2s, box-shadow linear .2s;
  -o-transition: border linear .2s, box-shadow linear .2s;
  transition: border linear .2s, box-shadow linear .2s;
  height: 32px;
  padding: 7px;
  border-radius: 4px;
      width: 167px !important;
    font-size: 14px;
    font-weight: 400;
    color: #80808080;
   
}
.tb-tbl .dateinput {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border linear .2s, box-shadow linear .2s;
  -moz-transition: border linear .2s, box-shadow linear .2s;
  -o-transition: border linear .2s, box-shadow linear .2s;
  transition: border linear .2s, box-shadow linear .2s;
  height: 32px;
  padding: 7px;
  border-radius: 4px;
      width: 131px !important;
    font-size: 14px;
    font-weight: 400;
    color: #80808080;
   
}


.actionBar {
  float: left;
  margin-top: 20px;
  width: 100%;
}
.inline-form > textarea {
  height: auto;
}
.actionBar > a {
  background: none repeat scroll 0 0 #555555;
  color: #fff;
  float: left;
  font-family: Roboto;
  letter-spacing: 0.3px;
  margin-right: 10px;
  padding: 7px 13px;
}
.inline-form > select {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: medium none;
  color: #000000;
  float: left;
  font-family: Roboto;
  height: 43px;
  padding: 0 16px;
  position: relative;
  width: 100%;
  z-index: 9;
  font-size: 14px;
}

.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{
  margin: 1px 0px 0px -21px;
}


/* line Icons */
.icons-area-sec {
  float: left;
  width: 100%;
}
.icons-main-section {
  float: left;
  height: auto;
  margin-bottom: 30px;
  width: 100%;
}
.icons-area-sec h3 {
  float: left;
  font-family: Roboto;
  margin: 0 0 10px;
  padding: 0 15px;
  position: relative;
  width: 100%;
}
.icons-container > span:first-child {
  float: left;
  font-size: 15px;
  margin-right: 10px;
}
.icons-container > span:last-child {
  font-family: Roboto;
  font-size: 13px;
  height: auto;
  letter-spacing: 0.3px;
  width: auto;
}
.icons-container {
  margin-top: 20px;
}

/* Notification */
.notification {
  float: left;
  margin-top: -20px;
  width: 100%;
}
.notification > .alert {
  float: left;
  font-family: Roboto;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin: 20px 0 0;
  min-height: 72px;
  width: 100%;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
.alert.color a {
  color: #ffffff;
}
.alert.white {
  background: none repeat scroll 0 0 #ffffff;
  padding-left: 70px;
  position: relative;
  color: #333;
}
.alert.white > span {
  height: 40px;
  left: 15px;
  position: absolute;
  top: 15px;
  width: 40px;
}
.alert.white > span > i {
  float: left;
  height: 100%;
  line-height: 40px;
  position: relative;
  text-align: center;
  width: 100%;
}

.alert.white a {
  color: #333333;
}

/* Price Table */
.prices-sec {
  float: left;
  width: 100%;
}
.price-table {
  background: none repeat scroll 0 0 #ffffff;
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.price-table > .price-package {
  float: left;
  width: 100%;
}
.price-table > .price-package > h3 {
  color: #555555;
  float: left;
  font-family: Roboto;
  font-size: 24px;
  letter-spacing: 0.3px;
  line-height: 19px;
  margin: 30px 0 40px;
  text-align: center;
  width: 100%;
}
.price-table > .service-price {
  float: left;
  margin-bottom: 20px;
  width: 100%;
}
.service-price > h3 {
  color: #777;
  display: table;
  float: none;
  font-family: Roboto;
  font-size: 70px;
  letter-spacing: 0.3px;
  line-height: 35px;
  margin: 0 auto;
  position: relative;
}

.service-price > h3:before {
  content: "$";
  font-family: Roboto;
  font-size: 17px;
  font-weight: lighter;
  position: absolute;
  right: 16px;
  top: -15px;
}
.service-price > h3 > i {
  color: #888888;
  font-family: lato;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin-left: 4px;
}
.service-offer {
  background: none repeat scroll 0 0 #f0f0f0;
  color: #888888;
  font-family: Roboto;
  font-size: 14px;
  left: 0;
  line-height: 10px;
  padding: 8px 13px;
  position: absolute;
  top: 27px;
}
.service-icon {
  background: none repeat scroll 0 0 #ffffff;
  color: #e8ecec;
  font-size: 50px;
  line-height: 10px;
  padding: 0 20px;
  position: absolute;
  right: 0;
  top: 142px;
}
.service-features {
  border-top: 1px solid #e8ecec;
  color: #888888;
  float: left;
  font-family: lato;
  font-size: 14px;
  letter-spacing: 0.3px;
  line-height: 10px;
  padding: 20px 30px;
  width: 100%;
}
.price-table .signup {
  border-top: 1px solid #e8ecec;
  float: left;
  padding-top: 30px;
  text-align: center;
  width: 100%;
}
.price-table .signup > a {
  color: #ffffff;
  display: table;
  float: none;
  font-family: Roboto;
  font-size: 14px;
  line-height: 10px;
  margin: 0 auto;
  padding: 15px 20px;
}
.price-table.premium > .service-icon {
  color: #fff95a;
}

/* RangeSlider */ /*


.irs {
    position: relative; display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
    .irs-line {
        position: relative; display: block;
        overflow: hidden;
        outline: none !important;
    }
        .irs-line-left, .irs-line-mid, .irs-line-right {
            position: absolute; display: block;
            top: 0;
        }
        .irs-line-left {
            left: 0; width: 11%;
        }
        .irs-line-mid {
            left: 9%; width: 82%;
        }
        .irs-line-right {
            right: 0; width: 11%;
        }

    .irs-bar {
        position: absolute; display: block;
        left: 0; width: 0;
    }
        .irs-bar-edge {
            position: absolute; display: block;
            top: 0; left: 0;
        }

    .irs-shadow {
        position: absolute; display: none;
        left: 0; width: 0;
    }

    .irs-slider {
        position: absolute; display: block;
        cursor: default;
        z-index: 1;
    }
        .irs-slider.single {

        }
        .irs-slider.from {

        }
        .irs-slider.to {

        }
        .irs-slider.type_last {
            z-index: 2;
        }

    .irs-min {
        position: absolute; display: block;
        left: 0;
        cursor: default;
    }
    .irs-max {
        position: absolute; display: block;
        right: 0;
        cursor: default;
    }

    .irs-from, .irs-to, .irs-single {
        position: absolute; display: block;
        top: 0; left: 0;
        cursor: default;
        white-space: nowrap;
    }

.irs-grid {
    position: absolute; display: none;
    bottom: 0; left: 0;
    width: 100%; height: 20px;
}
.irs-with-grid .irs-grid {
    display: block;
}
    .irs-grid-pol {
        position: absolute;
        top: 0; left: 0;
        width: 1px; height: 8px;
        background: #000;
    }
    .irs-grid-pol.small {
        height: 4px;
    }
    .irs-grid-text {
        position: absolute;
        bottom: 0; left: 0;
        white-space: nowrap;
        text-align: center;
        font-size: 9px; line-height: 9px;
        padding: 0 3px;
        color: #000;
    }

.irs-disable-mask {
    position: absolute; display: block;
    top: 0; left: -1%;
    width: 102%; height: 100%;
    cursor: default;
    background: rgba(0,0,0,0.0);
    z-index: 2;
}
.irs-disabled {
    opacity: 0.4;
}
.lt-ie9 .irs-disabled {
    filter: alpha(opacity=40);
}


.irs-hidden-input {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    z-index: -9999 !important;
    background: none !important;
    border-style: solid !important;
    border-color: transparent !important;
}
*/

/* Skin details */

.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider {
  background: url(../images/sprite-skin-flat.png) repeat-x;
}

.irs {
  height: 40px;
}
.irs-with-grid {
  height: 60px;
}
.irs-line {
  height: 12px;
  top: 25px;
}
.irs-line-left {
  height: 12px;
  background-position: 0 -30px;
}
.irs-line-mid {
  height: 12px;
  background-position: 0 0;
}
.irs-line-right {
  height: 12px;
  background-position: 100% -30px;
}

.irs-bar {
  height: 12px;
  top: 25px;
  background-position: 0 -60px;
}
.irs-bar-edge {
  top: 25px;
  height: 12px;
  width: 9px;
  background-position: 0 -90px;
}

.irs-shadow {
  height: 3px;
  top: 34px;
  background: #000;
  opacity: 0.25;
}
.lt-ie9 .irs-shadow {
  filter: alpha(opacity=25);
}

.irs-slider {
  width: 16px;
  height: 18px;
  top: 22px;
  background-position: 0 -120px;
}
#irs-active-slider,
.irs-slider:hover {
  background-position: 0 -150px;
}

.irs-min,
.irs-max {
  color: #999;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  top: 0;
  padding: 1px 3px;
  background: #e1e4e9;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.irs-from,
.irs-to,
.irs-single {
  color: #fff;
  font-size: 10px;
  line-height: 1.333;
  text-shadow: none;
  padding: 1px 5px;
  background: #ed5565;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.irs-from:after,
.irs-to:after,
.irs-single:after {
  position: absolute;
  display: block;
  content: "";
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -3px;
  overflow: hidden;
  border: 3px solid transparent;
  border-top-color: #ed5565;
}

.irs-grid-pol {
  background: #e1e4e9;
}
.irs-grid-text {
  color: #999;
}

.irs-disabled {
}
/* Range Slider */
.range-slider {
  float: left;
  width: 100%;
}
.range-slider > span {
  float: left;
  margin-bottom: 45px;
  width: 100%;
}

/* ui Sortable */
.connected,
.sortable,
.exclude,
.handles {
  -moz-user-select: none;
  float: left;
  margin: auto;
  padding: 0;
  width: 100%;
}
.sortable.grid {
  overflow: hidden;
}
.connected li,
.sortable li,
.exclude li,
.handles li {
  background: none repeat scroll 0 0 #fafafa;
  color: #333333;
  float: left;
  font-family: Roboto;
  height: auto;
  list-style: none outside none;
  margin: 0;
  padding: 8px 15px;
  width: 100%;
}
.sortable-style .list > li {
  margin-top: 10px;
}
.sortable-style > .sortable {
  margin-top: -10px;
}
.handles span {
  cursor: move;
}
li.disabled {
  opacity: 0.5;
}
.sortable.grid li {
  float: left;
  height: 110px;
  line-height: 110px;
  margin-right: 10px;
  margin-top: 10px;
  text-align: center;
  width: 110px;
}
li.highlight {
  background: #fee25f;
}
#connected {
  width: 440px;
  overflow: hidden;
  margin: auto;
}
.connected {
  float: left;
  width: 200px;
}
.connected.no2 {
  float: right;
}
li.sortable-placeholder {
  border: 1px dashed #ccc;
  background: none;
}
.sortable-style {
  float: left;
  width: 100%;
}

/* Task */
.task-sec {
  float: left;
  width: 100%;
  margin-top: 30px;
}
#task-form {
  float: left;
  width: 100%;
}
#task-form input {
  border: 1px solid #e2e2e2;

  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -ms-border-radius: 4px 0 0 4px;
  -o-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;

  color: #404040;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  height: 60px;
  letter-spacing: 0.3px;
  padding: 20px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 80%;
}
#task-form input:focus,
#task-form input:active,
#task-form button:focus,
#task-form button:active {
  outline-color: #f0553b;
  outline-width: thin;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
#task-form button {
  background: none repeat scroll 0 0 #f0553b;
  border: medium none;

  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  -ms-border-radius: 0 4px 4px 0;
  -o-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;

  color: #fff;
  cursor: pointer;
  float: left;
  font-family: Roboto;
  font-size: 15px;
  height: 60px;
  margin-left: -1px;
  padding: 0 20px;
  position: relative;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 20%;
}
#task-form button:hover {
  opacity: 0.8;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
#task-container {
  float: left;
  width: 100%;
}

/* List Styles*/
#task-container ul {
  float: left;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 999;
}
#task-container .task-headline {
  display: none;
  color: #666666;
  border-bottom: 1px solid #c8c7bb;
  padding-bottom: 20px;
  margin-bottom: 20px;
  font-size: 1.6em;
  position: relative;
}
#task-container .task-headline:before {
  height: 1px;
  width: 100%;
  background: #fff;
  position: absolute;
  content: " ";
  bottom: 0px;
  left: 0;
}
#task-container .nothing-message {
  background: url("../images/logo-2.png") no-repeat scroll center 20px / 15%
    auto rgba(0, 0, 0, 0);
  color: #333333;
  height: 160px;
}
#task-container li {
  display: none;
  float: left;
  width: 49%;
  overflow: auto;
  height: auto;
  min-height: 10px;
  background: #fff;
  display: inline-block;
  padding: 20px;
  border: 1px solid #ccc;
  color: #666;
  border-top: 9px solid #39d1b4;
  cursor: pointer;
  margin-bottom: 10px;
  margin-right: 2%;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  position: relative;
}
#task-container li:nth-child(even) {
  margin-right: 0;
}
#task-container li:hover {
  opacity: 0.8;
  border-top: 9px solid #f0553b;
}
#task-container p {
  line-height: 1.6em;
  text-align: left;
}
#task-container li.complete {
  opacity: 0.3;
  border-top: 9px solid #666;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
#task-container li.complete:before {
  background: url("../images/complete.png") no-repeat;
  position: absolute;
  top: 5px;
  right: 5px;
  content: "";
  width: 55px;
  height: 55px;
  background-size: 100%;
}
#task-container li.complete:hover {
  border-top: 9px solid #f0553b;
  opacity: 0.6;
}
#task-container li.complete p {
  text-decoration: line-through;
}

/* Secondary Control Styles*/
#controls {
  display: none;
  text-align: center;
  clear: both;
  margin-top: 60px;

  background: #e4e3d5;
  padding: 20px;
  border: 1px solid #c8c7bb;
}
#controls p {
  display: inline-block;
  color: #666;
  font-style: italic;
}
#controls p:first-child {
  margin-right: 20px;
}
#clear-all-tasks {
  clear: both;
  margin-top: 20px;
  background: #999;
  border: none;
  color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: "Quicksand", sans-serif;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
#clear-all-tasks:hover {
  background: #666;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

/* Todo List */
.tdl-holder {
  float: left;
  margin: 0;
  width: 100%;
}
.tdl-content {
  float: left;
  width: 100%;
}
.tdl-holder li {
  background-color: #fff;
  border: 1px solid #e8ecec;
  color: #333333;
  float: left;
  margin-bottom: 5px;
  width: 100%;
}
.tdl-holder li span {
  color: #333333;
  font-family: Roboto;
  font-size: 16px;
  letter-spacing: 0.3px;
  margin-left: 30px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.tdl-holder label:hover {
  background-color: #fafafa;
  color: #333333;
}
.tdl-holder label {
  cursor: pointer;
  display: block;
  line-height: 56px;
  margin: 0;
  padding: 0 15px;
  position: relative;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.tdl-holder label a {
  background-color: #222222;
  color: #ffffff;
  display: none;
  float: right;
  font-weight: bold;
  height: 16px;
  line-height: 14px;
  margin-top: 20px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.2s linear 0s;
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  width: 16px;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.tdl-holder label:hover a {
  display: block;
}

.tdl-holder label a:hover {
  background-color: #fff;
  color: #de3f53;
}

.tdl-holder input[type="checkbox"] {
  cursor: pointer;
  opacity: 0;
  position: absolute;
}
.tdl-content > ul {
  float: left;
  list-style: none outside none;
  margin: 0 0 -6px;
  padding: 0;
  width: 100%;
}
.tdl-holder input[type="checkbox"] + i {
  background-color: #efefef;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  display: block;
  height: 16px;
  position: absolute;
  top: 20px;
  width: 16px;
  z-index: 1;
}

.tdl-holder input[type="checkbox"]:checked + i:after {
  background-color: #c4c4c4;
  content: "";
  display: block;
  height: 8px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 8px;
  z-index: 2;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.tdl-holder input[type="checkbox"]:checked ~ span {
  color: #777777;
  text-decoration: line-through;
}
.tdl-holder input[type="text"] {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #bfbfbf;
  color: #464f72;
  font-family: Roboto;
  font-size: 18px;
  margin: 40px 0 0;
  padding: 20px 15px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 100%;
}

.tdl-holder input[type="text"]:hover {
  color: #4c577f;
}

.tdl-holder input[type="text"]:focus {
  color: #333333;
}
.tdl-holder ::-webkit-input-placeholder {
  color: #464f72;
} /* WebKit browsers */
.tdl-holder :-moz-placeholder {
  color: #464f72;
} /* Mozilla Firefox 4 to 18 */
.tdl-holder ::-moz-placeholder {
  color: #464f72;
} /* Mozilla Firefox 19+ */
.tdl-holder :-ms-input-placeholder {
  color: #464f72;
} /* Internet Explorer 10+ */
.tdl-holder li.remove {
  -webkit-animation: collapseItem 300ms ease;
  animation: collapseItem 300ms ease;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.tdl-holder li.remove span {
  color: #586186;
  text-decoration: line-through;
}
@keyframes collapseItem {
  0% {
    -ms-transform: perspective(500px) rotateX(0deg);
    transform: perspective(500px) rotateX(0deg);
  }
  100% {
    -ms-transform: perspective(500px) rotateX(-90deg);
    transform: perspective(500px) rotateX(-90deg);
  }
}

@-webkit-keyframes collapseItem {
  0% {
    -webkit-transform: perspective(500px) rotateX(0deg);
  }
  100% {
    -webkit-transform: perspective(500px) rotateX(-90deg);
  }
}
.tdl-holder input[type="checkbox"]:checked + i:after {
  background-color: #c4c4c4;
  content: "";
  display: block;
  height: 8px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 8px;
  z-index: 2;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.tdl-holder input[type="checkbox"]:checked ~ span {
  color: #777777;
  text-decoration: line-through;
}
.tdl-holder input[type="text"] {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #bfbfbf;
  border-radius: 0 !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;

  color: #464f72;
  font-family: Roboto;
  font-size: 18px;
  margin: 40px 0 0;
  padding: 20px 15px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  width: 100%;
}

.tdl-holder input[type="text"]:hover {
  color: #4c577f;
}

.tdl-holder input[type="text"]:focus {
  color: #333333;
}

.tdl-holder ::-webkit-input-placeholder {
  color: #464f72;
} /* WebKit browsers */
.tdl-holder :-moz-placeholder {
  color: #464f72;
} /* Mozilla Firefox 4 to 18 */
.tdl-holder ::-moz-placeholder {
  color: #464f72;
} /* Mozilla Firefox 19+ */
.tdl-holder :-ms-input-placeholder {
  color: #464f72;
} /* Internet Explorer 10+ */

.tdl-holder li.remove {
  -webkit-animation: collapseItem 300ms ease;
  animation: collapseItem 300ms ease;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

.tdl-holder li.remove span {
  color: #586186;
  text-decoration: line-through;
}

/* Error Page */
.error-sec {
  float: left;
  width: 100%;
  text-align: center;
}
.error-sec > h4 {
  color: #222222;
  float: left;
  font-family: Roboto;
  font-size: 24px;
  margin: 30px 0 0;
  width: 100%;
}
.error-sec > h5 {
  color: #666666;
  float: left;
  font-family: Roboto;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin-bottom: 30px;
  width: 100%;
}
.error-sec > h2 {
  float: left;
  font-family: Lato;
  font-size: 180px;
  font-weight: 900;
  line-height: 170px;
  margin: 0;
  text-align: center;
  width: 100%;
}
.error-sec > h2 > span {
  float: left;
  font-size: 30px;
  line-height: 32px;
  width: 100%;
}
.error-sec > input {
  border: medium none !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;

  display: table;
  float: none;
  margin: 0 auto;
  padding: 10px 20px;
  width: 540px;
}
.error-sec ul {
  float: left;
  margin: 30px 0 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
.error-sec > p {
  margin-top: 30px;
  padding: 0 170px;
}
.error-sec ul > li:before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  color: #fff;
  content: "OR";
  font-family: Roboto;
  font-size: 11px;
  height: 25px;
  line-height: 23px;
  position: absolute;
  right: -19px;
  top: 6px;
  width: 25px;
  z-index: 9;
}
.error-sec ul > li {
  display: inline-flex;
  float: none;
  margin: 0 3px;
  position: relative;
}
.error-sec ul > li a {
  color: #555555;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  line-height: 18px;
  padding: 9px 20px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  background: #fff;
}
.error-sec ul > li:last-child:before {
  opacity: 0;
}

/* Contact Us */
.contact-form {
  float: left;
  width: 100%;
}
.contact-form .error_message {
  margin-bottom: 20px;
}
.contact-form #contact {
  float: left;
  width: 100%;
}
#contact span.required {
  font-size: 13px;
  color: #ff0000;
} /* Select the colour of the * if the field is required. */
.contact-form #contact #message {
  float: left;
  margin: 0;
  width: 100%;
}
.contact-form form {
  float: left;
  width: 100%;
}
.contact-form form label {
  color: #555555;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.3px;
  line-height: 12px;
  margin-bottom: 10px;
  width: 100%;
}
.error_message {
  background: url("../images/error.gif") no-repeat scroll 10px center #fbe3e4;
  border: 1px solid #fbc2c4;
  color: #8a1f11;
  display: block;
  float: left;
  height: 43px;
  line-height: 22px;
  padding: 9px 42px;
  width: 100%;
}
.contact-form form input[type="text"],
.contact-form form textarea {
  border: medium none !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;

  color: #444444;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  height: 35px;
  letter-spacing: 0.3px;
  margin-bottom: 20px;
  padding: 0 20px;
  width: 100%;
}
.contact-form form select {
  border: 1px solid #d5d5d5;
  color: #444;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  height: 35px;
  margin-bottom: 20px;
  width: 100%;
}
.contact-form form textarea {
  min-height: 165px;
  padding: 20px;
}
.contact-form form #verify {
  margin-right: 10px;
  width: auto;
}
.contact-form form input[type="submit"] {
  border: medium none;
  float: left;
  font-family: Lato;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 7px 20px;
}
.loader {
  padding: 0 10px;
}

#contact #success_page h1 {
  background: url("../images/success.gif") left no-repeat;
  padding-left: 22px;
}

acronym {
  border-bottom: 1px dotted #ccc;
}

.social-btns.contact {
  float: left;
  margin: 0;
}
.social-btns.contact > li {
  float: left;
  margin: 0 6px 0 0;
}
.contact-map {
  float: left;
  width: 100%;
}
.contact-map > iframe {
  border: medium none;
  float: left;
  height: 230px;
  width: 100%;
}

/* Google Map */
.google-map {
  float: left;
  width: 100%;
}
.google-map iframe {
  border: medium none;
  float: left;
  width: 100%;
  height: 500px;
}

/* Invoice */
.invoice-billing {
  float: left;
  margin-top: 30px;
  width: 100%;
}
.invoice-billing-area {
  float: left;
  width: 100%;
}
.invoice-billing h4 {
  color: #555555;
  float: left;
  margin: 0 0 14px;
  width: 100%;
}
address {
  color: #777777;
  font-family: Roboto;
  letter-spacing: 0.3px;
}
address a {
  color: red;
}
.introjs-tooltipbuttons > a:hover {
  color: #333;
}
.account-form > label a {
  color: #333333;
}
.invoice {
  background: none repeat scroll 0 0 #ffffff;
  float: left;
  margin: 15px 0;
  overflow: hidden;
  width: 100%;
}
.invoice-head {
  background: none repeat scroll 0 0 #fafafa;
  float: left;
  width: 100%;
}
.invoice-head h2 {
  color: #555555;
  float: left;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 12px;
  margin: 0;
  padding: 23px 0;
  text-align: center;
}
.invoice li div p {
  color: #555555;
  float: left;
  font-family: Lato;
  font-size: 13px;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin: 0;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}
.invoice-number {
  width: 10%;
  float: left;
}
.date {
  width: 10%;
  float: left;
}
.description {
  width: 50%;
  float: left;
}
.quantity {
  width: 10%;
  float: left;
}
.vat {
  width: 10%;
  float: left;
}
.total {
  width: 10%;
  float: left;
}
.long-column {
  width: 90%;
}
.long-column p {
  padding-left: 10px !important;
  text-align: left !important;
}
.invoice li {
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ffffff;
  float: left;
  list-style: none outside none;
  width: 100%;
}
.invoice li:hover {
  background: none repeat scroll 0 0 #f7f7f7;
}
.invoice > ul {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}

.invoice li:nth-child(2n + 1) {
  background: none repeat scroll 0 0 #fdfdfd;
}
.invoice li div {
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ebebeb;
}
.total a {
  color: #ffffff;
  float: left;
  font-family: open sans;
  font-size: 12px;
  line-height: 10px;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

/* Order Recieved */
.order-reveived {
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #dfdfdf;
  float: left;
  margin-top: 30px;
  padding: 20px;
  width: 100%;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
.order-reveived p strong {
  color: #222222;
  font-family: Roboto;
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.order-reveived > p {
  color: #555555;
  float: left;
  font-family: open sans;
  font-size: 13px;
  margin: 0;
  padding-bottom: 15px;
  width: 100%;
}
.order-reveived > a {
  float: left;
  font-family: open sans;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25px;
  padding: 7px 10px;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
.msg {
  background: none repeat scroll 0 0 #fff;

  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
  border-radius: 34px;

  color: #333333;
  display: table;
  float: none;
  font-size: 22px;
  font-weight: lighter;
  margin: 0 auto;
  padding: 15px 51px;
  text-align: left;
  width: auto;
}

/* Members Area */
.member-area {
  float: left;
  width: 100%;
}
.member-thumb {
  float: left;
  text-align: center;
  width: 100%;
}
.member-area > h3 {
  color: #444444;
  float: left;
  font-family: Roboto;
  font-size: 18px;
  letter-spacing: 0.3px;
  margin: 14px 0 0;
  text-align: center;
  width: 100%;
}
.member-area > h3 a {
  color: #444444;
}
.member-area > h6 {
  color: #666666;
  float: left;
  font-family: Lato;
  font-size: 11px;
  letter-spacing: 0.3px;
  margin-top: 8px;
  text-align: center;
  width: 100%;
}
.member-area > span {
  -webkit-border-radius: 21px;
  -moz-border-radius: 21px;
  -ms-border-radius: 21px;
  -o-border-radius: 21px;
  border-radius: 21px;

  color: #fff;
  display: table;
  float: none;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  margin: 0 auto;
  padding: 7px 16px;
}
.member-area > span i {
  margin-right: 9px;
}
.member-area > ul {
  float: left;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.member-area > ul > li {
  float: left;
  margin-top: 20px;
  width: 50%;
}
.member-area > ul > li a {
  color: #777777;
  float: left;
  font-family: roboto;
  font-size: 12px;
  letter-spacing: 0.3px;
  width: 100%;
}
.member-area > ul > li a i {
  margin-right: 7px;
}

/* Services */
.service {
  float: left;
  width: 100%;
}
.service > span {
  float: left;
  font-size: 65px;
  margin-bottom: 20px;
  margin-top: 20px;
  width: 100%;
}
.service > h3 {
  float: left;
  font-family: Roboto;
  font-size: 18px;
  margin: 0 0 11px;
  width: 100%;
}
.service > p {
  margin-bottom: 20px;
}

/* About uS */
.about-us {
  float: left;
  width: 100%;
}

/* Award */
.award {
  border: 3px solid #efefef;
  float: left;
  width: 100%;
}
.award > a {
  float: left;
  width: 100%;
}

/* Comming Soon */
.block {
  float: left;
  padding: 70px 0;
  position: relative;
  width: 100%;
}
/* Black Layer */
.black:before {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.black:after {
  background-image: url("../images/dot.png");
  content: "";
  height: 100%;
  left: 0;

  opacity: 0.2;
  filter: alpha(opacity=20);

  position: absolute;
  top: 0;
  width: 100%;
}
.fixed-img {
  background-attachment: fixed !important;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.sec-bg1 {
  background: url("../images/resource/sec-bg1.jpg") no-repeat scroll 0 0 / 100%
    100% rgba(0, 0, 0, 0);
}
/* Coming Soon */
.coming-soon {
  float: left;
  position: relative;
  width: 100%;
}
.coming-soon > span {
  display: table;
  float: none;
  margin: 70px auto 0;
}
.coming-soon > h3 {
  color: #fafafa;
  float: left;
  font-family: Roboto;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.3px;
  margin: 30px 0 35px;
  text-align: center;
  width: 100%;
}
.coming-soon > h2 {
  color: #fafafa;
  float: left;
  font-family: Roboto;
  font-size: 99px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 72px;
  margin: 0;
  text-align: center;
  width: 100%;
  margin-bottom: 60px;
}
.coming-soon > h2 > i {
  font-style: normal;
  font-weight: 100;
}

/* Counter Style 1 */
.style1 {
  display: table;
  float: none;
  margin: 0 auto 40px;
  padding: 0;
}
.style1 > li {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.15);
  border: 5px solid rgba(255, 255, 255, 0.1);

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  float: left;
  height: 135px;
  list-style: none outside none;
  margin: 0 10px;
  text-align: center;
  width: 135px;
  padding-top: 14px;
}
.coming-soon .social-btns {
  float: left;
  margin: 0;
  text-align: center;
  width: 100%;
}
.coming-soon .social-btns > li {
  display: inline-flex;
  float: none;
}
.style1 > li > span {
  color: #ffffff;
  float: left;
  font-family: Roboto;
  font-size: 38px;
  margin-top: 23px;
  width: 100%;
}
.style1 > li > p {
  color: #a7a7a7;
  float: left;
  font-family: open sans;
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 12px;
  margin: 20px 0 0;
  text-transform: uppercase;
  width: 100%;
}
#counter-sec .container {
  position: relative;
  z-index: 9999999;
}

/* Search */
.search-form {
  border-bottom: 1px solid #e8ecec;
  float: left;
}
.search-form > form {
  float: left;
  height: 31px;
  margin: 0;
  padding-right: 50px;
  position: relative;
  width: 100%;
}
.search-form > form > button {
  border: medium none;
  color: #fff;
  font-size: 15px;
  height: 31px;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}
.search-form > form input {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;

  float: left;
  font-family: Roboto;
  height: 31px;
  letter-spacing: 0.3px;
  padding: 0 15px;
  width: 100%;
}

#wrapper {
  float: left;
  width: 100%;
}
#keywords {
  float: left;
  width: 100%;
}
#keywords thead {
  background: none repeat scroll 0 0 #e8ecec;
  cursor: pointer;
}
#keywords thead tr th {
  font-family: Roboto;
  font-weight: bold;
  letter-spacing: 0.4px;
  padding: 12px 30px 12px 42px;
}
#keywords thead tr th span {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
}
#keywords thead tr th.headerSortUp,
#keywords thead tr th.headerSortDown {
  background: none repeat scroll 0 0 #999999;
  color: #ffffff;
}
#keywords thead tr th.headerSortUp span {
  background-image: url("../images/up-arrow.png");
}
#keywords thead tr th.headerSortDown span {
  background-image: url("../images/down-arrow.png");
}
#keywords tbody tr {
  border-bottom: 1px solid #e8ecec;
  color: #555;
}
#keywords tbody tr td {
  color: #333333;
  font-family: Roboto;
  letter-spacing: 0.3px;
  padding: 15px 10px;
  text-align: center;
}

#keywords tbody tr td.lalign {
  text-align: left;
}

/* Notification area will be top right but feel free to modify it below. */
#rtnotify-notification {
  display: block;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 999999999999999999999;
}

/* Built in custom styling for the notifications. */
.rtnotify-title {
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 10px;
}
.rtnotify {
  float: right;
  clear: both;
  border: 3px solid transparent;
}

.rtnotify:hover {
  border: 3px solid #dddddd;
}
.rtnotify-default,
.rtnotify-success,
.rtnotify-error {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  color: #dfdfdf !important;
  font-family: Lato;
  font-size: 13px;
  padding: 10px;
}
.rtnotify-default {
  background: #000000;
  color: #dddddd;
}
.rtnotify-success {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
}
.rtnotify-error {
  background: #b94a48;
  color: #f2dede;
}

/* Close button attributes -- based off Twitter Bootstrap alert close item. */
.rtnotify-close {
  display: block;
  position: relative;
  top: -2px;
  right: 0px;
  color: #ffffff;
  float: right;
  font-size: 18px;
  font-weight: bold;
  filter: alpha(opacity=20);
  text-decoration: none;
  line-height: 14px;
  margin-left: 5px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.rtnotify-close:hover {
  color: #bbbbbb;
  cursor: pointer;
}

/* Portfolio */
#Grid:after {
  content: "";
  display: inline-block;
  width: 100%;
}

#Grid .mix {
  display: none;
  opacity: 0;
}

#Grid .gap {
  display: inline-block;
}
.controls.portfolio-nav {
  float: left;
  text-align: center;
  width: 100%;
}
.controls.portfolio-nav > ul {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}
.controls.portfolio-nav > ul > li {
  color: #888;
  cursor: pointer;
  display: inline-flex;
  margin: 0 10px;
  padding-bottom: 12px;
  position: relative;
}
.controls.portfolio-nav > ul > li:before {
  background: none repeat scroll 0 0 #333;
  bottom: 0;
  content: "";
  height: 3px;
  position: absolute;
  right: 0;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  width: 0;
}

.controls.portfolio-nav > ul > li.active:before {
  width: 46px;
}
.portfolio-sec {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}
.image-box {
  float: left;
  margin-top: 30px;
  position: relative;
  width: 100%;
}
.image-thumb {
  float: left;
  overflow: hidden;
  width: 100%;
}
.image-thumb img {
  float: left;
  width: 100%;
}
.image-title {
  bottom: 0;
  left: 0;
  padding: 20px 30px;
  position: absolute;
  width: 100%;
}
.image-title > h3 {
  color: #fff;
  float: left;
  margin: 0;
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
  width: 100%;
}
.image-title > span {
  color: #ffffff;
  float: left;
  font-family: Lato;
  font-size: 13px;
  letter-spacing: 0.3px;
  margin: 8px 0 0;
  width: 100%;
}
.controls.portfolio-nav > ul > li.active {
  color: #333333;
}
.controls.portfolio-nav > ul > li i {
  float: left;
  line-height: 18px;
  margin-right: 10px;
}
.controls.portfolio-nav > ul > li span {
  float: left;
  font-family: Lato;
  letter-spacing: 0.3px;
}

/* Calculator Widget */ /*

.calculator {
    float: left;
    width: 100%;
}
#calculator {
    float: left;
    height: auto;
    margin: 0;
    padding: 0px;
    width: 100%;
}
.top span.clear {
	float: left;
}
.top .screen {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    color: white;
    float: right;
    font-size: 17px;
    height: 36px;
    letter-spacing: 1px;
    line-height: 40px;
    padding: 0 10px;
    text-align: right;
    width: 100%;
}
.keys, .top {
    margin: 0 -5px;
    overflow: hidden;
}
.keys span {
    -moz-user-select: none;
    background: none repeat scroll 0 0 #dddddd;
    color: #333333;
    cursor: pointer;
    float: left;
    font-family: Roboto;
    height: 36px;
    line-height: 36px;
    margin: 0 7px 11px 0;
    position: relative;
    text-align: center;
    top: 0;
    
	-webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
	
    width: 100%;
}
.top span.clear {
	float: left;
	position: relative;
	top: 0;
	
	cursor: pointer;
	
	width: 100%;
	height: 36px;

	margin: 0 7px 11px 0;
	
	color: #888;
	line-height: 36px;
	text-align: center;
	
	user-select: none;
	
    
	-webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
	
}
.calculator .keys > div {
    padding: 0 5px;
}
.keys {
    float: left;
    margin: 0;
    width: 100%;
}
.keys span.operator {
	margin-right: 0;
}
.calculator .row {
    margin: 0 -5px;
}
.calculator .row > .top {
    margin: 0;
    width: 100%;
}
.calculator .row > .top > div {
    padding: 0 5px;
}
.keys span.eval {
	color: #888e5f;
}

.top span.clear {
	color: white;
}
.keys span:hover {
	color: white;
	background:#999999;
}

.keys span.eval:hover {
	background: #abb850;
	color: #ffffff;
}

.top span.clear:hover {
	background: #f68991;
	color: white;
}
*/

/* Vertical Menu */
body .wide-layout {
  left: 0 !important;
  top: 125px !important;
  width: 100% !important;
}

/* Post */
.post {
  border-bottom: 1px dashed #e7ebeb;
  float: left;
  padding-bottom: 25px;
  padding-top: 25px;
  padding-left: 90px;
  position: relative;
  width: 100%;
}
.post h2 {
  float: left;
  font-family: Lato;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 25px;
  margin: 0 0 12px;
  width: 100%;
}
.post h2 a {
  color: #333333;
}
.metas {
  float: left;
  width: 100%;
}
.metas > h6 a {
  color: red;
  font-weight: 500;
}
.post > img {
  float: left;
  margin-top: 20px;
  width: 100%;
}
.post > p {
  margin-top: 20px;
}
.post-date {
  left: 0;
  position: absolute;
  top: 25px;
  width: 70px;
}
.widget > nav {
  display: inline-flex;
  margin-top: 20px;
  width: 100%;
}
.metas > h6 {
  color: #888888;
  float: left;
  font-weight: normal;
  margin: 0 20px 0 0;
}
.post-date .date {
  background: none repeat scroll 0 0 #fff;
  border: 3px solid #e8ecec;
  float: left;
  padding: 12px 0;
  text-align: center;
  width: 100%;
}
.post-date > span {
  float: left;
  font-family: Lato;
  font-size: 11px;
  line-height: 10px;
  margin-top: 10px;
  text-align: center;
  width: 100%;
}
.post-date > span > i {
  display: inline-flex;
  margin-right: 8px;
}
.post-date .date > i {
  float: left;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.3px;
  line-height: 18px;
  text-align: center;
  width: 100%;
}
blockquote {
  float: left;
  margin-bottom: 20px;
  margin-top: 20px;
  width: 100%;
}
.author-share {
  background: none repeat scroll 0 0 #f9f9f9;
  border-top: 1px solid #f4f4f4;
  float: left;
  margin-top: 20px;
  padding: 7px;
  width: 100%;
}
.author-share .social-btns {
  margin: 0;
}
.tags {
  float: left;
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.tags > li {
  float: left;
  list-style: outside none none;
  margin-right: 10px;
}
.tags > li > i {
  color: #282828;
  float: left;
  font-size: 15px;
  line-height: 32px;
  margin-left: 14px;
}
.tags > li > a {
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #e8ecec;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.01) inset;
  -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.01) inset;
  -ms-box-shadow: 0 0 16px rgba(0, 0, 0, 0.01) inset;
  -o-box-shadow: 0 0 16px rgba(0, 0, 0, 0.01) inset;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.01) inset;

  color: #666666;
  float: left;
  font-family: Roboto;
  font-size: 12px;
  letter-spacing: 0.3px;
  line-height: 9px;
  padding: 10px;
  transition: all 0.4s ease 0s;
}
/* Comment Sec */
.comment-sec {
  float: left;
  margin-top: 30px;
  width: 100%;
}
#comment {
  float: left;
  width: 100%;
}
#comment > ul {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}
#comment > ul > li {
  float: left;
  list-style: none outside none;
  width: 100%;
}
.comment {
  float: left;
  padding-left: 117px;
  position: relative;
  width: 100%;
}
.comment-avatar {
  float: left;
  left: 0;
  position: absolute;
  top: 0;
  width: 87px;
}
.comment-avatar > span {
  float: left;
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
}
.comment-avatar > span > img {
  float: left;
  width: 100%;
}
.comment-avatar > a {
  color: #ffffff;
  display: table;
  float: none;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 10px;
  margin: 0 auto;
  padding: 5px 10px;
}
.user-comment {
  background: none repeat scroll 0 0 #fefefe;
  border: 1px solid #e1e1e1;
  float: right;
  padding: 40px;
  position: relative;
  width: 100%;
}
.user-comment > a {
  color: red;
  float: left;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.user-comment > a > i {
  color: #666666;
  font-family: Roboto;
  font-size: 11px;
  font-style: italic;
  font-weight: lighter;
  letter-spacing: 0.3px;
  margin-left: 10px;
}
.user-comment > p {
  color: #777777;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  line-height: 24px;
  margin: 10px 0 0;
  width: 100%;
}
#comment > ul > li > ul {
  float: left;
  margin: 30px 0;
  padding-left: 119px;
  width: 100%;
}
#comment > ul > li > ul > li {
  float: left;
  list-style: none outside none;
  width: 100%;
}
#comment > ul > li > ul > li > .comment > .user-comment {
  width: 100%;
}
#comment > ul > li > ul > li > ul {
  float: left;
  margin-left: 0;
  margin-top: 30px;
  padding-left: 119px;
  width: 100%;
}
#comment > ul > li > ul > li > ul > li {
  float: left;
  list-style: none outside none;
  width: 100%;
}
#comment > ul > li > ul > li > ul > li .comment > .user-comment {
  width: 100%;
}
.reply {
  background: none repeat scroll 0 0 #f9f9f9;
}

.leave-reply {
  float: left;
  margin-top: 30px;
  width: 100%;
}
.leave-reply > p {
  margin-bottom: 20px;
}
.reply:before {
  background: none repeat scroll 0 0 #f9f9f9;
  border-right: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  content: "";
  height: 10px;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: -6px;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

  width: 10px;
}
.leave-reply .input-style {
  background: none repeat scroll 0 0 #fafafa;
  border: medium none !important;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;

  color: #000000;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  letter-spacing: 0.3px;
  margin-bottom: 30px;
  padding: 13px 15px;
  width: 100%;
}
.leave-reply textarea.input-style {
  height: 140px;
}
.profile-views-widget > p {
  margin-top: 12px;
}

/* Pie CHart */ /*

.chart {
    float: left;
    height: 330px;
    position: static;
    width: 100%;
}
.pieTip {
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 18px 6px;
  background: rgba(255,255,255,.97);
  color: #444;
  font-size: 15px;
  text-shadow: 0 1px 0 #fff;
  text-transform: uppercase;
  text-align: center;
  font-family:roboto;
  line-height: 1.3;
  letter-spacing: .06em;
  
  -webkit-transform: all .3s;
     -moz-transform: all .3s;
      -ms-transform: all .3s;
       -o-transform: all .3s;
          transform: all .3s;
  pointer-events: none;
  
}
.pieTip:after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(255,255,255,.95);
      line-height: 0;
}
.chart path { cursor: pointer; }
*/

/* Doughchart */ /*
.chart1 {
    float: left;
    height: 300px;
    position: relative;
    width: 100%;
}
.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  background: rgba(0,0,0,.8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;

  pointer-events: none;
}
.doughnutTip:after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(0,0,0,.7);
      line-height: 0;
}
.doughnutSummary {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #d5d5d5;
  text-align: center;
  cursor: default;
}
.doughnutSummaryTitle {
    color: #555555;
    font-family: Roboto;
    font-size: 15px;
    letter-spacing: 0.06em;
    margin-top: 45px;
    position: absolute;
    text-shadow: none;
    top: 0;
    width: 100%;
}
.doughnutSummaryNumber {
    color: #333333;
    font-family: Roboto;
    font-size: 25px;
    margin-top: 73px;
    position: absolute;
    text-shadow: none;
    top: 0;
    width: 100%;
}
.chart path:hover { opacity: .65; }*/

/* Pattern Lock */
.pattern-lock-sec {
  background-attachment: fixed;
  background-image: url("../images/resource/pattern-bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  float: left;
  height: 100%;
  left: 0;
  padding-top: 70px;
  position: absolute;
  top: 0;
  width: 100%;
}
.show-pattern-modal {
  float: left;
  text-align: center;
  width: 100%;
}
.show-pattern-modal > button.btn {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: table;
  float: none;
  font-family: Roboto;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.3px;
  margin: 0 auto;
  padding: 9px 20px;
}
.patter-container {
  float: left;
  padding-top: 30px;
  width: 100%;
}
.pattern-logo {
  float: left;
  width: 100%;
}
.pattern-lock-sec .container {
  float: none;
  padding: 0 15px;
  width: 1170px;
}
.patt-holder {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
  display: table;
  float: none;
  margin: 0 auto 40px;
}
.patter-container span {
  color: #fff;
  float: left;
  font-family: Roboto;
  letter-spacing: 0.3px;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}
.patt-wrap {
  cursor: pointer;
  margin: 0;
  position: relative;
}
.patt-wrap ul,
.patt-wrap li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.patt-circ {
  position: relative;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.patt-circ.hovered {
  border: 3px solid #009900;
}

.patt-error .patt-circ.hovered {
  border: 3px solid #ba1b26;
}

.patt-hidden .patt-circ.hovered {
  border: 0;
}

.patt-dots {
  background: #fff;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
}
.patt-lines {
  height: 10px;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  transform-origin: 5px 5px;
  -ms-transform-origin: 5px 5px; /* IE 9 */
  -webkit-transform-origin: 5px 5px;
}

.patt-hidden .patt-lines {
  display: none;
}

/* Clock */
.clock {
  bottom: 50px;
  color: #fff;
  padding: 0;
  position: absolute;
  right: 50px;
  width: auto;
}
.clock #Date {
  font-family: Roboto;
  font-size: 20px;
  letter-spacing: 0.3px;
  margin-bottom: 30px;
  text-align: right;
}
.clock ul {
  float: right;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  text-align: right;
  width: auto;
}
.clock ul li {
  display: inline;
  font-family: Roboto;
  font-size: 60px;
  font-weight: 900;
}

.clock .point {
  -webkit-animation: 1s ease 0s normal none infinite mymove;
  -moz-animation: 1s ease 0s normal none infinite mymove;
  -ms-animation: 1s ease 0s normal none infinite mymove;
  -o-animation: 1s ease 0s normal none infinite mymove;
  animation: 1s ease 0s normal none infinite mymove;

  padding: 0 2px;
  position: relative;
}

@-webkit-keyframes mymove {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes mymove {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Responsive Header */
.responsive-header {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95);
  float: left;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 100000;
  padding-bottom: 20px;
  display: none;

  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  -ms-border-radius: 0 0 3px 0;
  -o-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
}
.responsive-logo {
  display: table;
  margin: 0 auto;
  padding: 15px 0;
  text-align: center;
}
.responsive-logo a {
  float: left;
  width: 100%;
  color: #7f7f7f;
}
.responsive-logo a img {
  float: left;
  height: auto;
}
.responsive-logo a h1 {
  float: left;
  font-family: open sans;
  font-size: 22px;
  font-weight: 500;
  line-height: 40px;
  margin-left: 20px;
}
.responsive-header > span {
  background: none repeat scroll 0 0 #f5f5f5;
  color: #bfbfbf;
  cursor: pointer;
  float: left;
  font-size: 19px;
  margin-left: 10%;
  padding: 11px 10px;
  text-align: center;
  width: 80%;
}
.responsive-header > ul li a i {
  margin-right: 10px;
}
.responsive-header > ul li a span i {
  display: inline-flex;
  font-size: 11px;
  font-style: normal;
  line-height: 7px;
  margin: 0 0 0 10px;
  padding: 5px;
}
.ui-helper-hidden-accessible {
  display: none;
}
.responsive-header > ul {
  background: none repeat scroll 0 0 rgba(240, 240, 240, 0.8);
  border-top: 1px solid #f7f7f7;
  float: left;
  margin-left: 10%;
  padding: 10px;
  display: none;
  position: relative;
  width: 80%;

  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -ms-border-radius: 0 0 3px 3px;
  -o-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}
.responsive-header ul {
  list-style: none;
}
.responsive-header > ul li {
  float: left;
  width: 100%;
}
.responsive-header > ul li a {
  border-bottom: 1px solid #e7e7e7;
  border-top: 1px solid #f7f7f7;
  color: #919191;
  float: left;
  font-family: roboto;
  font-size: 13px;
  letter-spacing: 0.2px;
  line-height: 12px;
  overflow: hidden;
  padding: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;

  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -ms-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.responsive-header > ul li:hover > a,
.responsive-header > ul li.opened > a {
  color: #2f8cff;
}
.responsive-header > ul li:first-child > a {
  border-top: 0;
}
.responsive-header > ul li:last-child > a {
  border-bottom: 0;
}
.responsive-header > ul ul {
  padding-left: 20px;
  border-bottom: 1px solid #e7e7e7;
  float: left;
  width: 100%;
  display: none;
}

/* Horizontal Menu */
.horizontal-menu {
  background: none repeat scroll 0 0 #fafafa;
  float: left;
  width: 100%;
}
.horizontal-menu > ul {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #ffffff;
}
.horizontal-menu > ul > li:hover > a {
  background: none repeat scroll 0 0 #fff;
}
.horizontal-menu > ul > li > ul > li {
  background: none repeat scroll 0 0 #fff;
  border-bottom: 1px solid #e8ecec;
  float: left;
  width: 100%;
}
.horizontal-menu > ul > li > ul {
  -webkit-box-shadow: 0 14px 16px rgba(0, 0, 0, 0.02);
  -moz-box-shadow: 0 14px 16px rgba(0, 0, 0, 0.02);
  -ms-box-shadow: 0 14px 16px rgba(0, 0, 0, 0.02);
  -o-box-shadow: 0 14px 16px rgba(0, 0, 0, 0.02);
  box-shadow: 0 14px 16px rgba(0, 0, 0, 0.02);

  left: 50%;
  list-style: none outside none;
  margin: 0 0 0 -115px;
  padding: 0;
  position: absolute;
  top: 100%;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 230px;
  z-index: 99;
}
.horizontal-menu > ul > li > ul > li:last-child {
  border: medium none;
}
.horizontal-menu > ul > li {
  float: left;
  position: relative;
}
.horizontal-menu > ul > li > a {
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #ffffff;
  color: #515151;
  float: left;
  font-family: Roboto;
  font-weight: normal;
  letter-spacing: 0.3px;
  padding: 20px;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.horizontal-menu > ul > li > ul {
  -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.02);
  -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.02);
  -ms-box-shadow: 0 0 16px rgba(0, 0, 0, 0.02);
  -o-box-shadow: 0 0 16px rgba(0, 0, 0, 0.02);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.02);

  left: 50%;
  list-style: none outside none;
  margin: 0 0 0 -115px;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 100%;

  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 230px;
  z-index: 99;
}
.horizontal-menu > ul > li:hover > ul {
  opacity: 1;

  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.horizontal-menu > ul > li > ul > li > a {
  color: #595959;
  float: left;
  font-family: Roboto;
  font-size: 13px;
  padding: 10px;
  text-align: center;

  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;

  width: 100%;
}
.horizontal-menu > ul > li > ul > li > a:hover {
  background: none repeat scroll 0 0 #fafafa;
}

.menu ul li > ul.register li a {
  padding: 2px 10px;
  vertical-align: middle;
  display: inline-block;
}
.menu ul li > ul.register li a:first-child {
  padding: 2px 30px;
}
.menu ul li > ul.register li a:before {
  background: none;
}
.menu ul li > ul.register li a:first-child:before {
  background: url(../images/arrow.png);
  content: "";
  height: 10px;
  left: 15px;
  margin-top: -3px;
  position: absolute;
  top: 43%;
  width: 9px;
  background-size: 100% 100%;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

/******************** Color *********************/
/********** purple ************/
.purple,
.menu ul li:hover > a,
.support-ticket .new,
.toggle-switch span:before,
.actionBar > a.buttonFinish,
.error-sec ul > li:before {
  /*background: -moz-linear-gradient(top,  #8a7aff 0%, #715eff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#715eff), color-stop(100%,#f9f9f9));
	background: -webkit-linear-gradient(top,  #8a7aff 0%,#715eff 100%);
	background: -o-linear-gradient(top,  #8a7aff 0%,#715eff 100%);
	background: -ms-linear-gradient(top,  #8a7aff 0%,#715eff 100%);
	background: linear-gradient(to bottom,  #8a7aff 0%,#715eff 100%);*/

  color: #fff;
}

/********** Red *************/
.red,
.support-ticket .removed,
.edit-remove > li > .remove,
.friend-list li > span.offline:before {
  /* background: -moz-linear-gradient(top,  #ff5959 0%, #ff3b3b 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3b3b), color-stop(100%,#f9f9f9));
	background: -webkit-linear-gradient(top,  #ff5959 0%,#ff3b3b 100%);
	background: -o-linear-gradient(top,  #ff5959 0%,#ff3b3b 100%);
	background: -ms-linear-gradient(top,  #ff5959 0%,#ff3b3b 100%);
	background: linear-gradient(to bottom,  #ff5959 0%,#ff3b3b 100%); */
  background-color: #e05b49;
  color: #fff;
}

/********** Green *************/
.green,
.support-ticket .done,
.edit-remove > li > .edit,
.toggle-switch *:checked + span:before,
.friend-list li > span.online:before {
  background: -moz-linear-gradient(top, #0fce33 0%, #07bf29 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #07bf29),
    color-stop(100%, #f9f9f9)
  );
  background: -webkit-linear-gradient(top, #0fce33 0%, #07bf29 100%);
  background: -o-linear-gradient(top, #0fce33 0%, #07bf29 100%);
  background: -ms-linear-gradient(top, #0fce33 0%, #07bf29 100%);
  background: linear-gradient(to bottom, #0fce33 0%, #07bf29 100%);

  color: #fff;
}

/********** Gray *************/
.gray,
.actionBar > a.buttonNext,
.actionBar > a.buttonPrevious {
  background: -moz-linear-gradient(top, #404040 0%, #545454 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #545454),
    color-stop(100%, #f9f9f9)
  );
  background: -webkit-linear-gradient(top, #404040 0%, #545454 100%);
  background: -o-linear-gradient(top, #404040 0%, #545454 100%);
  background: -ms-linear-gradient(top, #404040 0%, #545454 100%);
  background: linear-gradient(to bottom, #404040 0%, #545454 100%);

  color: #fff;
}

.color p {
  color: #fafafa;
}
.color h1,
.color h2,
.color h3,
.color h4,
.color h5,
.color h6 {
  color: #ffffff;
}

/******************** Get report *********************/

/******************** Pagination *********************/
.nav-pagination {
  display: inline-block;
  width: 100%;
  text-align: right;
  padding: 10px 24px 22px !important;
  font-size: 15px;
}

.page-item .page-link.disabled {
  color: #636c72;
  pointer-events: none;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
.page-item .page-link.active {
  z-index: 2;
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}
.pagination {
  -webkit-box-pack: end !important;
  -webkit-justify-content: flex-end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}
/******************** Pagination *********************/

.panel.work-progress-table div label,
.panel.work-progress-table div input,
.panel.work-progress-table div button,
.panel.work-progress-table div select,
.panel.work-progress-table div textarea {
  font-size: 12px;
  margin: 0 0 2px 0;
}
.panel.work-progress-table div span {
  font-size: 13px;
}
.work-progress-table.work-content .stepContainer .table {
  margin-bottom: 10px;
}

.fieldset-multiselect .SumoSelect {
  display: block;
  margin-top: 1px;
}

.fieldset-multiselect .SumoSelect > .CaptionCont {
  width: 100%;
  height: 42px;
  background: none;
  border: none;
}

.inline-form > label {
  z-index: 9;
}
.date-field-1{
	margin:8px
}
.sub-heading-3 {
  font-size: 15px;
  padding: 0 15px;

}
.sub-heading-2 {
  font-size: 13px;

}
.addpatient-tbl
{border: 1px solid #dddddd;
  box-shadow: rgb(0 0 0 / 5%) 0px 2px 6px -1px, rgb(0 0 0 / 11%) 0px 2px 4px -1px;
}
.addpatient-tbl .checkbox label{
  margin-right: 21px;
}
.table  input [type="datetime"],.table  input[type="date"] , .table input[type="text"], .table  input[type="password"], .table  input[type="number"], .table  input[type="email"], .table  input[type="search"],.table  input[type="tel"]{

  padding: -6px;

  width: 142px;

  color: #80808080;
}

 .tb-tbl input[type="text"], .tb-tbl  input[type="password"], .tb-tbl  input[type="number"], .tb-tbl  input[type="email"], .tb-tbl  input[type="search"],.tb-tbl input[type="tel"]{

  width: 85px;

  color: #80808080;
}

.tb-tbl input[type="date"]{
  width: 143px;
}
.dst-option{
  margin: 10px 16px;
  font-size: 14px;
  padding: 0 18px;
}

.dst-labels {
  font-size: 13px;
  font-weight: 400;
}


.tbl-input {
  background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
    width: 221px;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    padding: 0px 15px;
    border-radius: 5px;
}