@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.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%;
}

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.2em;
   margin-bottom: 0.2em;
}

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

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

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

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

div.id-anything.id {
   font-weight: 700;
   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; } */