:root {
  /* --------------------------------- colors --------------------------------- */
  --primary-color-yellow: #ffdf86;
  --primary-shade-01: #fff2cd;
  --primary-shade-02: #ffe8a7;
  --primary-shade-03: #ffd153;

  --secondary-color-orange: #f47907;
  --secondary-shade-01: #ff8d24;
  --secondary-shade-02: #dd6d06;
  --secondary-shade-03: #ecad00;
  --secondary-shade-04: #ffbb00;

  --teritary-color-black: #0b0800;
  --teritary-shade-01: #fbfbfb;
  --teritary-shade-02: #efefef;
  --teritary-shade-03: #8d8d8d;
  --teritary-shade-04: #3a3a3a;

  --white-color: #fff;
  --black-color: #000;

  /* ---------------------------------- sizes --------------------------------- */
  --rem-2: 0.125rem;
  --rem-4: 0.25rem;
  --rem-6: 0.375rem;
  --rem-8: 0.5rem;
  --rem-10: 0.625rem;
  --rem-12: 0.75rem;
  --rem-14: 0.875rem;
  --rem-base: 1rem;
  --rem-18: 1.125rem;
  --rem-20: 1.25rem;
  --rem-22: 1.375rem;
  --rem-24: 1.5rem;
  --rem-26: 1.625rem;
  --rem-28: 1.75rem;
  --rem-30: 1.875rem;
  --rem-32: 2rem;
  --rem-34: 2.125rem;
  --rem-36: 2.25rem;
  --rem-38: 2.375rem;
  --rem-40: 2.5rem;
  --rem-42: 2.625rem;
  --rem-44: 2.75rem;
  --rem-46: 2.875rem;
  --rem-48: 3rem;
  --rem-50: 3.125rem;
  --rem-52: 3.25rem;
  --rem-54: 3.375rem;
  --rem-56: 3.5rem;
  --rem-58: 3.625rem;
  --rem-60: 3.75rem;
  --rem-62: 3.875rem;
  --rem-64: 4rem;
  --rem-66: 4.125rem;
  --rem-68: 4.25rem;
  --rem-70: 4.375rem;
  --rem-72: 4.5rem;
  --rem-74: 4.625rem;
  --rem-76: 4.75rem;
  --rem-78: 4.875rem;
  --rem-80: 5rem;
  --rem-82: 5.125rem;
  --rem-84: 5.25rem;
  --rem-86: 5.375rem;
  --rem-88: 5.5rem;
  --rem-90: 5.625rem;
  --rem-92: 5.75rem;
  --rem-94: 5.875rem;
  --rem-96: 6rem;
  --rem-98: 6.125rem;
  --rem-100: 6.25rem;
  --rem-102: 6.375rem;
  --rem-104: 6.5rem;
  --rem-108: 6.75rem;
  --rem-110: 6.875rem;
  --rem-112: 7rem;
  --rem-114: 7.125rem;
  --rem-116: 7.25rem;
  --rem-118: 7.375rem;
  --rem-120: 7.5rem;
  --rem-122: 7.625rem;
  --rem-124: 7.75rem;
  --rem-150: 9.375rem;
}

/* -------------------------------------------------------------------------- */
/*                                media queries                             */
/* -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 200px;
}

/* todo:dropdown start  */

.dropdown {
  position: relative;
  cursor: pointer;
  width: 100%;
  min-width: 270px;
}

.dropdown .dropdown-toggle {
  appearance: none;
  background: var(--white-color);
  border: 1px solid #8d8d8d;
  border-radius: 6px;
  padding: 10px 48px 10px 12px;
  text-align: left;
  position: relative;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  font-size: var(--rem-14);
  font-family: "Roboto";
  font-weight: 500;
  line-height: var(--rem-20);
  color: var(--teritary-shade-04);
}

.dropdown .dropdown-toggle::after {
  content: "";
  background-image: url(../imgs/downarrow.svg);
  background-repeat: no-repeat;
  width: var(--rem-20);
  height: var(--rem-20);
  position: absolute;
  right: 12px;
  top: calc(50% + 0px);
  transform: translateY(-50%);
  transition: all 250ms ease;
}

