/*********************************
 METRONIC SQUARE STYLE COMPONENTS 
*********************************/

/***
General reset
***/

/*
 Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't 
 properly apply the media queries in Bootstrap's CSS. To address this, 
 you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.
*/
@-webkit-viewport {
  width: device-width; }

@-moz-viewport {
  width: device-width; }

@-ms-viewport {
  width: device-width; }

@-o-viewport {
  width: device-width; }

@viewport {
  width: device-width; }

/*
 Internet Explorer 10 doesn't differentiate device width from viewport width, 
 and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, following CSS code applied 
*/
@-ms-viewport {
  width: auto !important; }

.md-shadow-z-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); }

.md-shadow-z-1-i {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18) !important; }

.md-shadow-z-1-hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.22); }

.md-shadow-z-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.22); }

.md-shadow-z-2-i {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.22) !important; }

.md-shadow-z-2-hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.26); }

.md-shadow-z-3 {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), 0 6px 6px rgba(0, 0, 0, 0.23); }

.md-shadow-z-3-i {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), 0 6px 6px rgba(0, 0, 0, 0.24) !important; }

.md-shadow-z-3-hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), 0 6px 6px rgba(0, 0, 0, 0.26); }

.md-shadow-z-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26), 0 10px 10px rgba(0, 0, 0, 0.22); }

.md-shadow-z-4-i {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26), 0 10px 10px rgba(0, 0, 0, 0.22) !important; }

.md-shadow-z-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.28), 0 15px 12px rgba(0, 0, 0, 0.22); }

.md-shadow-z-5-i {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.28), 0 15px 12px rgba(0, 0, 0, 0.22) !important; }

.md-shadow-none {
  box-shadow: none !important; }

.md-click-circle {
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: scale(0);
  -moz-transform: scale(0);
  transform: scale(0); }
  .md-click-circle.md-click-animate {
    -webkit-animation: mdClickEffect 0.65s linear;
    -moz-animation: mdClickEffect 0.65s linear;
    animation: mdClickEffect 0.65s linear; }

@-webkit-keyframes mdClickEffect {
  0% {
    opacity: 1;
    -webkit-transform: scale(0); }
  100% {
    opacity: 0 !important;
    -webkit-transform: scale(2.5); } }

@-moz-keyframes mdClickEffect {
  0% {
    opacity: 1;
    -webkit-transform: scale(0); }
  100% {
    opacity: 0 !important;
    -moz-transform: scale(2.5); } }

@keyframes mdClickEffect {
  0% {
    opacity: 1;
    -webkit-transform: scale(0); }
  100% {
    opacity: 0 !important;
    transform: scale(2.5); } }

/***
General typography
***/
/* Links */
a:hover {
  cursor: pointer; }

/* Primary Link */
.primary-link {
  color: #65A0D0;
  font-weight: 600; }
  .primary-link:hover {
    color: #5194ca; }

p {
  margin: 20px 0; }

label {
  font-weight: normal; }

/* Headings */
h1 {
  font-size: 36px; }

h2 {
  font-size: 30px; }

h3 {
  font-size: 24px; }

h4 {
  font-size: 18px; }

h5 {
  font-size: 14px; }

h6 {
  font-size: 12px; }

/* Headings helper text */
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  color: #444444; }

/* Block headings */
h1.block,
h2.block,
h3.block,
h4.block,
h5.block,
h6.block {
  padding-top: 10px;
  padding-bottom: 10px; }

/* Horizontal break */
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eee;
  border-bottom: 0; }

/* Unstyled List */
.list-unstyled li > .list-unstyled {
  margin-left: 25px; }

