body {
  font-family: Arial, sans-serif;
  display: flex;
  height: 600px;
  width: 800px;
  background-color: rgb(224,223,236);
}

h1 {
  text-align: center;
  color: #333;
}

.main_frame{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 400px;
  margin: 0 auto;
  background-color: #fff;
  top: 190px;
  z-index: 3;
  border-radius: 30px;
}

.main_frame_index{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 900px;
  height: 750px;
  margin: 0 auto;
  background-color: #fff;
  top: 220px;
  z-index: 3;
}

.title_page{
  position: absolute;
  height: 80px;
  width: 500px;
  top: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  font-weight: 540;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-image: linear-gradient(to bottom,  #23d1ff, #1c7f9e, #f7f7f7);
  color: #fff;
  z-index: 4;
  border-radius: 30px 30px 0px 0px;
}

.btn-close{
  position: absolute;
  height: 20px;
  width: 20px;
  top: 30px;
  left: 1450px;
  z-index: 3;
  background-color: #fff;
}

.top_bar_frame{
  position: absolute;
  width: 1300px;
  height: 80px;
  background-color: #212529;
  left: 210px;
  top: 5px;
  z-index: 0;
  background-image: linear-gradient(to bottom, #1192fc, white);
  border-radius: 20px;
}

.left_bar_frame{
  position: absolute;
  width: 200px;
  height: 1185px;
  background-color: #126ac3;
  left: 5px;
  top: 5px;
  z-index: 1;
  background-image: linear-gradient(to left, #1192fc, white);
  
  border-radius: 20px;
}

.v_forward_frame{
  position: absolute;
  width: 300px; 
  height: 150px; 
  left: 100px; 
  top: 100px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

.c_forward_frame{
  position: absolute;
  background-color: #212529; 
  width: 300px; 
  height: 150px; 
  left: 490px; 
  top: 100px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

.v_d_forward_frame{
  position: absolute;
  background-color: #212529; 
  width: 300px; 
  height: 150px; 
  left: 880px; 
  top: 100px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

.v_reverse_frame{
  position: absolute;
  width: 300px; 
  height: 150px; 
  left: 100px; 
  top: 350px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(13, 203, 7);
}

.c_reverse_frame{
  position: absolute;
  background-color: #212529; 
  width: 300px; 
  height: 150px; 
  left: 490px; 
  top: 350px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(13, 203, 7);
}

.v_d_reverse_frame{
  position: absolute;
  background-color: #212529; 
  width: 300px; 
  height: 150px; 
  left: 880px; 
  top: 350px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(13, 203, 7);
}

.dashboard_frame{
  position: absolute;
  width: 1295px; 
  height: 1100px;
  top: 90px;
  left: 210px;
  background-image:  url('../bg_img.jpg');
  background-size: cover; /* Ensure the image covers the entire div */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  border-radius: 20px;
}

.container {
  display: flex;
  width: 100%;
}

.sidebar {
  width: 200px;  
  padding: 20px;
  top: 200px;
  position: absolute;  
}

.sidebar ul {
  list-style: none;  
  padding: 0;  
}

.sidebar li {
  margin-bottom: 20px;  
}

.sidebar a {
  display: block; 
  padding: 15px;  
  text-decoration: none;  
  color: black;
  font-size: 30px;
}

.sidebar a:hover {
  background-color: #a8d3cd;  
}

.log_frame{
  height: 715px; 
  width: 1295px; 
  top: 90px; 
  left: 210px; 
  position: absolute;
  background-image: url("../bg_img.jpg");
  background-size: cover; /* Ensure the image covers the entire div */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  border-radius: 20px;
}