@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");



body {
  /*background-color: #000000; /*#1a1a1a;*/
  background-image: url("https://png.pngtree.com/thumb_back/fh260/back_pic/04/24/66/495836a65fcb8f9.jpg") ;
  /* background-image: linear-gradient(140deg, #343A4F 10%, #0F1620); */
  color: #ffffff;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(15px); /* For Safari */
  width:99%; /*Takes 90% width from WebContainer*/
  height: 100%;
  margin: auto;
  background-repeat:repeat;
  background-size: 100%;
	align-items: center;
	justify-content: center;
}

h1 {
  text-align: center;
  margin-top: 20px;
  color:white
}


.trans-box-header {
  background : rgba(0,0,0,.1);/*#0714458f; */
  width:auto; 
  border: solid #ffffff5c 1px; 
  margin-bottom:10px; 
  padding:0px;
  margin-top: 10px;
  border-radius: 7px;
}

.trans-box-body {
  background : rgba(0,0,0,.1);/*#0714458f; */
  width:auto; 
  height:100%;  
  border: solid #ffffff5c 2px; 
  margin-bottom:10px; 
  padding:20px;
  border-radius: 7px;
}

.trans-box-body-dashboard {
  background : rgba(0,0,0,.1);/*#0714458f; */
  width:auto; 
  height:auto;  
  border: solid #ffffff5c 2px; 
  border-radius: 7px;
  margin-bottom:10px; 
  padding:20px;
  justify-content: center;
  
}

.card {
  /*background-color: rgba(178, 115, 255, 0.08);/*#042f6d;*/
  background-color:#000000;
  border-radius: 5px;
  font-family: "Be Vietnam Pro", sans-serif;
  position: relative;
  /* left:64px; */
  font-size: 16px;
  font-weight: 200;
  padding: 20px;
  /* margin: 50px auto; */
  max-width: 500px;
  box-shadow: 0px 15px 15px rgba(0,0,0,0.6);
  border: solid #ffffff5c 2px;
  background-color: #343a4fa2;
  /*background-image: linear-gradient(122deg, #343A4F 20%, #0F1620)*/
  
}

.card-inline {
  /*background-color: rgba(178, 115, 255, 0.08);/*#042f6d;*/
  border-radius: 7px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 22px;
  font-weight: 200;
  padding: 20px;
  margin: 50px auto;
  max-width: 500px;
  box-shadow: 0px 15px 15px rgba(0,0,0,0.5);
  border: solid #ffffff5c 0px;
  background-color: #4d4855;
  background-image: linear-gradient(140deg, #343A4F 10%, #0F1620);
}

.code-box {
  /*background-color: rgba(178, 115, 255, 0.08);/*#042f6d;
  background-color:#000000;*/
  border-radius: 5px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  font-weight: 200;
  padding: 20px;
  margin: 50px auto;
  max-width: 500px;
  margin-left: 2rem;
  margin-right: 2rem;
  box-shadow: 3px 3px 7px rgba(0,0,0,0.6) inset;
  border: solid #ffffff5c 0px;
  background-color: #343a4f00;
  /*background-image: linear-gradient(122deg, #343A4F 20%, #343A4F); /*#0F1620*/
  
}
.code-box-info {
  /*background-color: rgba(178, 115, 255, 0.08);/*#042f6d;
  background-color:#000000;*/
  border-radius: 5px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size:16px;
  padding:5%;
  font-weight: 300;
  margin: 10px auto;
  max-width: 500px;
  margin-top: 2rem;
  box-shadow: -2px -2px 3px #ffffff69 inset;
  /* box-shadow: -2px -2px 3px #ffffff69 ; */
  border: solid #ffffff5c 0px;
  background-color: #00000065;
  /*background-image: linear-gradient(122deg, #343A4F 20%, #343A4F); /*#0F1620*/
  
}
label {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
}

select, input[type=text] {
  width: 96%;
  padding: 10px;
  border: none;
  background-color: #00000065;
  color: #ffffff;
  margin-bottom: 20px;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3) inset;
  border: solid #04528b 0px;
}

input[type=submit] {
  background-color: #00000038;/*#042f6d;/*#007bff;*/
  color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  
}

input[type=submit]:active {
  background-color: #00000038;
  /* box-shadow: 0 5px #00000038; */
  /* box-shadow: 0px 5px 5px rgba(0,0,0,0.4); */
  transform: translateY(4px);
}

input[type=submit]:hover {
  background-color: #00000038;/*#0056b3;*/
}
  
option {
  background-color: #000000;
}


/* Generic button styles */
.custom-button {
  background-color: #00000038;
  color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.custom-button:active {
  background-color: #00000038;
  /* box-shadow: 0 5px #666; */
  transform: translateY(4px);
}
/* CSS for the navigation bar */
ul.navbar {
  list-style-type: none;
  margin: 0px;
  padding: 10px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.253);
  border: solid #ffffff69 1px;
  border-radius: 7px;
  
}

ul.navbar li {
  float: left;
}

ul.navbar li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: white
}

ul.navbar li a:hover {
  background-color: #1b2845;
  background-image: linear-gradient(315deg, #1b2845 0%, #274060 74%);
  color: white;
  margin-right: 2px;
}


ul.navbar a.active {
  background-color: #1b2845;
  background-image: linear-gradient(315deg, #1b2845 0%, #274060 74%);
  border: solid #ffffff69 1px;
  color: white;
  margin-right: 2px;
  border-radius: 10px;
}

.logout {
  border: 0px solid black; 
  background-color: maroon; 
  -webkit-text-fill-color: white;
  border-radius: 10px;
}


table {
  border-collapse: collapse;
  border: 1px solid #000;
  margin-top:10px;
  width:100%;
}

th, td {
  border: 1px solid #ffffff88;
  padding: 8px;
  font-weight: 200;
}

.flash-box-history-error{
  padding:10px; 
  position: relative;
  left: 13%;
  margin-bottom:10px; 
  border-radius:5px; 
  border: solid white 1px; 
  color:white; 
  background-color: #ff000059;
  width: 70%;
  text-align: center;
}

/*---------------------------*/
/*---------------------------*/
/*---------------------------*/
/*---------------------------*/
/*---------------------------*/