html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
*{margin:0;padding:0}

li{list-style:none}

img{vertical-align:top;border:none}

html {
  position: relative;
  min-height: 100%;
}

.modal{
  padding-right: 0px !important;
}
.bodycontent {
  padding-right: 0px !important;
}

body {
  width: 100%;
  margin-bottom: 60px;
  height: calc(100vh - 35px - 54px);
  padding-top: 132px;
  /* overflow-y: auto; */
  margin-bottom: 0 !important;
  overflow: hidden;
  font-family:'MS PGothic';
}

.bg-white {
  height: 50px !important;
  /* background-color: #4472C4 !important; */
  color: white !important;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 999;
}

.bg-white1 {
  height: 50px !important;
  background-color: #4472C4 !important;
  color: white !important;
  position: fixed;
  top: 97px;
  width: 100%;
  left: 0;
  z-index: 999;
  /* position: fixed;
  top: 0;
  left: 0;
  z-index: 99; */
}
.bg-white2{
  height: 40px !important;
  /* background-color: #4472C4 !important; */
  color: white !important;
  position: fixed;
  top: 47px;
  width: 100%;
  left: 0;
  z-index: 999;
  /* position: fixed;
  top: 0;
  left: 0;
  z-index: 99; */
}

.navbar{
  border-radius: 0 !important;
}

.navbar-brand{
  /* float: left; */
  width: 130px;
  min-width: 130px;
  margin-right: 80px;
  color: white !important;
}

#edit-password{
  position: fixed;
  top: 1px;
  right: 134px;
  width: 120px;
  height: 35px;
  z-index: 99;
}

#changePasswordModal label{
  font-weight: normal !important;
}
.container-fluid2{
  display: flex;
  justify-content: space-between;
}
.nav-list {
  /* float: right; */
  width: 730px;
  min-width: 730px;
  display: flex;
  justify-content: end;
  height: 50px;
  line-height: 50px;
  margin-bottom: 0 !important;
  font-size: 16px;
  margin-right: 15px;
  /* background-color: red; */
}


.nav-list .nav-items1{
 float: left;
 text-align: center;
 /* width: 210px !important; */
 flex-shrink: 0;
 color: white !important;
 list-style-type: none;
 margin-left: 40px;
}

.nav-list1 {
  width: 100%;
  min-width: 1520px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 0 !important;
  font-size: 14px;
  padding-left: 10px;
  margin-top: 8px;
  border-bottom: 1px solid grey;
}
.border-bottom{
  border-bottom: none !important;
}

.nav-list1 .nav-items11{
  width: 140px;
  float: left;
  height: 40px;
  text-align: center;
  flex-shrink: 0;
  color: white !important;
  list-style-type: none;
  margin-left: -1px;
  color: #4472C4 !important;
  padding: 0 10px;
  border: 1px solid grey;
  /* border-radius: 10px; */
  border-radius: 15px 15px 0 0;
  box-sizing: border-box;
  border-bottom: none;
}

.text-dark{
  color: white !important;
}

.text-dark1{
  color: #4472C4 !important;
  display: block;
  font-size: 16px;
  line-height: 43px;
}

.nav-link {
  text-decoration: none !important;
}

.nav-link.active {
  background-color: #4472C4 !important;
  color: white !important;
}

.container{
  width: 100%;
  /* height: calc(100vh - 35px - 54px); */
  /* background-color: yellowgreen; */
  max-width: 100% !important;
  /* margin-top: 40px; */
  display: flex;
  justify-content: space-between;
  /* padding-top: 8px; */
  padding: 8px 0;
  padding-top: 6px;
  padding-bottom: 0;
  position: relative;
}
.resize{
  width: 2px;
  height: 888px;
  background-color: black;
  position: relative;
  float: left;
  /* left: 473px; */
  cursor: col-resize;
}
.container .content{
  height: calc(100vh - 35px - 30px);
}
.container .left{
  width: 390px;
  height: calc(100vh - 260px);
  /* background-color: aqua; */
  overflow-x: auto;
  /* padding-top: 18px; */
  position: relative;
  min-width: 175px;
  /* border-right: 1px solid black; */
}

.link{
  height: 30px;
  text-align: left;
  text-indent: 34px;
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  left: 0;
  background-color: white;
  cursor: pointer;
  line-height: 30px;
  text-decoration: underline;
  text-decoration-color: #337ab7;
}

.fruit{
  width: 50px;
  margin-left: 1px;
  margin-right:18px;
}

