@import url(http://fonts.googleapis.com/css?family=Kreon:400,700);
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
  -webkit-font-smoothing: antialiased;
  font: normal 100% arial, sans-serif;
}

body {
  background: #fff;
  overflow-x: hidden;
  padding-bottom: 0;
  margin-bottom: 0;
}

html,
body {
  height: 545px;
  margin-bottom: 0;
  padding: 0;
  z-index: 1;
}

@media (max-width: 767px) {
  html,
  body {
    height: 400px;
    margin-bottom: 0;
    padding: 0;
    z-index: 1;
  }
}

/* Scroll Buttton */

.scroll-top {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  position: fixed;
  bottom: 25px;
  right: 20px;
  display: none;
}

.scroll-top i {
  display: inline-block;
  color: #fff;
}

/* latest notice section */

.latest-notice {
  width: 100%;
  font-weight: 600;
}

.latest-notice > ul > li > a:hover {
  color: red;
}

.latest-notice > ul > li > a {
  text-decoration: none;
  color: black;
}

.marquee-notice {
  overflow: hidden;
  border: 2px solid orangered;
  border-radius: 5px;
}

/* headlines section  */

.headline-section {
  width: 100%;
  background-color: lightgray;
  padding: 5px;
}
.marquee-headlines {
  width: 100%;
  /* background-color: lightgray; */
}

.marquee-headlines > span > a {
  text-decoration: none;
  color: #000;
  font-size: 15px;
}

.marquee-headlines > span > a:hover {
  text-decoration: none;
  color: rgb(7, 20, 209);
}

.offcanvas {
  width: 300px !important;
  background-color: rgb(206, 202, 202) !important;
  color: #fff;
}
.search {
  /* position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  width: 50%;
  margin: auto;
  z-index: 52;
  border: 1px solid #fff;
  padding: 20px 10px;
  border-radius: 10px;
  background-image: linear-gradient(rgb(255, 255, 255), #047400); */
  background-color: rgb(230, 230, 230);
}
.search-section {
  padding: 0px !important;
}
.search-result-section {
  margin-top: 20px;
}
.search-result-section table tr th,
.project-detail-info-section table tr th {
  padding: 10px;
  /* text-align: right; */
  /* border: 1px solid black; */
  /* background: #198754; */
  /* color: #fff; */
}
.search-result-section table tr td,
.project-detail-info-section table tr td {
  padding: 10px;
  /* border: 1px solid black; */
}
.search-result-section table tr td a,
.project-detail-info-section table tr td a {
  color: #fff;
  padding: 6px;
  border-radius: 5px;
  background-color: #bb2d3b;
  text-decoration: none;
}

/* The side navigation menu */
.sidebar {
  /* margin-top: 100px; */
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: hidden;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 10px;
  text-decoration: none;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  /* background-color: lightgreen; */
  color: #000;
  border-radius: 20px;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 200px;
  margin-top: 90px;
  /* padding: 1px 16px; */
  /* height: 1000px; */
}
/* On screens that are less than 992px wide, make the sidebar into a topbar */
@media screen and (max-width: 992px) {
  .sidebar {
    display: none !important;
  }
  div.content {
    margin-left: 0;
  }
  .topheader-login {
    display: none !important;
  }
  #toggoler-icon {
    display: block !important;
  }
  #work-name {
    font-size: 30px !important;
  }
  .img-logo {
    width: 50px !important;
  }
}
/* @media screen and (min-width: 992px) {
  #footer {
    margin-top: 280px !important;
  }
} */

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  .center-text {
    text-align: center !important;
  }
  #work-name {
    font-size: 20px !important;
  }
  #university-name {
    font-size: 15px !important;
  }
  .logo img {
    width: 50px !important;
  }
  .left-part {
    display: none !important;
    background: yellow;
  }
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  #work-name {
    font-size: 18px !important;
  }
  #university-name {
    font-size: 10px !important;
  }
  .logo img {
    width: 35px !important;
  }
  .left-part {
    display: none !important;
    background: yellow;
  }
}
.user-profile-update {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  bottom: -60px;
  right: 35px;
  /* display: none; */
}
@media screen and (max-width: 1336px) {
  .user-profile-update {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    bottom: 60px;
    left: 80px;
    /* display: none; */
  }
}
@media screen and (max-width: 740px) {
  .user-profile-update {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    bottom: -50px;
    left: -35px;
    /* display: none; */
  }
}
@media screen and (max-width: 400px) {
  .user-profile-update {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    bottom: 60px;
    left: 80px;
    /* display: none; */
  }
}
@media screen and (max-width: 700px) {
  .content2 {
    margin-top: 55px !important;
  }
  .my-profile {
    margin-top: 20px;
  }
}

.alert_msg {
  width: 300px;
  height: 30px;
  border-radius: 50%;
  position: fixed;
  bottom: -60px;
  right: 35px;
}

/* notice.php */
.current {
  background: rgb(140, 172, 228);
  border-radius: 20px;
}
