@font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 400;
   src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/Lato-Regular.woff2) format('woff2');
}

@font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 700;
   src: local('Lato Bold'), local('Lato-Bold'), url(../fonts/Lato-Bold.woff2) format('woff2');
}

/*
  @font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	src: local('Lato Italic'), local('Lato-Italic'), url(../fonts/Lato-Italic.woff2) format('woff2');
  }

  @font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 700;
	src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(../fonts/Lato-BoldItalic.woff2) format('woff2');
  }
*/

body {
   padding: 0;
   overflow-y: scroll;
}

#bgrow {
   background-size: cover;
   padding-top: 4em;
   padding-bottom: 4em;
}

#menubar {
   background-color: rgb(47, 53, 63);
   padding-top: 0.4rem;
   padding-bottom: 0.2rem;
   padding-right: 1rem;
}

#topmenu {
   margin: auto 0;
}

#topmenu a.item {
   color: rgb(216, 222, 227);
}

#topmenu a.item:hover {
   color: rgb(255, 255,255);
}

div#page-header h2.ui.header  {
  margin: 0.1em;
  margin-bottom: 0.8em;
}

div#page-header h2.ui.header div.content {
  margin-bottom: 0.3em;
}

div.ui.cta.button {
   /*background-image: linear-gradient(rgb(120, 179, 36) 0px, rgb(105, 157, 32) 100%);*/
   /*color: rgb(216, 222, 227);*/
   color: rgb(230, 230, 230);
   text-transform: uppercase;
   /* font-weight: 400;*/
   letter-spacing: .01em;
}

div.ui.orange.cta.button {
   background-image: linear-gradient(rgb(120, 179, 36) 0px, rgb(105, 157, 32) 100%);
}

div.ui.grid > div.pricing-header.row {
   margin-top: 2em;
   padding-bottom: 0.6em;
}

div.ui.grid > div.pricing-button.row {
   padding-top: 0;
}

div#plans-grid {
   margin-top: 1.4em;
   margin-left: 2%;
   margin-right: 2%;
}

/* Reserve exactly two lines for the plan description so cards stay aligned
   whether the description wraps to one line or two */
div#plans-grid .ui.card .meta {
   line-height: 1.4em;
   height: 2.8em;                 /* 2 × line-height */
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

h2.billing-faq.ui.dividing.header {
   margin-top: 2.5em;
   margin-bottom: 0.7em;
}
h3.billing-faq.ui.sub.header {
   font-size: 1.1em;
   margin-bottom: 0.7em;
}
p.billing-faq {
   font-size: 1.1em;
}

svg.cclogo {
   vertical-align: "bottom";
}

h3.benefits.icon.header > i.icon {
   color:  #007c9b;
}

h3.benefits.sub.header {
   font-size: 1.3em;
   margin-bottom: 0.7em;
}

p.benefits {
   font-size: 1.1em;
   /*margin-bottom: 0.8em; */
}

div.ui.features.list {
   font-size: 1.2em;
}

div#features-link  {
   padding-top: 0;
   font-size: 1.1em;
}

h2.interested.ui.header {
   margin-bottom: 0.2em;
}
p.interested {
   font-size: 1.2em;
}

div.ui.social.list i.icon {
   font-size: 1.6em;
}

div.ui.link-menu.segment {
   margin-bottom: 1em;
   padding-bottom: 0;
}

div.ui.social.segment {
   margin-top: 0;
   padding-top: 0;
}

p#company-handle {
   color: rgb(150,150,150);
}

ul.user-handle-example {
   color: rgb(150,150,150);
}
/*******************************
		 Site Overrides
*******************************/
/* min-width: 860px; */

/*.app .ui.menu {
   min-height: 1.2rem;
}*/

/* make sure the remove stock popup is wide enough */
div.remove-stock.popup > .ui.form {
   min-width: 20rem;
   width: 30rem;
}

/* same for the add-stock popup */
div.add-stock.popup > .ui.form {
   min-width: 55rem;
}

