:root {
  --font-size-rate: 1.50;
}

html,
body {
  height: 100%;
}
body {
  display: flex;
  color: #000000;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f5f5f5;
}

.notice {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  border-radius: 0px;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .form-floating:focus-within {
  z-index: 2;
}

.offcanvas-end.show {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.offcanvas-end {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  width: 250px;
}
.navbar {
  min-width: 360px !important;

  padding-top: 10px;
  background-color: #f5f5f5;
}
.nav-link {
  padding: 0.5rem;
}
.navbar-toggler {
  padding: 0.25rem 0.68rem;
}
.navbar-toggler:hover {
  box-shadow: 0 0 0 0.06rem;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0.05rem;
}
.navbar-toggler-icon {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.has-navbar {
  margin-top: 4rem !important;
}
.keyword-search {
  max-width: 15rem !important;
}

.offcanvas-body {
  color: #6c757d;
  background-color: #f5f5f5;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover {
  cursor: unset;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(109, 132, 180, 1);
}
.nav-sidebar a:hover {
  color: rgba(109, 132, 180, 1);
  background-color: rgba(109, 132, 180, 0.2);
}

.user {
  color: #f5f5f5;
  background-color: rgba(109, 132, 180, 1);
  font-size: calc(0.6rem * var(--font-size-rate));
  font-weight: bold;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  margin-bottom: 0.5rem;
}
.message {
  font-size: calc(0.6rem * var(--font-size-rate));
}
.row > .col-1 {
  text-align: center;
  font-size: calc(0.6rem * var(--font-size-rate));
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.result > [class^="col-"] {
  font-size: calc(0.6rem * var(--font-size-rate));
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.result > .title {
  background-color: rgba(239, 239, 239, 1);
}
.label {
  color: #000000;
  font-size: calc(0.6rem * var(--font-size-rate));
  font-weight: bold;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.graph > .col-1 {
  height: 190px;
}
.time > .col-1 {
  font-size: calc(0.7rem * var(--font-size-rate));
  font-weight: bold;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.status-info {
  background-color: rgba(0, 207, 111, 1);
}
.status-warinig {
  background-color: rgba(241, 207, 19, 1);
}
.status-alert {
  background-color: rgba(248, 54, 62, 1);
}
.status-unknown-text {
  color: rgba(255, 255, 255, 0.3);
}
.status-info-text {
  color: rgba(0, 207, 111, 1);
}
.status-warinig-text {
  color: rgba(241, 207, 19, 1);
}
.status-alert-text {
  color: rgba(255, 54, 62, 1);
}
.status-alert-text-result {
  color: rgba(236, 25, 25, 1);
}
.status-alert-text-time {
  color: rgba(255, 0, 0, 1);
}

.min-width {
  width: 0px;
}

.disable-focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #ced4da !important;
}

.width-100 {
  width: 100% !important;
  table-layout: fixed;
}

.td-max td {
  padding: 0.1rem !important;
}
.th-max th {
  padding: 0.1rem 0.3rem !important;
}

.width-3 {
  width: 3%;
}
.width-4 {
  width: 4%;
}
.width-5 {
  width: 5%;
}
.width-6 {
  width: 6%;
}
.width-7 {
  width: 7%;
}
.width-8 {
  width: 8%;
}
.width-9 {
  width: 9%;
}
.width-10 {
  width: 10%;
}
.width-11 {
  width: 11%;
}
.width-12 {
  width: 12%;
}
.width-15 {
  width: 15%;
}
.width-16 {
  width: 16%;
}
.width-18 {
  width: 18%;
}
.width-21 {
  width: 21%;
}
.width-24 {
  width: 24%;
}
.width-25 {
  width: 25%;
}
.width-26 {
  width: 26%;
}
.width-28 {
  width: 28%;
}