/*Ligt theme colors*/
:root {
  --bg-color: #f8f8f8;
  --txt-color: #212121;
  --lnk-color: #0033cc; 
  --table-border-color:#eeeeee ;
  --table-bg-color: #ffffff;
  --table-bg-hover-color:#f3f3f3;
  --btn-hover-bg-color: #d2d2d2;
}

/* Dark theme colors*/
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #383c4a;
    --txt-color: #bbc0ca;
    --lnk-color: #809fff;
    --table-border-color: #373c48 ;
    --table-bg-color:#2a2e3a ;
    --table-bg-hover-color: #373b46;
    --btn-hover-bg-color: #2a2e3a;
    --color-footer: #2e323e;
  }
}

/*Genral Style*/
body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: var(--txt-color);
  background: var(--bg-color);
  font: 100% system-ui;
}

.container{
  padding: 1%;
}

a {
  color: var(--lnk-color);
}

.HeadIcon {
  color: #0046a1;
  font-size: 100px;
}

.text-center {
  text-align: center;
}

.alert.alert-danger {
  margin-bottom: 5px;
  text-align: center;
  border-radius: 50px;
  border: 2px darkred solid;
  background: red;
  max-width: 250px;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 5px 0;
  background-color: var(--color-footer);
  color: var(--txt-color);
}
footer >.right {
  float: right;
  padding-right: 1%;
  
}
footer > .left {
  float: left;
  padding-left: 1%;
}