* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}
body {
  font-family: 'Noto Kufi Arabic', sans-serif;
  font-size: 14px;
}

.navbar {
  background-color: transparent;
}
.navbar .nav-link {
  width: fit-content !important;
}
.d-icon {
  color: #315A80 !important;
  font-size: 17px;
}

.link-color {
  color: #315A80 !important;
  
}
.light-green {
  color: #64b4cb;
}
.data-box {
  min-width: 150.5px;
}
.f-18 {
  font-size: 16px;
}
.f-12 {
  font-size: 13px;
}
.i-link {
  font-size: 22px;
}
.page-def .text,
.page-def i {
  color: #315A80;
  font-size: 18px;
}

.toggle-btn-color {
  background-color: #59AAC8;
}

.beget {
  top: 2px;
  left: 0px;
  background-color: red;
  padding: 1px 4px;
  color: white;
  font-size: 11px;
  border-radius: 9px;
}

/* start content */
/* start navigation */
.section .navigation {
  width: 210px;
  min-height: 547px;
  border-radius: 50px 0 0 0;
  background-color: #F1FAFF;
  transition: 0.3s;
}
@media (max-width: 1199.98px) { .section .navigation {
  position: fixed !important;
  display: none;
  z-index: 1000;
  top:0;
  right: 0;
  height: 100%;
  
} }
.section .navigation.show {
  display: block;
}
.navigation-close {
  position: absolute;
  top: 15px;
  left: 22px;
  cursor: pointer;
  background-color: #0000004d;
  outline: none;
  border: none;
  z-index: 1001;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section .navigation ul {
  top: 0%;
  right: 0%;
  width: 100%;
  padding: 10px;
  transition: 0.5s;
}

.section .navigation ul .list {
  position: relative;
  width: 100%;
}

.section .navigation ul .list a {
  padding-right: 5px;
  font-weight: bold;
  position: relative;
  width: 100%;
  color: #929798;
  display: flex;
  transition: color 0.2s;
  margin-bottom: 10px;
  fill: #929798;
  position: relative;
}


.section .navigation ul .list.active a {
  color: #315A80;
  fill: #315A80;
}
.section .navigation ul .list.active a::before  {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  height: 100%;
  width: 4px;
  background-color: #315A80;
  }
.section .navigation  .img-user {
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 50%;
  margin-bottom: 10px;
  margin-top: 14px;
}

.section .navigation .img-user  > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.section .navigation  .img-user::before {
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  position: absolute;
  content: "";
  transform: translate(-50%,-50%) rotate(10deg);  left: 50%;
  top: 50%;
  border-radius: 50%;
  border-color: #2ADF8B #2ADF8B #2ADF8B transparent;
  border-width: 5px;
  border-style: solid;
}

.section .navigation ul .list a .icon {
  position: relative;
  display: flex;
  align-items: center;
  
  text-align: center;
}

.section .navigation ul .list a .icon i,.section .navigation ul .list a .icon svg {
  width: 35px;

  font-size: 1.4em;
}

.section .navigation ul .list a .title {
  position: relative;
  display: flex;

  align-items: center;
  height: 35px;
  font-weight: bold;
}


/* //////////////////////////// */
.section-content {
  border: 2px solid #64b4cb;
  border-radius: 20px;
}

.section .page-content .section-content .title {
  top: -14px;
  right: 30px;
  background-color: white;
  width: fit-content;
  color: #00BDF0 !important;
  font-size: 17px;
  font-weight: bolder;
  padding:2px 10px;
  text-align: center;
  border-radius: 50px;
}
.section .page-content .section-content .title-white{
  top: -14px;
  right: 30px;
  color: white;
  width: fit-content;
  border-radius: 5px;
  background-color: #59AAC8 !important;
  font-size: 17px;
  font-weight: bolder;
  padding:2px 10px;
  text-align: center;
}

.btn-main-color {
  background-color: #59AAC8;
  color: white;
  transition: 0.5s;
}

.btn-main-color:hover {
  background-color: #5997ae;
  color: white;
}

.icon-holder {
  background-color: #EAF4FA;
  width: 65px;
  height: 65px;
  position: relative;
  
  z-index: 1;
}
.bg-color {
  background-color: #00BDF0;
}
.layer{

  position: absolute;
  left: 58%;
  z-index: -1;
  top: 43%;
  transform: translate(-50%, -50%);
  width: 121px;

}

.box-icon-color {
  font-size: 26px;
    color: #315A80;
}

.cs-label {
  font-size: 12px;
    font-weight: 500;
    color: #7c7c7c;
}
.grid-6 {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7,1fr);
}
@media (max-width: 1199.98px) { .grid-6 {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4,1fr);
} }
@media (max-width: 991.98px) { .grid-6 {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2,1fr);
} }
.drop-d-account .nav-link:hover,.drop-d-account .nav-link:focus{
  color: #64b4cb !important;
}
.drop-d-account .nav-link.show .arrow-bottom{
  display: none;
}
.drop-d-account .nav-link .arrow-top{
  display: none;
}
.drop-d-account .nav-link.show .arrow-top{
  display: block;
}
.drop-d-account .nav-link {
  border-radius: 5px 5px 0 0 ;
}
.drop-d-account .nav-link.show {
  transition: 300ms;
  box-shadow: 0 0 6px 0 #ddd, 0 0 20px 0 #0000000a;
}
.drop-d-account .dropdown-menu{
  border: none !important;
  margin: 0 !important;
  text-align: start;
  transition: 300ms;
  position: absolute !important;
  box-shadow: 0 10px 13px 0 #0808080d, 0 10px 20px 0 #0000000a;
}
.drop-d-account .dropdown-menu .dropdown-item {
display: flex;
align-items: center;
gap: 30px;
}
.drop-d-account .dropdown-menu .dropdown-item .icon,
.drop-d-account .dropdown-menu .dropdown-item svg{
  width: 30px;
  text-align: center;
  color: #00BDF0 ;
  fill: #00BDF0 ;
  margin-right: auto;
  margin-left: 0;
  display: inline-block;
}
.list-filter .item-filter {
  font-weight: bold;
  border-radius: 4px;
  color: #7c7c7c;
  font-size: 13px;
  cursor: pointer;
  padding: 5px 10px;
  transition: 300ms;
}
@media (max-width: 991.98px) {
  .list-filter .item-filter {
    font-size: 11px;
  }
}
.list-filter .item-filter:hover {
  background-color: #7c7c7c67;
  color: white;
}
  .list-filter .item-filter.active {
    background-color: #59AAC8;
    color: white;
  }