/* The switcher popup uses width:max-content; cap it so long "name — description"
   lines wrap instead of stretching across the viewport. */
div.db-switcher.popup {
   min-width: 20rem;
   max-width: 28rem;
   word-wrap: break-word;
   overflow-wrap: break-word;
}

#feedback-handle {
   position: absolute;
   top: -2px;
   left: 45%;
}

#message {
   position: fixed;
   top: 0px;
   right: 0px;
   margin: 6px;
   z-index: 1000;
   width: auto;
}

/* boxed messages on the right side of the screen */
.side.message {
   padding: 0.8rem;
}

div#app-grid {
   margin-top: 2px;
   margin-bottom: 90vh;
}

/* toplevel app grid should be tighter */
.grid#app-grid > .row {
   padding: 0.5rem;
}

/* make unrollable table rows more visible */
td.active {
   border-bottom: none !important;
}

td.active.vertical {
   border-top: none !important;
   border-right: none;
}

tr.details > td {
   border-top: none !important;
   padding-top: 1.2rem !important;
   padding-bottom: 4rem !important;
}

.ui.table thead tr.extra-header-row th {
   padding-top: 0.4em;
   padding-bottom: 0.4em;
}

.ui.table thead tr th {
   padding-top: 0.4em;
   padding-bottom: 0.4em;
}

div.thumbnail {
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
   height: 30px;
   width: 30px;
}

div.ui.attachment.list {
   margin-top: 0;
}

.ui.message.red a {
   color: blue;
}
.ui.message.yellow a {
   color: blue;
}

/* Markdown styling */

.ui.grid.container > div.column.md {
   padding-left: 4em;
   padding-right: 4em;
   font-size: 1.2em;
}

.md li {
   margin-bottom: 0.8em;
   line-height: 1.4em;
}

.md img {
   /* 6em and 3em because the containing column has 4em padding, and I'd like to have 1em margins */
   max-width: calc(100% + 6em);
   margin: 2em -3em 1em -3em;
}

/* Markdown table of contents */

ul.toc {
   padding-left: 1.2em;
}
ul.toc ul.toc {
   padding-left: 1.2em;
}
ul.toc ul.toc ul.toc {
   padding-left: 1.2em;
}
ul.toc ul.toc ul.toc ul.toc {
   padding-left: 1.2em;
}

/* ECDB data */

div.ecdb div.column {
   padding-left: 4em;
   padding-right: 4em;
   font-size: 1.1rem;
}

div.ecdb h1.ui.header {
   font-size: 1.8rem;
}

div.ecdb h2.ui.header {
   font-size: 1.5rem;
}

div.ecdb li {
   line-height: 1.5rem;
}

div.ecdb-ranking p {
   font-size: 1.1rem;
}

div.ecdb-ranking li {
   line-height: 1.8rem;
}

/* Project cards */

div.project.card div.description > div.description {
   min-height: 2.6rem;
   word-wrap: break-word;
   overflow-wrap: break-word;
}

div.project.grid {
   font-size: 0.8rem
}

div.project.grid div.project.column {
   padding: 0;
}

.ui.partslist.header {
   margin-bottom: 0;
}

div.lookupspecs {
   margin-top: 1em;
}

div.lookupspecs td {
   padding: 0 !important;
}

table.ui.table.specs td {
   padding-top: 1px;
   padding-bottom: 1px;
}

.ui.button:not(.icon) > i.right.icon {
   margin-left: 0.2em;
}

div.ui.action.input > .ui.button {
   padding-left: 0.6em;
   padding-right: 0.6em;
}

div.ui.input:not(.icon) input {
   padding-top: 0.1em !important;
   padding-bottom: 0.1em !important;
}

.ui.form div.calculated-price.field {
   margin-top: 0.5em;
}

table.wordwrapped.table td {
   word-wrap: break-word;
   overflow-wrap: break-word;
}