.content-left {
    float:left;
    min-width: 175px;
}

.container .right {
    /* width: 1188px; */
    width: calc(100vw - 390px);
    height: calc(100vh - 157px);
    /* overflow-x: auto; */
    /* overflow-x: auto;
    overflow-y: hidden; */
}
.left-content{
  margin-bottom:0 !important;
  width: 150px;
  display: flex;
  justify-content: space-between;
}
.left-contenttext{
  margin-bottom:0 !important;
  width: 328px;
  display: flex;
  /* justify-content: space-between; */
  text-indent: 10px;
}
.left-content-input{
  width: 320px;
  display: flex;
  /* margin-left: 16px; */
  margin: 2px 16px;
}

.left-content1{
  margin-bottom:0 !important;
  display: flex;
  justify-content: start
}
.left-content3 {
  margin-bottom: 0 !important;
  /* display: flex;
  justify-content: center;*/
  float: initial;
  max-width: 400px;
  min-width: 175px;
}
.content-text{
  width: 100px;
  margin-left: 0;
  display: inline-block;
  font-size: 15px;
}
.content-text1{
  width: 100px;
  margin-left: -6px;
  display: inline-block;
}
.content-input{
  display: inline-block;
  width: 300px;
  overflow: hidden;
}
.content-input1{
  display: inline-block;
  width: 150px;
  overflow: hidden;
  margin-left: -9px;
  margin-top: -2px;
}
.content-list{
  /* margin-bottom: 16px; */
  max-width: 400px;
  padding-left:18px;
  /* min-width: 345px; */
}
#left-button{
  background-color: #5B9BD5;
  text-align: center;
  line-height: 12px;
  padding: 10px 20px;
  /* background-color: #4CAF50; */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  text-wrap: nowrap;
}
#left-button:hover{
  background-color: #5792ca;
  text-align: center;
  line-height: 12px;
  padding: 10px 20px;
  /* background-color: #4CAF50; */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.content-input input{
  border: 1px solid;
  outline: none;
  background-color: #E7E6E6;
}

.left-content-input input{
  border: 1px solid;
  outline: none;
  background-color: #FFFFFF;
}

.right-title{
  width: 1188px;
  height: 40px;
  line-height: 40px;
  /* background-color: antiquewhite; */
}
.title-list{
  width: 100%;
  min-width: 1100px;
  height: 40px;
  line-height: 40px;
  position: fixed;
  z-index: 99;
  background-color: white;
  /* background-color: #5B9BD5; */
}
.title-list li{
  /* width: 278px; */
  margin-right: 80px;
  height: 40px;
  line-height: 40px;
  float: left;
  text-align: left;
  font-size: 15px;
  /* background-color: white; */
  /* margin: 0 50px; */
}
/* #table-header-box{
  width: 1216px;
} */

#dataTablebox{
  width: calc(100vw - 400px);
  height: calc(100vh - 192px);
  overflow:auto;
}
/* #table-head.sticky {
  position: sticky;
  top: 0;
  z-index: 9993;
  border-collapse: separate;
} */

.placeholder {
  height: 0;
}

/* #table-head.sticky {
  position: sticky;
  top: 0;
  z-index: 9993;
  border-collapse: separate;
} */

#table-head {

  font-size: 12px;
  border-collapse:separate;
}

.sticky{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
}
/* 
#table-head .theadeone .cell-content-border2 {
  position: sticky;
  left: 270px;
  z-index: 999;
  background-color: white;
} */

#table {
  /* width: 100%; */
  /* width: 1216px; */
  /* height: 818px; */
  /* height: 642px; */
  /* background-color: green; */
  /* margin: auto; */
  border-collapse: collapse;
  font-size: 12px;
  border-bottom: 1px solid grey !important;
  border-collapse:separate;
  /* border-color: grey; */
}

#table tr td{
  background-color: white;
}

#table-head .theadeone td:first-child {
  position: sticky;
  left: 0;
  z-index: 999;
}

#table-head .header1 td:first-child {
  position: sticky;
  left: 0;
  z-index: 999;
  background-clip: padding-box; 
}

/* #table-head .header1 td:nth-child(2) {
  position: sticky;
  left: 203px;
  z-index: 999;
} */

.text-color{
  width: 100%;
  box-sizing: border-box;
}
#table tr td:first-child{
  position: sticky;
  left: 0;
  z-index: 999;
}

/* #table tr td:nth-child(2){
  position: sticky;
  left: 203px;
  z-index: 999;
} */

#table-head .header1 td:first-child,
#table tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 999;
  width: 212px !important;
}

