@font-face {
  font-family: CorpidCdBold;
  src: url(../font/CorpidE1sSCd-Bold.otf);
}
@font-face {
  font-family: CorpidCdLight;
  src: url(../font/CorpidE1sSCd-Light.otf);
}
@font-face {
  font-family: CorpidBold;
  src: url(../font/CorpidE1s-Bold.otf);
}
@font-face {
  font-family: CorpidLight;
  src: url(../font/CorpidE1s-Light.otf);
}
@font-face {
  font-family: LatoRegular;
  src: url(../font/Lato-Regular_0.ttf);
}
@font-face {
  font-family: LatoBold;
  src: url(../font/Lato-Bold_0.ttf);
}
@font-face {
  font-family: LatoBlack;
  src: url(../font/Lato-Black_0.ttf);
}
@font-face {
  font-family: AktivGroteskBold;
  src: url(../font/14034.otf);
}

:root{
  --paddingVar: none;
}

/*body {
    margin: 0px;
    width: 688px;
    height: 153px;
    overflow: hidden;
}*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: space-between;
  background: #f6f6f6;
  height: 153px;
  padding: 7px;
  box-sizing: border-box;

}

/**************************************** LEFT SIDE ************************************************/

.left-side,
.right-side {
  display: flex;
  flex-direction: column;
  width: 52%;
  /* background: red; */
  /* outline: 1px solid red; */
}

.right-side {
  width: 43%;
  width: 310px;
  /* background: chartreuse; */
  /* outline: 1px solid green; */
  justify-content: space-between;
}

/* BARS */
.bars-container {
  position: relative;
  display: flex;
  padding: 0 17px;
  justify-content: space-between;
  border-bottom: 1.2px solid #c0c0c0;
}

.stamp_img_template {
  position: absolute;
  left: 168px;
  /* top: -1px; */
  z-index: 100;
}

.stamp_img_template img {
  /* width: 60px !important; */
  transform: rotate(-10deg);
}

.green-gold-bars-container,
.green-silver-bars-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 92px;
}

.gold-bar,
.green-bar,
.grey-bar {
  display: flex;
  justify-content: center;
  /* align-items:center; */
  width: 150px;
  padding-bottom: var(--paddingVar);
  align-items: flex-end;

}

.gold-bar p,
.green-bar p,
.grey-bar p
 {
  font-family: LatoBlack;
  font-size: 26px;
  color: white;
}


.gold-bar {
  background: #cba344;
}
.green-bar {
  background: #579736;
  height: 15px;
}
.grey-bar {
  background: #9a9a9a;
}

/* TITLES */

.titles-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-family: LatoBlack;
  padding: 0 17px;
}

.green-gold-title,
.green-silver-title {
  width: 150px;
  text-align: center;
  /* color: #579736; */
}

.green-gold-title p,
.green-silver-title p {
  color: #579736;
  font-size: 15px;
  font-family: LatoBlack;
  line-height: 17px;
}

.green-gold-title span {
  color: #cca82d;
  font-size: 15px;
  font-family: LatoBlack;
}

.green-silver-title span {
  color: #918d8c;
  font-size: 15px;
  font-family: LatoBlack;
}

/* DATE */

.date-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-family: LatoRegular;
  font-size: 9px;
  letter-spacing: -0.1px;
  margin-bottom: -3px;
  color: black;
}

.date_container_template,
.date_container_template_v2,
.date_container_template_v3,
.date_container_template_v4 {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-family: LatoRegular;
  font-size: 9px;
  /* letter-spacing: -0.1px; */
  bottom: -6px;
  color: #76BC21;
  font-weight:bold;
}

/**************************************** RIGHT SIDE ************************************************/

/* HEADING */

.heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.heading h1 {
  font-family: LatoBlack;
  line-height: 32px;
  font-size: 41px;
  color: #579736;
}

.heading p {
  font-family: AktivGroteskBold;
  font-size: 18.2px;
  line-height: 20px;
  height: 20px;
  text-align: center;
  margin-top: 4px;
  color: #579736;
}

/* TABLE */

.table {
  display: flex;
  flex-direction: column;
  width: 310px;
  max-height: 80px;
  height: 100%;
  padding: 4px;
  background: white;
  -webkit-box-shadow: 0px 2px 8px 0px rgba(151, 151, 151, 0.75);
  -moz-box-shadow: 0px 2px 8px 0px rgba(151, 151, 151, 0.75);
  box-shadow: 0px 2px 8px 0px rgba(151, 151, 151, 0.75);
  margin-top: 4px;
}

.table-row,
.table-row-middle,
.table-row-bottom {
  display: flex;
  align-items: center;
  height:25px
}

.table-row-middle {
  display: flex;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 3px;
}

.table-title,
.table-title-middle,
.table-title-bottom {
  flex: 1;
  line-height: 8px;
}

.table-title p {
  font-family: LatoRegular;
  font-size: 9px;
  color: #a1a2a4;
}

.table-title-middle p,
.table-title-bottom p {
  font-family: LatoBold;
  color: #579736;
  font-size: 9px;
  line-height: 8px;
}

.table-title-middle span {
  font-family: LatoBold;
  color: #cca82d;
  font-size: 9px;
  line-height: 8px;
}

.table-title-bottom span {
  font-family: LatoBold;
  color: #918d8c;
  font-size: 9px;
  line-height: 8px;
}

.table-col,
.table-col-middle,
.table-col-bottom {
  display: flex;
  justify-content: space-between;
  flex: 4;
  box-sizing: border-box;
}

.col p {
  font-family: LatoRegular;
  font-size: 9px;
  color: #a1a2a4;
  letter-spacing: -1px;
  line-height: 9px;
}

.col-bottom p {
  letter-spacing: -1px;
  line-height: 9px;
  font-family: LatoBold;
  font-size: 9px;
  color: #579736;
  min-width: 30px;
  text-align: right;
}


/* TEMPLATES */

.left_side_template,
.left_side_template_v2,
.left_side_template_v3,
.left_side_template_v4 {
  display: none;
  position: relative;
  width: 52%;
  display: flex;
  flex-direction: column;
}

/* above div */

.above_div {
  position: relative;
  display: flex;
  border-bottom: 1.2px solid #c0c0c0;
  /* height: 68%; */
  height: 70%;
}

.below_div {
  display: flex;
  /* height: 34%; */
  height: 30%;
}


.above_div_left_side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 50%;
  height: 100%;
}

.above_div_right_side {
  display: flex;
  flex-direction: column;
  align-items: center;

  justify-content: flex-end;
  width: 50%;
}

.above_div_left_side_value {
  font-family: LatoBlack;
  font-size: 24px;
  color: #579736;
  padding: 4px;

}

.above_div_right_side_title {
  text-align: center;
}

.above_div_right_side_title p, .above_div_right_side_title span  {
  font-size: 15px;
  font-family: LatoBlack;
  text-align: center;
  color: #579736;
  line-height: 15px;
}

.above_div_right_side_title span {
  color: #918d8c;
}

/* below div */

.below_div_left_side, .below_div_right_side {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  padding-top: 3px;
}


.below_div_right_side_title{
  text-align: center;
}

.below_div_right_side_title p, .below_div_right_side_title span {
  font-size: 15px;
  font-family: LatoBlack;
  text-align: center;
  color: #579736;
  line-height: 15px;
}

.below_div_right_side_title span {
  color: #cca82d;
}

.below_div_right_side_value {
  font-family: LatoBlack;
  font-size: 24px;
  color: #579736;
  padding: 4px;

}