@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap");
@import url("../fonts/DroidNaskh-Bold.ttf");
@import url("../fonts/DroidNaskh-Bold.eot");
@import url("../fonts/DroidNaskh-Bold.woff");
@import url("../fonts/DroidNaskh-Regular.eot");
@import url("../fonts/DroidNaskh-Regular.ttf");
@import url("../fonts/DroidNaskh-Regular.woff");
@import url("../fonts/Droid-Naskh-Regular.ttf");

*{
  list-style: none;
  text-decoration: none;
}
body{
  direction: rtl;
  font-family:"Droid Arabic Naskh", sans-serif;
}

.aside-aast-menu-nav{
  direction: rtl;
}
.aside-aast-menu-nav a, .aside-aast-menu-nav label {
  display: block;
  padding: .85rem;
  color: #0f3da3;
  background-color: #f9f9f9;
  /* box-shadow: inset 0 -1px #1d1d1d; */
  /* -webkit-transition: all .25s ease-in; */
  transition: all .25s ease-in;
  font-weight: 600;
  font-size: 1.1em;
  letter-spacing: 0;
  font-family: "Droid Arabic Naskh", sans-serif;
  letter-spacing: -0.02em;
}

.aside-aast-menu-nav a:focus, .aside-aast-menu-nav a:hover, .aside-aast-menu-nav label:focus, .aside-aast-menu-nav label:hover {
  color: #f44336;
  background: #f3f3f3;
}

.aside-aast-menu-nav label {cursor: pointer;display: flex;align-items: center;justify-content: space-between;flex-direction: row-reverse;}

/**
 * Styling first level lists items
 */

.group-list a, .group-list label {
  padding-right: 1rem;
  background: #ffffff;
  /* box-shadow: inset 0 -1px #373737; */
  color: #8c8b8b;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover {background: #e5e5e5;}

/**
 * Styling second level list items
 */

.sub-group-list a, .sub-group-list label {
  padding-left: 1rem;
  background: #ffffff;
  /* box-shadow: inset 0 -1px #474747; */
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover {background: #e5e5e5;}

/**
 * Styling third level list items
 */

.sub-sub-group-list a, .sub-sub-group-list label {
  padding-left: 6rem;
  background: #ffffff;
  /* box-shadow: inset 0 -1px #575757; */
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover {background: #e5e5e5;}

/**
 * Hide nested lists
 */

.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}

.aside-aast-menu-nav .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */max-height: 1000px;margin: 0;padding: 0;}

/**
 * Rotating chevron icon
 */

label > span {
  float: right;
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}

.aside-aast-menu-nav .nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #f44336;
}
.aside-aast-menu-nav .nav__list li{
  position: relative;
}

.aside-aast-menu-nav .nav__list li.active:after{
  content: '';
  width: 5px;
  height: 34px;
  background: rgb(241 197 14);
  position: absolute;
  margin-top: 0;
  top: 28px;
  right: -12px;
  transform: translateY(-50%);
}
.aside-aast-menu-nav .nav__list li.active > a{
  color: #00226f !important;
}
.sub-group-list li > label,
.group-list > label{
  position: relative;
}

.sub-group-list li > label.active:after,
.group-list label.active:after{
  content:"";
  position: absolute;
  width: 4px;
  height: 100%;
  background-color: #878787;
  right: 0;
  top: 0;
}

.sub-group-list li > label.active:after{
  left: 20px
}

.aside-aast-menu .title-aside-aast-menu{
position: relative;
font-size: 1.4em;
margin: 0;
color: #25272d;
font-weight: 600;
text-align: right;
padding: 30px 5px 30px 25px;
letter-spacing: -0.03em;
font-family: var(--bffamily);
}

.aside-aast-menu .title-aside-aast-menu:after{
  content: '';
  position: absolute;
  right: -10px;
  background-color: #1699d5;
  width: 5px;
  height: 100%;
  top:0
}

.aside-aast-menu .title-aside-aast-menu:before{
  content: '';
  position: absolute;
  right: 15px;
  background-color: #37b1e9;
  width: 50px;
  height: 2px;
  bottom:0
}