snipe-it/resources/assets/less/overrides.less

.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;
}
.pull-text-right{
  text-align: right !important;
}

.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{
  background-color:#f39c12 !important;
}

.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: 14px;
  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;
}

@media screen and (max-width: 511px){
  .tab-content .tab-pane .alert-block {
    margin-top: 120px
  }
  .sidebar-menu{
    margin-top:160px;
  }
}
@media screen and (max-width: 912px) and (min-width: 512px){
  .sidebar-menu {
    margin-top:100px
  }
}

@media screen and (max-width: 1268px) and (min-width: 912px){
  .sidebar-menu {
    margin-top:50px
  }
}

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


/** Form-stuff overrides for checkboxes and stuff **/

label.form-control {
  display: grid;
  grid-template-columns: 1.8em auto;
  gap: 0.5em;
  border: 0px;
  padding-left: 0px;
  background-color: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

label.form-control--disabled {
  color: #959495;
  pointer-events:none;
  cursor: not-allowed;
}

/** --------------------------------------- **/
/** Start checkbox styles to replace iCheck **/
/** --------------------------------------- **/
input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: #959495;
  width: 1.8em;
  height: 1.8em;
  border: 0.05em solid;
  border-radius: 0em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  /*Windows High Contrast Mode*/
}

/** This sets the display of a checkbox, and what the "fill" checkmark should look like */

input[type="checkbox"]::before {

  /** If you want to use the non-checkbox, filled square, use this instead **/
  content: "";
  width: 1em;
  height: 1em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em rgb(211, 211, 211);

  content: "";
  width: 1em;
  height: 1em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #428bca;
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

/** This sets the size of the scale up for the shape we defined above **/
input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/** This sets the scale and color of the DISABLED but CHECKED checkbox */
input[type=checkbox]:disabled::before, input[type=radio]:disabled::before {
  content: "";
  width: 1em;
  height: 1em;
  transform: scale(1);
  box-shadow: inset 1em 1em rgb(211, 211, 211);
}

/* This sets the scale and style of a DISABLED checkbox that is NOT checked */
input[type=checkbox]:disabled:not(:checked)::before, input[type=radio]:disabled:not(:checked)::before {
  content: "";
  transform: scale(0);
  cursor: not-allowed;
  pointer-events:none;
}

/** this is the color of the checkbox and content on a disabled, checked box **/
input[type=checkbox]:disabled, input[type=radio]:disabled {
  --form-control-color: rgb(211, 211, 211);
  color: #959495;
  cursor: not-allowed;
  pointer-events:none;
}


/** Radio styles to replace iCheck **/

input[type="radio"] {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: #959495;
  width: 1.8em;
  height: 1.8em;
  border: 0.05em solid;
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type="radio"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #428bca;
}

input[type="radio"]:checked::before {
  transform: scale(1);
}


/**
* This addresses the column selector in bootstrap-table. Without these two lines, the
* checkbox and the <span></span> with the label text that BS tables generates will
* end up on two different lines and it looks assy.
 */
.dropdown-item-marker input[type=checkbox] {
  font-size: 10px;
}

.bootstrap-table .fixed-table-toolbar li.dropdown-item-marker label {
  font-weight: normal;
  display: grid;
  grid-template-columns: .1em auto;
  gap: 1.5em;
}

.container.row-striped .col-md-6 {
  overflow-wrap:anywhere;
}

.nav-tabs-custom > .nav-tabs > li {
  z-index: 1;
}

.select2-container .select2-search--inline .select2-search__field{
  padding-left:15px;
}

/** --------------------------------------- **/
/** End checkbox styles to replace iCheck   **/
/** --------------------------------------- **/

/**
/** Separator styles with text in the middle. Currently only used by the login page but
/** could be used elsewhere.
 */

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: 20px;
  color: #959495;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #959495;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}