body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

main {
  height: 100vh;
  height: -webkit-fill-available;
  max-height: 100vh;
  overflow-x: auto;
  /*overflow-y: hidden;*/
}

.btn{ white-space: nowrap; }

.dropdown-toggle { outline: 0; }

.dropdown-menu {
  box-shadow: 0 0 10px gray;
}

.dropdown-item i{
  width: 20px;
  text-align: center;
}

/* 折り畳み可能リストのサイドバー用 */
.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, .65);
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, .85);
  background-color: #d2f4ea;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #d2f4ea;
}

.btn-toggle-nav-parent {
  box-shadow:0px;
}

.btn-toggle-nav-items {
  width:calc(100% - 10px);
}

/* リストグループ */
.dataTables_length select {
  min-width:100px;
}

.dataTable th {
  text-align:center!important;
  cursor: pointer;
}

/* リストグループのサイドバー用 */
.scrollarea {
  overflow-y: auto;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

div.dt-buttons {
  position: initial;
  float: right;
  margin-left: 10px;
  margin-top: 2px;
}

div.crossing-request, div.dataTables_length{
  display: inline-block;
}
div.crossing-request{
  margin-right: 10px;
}

#div-search {
  display:none;
  margin-top: 10px;
}

.table2-origsearchform{
  display:none;
}

.alert.punchstatus {
  width:65px;
  margin-bottom: 0px;
  padding: 4px;
  text-align:center;
  cursor:pointer;
}

.kintainw-normal {
  color: #4f5454;
  background-color: #efffff;
  border-color: #bfcccc;
}
.kintainw-incomplete {
  color: #4c492b;
  background-color: #fff894;
  border-color: #ccc676;
}
.kintainw-over {
  color: #ccabab;
  background-color: #ffd6d6;
  border-color: #ccabab;
}
.kintainw-trip {
  color: #b6b2cc;
  background-color: #e4dfff;
  border-color: #b6b2cc;
}
.kintainw-holiday {
  color: #263f2d;
  background-color: #9effbe;
  border-color: #7ecc98;
}


table.selectable td{
  height:80px;
  line-height: 12px;
}
table.selectable td.cal_sat{
  background-color: #f8f8ff;
}
table.selectable td.cal_sun{
  background-color: #fff8f8;
}
table.selectable td.cal_holiday{
  background-color: #fff8f8;
}
table.selectable td.cal_workday{
  background-color: #fff;
}
table.selectable td.company_holiday{
  background-color: #ffec67;
}


table.selectable td div.caldate{
  user-select: none;
  font-size: 70%;
  color: #666;
}

table.selectable td.ui-selected{
  background-color: #ccc;
}
table.selectable td.ui-selecting{
  background-color: #eee;
}

table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child, table.table-bordered.dataTable td:first-child {
  border-left-width: 0px!important;
}

table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before {
  font-size: 0.55rem;
}
table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
  font-size: 0.55rem;
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
  font-size: 0.8rem;
}

table.table2.selectable span.badge{
  font-size:60%;
  max-width: 90px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.punch-manualcolor{
  color:#006de5;
}
.punch-requestcolor{
  color:#999;
}

.tempus-dominus-widget{
  min-height: auto!important;
}

.table-hover > tbody > tr:hover {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

.modal-puncher .date{
  font-size: 8rem;
}

.modal-puncher .clock{
  font-size: 8rem;
  font-weight: bold;
  line-height: 10rem;
}
.modal-puncher .clockdate{
  font-size: 2rem;
  line-height: 1.5rem;
}

.modal-puncher button{
  height: 5rem;
  font-size: 2rem;
}

.carousel-item{
  white-space: nowrap;
}

.dropdown-menu-breaktime .dropdown-menu-breaktime-item{
  border-bottom:1px solid #ccc;
}
.dropdown-menu-schedule .dropdown-menu-schedule-item{
  border-bottom:1px solid #ccc;
}
.dropdown-menu-schedule-item-grayout, .dropdown-menu-breaktime-item-grayout {
  opacity: 0.3;
}

.dropdown-menu-breaktime .dropdown-menu-breaktime-item:last-child{
  border-bottom:0;
}
.dropdown-menu-schedule .dropdown-menu-schedule-item:last-child{
  border-bottom:0;
}

.searchresult-loader{
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 100;
  opacity: 0.8;
  padding-top: 50px;
}
.searchresult p{
  margin-left: 20px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  
}
.searchresult small{
  margin-left: 20px;
  font-size:70%;
  color:gray;  
}

#statpills-list .list-group,
#statpills-log .list-group{
  max-height: calc( 100vh - 150px);
  overflow-y: auto;
  scrollbar-width: thin;
}

#statpills-list .list-group-item .statitem-name{
  font-size: 1.1rem;
  font-weight: bold;
}
#statpills-list .list-group-item .statitem-time{
  font-size: 0.8rem;
  opacity: 0.7;
  margin-right: 10px;
}


