html, body, #root {
  height: 100%; }

.collapsing {
  transition: none !important; }

.collapse {
  transition: none !important; }

.table-scroll {
  overflow: auto;
  height: 60vh; }

.table {
  overflow-x: auto; }

.padding-table-columns td {
  padding: 0 50px 0 0;
  /* Only right padding*/ }

.recent-approval-row {
  background-color: gray; }

.period {
  text-transform: uppercase; }

.period::first-letter {
  text-transform: uppercase; }

.main-sidebar {
  background: #FFFFFF; }

.main-sidebar .nav .nav-item .nav-link.active, .main-sidebar .nav .nav-item .nav-link:hover, .main-sidebar .nav .nav-item.active, .main-sidebar .nav .nav-item:hover {
  background-color: rgba(232, 232, 232, 0.3);
  box-shadow: none;
  color: #007936; }

.main-sidebar .nav .nav-item .nav-link {
  color: #52575C; }

.main-sidebar .nav .nav-item .nav-link.active i {
  color: rgba(232, 232, 232, 0.3); }

.main-sidebar .nav .nav-item .nav-link i {
  color: #52575C; }

.main-sidebar .nav .nav-item .nav-link:hover i {
  color: #52575C; }

.main-sidebar .dropdown-menu .dropdown-item.active, .main-sidebar .dropdown-menu .dropdown-item:hover {
  color: #007936; }

.wrap {
  white-space: pre-line; }

.errorMsg {
  color: red; }

.gedungFRI {
  background-image: url(../images/gedungFRI.png);
  background-color: #28975D;
  background-size: cover;
  height: 100%;
  background-blend-mode: multiply; }

.dot {
  height: 25px;
  width: 25px;
  background-color: #0ACF83;
  border-radius: 50%;
  text-align: center;
  color: white;
  display: inline-block; }

.dot2 {
  background-color: #E1F7E8;
  border-radius: 50%;
  text-align: center;
  color: #008D43;
  display: inline-block;
  padding: 0.8em; }

.seeAnggota {
  background-image: url(../images/seeAnggota.png);
  background-size: cover;
  width: 28px;
  height: 28px; }

.dontSeeAnggota {
  background-image: url(../images/dontSeeAnggota.png);
  background-size: cover;
  width: 28px;
  height: 28px; }

.uploadBox {
  padding: 1.5em 0;
  border: 0.85px solid #E8E8E8;
  border-radius: 5px;
  text-align: center; }

.formComponentSpace {
  padding: 0.3em 0; }

.formComponentSpace1 {
  padding: 0.8em 0; }

.btn-ijo, .btn-ijo-outline:hover {
  color: white;
  background-color: #007936;
  border-color: #007936;
  box-shadow: none; }

.btn-ijo:hover {
  color: white;
  background-color: #00662C;
  border-color: #00662C; }

.btn-ijo-outline {
  color: #007936;
  background-color: white;
  border-color: #007936;
  box-shadow: none; }

.user-navbar {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 96px;
  height: 96px; }

.navbar-brand {
  padding-top: auto;
  padding-bottom: 192px; }

.nav-wrapper {
  margin-top: 200px; }

.nav-username {
  white-space: initial;
  text-align: center;
  font-size: 14px;
  color: #000000;
  margin: 0;
  padding: 0; }

.nav-usertype {
  text-align: center;
  text-transform: capitalize;
  font-size: 12px;
  color: #52575C;
  margin: 0;
  padding: 0; }

.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5; }

.step.active {
  opacity: 1; }

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50; }

.pager {
  list-style-type: none;
  list-style: none; }

.pager li {
  display: inline;
  padding: 10px 40px; }

.page-setting {
  display: table;
  /* Allow the centering to work */
  margin: 0 auto; }

.main-content {
  padding-left: 10px;
  padding-top: 15px;
  padding-bottom: 15px; }

.mymodal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  border: 1px solid #ccc;
  background: #fff;
  overflow: auto;
  border-radius: 4px;
  outline: none;
  padding: 20px; }

.mymodal400 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  border: 1px solid #ccc;
  background: #fff;
  overflow: auto;
  border-radius: 4px;
  outline: none;
  padding: 20px; }

.myoverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75); }

.main-footer {
  bottom: 0;
  width: 100%; }

select::-ms-expand {
  display: none; }

/* Custom Select */
.select {
  position: relative;
  display: flex;
  width: 20em;
  height: 3em;
  line-height: 3;
  overflow: hidden;
  border-radius: .25em; }

select {
  flex: 1;
  padding: 0 .5em;
  cursor: pointer;
  font-family: 'Segoe UI'; }

/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1em;
  background: #4CAF50;
  cursor: pointer;
  color: #FFFFFF;
  pointer-events: none;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease; }

/* Transition */
.select:hover::after {
  color: #000000; }

.master-data-nav {
  margin-top: 1em;
  margin-bottom: 1em; }

.model-table {
  margin-top: 1em;
  margin-bottom: 1em; }

.modal {
  overflow-y: auto; }

/*
 * react-circular-progressbar styles
 * All of the styles in this file are configurable!
 */
.CircularProgressbar {
  /*
   * This fixes an issue where the CircularProgressbar svg has
   * 0 width inside a "display: flex" container, and thus not visible.
   */
  width: 100%;
  /*
   * This fixes a centering issue with CircularProgressbarWithChildren:
   * https://github.com/kevinsqi/react-circular-progressbar/issues/94
   */
  vertical-align: middle; }

.CircularProgressbar .CircularProgressbar-path {
  stroke: #3e98c7;
  stroke-linecap: round;
  -webkit-transition: stroke-dashoffset 0.5s ease 0s;
  transition: stroke-dashoffset 0.5s ease 0s; }

.CircularProgressbar .CircularProgressbar-trail {
  stroke: #d6d6d6;
  /* Used when trail is not full diameter, i.e. when props.circleRatio is set */
  stroke-linecap: round; }

.CircularProgressbar .CircularProgressbar-text {
  fill: #3e98c7;
  font-size: 20px;
  dominant-baseline: middle;
  text-anchor: middle; }

.CircularProgressbar .CircularProgressbar-background {
  fill: #d6d6d6; }

/*
 * Sample background styles. Use these with e.g.:
 *
 *   <CircularProgressbar
 *     className="CircularProgressbar-inverted"
 *     background
 *     percentage={50}
 *   />
 */
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
  fill: #3e98c7; }

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
  fill: #fff; }

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
  stroke: #fff; }

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
  stroke: transparent; }