/* Code */
code {
  border: 1px solid #e1e1e1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }

/* Disabled Navigation Link */
.disabled-link.disable-target,
.disabled-link .disable-target {
  opacity: 0.6 !important;
  filter: alpha(opacity=60) !important; }
  .disabled-link.disable-target:hover,
  .disabled-link .disable-target:hover {
    cursor: not-allowed !important; }

.disabled-link:hover {
  cursor: not-allowed !important; }

/***
Utilities
***/
/* Rounded Element */
.rounded-2 {
  border-radius: 2px !important; }

.rounded-3 {
  border-radius: 3px !important; }

.rounded-4 {
  border-radius: 4px !important; }

/* Circle Element */
.circle {
  border-radius: 25px !important; }

.circle-right {
  border-radius: 0 25px 25px 0 !important; }

.circle-left {
  border-radius: 25px 0 0 25px !important; }

.circle-bottom {
  border-radius: 0 0 25px 25px !important; }

.circle-top {
  border-radius: 25px 25px 0 0 !important; }

.rounded {
  border-radius: 50% !important; }

/* General utilities */
.display-none,
.display-hide {
  display: none; }

.hidden {
  display: none !important; }

.primary-font {
  font-family: "Open Sans", sans-serif !important; }

.bold {
  font-weight: 700 !important; }
  .bold.btn {
    letter-spacing: 0; }

.sbold {
  font-weight: 600 !important; }
  .sbold.btn {
    letter-spacing: 0; }

.thin {
  font-weight: 300 !important; }

.uppercase {
  text-transform: uppercase !important; }

.fix-margin {
  margin-left: 0px !important; }

.border {
  border: 1px solid red; }

.font-hg {
  font-size: 23px; }

.font-lg {
  font-size: 18px; }

.font-md {
  font-size: 14px; }

.font-sm {
  font-size: 13px; }

.font-xs {
  font-size: 11px; }

.inline {
  display: inline; }

.inline-block {
  display: inline-block; }

.text-align-reverse {
  text-align: right; }

/* Margin and padding utilities */
.no-space {
  margin: 0px !important;
  padding: 0px !important; }

.no-margin {
  margin: 0; }

.margin-bottom-5 {
  margin-bottom: 5px; }

.margin-bottom-10 {
  margin-bottom: 10px !important; }

.margin-top-10 {
  margin-top: 10px !important; }

.margin-top-15 {
  margin-top: 15px !important; }

.margin-bottom-15 {
  margin-bottom: 15px !important; }

.margin-bottom-20 {
  margin-bottom: 20px !important; }

.margin-top-20 {
  margin-top: 20px !important; }

.margin-top-30 {
  margin-top: 30px !important; }

.margin-top-40 {
  margin-top: 40px !important; }

.margin-bottom-25 {
  margin-bottom: 25px !important; }

.margin-bottom-30 {
  margin-bottom: 30px !important; }

.margin-bottom-40 {
  margin-bottom: 40px !important; }

.margin-right-10 {
  margin-right: 10px !important; }

/* IE8 & IE9 mode utilities */
.visible-ie8 {
  display: none; }

.ie8 .visible-ie8 {
  display: inherit !important; }

.visible-ie9 {
  display: none; }

.ie9 .visible-ie9 {
  display: inherit !important; }

.hidden-ie8 {
  display: inherit; }

.ie8 .hidden-ie8 {
  display: none !important; }

.hidden-ie9 {
  display: inherit; }

.ie9 .hidden-ie9 {
  display: none !important; }

/***
Responsive Utils
***/
@media (max-width: 1024px) {
  .hidden-1024 {
    display: none; } }

@media (max-width: 480px) {
  .hidden-480 {
    display: none; } }

@media (max-width: 320px) {
  .hidden-320 {
    display: none; } }


/***
Fontawesome Icons
***/
[class^="fa-"]:not(.fa-stack),
[class^="glyphicon-"],
[class^="icon-"],
[class*=" fa-"]:not(.fa-stack),
[class*=" glyphicon-"],
[class*=" icon-"] {
  display: inline-block;
  *margin-right: .3em;
  -webkit-font-smoothing: antialiased; }

/* Make font awesome icons fixed width */
li [class^="fa-"],
li [class^="glyphicon-"],
li [class^="icon-"],
li [class*=" fa-"],
li [class*=" glyphicon-"],
li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center; }

li [class^="glyphicon-"],
li [class*=" glyphicon-"] {
  top: 2px; }

li [class^="icon-"],
li [class*=" icon-"] {
  top: 1px;
  position: relative; }

li [class^="fa-"].icon-large,
li [class^="glyphicon-"].icon-large,
li [class^="icon-"].icon-large,
li [class*=" fa-"].icon-large,
li [class*=" glyphicon-"].icon-large,
li [class*=" icon-"].icon-large {
  /* increased font size for icon-large */
  width: 1.5625em; }