.calendar-template-list .list-group-item{
	padding: 2px 0px;
}

.calendar-template-list .btn-settemplate{
	width: calc(100% - 30px);
	text-decoration: none;
}
.calendar-template-list .btn-settemplate div{
	padding-left: 15px;
}
.calendar-template-list .btn-settemplate p{
	width:calc(100% - 120px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}
.calendar-template-list .btn-settemplate small{
	line-height: 1.7rem;
	font-weight: initial;
	opacity: 0.8;
}

.calendar-template-list .dropdown-menu{
	max-width: 250px;
}

.calendar-template-list .dropdown-menu div.p-2{
	font-size: 80%;
}

.calendar-template-list .dropdown-menu div.p-2 span.fw-bold{
	font-size:110%;
}
.calendar-template-list .dropdown-menu div.p-2 span.text-muted{
	font-size:90%;
}

.calendar-template-list .dropdown-menu div.p-2 div.mt-2 i{
	width: 20px;text-align: center;
}

#ocsearch .offcanvas-title{
  cursor: pointer;
}
#ocsearch .offcanvas-title:hover{
  opacity: 0.6;
}

.goods-item h4 a{
  color: #333;
  text-decoration: none;
}
.goods-item h4 a:hover{
  color: #006de5;
}




/* gaming icon ;) */
.gaming-icon {
  -webkit-background-clip: text;
  background-clip: text;
  
  color: transparent;
  /*animation: anmrainbow 5s linear infinite;*/
  color: skyblue;
}

/* レインボーカラーアニメーション */
@keyframes anmrainbow {
  0% { background-color: Magenta; }
  33% { background-color: yellow; }
  66% { background-color: Cyan; }
  100% { background-color: Magenta; }
}


/* タイムライン */
.timeline-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap
}

.timeline-steps .timeline-step {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 1rem
}

.timeline-steps .timeline-step:not(:first-child):before {
  content: "";
  display: block;
  border-top: .25rem dotted #ccc;
  width: 4.8rem;
  position: absolute;
  right: 6.6rem;
  top: 1.313rem
}

.timeline-steps .timeline-content {
  width: 8rem;
  text-align: center
}

.timeline-steps .timeline-content .inner-circle {
  border-radius: 1.5rem;
  height: 3rem;
  width: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  color:white;
}

.timeline-steps .h6 {
  color: #999;
}

.timeline-steps .timeline-step.active:not(:first-child):before {
  border-top-color: #0d6efd;
}
.timeline-step.active .timeline-content .inner-circle {
  background-color: #0d6efd;
}

.timeline-step.active .h6{
  color: #0d6efd;
}

/* 商品検索詳細 */
.goods-item .goods-item-image{
  max-width:220px;
}
.goods-item .goods-item-addcart{
  max-width:300px;
  position:relative;
  margin-bottom: 0px !important;
}

.goods-item .goods-item-addcart .goods-item-addcart-absolute{
  position: absolute;
  bottom: 0;
}

/* breakpoint */
@media (max-width: 575.98px) {
  .goods-item .goods-item-image{
    flex: unset;
    max-width:100%;
    margin-bottom:10px;
  }
  .goods-item .goods-item-image img{
    width:100%;
    max-height: none;
  }
  .goods-item .goods-item-detail{
    flex: unset;
  }
  .goods-item .goods-item-addcart{
    flex: unset;
    max-width:100%;
  }
  .goods-item .goods-item-addcart .goods-item-addcart-absolute{
    position: unset;
  }

  table.table-responsive-table tr th{
    text-wrap: nowrap;
  }

}