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

@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

@import url("https://fonts.googleapis.com/css?family=Roboto:400");

:root {
  --x5b648a: #fdfeff;
  --primary100: #a6adce;
  --primary200: #7d87b1;
  --primary300: #5a638a;
  --black: #000000;
  --white: #ffffff;
  --pewter-blue: #8d95b6;
  --blue-bell: #929abe;
  --snuff: #d7daeb;
  --link-water: #e0e2f1;
  --font-size-xl2: 24px;
  --font-size-m3: 16px;
  --font-size-s2: 15px;
  --font-size-m22: 17.5px;
  --font-size-l2: 20px;
  --font-family-roboto: "Roboto", Helvetica;
}

* {
  box-sizing: border-box;
}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}


.nav-link {
  transition: none !important;
}

.right-panel-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 496px;
  position: relative;
  width: 284px;
}

.panel-right-top-bar {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  width: 100%;
}

.panel-right-level-1-box {
  align-items: center;
  align-self: stretch;
  /* background-color: #d7daec; */
  display: flex;
  height: 50px;
  justify-content: center;
  padding: 0px 10px;
  position: relative;
  width: 100%;
  background: linear-gradient( 180deg, #76a9c8 0%, #6aa0c1 100% );
}

.panel-right-level-1-text {
  color: #FFF;
  flex: 1;
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l2);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.panel-right-first-bar-box {
  align-items: center;
  align-self: stretch;
  background-color: #6590b5;
  display: flex;
  height: 50px;
  justify-content: center;
  padding: 0px 10px;
  position: relative;
  width: 100%;
 
}

.panel-right-icon-close-box {
  height: 24px;
  left: 257px;
  position: absolute;
  top: 3px;
  width: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-right-icon-close-box:hover {
  opacity: 0.75;
}

.panel-right-icon-close-box-2 {
  height: 24px;
  left: 257px;
  position: absolute;
  top: 3px;
  width: 24px;
  cursor: pointer;
  /* transition: all 0.2s ease; */
}

.panel-right-icon-close-box-2:hover {
  opacity: 0.75;
}

.right-panel-heading-font {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xl2);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.panel-right-chapter-text {
  color: #fff;
  flex: 1;
  font-weight: 400;
  line-height: 28.8px;
  position: relative;
  text-align: center;
  text-shadow: 0px 0px 2px #00000040;
  padding-top: 10px;
}

.x-container {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.right-panel-main-part {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 336px;
  overflow: auto;
  /* background-color: #e5e6f0; */
  background: linear-gradient( 180deg, #fbfdff 0%, #fbf8f8 100% );
}

.right-panel-menu-item-box {
  color: #366288;
  align-items: center;
  align-self: stretch;
  /* background-color: #e5e6f0; */
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: #f2eaea;
  display: flex;
  height: 48px;
  padding: 15px 21px 15px 30px;
  position: relative;
  width: 100%;
  cursor: pointer;
  /* transition: all 0.2s ease; */
  background: linear-gradient( 180deg, #fbfdff 0%, #fbf8f8 100% );
}

/* .right-panel-menu-item-box:hover {
  background-color: #90bfc0 !important;
  color: #fff !important;
} */

.right-panel-menu-item-text {
  flex: 1;
  font-weight: 400;
  line-height: 19px;
  margin-top: 7px;
  position: relative;
  margin-left: 10px;
}

.right-panel-menu-item-font {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m3);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.submenu-item-box {
  align-items: center;
  align-self: stretch;
  background: linear-gradient( 180deg, #76a9c8 0%, #78a7c4 100% );
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: #679dbd;
  display: flex;
  height: 40px;
  padding: 0px 10px 0px 30px;
  position: relative;
  width: 100%;
  cursor: pointer;
  /* transition: all 0.2s ease; */
}

.submenu-item-box:hover {
  opacity: 0.85;
}

.submenu-item-box-active {
  opacity: 0.85 !important;
}

.active-slides {
  opacity: 0.85 !important;
}

.activ .submenu-item-text {
  flex: 1;
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
}

.submenu-item-font {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-s2);
  font-style: normal;
  font-weight: 400;
}

.panel-right-bottom-bar {
  align-items: center;
  align-self: stretch;
  /* background-color: #e5e6f0; */
  background: linear-gradient( 180deg, #fbfdff 0%, #fbf8f8 100% );
  display: flex;
  gap: 25px;
  height: 60px;
  justify-content: flex-end;
  padding: 0px 30px 0px 0px;
  position: relative;
  width: 100%;
  border-top-style: solid;
  border-top-width: 1px;
  border-color: #f2eaea;
}

.panel-right-icons {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 25px;
  justify-content: flex-end;
  position: relative;
}

.level-2-noactive-box {
  background-color: #5a85aa;
  border-radius: 15.6px;
  box-shadow: 0px 0px 2px #00000040;
  height: 31.2px;
  margin-bottom: -0.2px;
  margin-right: -0.2px;
  position: relative;
  width: 31.2px;
  cursor: pointer;
  /* transition: all 0.2s ease; */
}

.level-2-noactive-box:hover {
  opacity: 0.85;
}

.level-2-noactive {
  left: 11px;
  letter-spacing: 0;
  line-height: 21.1px;
  position: absolute;
  top: 4px;
  white-space: nowrap;
  width: 19px;
}

.right-panel-circle-font {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m22);
  font-style: normal;
  font-weight: 400;
}

.level-1-active-box {
  height: 31px;
  position: relative;
  width: 31px;
}

.overlap-group {
  align-items: flex-start;
  background-color: var(--primary200);
  border: 3px solid;
  border-color: var(--primary100);
  border-radius: 18.6px;
  box-shadow: 0px 0px 2px #00000040;
  display: flex;
  height: 37px;
  justify-content: center;
  left: -3px;
  min-width: 37px;
  padding: 3.9px 7.9px;
  position: relative;
  top: -3px;
}

.level-1-active {
  letter-spacing: 0;
  line-height: 21.1px;
  min-height: 18px;
  white-space: nowrap;
}

.panel-right-circle-icons-box {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 25px;
  justify-content: flex-end;
  position: relative;
}

.level-2-active-box {
  border: 0px none;
  height: 31px;
  position: relative;
  width: 31px;
}

.overlap-group {
  align-items: flex-start;
  background-color: #5a85aa;
  border: 3px solid;
  border-color: #61a2ca;
  border-radius: 18.6px;
  box-shadow: 0px 0px 2px #00000040;
  display: flex;
  height: 37px;
  justify-content: center;
  left: -3px;
  min-width: 37px;
  padding: 4.9px 7.9px;
  position: relative;
  top: -3px;
}

.level-2-active {
  letter-spacing: 0;
  line-height: 21.1px;
  min-height: 18px;
  white-space: nowrap;
}

.level-1-noactive-box {
  background-color: #5a85aa;
  border-radius: 15.6px;
  box-shadow: 0px 0px 2px #00000040;
  height: 31.2px;
  margin-bottom: -0.2px;
  position: relative;
  width: 31.2px;
  cursor: pointer;
  /* transition: all 0.2s ease; */
}

.level-1-noactive-box:hover {
  opacity: 0.85;
}

.level-1-noactive {
  left: 11px;
  letter-spacing: 0;
  line-height: 21.1px;
  position: absolute;
  top: 4px;
  white-space: nowrap;
  width: 19px;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #d7daec #e5e6f0;
}

Chrome,
Edge,
and Safari *::-webkit-scrollbar {
  width: 9px;
}

*::-webkit-scrollbar-track {
  background: #e5e6f0;
}

*::-webkit-scrollbar-thumb {
  background-color: #d7daec;
  border-radius: 20px;
  border: 3px solid #e5e6f0;
}

.level-one-active {
  border-bottom: none !important;
  background-color: #76c8c8 !important;
  color: #ffffff !important;
  background-image: none !important;
}

.level-two-active {
  background-color: #90bfc0;
  color: #fff !important;
  border-bottom: none !important;
}

/* .panel-right-active-menu-item:hover{
background-color: #90bfc0;
color:#FFF !important;
border-bottom: none !important;
} */

.hide-level {
  display: none;
}

.submenu-item-active {
  opacity: 0.85;
}

@media screen and (max-width: 650px) {
  .panel-right-icon-close-box {
    left: 7px;
  }
}