html {
  overflow-y: scroll;
}

main {
  background-color: white;
}

footer {
  padding-top: 7px;
  padding-bottom: 7px;
}
/*
.title {
  width: 110px;
  background-color: #f4f4f4;
  font-weight: bold;
}
*/

nav {
  background-color: darkgray;
}

.nav-link > button {
  min-width: 100px;
  font-weight: bold;
  color: black;
  background-color: #f4f4f4;
}

.btn-150 {
  width: 150px;
}

.pb-75 {
  padding-bottom: 75px;
}

.display-none {
    display: none;
}

/* number型のスピンボタン消去 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance:textfield;
}


/* login  */
#LeftPane {
    background-color: #1C3C8E;
    height: 100%;
}
#RightPane {
    background-color: #4DA6FF;
    height: 100%;
}

#LoginForm {
  height: 1200px;
}

@media screen and (max-width: 1280px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
  #LoginForm {
    height: 1024px;
  }
}
@media screen and (max-width: 1024px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
  #LoginForm {
    height: 768px;
  }
}
@media screen and (max-width: 768px) {
  /*　画面サイズが768pxからはここを読み込む　*/
  #LoginForm {
    height: 1024px;
  }
  #LeftPane {
    height: 40%;
  }
  #RightPane {
    height: 60%;
  }
}
@media screen and (max-width: 576px) {
  /*　画面サイズが576pxからはここを読み込む　*/
  #LoginForm {
    height: 800px;
  }
  #LeftPane {
    height: 30%;
  }
  #RightPane {
    height: 70%;
  }
}

#LeftPane > div,
#RightPane > div {
  width: 100%;
  height: 85%;
}

input[name=passWord] {
  font-size: xx-large;
}

input[name=reMember] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}


/* 背景色 */
.bg-brown {
  background-color: #5b2e00;
  color: white;
}

.bg-puple {
  background-color: #dfbfff;
}

.bg-pink {
  background-color: #ff80ff;
}


/* input-group-text */
.igt-login {
  border: 0;
  width: 120px;
  background-color: rgba(0, 0, 0, 0);
  color: black;
}

.igt-horeg {
  width: 150px;
}

@media screen and (min-width: 576px) and (max-width: 1024px) {
    /*　画面サイズが576px～1024pxからはここを読み込む　*/
    .igt-horeg {
        width: 75px;
        padding-left: 5px;
        font-size: 14px;
    }
}

.igt-hodtl {
  width: 150px;
}

@media screen and (max-width: 768px) {
    /*　画面サイズが768pxからはここを読み込む　*/
    .igt-hodtl {
        width: 75px;
        padding-left: 5px;
        font-size: 14px;
    }
}

.igt-delireg {
  width: 180px;
}

@media screen and (max-width: 576px) {
    /*　画面サイズが576pxからはここを読み込む　*/
    .igt-delireg {
        width: 70px;
        padding-left: 5px;
        font-size: 14px;
    }
}

.line-hgt100 {
    line-height: 100%;
}


/* googleマップ_縦横比の維持 */
#wrapper {
  position: relative;
  width: 100%;
}
#wrapper th {
  width: 45px;
}
#wrapper th:first-child {
  width: 80px;
}
#wrapper > div:first-child {
  width: 170px;
}
@media screen and (max-width: 1200px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
    #wrapper {
      height: 1000px;
    }
}
@media screen and (max-width: 1024px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
    #wrapper {
      height: 780px;
    }
}
@media screen and (max-width: 768px) {
  /*　画面サイズが768pxからはここを読み込む　*/
    #wrapper {
      height: 1100px;
    }
    #wrapper > div:first-child {
      width: 100px;
    }
}
#wrapper:before {
  content:"";
  display: block;
  padding-top: 91%;
}
#wrapper > div:first-child {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 7px;
}

#mapField {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* トグルボタン用 */
label.btn {
    width: 75px;
}

/* テーブルフォント */
table {
    font-size: 13px;
}
@media screen and (max-width: 1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/
    table {
        font-size: 12px;
    }

    #unsettledHandingOverList table,
    #unsettledDeliveryList table {
        font-size: 11px;
    }
}
@media screen and (max-width: 768px) {
    /*　画面サイズが768pxからはここを読み込む　*/
    table {
        font-size: 11px;
    }
}

/* マウスカーソル */
.hand {
    cursor: pointer;
    cursor: hand;
}


/* deliveryRegist.php */
input[name=deliveryNo],
input[name=checkYear],
input[name=checkExeYear],
input[name=carNumber],
input[name=deliveryQuantity],
input[name=deliveryTotal] {
    max-width: 80px;
    min-width: 80px;
}

input[name=checkMonth],
input[name=checkExeMonth],
input[name=checkExeDay],
input[name=checkDay] {
    max-width: 60px;
    min-width: 60px;
}

select[name=mixingHours],
select[name=mixingMinutes],
select[name=deliveryHours],
select[name=deliveryMinutes] {
    max-width: 65px;
    min-width: 65px;
}

select[name=companyName] {
    max-width: 400px;
}

select[name=materialName] {
    max-width: 500px;
}

/* deliveryList.php */
#deliveryYear {
   width: 75px;
}

