@charset "utf-8";
@import url("wasuremono-style.css");
@import url("passcode.css");

html body{
   font-family: メイリオ,YuGothic,Yu Gothic,ヒラギノ角ゴ,sans-serif;
   font-size: 0.8rem;
   line-height : 1.3 ;
   letter-spacing : 0.05em;
}
pre {
  /* 自動改行 */
  /* Mozilla */
  white-space: -moz-pre-wrap;
  /* Opera 4-6 */
  white-space: -pre-wrap;
  /* Opera 7 */
  white-space: -o-pre-wrap;
  /* CSS3 */
  white-space: pre-wrap;
  /* IE 5.5+ */
  word-wrap: break-word;
  font-family: メイリオ,YuGothic,Yu Gothic,ヒラギノ角ゴ,sans-serif;
  font-size: 0.8rem;
  line-height : 1.3 ;
  letter-spacing : 0.05em;
}

.d-uxga{
  /* position: fixed; */
  top: 50px;
  height: calc( 100% - 50px );
  left: 0;
}

@media screen and (min-width: 1601px) {
  .d-uxga{
    margin-left: 200px;
  }
}
@media screen and (max-width: 1600px) {
  .d-uxga{
    margin-left: 0;
  }
}

@media screen and (min-width: 1601px) {
  /* 表示領域が1601px以上の場合に適用するスタイル */
  .d-uxga-block{
    display: block !important;
  }
}

@media screen and (min-width: 1200px) {
  /* 表示領域が1200px以上の場合に適用するスタイル */
  .content{
    margin-left: 200px;
    height: 100%;
  }
}
.wrapper{
  height: 100vh;
}
.content-wrapper{
  height: 100%;
  margin-top: 50px;
}

.note-editing-area{
  font-size: 1rem;
}

@media screen and (min-width: 150px) and (max-width: 575px) {
  /* 表示領域が150~575pxの場合に適用するスタイル */

  /* .modal-dialog {
    max-width: 300px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
  }
  .modal-sm {
    max-width: 300px;
  } */

}

/* モーダルオープン時、左に17pxずれる対策 */
/* .fixed-top{padding-right: 0px !important;}
.modal-open {padding-right: 0px !important;}
.modal {padding-right: 0px !important;}
.navbar-nav {padding-right: 0 !important;} */
/* モーダル内のスクロールバーなし */
.modal::-webkit-scrollbar {display:none;}

.modal-dialog-fluid {
  max-width: inherit;
  width: 90%;
  /* margin-left: 15px; */
}


.canvas-wrapper{
  width: 100%;
  height: 100%;
}

.company{
  color: white;
}

/* Open Icon用デザイン */
.oi-badge{
  color: red;
}
.oi-menu{
  font-size: 1rem;
  color: gainsboro;
}
.oi-menu:hover{
  color:lightblue;
}
.oi-arrow-thick-left{
  font-size: 1rem;
  line-height: 1.5rem;
}
.oi-magnifying-glass{
  font-size: 0.8rem;
}
/* ボタンデザイン */
.btn-sm{
  font-size: 0.7rem !important;
}

/* スクロールバーデザイン */
::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}
::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
  box-shadow: none;
}


/* サイズ設定 */
.w-100px {
  width: 100px !important;
}
.w-150px {
  width: 150px !important;
}
.w-200px {
  width: 200px !important;
}
.w-250px {
  width: 250px !important;
}

.z-depth-1{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
}
.z-depth-2{
  -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)!important;
  box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)!important;
}
.z-depth-3{
  -webkit-box-shadow: 0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)!important;
  box-shadow: 0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)!important;
}
.z-depth-4{
  -webkit-box-shadow: 0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21)!important;
  box-shadow: 0 16px 28px 0 rgba(0,0,0,.22),0 25px 60px 0 rgba(0,0,0,.22)!important;
}

/* メニュー系デザイン */
.side-menu{
  height: 100%;
  position: fixed;
  top: 50px;
  left:0;
  z-index:1;
  width: 200px;
  overflow: hidden;
}
.nav-link span{
  font-size: 0.8rem;
  color: white;
}
.dropdown-menu a:hover{
  background-color:rgba(255,255,255,0.1);
}
.navbar-collapse a{
  color: white;
}
.navbar a{
  color: whitesmoke;
}
.navbar{
  height: 50px;
}
#navbar{
  margin-left: auto;
  padding-right: 0px;
  font-size: 0.8rem;
}
#navbar-col ul{
  padding-left: 20px;
}
.menu .nav .nav-link:hover {
  background: rgba(255,255,255,0.1);
}
.menu{
  width: 200px;
  padding-top: 20px;
  float: left;
  overflow: hidden;
}
.menu a{
  line-height: 2.2;
}
.menu .nav .nav-link {
  color: whitesmoke;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
}

.sub-menu{
  width: 0;
  padding-top: 68px;
  float: left;
  height: 100%;
  opacity: 0.8;
  position: fixed;
  margin-left: 200px;
  overflow: hidden;
  overflow-y:scroll;
}

.sub-menu a{
  line-height: 2.2;
}
.sub-menu .nav .nav-link {
  color: white;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
}
.sub-menu .nav .nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: black;
}



.nav-tabs{
  border-bottom:3px solid #0099CC;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  border-color: #0099CC !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  border-color: #0099CC !important;
}
.nav-tabs a{
  color: black;
}
.nav-tabs .active{
  color: white !important;
  background-color: #0099CC !important;
}


/* TABLE設定 */
table{
  table-layout: fixed;
  resize: none;
 }
 table.table td, table.table th {
  font-size: 0.8rem !important;
  /* line-height: 0.8rem; */
}
 table,td,th {
 border-collapse: collapse;
 /* border:1px solid #333; 稲岡が編集*/
 }
table .tc{
 text-align: center;
}
table .th{
  background-color: gray;
  color: white;
}



/* DIV-TABLE設定 */
/* .div-table{} */
.thead-gray{
  background-color: #343a40;
  color: #fff;
}
.tr-mid{
  line-height: 3rem;
}
.tr-small{
  line-height: 2rem;
}
.tr-link:hover{
  background-color:lightgray
}
.td-link:hover{
  background-color:lightgray;
}
.td-link{
  padding: 0;
  text-decoration: none!important;
  color: black;
}