:root {
  --volatility-white: #FFFEFF;
  --volatility-green: #00A443;
  --volatility-green-1: #007F33;
  --volatility-dark: #00402A;
  --volatility-black: #3A3735;
  --volatility-brown: #615D5A;
  --volatility-border: #D8CFC7;
  --volatility-orange: #FF9C1A;
  --volatility-sand: #FFF5EC;
  --volatility-blue: #0DA9FF;
  --volatility-blue-dark: #007ACB;
  --volatility-orange-dark: #C66D00;
}

#volatility {
  width: 100%;
  max-width: 980px;
  padding: 24px 16px;
  margin: 20px auto;
  text-align: left;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  background: var(--volatility-sand);
}

#volatility * {
  font-family: 'IberPangea' !important;
  font-style: normal;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#volatility h2 {
  margin-top: 0 !important;
}

#volatility ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#volatility ul li:before {
  content: none !important;
  display: none !important;
}

#volatility img {
  display: block;
  width: 100%;
}

#volatility .volatility_title {
  color: var(--volatility-green-1) !important;
  font-size: 30px;
  line-height: 1.13;
  font-family: 'IberPangea' !important;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  text-wrap: balance;
  margin-bottom: 16px;
}

#volatility .volatility_title strong {
  font-family: 'IberPangea Bold' !important;
  font-style: normal;
  font-weight: normal;
}

#volatility .volatility_description {
  color: var(--volatility-dark) !important;
  font-size: 21px;
  line-height: 1.14;
  font-family: 'IberPangea' !important;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  margin-bottom: 24px;
}

#volatility .volatility_box {
  padding: 26px 10px 20px;
  border-radius: 15px;
  background: var(--volatility-white);
  width: 100%;
  margin: 0 auto 8px;
}

#volatility .volatility_graph {
  width: 100%;
  max-width: 239px;
  display: block;
  position: relative;
  padding-top: 176px;
  margin: 0 auto 37px;
}

#volatility .volatility_graph_list {
  position: absolute;
}

#volatility .volatility_graph_list:before {
  content: '';
  display: block;
  width: 1px;
  height: calc(100% - 17px);
  background-color: var(--volatility-brown);
  position: absolute;
  left: 31px;
  top: 40px;
}

#volatility .volatility_graph_list:nth-of-type(2):before {
  left: 65px;
}

#volatility .volatility_graph_list:nth-of-type(1) {
  top: 60px;
  left: 30px;
  height: calc(100% - 127px);
  z-index: 1;
}

#volatility .volatility_graph_list:nth-of-type(2) {
  top: 0;
  left: 70px;
  height: calc(100% - 67px);
}

#volatility .volatility_graph_item {
  display: flex;
  margin-bottom: 12px;
  margin-left: 38px;
}

#volatility .volatility_graph_item:first-child {
  margin-left: 0;
}

#volatility .volatility_graph_item span {
  border-radius: 30px;
  border: 1px solid var(--volatility-brown);
  background: var(--volatility-white);
  padding: 10px 20px;
  color: var(--volatility-brown) !important;
  font-size: 13px;
  line-height: 1.42;
  font-family: 'IberPangea' !important;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  display: flex;
}

#volatility .volatility_graph_item:first-child span {
  padding: 10px;
  white-space: nowrap;
}

#volatility .volatility_graph_item:not(:first-child) span:first-child {
  min-width: 103px;
  padding-left: 10px;
  padding-right: 10px;
}

#volatility .volatility_graph_list:nth-of-type(1) .volatility_graph_item:nth-of-type(2) span {
  min-width: 157px;
}

#volatility .volatility_graph_item:not(:first-child) span:nth-of-type(2) {
  width: 54px;
  min-width: 54px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#volatility .volatility_graph_item-green span {
  border-color: var(--volatility-green-1);
  color: var(--volatility-green-1) !important;
  font-family: 'IberPangea Bold' !important;
  font-style: normal;
  font-weight: normal;
}

#volatility .volatility_graph_image {
  width: 100%;
}

#volatility .volatility_graph_image-desktop {
  display: none;
}

#volatility .volatility_legend {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 256px;
  margin: 0 auto 5px;
}

