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


.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:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.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 !important;
}



.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 */

}

.main-header
.navbar
.dropdown-menu li a {
  color: #333;
}

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


input:required, select:required {
  border-right: 5px solid orange;
}
select:required + .select2-container .select2-selection, select:required + .select2-container .select2-selection .select2-selection--multiple  {
  border-right: 5px solid orange !important;
}

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;
}

.modal-warning .modal-help {
  color: #fff8af;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
  z-index: 0 !important;
}

@media print {

  @page {
    size: A4;
    margin: 0mm;
  }

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

  .img-responsive {
    width: 200px;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
    line-height: 1em;
    word-spacing:1px;
    letter-spacing:0.2px;
    font: 15px "Times New Roman", Times, serif;
    width: 100%;
    float: none;
  }

  /* avoid page-breaks inside a listingContainer*/
  .listingContainer {
    page-break-inside: avoid;
  }

  h1 {
    font: 28px "Times New Roman", Times, serif;
  }

  h2 {
    font: 24px "Times New Roman", Times, serif;
  }

  h3 {
    font: 20px "Times New Roman", Times, serif;
  }

  /* Improve colour contrast of links */
  a:link, a:visited {
    color: #781351
  }

  /* URL */
  a:link, a:visited {
    background: transparent;
    color:#333;
    text-decoration:none;
  }

  a[href]:after {
    content: "" !important;
  }

  a[href^="http://"] {
    color:#000;
  }

  #header {
    height:75px;
    font-size: 24pt;
    color:black
  }

  div.row-new-striped {
    margin: 0px;
    padding: 0px;
  }

  .pagination-detail, .fixed-table-toolbar {
    visibility: hidden;
  }
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 .col-sm-pull-3 .col-sm-push-9 {
    float: left;
  }

  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666666666666%;
  }
  .col-sm-10 {
    width: 83.33333333333334%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666666666666%;
  }
  .col-sm-7 {
    width: 58.333333333333336%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666666666667%;
  }
  .col-sm-4 {
    width: 33.33333333333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.666666666666664%;
  }
  .col-sm-1 {
    width: 8.333333333333332%;
  }

}


.select2-selection__choice__remove {
  color: white !important;
}

.select2-selection--multiple {
    overflow-y: auto;
}

.select2-selection__choice {
  border-radius: 0px !important;
}

.select2-search select2-search--inline {
  height: 35px !important;
  float: left;
  margin: 0;
}



.select2-results__option {
  padding: 5px;
  user-select: none;
  -webkit-user-select: none;
  margin: 0px;
}

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

.input-daterange, .input-daterange input:first-child, .input-daterange input:last-child {
  border-radius: 0px !important;
}

.btn-checkin, .btn-checkout {
  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;
  word-wrap: break-word;
}

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


.row-new-striped {
  vertical-align: top;
  padding: 3px;
  display: table;
  width: 100%;
  word-wrap: break-word;
  table-layout:fixed;
}

/**
*  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) {
  line-height: 1.9;
  display: table-row;
}

.row-new-striped > .row:nth-of-type(odd)  {
  display: table-row;
  padding: 2px;
}

.row-new-striped div {
  display: table-cell;
  padding: 6px;
}

.row-new-striped div {
  display: table-cell;
  padding: 6px;
}


.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 and hides the icon.

 See https://github.com/grokability/snipe-it/issues/7989
 */
