html {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    font-size: .875em;
}

:root {
  --toolbar-width: 90px;
  --tabbar-height: 32px;
  --menu-height: 38px;
  --footer-height: 30px;
}

/* スマホ対応 */
@media screen and (max-width: 480px) {
  /* 画面サイズが480px以下の設定 */
  .toolbar {
    display: none;
  }

  .font-style {
    font-size: 11px !important;
    font-weight: normal;
  }

  .font-small {
    font-size: 11px;
    font-weight: normal;
  }
}

/* iPad対応(Mini) */
@media screen and (min-width: 480px) and (max-width: 768px) {
  /* 画面サイズが480px以上、768px以下の設定 */
  .toolbar {
    display: block;
    width: var(--toolbar-width);
    /** heigh = 100vh - menuの高さ50px **/
    min-height: calc(100vh - var(--menu-height) - 2px);
  }

  .font-style {
    font-size: 13px;
    font-weight: normal;
  }

  .font-small {
    font-size: 11px;
    font-weight: normal;
  }
}

/* iPad対応 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 画面サイズが768px以上、1024px以下の設定 */
  .toolbar {
    display: block;
    width: var(--toolbar-width);
    /** heigh = 100vh - menuの高さ50px **/
    min-height: calc(100vh - var(--menu-height) - 2px);
  }

  .font-style {
    font-size: 13px;
    font-weight: normal;
  }

  .font-small {
    font-size: 11px;
    font-weight: normal;
  }
}

/* PC */
@media screen and (min-width: 1024px) {
  /* 画面サイズが1024px以上の設定 */
  .toolbar {
    display: block;
    width: var(--toolbar-width);
    /** heigh = 100vh - menuの高さ50px **/
    min-height: calc(100vh - var(--menu-height) - 2px);
  }

  .font-style {
    font-size: 13px;
    font-weight: normal;
  }

  .font-small {
    font-size: 11px;
    font-weight: normal;
  }
}

.page-content {
  max-width: 100%;
  max-height: 100%;
  padding: 0px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.toolbar-show {
  display: block;
}

.toolbar-hide {
  display: none;
}

.applayout-content {
  width: 100%;
  min-height: calc(100vh - var(--menu-height) - 2px);
}

main {
  width: 100%;
  height: calc(100% - var(--footer-height));
}

main > .main-module {
  width: 100%;
  height: 100%;
}

footer {
  /* position: fixed;
  bottom: 0; */
  width: 100%;
  height: var(--footer-height);
  /* background: linear-gradient(90deg, #f6f2ec 10%, #c9d6ed 50%, #f6f2ec 100%); */
  background: rgb(243, 243, 248);
}

#loading {
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff;
    opacity: 0.8;
    z-index: 2147483647;
}
    
#loading .loadingMsg {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -40px;
  padding-top: 90px;
}

#loading .loadingIcon {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -50px;
  margin-left: -40px;
  border-radius: 50%;
  animation: spinner 2s linear infinite;
}

@keyframes spinner {
  100% {
      transform: rotate(360deg);
  }
}

.hide {
  display: none;
}

.required {
  color: red;
}

.point-click {
  cursor:pointer;
}

/* スクロールバー全体 */
::-webkit-scrollbar {
  width: 10px;
}
/* スクロールバーの背景 */
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}
/* 移動させるスクロールバー */
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, .5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}