#volatility .volatility_legend_item {
  position: relative;
  padding-top: 11px;
  width: 33.33%;
  color: var(--volatility-brown) !important;
  font-size: 16px;
  line-height: 1.25;
  font-family: 'IberPangea' !important;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  margin-bottom: 20px;
}

#volatility .volatility_legend_item:after {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
}

#volatility .volatility_legend_item:nth-of-type(1):after {
  background-color: var(--volatility-green);
}

#volatility .volatility_legend_item:nth-of-type(2):after {
  background-color: var(--volatility-green-1);
}

#volatility .volatility_legend_item:nth-of-type(3):after {
  background-color: var(--volatility-blue);
}

#volatility .volatility_legend_item:nth-of-type(4):after {
  background-color: var(--volatility-blue-dark);
}

#volatility .volatility_legend_item:nth-of-type(5):after {
  background-color: var(--volatility-orange);
}

#volatility .volatility_legend_item:nth-of-type(6):after {
  background-color: var(--volatility-orange-dark);
}

#volatility .volatility_legend_item span {
  display: block;
}

#volatility .volatility_legend_item em {
  font-style: italic;
}

#volatility .volatility_note {
  color: var(--volatility-brown) !important;
  font-size: 12px;
  line-height: 1.33;
  font-style: italic;
  font-family: 'IberPangeaText' !important;
  font-weight: normal;
  text-align: left;
}

#volatility .volatility_box .volatility_note {
  max-width: 256px;
  margin-left: auto;
  margin-right: auto;
}

#volatility .volatility_subtitle {
  color: var(--volatility-green-1) !important;
  font-size: 18px;
  line-height: 1.33;
  font-family: 'IberPangeaText Bold' !important;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  text-wrap: balance;
  margin-top: 24px;
  margin-bottom: 22px;
}

#volatility .volatility_table {
  margin-bottom: 2px;
  border-spacing: 8px;
}

#volatility .volatility_table th {
  padding: 10px 5px;
  border-radius: 15px 15px 0px 0px;
  color: var(--volatility-white);
  text-align: center;
  font-size: 14px;
  line-height: 1.42;
  font-family: 'IberPangea Bold' !important;
  font-style: normal;
  font-weight: normal;
  width: 25%;
  min-width: 25%;
}

#volatility .volatility_table th:nth-of-type(2) {
  background: var(--volatility-green-1);
}

#volatility .volatility_table th:nth-of-type(3) {
  background: var(--volatility-blue-dark);
}

#volatility .volatility_table th:nth-of-type(4) {
  background: var(--volatility-orange);
}

#volatility .volatility_table td {
  padding: 10px;
  border: 1px solid;
  text-align: center;
  font-size: 16px;
  line-height: 1.25;
  font-family: 'IberPangea Bold' !important;
  font-style: normal;
  font-weight: normal;
  white-space: nowrap;
  width: 25%;
  min-width: 25%;
}

#volatility .volatility_table td:nth-of-type(1) {
  border-radius: 30px 0px 0px 30px;
  color: var(--volatility-brown);
  border-color: var(--volatility-brown);
}

#volatility .volatility_table td:nth-of-type(2) {
  color: var(--volatility-green-1);
  border-color: var(--volatility-green-1);
}

#volatility .volatility_table td:nth-of-type(3) {
  color: var(--volatility-blue-dark);
  border-color: var(--volatility-blue-dark);
}

#volatility .volatility_table td:nth-of-type(4) {
  color: var(--volatility-orange);
  border-color: var(--volatility-orange);
}