th.css-accessory > .th-inner,
th.css-accessory-alt > .th-inner,
th.css-barcode > .th-inner,
th.css-component > .th-inner,
th.css-consumable > .th-inner,
th.css-envelope > .th-inner,
th.css-house-flag > .th-inner,
th.css-house-laptop > .th-inner,
th.css-house-user > .th-inner,
th.css-license > .th-inner,
th.css-location > .th-inner,
th.css-users > .th-inner,
th.css-currency > .th-inner,
th.css-child-locations > .th-inner,
th.css-history > .th-inner
{
  font-size: 0px;
  line-height: 0.75 !important;
  text-align: left;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


th.css-location > .th-inner::before,
th.css-accessory > .th-inner::before,
th.css-accessory-alt > .th-inner::before,
th.css-barcode > .th-inner::before,
th.css-component > .th-inner::before,
th.css-consumable > .th-inner::before,
th.css-envelope > .th-inner::before,
th.css-house-flag > .th-inner::before,
th.css-house-laptop > .th-inner::before,
th.css-house-user > .th-inner::before,
th.css-license > .th-inner::before,
th.css-location > .th-inner::before,
th.css-users > .th-inner::before,
th.css-currency > .th-inner::before,
th.css-child-locations > .th-inner::before,
th.css-history > .th-inner::before
{
  display: inline-block;
  font-size: 20px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/**
BEGIN ICON TABLE HEADERS
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;
}

th.css-users > .th-inner::before {
  content: "\f0c0"; font-family: "Font Awesome 5 Free"; font-size: 15px;
}

th.css-location > .th-inner::before {
  content: "\f3c5"; font-family: "Font Awesome 5 Free"; font-size: 19px; margin-bottom: 0px;
}

th.css-component > .th-inner::before
{
  content: "\f0a0"; font-family: "Font Awesome 5 Free"; font-weight: 500;
}

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

th.css-house-user > .th-inner::before {
  content: "\e1b0";
  font-family: "Font Awesome 5 Free";
  font-size: 19px;
  margin-bottom: 0px;
}
th.css-house-flag > .th-inner::before {
  content: "\e50d";
  font-family: "Font Awesome 5 Free";
  font-size: 19px;
  margin-bottom: 0px;
}
th.css-house-laptop > .th-inner::before {
  content: "\e066";
  font-family: "Font Awesome 5 Free";
  font-size: 19px;
  margin-bottom: 0px;
}
th.css-accessory-alt > .th-inner::before {
  content: "\f11c";
  font-family: "Font Awesome 5 Free";
  font-size: 19px;
  margin-bottom: 0px;
}

th.css-child-locations > .th-inner::before {
  content: "\f64f"; // change this to f51e for coins
  font-family: "Font Awesome 5 Free";
  font-size: 19px;
  margin-bottom: 0px;
}

th.css-currency > .th-inner::before {
  content: "\24"; // change this to f51e for coins
  font-family: "Font Awesome 5 Free";
  font-size: 19px;
  margin-bottom: 0px;
}

th.css-history > .th-inner::before {
  content: "\f1da"; // change this to f51e for coins
  font-family: "Font Awesome 5 Free";
  font-size: 19px;
  margin-bottom: 0px;
}


.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, .form-group.has-error .help-block {
  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
  }
  .navbar-custom-menu > .navbar-nav > li.dropdown.user.user-menu {
    float:right;
  }
  .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    margin-right:-39px;
  }
}

@media screen and (max-width: 1268px) and (min-width: 912px){
  .sidebar-menu {
    margin-top:50px
  }
}
@media screen and (max-width: 992px){
  .info-stack-container {
    flex-direction: column;
  }
  .col-md-3.col-xs-12.col-sm-push-9.info-stack{
    left:auto;
    order:1;
  }
  .col-md-9.col-xs-12.col-sm-pull-3.info-stack{
    right:auto;
    order:2;
  }
  .info-stack-container > .col-md-9.col-xs-12.col-sm-pull-3.info-stack > .row-new-striped > .row > .col-sm-2{
    width:auto;
    float:none;
  }
}
@media screen and (max-width: 992px){
  .row-new-striped div{
    width:100%;
  }
}

@media screen and (max-width: 1318px) and (min-width: 1200px){
  .admin.box{
    height:170px;
  }
}
@media screen and (max-width: 1494px) and (min-width: 1200px){
  .dashboard.small-box{
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 188px;
    display: block;
    overflow: hidden;
  }
}

/** 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;
  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;
}

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;
}

.nav-tabs-custom > .nav-tabs > li.active {
  font-weight: bold;
}

/** --------------------------------------- **/
/** 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;
}
.datepicker.dropdown-menu {
  z-index: 1030 !important;
}

.sidebar-menu > li .badge {
  margin-top: 0px;
  filter: brightness(70%);
  font-size: 70%;
}

/** this is needed to override ekko-lightboxes card view styles **/
.bootstrap-table .fixed-table-container .table tbody tr .card-view {
  display: table-row !important;
}

td.text-right.text-padding-number-cell {
  padding-right: 30px !important;
  white-space: nowrap;
}

th.text-right.text-padding-number-footer-cell {
  padding-right: 20px !important;
  white-space: nowrap;
}

code.single-line {
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  max-width: 400px;
}

p.monospace, span.monospace {
  font-family: monospace, monospace;
}

legend.highlight {
  background: repeating-linear-gradient(
          45deg,
          #222d32,
          #222d32 10px,
          #444 10px,
          #444 11px
  );

  color: #fff;
  font-size: 18px;
  padding: 6px 6px 6px 10px;
}

legend.highlight a {
  color: #fff;
  cursor: pointer;
}

fieldset.bottom-padded {
  padding-bottom: 20px;
}

caption.tableCaption {
  font-size: 18px;
  padding-left: 8px;
}

// via https://github.com/grokability/snipe-it/issues/11754
.sidebar-toggle.btn {
  border-radius: 3px;
  box-shadow: none;
  border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-left: -47px;
  margin-top: 2px;
}


.visually-hidden {
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: preserve;
  display: inline-block;
}

input[name="columnsSearch"] {
  width: 120px;
}

.callout.callout-legend {
  padding: 15px 30px 15px 15px;
  font-size: 100%;
  border-radius: 0px;
}

.callout.callout-legend h4 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 0px;
}

.callout.callout-legend a {
  text-decoration: none;
  cursor: pointer;
}

p.callout-subtext {
  margin-top: 5px;
}

/**
This just hides the padding on the right side of the mark tag for a less weird visual experience
 */
mark {
    padding-right: 0px;
}

/**
Radio toggle styles for permission settings and check/uncheck all
 */
.radio-toggle-wrapper {
  display: flex;
  padding: 2px;
  background-color: #e9e9e9;
  margin-bottom: 3px;
  border-radius: 4px;
  border: 1px #d6d6d6 solid;
}

.radio-slider-inputs {
  flex-grow: 1;
}

.radio-slider-inputs input[type=radio] {
  display: none;
}

.radio-slider-inputs label {
  display: block;
  margin-bottom: 0px;
  padding: 6px 8px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  transition : all .4s 0s ease;
  cursor: pointer;
}

.radio-slider-inputs label {
  color: #9a9999;
  border-radius: 4px;
  border: 1px transparent solid;
}

.radio-slider-inputs .allow:checked + label {
  background-color: green;
  color: white;
  border-radius: 4px;
  border: 1px transparent solid;
}

.radio-slider-inputs .inherit:checked + label {
  background-color: rgba(255, 204, 51, 0.11);
  color: #9a9999;
  border-radius: 4px;
  border: 1px white solid;
}

.radio-slider-inputs .deny:checked + label {
  background-color: #a94442;
  color: white;
  border-radius: 4px;
  border: 1px transparent solid;
}

.remember-toggle {
  cursor: pointer;
}

.js-copy-link {
  color: grey;
}

.deleted {
  text-decoration: line-through;
}