/** 
    1.GENERAL
        a. Flex Layout
        b. Typograpghy
        c. colors and gradients
        d. width
        e. margin
        f. pdf size
    
    2. COVER PAGES
        a. cover specific gradients
        b. cover-header
        c. cover-content
        d. cover-footer 
*/
/** GENERAL **/

/* calibri bold */

/*@font-face {
  font-family: "calibri-bold";
  src: url("http://localhost:5000/fonts/CALIBRIB_1.TTF") format("truetype");
}

@font-face {
  font-family: "calibri-regular";
  src: url("http://localhost:5000/fonts/CALIBRI_1.TTF") format("truetype");
}*/

html {
  background: #ececec;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "calibri-regular" !important;
}

b {
  font-family: "calibri-bold" !important;
}

/* width */
.w18 {
  width: 19% !important;
}
.w50 {
  width: 53% !important;
}
.calibri-normal {
  font-family: "calibri-normal", sans-serif;
}

body {
  font-family: "calibri-normal", sans-serif;
  font-size: 8.6px;
}

img {
  width: 100%;
  object-fit: cover;
}

/* FLEX LAYOUT */
div.row,
div.col {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

div.col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.row.justify-end {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.row.align-end {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.row.align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.row.justify-around {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.row.justify-center {
  -webkit-justify-content: center;
  justify-content: center;
}

.loi-logo-alternative {
  padding: 10px 20px;
  display: block;
  height: 100px;
  width: 100px;
  width: 100%;
}

.loi-logo-alternative > * {
  display: inline-block;
}

.loi-logo-alternative > p {
  font-size: 22px;
  height: 130%;
  vertical-align: middle;
}

.loi-logo-alternative > img {
  width: 100px;
  border-radius: 50%;
}

/* TYPOGRAPGY */
/* font-style */
/*.font-ariel-serif {
  font-family: Arial, serif;
  font-style: normal;
  text-decoration: none
}

.font-calibri-serif {
  font-family: "Calibri Bold Italic", serif;
}*/
body {
  /* font-family: 'Open Sans', sans-serif; */
  font-family: "calibri-normal", sans-serif;
}

.font-italics {
  font-style: italic;
}

.font-bold-italics {
  font-style: italic;
  font-weight: bold;
  font-family: "calibri-bold" !important;
}

.font-bold {
  font-weight: bold;
  font-family: "calibri-bold" !important;
}

/* colors */
.cl-blue-gradient {
  background: linear-gradient(to right, #e4f2f2 0%, white 90%);
  background: -webkit-linear-gradient(to right, #e4f2f2 0%, white 90%);
}

.cl-pink-gradient {
  background: linear-gradient(to right, #ffbca9 0%, white 90%);
  background: -webkit-linear-gradient(to right, #ffbca9 0%, white 90%);
}

.cl-dark-green-gradient {
  background: linear-gradient(to right, #48b58a 0%, white 90%);
  background: -webkit-linear-gradient(to right, #48b58a 0%, white 90%);
}

.cl-light-green-gradient {
  background: linear-gradient(to right, #d4e5b0 0%, white 90%);
  background: -webkit-linear-gradient(to right, #d4e5b0 0%, white 90%);
}

.cl-purple-gradient {
  background: linear-gradient(to right, #dfc5e1 0%, white 90%);
  background: -webkit-linear-gradient(to right, #dfc5e1 0%, white 90%);
}

.cl-orange-gradient {
  background: linear-gradient(to right, #fdd594 0%, white 90%);
  background: -webkit-linear-gradient(to right, #fdd594 0%, white 90%);
}

.cl-maroon-gradient {
  background: linear-gradient(to right, #8c5858 0%, white 90%);
  background: -webkit-linear-gradient(to right, #8c5858 0%, white 90%);
}

.cl-grey-gradient {
  background: linear-gradient(to right, #e2e2e3 0%, white 100%);
  background: -webkit-linear-gradient(to right, #e2e2e3 0%, white 100%);
}

.cl-light-orange-gradient {
  background: linear-gradient(to right, #fff5a6 0%, white 100%);
  background: -webkit-linear-gradient(to right, #fff5a6 0%, white 100%);
}

.cl-dark-green-gradient {
  background: linear-gradient(to right, #48b58a 0%, white 100%);
  background: -webkit-linear-gradient(to right, #48b58a 0%, white 100%);
}

/* .cl-blue{
    color:#50a6c2;
}

.cl-white{
    color: white
}

.cl-red{
    color: #8c5858
} */
.cl-grey {
  color: #778899;
}

.cl-blue {
  color: #5677c4;
}

.cl-pink {
  color: #fa7171;
}

.cl-dark-green {
  color: #48b58a;
}

.cl-light-green {
  color: #8ecf4c;
}

.cl-purple {
  color: #c762b6;
}

.cl-orange {
  color: #e69729;
}

.cl-maroon {
  color: #8c5858;
}

.bg-blue {
  background-color: #5677c4;
}

.bg-pink {
  background-color: #fa7171;
}

.bg-dark-green {
  background-color: #48b58a;
}

.bg-light-green {
  background-color: #228f42;
}

.bg-purple {
  background-color: #c762b6;
}

.bg-orange {
  background-color: #e69729;
}

.bg-maroon {
  background-color: #8c5858;
}

.page-header-blue-border {
  border-left: 15px solid #5677c4;
}

.page-header-pink-border {
  border-left: 15px solid #ff7378;
}

.page-header-green-border {
  border-left: 15px solid #6ac77e;
}

.page-header-dark-green-border {
  border-left: 15px solid #48b58a;
}

.page-header-orange-border {
  border-left: 15px solid #fba25b;
}

.page-header-maroon-border {
  border-left: 15px solid #8c5858;
}

.page-header-purple-border {
  border-left: 15px solid #be77bb;
}

.table-blue-gradient {
  background: linear-gradient(to right, #ffffff 15%, #d8d8ea 50%, #ffffff 85%);
}

.table-pink-gradient {
  background: linear-gradient(to right, #ffffff 15%, #f5b3b0 50%, #ffffff 85%);
}

.table-purple-gradient {
  background: linear-gradient(to right, #ffffff 15%, #d1abd1 50%, #ffffff 85%);
}

.table-orange-gradient {
  background: linear-gradient(to right, #ffffff 15%, #fed695 50%, #ffffff 85%);
}

.table-green-gradient {
  background: linear-gradient(to right, #ffffff 15%, #b8d79d 50%, #ffffff 85%);
}

/* WIDTH in % */
.w-70p {
  width: 70%;
}

.w-50p {
  width: 50%;
}

.w-30p {
  width: 30%;
}

/* MARGIN */
.ml-20 {
  margin-left: 20px;
}

.mr-20 {
  margin-right: 20px;
}

/* MARGIN */
.ml-20 {
  margin-left: 20px;
}

.mr-20 {
  margin-right: 20px;
}

/* MARGIN */
.ml-20 {
  margin-left: 20px;
}

.mr-20 {
  margin-right: 20px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.ml-40 {
  margin-left: 40px;
}

/* PDF SIZE */
.main-container {
  width: 595px !important;
  max-width: 595px;
  /* border: 1px solid; */
  background-color: #ffffff;
}

.container {
  height: 842px;
  width: 100%;
  position: relative;
}

/* COVER PAGES */
/* Gradients */
.cover-blue-gradient {
  background: linear-gradient(
    to top right,
    #ffffff 32%,
    #ffffff 50%,
    #ebf2fa 100%
  );
}

.cover-pink-gradient {
  background: linear-gradient(
    to top right,
    #ffffff 32%,
    #ffffff 50%,
    #f5b3b0 100%
  );
}

.cover-purple-gradient {
  background: linear-gradient(
    to top right,
    #ffffff 32%,
    #ffffff 50%,
    #d1abd1 100%
  );
}

.cover-orange-gradient {
  background: linear-gradient(
    to top right,
    #ffffff 32%,
    #ffffff 50%,
    #fed695 100%
  );
}

.cover-green-gradient {
  background: linear-gradient(
    to top right,
    #ffffff 32%,
    #ffffff 50%,
    #b8d79d 100%
  );
}

.r2l-blue-gradient {
  background: linear-gradient(to right, #ffffff 0%, #ebf2fa 100%);
}

.r2l-pink-gradient {
  background: linear-gradient(to right, #ffffff 0%, #f5b3b0 100%);
}

.r2l-purple-gradient {
  background: linear-gradient(to right, #ffffff 0%, #d1abd1 100%);
}

.r2l-orange-gradient {
  background: linear-gradient(to right, #ffffff 0%, #fed695 100%);
}

.r2l-green-gradient {
  background: linear-gradient(to right, #ffffff 0%, #b8d79d 100%);
}

.footer-blue-gradient {
  background: linear-gradient(to bottom right, #ffffff 60%, #ebf2fa 100%);
}

.footer-pink-gradient {
  background: linear-gradient(to bottom right, #ffffff 60%, #f5b3b0 100%);
}

.footer-purple-gradient {
  background: linear-gradient(to bottom right, #ffffff 60%, #d1abd1 100%);
}

.footer-orange-gradient {
  background: linear-gradient(to bottom right, #ffffff 60%, #fed695 100%);
}

.footer-green-gradient {
  background: linear-gradient(to bottom right, #ffffff 60%, #b8d79d 100%);
}

.text-center {
  text-align: center;
}

.text-uppercase,
.label-heading {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-lowercase {
  text-transform: lowercase;
}

/* cover-header */
.happiest-minds {
  padding: 20px;
}

.happiest-minds img {
  width: 100px;
}

.loi-logo {
  padding: 20px;
}

.loi-header {
  -webkit-box-align: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  text-align: right;
}

.loi-header .loi-logo img {
  width: 270px;
  text-align: right;
}

/* 
* logo on header 
*/
.logo-right-defination {
  width: 180px;
  padding-right: 10px;
  margin-top: auto;
  margin-bottom: auto;
}

.logo-right-defination .instrument-name {
  font-size: 2em;
  font-weight: bold;
  font-family: "calibri-bold" !important;
}

.logo-right-defination .orientation-name {
  font-size: 1.6em;
}

.logo-instrument-orientation {
  /* padding-top: 20px; */
}

.logo-instrument-orientation + img {
  width: 110px;
  margin: 10px;
}

/* cover-content */
.person {
  padding: 50px 0px;
  text-align: right;
}

.person h2 {
  margin-bottom: 10px;
  font-size: 2em;
  color: rgb(35, 55, 108);
  text-transform: capitalize;
}

.person p {
  font-size: 1.4em;
  /* font-weight: normal; */
  color: #5a5a5a;
}

.report-desc {
  font-size: 1.2em;
  color: #5a5a5a;
}

.report-desc h4,
.report-desc h2 {
  margin: 0;
  font-size: 1.15em;
}

h4.mr-20 {
  margin-right: 20px;
}

.report-desc .report-title {
  padding-bottom: 14px;
  padding-top: 14px;
  color: rgb(35, 55, 108);
  margin-right: 0;
  margin: 4px 0px;
  padding-right: 20px;
}

.report-desc .report-title h2 {
  font-size: 1.3em;
}

/* cover-footer */
.cover-footer {
  left: 0px;
  position: absolute;
  display: block;
  bottom: 0px;
  width: 100%;
}

.cover-footer .devplan {
  width: 300px;
}

.cover-footer .footer-text-container {
  position: absolute;
  right: 0;
  text-align: right;
  bottom: 20px;
  width: 100%;
  font-weight: bold;
  font-family: "calibri-bold" !important;
  font-style: italic;
  margin-right: 20px;
}

p.footer-test {
  margin: 0;
}

/* PAGES */
/* table */
/* .table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.table td, .table th {
    border: 1px solid #ddd;
    padding: 8px;
}

.table th {
    text-align: left;
    background-color: #5677c4;
    color: white;
}

.table .td-border{
    color: #5677c4;
    position: relative;
}

.table td.empty{
    content: "";
    padding: 1px;
    margin: 0;
    border: none;
} */
/* .table .td-border::before{
    content: "";
    position: absolute;
    border: 1px solid #c00;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
} */
/* table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 5px;
    text-align: left;
} */
.page-header {
  height: 95px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.pl40 {
  padding-left: 40px !important;
}

.page-header-title {
  font-size: 1.5em;
  width: 350px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  padding-left: 0px;
  padding-bottom: 10px;
}

.page-header-title .header {
  font-size: 1em;
  margin-bottom: 3px;
}

.page-header .loi-logo {
  width: 95px;
}

.page2-sub-heading {
  font-size: 0.7em;
}

.page-header .header-logo {
  height: 66px;
  width: 64px;
  border-radius: 42px;
  background-color: white;
  position: relative;
  top: 22px;
  left: 17px;
}

.page-header .page-sub-title {
  font-size: 2em;
}

/* footer */
.page-footer {
  position: absolute;
  bottom: 15px;
  width: 100%;
  padding: 0px 26px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

/* page1 */
.page-body {
  padding: 20px 40px;
}

.page-body .main-definition {
  height: 50px;
  border-radius: 7px;
}

.page-body .main-definition-logo {
  height: 71%;
  width: 6%;
  border-radius: 25px;
  background-color: white;
  position: relative;
  top: 7px;
  left: 10px;
}

.page-body .main-definition-content {
  position: relative;
  bottom: 30px;
  padding-left: 52px;
  padding-right: 35px;
  font-size: 10px;
  padding-top: 4px;
}

.page-body-content {
  padding: 0 33px;
}

.page-body-content .page-body-sub-definition {
  margin-left: 14px;
  height: 45px;
  border-radius: 5px;
  padding-left: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.page-body-content .table-report {
  margin-left: 5px;
}

.table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8em;
  margin-bottom: 5px;
}

.table td,
.table th {
  border: 1px solid #ddd;
  padding: 4px 10px;
}

.table th {
  text-align: left;
  width: 90px;
  color: white;
}

.table th + td {
  width: 290px;
}

.table .td-border {
  /* color: #5677c4; */
  position: relative;
}

.table td.empty {
  content: "";
  padding: 1px;
  margin: 0;
  border: none;
}

/* PAGE2 */
.description {
  padding: 15px 40px;
  /* position: absolute; */
}

.description .orientation-chart-block-text {
  border: 1px solid;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 10px;
  position: relative;
  right: 0;
  bottom: 20px;
}

.page-box {
  margin: 10px;
  border: 1px solid;
  /* height: 275px; */
  min-height: 180px;
  margin-bottom: 30px;
}

.box-header {
  height: 60px;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.box-header ~ * {
  margin: 10px;
  font-size: 1.1em;
}

.box-header ~ blockquote {
  font-weight: bold;
  font-family: "calibri-bold" !important;
  font-style: italic;
}

.box-content {
  padding: 10px;
}

.orientation-name-embross {
}

.orientation-name-embross img {
  width: 30px;
}

.orientation-name-embross .orientation-name-embross-text {
  margin-right: 5px;
}

ul {
  padding: 10px;
  list-style: none;

  /* padding-left: 30px; */
}

ul li {
  list-style-position: outside;
  position: relative;
}

ul li:before {
  position: absolute;
  left: -10px;
  content: "✓";
  color: green;
  padding-right: 3px;
}

.box-title {
  text-transform: uppercase;
  font-size: 1.5em;
  width: 350px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  padding-left: 20px;
}

/* PAGE 3 */
.report-explanation-header {
  height: 30px;
  font-size: 13px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding-left: 39px;
}

.report-explanation-details {
  padding: 0 40px;
  padding-top: 8px;
}

.report-explanation-details blockquote {
  margin-bottom: 10px;
  font-weight: 700;
  font-style: italic;
}

.report-explanation-sub-content {
  display: inline-flex;
}

.report-explanation-sub-content-details {
  height: 50px;
  width: 300px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 24px;
  border-radius: 5px;
}

.report-explanation-graph {
  width: 160px;
}

.bar-graph-container {
  max-height: 300px;
  max-width: 80%;
  margin: auto;
}
.radar-graph-container {
  max-height: 300px;
  max-width: 80%;
  margin: auto;
}

/* conclusion */
.conclusion-content {
  padding: 0px 30px;
}

.conclusion-image {
  width: 310px;
  max-height: 260px;
  margin-left: 130px;
  margin-top: 50px;
}

.conclusion-wheel {
  margin: auto;
  margin-top: 50px;
  display: inline-block;
}

.conclusion-points {
  padding: 0 15px;
}

.points-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-top: 12px;
}

.index {
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: #f9c67f;
  border-radius: 28px;
  position: absolute;
  /* left: 12px; */
  /* top: 9px; */
  left: 31px;
}

.points-description {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 50px;
  border-radius: 13px;
  padding: 0 20px;
  margin-left: 30px;
}

.assesment-card .card-header {
  position: relative;
}

.assesment-card .card-header .card-marks {
  color: white;
  position: absolute;
  right: 4px;
  height: 20px;
  top: -1px;
  padding: 0px 10px;
  -webkit-justify-content: center;
  justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  clip-path: polygon(
    6% 0,
    0 9%,
    5% 10%,
    5% 90%,
    0 90%,
    5% 100%,
    95% 100%,
    100% 90%,
    94% 93%,
    95% 10%,
    100% 10%,
    95% 0
  );
}

.assesment-card .card-header .card-title {
  width: 100%;
  -webkit-justify-content: center;
  justify-content: center;
  height: 18px;
  line-height: 18px;
  margin-right: 4px;
  padding-left: 10px;
  /* background: linear-gradient(to right, #d8d8ea 25%, #ffffff 85%); */
}

.assesment-card .arrow {
  font-size: 18px;
  line-height: 18px;
}

.assesment-card .card-content {
  margin-left: 18px;
  padding: 10px 0px;
}

.orientation-card {
  height: 25px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 7px;
}

.orientation-card .img {
  height: 30px;
  /* width: auto; */
  /* background: blue; */
  border: 5px solid white;
  border-radius: 50%;
  width: 30px;
  position: relative;
  right: 15px;
}

.orientation-content {
  padding-left: 2px;
}

.main-definition .gradient-content {
  /* margin-left: 14px; */
  height: 45px;
  border-radius: 5px;
  padding-left: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.analysis {
  padding: 1px 40px;
}

.analysis .analysis-box {
  height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 10px;
  border: 0.5px solid #ccc;
  position: relative;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.analysis .img {
  height: 44px;
  border: 5px solid white;
  border-radius: 50%;
  width: 44px;
  position: relative;
  left: -4px;
  top: 0px;
}

.analysis-content {
  width: calc(100% - 56px);
  padding-right: 4px;
}

.bargraph {
  width: 459px;
  height: 260px;
  position: relative;
  left: 40px;
}

/* svg */
.verticalAxis.axis * {
  stroke: #525244;
  font-size: 9px;
}

.circularLabels text {
  font-size: 1.3em;
}

/* svg */

/* svg */

/* Styles with dev */
.table-bubble-head-container-main {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
}

.table-bubble-head-container {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  align-items: center;
  -webkit-align-items: center;
}

.table-bubble-head {
  flex: 0.3;
}

.table-bubble-head-inner {
  margin: 10px;
  height: 30px;
  width: 30px;
  border-radius: 30px;
}

.table-bubbless {
  flex: 0.7;
}

/* arrows icons */
.arrows-icons {
  height: 8px;
  width: auto;
  vertical-align: middle;
}

/* Footer */

.footer > img,
.footer > p {
  display: inline-block;
}

/* connector-line */

.assesment-card {
  position: relative;
}

.assesment-card::after,
.assesment-card::before {
  position: absolute;
  box-sizing: border-box;
  content: "";
  left: 0;
  display: block;
  background: transparent;
  border-left: 1px solid #313131;
}

.assesment-card::before {
  top: 0px;
  height: 9px;
}

.assesment-card::after {
  top: 8px;
  height: calc(100% + 2px);
}

.assesment-card:last-child:after {
  display: none;
}

.assesment-card:first-child::before {
  display: none;
}

.assesment-card.extended-down-connector:last-child:after {
  top: 8px;
  height: calc(100% + 10px);
  display: block;
  content: "";
}

.assesment-card.extended-up-connector:first-child:before {
  top: -11px;
  height: 20px;
  display: block;
  content: "";
}

.list {
  position: relative;
}

.list.extended-down-connector::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -20px;
  width: 8px;
  height: 8px;
  background-color: rgb(49, 49, 49);
  border-radius: 50%;
}

.list.extended-up-connector::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -14px;
  width: 8px;
  height: 8px;
  background-color: rgb(49, 49, 49);
  border-radius: 50%;
}

/* svg */
.highcharts-plot-line.plotline-1 {
  marker-end: url(#arrow);
}
.highcharts-plot-line.plotline-2 {
  marker-start: url(#arrow);
}

.plotline-1.fill-red {
  fill: red;
}

.plotline-1.fill-green {
  fill: green;
}
.plotline-arrow {
  /* marker-start: url(#arrow); */
}

/* //.devplan */
.graph-section {
  position: relative;
  border-radius: 10px;
  border: 1px solid gray;
  height: 280px;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.graph-wrapper-devplan {
  max-width: 400px;
}