@media (min-width: 700px) {

  #volatility {
    padding: 32px;
  }

  #volatility .volatility_title {
    font-size: 32px;
    line-height: 1.07;
    margin-bottom: 16px;
  }

  #volatility .volatility_description {
    font-size: 24px;
    line-height: 1.16;
  }

  #volatility .volatility_box {
    padding: 25px 25px;
  }

  #volatility .volatility_graph {
    max-width: 446px;
    padding-top: 0px;
    margin-bottom: 30px;
  }

  #volatility .volatility_graph_item span {
    font-size: 16px;
    line-height: 1.25;
  }

  #volatility .volatility_graph_list:nth-of-type(1) {
    top: 17px;
    left: 60px;
    height: calc(100% - 67px);
  }

  #volatility .volatility_graph_list:nth-of-type(2) {
    top: 17px;
    left: 151px;
  }

  #volatility .volatility_graph_list:nth-of-type(2):before {
    left: 101px;
  }

  #volatility .volatility_graph_item {
    margin-left: 0;
    z-index: 1;
    position: relative;
  }

  #volatility .volatility_graph_item:not(:first-child) span:first-child {
    padding-left: 10px;
    padding-right: 10px;
  }

  #volatility .volatility_legend {
    max-width: 501px;
    flex-wrap: nowrap;
    margin-bottom: 0;
  }

  #volatility .volatility_box .volatility_note {
    max-width: 501px;
  }

  #volatility .volatility_note {
    font-size: 14px;
    line-height: 1.28;
  }

  #volatility .volatility_subtitle {
    margin-bottom: 14px;
  }

  #volatility .volatility_table th {
    font-size: 16px;
    line-height: 1.25;
    text-wrap: balance;
  }

}

@media (min-width: 1080px) {

  #volatility .volatility_graph_image-mobile {
    display: none;
  }

  #volatility .volatility_graph_image-desktop {
    display: block;
  }

  #column-2 #volatility .volatility_graph_image-mobile {
    display: block;
  }

  #column-2 #volatility .volatility_graph_image-desktop {
    display: none;
  }

  #volatility .volatility_title {
    max-width: 601px;
  }

  #column-2 #volatility .volatility_title {
    max-width: 446px;
  }

  #volatility .volatility_description {
    max-width: 647px;
  }

  #column-2 #volatility .volatility_description {
    max-width: 100%;
  }

  #volatility .volatility_box {
    padding: 36px;
  }

  #column-2 #volatility .volatility_box {
    padding: 25px;
  }

  #volatility .volatility_graph {
    max-width: 832px;
    margin-bottom: 20px;
  }

  #column-2 #volatility .volatility_graph {
    max-width: 446px;
    margin-bottom: 30px;
  }

  #volatility .volatility_legend_item span {
    display: inline-block;
  }

  #column-2 #volatility .volatility_legend_item span {
    display: block;
  }

  #volatility .volatility_graph_list:nth-of-type(1) {
    top: 33px;
    left: 170px;
    height: calc(100% - 100px);
  }

  #column-2 #volatility .volatility_graph_list:nth-of-type(1) {
    top: 17px;
    left: 60px;
    height: calc(100% - 67px);
  }

  #volatility .volatility_graph_list:nth-of-type(2) {
    top: 33px;
    left: 375px;
    height: calc(100% - 100px);
  }

  #column-2 #volatility .volatility_graph_list:nth-of-type(2) {
    top: 17px;
    left: 151px;
    height: calc(100% - 67px);
  }

  #volatility .volatility_legend {
    max-width: 916px;
  }

  #column-2 #volatility .volatility_legend {
    max-width: 501px;
  }

  #volatility .volatility_box .volatility_note {
    max-width: 916px;
  }

  #column-2 #volatility .volatility_box .volatility_note {
    max-width: 501px;
  }

  #volatility .volatility_graph_list:before {
    height: 100%;
  }

  #column-2 #volatility .volatility_graph_list:before {
    height: calc(100% - 17px);
  }

  #volatility .volatility_graph_list:nth-of-type(1) .volatility_graph_item:nth-of-type(2) span:first-child,
  #volatility .volatility_graph_list:nth-of-type(1) .volatility_graph_item:nth-of-type(3) span:first-child,
  #volatility .volatility_graph_list:nth-of-type(1) .volatility_graph_item:nth-of-type(4) span:first-child {
    margin-left: 32px;
  }

  #column-2 #volatility .volatility_graph_list:nth-of-type(1) .volatility_graph_item:nth-of-type(2) span:first-child,
  #column-2 #volatility .volatility_graph_list:nth-of-type(1) .volatility_graph_item:nth-of-type(3) span:first-child,
  #column-2 #volatility .volatility_graph_list:nth-of-type(1) .volatility_graph_item:nth-of-type(4) span:first-child {
    margin-left: 0;
  }

}