/* Icon states */
.icon-state-default {
  color: #bac3d0; }

.icon-state-success {
  color: #36c6d3; }

.icon-state-info {
  color: #659be0; }

.icon-state-warning {
  color: #F1C40F; }

.icon-state-danger {
  color: #ed6b75; }


/***
Custom Bootstrap Badges
***/

  .badge.badge-roundless {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important; }
  .badge.badge-empty {
    display: inline-block;
    padding: 0;
    min-width: 8px;
    height: 8px;
    width: 8px; }

/* Badge variants */
.badge-default {
  background-image: none; }

.badge-primary {
  background-color: #337ab7;
  background-image: none; }

.badge-info {
  background-color: #659be0;
  background-image: none; }

.badge-success {
  background-color: #36c6d3;
  background-image: none; }

.badge-danger {
  background-color: #ed6b75;
  background-image: none; }

.badge-warning {
  background-color: #F1C40F;
  background-image: none; }

/* Fix badge position for navs */
.nav.nav-pills > li > a > .badge,
.nav.nav-stacked > li > a > .badge {
  margin-top: -2px; }

/***
Dropdown Menu Badges
***/
.dropdown-menu > li > a > .badge {
  position: absolute;
  margin-top: 1px;
  right: 3px;
  display: inline; }

.dropdown-menu.badge-roundless {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important; }

.nav.pull-right > li > .dropdown-menu,
.nav > li > .dropdown-menu.pull-right {
  right: 0;
  left: auto; }
  .nav.pull-right > li > .dropdown-menu:before,
  .nav > li > .dropdown-menu.pull-right:before {
    right: 12px;
    left: auto; }
  .nav.pull-right > li > .dropdown-menu:after,
  .nav > li > .dropdown-menu.pull-right:after {
    right: 13px;
    left: auto; }
  .nav.pull-right > li > .dropdown-menu .dropdown-menu,
  .nav > li > .dropdown-menu.pull-right .dropdown-menu {
    right: 100%;
    left: auto;
    margin-right: -1px;
    margin-left: 0; }

@media (max-width: 767px) {
  /* 767px */
  .navbar-nav .open .dropdown-menu {
    position: absolute;
    float: left;
    width: auto;
    margin-top: 0;
    background-color: #ffffff;
    border: 1px solid #efefef;
    box-shadow: 5px 5px rgba(102, 102, 102, 0.1); }
    .navbar-nav .open .dropdown-menu > li > a {
      padding: 6px 0 6px 13px;
      color: #333; }
    .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-nav .open .dropdown-menu > li > a:active {
      background-color: #eee; } }

/***
Customized Bootstrap Labels
***/
.label {
  text-shadow: none !important;
  font-size: 14px;
  font-weight: 300;
  padding: 3px 6px 3px 6px;
  color: #fff;
  font-family: "Open Sans", sans-serif; }
  .label.label-sm {
    font-size: 13px;
    padding: 2px 5px 2px 5px; }
  h1 .label,
  h2 .label,
  h3 .label,
  h4 .label,
  h5 .label,
  h6 .label {
    font-size: 75%; }

/* Labels variants */
.label-default {
  background-color: #bac3d0; }
  .label-default[href]:hover,
  .label-default[href]:focus {
    background-color: #9ca8bb; }

.label-primary {
  background-color: #337ab7; }
  .label-primary[href]:hover,
  .label-primary[href]:focus {
    background-color: #286090; }

.label-success {
  background-color: #36c6d3; }
  .label-success[href]:hover,
  .label-success[href]:focus {
    background-color: #27a4b0; }

.label-info {
  background-color: #659be0; }
  .label-info[href]:hover,
  .label-info[href]:focus {
    background-color: #3a80d7; }

.label-warning {
  background-color: #F1C40F; }
  .label-warning[href]:hover,
  .label-warning[href]:focus {
    background-color: #c29d0b; }

.label-danger {
  background-color: #ed6b75; }
  .label-danger[href]:hover,
  .label-danger[href]:focus {
    background-color: #e73d4a; }

/***
Iconic labels
***/
.label.label-icon {
  padding: 4px 0px 4px 4px;
  margin-right: 2px;
  text-align: center !important; }
  .label.label-icon > i {
    font-size: 12px;
    text-align: center !important; }
  .ie8 .label.label-icon,
  .ie9 .label.label-icon {
    padding: 3px 0px 3px 3px; }
.close {
	display: inline-block;
	margin-top: 0;
	margin-right: 0;
	width: 9px;
	height: 9px;
	background-repeat: no-repeat!important;
	text-indent: -10000px;
	outline: 0;
	background-image: url(../img/remove-icon-small.png)!important
}