.skin-red
.skin-purple
.skin-blue
.skin-black
.skin-orange
.skin-yellow
.skin-green
.skin-red-dark
.skin-purple-dark
.skin-blue-dark
.skin-black-dark
.skin-orange-dark
.skin-yellow-dark
.skin-green-dark
.skin-contrast
.main-header

.logo {
  background-color: inherit;
}
.main-header .logo {
  width: 100% !important;
  white-space: nowrap;
  text-align: left;
  display: block;
  clear: both;
  &a:link, a:hover, a:visited   {
    color: #fff
  }
}
.huge {
  font-size: 40px;
}

.btn-file {
  position: relative;
  overflow: hidden;
}

.dropdown-menu>li>a {
  color: #354044;
}


#sort tr.cansort {
  border-radius: 2px;
  padding: 10px;
  background: #f4f4f4;
  margin-bottom: 3px;
  border-left: 2px solid #e6e7e8;
  color: #444;
  cursor: move;
}

.user-image-inline {
  float: left;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 10px;
}

.input-group .input-group-addon {
  background-color: #f4f4f4;
}

a.accordion-header {
  color: #333;
}

.dynamic-form-row {
  padding: 10px;
  margin: 20px;
}


.handle {
  padding-left: 10px;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
.main-footer {
  font-size: 13px;
}
.main-header {
  max-height: 150px;
}


.navbar-nav>.user-menu>.dropdown-menu {
  width: inherit;
}
.main-header .logo {
  padding: 0px 5px 0px 15px;
}


.sidebar-toggle {
  margin-left: -48px;
  z-index: 100;
  background-color: inherit;
}

.sidebar-toggle-mobile {
  z-index: 100;
  width: 50px;
  padding-top: 10px;
}

.skin-red
.skin-purple
.skin-blue
.skin-black
.skin-orange
.skin-yellow
.skin-green
.skin-red-dark
.skin-purple-dark
.skin-blue-dark
.skin-black-dark
.skin-orange-dark
.skin-yellow-dark
.skin-green-dark
.skin-contrast
.main-header
.navbar
.dropdown-menu li a {
  //color: inherit;
}

.main-header .sidebar-toggle:before {
  content: "\f0c9";
  font-weight: 900;
  font-family: 'Font Awesome\ 5 Free';
}

.direct-chat-contacts {
  padding: 10px;
  height: 150px;
}


.select2-container {
  width: 100%;
}
.error input {
  color: #a94442;
  border: 2px solid #a94442 !important;
}

.error label, .alert-msg {
  color: #a94442;
  display: block;
}

.input-group[class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}
.control-label.multiline {
  padding-top: 10px;
}

.btn-outline {
  color: inherit;
  background-color: transparent;
  transition: all .5s;
}

.btn-primary.btn-outline {
  color: #428bca;
}

.btn-success.btn-outline {
  color: #5cb85c;
}

.btn-info.btn-outline {
  color: #5bc0de;
}

.btn-warning.btn-outline {
  color: #f0ad4e;
}

.btn-danger.btn-outline, a.link-danger:link, a.link-danger:visited, a.link-danger:hover {
  color: #dd4b39;
}

.btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover {
  color: #fff;
}

.slideout-menu {
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 100%;
  background: #333;
  z-index: 100;
  margin-top: 100px;
  color: white;
  padding: 10px;
}
.slideout-menu h3 {
  position: relative;
  padding: 5px 5px;
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
  border-bottom: 4px solid #222;
}
.slideout-menu .slideout-menu-toggle {
  position: absolute;
  top: 12px;
  right: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  background: #222;
  color: #999;
  text-decoration: none;
  vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}
.slideout-menu ul {
  list-style: none;
  font-weight: 300;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
  border-top: 1px solid #454545;
  border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
  text-decoration: none;
}
.slideout-menu ul li a:hover {
  background: #000;
  color: #fff;
}
.slideout-menu ul li a i {
  position: absolute;
  top: 15px;
  right: 10px;
  opacity: .5;
}

.btn-box-tool-lg {
  font-size: 16px;
  color: orange;
}



.bs-wizard {margin-top: 20px;}

/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/

.left-navblock {
  display: inline-block;
  float: left;
  text-align: left;
  color: white;
  padding: 0px;
  /* adjust based on your layout */

}
.skin-red
.skin-purple
.skin-blue
.skin-black
.skin-orange
.skin-yellow
.skin-green
.skin-red-dark
.skin-purple-dark
.skin-blue-dark
.skin-black-dark
.skin-orange-dark
.skin-yellow-dark
.skin-green-dark
.skin-contrast
.main-header
.navbar
.dropdown-menu li a {
  color: #333;
}

a.logo.no-hover a:hover {
  background-color: transparent;
}


.required {
  border-right: 6px solid orange;
}

body {
  font-family: -apple-system, BlinkMacSystemFont,
  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
  "Fira Sans", "Droid Sans", "Helvetica Neue",
  sans-serif;
  font-size: 13px;
}

.sidebar-menu {
  font-size: 14px;
  white-space: normal;
}

@media print {
  a[href]:after {
    content: none;
  }

  .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

img.navbar-brand-img, .navbar-brand>img {
  float: left;
  padding: 5px 5px 5px 0;
  max-height: 50px;
}

.input-daterange {
  border-radius: 0px;
}

.btn.bg-maroon, .btn.bg-purple{
  min-width:90px;
}

[hidden] {
  display: none !important;
}

#toolbar {
  margin-top: 10px;
}

#uploadPreview {
  border-color: grey;
  border-width: 1px;
  border-style: solid
}