.dropdown .dropdown-toggle.active::after {
  transform: rotate(180deg);
  top: calc(50% - 9px);
}

.dropdown .dropdown-menu {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  background: var(--white-color);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
  border-radius: 0px 0px 8px 8px;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  min-width: 200px;
  width: 100%;
  border-radius: 3px;
  z-index: 10;
  visibility: hidden;
  overflow: auto;
  max-height: 65vh;
  height: auto;

  /*   max-height: 200px; */
}

.dropdown .dropdown-menu[aria-expanded="true"] {
  visibility: visible;
}

.dropdown .dropdown-menu > li {
  /* color: var(--teritary-shade-03); */
  display: block;
  align-items: center;
  padding: 17px 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.dropdown .dropdown-menu > li:not(:last-child) {
  border-bottom: 1px solid #efefef;
}

.dropdown .dropdown-menu > li:hover,
.dropdown .dropdown-menu > li:focus {
  outline: none;
  /* color: var(--secondary-color-orange); */
}

/* todo:dropdown end  */

.release-content-wrap {
  padding-top: 0;
  z-index: 2;
  position: relative;
  padding-top: var(--rem-60);
  padding-bottom: var(--rem-60);
}
.container.cnt {
  max-width: 740px;
}
.w-container {
  margin-left: auto;
  margin-right: auto;
}
.release-cont-in-wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.rel-cont-tab-controls {
  width: 100%;
  margin-right: 0;
  padding: 30px 19px 16px 19px;
  background: #fff;
  top: 66px;
  min-width: 270px;
  position: sticky;
}
.release-cont-heading {
  font-size: var(--rem-24);
  line-height: var(--rem-28);
  color: var(--teritary-color-black);
  font-family: "Raleway", sans-serif;
  text-align: center;
  margin-bottom: var(--rem-12);
  font-weight: 800;
}
.select-box-item {
  color: var(--teritary-shade-03);
  font-family: "Roboto";
  font-size: var(--rem-14);
  font-style: normal;
  font-weight: 500;
  line-height: var(--rem-20);
}
.select-box-item.active {
  color: var(--teritary-shade-04);
  background: var(--primary-shade-01);
  transition: background 300ms ease;
}
.select-box-item:hover {
  color: var(--teritary-shade-04);
}
.rel-tab-cont-wrap {
  padding-left: var(--rem-20);
  padding-right: var(--rem-20);
  padding-top: var(--rem-10);
}
.rel-tab-cont {
  box-shadow: 0px 4px 14px #3535350f;
  border-radius: 4px;
  border: 1px solid #e7e8e8;
  padding: var(--rem-20);
  margin-bottom: var(--rem-base);
}
.rel-time-info {
  font-size: var(--rem-12);
  margin-bottom: var(--rem-4);
  color: var(--teritary-shade-03);
  font-family: "Roboto";
  font-weight: 500;
}
.rel-heading {
  font-size: var(--rem-20);
  line-height: var(--ren-24);
  font-weight: 700;
  margin-bottom: var(--rem-24);
  padding: 6px 0 6px 42px;
  background: url(../imgs/calendar.svg) no-repeat left center/27px;
  color: var(--teritary-color-black);
  word-wrap: break-word;
  width: 240px;
}
.rel-cont-txt-heading {
  color: var(--teritary-shade-04);
  font-size: var(--rem-base);
  font-weight: 500;
  font-family: "Roboto";
  line-height: var(--rem-20);
  margin-bottom: var(--rem-base);
}
.release-content-wrap
  .release-cont-in-wrap
  .rel-tab-cont-wrap
  .rel-tab-cont
  .rel-cont-txt-wrap
  h3:not(:first-child) {
  margin-top: var(--rem-40);
}
.mt-10{
  margin-top: 24px;
}
.rel-cont-txt-list li {
  font-size: var(--rem-14);
  line-height: var(--rem-18);
  color: var(--teritary-shade-03);
  font-weight: 400;
  list-style-type: none;
  padding-left: var(--rem-20);
  background-image: url(../imgs/priv-arrow.svg);
  background-repeat: no-repeat;
  background-position: 0 7px;
  background-size: var(--rem-10);
}
.rel-cont-txt-list li:not(:last-child) {
  margin-bottom: var(--rem-12);
}

.rel-cont-txt-list li ul{
margin-top: var(--rem-10);
}




.rel-cont-txt-par {
  font-family: "Roboto";
  font-size: var(--rem-14);
  font-style: normal;
  font-weight: 400;
  line-height: var(--rem-18);
  color: var(--teritary-shade-03);
}
.rel-cont-img-wrap {
  /* margin-top: var(--rem-30); */
}
.rel-cont-img-wrap img {
  display: block;
  border-radius: 2px;
  /* border: 1px solid #f3f3f3; */
}

figcaption {
  font-size: var(--rem-12);
  color: var(--teritary-shade-03);
  margin-top: var(--rem-4);
}

/* release note tab start  */
.rel-tab {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  width: 0;
  display: none;
}
.rel-tab.active {
  position: initial;
  /* visibility: visible; */
  opacity: 1;
  pointer-events: all;
  width: 100%;
  display: block;
}
/* release note tab end  */
.forQuestions {
  padding: 1rem;
  background-color: var(--teritary-shade-02);
  border-radius: var(--rem-8);
}
.forQuestions p {
  font-size: var(--rem-14);
  font-style: normal;
  line-height: 130%;
  color: var(--teritary-shade-04);
}
.sendMail {
  color: var(--secondary-color-orange);
  font-size: var(--rem-14);
  font-style: normal;
  line-height: 130%;
  text-decoration-line: underline;
}
.sendMail:hover {
  color: var(--secondary-shade-03);
}
/* ? -------------------------------------------------------------------------- */
/* ?                             media query 640px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 40em) {
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 768px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 48em) {
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1024px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  html {
    scroll-padding-top: 100px;
  }

  .md-p-0 {
    padding: 0;
  }
  .release-content-wrap {
    padding-top: var(--rem-90);
    padding-bottom: var(--rem-90);
  }
  .container.cnt {
    max-width: 992px;
  }
  .release-cont-in-wrap {
    flex-wrap: nowrap;
    width: 100%;
  }
  .rel-cont-tab-controls {
    margin-right: 16px;
    width: 270px;
    min-width: 270px;
    position: sticky;
    position: -webkit-sticky;
    top: 105px;
    margin-bottom: 160px;
    padding: 0;
  }

  .rel-tab-cont {
    padding: var(--rem-40);
  }
  .dropdown-toggle {
    display: none;
  }
  .dropdown .dropdown-menu {
    box-shadow: none;
  }
  .release-cont-heading {
    text-align: left;
    padding: 0 var(--rem-24);
  }
  .rel-time-info {
    font-size: var(--rem-14);
    line-height: var(--rem-18);
  }
  .rel-heading {
    font-size: var(--rem-24);
    line-height: var(--rem-36);
    width: 100%;
  }
  .rel-cont-txt-heading {
    font-size: var(--rem-20);
    font-weight: 600;
    line-height: normal;
  }
  .rel-cont-txt-list li,
  .rel-cont-txt-par {
    font-size: var(--rem-base);
    line-height: 1.5;
  }
  .dropdown .dropdown-menu::-webkit-scrollbar {
    width: 10px;
  }

  .dropdown .dropdown-menu::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: var(--teritary-shade-01);
    border: 1px solid --teritary-shade-03;
  }

  .dropdown .dropdown-menu::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--teritary-shade-02);
  }
  .dropdown .dropdown-menu > li {
    border-bottom: 1px solid #efefef;
  }

  .forQuestions {
    padding-left: var(--rem-40);
    padding-right: var(--rem-40);
  }

  .forQuestions p,
  .sendMail {
    font-size: var(--rem-base);
    line-height: normal;
  }
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1280px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 80em) {
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1440px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 90em) {
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1536px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 96em) {
}
