:root {  --bg: #f8fafc;  --body-bg: #e2e8f0;  --primary: #1081f1;  --primary-dark: #0263ca;  scrollbar-face-color: var(--bg);
  /* Firefox 63 compatibility */
  scrollbar-track-color: #dadde0;
  scrollbar-color: var(--bg) #dadde0;
  scrollbar-width: thin;}
::-webkit-scrollbar {  width: 5px;}
::-webkit-scrollbar-track {  background: #dadde0}
::-webkit-scrollbar-thumb {  background: var(--bg)}
html {  scroll-behavior: smooth;}
* {  box-sizing: border-box;}
h1 {  font-size: 20px;}
h2 {  font-size: 18px;}
h3 {  font-size: 16px;}
.heading {  padding: 5px;  margin: 10px 0 10px 0;  border-radius: 6px;}
p {  font-size: 15px;  margin: 9px 5px;}
/* urdu */
@font-face {  font-family: 'Noto Nastaliq Urdu';  font-style: normal;  font-weight: 500;  src: url(https://fonts.gstatic.com/s/notonastaliqurdu/v14/LhW4MUPbN-oZdNFcBy1-DJYsEoTq5pu3SvoMC9Y.woff2) format('woff2');  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;}
/*CSS FOR URDU*/
.urh1,
.urh2,
.urh3,
.urh4,
.urp {  font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu';  display: block;  text-align: right;  color: #dc3545;  line-height: 2.9;  direction: rtl;}
.urh1 {  font-size: 32px;  color: #dc3545;}
.urh2 {  font-size: 28px;  color: #dc3545;}
.urh3 {  font-size: 24px;  color: #dc3545;}
.urh4 {  font-size: 20px;  color: #dc3545;}
.urp {  font-size: 18px;  color: #000000;  line-height: 2.4;}
body {  margin: 0;  background-color: var(--body-bg);  font-family: Verdana, "Times New Roman", sans-serif;  font-size: 16px;  min-height: 100vh;  display: flex;  flex-direction: column;}
.nav-menu {  margin: 0 0 5px 0;  display: flex;  justify-content: space-between;  align-items: center;  background-color: #fff;  padding: 5px 18px;}
.logo {  border-radius: 0px;  font-size: 30px;  color: var(--primary);  font-weight: 600;  text-decoration: none;}
.loader {  border: 10px solid var(--bg);  border-radius: 50%;  border-top: 10px solid var(--primary);  width: 72px;  height: 72px;  -webkit-animation: spin 2s linear infinite;  /* Safari */  animation: spin 2s linear infinite;}
/* Safari */
@-webkit-keyframes spin {  0% {    -webkit-transform: rotate(0deg);  }  100% {    -webkit-transform: rotate(360deg);  }}
@keyframes spin {  0% {    transform: rotate(0deg);  }
  100% {    transform: rotate(360deg);  }}
.nav-links a {  text-decoration: none;  color: #000;  padding: 10px 12px;  border-radius: 5px;}
.nav-links .show-mobile-menu-icon {  display: none;  color: #000;}
.nav-sub {  overflow: hidden;  background-color: var(--bg);}
.nav-sub .a {  float: left;  display: block;  color: #000;  text-align: center;  padding: 14px 16px;  text-decoration: none;}
.nav-sub .nav-mobile-title {  display: none;}
.nav-sub .icon {  display: none;}
.dropdown {  float: left;  overflow: hidden;}
.dropdown .dropbtn {  font-size: 18px;  border: none;  outline: none;  color: #000;  padding: 14px 16px;  background-color: inherit;  font-family: inherit;  margin: 0;}
.dropdown-content {  display: none;  position: absolute;  background-color: var(--bg);  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);  z-index: 1;}
.dropdown-content .a {  float: none;  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;  text-align: left;}
.nav-links .a:hover,.nav-sub .a:hover,.dropdown:hover .dropbtn {  background-color: var(--primary);  color: white;}
.dropdown-content .a:hover {  background-color: var(--primary);  color: #fff;}
.dropdown:hover .dropdown-content {  display: block;}
ul.breadcrumb {  padding: 6px 16px;  list-style: none;  background-color: var(--bg);  margin: 0px}
ul.breadcrumb li {  display: inline;  font-size: 16px;}
ul.breadcrumb li+li:before {  padding: 4px;  color: black;  content: ">\00a0";}
ul.breadcrumb li a {  color: black;  text-decoration: none;}
ul.breadcrumb li a:hover {  color: var(--primary-dark);  text-decoration: underline;}
.marquee {  width: 100%;  line-height: 5px;  color: white;  white-space: nowrap;  overflow: hidden;  box-sizing: border-box;}
.marquee div {  display: inline-block;  padding-left: 100%;  animation: marquee 60s linear infinite;}
.marquee div span {  padding-left: 15px}
@keyframes marquee {  0% {    transform: translate(0, 0);  }  100% {    transform: translate(-100%, 0);  }}
.container {  display: flex;  align-self: center;  justify-content: center;  min-width: 100%;}
.container-side {  min-width: 30%;  margin: 5px;}
.container-main {  min-width: 60%;  margin: 5px;}
.container-full {  min-width: 90%;  margin: 5px;}
.content {  background-color: #fff;  display: block;  margin: 10px;  padding: 8px;  border-radius: 15px;}
.bottom-primary {  border-bottom: 3px solid var(--primary);  padding: 5px;  margin: 0 0 2px 0;}
.bottom-red {  border-bottom: 3px solid red;  padding: 6px;  margin: 0 0 10px 0;}
.bottom-green {  border-bottom: 3px solid green;  padding: 15px;  margin: 0 0 15px 0;}
.bottom-orange {  border-bottom: 3px solid orange;  padding: 15px;  margin: 0 0 15px 0;}
.text {  line-height: 1.5;}
.text-paper-info {  font-size: 12px !important;  line-height: 1.5;}
.img {  width: 100%;  height: auto;}
.card {  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  transition: 0.3s;  padding: 10px;  margin: 5px 9px;  width: 40%;  display: inline-block;}
.card:hover {  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);}
.card-link {  color: #000;}
.card img { width: 100px; height: auto; margin-top: 10px; float: right;}
table {  background: #fff;  border-collapse: collapse;  padding: 5px;  margin: 5px;  width: 100%;}
th {  width: 30%;  color: #000;  border-right: 1px solid #343a45;  font-size: 14px;  padding: 10px;  text-align: left;  vertical-align: middle;  word-break: break-word;  cursor: pointer;}
th:last-child {  border-right: none}tr {  border-top: 1px solid #343a45;  border-bottom: 1px solid #343a45;  color: #000;  font-size: 13px;  font-weight: 400;  text-shadow: 0 1px 1px rgba(256, 256, 256, .1)}
tr:hover td,
tr:hover td a {  background: var(--primary);  color: #fff;}
tr:first-child {  border-top: none}
tr:last-child {  border-bottom: none}
td {  background: #fff;  padding: 10px;  text-align: left;  vertical-align: middle;  font-size: 16px;  border-right: 1px solid #c1c3d1;  word-break: break-word}
td:last-child {  border-right: 0}
.btn-group button {  background-color: var(--primary);  border: 1px solid var(--primary-dark);  color: white;  padding: 25px 24px;  cursor: pointer;  float: left;  width: 46%;  margin: 15px 15px;  font-size: 24px;  font-weight: 600;}
.btn {  padding: 10px 16px;  border-radius: 25px;  background-color: transparent;  color: #000;  font-size: 16px;  text-decoration: none;  border: none;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 16px;  margin: 4px 2px;  cursor: pointer;}
.btn-primary {  color: #000;  border: 1px solid var(--primary-dark);}
.btn-primary:hover {  color: #fff;  background-color: var(--primary);  border: 1px solid var(--primary-dark);  font-weight: 700;}
.btn-green {  color: #000;  border: 1px solid green;}
.btn-green:hover {  color: #fff;  background-color: green;  border: 1px solid green;  font-weight: 700;}
.full-width {  width: 100%;}
.pie-chart {  display: block;  margin: 5px;  padding: 5px;  width: 100%;  height: auto;}
.ul {  background: #ffffff;}
.li a {  display: inline-block;  color: #000;  padding: 10px 8px;  margin: 2px;  text-decoration: none;  border-radius: 0px 20px 0px 20px;}
.li a:hover:not(.active) {  background-color: var(--primary);  color: white;  text-decoration: none;}
/* Clear floats (clearfix hack) */
.btn-group:after {  content: "";  clear: both;  display: table;}
.btn-group .button:not(:last-child) {  border-right: none;  /* Prevent double borders */}
/* Add a background color on hover */
.btn-group .button:hover {  background-color: var(--primary-dark);}
.info {  padding: 5px;}
.info-dimmed {  color: #575757;}
.flex-nav {  flex-wrap: wrap;  display: flex;  align-items: center;  justify-content: space-between;}
.flex-main {  flex-wrap: wrap;  display: flex;  align-items: center;  justify-content: space-between;}
.flex-content {  flex: 1;  padding: 8px;  text-align: left;  background: transparent;}
.footer {  display: flex;  justify-content: center;  align-items: center;  padding: 5px 15px;  margin: 2px 0 0 0;  background-color: #fff;  flex-direction: column;}
.ul-inline {  background: #fff;  list-style: none;}
.li-inline {  display: inline-block;}
.li-inline a {  color: #000;  padding: 10px 15px;  text-decoration: none;}
.li-inline a:hover {  background-color: var(--primary);  color: #fff;  text-decoration: none;  border-radius: 5px;  transition: 0.3s ease-in;}
.blank-text {  cursor: none;  display: none;  font-size: 1px;  color: transparent;  pointer-events: none;}
@media screen and (max-width:756px) {  .container {    flex-direction: column;  }
  .flex-nav {    flex-direction: column-reverse;  }
  .container-main,
  .container-side {    min-width: 90%;  }
  .dropdown .dropbtn,
  .nav-links .a {    display: none  }
  .nav-links .a.show-mobile-menu-icon {    display: block  }
  .nav-links.responsive {    position: relative  }
  .nav-links.responsive .a {    float: none;    display: block;    text-align: left;  }
  .nav-sub .nav-mobile-title {    display: block;  }
  .nav-sub .a:not(:first-child),
  .dropdown .dropbtn {    display: none;  }
  .nav-sub .a.icon {    float: right;    display: block;  }
  .nav-sub.responsive {    position: relative;  }
  .nav-sub.responsive .icon {    position: absolute;    right: 0;    top: 0;  }
  .icon:hover {    color: #fff;  }
  .nav-sub.responsive .a {    float: none;    display: block;    text-align: left;  }
  .nav-sub.responsive .dropdown {    float: none;  }
  .nav-sub.responsive .dropdown-content {    position: relative;  }
  .nav-sub.responsive .dropdown .dropbtn {    display: block;    width: 100%;    text-align: left;  }
  .btn-group button {    width: 100%;    margin: 5px;  }
  th {    width: 35%;  }
  .ul-inline,
  .li-inline {    display: block;  }
  .li-inline {    margin: 10px 0px;  }
  .card {    width: 80%;  }}