.icon-med {
  font-size: 20px;
  color: #889195;
}

#login-logo {
  padding-top: 20px;
  padding-bottom: 10px;
  max-width: 200px
}

// accessibility skip link
a.skip-main {
  left:-999px;
  position:absolute;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
  color: #fff;
  background-color:#000;
  left: auto;
  top: auto;
  width: 30%;
  height: auto;
  overflow:auto;
  margin: 10px 35%;
  padding:5px;
  border-radius: 15px;
  border:4px solid yellow;
  text-align:center;
  font-size:1.2em;
  z-index:999;
}

h2 {
  font-size: 22px;
}

h2.task_menu {
  font-size: 14px;
}

h2 small {
  font-size: 85%;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 16px;
}


.row-striped {
  vertical-align: top;
  line-height: 2.6;
  padding: 0px;
  margin-left: 20px;
  box-sizing: border-box;
  //border-left: 1px solid #dddddd;
  //border-right: 1px solid #dddddd;
  display: table;

}

.row-striped .row:nth-of-type(odd) div {
  background-color: #f9f9f9;
  border-top: 1px solid #dddddd;
  display: table-cell;

}

.row-striped .row:nth-of-type(even) div {
  background: #FFFFFF;
  border-top: 1px solid #dddddd;
  display: table-cell;
}


.row-new-striped {
  vertical-align: top;
  line-height: 2.6;
  padding: 0px;
  margin-left: 20px;
  display: table;
  width: 100%;
  padding-right: 20px;
}

/**
*  NEW STRIPING
*  This section is for the new row striping for nicer 
* display for non-table data as of v6
**/
.row-new-striped  > .row:nth-of-type(even) {
  background: #FFFFFF;
  border-top: 1px solid #dddddd;
  display: table-row;
  
}

.row-new-striped > .row:nth-of-type(odd)  {
  background-color: #F8F8F8;
  border-top: 1px solid #dddddd;
  display: table-row;
  
}

.row-new-striped div {
  display: table-cell;
  border-top: 1px solid #dddddd;
}

.row-new-striped div {
  display: table-cell;
  border-top: 1px solid #dddddd;
}


.row-new-striped div[class^="col"]:first-child {
  font-weight: bold;
}



/**
* This just adds a little extra padding on mobile
**/
@media only screen and (max-width: 520px) {
  h1.pagetitle {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .firstnav {
    padding-top: 120px !important;
  }

  .product {
    width: 400px;
  }

  .product img {
    min-width: 400px;
  }
}

.card-view-title {
  min-width: 40% !important;
  line-height: 3.0!important;
  padding-right: 20px;
}

.card-view {
  display: table-row;
  flex-direction: column;
}

// ---------------

/**

 COLUMN SELECTOR ICONS
 -----------------------------
 This is kind of weird, but it is necessary to prevent the column-selector code from barfing, since
 any HTML used in the UserPresenter "title" attribute breaks the column selector HTML.

 Instead, we use CSS to add the icon into the table header, which leaves the column selector
 "title" text as-is.

 See https://github.com/snipe/snipe-it/issues/7989

 */

th.css-barcode > .th-inner,
th.css-license > .th-inner,
th.css-consumable > .th-inner,
th.css-envelope > .th-inner,
th.css-accessory > .th-inner
{
  font-size: 0px;
  line-height: .75!important;
  text-align: left;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


th.css-padlock > .th-inner::before,
th.css-barcode > .th-inner::before,
th.css-license > .th-inner::before,
th.css-consumable > .th-inner::before,
th.css-envelope > .th-inner::before,
th.css-accessory > .th-inner::before

{
  display: inline-block;
  font-size: 20px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

th.css-padlock > .th-inner::before
{
  content: "\f023";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 4px;
  font-size: 12px;
}

/**
Set the font-weight css property as 900 (For Solid), 400 (Regular or Brands), 300 (Light for pro icons).
**/
th.css-barcode > .th-inner::before
{
  content: "\f02a"; font-family: "Font Awesome 5 Free"; font-weight: 900;
}

th.css-license > .th-inner::before
{
  content: "\f0c7"; font-family: "Font Awesome 5 Free"; font-weight: 400;
}

th.css-consumable > .th-inner::before
{
  content: "\f043"; font-family: "Font Awesome 5 Free"; font-weight: 900;
}

th.css-envelope > .th-inner::before
{
  content: "\f0e0"; font-family: "Font Awesome 5 Free"; font-weight: 400;
}


th.css-accessory > .th-inner::before
{
  content: "\f11c"; font-family: "Font Awesome 5 Free"; font-weight: 400;
}

.small-box .inner {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  color: #fff;
}


.small-box > a:link, .small-box > a:visited, .small-box > a:hover {
  color: #fff;
}

.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
  border: 1px solid #d2d6de;
  border-radius: 0;
  padding: 6px 12px;
  height: 34px;
}

.form-group.has-error label {
  color: #a94442;
}

.select2-container--default .select2-selection--multiple {
  border-radius: 0px;
}

.bs-checkbox input {
  zoom: 1.5;
}
@media screen and (max-width: 511px){
  .sidebar-menu{
    margin-top:160px;
  }
}
@media screen and (max-width: 771px) and (min-width: 512px){
  .sidebar-menu {
    margin-top:160px
  }
}

@media screen and (max-width: 1098px) and (min-width: 772px){
  .sidebar-menu {
    margin-top:98px
  }
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}