:root{
  --primary:#f36847;
}
body {
  padding: 0;
  margin: 0;
  height: 100vh;
  background: #f6f6f6;
}


.navbar{
  background: #ffffff;
}
.navbar-brand{
  width: 100%;

}
.navbar img{
    /* margin-top: -25px; */
    width: 50%;
}
.alert {
  position: fixed;
  top: 10%;
  right: 5px;
}
.login-header {
  color: #f36847;
  text-align: center;
  margin-bottom: 20px;
  font-size: 22px;
}

a.sign_out {
  border: 1px solid white;
  background: #f84e6c;
  color: #fff;
  padding: 6px 9px;
  border-radius: 5px;
  width: 106px;
  /* margin-top: 10px; */
  text-decoration: none;
}

label.error {
  color: red;
}

a.sign_out:hover{
  

  color: #f84e6c;
  background: white;
  border-color: #f84e6c;
  

}

label {
  display: inline-block;
  margin-bottom: .5rem;
  color: #404040;
  font-weight: 500;
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #fff;
  outline: 0;
  border: 1px solid #ccc;
  box-shadow: none;
}

.login_btn{
  background-color: var(--primary);
  border: 1px solid;
  color: white;
  margin: 10px auto;
}

a#result_btn{

  background-color: var(--primary);
  border: 1px solid;
  color: white;
  width: auto;
  /* margin: 10px auto; */

}

.btn_row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.login_btn:hover,a#result_btn:hover{
  background-color: #fff;
  border: 1px solid  var(--primary);
  color:  var(--primary);
}

button.btn.login_btn{
  width: 100%;

}


.info{

 margin: 20px auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

.info p{

 width: 33%;
 }

canvas {
  border: 1px solid #ccc;
  background: #fff;
  width: 100%;
  

}


.student_details{
    height: 67%;
}
.student_info {
  width: 100%;
  margin: 25px auto;
  margin-bottom: 0;
}

div#tiff-container{
  width: 700px;margin:20px auto
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;

  
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 35px 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



.btn-primary {
  width: 100%;
}


.mt-100{
margin-top:100px;
}

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.table-row {
  display: flex;
  flex-wrap: wrap;
}
.table-cell {
  display: table-cell;
  padding: 8px;
  border: 1px solid #ccc;
  vertical-align: top; /* Aligns content to the top of the cell */
}
.table-cell strong {
display: inline-block;
width: auto;
background: transparent;
}

footer {
  /* background-color: #333; */
  color: #555555;
  text-align: center;
  font-size: 14px;
  padding: 8px 0;
  position: relative;
  float: right;
  margin-right: 65px;
}
.footer-content {
  max-width: 800px; /* Maximum width for the content */
  margin: 0 auto; /* Center the content */
}

.footer-line {
 
  border: 0; /* Remove default border */
  height: 1px; /* Height of the line */
  background-color: transparent; /* Color of the line */
  margin: 10px 0; /* Margin above and below the line */
}