OrcaSlicer/resources/web/guide/21/21.css

#Content
{
	overflow-y:auto;
	padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
}

.BlockBanner
{
	padding: 0px;
	border-bottom:#009688 1px solid;
	width: 100%;
	display: flex;
	justify-content:space-between;
	align-items: center;
}


.BannerBtns
{
	display: flex;
	white-space: nowrap;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
}

.BlockBanner  a
{
	display: inline-block;
	background-color:#009688;
	line-height: 40px;
	height: 40px;
	padding: 0px 24px;
	color: #fff;
}

.PrinterArea
{
	padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
	display: flex;
	flex-wrap: wrap;
}

.PrinterBlock
{
	width: 160px;
	text-align: center;
	padding: 10px;
}

.PImg
{
	width:120px;      /* ORCA use covers as 120x120px but use source file as 240x240 for better quality on hidpi */
	height:120px;	  /* ORCA fit image to fill frame */
	padding:10px 20px /* ORCA use less vertical padding */
}

.ModelCheckBox
{
	flex: 0 0 18px;			/* ORCA match checkbox style and size */
	margin: 10px 5px 0 0;
	width: 18px;
	height: 18px;
	background-image: url("../img/emptycheck.svg");
	background-size: cover;
}

.ModelCheckBox.ModelCheckBoxSelected
{
	background-image: url("../img/greencheck.svg");
}

img.ModelThumbnail
{
	width:  100%;
	height: 100%;
}

.PName
{
	font-weight: 700;
	text-align:left;
}

.pNozzel
{
	display: none;
	align-items: center;
	justify-content:flex-start;
	color: #5A5A5A;	
	padding-left: 0px; /* ORCA Align checkboxes with with model text */
}

.pNozzel input
{
	vertical-align: middle;
	margin-right: 5px;
}


/*-----Notice-----*/
#NoticeMask
{
	background-color: #000;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0.05;
	display: none;
}

#NoticeBody
{
	display: none;
	width: 400px;
	border-width: 1px;
	border-style: solid;
	border-radius: 4px;
	background-color: inherit;	
	position: absolute;
	left: 50%;
	top: 200px;
	margin-left: -200px;
}

#NoticeBar
{
	background-color:#00f0d8;
	height: 40px;
	line-height: 40px;
	color: #fff;
	text-align: center;
}

#NoticeContent
{
	padding: 4mm 10mm;	
}


#NoticeBtns
{
	margin-top: 4mm;
	display: flex;
	justify-content:flex-end;
}

.search {
	width: 100%;
	position: relative;
	display: flex;
}
  
.searchTerm {
	width: 100%;
	border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
	/*border-right: none;*/
	padding: 5px;
	padding-left:32px;
	height: 20px;      /* ORCA match height */
	line-height: 20px; /* ORCA center text vertically */
	border-radius: 5px 5px 5px 5px;
	outline: none;
	color: #9DBFAF;
}
@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
	.searchTerm {border: 1px solid #4A4A51;}
}

.searchTerm:focus{
	color: #363636;       /* ORCA Searchbox > use normal text color */
	border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
}
@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
	.searchTerm:focus{color: #FFFFFF}
}

#search-icon{ /* ORCA */
	position:absolute;
    top: 50%;
    transform: translateY(-50%);
	left:8px;
	margin:0px auto;
	fill:#7C8282
}
@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
	#search-icon{fill:#949494}
}

/*Resize the wrap to see the search bar change!*/
.wrap{
	width: 30%;
	padding-bottom: 5px;
	padding-left: 32px; /* ORCA Align with content */
}