/* Font size for different sections  */
.intro-text {
  font-size: 1.2em;
}

/* Justify text */
.just-text {
  text-align: justify;
  text-justify: inter-word;
}

/* Obtain smaller sized materialize CSS buttons (if needed) */
.btn-small {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding-left: 16px;
  padding-right: 16px;
  text-transform: uppercase;
  max-font-size: 13pt;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

/* For using materialize CSS tabs (if needed) */
.tabs .tab {
  text-transform: none;
}

.tabs .tab a.active {
  background-color: #ffb74d;
  color: #000;
}

/* Text align center */
.ta-center {
  text-align: center;
  vertical-align: middle;
}

/* HBP icon style */
.hbp-icon {
  height: 30px;
  width: 30px;
  margin-right: 20px;
}

/* HBP icon style */
.hbp-icon-small {
  height: 22px;
  width: 22px;
}

.hbp-icon-big {
  height: 42px;
  width: 42px;
}

.section-title {
  background: #fff8e1;
  padding: 6px;
  margin-top: 50px;
  margin-bottom: 15px;
  border-radius: 10px;
}

.title-style {
  font-family: "Rajdhani";
  font-weight: bold;
  line-height: 1.5;
  font-size: 52px;
  font-weight: 700;
  color: #388e3c;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1px;
}

.subtitle {
  font-size: 15px;
}

/* For journal title header */
.box {
  position: relative;
  width: 100%;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #000;
  background: linear-gradient(0.25turn, #00a595, #9ce142);
  overflow: hidden;
}

.smallbox {
  /* background: #00C959; */
  background: linear-gradient(0.25turn, #00a595, #9ce142);
  /* background: radial-gradient(ellipse 40% 50px, #9CE142, #00A595) */
}

.box.rounded {
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}

.box.rounded.centered {
  text-align: center;
}

/* For abstract box with folder corner */
.note {
  position: relative;
  width: 100%;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #000;
  background: #dcedc8;
  overflow: hidden;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #658e15 #658e15;
  background: #689f38;
  -webkit-box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.3),
    -1px 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.3),
    -1px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.3),
    -1px 1px 1px rgba(0, 0, 0, 0.2);
  /* Firefox 3.0 damage limitation */
  display: block;
  width: 0;
}

.note.rounded {
  -moz-border-radius: 5px 0 5px 5px;
  border-radius: 5px 0 5px 5px;
}

.note.rounded:before {
  border-width: 8px;
  border-color: #fff #fff transparent transparent;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}

/* For HBP rainbow footer */
.rainbow-row {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.rainbow-row.rr-small > div {
  height: 3px;
}

.rainbow-row > div {
  width: 12.5%;
  display: table-cell;
  height: 10px;
}

.rainbow-row > div:nth-child(1) {
  background: #00a595;
}

.rainbow-row > div:nth-child(2) {
  background: #13ac8b;
}

.rainbow-row > div:nth-child(3) {
  background: #29b480;
}

.rainbow-row > div:nth-child(4) {
  background: #39ba78;
}

.rainbow-row > div:nth-child(5) {
  background: #4dc26d;
}

.rainbow-row > div:nth-child(6) {
  background: #61ca62;
}

.rainbow-row > div:nth-child(7) {
  background: #77d256;
}

.rainbow-row > div:nth-child(8) {
  background: #9ce142;
}