#deliveryMonth,
#deliveryDay {
    width: 60px;
}

#extensionMenu {
    display: none;
}

#materialName {
    width: 430px;
    display: none;
}

.footer-bt {
    border-top: 1px solid gainsboro;
}

/* handingOverRegist.php */
.voucherimage {
    width: 100%;
    height: 500px;
    border: 1px silver solid;
}

@media screen and (max-width: 576px) {
  /*　画面サイズが576pxからはここを読み込む　*/
    .voucherimage {
        height: 400px;
    }
}


select[name=arrivalHours],
select[name=arrivalMinutes] {
    max-width: 65px;
}

/* handingOverList.php */
#handOverYear {
   width: 75px; 
}

#handOverMonth,
#handOverDay {
    width: 60px;
}

#listBack {
    width: 120px;
    display: none;
}

/*
 * Page上部へ戻るボタン
 */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 110%;
  font-weight: bold;
}
#page-top a {
  display: block;
  background: #aaf;
  color: #fff;
  width: 100px;
  padding: 20px 0;
  opacity: 0.8;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}
#page-top a:hover {
  background: #bbf;
  text-decoration: none;
}

/* InfoWindow対応 */
/* InfoBoxでマーカーの下部にBoxを表示する際のクラス */
#page-top {
    display: none;
}
.info-box-wrap {
  background: #ffffff;
  overflow: hidden;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.08);
  padding-top: 12px;
  padding-bottom: 6px;
}
.info-box-wrap:before{
  content : " ";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid #fff;
  position:absolute;
  top:-18px;
  left:59px;
}
.info-box-text-wrap {
  text-align: center;
}
/* InfoBoxでマーカーの上部にBoxを表示する際のクラス */
.info-box-wrap_tp {
  background: #ffffff;
  overflow: hidden;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.08);
  padding-top: 12px;
  padding-bottom: 6px;
}
.info-box-wrap_tp:before{
  content : " ";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid #fff;
  position:absolute;
  top:40px;
  left:59px;
}
/* InfoWindow対応 */


/*
    2018/12/04 追加
    ファイルアップロード
*/
.custom-file-input:lang(ja) ~ .custom-file-label::after {
  content: "参照";
}
     
.custom-file {
  overflow: hidden;
}
.custom-file-label {
  white-space: nowrap;
}

#remoteCheckMonthly {
   width: 150px; 
}

/* サムネイル表示 */
.thumbnail {
    max-height: 60px;
}

.thumbnail-m {
    max-height: 100px;
}

/*
    2019/01/17
    3DScanSurveyEdit.php
*/
input[name=surveyYear] {
    max-width: 80px;
    min-width: 80px;
}

input[name=surveyMonth],
input[name=surveyDay] {
    max-width: 60px;
    min-width: 60px;
}

.igt-3d {
  width: 200px;
}

/*
    2019/02/01
    dynamicsObservation.php
*/
.igt-graph {
  width: 120px;
}

.igt-graph-t {
  width: 180px;
}

@media screen and (max-width: 576px) {
  /*　画面サイズが576pxからはここを読み込む　*/
    .igt-graph,
    .igt-graph-t
    {
        padding-left: 5px;
        font-size: 14px;
    }
    .igt-graph {
        width: 100px;
    }
    .igt-graph-t {
        width: 120px;
    }
}

input[name=scaleXYear] {
    max-width: 80px;
    min-width: 80px;
}

input[name=scaleXMonth],
input[name=scaleXDay] {
    max-width: 60px;
    min-width: 60px;
}

/* ラベルのスタイル　*/
.chkbox label {
    padding-left: 25px; /* ラベルの位置 */
    padding-right: 10px; /* ラベルの位置 */
    font-size: 18px;
    line-height: 20px;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

/* ボックスのスタイル */
.chkbox label:before {
    content: '';
    width: 20px;    /* ボックスの横幅 */
    height: 20px;   /* ボックスの縦幅 */
    display: inline-block;
    position: absolute;
    left: 0;
    background-color: #fff;
    border: solid 1px #d3d3d3;
    border-radius: 6px 6px 6px 6px;
}

/* 元のチェックボックスを表示しない */
.chkbox input[type=checkbox] {
    display: none;
}

/* チェックした時のスタイル */
.chkbox input[type=checkbox]:checked + label:before {
    content: '\2713';       /* チェックの文字 */ 
    font-size: 20px;        /* チェックのサイズ */
    color: #fff;            /* チェックの色 */
    background-color: #06f; /* チェックした時の色 */
}

@media screen and (max-width: 576px) {
    /*　画面サイズが576pxからはここを読み込む　*/
    .chkbox {
        height: 65px;
    }

    /* ラベルのスタイル　*/
    .chkbox label {
        padding-left: 18px; /* ラベルの位置 */
        padding-right: 3px; /* ラベルの位置 */
        font-size: 16px;
    }

    /* ボックスのスタイル */
    .chkbox label:before {
        width: 18px;    /* ボックスの横幅 */
        height: 18px;   /* ボックスの縦幅 */
    }

    /* チェックした時のスタイル */
    .chkbox input[type=checkbox]:checked + label:before {
        font-size: 16px;        /* チェックのサイズ */
    }
}