#table-head .header1 td:nth-child(2),
#table tr td:nth-child(2) {
  position: sticky;
  left: 214px;
  z-index: 999;
  width: 79px !important;
}

.cell-scroll{
  width: 18px;
  background-color: #FFF2CC;
  border-top: 1px solid grey;
  border-right: 1px solid grey;
}

#DataGroup{
  /* width: 1268px; */
  /*width: 1230px;*/
  height: calc(100vh - 325px);
  /* overflow-y: auto;
  overflow-x: hidden; */
  /* border-bottom: 1px solid grey; */
  margin-top: -1px;
  /* position: relative; */
}

tr {
  height: 30px !important;
}
th {
  width: 500px;
  padding: 5px 5px;
  box-sizing: border-box;
  /* background-color: rgb(236, 236, 236); */
  font-weight: normal;
}
td {
  height: 30px !important;
  /* width: 188px; */
  line-height: 30px;
  /* padding-left: 5px; */
  box-sizing: border-box;
  /* border: 1px solid grey; */
}

.cell-content {
  position: relative;
  display: inline-block;
  height: 32px;
  width: 100%;
  border: lpx solid grey;
/*  border-right: 1px solid grey;*/
}
.cell-content2 {
  position: relative;
  display: inline-block;
  height: 32px;
  width: 100%;
  border: lpx solid grey;
/*  border-right: 1px solid grey;*/
}

.cell-content-border2 {
    width: 1px;
    border: 0px;
    /* border: 1px solid grey; */
}

.cell-content-border {
    width: 2px;
    border: 0px;
    border-right: 1px solid grey;
}

.td-bottom {
    border: 1px solid grey;
}

.border-right{
  border-right: 1px solid grey;
  border-left: 1px solid grey;
  height: 30px !important;
  /* border-bottom: 1px solid grey; */
}
#right-box{
  display: none;
}
.hidden {
  display: block !important;
}
.green{
  color: #70AD47;
}
.red{
  color: #FF0000;
}
.text-left{
  text-align: left;
  text-indent: 6px;
}

.pb-3{
  padding-bottom: 0 !important;
}

.container-fluid1{
  font-size: 16px;
  width: 100%;
  /* background-color: yellow; */
  height: 47px;
  display: flex;
  justify-content: space-between;
}

.navbar{
  margin-bottom: 0;
}

.titleimg{
  display: block;
  margin-left: 10px;
}

.login{
  width: 400px;
  height: 360px;
  /* background-color: aquamarine; */
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  margin-top: 10px;
  border-radius: 10px;
}

.login-input{
  width: 100%;
  height: 300px;
}

.login-button{
  height: 40px;
  margin-top: 70px;
  text-align: center;
}

.login-input-box{
  display: flex;
  justify-content: center;
}

.text-left{
  margin-left: 43px;
}

.button-login{
  width: 260px !important;
  height: 35px !important;
}

.h3{
  font-size: 20px;
  font-weight: 800;
}
.h4{
  font-size: 16px;
  font-weight: 800;
}
.text-box{
  width: 380px;
  height: 160px;
  border: 2px solid #5B9BD5;
  margin-left: 10px;
  margin-top: 10px;
  border-radius: 10px;
}

.text-bottom{
  text-align: center;
  margin-top: 10px;
}

.login-input-content{
  margin-top: 20px;
}

#login-button{
  background-color: #5B9BD5;
  text-align: center;
  line-height: 12px;
  padding: 10px 20px;
  /* background-color: #4CAF50; */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  text-wrap: nowrap;
}
#login-button:hover{
  background-color: #5792ca;
  text-align: center;
  line-height: 12px;
  padding: 10px 20px;
  /* background-color: #4CAF50; */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.hidden-title {
  display: none !important;
}

.login-btn{
  margin-top: 7px;
  margin-right: 1px;
  width: 120px !important;
  height: 35px;
}

.modal-dialog{
  width: 500px;
  font-size: 16px;
}

.btn-primary{
  width: 70px;
}
.btn-secondary:hover {
  background-color: lightgrey;
}
.overlay-content {
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
}

.loading-message {
  font-size: 40px;
  color: white;
}

#login{
  width: 400px;
  height: 650px;
  /* transform: translateY(25%); */
  /* position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-200px,-325px); */
  /* transform: translate(-50%,-50%); */
  /* overflow-y: auto; */
}
.body {
  overflow: auto;
}

.password-change-hovered{
  text-decoration: underline !important;
}