Stage_2

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;

  font-family: Tahoma;
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: 12px;
}

body{
  height: 110vh;
  width: 100%;
  background-color: #1B1E27;

  color: #8C99B2;
}

.text-end_1{
  color: #F7931E;
}

.gradient-element{
  position: relative;
}

.gradient-orange{
  left: 10%;
  position: absolute;
  width: 17%;
  height: 85px;

  background: linear-gradient(90deg, #FF8C00 0%, rgba(255, 140, 0, 0) 89.86%);
  opacity: 0.2;
}

.gradient{
  left: 10%;
  position: absolute;
  width: 17%;
  height: 85px;

  background: linear-gradient(90deg, #5B607D 0.03%, rgba(91, 96, 125, 0) 83.85%);
  opacity: 0.2;
}

.element-2{
  display: flex;
  flex-direction: column;
  background: rgba(18, 21, 30, 0.5);

  border: 1px solid rgba(96, 101, 128, 0.5);
  border-left: 2px solid #606580;
  height: 85px;
  width: 86.4%;

  margin-top: 20px;
  margin-left: 10%;

  padding: 13px 20px 18px 32px;
}

.element-2:hover{
  border: 1px solid rgba(96, 101, 128, 1);
  border-left: 2px solid #606580;
  background-color: #1B1E27;
}

.element-1{
  display: flex;
  flex-direction: column;
  background: rgba(18, 21, 30, 0.5);

  border: 1px solid rgba(247, 147, 30, 0.5);
  border-left: 2px solid #F7931E;;
  height: 85px;
  width: 86.4%;

  margin-top: 204px;
  margin-left: 10%;

  padding: 13px 20px 18px 32px;
}

.element-1:hover{
  border: 1px solid rgba(247, 147, 30, 1);
  border-left: 2px solid #F7931E;;
  background-color: #1B1E27;
}

.number{
  font-size: 11px;
  margin-right: 13px;
}

.podcategory{
  font-size: 10px;
  margin-right: 8px;
}

 .header-element{
  display: flex;
  margin-bottom: 13px;
}

.line-1{
  background-color: transparent;
  border-top: 0.5px solid #606580;
  align-self: center;
  width: 5%;
  margin-right: 1%;
}

.install{
  margin-right: 14px;
}

.line-2{
  background-color: transparent;
  border-top: 0.5px solid #606580;
  align-self: center;
  width: 75%;
  margin-right: 2%;
}
.date{
  margin-right: 1%;
}

.main-elememt{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.temperature{
  color: white;
  font-size: 13px;
  width: 97%;
}

.vector{
  margin-left: 1%;
}

.vector_1{
  margin-left: 1%;
}
.trash{
  margin-left: 1%;
}

.review-gradent{
  position: relative;
}

.gradientR{
  position: absolute;
  width: 145px;
  height: 100%;

  background: linear-gradient(90deg, #5B607D 0.03%, rgba(91, 96, 125, 0) 83.85%);
  opacity: 0.2;
}

.review{

  background: rgba(18, 21, 30, 0.5);

  border: 1px solid rgba(96, 101, 128, 0.5);
  border-left: 2px solid #606580;

  text-transform: uppercase;
  padding: 10px 11px 17px 10px;

  width: 145px;
  height: 80px;
  margin-right: 40px;
}
.text{
  font-size: 13px;
  line-height: 16px;
  height: 40px;

}

.info{
  display: flex;
  justify-content: space-between;
}

.numbers{
  font-size: 18px;
}

.buttons{
  display: flex;
  margin: 5% 0;
  margin-left: 10%;
}

.task-gradient{
  position: relative;
}

.gradientT{
  position: absolute;
  width: 145px;
  height: 100%;

  background: linear-gradient(90deg, #0487FD 0%, rgba(4, 135, 253, 0) 84%);
  opacity: 0.2;
}

.task{

  color: white;
  padding: 10px 11px 17px 10px;
  width: 180px;
  height: 80px;
  background: rgba(18, 21, 30, 0.5);
  border: 1px solid rgba(96, 101, 128, 0.5);
  border-left: 2px solid #0089FF;
  margin-right: 40px;
}

.button{
  border: none;
  padding: 6px 18px;
  width: 150px;
  height: 30px;

  background: #303549;
  color: #8C99B2;
  border-radius: 1px;
}

.button:hover{
 background: #0089FF;
 color: white;
}

.avt{
  display: flex;
  flex-direction: column;
  margin-left: 10%;
  background: rgba(31, 34, 46, 0.5);
  width: 35%;
  height: 207px;
}

.num{
  color: white;
  font-size: 14px;
  margin-right: 5%;
}

.avt-10{
  text-align: left;
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
  width: 67%;
}

.in-process{
  font-size: 14px;
  margin-right: 2%;
  color: #606580;
}

.in-process-2{
  font-size: 14px;
  margin-right: 2%;
  color: #FF0000;
}

.process{
  text-align: center;
  padding: 20px 18px 15px 20px;
  display: flex;
  border-bottom: 1px solid #1B1E27;
  height: 45px;
}

.time{
  margin-bottom: 4px;
}

.setBlue{
  margin-left: 2%;
  margin-bottom: 4px;
}

.information{
  height: 113px;
  padding: 20px 68px 30px 20px;
  border-bottom: 1px solid #1B1E27;
}


.information > h1{
  font-size: 18px;
  line-height: 20px;
  color: white;
  margin-bottom: 10px;
}


.information > h2{
  font-size: 18px;
  line-height: 20px;
  width: 70%;
}

.dateTime{
  display: flex;
  justify-content: space-between;
  color: white;
  background: rgba(39, 42, 56, 0.5);
  padding: 20px 18px 11px 20px;
}

.data{
  font-size: 12px;
  line-height: 14px;
  width: 23%;
  width: 30%;
}

.table{
  padding: 6px 12px;
  background: rgba(93, 96, 123, 0.2);
  border-radius: 2px;
  margin: 0 12px;
  margin-left: 42%;
}

.dateTime img{
  margin: auto 0 ;
  margin-left: 2%;
}

.avts{
  display: flex;
}