i.warning.icon + div.ui.popup {
   text-transform: none;
   text-align: left;
}

div.field > table.ui.small.compact {
   margin-top: 0;
}

div.ui.popup {
   text-align: left;
}

div#topmenu.blog a.item {
   font-size: 2.2rem;
}

div#topmenu.blog div.right.compact.menu a.item {
   font-size: 1rem;
}

span.date {
   color: rgb(180,180,180);
}

table.tight td {
   padding: 4px !important;
}

table.tight th {
   padding-left: 4px !important;
   padding-right: 4px !important;
}

div.ui.tiny.floating.red.label {
   padding-left: 0.3em;
   padding-right: 0.3em;
   left: 90%;
   top: -0.4em;
}

div.ui.image.octopartlogo {
   margin-bottom: 1px;
   padding-right: 12px;
}

div.ui.image.snapmagiclogo > img {
   height: 18px;
   margin-bottom: 1px;
}

div.ui.image.inlinesnapmagiclogo > img {
   height: 16px;
   margin-bottom: 1px;
}

i.icon + div.ui.popup {
   min-width: 30em;
}

table.ui.table tfoot tr:first-child td {
   border-top: 1px solid rgba(34,36,38,0.1);
}

table.ui.table div.table-ui-spaced {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

table.ui.table div.table-ui-centered {
   display: flex;
   justify-content: center;
   align-items: center;
}

table.ui.table div.table-ui-left-aligned {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

table.ui.table div.table-ui-right-aligned {
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

table.ui.table div.table-ui-empty {
   display: flex;
   justify-content: center;
   font-size: 3em;
   padding-top: 1em;
   padding-bottom: 1em;
   color: #e0e0e0;
}

table.ui.table thead div.table-ui-filter-status {
   display: inline-flex;
   margin-right: 1em;
   margin-left: 1em;
}

table.ui.table thead tr.configuration th {
   /*border-left: 1px solid rgba(34, 36, 38, 0.1);*/
   position: relative;
}


.resize-handle {
   /*background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 4px);*/
   /*background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 0, 0, 0.25) 2px, rgba(0, 0, 0, 0.25) 4px);*/
   /*background: repeating-linear-gradient(45deg, transparent, transparent 2px, #b44c4c 2px, #b44c4c 4px);*/
   /*background: repeating-linear-gradient(45deg, white, white 2px, #b44c4c 2px, #b44c4c 4px);*/
   background: repeating-linear-gradient(45deg, white, white 2px, #b44c4c 2px, #b44c4c 4px);
}

table.ui.table thead tr.configuration th > .resize-handle {
   width: 10px;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   cursor: ew-resize !important;
   /*z-index: 1;*/
}

table.ui.table thead tr.configuration th.active {
   background-color: #F2F2F2;
}

/*table.ui.table tr.configuration th > .resize-handle .active {
   border-right: 1px dotted #000;
}*/
table.ui.table thead a.config-button {
   font-size: 1.5em;
}

table.ui.table thead div.icon.config-icon {
   font-size: 1.5em;
}

div.ui.input + a.config-button {
   margin-left: 0.2em;
}

table.ui.table thead div.table-ui-config {
   display: flex;
   align-items: center;
}

table.ui.table thead div.config-group {
   display: flex;
   justify-content: center;
   align-items: center;
}

table.ui.table thead div.config-group > * {
   margin-left: 0.1em;
   margin-right: 0.1em;
}



div.ui.button:not(.icon) i.icon {
   height: 1.2em !important;
}

div.ui.icon.button i.icon {
   height: 1em !important;
   margin-right: 0.25em !important;
}

div.ui.button i.icon {
   vertical-align: text-top;
   margin-top: -0.1em;
}

/* Filter status label next to the edit button: stretch the label to the button height */
div.filter-status-row {
   display: inline-flex;
   align-items: stretch;
}

div.filter-status-row > div.ui.label {
   display: inline-flex;
   align-items: center;
   margin-right: 0.25em;
}

/* Any icon directly in a table cell */
tr td > i.icon {
   font-size: 1.1em;
   vertical-align: middle;
}

/* Unrollable tables */

i.icon.unroll {
   vertical-align: middle;
   font-size: 1.4em;
   margin-right: 0;
   margin-left: -0.3em;
}

/* make sure checkboxes in tables are middle-aligned, they default to top alignment for some reason */
.ui.table td div.ui.checkbox {
   vertical-align: middle;
}

.ui.table .select {
   padding-left: 0.3em !important;
   padding-right: 0.3em !important;
   padding-bottom: 0;
   width: 1.5em;
}

.ui.table .unroll {
   padding-left: 0.2em !important;
   padding-right: 0 !important;
   width: 1.2em;
}

.ui.table .reorder {
   font-size: 1.1em;
   width: 3.6em;
}

th div.th-ops {
   display: inline-block;
   font-size: 1.2em;
   padding-top: 0.3em;
}

th div.th-ops a i.icon {
   margin: 0;
   height: 1em;
}

.ui.table thead tr.extra-header-row input {
   padding: 0.5em;
}

.ui.table thead tr.extra-header-row div.icon.input i.icon {
   font-size: 0.9em;
}

td.no-wrap {
   white-space: nowrap;
}

/* Part type icons */
td i.icon.part-type {
   font-size: 1.2em;
   vertical-align: middle;
}

/* Attachment icons */
div.icon-list i.icon {
   font-size: 1.2em;
}

div.ui.menu .item > i.icon {
   font-size: 1.2em;
}

/* Adjust icons in the popup menu, but do not touch the pointing menu (for parts). */
div.ui.vertical.menu:not(.pointing) > .item i.icon {
   margin-right: 0.3em;
   font-size: 1.1em;
   margin-left: -0.2em;
   vertical-align: bottom;
}

div.ui.menu#top-menu .item {
   padding: 0.8em;
   padding-top: 0.2em;
   padding-bottom: 0.2em;

}

div.ui.menu#top-menu .item i.icon {
   font-size: 1.1em;
}

div.Select div.Select-value i.icon {
   vertical-align: top;
}

/* Reserve additional space at the bottom. This is needed because the buttons are floated, so they do not take up
   vertical space. */
div.ui-forms-buttons {
   margin-top: 0.4em;
   min-height: 1.7em;
}

/* The inline editable field (ui.forms/single-field-form): the mounted form sits inside a line of text; the
   OK/Cancel buttons render inside the field's action input. The right margin keeps the buttons from
   crowding whatever text follows the editor on the line. */
div.ui.form.ui-single-field-form {
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
   margin-right: 0.5em;
}

/* Mounted as a form field's content (the build fulfillment dates band), the editor fills the field's width
   instead of shrinking to its inline content size: the container becomes a block-level flex row and the
   single inner field stretches, which lets Semantic's own field rules size the action input to 100%. */
.field > div.ui.form.ui-single-field-form {
   display: flex;
   margin-right: 0;
}

.field > div.ui.form.ui-single-field-form .field {
   flex: 1;
}

/* The editor is a single inline control, not a stacked form, so the field carries no form margins. */
div.ui.form.ui-single-field-form .field {
   margin: 0;
}

/* A compact input: with the default form input padding the editor is twice the height of the text line it
   sits in, which makes the line jump on entering edit mode. The explicit heights override the site-wide
   38px form input and action input heights, which would otherwise stretch the control back to full form
   height. */
div.ui.form.ui-single-field-form .field input {
   padding: 0.3em 0.6em;
   height: auto;
}

div.ui.form.ui-single-field-form .field div.ui.action.input {
   height: auto;
}

/* Semantic shrinks button icons to 0.86em to make room for button text; these buttons are icon-only, so
   give the icons back some size. The svg inside scales with the i.icon height. The reduced vertical button
   padding compensates for the taller icon, keeping the whole editor compact. */
div.ui.form.ui-single-field-form .ui.icon.button > i.icon {
   height: 1.1em;
}

div.ui.form.ui-single-field-form .ui.icon.button {
   padding-top: 0.55em;
   padding-bottom: 0.55em;
}

/* Semantic pins the focused action input's right border blue with !important; in an error-state field it
   must stay the error color, or a blue seam shows where the input meets the attached button. */
div.ui.form .field.error .ui.action.input > input:focus {
   border-right-color: #e0b4b4 !important;
}

div.ui.side.message ul {
   padding-left: 1.2em;
}

div.ui.feature.placeholder.segment div.inline {
   margin-bottom: 1em;
}

svg.qr-code {
   display: block;
   width: 6em;
   padding: 8px;
}

div.id-anything {
   display: inline-flex;
}

div.ui.id-anything.label {
   padding-left: 0.3em;
   padding-right: 0.3em;
   min-width: 6em;
}

div.ui.id-anything.label a {
   line-height: 1.4;
   font-size: 80%;
}

div.ui.id-anything.label i.icon {
   width: 1.4em;
   height: 1.4em;
   vertical-align: bottom;
}

h3.id-anything.ui.dividing.header {
   margin-bottom: 0.4em;
}

div.id-anything.container {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-flow: column nowrap;
   margin-top: 0.2em;
}

div.id-anything.id {
   font-size: 0.8em;
}

div.id-anything.container svg.qr-code {
   margin-top: 0.5em;
   margin-bottom: 0.6em;
}

a.id-anything#whatisthis {
   margin-top: 0.6em;
   font-size: 0.8em;
}

div.flexheader {
   display: flex;
   align-items: end;
   justify-content: space-between;
   margin-bottom: 0.4em;
}

div.flexheader > div.flexleft {
   flex-grow: 0.98;
   padding-bottom: 0.4em;
   border-bottom: 1px solid rgba(34,36,38,.15);
}

div.flexheader > div.flexright {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}

div.imginboundingbox {
   background-repeat: no-repeat;
   background-size: contain;
   position: relative;
   background-position: right;
   height: 100%;
   width: 100%;
}

div.ui.grid > div.row.details-header {
   padding-bottom: 0;
}

div.ui.grid > div.row.details-header.with-image {
   min-height: 8em;
}

div.ui.grid > div.row.details-header > div.column {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: stretch;
}

div.flusher {
   clear: both;
}

div.ui.placeholder.segment div.inline.threequarters {
   width: 75%;
}

div.ui.right.secondary.menu div.button.item {
   padding-top: 0;
   padding-bottom: 0;
}

div#view-as-selector {
   display: flex;
   justify-content: center;
   align-items: flex-end;
   padding-top: 1em;
}

div#scandit-picker {
   max-width: 400px;
   max-height: 240px;
}

div#scanner-pane {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 240px;
}

div#scanner-pane > span.message {
   margin-left: 1em;
   margin-right: 1em;
}

div#activation-message {
   margin-top: 1em;
   display: flex;
   justify-content: center;
   align-items: center;
}

div#activation-message > div.ui.icon.message {
   margin-right: 1em;
}

/* Fix for country selection dropdown being covered by braintree drop-in-ui which has a z-index of 2 */
div.Select-menu-outer {
   z-index: 3;
}

div.job-indicator {
   display: inline-flex;
}

div.radio-button i.icon {
   vertical-align: text-top;
   height: 1.2em;
   margin-right: 0.6em;
}

div.apidoc code { font-size: 0.9em; }
div.apidoc h6 { font-size: 0.9em; }
div.apidoc pre { font-size: 0.8em; }

div.ui.form div.field label.custom-field-label {
   width: 24% !important;
   text-align: right;
}

/* match the height of every input to the height of react-select */
div.ui.action.input { height: 38px; }
div.ui.form div.field > input { height: 38px; }
/* div.ui.form div.field > div.ui.icon.button { height: 38px; } */