@import url("https://fonts.googleapis.com/css2?family=PT+Sans&display=swap");

body {
  background: #ffffff;
}

/*progres boxes*/
.prog {
   margin: 0 auto;
  position: relative;
  margin: 2rem;

}

.col > .card {
  justify-content: center;
  height:100px;
} 
.progress-og{
  background-color: #fff2607f;
  border: solid 2px #d89250;
}
.progress-finsh{
  background-color: #9aff8f7f;
  border: solid 2px #50d890;
  color: #23234e;
}
.card > span {
margin-left:10px;
}
.card > .row > .icon > .bi{
  margin: 22px;
  font-size: 2rem;
}
.descript .head {
  font-weight: bold;
  font-size: 15px;
}
.descript .body{
  font-size: 0.8rem;
  display: block;
}


/*detail order*/
.container .detail-order{
  margin:1rem;
  border: solid 3px #272f4f;
  border-radius: 6px;
  height: 250px;
}

.container {
  margin: 0 auto;
  position: relative;
  /* margin-top: 3rem; */
}
.prog{
  margin-top: 3rem;
}
.leftbox {
  /* top: -5%; */
  left: 5%;
  position: absolute;
  width: 15%;
  height: 110%;
  /* background-color: #FFC482; */
  /* box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5); */
}

nav {
  margin: 2.6em auto;
}

nav a { 
  list-style: none;
  padding: 35px;
  color: #232931;
  font-size: 1.1em;
  display: block;
  transition: all 0.5s ease-in-out;
}

.rightbox {
  height: 100%;
}

.rb-container {
  font-family: "PT Sans", sans-serif;
  width: 100%;
  margin: auto;
  display: block;
  position: relative;
}

.rb-container ul.rb {
  width: 100%;
  margin: 2.5em 0;
  padding: 0;
  display: inline-block;
}

.rb-container ul.rb li {
  list-style: none;
  margin: auto;
  margin-left: 1rem;
  min-height: 50px;
  border-left: 3px dashed #23305f;
  padding: 0 0 15px 30px;
  position: relative;
}

.rb-container ul.rb li:last-child {
  border-left: 0;
  left: 3px;
}


/*.rb-container ul.rb li:before {*/
/*  position: absolute;*/
/*  left: -14px;*/
/*  top: 0;*/
/*  content: " ";*/
  /*border: 8px solid red;*/
/*  border: 8px solid rgb(20, 33, 65);*/
/*  border-radius :50%;*/
/*  background: #fefefe;*/
/*  height: 25px;*/
/*  width: 25px;*/
/*  transition: all 500ms ease-in-out;*/
/*}*/

/*.rb-container ul.rb li:hover:before {*/
/*  border-color: #232931;*/
/*  transition: all 1000ms ease-in-out;*/
/*}*/

/*.rb-container ul.rb li:nth-child(1) li:before{*/
/*  position: absolute;*/
/*  left: -14px;*/
/*  top: 0;*/
/*  content: " ";*/
/*  border: 8px solid red;*/
/*  border-radius:50%;*/
/*  background: #fefefe;*/
/*  height: 25px;*/
/*  width: 25px;*/
    
/*}*/
 .point{
  position: absolute;
  left: -14px;
  top: 0;
  content: " ";
  /*border: 8px solid red;*/
  border: 8px solid rgb(20, 33, 65);
  border-radius :50%;
  background: #fefefe;
  height: 25px;
  width: 25px;
}
.point-last{
  position: absolute;
  left: -14px;
  top: 0;
  content: " ";
  border: 8px solid red;
  /*border: 8px solid rgb(20, 33, 65);*/
  border-radius :50%;
  background: #fefefe;
  height: 25px;
  width: 25px;
}
.rb-container ul.rb li:nth-child(1){
    list-style: none;
    margin: auto;
    margin-left: 1rem;
    min-height: 50px;
    border-left: 3px dashed red;
    padding: 0 0 15px 30px;
    position: relative;
}

ul.rb li .timestamp {
  color: #2B3A67;
  position: relative;
  font-weight: bold;
  font-size: 1rem;
  margin:0.5rem;
  width: 100px;
  border-bottom: #d89250 2px solid;
}

.item-title {
  font-weight: bold;
  margin:0.5rem;
  font-size: 1rem;
  /* background-color: rgba(228, 0, 0, 0.63); */
  color: #171616;
  border-bottom: #496A81 2px solid;
}
.item-title > a {
  font-weight: bolder;
  color: rgb(216, 111, 7);
}
.item-title > span {
  font-weight: bolder;
  color: rgb(216, 111, 7);
}

.container-3 {
  width: 5em;
  vertical-align: right;
  white-space: nowrap;
  position: absolute;
}

.container-3 input#search {
  width: 150px;
  height: 30px;
  background: #fbfbfb;
  border: none;
  font-size: 10pt;
  color: #262626;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: 0.9em 0 0 28.5em;
  box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5);
}

.container-3 .icon {
  margin: 1.3em 3em 0 31.5em;
  position: absolute;
  width: 150px;
  height: 30px;
  z-index: 1;
  color: #4f5b66;
}

input::placeholder {
  padding: 5em 5em 1em 1em;
  color: #50d890;
}