body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 13px; } @media (max-width: 400px) { .navbar-left { margin: 2px; } .nav::after { clear: none; } } .skin-blue .main-header .logo { background-color: inherit !important; } .main-header .logo { width: 100% !important; white-space: nowrap; text-align: left; display: block; clear: both; } .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; } .main-header .sidebar-toggle:before { content: "\f0c9"; } .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 0.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 { color: #d9534f; } .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: 0.5; } .btn-box-tool-lg { font-size: 16px; color: orange; } /*Form Wizard*/ .bs-wizard { margin-top: 20px; 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-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; text-align: left; color: white; padding: 0px; /* adjust based on your layout */ } .skin-blue .main-header .navbar .dropdown-menu li a { color: #333; } a.logo.no-hover a:hover { background-color: transparent; } .required { border-right: 6px solid orange; } .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; } .left-navblock { max-width: 500px; } .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; } .main-header .logoa:link, .main-header .logo a:hover, .main-header .logo 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; } .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 0.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 { color: #d9534f; } .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: 0.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-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; } 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; } 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; 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 !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: 0.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: 300; } th.css-padlock > .th-inner::before { content: "\f023"; font-family: "Font Awesome 5 Free"; font-weight: 400; padding-right: 2px; } /** 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; }