@charset "UTF-8";

@import url(//fonts.googleapis.com/icon?family=Material+Icons);

body {
	text-size-adjust: 100%;
}

.gallery > * {
  margin: 2px;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  position: relative;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 90px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    z-index: 99;
}

@media (max-width: 767.98px) {
    .sidebar {
        top: 11.5rem;
        padding: 0;
    }
}
    
.navbar {
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}

@media (min-width: 767.98px) {
    .navbar {
        top: 0;
        position: sticky;
        z-index: 999;
    }
}

.sidebar .nav-link {
    color: #333;
}

.sidebar .nav-link.active {
    color: #0d6efd;
}
.form-floating:focus-within {
	z-index: 2;
}
/***************************
            chart
****************************/

.charts {
	width: 400px;
	height: 200px;
	margin: 0 auto;
}

/***************************
            check
****************************/

input[type="checkbox"]{
  transform: scale(1.3);
}

.checkAll {
  cursor: pointer;
  position: relative;
}

/***************************
            table
****************************/

.table th.tableBigFonts{
    font-size: 18px;
}

.table td.tableBorder{
	font-weight:bold;
	font-size: 18px;
}

/***************************
			sort
****************************/
.table th.sort {
  cursor: pointer;
  position: relative;
}

.table th.sort::before, .table th.sort::after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border: 5px solid transparent;
  right: 10px;
  top: 50%;
}

.table th.sort::before {
    border-bottom-color: #aaa;
    margin-top: -10px;
}
.table th.sort::after {
    border-top-color: #aaa;
    margin-top: 2px;
}
.table th.sort.asc::before {
    border-bottom-color: #444;
}
.table th.sort.desc::after {
    border-top-color: #444;
}

/***************************
			common
****************************/
.unitSize{
	width: 60px;
	height: 58px;
}

.remarks-2{
	height: 75px !important;
}

.remarks-3{
	height: 90px !important;
}

.textarea:before {
content: '';
	position: absolute;
	top: 1px;
	left: 2px;
	width: calc(100% - 30px);
	height: 28px;
	border-radius: 30px;
	background-color: #ffffff;
}

.table {
	overflow: auto;
	border-spacing: 0;
	word-break:break-all;
}

.table-scroll {
	overflow-x: auto;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch; 
}

.displayNone{
	display: none;
}

.breadcrumbSize{
	width: auto;
	min-width: 200px;
}

.centerBlock{
	text-align:center;
}

.rowCenterBlock{
	vertical-align:middle;
}
.w4{
	width:4%;
	min-width:50px;
}

.w5{
	width:5%;
	min-width:60px;
}

.w7{
	width:7%;
	min-width:80px;
}
.w10{
	width:10%;
	min-width:100px;
}
.w11{
	width:11%;
	min-width:110px;
}
.w12{
	width:12%;
	min-width:120px;
}
.w15{
	width:15%;
	min-width:150px;
}
.w20{
	width:20%;
	min-width:200px;
}
.w30{
	width:30%;
	min-width:300px;
}
.w45{
	width:45%;
	min-width:450px;
}
.w65{
	width:65%;
	min-width:650px;
}

/***************************
			header
****************************/
.titleFont{
	font-size: 22px;
}

/* header button */
.headerShortcut {
    max-width: 500px; /* 要素の横幅を指定 */
    white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* ハミ出した部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
}

/***************************
			spinner
****************************/
.loading {
	position: fixed;
	inset: 0;
	margin: auto;
}

/***************************
			content
****************************/
/****************
parts
*****************/
.moldImageBlockDisplay{
	object-fit: contain;
/*	height: 600px;
	width: 410px;*/
}

.moldImageDisplay{
	object-fit: contain;
	height: 590px;
	width: 400px;
	display: flex;
	align-items: center;
	margin:auto;
}

.moldDealBlock{
	height: 673px;
}

/***************************
			modal
****************************/

/****************
parts
*****************/

.moldImageBlock{
	object-fit: contain;
/*	height: 600px;
	width: 350px;*/
}
.moldImage{
	object-fit: contain;
	height: 590px;
	width: 340px;
	display: flex;
	align-items: center;
	margin:auto;
}

.maintenanceList{
	height: 350px;
}

.searchResult{
    overflow: auto;
    height: 300px;
}


/* 画像アップロード */
input.file-input-decorate {
	display:none;
}

label.input-image-file {
	background: rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0.7);
	box-shadow: 0 2px 8px;
	transition-duration: 0.4s;
	margin: 2px;
	display: inline-block;
	width: 100px;
	height: 100px;
	text-align: center;
	position: relative;
	cursor: pointer;
}

label.input-image-file:hover {
	background: rgba(0, 64, 128, 0.1);
	color: rgba(0, 64, 128, 0.8);
	transition-duration: 0.2s;
}

label.input-image-file:active {
	background: rgba(44, 64, 128, 0.1);
	color: rgba(44, 64, 128, 0.8);
	transition-duration: 0s;
}

label.disabled {
	filter: grayscale(100%);
	cursor: not-allowed;
}

label.input-image-file > .thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

label.input-image-file .material-icons {
    font-size: 40px;
    line-height: 96px;
}

.hide {
	display: none;
}

.show {
	display: block;
}

/* 型検索 */
.result-list-image {
	width: 100px;
	height: 100px;
	object-fit: cover;
}

/* QR画面 */
#canvas{
	width: 100%; height: auto;
	background-color: silver;
}
/***************************
		デバイス
****************************/
/* PC画面サイズのみ表示 */
@media(max-width:991px){
	.pcScreenOnly {
		display: none !important;
	}
}

/* PC画面サイズのみ表示(col-md) */
@media(max-width:767px){
	.pcScreenOnlyMd {
		display: none !important;
	}
}

/* PC画面サイズのみ表示(col-sm) */
@media(max-width:575px){
	.pcScreenOnlySm {
		display: none !important;
	}
}

/* スマホ画面サイズのみ表示 */
@media(min-width:992px){
	.spScreenOnly {
		display: none !important;
	}
}