/*
 * index.html
 */
html.connectionSettings,
body.connectionSettings {
  height: 100%;
}

body.connectionSettings {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f8f9fc;
}

.form-connectionSettings {
  width: 100%;
  max-width: 400px;
  padding: 15px;
  margin: auto;
}

html,
body {
  height: 100%;
}

/*
 * Sidebar
 */
.flex-wrapper {
  display: -webkit-flex;
  display: flex;
}

.flex-contents {
  -webkit-flex: 1;
  flex: 1;
}

.flex-sidebar {
  position: fixed;
  top: 60px;
  width: 14rem;
  padding-right: 0rem;
  padding-left: 0rem;
  height: calc(100vh - 60px);
}

#sidebar .nav-link {
  margin-top: 1rem;
}

#sidebar a:not(.active) {
  color: gray;
}

#sidebar a:hover, #sidebar a:focus {
  color: white;
}

#sidebar > .nav-item > a.active  {
  color: white;
}

#sidebar > .nav > .form > .nav-item > .nav-link  {
  margin-top: 0rem;
  padding-right: 1rem;
}

#sidebar > .nav > .form > .nav-item > .nav-link:hover,
#sidebar > .nav > .form > .nav-item > .nav-link:focus  {
  color: black;
  font-weight: 500;
}

#collapseDeviceMonitorLink.show,
#collapseDataMonitorLink.show,
#collapseSettingLink.show {
  display: block;
}
#collapseDeviceMonitorLink.collapsing,
#collapseDataMonitorLink.collapsing,
#collapseSettingLink.collapsing {
  display: block;
}

.nav-item > .rounded:hover {
  background-color: #eaecf4;
}

/*
 * Navbar
 */
.navbar-sticky {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 1049;
}

.navbar-brand {
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: 1.25rem;
}

.navbar .navbar-toggler {
  border-color: rgba(0,0,0,0);
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-underline .nav-link.active{
  color: #0d6efd;
  border-bottom: 2px solid #0d6efd;
}

.nav-underline .nav-link{
  color: rgba(0, 0, 0, 0.3);
}

.basic-tab {
  color: #ffffff;
  background-color: #1AA179;
}

.navbar-shortcut {
  position:fixed;
  right: .5rem;
  width: 35px;
}
 
/*
 * button
 */
 .btn-success {
  background-color: #1AA179;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-opacity: 1;
}

.btn-success.outline {
  border: 3px solid #1AA179;
  color: #1AA179;
}

.btn-lg-nl {
  --bs-btn-font-size: 1rem;
}

@media (min-width: 576px) {
  .btn-lg-nl {
    --bs-btn-font-size: 1.25rem;
  }
}

/*
 * contents
 */
.sidebar-block {
  position: static;
  top: 64px;
  min-width: 14rem;
  width: 14rem;
  height: calc(100vh - 60px);
}

.main-padding {
  padding-top: 60px;
}

.nav-block-3 {
  position: static;
  height: 200px;
}

.nav-block-4 {
  position: static;
  height: 235px;
}


.input-content {
  width: 200px
}

.form-control::placeholder{
  color: #cccccc;
}

.form-card {
  max-width: 360px;
  padding: 1rem;
}

.form-signin {
  max-width: 330px;
  padding: 1rem;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

/*
 * table
 */

 /*
.table td {
  padding: 0.5rem;
}*/
.table-mobile-responsive td::before {
  height: 20px;
}

/*
 * spinner
 */

.top-overlay {
  position: fixed;
  background: #00000060;
  color: #4123ebde;
  height: 100%;
  width: 100%;
  left: 0px;
  bottom: 0px;
  z-index: 5000;
  text-align: center;
  /*padding-top: 10%;*/
  -ms-opacity: .50;
  opacity: .50;
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.accordion-button:not(.collapsed) {
  color: #e7f1ff;
  background-color: #e7f1ff;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-button:not(.collapsed) {
  color: #000000;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.datepicker-days th.dow:first-child,
.datepicker-days td:first-child {
  color: #f00;
}
.datepicker-days th.dow:last-child,
.datepicker-days td:last-child {
  color: #00f;
}

.list-indent-1 > li {
  text-indent: -1.3em;
  padding-left: 1.5em;
}

.list-indent-2 > li {
  text-indent: -1.4em;
  padding-left: 1.5em;
  margin-left: 2.5em
}

.list-indent-3 > li {
  text-indent: -2.5em;
  padding-left: 2.5em;
}