@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/alexandria/v3/UMBXrPdDqW66y0Y2usFeaijdA4M5.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* vietnamese */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/alexandria/v3/UMBXrPdDqW66y0Y2usFeaiLdA4M5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/alexandria/v3/UMBXrPdDqW66y0Y2usFeaiPdA4M5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/alexandria/v3/UMBXrPdDqW66y0Y2usFeai3dAw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.ms-rteThemeForeColor-5-3, .ms-rteThemeForeColor-2-3 {
  color: inherit;
}

.btn-secondary {
  border-radius: 16px;
  font-size: 14px;
}

.btn-primary {
  font-size: 14px;
  color: #fff;
  background-color: #00A287;
  border-color: #00A287;
  border-radius: 16px;
  padding: 8px 30px;
}

  .btn-primary:hover {
    color: #00A287;
    background-color: #fff;
    border-color: #00A287;
  }

  .btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: none;
  }

  .btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #00A287;
    background-color: #fff;
    border-color: #00A287;
    box-shadow: none;
  }

#GOImageModal.modal {
  display: none;
  position: fixed;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,.9);
  z-index: 99999999
}

#GOImageModal .modal-content {
  margin: auto;
  display: block;
  width: auto;
  height: 80%;
  max-width: 700px
}

#GOImageModal.lg .modal-content {
  width: 80% !important;
  height: auto !important
}

#GOImageModalCaption {
  margin: 10px auto auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
  font-size: 20px
}

#at4-share:hover #at4-scc, #at4-soc {
  background-color: #fffbfba3;
  height: 24px;
  text-align: left;
  font-size: 17px
}

#GOImageModal .modal-content, #GOImageModalCaption {
  animation-name: zoom;
  animation-duration: .6s
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

#GOImageModal .close {
  color: #888;
  float: none !important;
  font-size: 50px;
  font-weight: 700;
  transition: .3s
}

  #GOImageModal .close:focus, #GOImageModal .close:hover {
    color: #bbb;
    text-decoration: none;
    cursor: pointer
  }

@media only screen and (max-width: 700px) {
  #GOImageModal .modal-content {
    width: 100%
  }
}

.modal-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  color: #000;
  font-size: 32px;
  z-index: 99999999999991;
  height: 57px
}

  .modal-topbar .modal-topbar-list, .timeline > li:after {
    clear: both
  }

  .modal-topbar .modal-topbar-btn, .panel-footer1 ul.pagination li, .timeline > li.timeline-inverted > .timeline-panel {
    float: right
  }

    .modal-topbar .modal-topbar-btn.pull-left {
      float: left !important
    }

    .modal-topbar .modal-topbar-btn a, .modal-topbar .modal-topbar-btn span {
      height: 57px;
      padding: 12px 22px !important;
      text-align: center;
      color: #888
    }

      .modal-topbar .modal-topbar-btn a:hover, .regnumb:hover {
        color: #fff
      }

      .modal-topbar .modal-topbar-btn a i {
        font-size: 35px !important;
        vertical-align: middle;
        margin: 0 8px 5px
      }

.overlayGallery {
  position: absolute;
  top: 282px !important;
  display: block !important;
  width: 89% !important;
  padding: 0 !important;
  transition: .36s;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  background-color: #fff
}

.containerGallery:hover .overlayGallery {
  display: block !important;
  height: 85% !important;
  top: 0 !important;
  background-color: #fff !important
}

body {
  /* background-color: #fafafa !important; */
  background-image: none !important;
  font-size: 14px;
}

.ms-webpartzone-cell {
  margin: 0 !important;
}

.ms-webpart-zone, .ms-webpart-cell-vertical, .ms-webpart-chrome-vertical {
  display: block !important
}

.ms-webpartzone-cell {
  margin-bottom: 0 !important
}

.ms-core-overlay {
  background-color: transparent !important;
}

#s4-bodyContainer {
  padding-bottom: 0;
}

.ul-about li img {
  display: none;
}

.container-all, h1, h2, h3, h4, h5, h6, .ms-h2, .ms-h3, .ms-headerFont, .modal {
  font-family: "Alexandria";
  outline: none !important;
}

h1, h2, h3, h4, h5, h6, .ms-h1, .ms-h2, .ms-h3, .ms-h4, .ms-h5, .ms-h6 {
  margin: 0;
}

.separator-newDesign {
  border-bottom: 1px solid #D1D5DB;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.container-all input[type=button], .container-all input[type=reset], .container-all input[type=submit], button {
  min-width: auto;
}

.date-div h3, .btn-news-all, footer h2, .btn-contact-us, .btn-slider, .btn-mowhiba-number {
  color: #fff !important;
}

.big-menu .menu > ul > li {
  line-height: 0 !important;
}

.pic-news-item {
  height: 150px;
}

.pic-event-item {
  height: 120px;
}

.ul-about > li:nth-child(3) {
  display: none;
}

.btn-event-all {
  color: #2B254B !important;
}

#det img {
  max-width: 100%;
}

.level-band {
  background: transparent;
}

.toc-layout-main > ul > li > div {
  display: none;
}

.achievementCards i {
  font-size: 44px;
  margin-bottom: 20px;
}

.achievementCards .card:nth-child(1) i {
  color: #3daadf;
}

.achievementCards .card:nth-child(2) i {
  color: #6ac163;
}

.achievementCards .card:nth-child(3) i {
  color: #ea454a;
}

.achievementCards .card:nth-child(4) i {
  color: #8076ac;
}

.achievementCards a {
  color: #000;
  text-decoration: none !important;
  padding: 20px;
}

.achievementCards .card {
  background: #ffffff;
  margin: 10px;
  /*width: 25%; */
  /* height: 300px; */
  overflow: hidden;
  border-radius: 20px;
}

.achievementCards .col-12 .row .card {
  /*width: 25%; 
            height: 300px;*/
}

.achievementCards .card:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.1);
}

.achievementCards .card-body {
  text-align: center;
}

.achievementCards .card-title {
  margin-bottom: 0;
}


/*new styles ribbon*/
.ms-rteStyle-title-main {
  -ms-name: "main title";
  color: #2B254B;
  padding-bottom: 10px;
}

.ms-rteStyle-subtitle-1 {
  -ms-name: "subtitle 1";
  color: #2B254B;
  padding-bottom: 10px;
}

.ms-rteStyle-subtitle-2 {
  -ms-name: "subtitle 2";
  color: #757273;
  padding-bottom: 10px;
}

.ms-rteStyle-content-main {
  -ms-name: "main content";
  color: #757273;
}

.ms-rteStyle-link-content {
  -ms-name: "link content";
  color: #2B254B;
  text-decoration: underline;
}

.ms-rteStyle-numbers-EN {
  -ms-name: "Numbers EN";
  font-family: Verdana !important;
}

.EditorStyle a:link, .EditorStyle a:visited {
  color: inherit !important;
}

.EditorStyle a.btn-custom:link, .EditorStyle a.btn-custom:visited {
  color: #fff !important;
}

.EditorStyle ul li {
  list-style: circle !important;
  /*margin: 0 18px;*/
}

.EditorStyle ol li {
  /*margin: 0 18px;*/
}

.EditorStyle ol ul, .EditorStyle ul ol, .EditorStyle ul ul, .EditorStyle ol ol {
  /*margin:0 18px;*/
}

.EditorStyle h1, .EditorStyle h2, .EditorStyle h3, .EditorStyle h3 {
  color: #2B254B !important;
}

/*menu.css .big-menu .menu>ul>li  comment line-height: 3.125rem;*/

.text-primary {
  color: #2B254B !important;
}

.container-all {
  font-family: "Alexandria";
  outline: none !important;
}

.font-size-12 {
  font-size: 12px !important;
}

.font-size-14 {
  font-size: 14px !important;
}

.font-size-16 {
  font-size: 16px !important;
}

.m-w-auto {
  min-width: auto !important;
}

.container-all ul {
  margin: 0px;
  padding: 0px;
}

  .container-all ul li {
    list-style: none;
  }

.container-all button {
  outline: none !important;
}

.container-all a:hover {
  cursor: pointer;
  text-decoration: none; /* color: #2B254B; */
}

.d-flex-between {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-items: center;
}

.join-us {
  background-color: #E2A947;
  color: #fff;
  bottom: 124px;
  position: fixed;
  z-index: 500;
  font-size: 16px;
  padding: 12px 12px;
  left: 0px;
  border-radius: 0px 20px 20px 0px;
}

  .join-us:lang(ar) {
    left: auto;
    right: 0px;
    border-radius: 30px 0px 0px 30px;
  }

  .join-us:hover {
    color: #fff;
  }
/* ..........preloader........... */

#preloader {
  background: #fff;
  height: 100%;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999999999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

  #preloader .ctn-preloader {
    padding-left: 15px;
    padding-right: 15px;
  }

  #preloader .round_spinner {
    border-width: 1px;
    border-color: #e1e1e1;
    border-style: solid;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 100px 0 rgb(4 46 56 / 5%);
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 40px auto 80px;
  }

  #preloader .spinner {
    animation: spinner 3s infinite linear;
    border-radius: 50%;
    border: 3px solid #f1f6f8;
    border-left-color: #2B254B;
    border-top-color: #2B254B;
    margin: 0 auto 0em auto;
    position: absolute;
    left: -40px;
    right: -40px;
    bottom: -40px;
    top: -40px;
  }

    #preloader .spinner:before {
      content: "";
      width: 20px;
      height: 20px;
      border: 6px solid #2B254B;
      box-shadow: 0 0 20px 0 rgba(7, 4, 56, 0.2);
      position: absolute;
      right: 31px;
      top: 28px;
      border-radius: 50%;
      background: #fff;
    }

  #preloader .head {
    display: block;
    font-size: 26px;
    color: #2B254B;
    text-transform: uppercase;
    text-align: center;
    margin: 5% 0 1%;
    padding: 0;
    margin-bottom: 10px;
  }

    #preloader .head b {
      color: #FFCB42;
    }

  #preloader p {
    display: block;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    border: none;
    margin: 0;
    padding: 0;
  }

.ctn-preloader img {
  width: 100px;
}

@keyframes spinner {
  to {
    transform: rotateZ(360deg)
  }
}
/* ------------------------------ */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
}

  ::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(0, 0, 0, 0.3);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: black;
  -webkit-transition: all 300ms ease-in-out;
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.2);
}

.chat-btn {
  background-color: #2B254B;
  border: none;
  position: fixed;
  right: 10px;
  bottom: 10px;
  color: #fff;
  padding: 20px;
  font-size: 20px;
  z-index: 10;
  border-radius: 50%;
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

  .chat-btn:lang(ar) {
    right: auto;
    left: 10px;
  }

  .chat-btn:hover {
    background-color: #E2A947;
  }
/* ------------mowhiba-----------------*/
.mowhiba-sec {
  padding: 40px 0px;
  background-image: url(../images/serviceSec/clip-logo.svg);
  background-position: right top;
  background-repeat: no-repeat;
}

  .mowhiba-sec hr {
    border-top: 1px solid rgba(255,255,255,.8);
  }

.ul-about li {
  margin: 40px 0px;
  list-style: none;
}

@media (max-width:991px) {
  .dfwp-list li a {
    display: block !important;
    margin-bottom: 0px !important;
  }

  .ul-about li {
    margin: 10px 0px;
  }
}

.ul-about li a {
  box-shadow: 0px 30px 60px rgb(19 45 73 / 6%);
  padding: 30px 20px;
  position: relative;
  display: block;
  border-radius: 20px;
  background-color: rgba(255,255,255,.5);
}

.ul-about li img {
  margin-bottom: 29px;
  height: 60px;
}

.ul-about li h5 {
  /* margin-bottom: 30px; */
  color: #575756;
  /* min-height: 50px; */
  transition: .5s;
}

.ul-about li:hover h5 {
  color: #2B254B;
}

.ul-about li p {
  height: 100px;
  overflow: hidden;
}

.ul-about li a::before {
  transform: scaleX(0);
  transform-origin: bottom right;
  border-radius: 20px;
}

.ul-about li a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.ul-about li a::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0 0 0 0;
  background: #E5E3F3;
  z-index: -1;
  transition: transform .3s ease;
  border-radius: 20px;
}

.number-sec p {
  max-width: 330px;
}
/* ------------small header-----------------*/

.small-header {
  background-color: #E5E3F3;
  padding: 12px 0px;
  min-height: 55px;
}

@media (max-width:992px) {
  .small-header {
    padding: 12px 0px;
  }
}

.ul-small-header {
  margin: 0px;
}

  .ul-small-header li {
    display: inline-block;
    list-style: none;
  }

    .ul-small-header li a {
      display: block;
      padding: 0px 30px 0px 15px;
      position: relative;
      /* font-size: 14px; */
      color: #2B254B;
    }

@media (max-width:768px) {
  .ul-small-header li:nth-child(1) {
    /* display: none; */
  }
}

.ul-small-header li:nth-child(2) a {
  /*border-right: 1px solid #2B254B;*/
}

.ul-small-header:lang(ar) li:nth-child(2) a {
  /*border-left: 1px solid #2B254B;
  border-right: none;*/
}

.ul-small-header li:nth-child(3) a {
  background-color: #fff;
  padding: 5px 12px 5px 5px;
  border-radius: 9px;
  min-width: 140px;
  text-align: center;
  box-shadow: 0px 9px 18.5px -12px #0000001C;
  transition: .7s;
  margin-right: 7px;
}

.ul-small-header:lang(ar) li:nth-child(3) a {
  padding: 5px 5px 5px 12px;
}

.ul-small-header li:nth-child(3) a:hover {
  background-color: #2B254B;
  color: #fff;
}

.ul-small-header li:nth-child(3) span {
  font-size: 16px;
  position: absolute;
  top: 7px;
  padding: 0px 3px;
}

.ul-small-header li a i {
  position: absolute;
  right: 8px;
  top: 0px;
  font-size: 16px;
}

/* ------------dropdown-----------------*/

.dropdown-menu {
  box-shadow: 0 .5rem .4rem rgba(0, 0, 0, .1);
  animation-name: DropDownSlide;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  margin: 0;
  position: absolute;
  z-index: 1000;
  border: none;
}

  .dropdown-menu.show {
    top: 100% !important;
  }

.dropdown-menu-end[style] {
  left: auto !important;
  right: 0 !important;
}

.dropdown-menu[data-popper-placement^=right],
.dropdown-menu[data-popper-placement^=top],
.dropdown-menu[data-popper-placement^=left] {
  top: auto !important;
  animation: none !important;
}

@keyframes DropDownSlide {
  100% {
    transform: translateY(0);
  }

  0% {
    transform: translateY(10px);
  }
}

@media (min-width: 600px) {
  .dropdown-menu-lg {
    width: 320px;
  }

  .dropdown-menu-md {
    width: 240px;
  }
}

.dropdown-divider {
  border-top-color: #eee;
}

.dropdown-item {
  font-size: 12px;
}

  .dropdown-item.active,
  .dropdown-item:active {
    background-color: #e9e9e9;
    color: #2a3042;
  }

.header-item {
  font-size: 12px;
  box-shadow: none !important;
  min-width: 160px;
}

.header-profile-user {
  height: 36px;
  width: 36px;
  background-color: #dbdbdb;
  padding: 3px;
}

.navbar-header .dropdown .show.header-item {
  background-color: #f8f9fa;
}



/* -------------------service------------- */

.item-services {
  padding: 20px;
  box-shadow: 0px 0px 15px #eee;
  background-color: #fff;
  border-radius: 15px;
  margin-top: 20px;
  position: relative;
  border: 1px solid #D1D5DB;
  transition: .3s;
}

  .item-services:hover {
    scale: 1.05;
  }

.icon-dashboard img {
  /* width: 116px; */
  height: 62;
  margin-bottom: 20px;
}

.item-services h3 {
  font-size: 15px;
  color: #737576;
  font-weight: bold;
  margin: 0px;
  margin-bottom: 10px;
}

.item-services p {
  font-size: 13px;
  color: #737576;
  height: 61px;
  overflow: hidden;
}

.most-use {
  position: absolute;
  left: 20px;
  top: 0px;
  background-color: #7b70aa;
  color: #fff;
  padding: 5px;
  font-size: 9px;
  border-radius: 0px 0px 10px 10px;
  font-weight: bold;
}

.content-page {
  padding: 40px 0px;
}

.service-start {
  position: relative;
  padding: 5px 10px 5px 30px;
  text-align: right;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #737576;
  border-radius: 20px;
  border: 1px solid #D1D5DB;
  background-color: #eeeeee;
}

.item-services:hover .service-start {
  background-color: #7b70aa;
  color: #fff;
  /* font-size: 14px; */
}

.service-start i {
  position: absolute;
  left: 5px;
  top: 5px;
  color: #737576;
  font-size: 20px;
  top: 5px;
  /* background-color: #333; */
}

.item-services:hover i {
  animation: linear infinite alternate;
  animation-name: arrow-ani;
  animation-duration: 1s;
  color: #fff;
}

@keyframes arrow-ani {
  0% {
    left: 0;
  }

  50% {
    left: 5px;
  }

  100% {
    left: 0;
  }
}

.container-title-service {
  padding-right: 22px;
  position: relative;
}

  .container-title-service img {
    position: absolute;
    right: 0px;
    width: 15px;
  }


/* -----------------events-sec------------- */

.events-sec {
  padding: 0px 0px 80px 0px;
}

  .events-sec hr {
    border-top: 1px solid #D1D5DB;
    opacity: .8;
  }

.events-inner-sec {
  position: relative;
  background-image: url(../images/events/back.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 30px 0px 95px 0px;
  /* background-size: 100% 100%; */
}

  .events-inner-sec::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    /* backdrop-filter: blur(1px); */
    background-color: rgba(43, 37, 75, 0.8);
  }

  .events-inner-sec .container {
    position: relative;
    z-index: 1;
  }

.btn-sys {
  position: relative;
  padding: 10px 32px 14px 32px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  color: #fff;
  border-radius: 16px;
  transition: .5s;
}

  .btn-sys i {
    position: relative;
    top: 5px;
    font-size: 26px;
    transition: .5s;
    transform: scaleX(-1);
    transform: rotate(160deg);
    /* transform-origin: bottom; */
  }

    .btn-sys i:lang(ar) {
      transform: rotate(30deg) scaleX(1);
    }


.btn-slider, .btn-mowhiba-number {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin-bottom: 20px;
}

  .btn-slider:hover, .btn-mowhiba-number:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
  }

.btn-event-all {
  background-color: #fff;
  border: 1px solid #2B254B;
  color: #2B254B;
}

  .btn-event-all:hover {
    color: #2B254B;
  }

.btn-news-all {
  background-color: #2B254B;
  color: #fff;
}

  .btn-news-all:hover {
    color: #fff;
  }


@media(max-width:767px) {
  .btn-sys {
    font-size: 12px;
    padding: 0px 5px 10px 5px;
  }

  .btn-event-all {
    background-color: transparent;
    color: #fff;
    min-width: auto;
    border: none;
  }

    .btn-event-all:hover {
      color: #E2A947;
      background-color: transparent;
    }

    .btn-event-all i {
      color: #fff;
    }
}

.h2-event {
  font-size: 32px;
  color: #fff;
}

@media(max-width:767px) {
  .h2-event {
    font-size: 16px;
    color: #fff;
    margin-bottom: 0px;
  }
}

/* --------filter slider--------- */
.container-filter-event {
  background-color: #e5e3f3;
  padding: 16px 15px;
  border-radius: 24px;
  display: inline-block;
  margin: 0 auto;
}

@media (max-width:991px) {
  .container-filter-event {
    margin-bottom: 20px;
  }
}

.tab-event {
  background-color: transparent;
  border: none;
  border-radius: 35px;
  color: #2B254B;
  transition: .5s;
  font-weight: bold;
  font-size: 16px;
  padding: 11px 10px;
  cursor: pointer;
  display: inline-block;
}

@media (max-width:767px) {
  .tab-event {
    font-size: 12px;
  }

  .events-inner-sec {
    background-size: cover;
  }
}

.tab-event img {
  position: relative;
  top: -2px;
}

.tab-event:hover {
  color: #2B254B;
}

.tab-event.tab-active {
  background-color: #E2A947;
  color: #fff;
  cursor: pointer;
}

  .tab-event.tab-active img {
    filter: invert(90%) sepia(17%) saturate(130%) hue-rotate(207deg) brightness(200%) contrast(93%);
  }
/* --------filter slider--------- */
.ul-date {
  padding: 0px;
  margin: 0px;
}

@media(max-width:991px) {
  .ul-date {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
}

.date-div {
  position: relative;
  display: inline-block;
  font-size: 12px;
  color: #fff;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: .5s;
  width: 80px;
  height: 80px;
  padding: 10px;
  cursor: pointer;
}

.active-date .date-div {
  background-color: #E2A947;
  color: #fff;
}

.date-div p {
  margin-bottom: 0px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.date-div h3 {
  font-size: 20px;
  text-align: right;
}

  .date-div h3:lang(ar) {
    text-align: left;
  }

.date-div p:lang(ar) {
  right: 10px;
  left: 0px;
}

.ul-date li {
  list-style: none;
  display: inline-block;
  padding: 5px;
}


/* -------slider item----- */
.events-slider-container {
  position: relative;
  z-index: 3;
  margin-top: -64px;
}

.item-event {
  background-color: #fff;
  padding: 10px;
  border-radius: 20px;
  display: block;
  border: 1px solid #D1D5DB;
}

.pic-event-item {
  width: 112px;
  height: 112px;
  border-radius: 20px;
  object-fit: cover;
}

.content-event-item {
  padding-left: 10px;
}

  .content-event-item:lang(ar) {
    padding-left: 0px;
    padding-right: 10px;
  }

  .content-event-item p {
    font-size: 16px;
    overflow: hidden;
    height: 80px;
    color: #575756;
  }

  .content-event-item h6 {
    font-size: 12px;
    color: #575756;
    position: relative;
    padding: 0px 30px;
  }

    .content-event-item h6 img {
      color: #E2A947;
      position: absolute;
      left: 0px;
      top: -7px;
    }

  .content-event-item:lang(ar) h6 img {
    right: 0px;
    left: auto;
  }
/* -----------------number of mowhiba------------- */
.number-sec {
  position: relative;
  background-image: url(../images/mowhibaNumber/backnumber.jpg);
  background-repeat: no-repeat; /* background-position: right top; */
  padding: 40px 0px;
  background-size: cover;
  color: #fff;
  background-attachment: fixed;
  overflow: hidden;
}

  .number-sec::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    backdrop-filter: blur(5px);
    background-color: rgba(43, 37, 75, 0.7);
  }

  .number-sec .container {
    position: relative;
    z-index: 3;
  }

  .number-sec h2 {
    color: #fff;
    margin-bottom: 20px;
  }

.item-number {
  background-color: #fff;
  padding: 10px;
  width: 183px;
  margin: 0 auto;
  max-width: 100%;
  border-radius: 16px;
  transition: .5s;
  text-align: center;
  margin-bottom: 20px;
}

.img-number {
  width: 100%;
  height: 85px;
  background-repeat: no-repeat;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 10px;
}

.item-number h6 {
  font-size: 20px;
  color: #6B7280;
  margin-bottom: 10px;
}

.item-number h4 {
  font-size: 30px;
  color: #2B254B;
  font-weight: bold;
}

@media(max-width:991px) {
  .mobile-moving {
    position: relative;
    min-height: 192px;
    overflow: hidden;
    width: 100%;
    padding: 40px 0px;
  }
}

@keyframes moving-number {
  0% {
    transform: translateY(-300px);
  }

  50% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-300px);
  }
}

.div-moving-number {
  position: absolute;
  animation: moving-number 10s infinite;
  top: -20px;
}


  .div-moving-number ul li:nth-of-type(2) .item-number, .div-moving-number ul li:nth-of-type(5) .item-number {
    margin-top: 60px;
  }


@media (max-width:991px) {
  .number-sec .btn-event-all {
    margin-bottom: 20px;
  }

  .mobile-moving {
    min-height: 240px;
  }

  .div-moving-number {
    top: 0px;
  }
}

@media (max-width:576px) {
  .div-moving-number ul li:nth-of-type(2) .item-number, .div-moving-number ul li:nth-of-type(5) .item-number {
    margin-top: 0px;
  }

  .mobile-moving {
    min-height: 300px;
  }

  .number-sec {
    padding: 60px 0px;
  }

  .item-number h6 {
    font-size: 14px;
  }

  .item-number h4 {
    font-size: 20px;
  }
}

/* -----------------news------------- */

.news-sec {
  padding: 40px 0px;
  background-image: url(../images/news/clip-logo-01.svg);
  background-position: left top;
  background-repeat: no-repeat;
}

  .news-sec hr {
    border-top: 1px solid #D1D5DB;
    opacity: 1;
  }


.news-inner-sec .container {
  position: relative;
  z-index: 1;
}

.h2-news {
  font-size: 32px;
  color: #2B254B;
}

@media(max-width:797px) {

  .btn-news-all {
    color: #2B254B;
    background-color: transparent;
  }

  .h2-news {
    margin-bottom: 0px;
    font-size: 16px;
  }
}
/* -------slider item----- */

.item-news {
  background-color: #fff;
  padding: 20px;
  border-radius: 15px;
  display: block;
  border: 1px solid #D1D5DB;
  box-shadow: #eee;
}

.pic-news-item {
  width: 100%;
  height: 150px;
  border-radius: 9px;
  margin-bottom: 10px;
  object-fit: cover;
}

.content-news-item p {
  font-size: 16px;
  overflow: hidden;
  height: 72px;
  color: #6B7280;
}

.content-news-item h6 {
  font-size: 12px;
  color: #575756;
  position: relative;
  padding: 0px 30px;
}

  .content-news-item h6 img {
    position: absolute;
    left: 0px;
    top: -7px;
  }

.content-news-item:lang(ar) h6 img {
  left: auto;
  right: 0px;
}

/* -----------------footer------------- */
footer {
  background: url(../images/footer.jpg);
  position: relative;
  padding: 50px 0px;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  /* backdrop-filter: blur(5px); */
}

  footer li {
    list-style: none;
  }

  footer::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    backdrop-filter: blur(1px);
    background-color: rgba(43, 37, 75, 0.8);
  }

  footer > .container {
    z-index: 1;
  }

.container-contact {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 50px;
}

  .container-contact h2 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 20px;
  }

@media (max-width:767px) {
  .container-contact h2 {
    font-size: 18px;
  }
}

@media (min-width:992px) {
  .contact-div {
    padding: 20px 10px;
    background: #00000029;
    border-radius: 15px;
  }

  .item-contact {
    border-right: 1px solid #fff;
  }

    .item-contact:lang(ar) {
      border-right: none;
      border-left: 1px solid #fff;
    }
}

@media (max-width:991px) {
  .item-contact {
    background: #00000029;
    border-radius: 15px;
    margin-bottom: 20px;
    padding: 15px;
  }
}

.contact-div ul li:last-child .item-contact {
  border: none !important;
}

.item-contact:hover img {
  transition: .5s;
  transform: scale(1.1);
}

.item-contact img {
  width: 45px;
}

.item-contact p,
.item-contact h4 {
  font-size: 16px;
  color: #fff;
  padding: 0px 5px;
}

.btn-contact-us {
  position: relative;
  padding: 6px 32px 11px 32px;
  min-width: 130px;
  display: inline-block;
  line-height: -5px;
  font-size: 12px;
  /* font-weight: bold; */
  color: #fff;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: .5s;
}

  .btn-contact-us:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .btn-contact-us i {
    position: relative;
    top: 5px;
    color: #fff;
    font-size: 20px;
    transition: .5s;
    transform: scaleX(-1) rotate(30deg);
    transform-origin: bottom;
    padding-left: 5px;
  }

  .btn-contact-us:lang(ar) i {
    padding-right: 5px;
    padding-left: 0px;
    transform: scaleX(1) rotate(30deg);
  }


/* ---links---- */
.links-div {
  padding: 50px 0px 10px 0px;
}

.title-links {
  position: relative;
  color: #fff;
  font-size: 14px;
  padding: 15px 0px;
  margin-bottom: 0px;
}

  .title-links::after {
    content: "";
    width: 44px;
    height: 3px;
    background-color: #E2A947;
    position: absolute;
    bottom: 5px;
    left: 0px;
  }

  .title-links:lang(ar):after {
    right: 0px;
    left: auto;
  }

.links-ul li a {
  color: #fff;
  font-size: 12px;
  padding: 5px 0px;
}

.app-div {
  display: block;
  background-color: #fff;
  border-radius: 4px;
  padding: 5px;
}

  .app-div img {
    height: 24px;
  }

.social-media {
  margin: 0px;
  padding: 0px;
  display: block;
  text-align: center;
}

  .social-media li {
    display: inline-block;
  }

    .social-media li a {
      margin: 20px 5px 5px 5px;
      transition: .5s;
      font-size: 15px;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      text-align: center;
      display: flex;
      background-color: rgba(255, 255, 255, .2);
      align-items: center;
      justify-content: center;
      color: #fff;
    }

      .social-media li a:hover {
        color: #ffffff !important;
        background-color: #e3aa47;
      }

.btn-links-open {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 5px 35px;
  color: #fff;
  display: block;
  border-radius: 20px;
  width: 100%;
  text-align: right;
  margin-bottom: 20px;
  position: relative;
}

  .btn-links-open i {
    position: absolute;
    left: 5px;
    top: 4px;
    background-color: rgba(255,255,255,.5);
    padding: 5px;
    border-radius: 50%;
  }

  .btn-links-open:lang(ar) i {
    right: 5px;
    left: auto;
  }

.small-footer {
  font-size: 14px;
  color: #7F7F7F;
  background: #fff;
}

@media (max-width:768px) {
  .small-footer {
    text-align: center;
  }
}

@media (max-width:767px) {
  .container-links {
    display: none;
  }
}

.right-footer {
  width: 100%;
  display: block;
  padding: 0px;
}

  .right-footer li {
    display: inline-block;
    color: #fff;
  }

    .right-footer li a {
      color: #2B254B;
      text-decoration: none !important;
      padding: 2px 5px;
      display: block;
    }

      .right-footer li a::after {
        content: "";
        width: 1px;
        height: 11px;
        position: absolute;
        right: 0px;
        background-color: #2B254B;
        top: 6px;
      }

    .right-footer li:lang(ar) a::after {
      right: auto;
      left: 0px;
    }

    .right-footer li:last-child a::after {
      display: none;
    }





/* ------------services------------ */

.head-page {
  padding: 10px 0px 30px 0;
}

.title-inner {
  font-size: 25px;
  color: #575756;
}

.ul-breadcrumb li {
  font-size: 14px;
}

.ul-breadcrumb a {
  color: #2B254B;
}

.share-media {
  margin: 0px;
  padding: 0px;
  display: block;
  text-align: center;
}

  .share-media li {
    display: inline-block;
  }

    .share-media li a {
      margin: 5px;
      transition: .5s;
      font-size: 15px;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      text-align: center;
      display: flex;
      background-color: #F4F4F6;
      align-items: center;
      justify-content: center;
      color: #2B254B;
    }

      .share-media li a:hover {
        color: #ffffff !important;
        background-color: #e3aa47;
      }

.content-page {
  padding: 40px 0px;
}

.content-item-div {
  background-color: #f4f4f6;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 20px;
}

  .content-item-div h6 {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .content-item-div p {
    color: #737576;
    font-size: 14px;
  }

/* ---------avatr----------- */

.avatar-xs {
  height: 2rem;
  width: 2rem;
}

.avatar-sm {
  height: 3rem;
  width: 3rem;
}

.avatar-md {
  height: 4.5rem;
  width: 4.5rem;
}

.avatar-lg {
  height: 6rem;
  width: 6rem;
}

.avatar-xl {
  height: 7.5rem;
  width: 7.5rem;
}

.avatar-title {
  align-items: center;
  background-color: #2B254B;
  color: #dbdbdb;
  display: flex;
  font-weight: 400;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.avatar-group {
  padding-left: 12px;
  display: flex;
  flex-wrap: wrap;
}

.avatar-group-item {
  margin-left: -12px;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: all 0.2s;
}

  .avatar-group-item :hover {
    position: relative;
    transform: translateY(-2px);
  }

.last-avatar-item {
  font-size: 12px;
  border: none;
  padding: 10px 15px;
  color: #2a3042;
}

.p-with-link a {
  color: #2B254B;
}

/* ------ */
.service-list {
  padding: 0px 30px !important;
  position: relative;
}

  .service-list::after {
    content: "";
    position: absolute;
    left: 1px;
    width: 1px;
    background-color: #d3d3d3;
    height: 83%;
    top: 18px;
    padding: 54px 0px;
    z-index: -1;
  }

  .service-list:lang(ar):after {
    left: auto;
    right: 2px;
  }

  .service-list li {
    color: #6B7280;
    list-style: decimal !important;
    padding: 10px 5px;
    font-size: 12px;
    position: relative;
  }

    .service-list li::after {
      content: "";
      background-color: #2B254B;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      position: absolute;
      left: -31px;
      top: 17px;
      /* border:1px solid #E2A947; */
    }

    .service-list li:lang(ar):after {
      left: auto;
      right: -31px;
    }

    .service-list li::before {
      content: "";
      border: 1px solid #2B254B;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      position: absolute;
      left: -35px;
      top: 13px;
    }

    .service-list li:lang(ar):before {
      left: auto;
      right: -35px;
    }

/* ------------ */
.service-steps {
  padding: 0px 30px !important;
  position: relative;
}

  .service-steps::after {
    content: "";
    position: absolute;
    left: 1px;
    width: 1px;
    background-color: #d3d3d3;
    height: 83%;
    top: 18px;
    padding: 54px 0px;
    z-index: -1;
  }

  .service-steps:lang(ar):after {
    left: auto;
    right: 2px;
  }

  .service-steps li {
    color: #6B7280;
    list-style: decimal !important;
    padding: 10px 5px;
    font-size: 12px;
    position: relative;
  }

    .service-steps li::after {
      content: "";
      background-color: #E2A947;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      position: absolute;
      left: -31px;
      top: 17px;
      border: 1px solid #E2A947;
    }

    .service-steps li:lang(ar):after {
      left: auto;
      right: -31px;
    }

    .service-steps li::before {
      content: "";
      border: 1px solid #E2A947;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      position: absolute;
      left: -35px;
      top: 13px;
    }

    .service-steps li:lang(ar):before {
      left: auto;
      right: -35px;
    }
/* ......accordion......... */
.accordion-item {
  margin-bottom: 20px;
}

.accordion-inner-plus {
  font-size: 12px;
  font-weight: bold;
  border-radius: 35px !important;
  border: none;
  box-shadow: none !important;
  color: #2B254B;
  background-color: #ffffff;
  padding: 10px;
  padding-left: 40px;
}

  .accordion-inner-plus:lang(ar) {
    padding-left: 0px;
    padding-right: 40px;
  }

  .accordion-inner-plus:not(.collapsed) {
    background-color: #2B254B;
    color: #fff;
  }

    .accordion-inner-plus:not(.collapsed)::after, .accordion-setting-plus::after, .accordion-button::after {
      display: none;
    }

.acc-inner-plus {
  border-radius: 50%;
  width: 30px;
  height: 29px;
  background-color: #E5E3F3;
  position: absolute;
  left: 3px;
  color: #2B254B;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .acc-inner-plus:lang(ar) {
    left: auto;
    right: 3px;
  }

.accordion-body p {
  font-size: 12px;
}

.accordion-collapse {
  border: none;
}

.accordion-header .fa-plus {
  display: none;
}

.accordion-header .fa-minus {
  display: block;
}

.accordion-header .collapsed .fa-plus {
  display: block;
}

.accordion-header .collapsed .fa-minus {
  display: none;
}
/* ------------button----------- */
.btn-inner-all {
  position: relative;
  padding: 14px 32px 14px 32px;
  display: block;
  font-size: 12px;
  font-weight: bold;
  transition: .5s;
  text-align: center;
  border-radius: 16px;
}


  .btn-inner-all i {
    position: absolute;
    font-size: 24px;
    padding-right: 5px;
    transition: .5s;
    transform: scaleX(-1) rotate(30deg);
    transform-origin: bottom;
  }

  .btn-inner-all:lang(ar) i {
    transform: scaleX(1) rotate(30deg);
  }

.btn-back-sys {
  background-color: #2B254B;
  color: #fff;
  border: 1px solid #2B254B;
}

  .btn-back-sys:hover {
    color: #fff;
  }

.btn-outline-sys {
  color: #2B254B;
  border: 1px solid #2B254B;
}

  .btn-outline-sys:hover {
    color: #2B254B;
  }

.content-page-div hr {
  margin: 40px 0px;
}

.p-icon-service {
  padding-left: 30px;
  position: relative;
  margin-bottom: 0px;
}

  .p-icon-service:lang(ar) {
    padding-right: 30px;
    padding-left: 0px;
  }

.icon-ser-inner {
  position: absolute;
  left: 0px;
}

  .icon-ser-inner:lang(ar) {
    left: auto;
    right: 0px;
  }

.ul-ser-icon li {
  list-style: none;
  margin-bottom: 20px;
}

  .ul-ser-icon li p {
    font-size: 12px;
  }

.badge-item {
  background-color: #ECFDF3;
  color: #027A48;
  padding: 5px;
  font-size: 10px;
  border-radius: 10px;
  min-width: 50px;
  text-align: center;
}

.voting-label {
  border: 1px solid #2B254B;
  color: #2B254B;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
  font-size: 14px;
}

.container-voting input:checked ~ label {
  background-color: #2B254B;
  color: #fff;
}


/* ------------button----------- */
.btn-sm-all {
  position: relative;
  padding: 6px 30px 6px 15px;
  min-width: 200px;
  text-align: left;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #2B254B;
  border-radius: 9px;
  border: 1px solid #2B254B;
  transition: .5s;
  background-color: #fff;
  text-decoration: none;
}


  .btn-sm-all i:lang(en) {
    transform: scaleX(-1) rotate(180deg);
  }

  .btn-sm-all:lang(ar) {
    padding: 8px 15px 8px 30px;
    text-align: right;
  }

  .btn-sm-all:hover {
    border: 1px solid #E2A947;
    color: #E2A947;
  }


  .btn-sm-all i {
    position: absolute;
    right: 7px;
    top: 6px;
    color: #2B254B;
    font-size: 20px;
    transition: .5s;
    transform: scaleX(-1) rotate(30deg);
  }

  .btn-sm-all:lang(ar) i {
    left: 7px;
    right: auto;
    transform: none;
  }
  /* arrow rotate*/
  .btn-sm-all:hover i {
    transform: rotate(30deg);
    transform-origin: bottom;
    color: #E2A947;
  }

@media(max-width:767px) {
  .btn-sm-all {
    /* border:none; */
    color: #2B254B;
    min-width: auto;
    background-color: transparent;
  }

    .btn-sm-all:hover {
      color: #E2A947;
      border: none;
    }

    .btn-sm-all i {
      color: #2B254B;
    }
}

/* -------------services------------- */
.sec-services {
  background-image: url(../images/news/clip-logo-01.svg);
  background-position: left top;
  background-repeat: no-repeat;
}

.service-div-item {
  position: relative;
  padding: 30px 20px 20px 20px;
  border: 1px solid #D1D5DB;
  border-radius: 20px;
  margin-bottom: 20px;
}

.badge-status {
  position: absolute;
  background-color: #E2A947;
  padding: 5px;
  border-radius: 0px 0px 5px 5px;
  color: #fff;
  font-size: 12px;
  top: 0px;
}

.content-page-service {
  padding-bottom: 40px;
}

.service-div-item h3 {
  height: 20px;
  overflow: hidden;
  color: #6B7280;
  font-size: 16px;
  margin: 10px 0;
}

.service-div-item > img {
  width: 100%;
  object-fit: cover;
  height: 100px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: #fff;
}

.service-div-item p {
  color: #737576;
  font-size: 12px;
  text-align: justify;
}

ul li.li-item {
  list-style: none;
  /* line-height: 35px; */
  animation: fadeIn 1s 1 0s;
  -webkit-animation: fadeIn 1s 1 0s;
  -moz-animation: fadeIn 1s 1 0s;
  -ms-animation: fadeIn 1s 1 0s;
  -o-animation: fadeIn 1s 1 0s;
}

.content-page-div .tab-event {
  font-weight: lighter;
}
/* ----------------skill-page------------- */

.btn-skill-view {
  margin: 5px;
  transition: .5s;
  font-size: 16px;
  text-align: center;
  display: flex;
  background-color: #F4F4F6;
  align-items: center;
  justify-content: center;
  color: #2B254B;
  border: none;
  border-radius: 5px;
  padding: 0px 7px;
}

  .btn-skill-view i {
    display: inline-block;
  }

.h2-skills-page {
  color: #2B254B;
  display: block;
  margin-bottom: 20px;
  font-size: 20px;
}

.container-ask-pic {
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 20px;
  border-radius: 20px;
  position: relative;
  margin-bottom: 20px;
}

  .container-ask-pic img {
    max-width: 100%;
    border-radius: 20px;
  }

.view-ask-btn {
  background-color: #2B254B;
  color: #fff;
  padding: 10px 10px;
  border-radius: 10px;
  border: none;
  min-width: 180px;
  transition: 1s;
}

  .view-ask-btn:hover {
    background-color: #E2A947;
  }



/* ---------skill-popup--------- */


.ask-page-pic-pop {
  height: 350px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px 0px 0px 10px;
}

  .ask-page-pic-pop:lang(ar) {
    border-radius: 0px 10px 10px 0px;
  }

.ask-pop .modal-content {
  border: none;
  background-color: #E5E3F3;
  border-radius: 10px;
}

.padding-ask-pop {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

  .padding-ask-pop h3 {
    font-size: 20px;
    color: #2B254B;
    display: block;
    text-align: center;
    margin-bottom: 10px;
  }

  .padding-ask-pop p {
    background-color: #fff;
    border-radius: 16px;
    padding: 8px;
    font-size: 16px;
    display: block;
    text-align: center;
    border: 1px solid #2B254B
  }

.form-control:focus {
  border-color: #DBDBDB !important;
  box-shadow: none;
}


.btn-outline-secondary {
  border-color: #ced4da !important;
}

.modal-body * {
  font-size: 14px;
}

.modal-body .input-group {
  width: 248px
}

  .modal-body .input-group .btn.btn-outline-secondary {
    border-radius: 10px;
    border-right: 0 !important;
  }

.modal-body .form-control {
  border-radius: 10px;
  padding: 12px;
}

.modal-footer {
  justify-content: space-between !important;
}

.modal-body .popup-input-width {
  width: 248px;
}

.popup-title-green {
  color: var(--main-color)
}

.code-nafaz {
  font-size: 21px;
  color: #fff;
  background: #11998E;
  border-radius: 100%;
  padding: 10px;
  width: 66px;
  height: 66px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.numberSelectionCont {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  display: inline-block;
  margin-bottom: 10px;
  color: #6B6681
}
/* 
 .search{
 position: relative;
 box-shadow: 0 0 40px rgba(51, 51, 51, .1);
 }
 .search input{
  height: 60px;
  text-indent: 25px;
  border: 2px solid #d6d4d4;
 }
 .search input:focus{
  box-shadow: none;
  border: 2px solid blue;
 }
 .search .fa-search{
  position: absolute;
  top: 20px;
  left: 16px;
 }
 .search button{
  position: absolute;
  top: 5px;
  right: 5px;
  height: 50px;
  width: 110px;
  background: blue;
 } */

.btn-close {
  background: url('../images/pop-close.svg') no-repeat center center !important
}

  .btn-close:focus {
    box-shadow: none;
  }

.btn-close-pop {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  border: none;
  right: 0px;
  top: 0px;
  position: absolute;
  background-color: #2B254B;
  transition: .5s;
  cursor: pointer;
  border-radius: 0px 10px 0px 10px;
}

  .btn-close-pop:lang(ar) {
    border-radius: 10px 0px 10px 0px;
  }

  .btn-close-pop:lang(ar) {
    left: 0px;
    right: auto;
  }

  .btn-close-pop:hover {
    background-color: #E2A947;
    color: #fff;
  }

.note-pop-skills {
  font-size: 12px;
  color: #2B254B;
}
/* -----related--------- */
.h3-relative-title {
  color: #2B254B;
  font-size: 20px;
  margin-bottom: 20px;
}

.related-item {
  display: block;
  position: relative;
  margin-bottom: 22px;
  border-radius: 15px;
  background-color: #e5e3f3;
  text-align: center;
  font-size: 14px;
  overflow: hidden;
  padding: 5px;
  border-radius: 15px;
}

.overflow-image-skill {
  overflow: hidden;
  border-radius: 15px;
}

.img-pro {
  width: 100%;
  height: 119px;
  object-fit: cover;
  transform: scale(1);
  transition: 1s;
}

.related-item:hover .img-pro {
  transform: scale(1.1);
}

.caption-related {
  color: #2b254b;
  width: 100%;
  padding: 10px;
  font-size: 12px;
  height: 38px;
  overflow: hidden;
}

.badge-sucess-student {
  position: absolute;
  background-color: #E2A947;
  padding: 10px 5px;
  color: #fff;
  top: 0px;
  left: 15px;
  border-radius: 0px 0px 10px 10px;
  font-size: 10px;
}

  .badge-sucess-student:lang(ar) {
    right: 15px;
    left: auto;
  }


.related-item-view {
  position: absolute;
  left: 22px;
  color: #fff;
  top: 5px;
  background-size: 100% 100%;
  z-index: 3;
  background-color: #E2A947;
  font-size: 11px;
  border-radius: 0px 0px 5px 5px;
  padding: 3px;
}

.btn-relative-all {
  position: relative;
  padding: 10px 23px 10px 23px;
  display: block;
  font-size: 12px;
  font-weight: bold;
  transition: .5s;
  text-align: center;
  border-radius: 16px;
  margin-bottom: 20px;
  border: 1px solid #2B254B;
  color: #2B254B !important;
  transition: 1s;
}

  .btn-relative-all:hover {
    background-color: #E5E3F3;
  }

/* -----------storiesDetails--------- */
.student-name {
  background-color: #2B254B;
  color: #fff;
  border-radius: 15px;
  padding: 8px;
  font-size: 14px;
  margin-top: 20px;
  display: inline-block;
}

.title-success-stories {
  color: #2B254B;
  font-size: 20px;
  margin-bottom: 20px;
}

.desc-success-stories {
  font-size: 14px;
}

.relative-div {
  padding: 20px 0px 0px 0px;
  border-bottom: 1px solid #d3d3d3;
}

.item-sucess-student {
  background: #2b254b;
  position: relative;
  border-radius: 22px;
  margin: 5px;
  margin-bottom: 20px;
  display: block;
}

.pic-sucess-student {
  border-radius: 20px;
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.student-slider {
  position: absolute;
  width: 79%;
  bottom: 80px;
  min-height: 38px;
  left: 0px;
  padding: 10px;
  color: #fff;
  border-radius: 0px 10px 10px 0px;
  background-color: rgba(43, 37, 75, .9);
  text-align: center;
  font-size: 12px;
}

  .student-slider:lang(ar) {
    right: 0px;
    left: auto;
    border-radius: 10px 0px 0px 10px;
  }

.description-student-slider {
  font-size: 14px;
  padding: 10px;
  height: 62px;
  color: #fff;
  overflow: hidden;
  text-align: center;
}
/* ------------------contact------------------- */

.icons-contact {
  position: relative;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 30px 20px;
  background-color: #fff;
  box-shadow: 0px 0px 10px #eee;
}

  .icons-contact i {
    background-color: #E5E3F3;
    color: #2B254B;
    padding: 20px;
    border-radius: 5px;
    font-size: 20px;
    transition: .5s;
  }

  .icons-contact:hover i {
    background-color: #ffe8bf;
    color: #E2A947;
    transform: scale(1.1);
  }

  .icons-contact h3 {
    color: #2b254b;
    margin: 15px 0px;
    text-transform: uppercase;
    font-size: 18px;
  }

  .icons-contact p {
    color: #737576;
    font-size: 14px;
    margin-bottom: 0px;
    min-height: 59px;
  }

.contact-innput {
  border: 1px solid #D9D8DF;
  width: 100%;
  padding: 8px;
  font-size: 14px;
  outline: none !important;
  /* margin-bottom:20px; */
  border-radius: 11px;
  text-align: right;
  line-height: 1.8;
}

  .contact-innput:lang(en) {
    text-align: left;
  }


textarea.contact-innput {
  min-height: 100px;
}

.green-btn {
  width: 100%;
  padding: 10px;
  background-color: #fff;
  transition: 1s;
  border-radius: 16px;
  outline: none !important;
  margin-top: 20px;
  color: #11998E;
  border: 1px solid #11998E;
  font-size: 14px !important;
}

  .green-btn:hover {
    background-color: #11998E;
    color: #fff;
  }

.contact-btn {
  width: 100%;
  padding: 10px;
  background-color: #E5E7EB;
  transition: 1s;
  border-radius: 16px;
  outline: none !important;
  margin-top: 20px;
  color: #2b254b;
  border: 1px solid #D1D5DB;
  font-size: 14px !important;
}

  .contact-btn:hover {
    background-color: #2B254B;
    color: #fff;
  }

  .contact-btn i {
    font-size: 18px;
    position: relative;
    top: 5px;
  }

.h3-contact-page {
  margin-bottom: 20px;
  color: #2B254B;
  font-size: 25px;
}

.back-btn {
  border: 0;
  width: 100%;
  padding: 10px;
  background-color: #fff;
  transition: 1s;
  border-radius: 16px;
  outline: none !important;
  color: #2b254b;
  font-size: 14px !important;
}

  .back-btn:hover {
    background-color: #2B254B;
    color: #fff;
  }

  .back-btn i {
    font-size: 18px;
    position: relative;
    top: 5px;
  }

.h3-contact-page {
  margin-bottom: 20px;
  color: #2B254B;
  font-size: 25px;
}

.separator-line-style {
  background: #ddd;
  height: 1px;
}

.message-div-form {
  /* padding: 40px 0px; */
}

  .message-div-form label {
    margin-bottom: 5px;
    position: relative;
    font-size: 14px;
    color: #6B7280;
  }

.label-required::after {
  content: "*";
  color: #ea454a;
  position: absolute;
}

/* -------------artical-------------- */
.article-pic {
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* ---------------page----------------- */

.SitePageTitle-Edit {
  font-size: 25px;
  color: #575756;
  margin-bottom: 20px;
}

.dfwp-list {
  padding: 0px;
  margin: 0px;
  margin-top: 20px !important;
}

  .dfwp-list li {
    display: inline-block;
  }

    .dfwp-list li a {
      position: relative;
      padding: 8px 10px 11px 10px;
      text-align: center;
      display: inline-block;
      font-size: 14px;
      color: #fff;
      border-radius: 16px;
      transition: .5s;
      background-color: #fff;
      border: 1px solid #2B254B;
      color: #2B254B !important;
      transition: 1s;
      margin-bottom: 10px;
    }

      .dfwp-list li a:hover {
        background-color: #E5E3F3;
      }

      .dfwp-list li a.active-page {
        background-color: #E2A947 !important;
        color: #fff !important;
        border: 1px solid #b6842e;
      }

.sec-page {
  padding: 34px 0px;
  /*background-image: url(https://registration.mawhiba.sa/MawhibaNewUX/images/Pattern-left.svg), url(https://registration.mawhiba.sa/MawhibaNewUX/images/Pattern-right.svg);*/
  background-position: left top, right -100px;
  background-repeat: no-repeat;
  /* background-color: #fafafa; */
  min-height: 812px;
}

  .sec-page iframe {
    position: relative;
    z-index: 0;
    display: list-item;
    margin-bottom: 20px;
    border-radius: 16px;
  }

    .sec-page iframe::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
    }

  /*.sec-page p{
  background-color: #f4f4f6;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 20px;
  font-size: 14px;
}*/


  /* --------------------- */

  .sec-page h1 {
    font-size: 25px;
    color: #575756;
    margin-bottom: 20px;
  }


  .sec-page .btn-sort-filter {
    position: relative;
    padding: 8px 32px 11px 32px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    color: #fff;
    border-radius: 16px;
    transition: .5s;
    background-color: #fff;
    border: 1px solid #2B254B;
    color: #2B254B !important;
    transition: 1s;
    margin-bottom: 20px;
  }

    .sec-page .btn-sort-filter:hover {
      background-color: #E5E3F3;
    }

    .sec-page .btn-sort-filter.active-page {
      background-color: #E2A947 !important;
      color: #fff !important;
      border: 1px solid #b6842e;
    }

  .sec-page .linkDetails, .sec-page .allview-container {
    border-radius: 20px;
    padding: 35px 20px 20px 20px;
    border: 1px solid #D1D5DB;
    margin-bottom: 20px;
    background-color: #fff;
    color: #2B254B;
    position: relative;
  }

    .sec-page .linkDetails:hover, .sec-page .allview-container:hover {
      color: #2B254B;
    }

    .sec-page .linkDetails img, .sec-page .allview-container img {
      width: 100%;
      object-fit: cover;
      height: 130px;
      margin-bottom: 10px;
      border-radius: 10px;
    }

    .sec-page .linkDetails > span, .sec-page .allview-container > span {
      font-size: 20px;
    }

    .sec-page .linkDetails p, .sec-page .allview-container p {
      font-size: 14px;
      color: #6B7280;
      margin-bottom: 10px;
    }



  .sec-page .detailfrom span, .sec-page .detailfrom p {
    display: inline-block;
    font-size: 12px;
  }

  .sec-page .detailfrom span {
    color: #E2A947 !important;
  }

.allview-container a {
  color: #2B254B !important;
  display: block;
  margin-bottom: 10px;
}
/* ---------------- */
.sec-page .pagination li {
  display: inline-block;
  list-style: none;
  /* float: left; */
  /* width: 32px; */
  /* height: 32px; */
  padding: 0px 10px;
  font-size: 13px;
  line-height: 31px;
  text-align: center;
  border: 1px solid #D1D5DB;
  margin-left: -1px;
  cursor: pointer;
  margin: 0 3px;
  border-radius: 9px;
  color: #2B254B;
}

  .sec-page .pagination li.active {
    background-color: #2B254B;
    color: #fff;
  }

  .sec-page .pagination li a {
    color: #2B254B;
  }

  .sec-page .pagination li:hover {
    background-color: #E5E3F3;
  }

  .sec-page .pagination li.active a {
    color: #fff;
  }

/* ------------programe------------- */

.card-deck {
  display: flex;
  flex-wrap: wrap;
}

.achievementCards .card .card-body {
  padding: 0px !important;
}

  .achievementCards .card .card-body img {
    height: 70px;
    margin-bottom: 10px;
  }

  .achievementCards .card .card-body h5 {
    height: 40px;
    overflow: hidden;
    font-size: 16px;
    color: #2b254b;
    text-align: inherit;
  }

  .achievementCards .card .card-body p {
    height: 40px;
    overflow: hidden;
    font-size: 14px;
    color: #6B7280;
    text-align: inherit;
  }

.accordionSubCatContent tr td {
  padding: 5px 0px;
  font-size: 14px;
}

.accordionSubCatContent h5 {
  font-size: inherit;
}

.accordionButton {
  background-color: #fff;
  border-radius: 10px;
  padding: 16px 35px;
  border: 1px solid #d3d3d3;
  position: relative;
  color: #2b254b;
}

  .accordionButton:not(.on)::after {
    content: "\2b";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    left: 5px;
    background-color: #2B254B;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    top: 15px;
    font-size: 12px;
  }

  .accordionButton::after {
    content: "\f068";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    left: 5px;
    background-color: #2B254B;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    top: 15px;
    font-size: 12px;
    font-weight: 600;
    ;
  }

  .accordionButton:lang(ar)::after {
    left: auto;
    right: 5px;
  }

.accordionSubCatContent tr td .dfltTxt {
  font-size: 12px;
  margin-bottom: 10px;
}

/* --------------------18page---------------- */

.list-group11 > .linkDetails {
  padding: 0px !important;
  border: none !important;
}

  .list-group11 > .linkDetails .allview > span {
    margin-bottom: 10px;
    display: block;
    color: #2b254b;
  }

  .list-group11 > .linkDetails .allview > .row > .detailfrom > span {
    padding-left: 15px;
  }

.list-group11:lang(ar) > .linkDetails .allview > .row > .detailfrom > span {
  padding-right: 15px;
  padding-left: 0px;
}

.col-xs-3 {
  flex: 0 0 auto;
  width: 25%;
}

@media(max-width:500px) {
  .col-xs-3 {
    width: 100%;
  }
}

.font-force p {
  font-size: 14px;
}

.butsbmit-2 > a > button {
  position: relative;
  padding: 8px 32px 11px 32px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  color: #fff;
  border-radius: 16px;
  transition: .5s;
  background-color: #fff;
  border: 1px solid #2B254B !important;
  color: #2B254B !important;
  transition: 1s;
  margin-bottom: 20px;
}

  .butsbmit-2 > a > button:hover {
    background-color: #E5E3F3;
  }

.cbq-layout-main > #det > .row > .col-xs-3 > span, .cbq-layout-main > #det > .row > .col-xs-3 > a > span {
  color: #E2A947;
}

.font-force > .row > .col-xs-4 > span {
  color: #E2A947;
  display: inline-block;
}

.font-force > .row > .col-xs-4 > p {
  display: inline-block;
}

.cbq-layout-main > #det > .row > .col-xs-3 > a {
  color: #2B254B;
}

.allview-container > .row > .col-md-2 .linkDetails, .allview-container > .row > .col-md-10 .linkDetails {
  padding: 0px !important;
  border: 0px !important;
  margin-bottom: 5px !important;
}

#myInput {
  border-radius: 10px;
  border: 1px solid #D1D5DB;
  padding: 5px;
  outline: none !important;
}


/* ---------infograph------------ */
.list-group11 > .go-story-box > .marg {
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
  min-height: auto !important;
}

  .list-group11 > .go-story-box > .marg > .margImageDiv {
    background-position: top center;
    height: 330px;
    border-radius: 10px;
    box-shadow: 3px 3px 8px #d7d7d7;
    transition: 1s;
  }

    .list-group11 > .go-story-box > .marg > .margImageDiv:hover {
      background-position: bottom center !important;
    }

  .list-group11 > .go-story-box > .marg > .margTitle {
    position: absolute;
    width: 100%;
    bottom: 0px;
    min-height: 56px;
    left: 0px;
    padding: 10px;
    color: #fff;
    border-radius: 0px 0px 10px 10px;
    background-color: rgba(43, 37, 75,.9);
    text-align: center;
    font-size: 12px;
  }

.list-group11:lang(ar) > .go-story-box > .marg > .btn-link {
  position: absolute;
  bottom: 60px;
  color: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: rgba(43, 37, 75,.9);
  font-size: 12px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-group11:lang(ar) > .go-story-box > .marg > .btn-link {
  right: auto;
  left: 10px;
}

.list-group11 > .go-story-box > .marg > .margBadges {
  position: absolute;
  top: 0px;
  background-color: #E2A947;
  padding: 22px 5px;
  font-size: 12px;
  border-radius: 0px 0px 10px 10px;
  left: 10px;
}

.list-group11:lang(ar) > .go-story-box > .marg > .margBadges {
  left: auto;
  right: 10px;
}
/* ---------videos------------  */
.list-group11 > .col-lg-6 > .marg {
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
}

  .list-group11 > .col-lg-6 > .marg > a > .margImageDiv {
    background-size: cover !important;
    height: 390px;
    border-radius: 10px;
    box-shadow: 3px 3px 8px #d7d7d7;
  }


  .list-group11 > .col-lg-6 > .marg > .margTitle {
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
    padding: 10px;
    color: #fff;
    border-radius: 0px 0px 10px 10px;
    background-color: rgba(43, 37, 75,.9);
    text-align: center;
    font-size: 13px;
    z-index: 4;
  }

  .list-group11 > .col-lg-6 > .marg > a > div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3) !important;
    transition: 1s;
  }

.list-group11 .col-lg-6 > .marg > a > div:hover {
  background-color: rgba(0, 0, 0, 0) !important;
}

.list-group11 > .col-lg-6 > .marg > a > div:hover i {
  animation: spin .5s linear;
}

.list-group11 > .col-lg-6 > .marg > .margBadges {
  position: absolute;
  top: 0px;
  background-color: #E2A947;
  padding: 22px 5px;
  font-size: 12px;
  border-radius: 0px 0px 10px 10px;
  left: 10px;
}

.list-group11:lang(ar) > .col-lg-6 > .marg > .margBadges {
  left: auto;
  right: 10px;
}

.back-btn-loc > a {
  position: relative;
  padding: 8px 32px 11px 32px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  color: #fff;
  border-radius: 16px;
  transition: .5s;
  background-color: #fff;
  border: 1px solid #2B254B !important;
  color: #2B254B !important;
  transition: 1s;
  /* margin-bottom: 20px; */
}

  .back-btn-loc > a:hover {
    background-color: #E5E3F3 !important;
  }

.back-btn-loc > span {
  display: inline-block !important;
  margin: 5px 5px;
  padding: 8px;
  color: #e2a947;
  /* margin-top: -20px; */
}

.back-btn-loc {
  margin-bottom: 10px;
}

  .back-btn-loc + .margTitle {
    font-size: 25px;
    margin-bottom: 20px;
  }


.list-group11 > .go-story-box > .margStories {
  position: relative;
  padding: 10px;
  border: 1px solid #d3d3d3;
  border-radius: 15px;
  margin-bottom: 20px;
  background-color: #fff !important;
}

  .list-group11 > .go-story-box > .margStories > ul > li > img {
    object-fit: cover;
    width: 100%;
    height: 250px;
    border-radius: 15px;
  }

  .list-group11 > .go-story-box > .margStories > ul > li + li {
    position: absolute;
    background-color: #E2A947;
    color: #fff;
    padding: 15px 5px;
    border-radius: 0px 0px 10px 10px;
    top: 0px;
    left: 20px;
    font-size: 12px;
  }

.list-group11:lang(ar) > .go-story-box > .margStories > ul > li + li {
  right: 20px;
  left: auto;
}

.list-group11 > .col-md-3 > .margheight {
  background: #2b254b;
  position: relative;
  /* padding: 15px; */
  /* border: 1px solid #d3d3d3; */
  border-radius: 18px;
  margin-bottom: 20px;
}

  .list-group11 > .col-md-3 > .margheight > a {
    display: block;
  }

    .list-group11 > .col-md-3 > .margheight > a > img {
      width: 100%;
      height: 275px;
      border-radius: 15px 15px 0px 0px;
    }

.list-group11 > .col-12 > .margheight > .margTitle {
  position: absolute;
  width: 79%;
  bottom: 80px;
  min-height: 38px;
  left: 0px;
  padding: 10px;
  color: #fff;
  border-radius: 0px 10px 10px 0px;
  background-color: rgba(43, 37, 75,.9);
  text-align: center;
  font-size: 12px;
}

  .list-group11 > .col-12 > .margheight > .margTitle:lang(ar) {
    right: 0px;
    left: auto;
    border-radius: 10px 0px 0px 10px;
  }

.list-group11 > .col-md-3 > .margheight > .margTitle + ul > .description {
  font-size: 14px;
  padding: 10px;
  height: 62px;
  color: #fff;
  overflow: hidden;
}

  .list-group11 > .col-md-3 > .margheight > .margTitle + ul > .description + li {
    position: absolute;
    background-color: #E2A947;
    padding: 15px 5px;
    color: #fff;
    top: 0px;
    left: 15px;
    border-radius: 0px 0px 10px 10px;
    font-size: 12px;
  }

    .list-group11 > .col-md-3 > .margheight > .margTitle + ul > .description + li:lang(ar) {
      right: 15px;
      left: auto;
    }

.dfwp-column {
  /* padding: 15px; */
}

.SummaryLinks > li > .item > img, .SummaryLinks > li {
  width: 100%;
}

  .SummaryLinks > li > .item {
    padding: 10px;
    border: 1px solid #d3d3d3;
    border-radius: 10px;
    margin: 5px;
    margin-bottom: 10px;
  }


    .SummaryLinks > li > .item > img, .SummaryLinks > li > .item > .image-area-top > a > img {
      width: 100%;
      height: 78px;
      object-fit: cover;
    }

    .SummaryLinks > li > .item > .link-item > a {
      color: #2a3042 !important;
      font-size: 16px;
      height: 55px;
      display: block;
      overflow: hidden;
    }

    .SummaryLinks > li > .item > .link-item > .description {
      height: 31px;
      font-size: 14px;
      overflow: hidden;
      color: #6B7280;
    }

    .SummaryLinks > li > .item a {
      border: none;
      padding: 0px;
      display: block;
    }

      .SummaryLinks > li > .item a:hover {
        background-color: transparent;
      }

@media(max-width:600px) {
  .dfwp-column {
    width: 100% !important;
    float: none !important;
  }
}

.font-force .ms-rteStyle-Comment, .font-force .ms-rteStyle-Accent1 {
  color: #2B254B;
  padding: 10px 0px;
  display: block;
  margin: 0px;
}

.font-force a {
  color: #2B254B;
}


/* ------------------ */
.achievementCards > .col-12 > .row > .card {
  flex: 0 0 auto;
  width: 33.3333333333%;
  margin: 0px;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none;
}

@media (max-width:500px) {
  .achievementCards > .col-12 > .row > .card {
    width: 100%;
  }
}

.achievementCards > .col-12 > .row > .card a {
  display: block;
  border: 1px solid #d3d3d3;
  border-radius: 15px;
  margin-bottom: 20px;
  background-color: #fff;
  transition: 1s;
}

  .achievementCards > .col-12 > .row > .card a:hover {
    background-color: #E5E3F3;
  }
/* ----------------------- */

.allview-container > .allview > .careers-list--title {
  position: absolute;
  top: 0px;
  font-size: 14px;
  background-color: #E2A947;
  padding: 5px 10px;
  color: #fff;
  border-radius: 0px 0px 10px 10px;
  right: 20px;
}

.allview-container:lang(ar) > .allview > .careers-list--title {
  right: auto;
  left: 20px;
}

.allview-container > .allview > .careers-list--subTitle {
  padding: 20px 0px 5px 0px;
  font-size: 16px;
  color: #2b254b;
}

.allview-container > .allview > .careers-list--summary {
  color: #737576;
  font-size: 14px;
  text-align: justify;
}

.allview-container > .allview > .careers-list--footer {
  text-align: end;
}

  .allview-container > .allview > .careers-list--footer > .career-list--link {
    font-size: 12px;
    padding: 6px 15px 6px 15px;
    margin-bottom: 0px;
  }
/* -------------searchpage------------- */
#SearchBox > .ms-srch-sbLarge {
  border: 1px solid #2B254B !important;
  border-radius: 20px;
  position: relative;
}

  #SearchBox > .ms-srch-sbLarge input {
    color: #2B254B;
    padding: 7px 5px !important;
    height: 35px;
    font-size: 14px;
  }

  #SearchBox > .ms-srch-sbLarge > .ms-srch-sb-searchLink {
    position: absolute;
    right: 0px;
    width: 36px;
    height: 36px;
    display: block;
    background-color: #2B254B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

    #SearchBox > .ms-srch-sbLarge > .ms-srch-sb-searchLink:lang(ar) {
      right: auto;
      left: 0px;
    }

    #SearchBox > .ms-srch-sbLarge > .ms-srch-sb-searchLink::after {
      position: absolute;
      content: "\f002";
      color: #fff;
      font-family: "Font Awesome 6 Free";
      font-weight: 600;
    }

    #SearchBox > .ms-srch-sbLarge > .ms-srch-sb-searchLink img {
      display: none;
    }

.ms-srch-group-content > .ms-srch-item {
  padding: 20px !important;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid #d3d3d3;
  max-width: 500px !important;
  width: auto !important;
}


  .ms-srch-group-content > .ms-srch-item .ms-srch-item-body {
    display: block;
  }

    .ms-srch-group-content > .ms-srch-item .ms-srch-item-body > .ms-srch-item-title > .ms-srch-ellipsis {
      overflow: visible !important;
      margin-bottom: 10px;
    }

      .ms-srch-group-content > .ms-srch-item .ms-srch-item-body > .ms-srch-item-title > .ms-srch-ellipsis > a {
        color: #2B254B !important;
        font-size: 20px;
      }

    .ms-srch-group-content > .ms-srch-item .ms-srch-item-body > .ms-srch-item-path {
      font-size: 14px;
      color: #b6842e;
      margin-top: 10px;
    }

/* ----------- */


/* ---------------- */
.sec-page .ms-srch-Paging li {
  list-style: none;
  font-size: 13px;
  line-height: 31px;
  text-align: center;
  border: 1px solid #D1D5DB;
  margin-left: -1px;
  cursor: pointer;
  margin: 0 3px;
  border-radius: 9px;
  color: #2B254B;
  width: 35px;
  height: 35px;
  display: inline-block !important;
  position: relative;
}

  .sec-page .ms-srch-Paging li.active {
    background-color: #2B254B;
    color: #fff;
  }

  .sec-page .ms-srch-Paging li a {
    padding: 0 !important;
    color: #2B254B !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .sec-page .ms-srch-Paging li:hover {
    background-color: #E5E3F3;
  }

  .sec-page .ms-srch-Paging li.active a {
    color: #fff;
  }

  .sec-page .ms-srch-Paging li a span {
    display: none;
  }

.sec-page .ms-srch-Paging #PagingImageLink {
  margin-bottom: -14px !important;
}

  .sec-page .ms-srch-Paging #PagingImageLink #PageLinkPrev::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    position: absolute;
  }

  .sec-page .ms-srch-Paging #PagingImageLink #PageLinkNext::before {
    content: "\f104";
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    position: absolute;
  }

/* -----------media---------- */
#MawhibainMediaForPagintion > span {
  background-color: #2B254B;
  padding: 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  margin: 10px 0px;
  display: inline-block;
}

#MawhibainMediaForPagintion > li {
  padding: 10px 20px;
  color: #2B254B;
  list-style: none;
  position: relative;
}

  #MawhibainMediaForPagintion > li::before {
    content: "\f1c1";
    position: absolute;
    color: #E2A947;
    font-family: "Font Awesome 6 Free";
    left: 0px;
  }

#MawhibainMediaForPagintion:lang(ar) > li::before {
  right: 0px;
  left: auto;
}

#MawhibainMediaForPagintion > li > a {
  color: #2B254B;
  transition: 1s;
}

  #MawhibainMediaForPagintion > li > a:hover {
    color: #E2A947;
  }

/* ---------------- */
.sec-page .AlbumPager {
  margin-top: 20px;
}

  .sec-page .AlbumPager > span > .pagingLnk {
    list-style: none;
    font-size: 13px;
    line-height: 31px;
    text-align: center;
    border: 1px solid #D1D5DB;
    margin-left: -1px;
    cursor: pointer;
    margin: 0 3px;
    border-radius: 9px;
    color: #2B254B;
    width: 35px;
    height: 35px;
    display: inline-block !important;
    position: relative;
  }

  .sec-page .AlbumPager:lang(ar) > span > .pagingLnk:last-child, .sec-page .AlbumPager:lang(ar) > span > .pagingLnk:nth-last-child(2), .sec-page .AlbumPager:lang(ar) > span > .pagingLnk:nth-child(1), .sec-page .AlbumPager:lang(ar) > span > .pagingLnk:nth-child(2) {
    transform: scale(-1);
  }

  .sec-page .AlbumPager > span > .pagingLnkCurrent {
    list-style: none;
    font-size: 13px;
    line-height: 31px;
    text-align: center;
    border: 1px solid #D1D5DB;
    margin-left: -1px;
    cursor: pointer;
    margin: 0 3px;
    border-radius: 9px;
    color: #fff;
    background-color: #2B254B;
    width: 35px;
    height: 35px;
    display: inline-block !important;
    position: relative;
  }

  .sec-page .AlbumPager a.active {
    background-color: #2B254B;
    color: #fff;
  }


/*new login*/

/*
    authentication / login / signup /forget password
*/
.authentication {
  position: relative;
  background: transparent;
  padding: 0px;
  margin-top: 20px;
  /*padding-top: 50px;
  padding-bottom: 50px;*/
}

.authentication-container .form-steps-container {
  display: table-cell;
  vertical-align: middle;
}

.authentication-container {
  display: table;
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 50px 0 50px;
}

.authentication .page-content {
  padding: 0;
}

.authentication-container:before {
  content: "";
  background-image: url(../../../images/mawhiba/mask_2.png);
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
/*.authentication:after{
  content: "";
  background:  linear-gradient(132deg, #F3F3F3 0%, #F9FBFC 100%) 0% 0% no-repeat padding-box;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  top: 0;
}*/
/*.registeration .authentication-container{
 position: relative;
 top: -60px;
}*/

.authentication-logo {
  position: absolute;
  top: 40px;
  right: 60px;
  cursor: pointer;
  z-index: 9;
}
/*.authentication-container{
  position: relative;
  top: 20px;
}*/
.authentication-container .button {
  max-width: 250px;
}

.authentication-logo img {
  width: 230px;
}

.form-steps-container .form-message {
  font-size: 12px;
}

.form-container {
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 50px 102px;
  background-color: #fff;
  box-shadow: 0px 0px 10px #eee;
  /* width: 45%; */
  margin: 0 auto;
  position: relative;
}

.form-steps-counter {
  position: absolute;
  left: 20px;
  top: 20px;
  background: #fff;
  box-shadow: 0px 21px 30px #0000000d;
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 50%;
  font-family: var(--bold-font);
  padding: 15px 2px;
  font-size: 18px;
  position: relative;
}

  .form-steps-counter:after {
    border: none;
    position: absolute;
    top: 20px;
    left: 20px;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: white;
    content: " ";
  }

.left-half-clipper {
  border-radius: 50%;
  width: 5em;
  height: 5em;
  position: absolute;
  /*clip: rect(0, 5 em, 5 em, 2.5 em );*/
  clip: rect(auto,auto,auto,auto);
}

.first50-bar {
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em );
  background-color: #53777A;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.value-bar {
  position: absolute;
  clip: rect(0, 2.5em, 5em, 0);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2em solid #53777A;
  /* background-color: #4D642D; */
  box-sizing: border-box;
  transform: rotate( 299deg);
}

.form-container .form {
  margin: 0 auto;
  /*max-width: 340px;*/
}

.form-success {
  text-align: center;
}

  .form-success .form-verfication-img {
    margin-bottom: 20px;
  }

.form-verfication {
  text-align: center;
  margin: 0 auto;
}

.form-verfication-img {
  width: 150px;
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  position: relative;
}

.form-title {
  font-size: 20px;
  margin-bottom: 40px;
  font-family: var(--meduim-font);
  text-align: center;
  color: var(--main-color);
  position: relative;
}

.form-verfication-title {
  font-size: 18px;
  font-family: var(--meduim-font);
}

.form-verfication-timer {
  font-size: 14px;
  font-family: var(--meduim-font);
  color: #000;
}

  .form-verfication-timer span {
    margin: 0 5px;
    font-family: var(--meduim-font)
  }

.form-verfication-code {
  display: block;
  text-align: center;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  direction: ltr;
}

.form-verfication-input {
  border-radius: 8px;
  background-color: #F5F8FA;
  border: 0px;
  width: 100%;
  height: 42px;
  font-size: 16px;
  font-family: var(--bold-font);
  padding: 8px 10px 8px;
  color: #4B4B4B;
}

.form-verfication-code-input {
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #DBDBDB;
  width: 15%;
  height: 42px;
  text-align: center;
  margin-left: 6px;
  font-size: 25px;
  font-family: var(--bold-font);
  line-height: 1;
}

  .form-verfication-code-input:last-child {
    margin-right: 0px;
  }

.form-success .title {
  font-size: 20px;
  font-family: var(--meduim-font);
  margin-top: 30px;
  text-align: center;
}

.form-steps-container.forget-password .form-input .form-button .icon {
  width: 30px !important;
  margin-left: 5px;
}
/* Form-Steps*/
.form-step {
  display: none;
}

  .form-step.active {
    display: block;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
  }

.form-step-large .form-container {
  width: 60%;
}

.form-step-meduim .form-container {
  width: 50%;
}

.form-step-small .form-container {
  width: 450px;
}

.form-step-large .form-container .form {
  width: 70%;
}

.form-input.form-fullname input {
  padding: 6px 10px 6px;
}

.forget-password-steps-link img {
  width: 100%;
  height: 100%;
}

.forget-password-steps-link {
  position: relative;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  padding: 8px;
  margin: 0 auto;
  margin-bottom: 10px;
  display: block;
  cursor: pointer;
}

  .forget-password-steps-link:hover ~ div {
    color: var(--blue-color);
  }

  .forget-password-steps-link.stay {
    background-color: #FFBCBD;
  }

    .forget-password-steps-link.stay img {
      height: 62px;
      width: 90px;
      position: relative;
      top: 5px;
      right: -11px;
    }

  .forget-password-steps-link.id {
    background-color: #FFDA55;
  }

  .forget-password-steps-link.no-id-stay {
    background-color: #E1E1E2;
  }

  .forget-password-steps-link:before {
    content: "";
    position: absolute;
  }

.forget-password-steps .form-step2 .form-title {
  margin-bottom: 80px;
}

.forget-password-steps .form-step2 .form-container {
  padding-bottom: 60px;
}

.forget-password-steps .form-step2 {
  top: -20px;
  position: relative;
}

.forget-password-steps .form-title {
  position: unset;
}

.forget-password-steps-counter {
  position: absolute;
  background-color: #fff;
  width: 65px;
  height: 65px;
  left: 30px;
  top: 30px;
  border: 6px solid #F9FBFC;
  border-radius: 50%;
}

  .forget-password-steps-counter .text {
    z-index: 9;
    font-size: 17px;
    position: relative;
    top: 12px;
    font-family: var(--bold-font);
  }

  .forget-password-steps-counter:before {
    content: "";
    width: 65px;
    height: 65px;
    border-radius: 50%;
    position: absolute;
    border: 6px solid var(--blue-color);
    top: -6px;
    left: -7px;
    transform: rotate(154deg);
  }

  .forget-password-steps-counter[value="1/3"]:before {
    clip: rect(0px, 23px, 75px, 0px);
    clip-path: circle(50.0% at 12% 50%);
  }

  .forget-password-steps-counter[value="2/3"]:before {
    clip: rect(0, 42px, 99px, 0px);
    transform: rotate(195deg);
  }

.authentication header {
  display: none;
}

@media (max-width: 991.98px) {
  .authentication .form-container {
    width: 70%;
  }

  .forget-password-steps-counter {
    /*width: 45px;
      height: 45px;
      border: 4px solid #F9FBFC;*/
  }
  /*.forget-password-steps-counter:before{
       width: 45px;
      height: 45px;
      border: 4px solid var(--blue-color);
          top: -4px;
  left: -4px;
  }
  .forget-password-steps-counter .text{
      font-size: 15px;
      top: 5px;
  }*/

  .forget-password-steps .form-step2 .form-title {
    margin-bottom: 25px;
  }

  .authentication header {
    display: block;
  }

  .authentication-logo {
    display: none;
  }

  .form-container {
    padding: 50px 50px;
  }

  .authentication-container {
    top: 30px;
  }

  .form-step .form-container {
    width: 95% !important;
  }


  .forget-password-steps .form-step2 {
    top: 0px;
  }
}

@media (max-width: 768px) {
  .authentication .form-container {
    width: 90%;
  }
}

@media (max-width: 575.98px) {
  .forget-password-steps-counter:before {
    width: 50px;
    height: 50px;
    top: -6px;
    left: -6px;
  }

  .forget-password-steps-counter .text {
    top: 6px;
    left: -1px;
  }

  .forget-password-steps-counter {
    left: 7px;
    top: 70px;
    width: 50px;
    height: 50px;
  }

  .form-container {
    max-width: 95%;
    width: 95% !important;
    padding: 30px 30px;
  }

  .authentication-container .button {
    margin-left: 0px;
  }
}


/*
    Form
*/


.form-password .icon {
  position: absolute;
  left: 18px;
  width: 20px;
  height: 20px;
  fill: #9b9b9b;
  top: 10px;
}

.form-password .show-password:hover .icon {
  fill: var(--blue-color);
}

input:focus-visible {
  outline: none !important;
}

.icon-calendar {
  position: relative
}

.form-textbox.not-checked:after {
  content: "";
  height: 13px;
  width: 2px;
  transform: rotate(45deg);
  background-color: red;
  position: absolute;
  left: -20px;
  bottom: 13px;
}

.form-textbox.not-checked:before {
  transform: rotate(-45deg);
  position: absolute;
  left: -20px;
  bottom: 13px;
  content: "";
  height: 13px;
  width: 2px;
  background-color: red;
}

.icon-calendar .icon {
  position: absolute;
  left: 10px;
  top: -6px;
}

  .icon-calendar .icon img, .icon-calendar-date .icon img {
    width: 18px !important;
    height: 18px;
  }

.icon-calendar-date {
  position: relative
}

  .icon-calendar-date .icon {
    position: absolute;
    left: 10px;
    top: 2px;
  }

.input-title-blue {
  color: var(--blue-color) !important;
}

  .input-title-blue::placeholder {
    color: var(--blue-color) !important;
  }

.radiobtn {
  vertical-align: middle;
}

input[type="radio"]:checked ~ label {
  color: var(--blue-color);
}

.form-download input {
  opacity: 0;
  outline: 0;
  color: transparent;
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 9;
}
  /*form */
  .form-download input:focus {
    outline: 0;
  }
  /*form */
  .form-download input::-webkit-file-download-button {
    visibility: hidden;
  }
/*form */
.form-download {
  position: relative;
  height: 45px;
  width: 120px;
  display: inline-block;
  background: var(--green-color);
  color: #fff;
  text-align: center;
  border-radius: 9px;
}
  /*form */
  .form-download span {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    right: 0;
    font-size: 14px;
    padding: 10px 18px;
    font-family: var(--bold-font);
  }
/*form */
.form-download-container {
  display: flex;
}
/*form */
.form-download-en input {
  opacity: 0;
  outline: 0;
  color: transparent;
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 9;
}
  /* end form */

  .form-download-en input:focus {
    outline: 0;
  }
  /* form */

  .form-download-en input::-webkit-file-download-button {
    visibility: hidden;
  }
/* form */

.form-download-en {
  position: relative;
  height: 45px;
  width: 170px;
  display: inline-block;
  background: var(--green-color);
  color: #fff;
  text-align: center;
  border-radius: 9px;
}

  .form-download-en span {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    right: 0;
    font-size: 14px;
    padding: 10px 18px;
    font-family: var(--bold-font);
  }

.form-dropdown .dropdown-grey {
  padding: 8px 13px 8px 23px;
  border-radius: 20px;
}

  .form-dropdown.dropdown-grey .dropdown-toggle {
    background-color: #ececec;
    color: #c5c5c5;
  }

    .form-dropdown.dropdown-grey.dropdown-toggle:before {
      box-shadow: inset -2px 2px 0 0 #c5c5c5;
    }

  .form-dropdown.dropdown-grey .dropdown-menu {
    background-color: #ececec;
  }

.dropdown-white {
  border-radius: 20px !important;
  background-color: #fff;
}

.large-textarea {
  height: 300px !important;
}

.search-grey-input {
  background: #f4f4f8;
  padding: 0px 16px 0px;
  border-radius: 20px;
  padding-left: 44px;
  position: relative;
  border: 1px solid #e9e9e9;
}

[type="radio"] {
  /* border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; */
}

  [type="radio"] + span:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -0.25em;
    margin-left: 10px;
    border-radius: 1em;
    border: 0.125em solid #fff;
    box-shadow: 0 0 0 1px #1e2432;
    transition: 0.5s ease all;
  }

  [type="radio"]:checked + span::before {
    box-shadow: 0 0 0 1px var(--blue-color);
    background: var(--blue-color);
  }

  [type="radio"]:checked + span {
    color: var(--blue-color);
  }

.form-check-input:checked {
  background-color: #2B254B;
  border-color: #2B254B;
}

.form-check {
  min-height: 0;
  margin-bottom: 0;
}

label.form-check-label {
  margin: 0;
  font-size: 12px;
}

input[type="radio"]:checked ~ label {
  color: var(--blue-color) !important;
}

.search-grey-input::placeholder {
  color: #00000080;
  font-size: 12px;
}

.form-search input::placeholder {
  color: #000000;
  opacity: 0.2;
}

.form-textarea textarea:focus-visible {
  outline: none !important;
}

.form-check-contact input {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.form-textbox-contact {
  width: 100%;
  padding: 10px 20px;
  background-color: #f9fbfc;
  border: 1px solid #d9d8df;
  border-radius: 8px;
}

.title-form {
  color: var(--form-color) !important;
}

.form-datepicker {
  position: relative;
  padding: 0px;
}
  /*.form-datepicker .datepicker.dropdown-menu {
  width: 300px;
}*/
  /*.form-datepicker .datepicker,
.form-datepicker .table-condensed {
  width: 300px;
  height: 300px;
}*/
  .form-datepicker:before {
    content: "";
    background: url('../../../images/calender-date.svg');
    position: absolute;
    left: 20px;
    top: 10px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px;
  }
  /*.form-datepicker table tr td.active.active {
  background: var(--blue-color) !important;
  border-radius: 50%;
}*/
  .form-datepicker .datepicker table tr td.day.focused, .form-datepicker .datepicker table tr td.day:hover {
    border-radius: 50%;
  }

.form-message {
  background-color: #f2f1f780;
  border-radius: 8px;
  margin-bottom: 40px;
  padding: 10px 50px 10px 10px;
  font-size: 14px;
  color: #4c80b6;
  /* text-align: center; */
  position: relative;
  font-family: var(--meduim-font);
}

  .form-message:lang(en) {
    padding: 10px 10px 10px 50px;
  }

    .form-message:lang(en):after {
      left: 15px;
      right: auto;
    }

  .form-message:after {
    position: absolute;
    color: #4c80b6;
    right: 15px;
    content: "\2139";
    border: 1px solid #4c80b6;
    padding: 0px 5px 0px 5px;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    font-size: 13px;
    line-height: 1.3;
    top: 13px;
  }

.form-warning {
  font-size: 12px;
  position: relative;
  font-family: var(--meduim-font);
  padding-right: 23px;
  margin-top: 8px;
  margin-right: 2px;
}

  .form-warning:after {
    position: absolute;
    color: var(--blue-color);
    right: 0;
    content: "\2139";
    border: 2px solid var(--blue-color);
    padding: 1px 4px 0px 5px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 11px;
    line-height: 1.3;
    top: 0;
  }

.form-buttons {
  /* margin-top: 40px; */
  text-align: center;
}

  .form-buttons .button {
    margin-left: 20px;
  }

    .form-buttons .button:last-child {
      margin-left: 0px;
    }

  .form-buttons .button {
    margin-bottom: 20px;
  }

.form-prev {
  margin-left: 16px;
}

.form-edit {
  font-family: var(--bold-font);
  font-size: 16px;
  position: relative;
  top: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--main-color);
}

  .form-edit:hover, .form-save:hover {
    color: var(--blue-color);
  }

    .form-edit:hover .icon {
      stroke: var(--blue-color);
      fill: var(--blue-color);
    }

    .form-save:hover .icon {
      fill: var(--blue-color);
    }

  .form-edit .icon {
    width: 18px;
    height: 18px;
    position: relative;
    top: -1px;
    fill: #000;
    stroke: #000;
    right: 0;
    margin-left: 5px;
    transition: all 0.2s;
  }

.form-save {
  cursor: pointer;
}

  .form-save .icon {
    width: 20px;
    height: 20px;
    position: relative;
    top: 0px;
    right: 0;
    margin-left: 5px;
    transition: all 0.2s;
  }



.form-button {
  border: 1px solid #D9D8DF;
  background-color: #fff;
  padding: 8px 10px 8px;
  border-radius: 8px;
  font-size: 13px;
  width: 100%;
  transition: all 0.2s;
  color: #000;
  text-align: right;
  display: inline-block;
  font-family: var(--bold-font);
}

.form-error {
  font-size: 10px;
  margin-top: 10px;
  margin-right: 10px;
  color: #6B7280;
}

.form-search {
  position: relative;
}

  .form-search input {
    background-color: #fff;
    border-radius: 50px;
    padding: 5px 20px 5px 50px;
    width: 100%;
    border: 0px;
  }

  .form-search .icon {
    position: absolute;
    left: 20px;
    top: 4px;
    width: 32px;
    height: 32px;
  }

  .form-search input::placeholder {
    font-size: 14px;
    color: #000;
  }

.form-label {
  font-family: var(--bold-font);
  color: #6B7280;
  font-size: 14px;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.form-input.required .form-label:after {
  content: "*";
  position: static;
  font-size: 18px;
  color: #FF0062;
}

.form-input {
  /* margin-bottom: 25px;    */
}

.page-card .form-input {
  margin-bottom: 25px;
}

.form-input.white .form-dropdown .dropdown-toggle, .form-input.white .form-textbox input,
.form-input.white .form-textarea, .form-input.white .form-textarea textarea, .form-input.white .form-upload-value {
  background-color: #fff;
  text-decoration: none;
}

.form-input.disabled .form-textbox input, .form-input.disabled .form-box, .form-input.disabled .form-dropdown .dropdown-toggle {
  background: #f0f0f0;
  pointer-events: none;
}

.form-input-round .form-textbox, .form-input-round .form-textbox input, .form-input-round .dropdown-toggle {
  border-radius: 40px !important;
}
/*.form .form-input:last-child{
  margin-bottom: 0px;
}*/
.form-textarea-container {
  position: relative;
}

.form-textarea {
  background-color: #fbfbfb;
  border: 1px solid #D9D8DF;
  border-radius: 8px;
  height: 85px;
  position: relative;
  overflow: hidden;
}

.character-length {
  position: absolute;
  left: 0;
  font-size: 12px;
  margin: 5px 0 0;
}

.form-textarea textarea {
  border: transparent;
  background-color: #fbfbfb;
  padding: 10px 20px 10px;
  font-size: 14px;
  width: 100%;
  transition: all 0.2s;
  /*color: #4B4B4B;*/
  color: #4B4B4B;
  resize: none;
  height: 100%;
}

  .form-textarea textarea:focus-within, .form-textarea textarea:focus-visible {
    outline: none !important;
  }

  .form-textarea textarea::placeholder {
    color: #0000004d;
    font-size: 14px;
  }

.form-textbox {
  background-color: #F9FBFC;
  width: 100%;
  border-radius: 8px;
  position: relative;
}

  .form-textbox input {
    border: 1px solid #D9D8DF;
    background-color: #ffffff;
    padding: 10px 20px 10px;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
    transition: all 0.2s;
    color: #4B4B4B;
    /*color: var(--blue-color);*/
    width: 100%;
    text-align: right;
    height: 40px;
  }

.form-buttons button i:lang(en) {
  transform: scaleX(-1);
}

.form-textbox input:lang(en) {
  text-align: left;
}

.form-dropdown .dropdown-toggle:lang(en) {
  border-radius: 8px 0 0 8px;
}

.form-mobile .form-textbox input:lang(en) {
  border-radius: 0 8px 8px 0;
}

.form-input-warning:lang(en):before {
  left: 0 !important;
  right: auto;
}

.form-input-warning:lang(en) {
  padding-left: 22px;
  padding-right: 0;
}

.form-input-danger:lang(en):before {
  left: 0 !important;
  right: auto;
}

.form-input-danger:lang(en) {
  padding-left: 22px;
  padding-right: 0;
}

.form-mobile .form-textbox input {
  border-radius: 8px 0 0 8px;
}

.form-upload-value:lang(en) {
  text-align: left;
  margin-left: 15px;
  margin-right: 0;
}

.modal-body .input-group .btn.btn-outline-secondary:lang(en) {
  border-right: 1px solid #ced4da !important;
}

.form-textbox input:focus {
  box-shadow: 0px 3px 7px #0000000d;
  border-color: #979797;
}

.form-textbox input:focus-within {
  outline: 0;
}

.form-textbox input::placeholder {
  /*color: #4B4B4B;*/
  color: #0000004d;
  font-size: 14px;
}

.form-input-danger, .form-input-message {
  color: red;
  font-size: 12px;
  position: relative;
  font-family: var(--regular-font);
  margin-top: 6px;
}

.form-input-danger {
  padding-right: 22px;
  margin-bottom: 20px;
}

  .form-input-danger:before {
    position: absolute;
    color: #fff;
    right: 0;
    content: "\2139";
    border: 1px solid red;
    padding: 0 4px 0px 5px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 11px;
    line-height: 1.3;
    /* top: 2px; */
    background: red;
  }

.form-input-warning, .form-input-message {
  color: #DFA750;
  font-size: 12px;
  position: relative;
  font-family: var(--regular-font);
  margin-top: 6px;
}

.form-input-warning {
  padding-right: 22px;
  /* margin-bottom: 20px; */
}

  .form-input-warning:before {
    position: absolute;
    color: #fff;
    right: 0;
    content: "\2139";
    border: 1px solid #DFA750;
    padding: 0 4px 0px 5px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 11px;
    line-height: 1.3;
    /* top: 2px; */
    background: #DFA750;
  }

.form-textbox.checked {
  position: relative;
}

  .form-textbox.checked:before {
    position: absolute;
    left: -32px;
    bottom: 13px;
    height: 7px;
    width: 2px;
    background-color: #14A38B;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
  }

  .form-textbox.checked:after {
    position: absolute;
    left: -32px;
    bottom: 13px;
    height: 2px;
    width: 14px;
    background-color: #14A38B;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
  }

.form-textarea-meduim {
  height: 150px !important;
}

.form-mobile {
  display: flex;
  width: 100%;
}

.form-mobile-img {
  width: 20px;
  height: 15px;
  object-fit: cover;
}

.form-mobile .form-dropdown {
  width: 120px;
  /* margin-right: 10px; */
}

.form-mobile .dropdown-menu {
  width: 120px;
}

.form-mobile .form-textbox {
  width: calc(100% - 120px);
}

.form-dropdown .dropdown-toggle {
  width: 100%;
  border: 1px solid #D9D8DF;
  background-color: #ffffff;
  padding: 8px 20px 10px 40px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  width: 100%;
  transition: all 0.2s;
  color: #4B4B4B !important;
  position: relative;
  text-align: right;
  cursor: pointer;
  display: block;
  height: 40px;
}

  .form-dropdown .dropdown-toggle:focus {
    box-shadow: 0px 3px 7px #0000000d;
    border-color: #979797;
  }

  .form-dropdown .dropdown-toggle.show {
    box-shadow: 0px 3px 7px #0000000d;
    border-color: #979797;
  }

  .form-dropdown .dropdown-toggle:after {
    display: none;
  }

  .form-dropdown .dropdown-toggle:before {
    top: 20px;
    /* right: 0; */
    width: 8px;
    height: 8px;
    transform-origin: 50% 50%;
    transform: translate(0, -0.5em) rotate( 135deg);
    box-shadow: inset -2px 2px 0 0 #00000078;
    content: "";
    position: absolute;
    left: 20px;
  }

.form-dropdown .dropdown-menu {
  transform: translate(0) !important;
  background: #fff;
  bottom: auto !important;
  top: 45px !important;
  height: fit-content;
  width: 100%;
  border: 0px;
  box-shadow: 0px 21px 30px #00000026;
  border-radius: 8px;
  right: 0 !important;
  left: auto;
}

  .form-dropdown .dropdown-menu .dropdown-item {
    color: #4B4B4B;
    font-size: 13px;
    cursor: pointer;
  }

    .form-dropdown .dropdown-menu .dropdown-item:hover {
      color: var(--blue-color);
    }

    .form-dropdown .dropdown-menu .dropdown-item:active, .form-dropdown .dropdown-menu .dropdown-item:focus-within {
      background: #e9ecef;
      border: 0px;
    }

.form-checkbox {
  display: block;
  position: relative;
  padding-right: 22px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

  .form-checkbox .text {
    font-size: 13px;
  }

  .form-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  .form-checkbox .checkmark {
    position: absolute;
    top: 7px;
    right: 0;
    height: 13px;
    width: 13px;
    background-color: #fff;
    border: 1.5px solid #1E2432;
    border: 1.5px solid #1E2432;
    border-radius: 3px;
    transition: all 0.2s;
  }

  .form-checkbox input:checked ~ .checkmark:after {
    opacity: 1;
  }

  .form-checkbox input:checked ~ .checkmark {
    border-color: transparent;
    background-color: var(--blue-color);
  }

  .form-checkbox .checkmark:after {
    right: 2px;
    top: 0px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate( 45deg);
    -ms-transform: rotate(45deg);
    transform: rotate( 45deg);
    content: "";
    position: absolute;
    transition: all 0.2s;
    opacity: 0;
  }

  .form-checkbox .text {
    font-size: 13px;
  }

.form-upload input {
  opacity: 0;
  outline: 0;
  color: transparent;
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 9;
}

  .form-upload input:focus {
    outline: 0;
  }

  .form-upload input::-webkit-file-upload-button {
    visibility: hidden;
  }

.form-upload {
  position: relative;
  height: 40px;
  width: 120px;
  display: inline-block;
  background: #E5E7EB;
  color: #2b254b;
  text-align: center;
  border-radius: 16px;
}

  .form-upload:hover {
    background: #2B254B;
    color: #fff;
  }

  .form-upload span {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    right: 0;
    font-size: 14px;
    padding: 8px 18px;
    font-family: var(--meduim-font);
  }

.form-upload-container {
  display: flex;
}

.form-upload-value {
  border: 1px solid #D9D8DF;
  background-color: #ffffff;
  padding: 6px 10px 6px;
  border-radius: 8px;
  font-size: 14px;
  width: calc(100% - 120px);
  transition: all 0.2s;
  color: #4B4B4B;
  position: relative;
  text-align: right;
  margin-right: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/*.form-textbox, .form-dropdown,.form-upload-container, .form-box{
  margin-top: 2px;
}*/
.form-box {
  border: 1px solid #D9D8DF;
  background-color: #fff;
  padding: 10px 20px 10px;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s;
  color: #4B4B4B;
  position: relative;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
}

  .form-box img {
    width: 50px;
    height: auto;
  }

.captcha {
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 0px 15px;
  background: #F9FBFC;
  align-items: center;
  border: 1px solid #D9D8DF;
  height: 67px;
}
/*Form Radio button*/
.swtichradiobtn .switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
  top: 5px;
}

  .swtichradiobtn .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

.swtichradiobtn .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F2F1F7;
  -webkit-transition: .4s;
  transition: .4s;
}

  .swtichradiobtn .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    right: 4px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

.swtichradiobtn input:checked + .slider {
  background-color: #2196F3;
}

.swtichradiobtn input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.swtichradiobtn input:checked + .slider:before {
  -webkit-transform: translateX(-9px);
  -ms-transform: translateX(-9px);
  transform: translateX(-9px);
}
/* Rounded sliders */
.swtichradiobtn .slider.round {
  border-radius: 34px;
}

  .swtichradiobtn .slider.round:before {
    border-radius: 50%;
  }

.swtichradiobtn .text {
  font-size: 14px;
  font-family: var(--meduim-font);
}

.datepicker-dropdown {
  padding: 20px;
}
/*
  Form Data
*/
.form-data-section .accordion-item {
  border: 0px;
}

.form-data-section .accordion-button {
  padding: 0px;
  pointer-events: none;
}

  .form-data-section .accordion-button::before, .form-data-section .accordion-title:before, .form-data-section .accordion-title:after {
    display: none;
  }

.form-data-section .collapse:not(.show) {
  display: block;
}

.form-data-section .accordion-title {
  padding-right: 0;
}

.form-data-section {
  margin-bottom: 40px;
}

.form-data-title {
  font-family: var(--meduim-font);
  font-size: 18px;
  color: var(--main-color);
  margin-bottom: 15px;
}

.form-data-row {
  border-bottom: 1px solid #dddddd9c;
  margin-bottom: 24px;
  position: relative
}

  .form-data-row:last-child {
    border-bottom: 0px;
    margin-bottom: 0px;
  }

.form-data-row-delete {
  position: absolute;
  bottom: 20px;
  left: 0;
  font-family: var(--meduim-font);
  font-size: 18px;
}

  .form-data-row-delete:hover {
    color: #FF0062;
    fill: #FF0062;
  }

  .form-data-row-delete .icon {
    width: 14px;
    height: 14px;
    margin-left: 5px;
  }

.form-data-row-edit {
  position: absolute;
  top: -3px;
  left: 0;
}

  .form-data-row-edit .icon {
    width: 12px;
    height: 11px;
    margin-left: 8px;
    stroke: #000;
    cursor: pointer;
  }
/*.form-delete{
  position: absolute;
  bottom: 20px;
  left: 0;
  font-family: var(--meduim-font);
  font-size: 18px;
}
.form-delete:hover{
  color: #FF0062;
  fill: #FF0062;
}
.form-delete .icon{
  width: 14px;
  height: 14px;
  margin-left: 5px;
}*/

.form-data-card {
  background: #F2F1F74D;
  padding: 20px 25px;
  border-radius: 8px;
  box-shadow: 0px 2px 18px #00000017;
}

.form-data .property {
  font-size: 11px;
  color: rgba(0,0,0,0.5);
  font-family: var(--meduim-font);
}

.form-data .value {
  font-size: 15px;
  font-family: var(--meduim-font);
}

.follow-up-files .form-upload-value {
  width: 300px;
}

.form-multiselect .form-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  display: block;
  height: 100%;
  top: 0;
  right: 0;
}

@media (max-width: 991.98px) {
  .form-upload span {
    padding: 6px 18px;
  }

  .form-textbox input {
    padding: 5px 20px 10px;
  }

  .form-data-section .accordion-item {
    border: 0px;
  }

  .form-data-section .accordion-button {
    padding: 0px;
    pointer-events: unset;
  }

    .form-data-section .accordion-button::before, .form-data-section .accordion-title:before, .form-data-section .accordion-title:after {
      display: block;
    }

  .form-data-section .collapse:not(.show) {
    display: none;
  }

  .form-data-section .accordion-title {
    padding-right: 40px;
  }

  .form-data-section .accordion-button::before {
    background: var(--blue-color) !important;
    border-color: var(--blue-color) !important;
  }
}

@media (max-width: 575.98px) {
  .form {
    width: 100% !important;
  }
  /*.form-message:after {
      text-indent: -5px
  }*/
  .form-password {
    width: 90%;
  }

  .form-data-row-edit span {
    display: none;
  }

  .form-data-row-edit {
    padding: 0px;
    min-width: auto;
    left: 0;
    border: 0px;
    background: #fff;
    box-shadow: 0px 2px 12px #00000017;
    width: 40px;
    height: 41px;
  }

    .form-data-row-edit .icon {
      position: relative;
      width: 18px;
      height: 18px;
      top: 8px;
      left: -3px
    }
}

@media (min-width: 1200px) {
  .form-input-lg-0 {
    margin-bottom: 0px;
  }
}

/**Drag and Drop**/
.list-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word
}


  .list-item .flex {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
  }


  .list-item .no-wrap {
    white-space: nowrap
  }

.list-row .list-item {
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  align-items: center;
  padding: .75rem .625rem;
  cursor: move;
}

.list-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  border-bottom: 1px solid #efefef;
  height: 50px;
}

.button {
  display: inline-block;
  padding: 7px 30px;
  text-align: center;
  border-radius: 30px;
  font-family: var(--meduim-font);
  font-size: 16px;
  transition: all 0.2s;
  height: 42px;
  /*line-height: 42px;*/
  position: relative;
  top: 0;
  border: 1px solid;
  cursor: pointer;
  border-color: transparent;
  min-width: 125px;
}

  .button span {
    vertical-align: middle;
    line-height: normal;
    margin-left: 5px;
  }

.button-grey {
  background-color: #1e243280;
  color: #fff !important;
}
  /*button*/
  .button-grey:hover {
    background-color: #1e243280;
  }

.button-light {
  background-color: #f2f1f7b3;
}

.button-disabled {
  background-color: #f5f5f5;
  pointer-events: none;
  color: var(--light-color);
}

.button-auto {
  min-width: auto !important;
}

.button:focus-visible {
  outline: 0 !important;
}

.button-dark-blue {
  background: #1A4AB9;
  color: #fff !important;
}

.button-yellow {
  background: #ffda55;
  color: var(--main-color);
}

  .button-yellow:hover {
    background: #f9cd2d;
    color: var(--main-color);
  }

.button-purple {
  background: var(--purple-color);
  color: #fff;
}

  .button-purple:hover {
    background: #5f51bf;
    color: #fff;
  }

.button:hover {
  box-shadow: 0px 2px 12px #00000026;
  /*border-color: transparent;*/
  /*top: -2px;*/
}

.button-black {
  background-color: #1e2432;
  color: #fff !important;
}

.button-border-black {
  background: transparent;
  border-color: rgba(0,0,0, 0.24);
  color: #1e2432;
}

.button-border-blue {
  background: transparent;
  border-color: var(--blue-color);
  color: var(--blue-color);
}

  .button-border-blue:hover {
    color: var(--main-color);
  }

    .button-border-blue:hover .icon {
      fill: var(--main-color);
    }

.button-white {
  color: var(--main-color) !important;
  background-color: #fff;
  box-shadow: 0px 8px 10px #00000008;
}

  .button-white:hover {
    color: var(--blue-color) !important;
  }

.button-fullwidth {
  width: 100%;
}

.button-large {
  min-width: 175px !important;
}

.button-responsive {
  min-width: 175px !important;
}

.button-blue {
  background-color: #0099ff;
  color: #fff !important;
}

  .button-blue:hover {
    background-color: #0687dc;
  }

.button-red {
  background-color: #ff523e;
  color: #fff !important;
}

  .button-red:hover {
    background-color: #e44937;
  }

.button-orange {
  background-color: #f9a439;
  color: #fff !important;
}

  .button-orange:hover {
    background-color: #da8f30;
  }

.button-green {
  background-color: #38b349;
  color: #fff !important;
}

  .button-green:hover {
    background-color: #2d9a3c;
  }

.button-circle {
  padding: 11px;
  border-radius: 50%;
  height: auto;
  min-width: auto;
}

@media screen and (min-width: 1200px) {
  .button-lg-fullwidth {
    width: 100%;
  }
}

@media screen and (max-width: 991.98px) {
  .button {
    font-size: 14px;
    padding: 7px 16px 7px;
    /*height: 45px;*/
  }

  .button-responsive {
    min-width: 125px !important;
  }
}

@media (max-width: 767.98px) {
  .button {
    padding: 7px 16px;
  }
  /*.full-width .button {
        width: 100%;
    }*/
}

/*Titles*/

.title {
  display: inline-block;
}
/*Title size*/
.title-35 {
  font-size: 35px !important;
  margin-bottom: 25px;
}

.title-23 {
  font-size: 23px; /*edit*/
}

.title-25 {
  font-size: 25px !important;
  margin-bottom: 12px;
}

.title-16 {
  font-size: 16px !important;
}

.title-15 {
  font-size: 15px !important;
}

.title-14 {
  font-size: 14px !important;
}

.title-12 {
  font-size: 12px !important;
}

.title-20 {
  font-size: 20px !important;
  margin-bottom: 12px;
}

.title-18 {
  font-size: 18px !important;
}

.title-10 {
  font-size: 10px !important;
}

.title-22 {
  font-size: 22px !important;
}

.title-13 {
  font-size: 13px !important;
}

.title-28 {
  font-size: 28px !important;
}

.title-40 {
  font-size: 40px !important;
}

.title-50 {
  font-size: 50px !important;
}

.title-60 {
  font-size: 60px;
}

.title-30 {
  font-size: 30px !important;
}
/*Title Font*/
.title-meduim {
  font-family: var(--meduim-font) !important;
}

.title-bold {
  font-family: var(--bold-font) !important;
}

/*Title Color*/
.title-main {
  color: var(--main-color) !important;
}

.title-black {
  color: #000 !important;
}

.title-red {
  color: #2B254B;
}

.font-grey {
  color: #7d7d7d;
}

.title-13 {
  font-size: 13px !important;
}

.title-75 {
  font-size: 75px;
}

.title-dark-blue {
  color: #1A4AB9;
}

.title-red {
  color: #2B254B;
}

.title-200 {
  font-size: 200px;
  line-height: 0.86;
}

.title-red-light {
  color: #ff445b;
}
/*title*/

.title-yellow-light {
  color: #ffac4e;
}
/*title*/

.title-purple-dark {
  color: #852dee;
}
/*title*/

.title-orange-light {
  color: #F8C44C;
}

.title-blue-light {
  color: #44c4ff;
}
/*title*/

.title-blue-dark {
  color: #5044ff;
}

.num-page {
  font-size: 18px;
  font-family: var(--bold-font);
  margin: 0 2px;
  cursor: pointer;
}

  .num-page.active {
    color: var(--blue-color) !important;
  }

.title-light-blue {
  color: var(--light-blue);
}

.title-white {
  color: #fff !important;
}

.title-blue {
  color: var(--blue-color) !important;
}

.title-light {
  color: #1e243280 !important;
}

.title-light-grey {
  color: #7E7E7E;
}

.title-purple {
  color: var(--purple-color) !important;
}

.title-dark-gray {
  color: var(--dark-gray-color) !important;
}

.title-gray {
  color: var(--gray-color) !important;
}

.title-orange {
  color: #F9A439 !important;
}

.title-green {
  color: #38b349 !important;
}

.title-yellow {
  color: var(--yellow-color) !important;
}

.title-link span {
  margin-left: 5px;
}

.title-link:hover {
  color: var(--blue-color) !important;
  /*font-family: var(--bold-font);*/
}

.secondTitle {
  color: var(--babyblue-color) !important;
}

.secondTitleGreen {
  color: var(--green-color) !important;
}

.grayCont {
  background: #F4F4F6;
  border-radius: 20px;
  font-size: 14px;
  padding: 20px;
}

.grayContPopup {
  background: #F4F4F6;
  border-radius: 10px;
  font-size: 14px;
  padding: 20px;
}

.title-underline {
  text-decoration: underline;
  position: relative;
  /*border-bottom: 1px solid;*/
  /*display: inline-block;*/
}

  .title-underline:hover {
    text-decoration: underline !important;
  }

.title-nowrap {
  white-space: nowrap;
}

.title-center {
  text-align: center;
}

.title-icon .icon,
.title-icon .title {
  display: inline-block;
}

.title-icon.attached .icon {
  transform: rotate(45deg);
}

:root {
  --main-color: #2B254B;
  --blue-color: #4C80B6;
  /*like bebras  / kangroo / mawhiba / membership / moaatmar / rabia*/
  --light-color: #1e243280;
  --gray-color: #2B254B;
  --dark-gray-color: #2B254B;
  --darkblue-color: #1a4ab9;
  --dark-blue: #1a4ab9;
  --purple-color: #2B254B;
  /*like membership / moaatmar / rabita*/
  --yellow-color: #ffda55;
  /*like mawhiba  / rabita*/
  --green-color: #11998E;
  /*like bebras  / kangroo / mawhiba / membership / moaatmar / rabia*/
  --babyblue-color: #4C80B6;
  --orange-color: #ffac5a;
  /*like mawhiba*/
  --red-color: #ff0062;
  --form-color: #4b4b4b;
  --light-blue: #a5dbff;
  /*like mawhiba*/
  --darkgreen-color: #216f2c;
  --contant-color: #6B7280;
}






/*
    Image
*/
.image-50 {
  width: 50px !important;
  height: 50px;
}

.image-fit {
  object-fit: cover;
}

.image-fit-contain {
  object-fit: contain !important;
}

.image-round {
  border-radius: 16px;
  overflow: hidden;
}

.image-circle {
  border-radius: 50%;
  overflow: hidden;
}

.img-border-blue img {
  border: 2px solid var(--blue-color);
}

.image-120 {
  width: 120px !important;
  height: 120px;
}

.image-100 {
  width: 100px !important;
  height: 100px;
}

.image-65 {
  width: 65px !important;
  height: 70px;
}

.image-40 {
  width: 40px !important;
  height: 40px !important;
}

.image-35 {
  width: 35px !important;
  height: 35px !important;
}

.image-70 {
  width: 70px !important;
  height: 70px;
}

.image-60 {
  width: 60px !important;
  height: 60px;
}

.image-20 {
  width: 20px !important;
  height: 20px;
}

.image-25 {
  width: 25px !important;
  height: 25px;
}

.icon-xsmall {
  width: 15px;
  height: 15px;
}

.image-50 {
  width: 50px !important;
}

.image-15 {
  width: 15px;
  height: 15px;
}

.image-90 {
  width: 90px !important;
  height: 90px;
}

.image-170 {
  width: 170px !important;
  height: 170px;
}

.image-w-130 {
  width: 130px !important
}

/*
    Notifications
*/
/* .notifications-menu-container {
  position: absolute;
  width: 480px;
  left: 15px;
  top: 35px;
  display: none;
} */
.notifications-container {
  position: relative;
}

.notifications-menu {
  border-radius: 18px;
  box-shadow: 0px 2px 12px #00000017;
  background-color: #fff;
  /*overflow: hidden;*/
}

.notifications-container.active .notifications-menu-container {
  display: block;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.notifications-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.notifications-menu li {
  font-size: 14px;
  border-bottom: 1px solid #ECEBEF;
  padding: 15px 20px;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
}

  .notifications-menu li:last-child {
    border-bottom: 0px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  .notifications-menu li .title {
    font-size: 13px;
    color: rgba(0,0,0,0.5);
    font-family: var(--meduim-font);
    /* flex: 0 0 auto; */
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .notifications-menu li .info {
    flex: 0 0 auto;
    width: auto;
  }

  .notifications-menu li.new {
    background-color: #d9d8df24;
  }

    .notifications-menu li.new .title, .notifications-menu li.new .date {
      color: var(--blue-color);
    }

      .notifications-menu li.new .date .icon {
        fill: var(--blue-color);
      }

.notifications-menu .date {
  font-size: 11px;
  color: rgba(0,0,0,0.5);
  display: inline-block;
}

  .notifications-menu .date .icon {
    width: 15px;
    height: 15px;
    fill: rgba(0,0,0,0.5);
    margin-left: 5px;
  }

.notifications-menu .more-options {
  margin-right: 10px;
  display: inline-block;
}
/*.notifications-menu .more-options-link {
  position: relative;
}
.notifications-menu .more-options-menu a {
  margin: 0px !important;
  top: 0px !important;
}
.notifications-menu .more-options-link .icon{
  width: 20px;
  height: 20px;
}*/
.notifications-menu .more-options-menu {
  left: 0;
  width: 160px;
}

@media (max-width: 767.98px) {
  .notifications-menu li .title, .notifications-menu li .info {
    /* width: 100%; */
  }
  /* .notifications-menu-container {
      position: absolute;
      width: 325px;
      left: -60px;
      top: 35px;
      display: none;
  } */
  .more-options-menu {
    right: 0
  }
}




/*
    Header
*/
/*.after-login .header-container {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
    padding: 0; 
    box-shadow: 0px 2px 12px #0000000A;
}*/

header {
  /*padding: 10px 0;*/
  position: fixed;
  top: 0;
  width: 100%;
  right: 0;
  z-index: 999;
  background: #fff;
  /*position: relative;*/
  height: 95px;
  box-shadow: 0px 2px 12px #00000014;
}

  header.header-sticky {
    background-color: #fff !important;
    box-shadow: 0px 2px 12px #00000014 !important;
    height: 60px !important;
  }

.mawhiba-home .header-container:hover .header-navbar-link, .mawhiba-home .header-container:hover .header-navbar-link a, .mawhiba-home .header-container:hover .header-navbar-link .icon {
  color: #000;
}

.header-sticky .header-link {
  height: 42px;
}
/*header:after{
  position: absolute;
  width: 100%;
  height: 5px;
  box-shadow: 0px 2px 12px #00000017;
  content: "";
}*/
.header-container .logo {
  /*width: 280px;*/
  position: relative;
  transition: all 0.2s;
  /*height: 70px;*/
}

.header-navbar-links ul, .header-navbar-links ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
/*.header-navbar-links ul li {
  display: inline-block;
  position: relative;
}*/
.header-link {
  /*top: 18px !important;*/
  height: 60px;
}

.header-navbar-link {
  color: var(--main-color);
  font-family: var(--bold-font);
  margin: 0 25px 0 0px;
  display: inline-block;
  transition: all 0.2s;
  position: relative;
  top: 0;
  /*transition: all 0.2s;*/
  font-size: 15px;
  cursor: pointer;
}

.header-navbar-links .header-navbar-link .header-navbar-title {
  top: 0;
  transition: all 0.2s;
  position: relative;
  font-size: 14px;
  padding-bottom: 5px;
}

.header-navbar-link:first-child {
  margin: 0px !important;
}

.header-navbar-link .icon {
  width: 18px;
  height: 18px;
  transition: all 0.2s;
}
/*.login-open, .search-open, .mega-menu-open, .lang {
  position: relative;
  top: 0;
  transition: all 0.2s;
}*/
/*.login-open:hover, .search-open:hover, .mega-menu-open:hover, .lang:hover {
  top: -4px;
}*/
.mega-menu-open .icon {
  stroke: #000;
}

.login-open:hover .icon, .search-open:hover .icon, .mega-menu-open:hover .icon, .lang:hover {
  color: var(--blue-color);
  fill: var(--blue-color);
}

.header-navbar-link:hover .header-navbar-title {
  opacity: .6;
}

.header-navbar-link:hover .icon {
  fill: var(--blue-color) !important;
}

.header-navbar-link.lang {
  font-size: 18px;
}

/*.header-navbar-links{
position: relative;
top: 30px;
}*/


/*
  Before Login
*/
.before-login .after-login-menu {
  display: none;
}

.after-login .after-login-menu {
  margin-bottom: 30px;
  position: fixed;
  top: 26px;
  z-index: 9999;
  right: 260px;
}
/*.after-login .after-login-menu {
  display: inline-block;
  position: relative;
  padding-right: 80px;
}*/
/*After Login*/
.after-login .before-login-link {
  display: none;
}

.after-login-link {
  /* display:none;*/
}

.after-login .after-login-link {
  display: inline-block;
}

.before-login .after-login-link {
  /*display: none;*/
}

.after-login-menu ul li a {
  color: rgba(0,0,0,0.5);
  font-family: var(--bold-font);
  font-size: 14px;
  position: relative;
  padding-bottom: 18px;
  transition: all 0.2s;
}

.page.full-width .header-container {
  height: 85px;
}

.after-login-menu ul li a:hover {
  color: var(--blue-color);
}

.after-login-menu ul li a:after {
  position: absolute;
  content: "";
  width: 0;
  height: 3px;
  background: var(--blue-color);
  right: 0;
  bottom: -20px;
  transition: background 0.4s;
}

.after-login-menu ul li a:hover:after {
  width: 100%;
}

.after-login-menu ul li.active a {
  color: var(--blue-color);
}

  .after-login-menu ul li.active a:after {
    width: 100%;
  }

.header-navbar-links {
  top: 17px;
  position: relative;
}

.header-sticky .header-navbar-links {
  top: 9px;
}

.after-login-menu .logo-small {
  width: 50px;
  margin-left: 80px;
}

.after-login-menu ul li {
  margin-left: 30px !important;
}

  .after-login-menu ul li:last-child {
    margin-left: 0px !important;
  }

img.logo-small:hover ~ .logo-large {
  display: block;
  position: absolute;
  left: 3px;
  background: #fff;
  padding: 7px;
  border-radius: 10px;
  box-shadow: 0px 2px 18px #00000017;
  top: 50px;
}

.header-sticky img.logo-small:hover ~ .logo-large {
  display: none;
}

.notifications-link {
  position: relative;
}

  .notifications-link .badge {
    font-size: 10px;
    position: absolute;
    background: red;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    padding: 4px 2px !important;
    top: -1px;
    right: -7px;
    font-weight: normal;
  }

.header-navbar-link-education .icon {
  margin-left: 5px;
}

.header-navbar-link-mawhiba img {
  width: 200px;
  transition: all 0.2s;
}

.page.full-width .header-navbar-link-mawhiba img {
  width: 195px;
}

.header-sticky .header-navbar-link-mawhiba img {
  width: 125px !important;
}

.header-navbar-link-mawhiba .logo-small {
  display: none;
  width: 50px !important;
  /*margin-right: 25px;*/
}

.header-sticky .header-navbar-link-mawhiba .logo-small {
  width: 35px !important;
}

.header-navbar-link-mawhiba {
  margin-right: 20px;
}

.membership .header-navbar-link-mawhiba {
  margin-right: 8px;
}

  .rabita .header-navbar-link-mawhiba img, .membership .header-navbar-link-mawhiba img,
  .moaatmar .header-navbar-link-mawhiba img {
    display: none;
  }

    .rabita .header-navbar-link-mawhiba img.logo-small, .membership .header-navbar-link-mawhiba img.logo-small,
    .moaatmar .header-navbar-link-mawhiba img.logo-small {
      display: inline-block;
    }

.after-login .rabita .header-navbar-link-mawhiba .logo-small, .after-login .membership .header-navbar-link-mawhiba .logo-small {
  display: inline-block;
}

.after-login .rabita .header-navbar-link, .after-login .membership .header-navbar-link {
  margin: 0 20px 0 0px;
}

.after-login .moaatmar .header-navbar-link-mawhiba img {
  width: 170px;
}

.header-navbar-dropdown {
  display: none;
  position: fixed;
  width: 100%;
  left: 0;
  background-color: #fff;
  top: 90px;
  padding: 30px 0;
  z-index: 9999;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.header-sticky .header-navbar-dropdown {
  top: 60px;
}

.header-navbar-dropdown.show {
  display: block;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.header-navbar-dropdown.hide {
  display: none;
}
/*.header-navbar-dropdown-link-container:hover .header-navbar-dropdown-link ~ .header-navbar-dropdown {
  display: block;
}*/
.header-navbar-dropdown:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--green-color);
}

.header-navbar-dropdown-link:before {
  top: 3px;
  left: 0;
  width: 7px;
  height: 7px;
  transform: rotate( 135deg );
  box-shadow: inset -2px 2px 0 0 var(--main-color);
  content: "" !important;
  position: absolute;
}

.header-navbar-dropdown-link {
  position: relative;
  padding-left: 16px;
}

.header-container .navbar {
  position: unset;
}

.header-navbar-links .links, .header-navbar-links .quicklinks {
  display: inline-block;
}

.header-navbar-links .quicklinks {
  margin-right: 30px;
}

.responsive-menu-open, .responsive-menu {
  display: none !important;
}

.before-login .responsive-menu {
  margin-bottom: 40px;
}

.responsive-menu-active .header-navbar-link {
  padding: 0px 25px;
  display: block !important;
  margin: 20px 0 0px 0 !important;
}

  .responsive-menu-active .header-navbar-link a {
    display: block !important;
  }

  .responsive-menu-active .header-navbar-link .header-navbar-title {
    font-size: 16px !important;
    font-family: var(--meduim-font) !important;
  }

.responsive-menu-active .header-navbar-dropdown-link:before {
  top: 11px;
  width: 8px;
  height: 8px;
  transform: rotate( -135deg );
  transition: all 0.2s;
}

.responsive-menu-active .header-navbar-dropdown-link.active:before {
  transform: rotate(135deg );
}

.responsive-menu-header {
  /*box-shadow: 0px 2px 12px #00000017;
  padding: 10px 10px;
  position: relative;
  margin-bottom: 8px;*/
  position: relative;
}

  .responsive-menu-header .logged-user {
    display: none;
  }

.after-login .responsive-menu-header .logged-user {
  display: block;
}

.responsive-menu-header img {
  width: 200px;
}

.responsive-menu-close {
  position: absolute;
  z-index: -1;
  top: 90px;
  left: 98%;
  background: #fff;
  padding: 5px 13px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  display: none;
}

  .responsive-menu-close .icon {
    width: 14px;
    height: 14px;
  }

.responsive-menu-item {
  padding: 10px 20px 0;
  border-top: 1px solid #edeaea;
}

  .responsive-menu-item.lang {
    padding: 25px 25px 0 25px !important;
    /*text-align: center;*/
    display: none;
  }

    .responsive-menu-item.lang .lang-button {
      padding: 5px 30px;
      background: transparent;
      border-color: rgba(0,0,0, 0.24);
      color: #1e2432;
      margin: 0 5px;
      height: auto;
    }

      .responsive-menu-item.lang .lang-button.active {
        background-color: #0099ff;
        color: #fff !important;
      }

.quicklinks {
  margin: 0;
  display: inline-flex;
  padding: 0 10px;
  top: 20px;
  position: relative;
}

.header-sticky .quicklinks {
  top: 8px;
}

.logged-user .image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: relative;
}

  .logged-user .image.active:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #589F36;
    border-radius: 50%;
    top: 2;
    right: -2px;
    border: 1px solid #fff;
  }

  .logged-user .image img {
    width: 100%;
    border-radius: 50%;
    height: 100%;
  }

.logged-user-dropdown .title {
  margin-bottom: 4px;
  font-family: var(--meduim-font);
  font-size: 14px;
}

.logged-user-dropdown .school {
  font-family: var(--regular-font);
  font-size: 12px;
  line-height: 1;
  color: #938b8b;
}
/*.logged-user .caption-media{
  padding-left: 10px;
}*/
.logged-user {
  top: -5px;
  height: 30px;
}

.navbar-left {
  position: relative;
  top: 5px;
}

.header-sticky .navbar-left {
  top: 0px;
}

.page.full-width .header-sticky .navbar-left {
  top: 0;
}

.page.full-width .header-container .logo {
  width: 200px;
}

.header-sticky .logo {
  width: 150px !important;
  top: -2px;
}

.header-sticky ~ .page-content .after-login-menu {
  top: 15px;
}

  .header-sticky ~ .page-content .after-login-menu ul li a:after {
    bottom: -6px;
  }

.logged-user-dropdown .dropdown-menu {
  border: 0px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  width: 220px;
  /*left: 0;
  right: auto;*/
  top: 45px;
  box-shadow: 0px 2px 18px #00000017;
  right: -30px;
}

  .logged-user-dropdown .dropdown-menu ul {
    padding: 10px 0;
    margin: 0;
  }

.logged-user-dropdown-header .icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border-radius: 50%;
  padding: 3px;
  width: 23px;
  height: 23px;
  transition: all 0.2s;
}

  .logged-user-dropdown-header .icon:hover {
    background: #ddd;
  }

.logged-user-dropdown .dropdown-menu .logged-user-dropdown-link {
  color: var(--main-color);
  font-size: 14px;
  padding: 8px 10px;
  display: block;
  height: 38px;
  margin-bottom: 5px;
}

  .logged-user-dropdown .dropdown-menu .logged-user-dropdown-link:hover {
    /*color: var(--blue-color);*/
    font-family: var(--bold-font);
  }

  .logged-user-dropdown .dropdown-menu .logged-user-dropdown-link .icon {
    color: #000 !important;
    fill: #2c2c2c !important;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    background: #ddd;
    border-radius: 50%;
    padding: 4px;
  }

.logged-user-dropdown-header {
  background: #ddeaf3;
  padding: 25px 10px 20px;
  position: relative;
}

.logged-user-dropdown .dropdown-toggle {
  cursor: pointer;
  display: flex;
}

  .logged-user-dropdown .dropdown-toggle::after {
    display: none;
  }

  .logged-user-dropdown .dropdown-toggle .icon {
    position: relative;
    top: 12px;
    margin-right: 5px;
  }

  .logged-user-dropdown .dropdown-toggle:hover .image {
    box-shadow: 0px 2px 18px #00000066;
  }

.after-login .page.full-width .header-link {
  display: none;
}

.logged-user-dropdown-responsive {
  padding: 25px 25px 0 25px;
  display: none;
  border-top: 1px solid #edeaea;
  margin-top: 20px;
}

  .logged-user-dropdown-responsive a {
    display: block;
    margin-bottom: 20px;
    font-family: var(--meduim-font);
    font-size: 16px;
    color: var(--main-color);
    position: relative;
    transition: all 0.4s;
  }

  .logged-user-dropdown-responsive .icon {
    background: rgb(243, 243, 243);
    border-radius: 50%;
    width: 33px;
    height: 33px;
    padding: 7px;
  }

  .logged-user-dropdown-responsive .title {
    font-family: var(--meduim-font);
  }

.header-navbar-dropdown-close {
  display: none;
}

@media screen and (max-width: 767.98px ) {
  .after-login .header-container .container {
    max-width: 100%;
    width: 100%;
  }

  .after-login-menu .logo-small {
    margin-left: 0px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-navbar-link-mawhiba img {
    width: 150px;
  }

  .header-navbar-link {
    margin: 0 0px 0 20px;
  }

  .quicklinks {
    padding: 0;
  }
}

@media screen and (max-width: 991.98px ) {
  .header-container.active:after {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
  }

  .responsive-menu-item.lang {
    display: block;
  }

  .responsive-menu-item.lang {
    display: block;
  }

  .responsive-menu-close {
    display: block;
  }

  .header-sticky .logo {
    width: 120px !important;
  }

  .header-link {
    height: auto !important;
    top: 0 !important;
  }
  /*.header-container .logo {
      width: 190px;
      position:relative;
      top: 15px;
  }*/
  /*.header-navbar-links a{
      margin: 0 15px;
  }*/
  /*.header-navbar-links{
      top: 10px;
  }
    .header-navbar-links .login-open, .header-navbar-links ul li:first-child, .header-navbar-links ul li:nth-child(2) {
      display: none;
  }
  .after-login-menu ul{
      display: none !important;
  }*/
  .header-navbar-link.logged-user, #notifications {
    display: none;
  }

  .logged-user-dropdown-responsive {
    display: block;
  }

  .logged-user {
    /*margin-bottom: 30px;
       padding: 0px 20px 0 40px;*/
    height: auto;
    /* display: none !important; */
    box-shadow: 0px 2px 12px #00000017;
    padding: 20px 20px;
    position: relative;
    /*margin-bottom: 20px;*/
  }

  .after-login .mega-menu.active .logged-user {
    display: block !important;
  }

  .logged-user .image {
    width: 60px;
    height: 60px;
    margin-left: 10px;
    box-shadow: 0px 2px 18px rgba(0,0,0, 0.36);
  }

  .logged-user .title {
    font-family: var(--meduim-font);
    font-size: 16px;
    color: #000 !important;
  }

  .logged-user .school {
    font-size: 14px;
    color: #000 !important;
  }
  /*.logged-user-dropdown .dropdown-menu{
      right: -100px;
  }*/
  header, header.header-sticky {
    height: 75px;
  }

  .header-container .navbar {
    padding: 12px 0;
  }

  .header-navbar-link-mawhiba {
    display: none;
  }

  .header-navbar-link.lang {
    display: none;
  }

  .header-navbar-links .links {
    visibility: hidden;
    width: 0;
    opacity: 0;
    height: 0;
    position: fixed;
    background: #fff;
    left: -100%;
    top: 0;
    /*overflow: hidden;*/
    transition: left 0.4s;
    z-index: 99;
  }

    .header-navbar-links .links:before {
      content: "";
      width: 100%;
      height: 100%;
      background: #fff;
      position: absolute;
      top: 0;
      left: 0;
      background: url(../../../images/colors1.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: right;
      z-index: -1;
    }

  .responsive-menu-active.header-navbar-links .links {
    visibility: visible;
    height: 100%;
    width: 85%;
    opacity: 1;
    left: 0;
  }

  .responsive-menu-open {
    display: inline-block !important;
    margin-left: 15px;
  }

  .responsive-menu {
    display: block !important;
  }

  .header-navbar-dropdown {
    /*position: fixed;
      top: 0;
      padding: 0;
      display: block !important;
      height: 100%;
      width: 100%;
      background: #fff;
      padding: 30px 40px 0 50px;*/
  }

  .header-navbar-dropdown {
    top: 0 !important;
    display: none !important;
    height: 100% !important;
  }

    .header-navbar-dropdown.active {
      display: block !important;
      width: 85%;
    }

      .header-navbar-dropdown.active .title {
        color: #000 !important;
        font-size: 16px !important;
      }

  .header-navbar-dropdown-close {
    position: relative;
    top: -10px;
    right: 20px;
    display: block;
    width: 20px;
    height: 20px;
  }

    .header-navbar-dropdown-close .icon {
      transform: rotate( 180deg );
      width: 20px;
      height: 20px;
    }

  .header-navbar-dropdown:before {
    z-index: -1;
    content: "";
    position: absolute;
    content: "";
    width: 85%;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    background: url(../../../images/colors1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
  }

  .header-navbar-dropdown .title {
    font-size: 13px !important;
    margin-bottom: 20px;
  }

  .header-navbar-dropdown img {
    display: none;
  }

  .header-navbar-links .header-navbar-link:hover .header-navbar-title {
    top: 0px;
  }

  .after-login .after-login-menu {
    position: relative;
    top: 0;
    right: 0;
    z-index: auto;
  }
  /*.after-login .after-login-menu {
      position: absolute;
      bottom: -40px;
      right: 15px;
      padding-right: 0px;
  }*/
  .after-login-menu ul li {
    margin-left: 10px !important;
  }

    .after-login-menu ul li a:after {
      bottom: 5px;
    }
  /*.after-login .page-content{
      margin-top: 45px;
  }*/
  .header-navbar-link {
    margin: 0 20px 0 0px;
  }

  .quicklinks {
    position: relative;
    top: 5px;
  }

  .header-navbar-dropdown:after {
    background: transparent !important;
  }
}

@media screen and (min-width: 1400px) {
  .rabita .header-navbar-link-mawhiba img.logo-small, .moaatmar .header-navbar-link-mawhiba img.logo-small {
    display: none;
  }

  .rabita .header-navbar-link-mawhiba img.logo-large, .moaatmar .header-navbar-link-mawhiba img.logo-large {
    display: block;
  }
}

@media screen and (min-width: 1600px) {
}

@media screen and (min-width: 1900px) {
}


/*
    Steps
*/


.steps-step {
  font-size: 15px;
  /*position: relative;*/
  font-family: var(--meduim-font);
  text-align: center;
  flex: 0 0 auto;
  /*width: auto;*/
  max-width: 20%
}
/*.steps-step.active .title:before {
  background: #f9a439;
  width: 104%;
  z-index: 1;
}*/
.steps {
  display: flex;
  position: relative;
  margin-bottom: 30px !important;
  margin: 0 auto;
  margin-top: 20px;
  /*width: 50%;*/
  justify-content: center;
}

  .steps.row-cols-7 > * {
    width: 13.5%
  }

.steps-step span {
  position: relative;
  display: block;
}

.steps-step .title {
  font-family: var(--bold-font);
  color: #1e243280 !important;
  font-size: 14px;
  position: relative;
  margin-top: 30px;
  min-width: 150px;
  /*padding-left: 150px;*/
}
/*.steps-step:last-child .title{
  padding-left: 0px;
  padding-right: 150px;
}
.steps-step:nth-last-child(-n+2) .title {
  padding-left: 0px;
}*/
.steps-step.active .title {
  color: var(--main-color) !important;
}

/*.steps:before {
  content: "";
  position: absolute;
  top: 0;
  background: #f5f5f7;
  border-radius: 50px;
  right: 0;
  width: 100%;
  height: 10px;
  opacity: 0;
}*/

/*.steps-step:last-child:before {
width: 103%;
}*/

/*.steps-step:first-child {
text-align: right;
}
.steps-step:last-child {
  text-align: left;
}*/
.steps-step.active {
  z-index: 9;
}

.steps-step span:before {
  content: "";
  position: absolute;
  background: #f5f5f7;
  width: 110%;
  height: 11px;
  border-radius: 50px;
  top: 0px;
  right: 0;
  transition: width 0.5s;
}

.steps-step.active span:before {
  background-color: var(--green-color);
}
/*.steps-step.active:before{
  width: 108%;
}*/
.steps-step:last-child:before {
  width: 100%;
}

.steps-prev {
  right: -8px;
}

.steps-next {
  left: -12px;
}

.steps-next, .steps-prev {
  position: absolute;
  top: -11px;
  display: none;
}

  .steps-next .icon, .steps-prev .icon {
    width: 20px;
    height: 20px;
  }
/*.steps-step .title:before {
  content: "";
  position: absolute;
  background: #f5f5f7;
  width: 100%;
  height: 11px;
  border-radius: 50px;
  top: -30px;
  right: 0;
  transition: width 0.5s;
  z-index: 1;
  opacity: 0;
}*/
/*.steps-step.active .title:before {
  z-index: 9;
  opacity: 1;
}*/
.steps-container {
  position: relative;
}
/*.rating-steps {
  display: flex;
  position: relative;
  width: 50%;
  margin-bottom: 30px !important;
  margin: 0 auto;
}

  .rating-steps:before {
      content: "";
      position: absolute;
      top: 0;
      background: #F5F5F7;
      border-radius: 50px;
      right: 0;
      width: 100%;
      height: 10px;
  }*/
/*.rating-steps-step:last-child:before {
  width: 103%;
  right: -10px;
}

.rating-steps-step:first-child {
  text-align: right;
}

.rating-steps-step:last-child {
  text-align: left;
}

.rating-steps-step {
  font-size: 15px;
  padding-top: 28px;
  position: relative;
  width: 50%;
  font-family: var(--meduim-font);
}

  .rating-steps-step.active:before {
      background: #359344;
      width: 100%;
  }

  .rating-steps-step:before {
      content: "";
      position: absolute;
      background: transparent;
      width: 0;
      height: 11px;
      border-radius: 50px;
      top: 0;
      right: 0;
      transition: width 0.5s;
  }*/


@media (max-width: 991.98px) {
  .steps-step {
    text-align: right;
    max-width: unset;
    white-space: nowrap;
  }

  .steps {
    margin: 0 15px;
    height: 50px;
  }
  /*.steps-step.active + .steps-step,
  .steps-step.active {
      display: block;
  }*/
  /*
  .steps-step.active ~ div:first-of-type {
      display: block;
  }*/
  /*.steps-step .title {
      display: none;
  }
  .steps-next, .steps-prev{
      display: block;
  }
  .steps-step.last-active .title {
      display: block !important;
  }
  .steps-step {
      flex: 0 0 auto;
      width: 100%;
  }
  .steps-step .title {
      padding-left: 0px;
  }*/
  .steps-container {
    padding: 0 15px;
  }

  .steps-step .title {
    opacity: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    right: 0;
  }

  .steps-step.last-active .title {
    opacity: 1 !important;
    min-width: auto !important;
  }

  .steps-step .title {
    padding-left: 0;
  }

  .steps-step:last-child .title {
    padding-right: 0;
  }

  .steps-next, .steps-prev {
    display: block;
  }
  /*.steps-step {
      flex: 1 0 0%;
  }*/
  /*.steps {
      width: 100%;
  }*/
  .steps-step:before {
    height: 8px;
  }

  .steps-step.active:before {
    width: 113%;
  }
}











button {
  border: none;
  background: transparent;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}

  button:focus {
    outline: none;
    box-shadow: none !important;
  }




/*--------------------
 Back to Top Button
---------------------*/

.scrollToTopBtn {
  background-color: #F85A0B;
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 20px;
  line-height: 0;
  width: 45px;
  height: 45px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  opacity: 0;
  transform: translateY(100px);
  transition: all .5s ease;
}

.showBtn {
  opacity: 1;
  transform: translateY(0)
}

/***========================
	men area start here
==========================***/

.main-page {
  direction: rtl;
}



.main-area {
  padding: 40px 0px 30px;
}

.main-main {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}




  .main-main::after {
    content: "";
    width: 100%;
    height: 3px;
    background: #A29AC0;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
  }

  .main-main ul .extra span {
    color: #2B254B;
  }

  .main-main ul .extra-highlight span {
    color: #E2A947;
  }

  .main-main ul li {
    text-align: center;
    position: relative;
    width: 27%;
    text-align: right;
  }


    .main-main ul li span {
      font-size: 12px;
      font-weight: 400;
      line-height: 14.4px;
      color: #A29AC0;
      /* background: #fafafa; */
      background: #fff;
      padding: 0px 25px;
      position: absolute;
      left: 24%;
      top: 8px;
    }

    .main-main ul li:last-child {
      position: relative;
      width: 17%;
      text-align: right;
    }

      .main-main ul li:last-child span {
        left: 0
      }

    .main-main ul li img {
      padding: 0;
    }

    .main-main ul li p {
      margin-left: 20px;
    }


/***========================
	position area start here
==========================***/


.main-position {
  background: #F4F4F6;
  padding: 40px;
  border-radius: 20px;
  border: 1px solid #ddd;
}


.header-area {
  display: flex;
  justify-content: space-between;
}

  .header-area h2 {
    font-family: "Alexandria", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    color: #2B254B;
  }

  .header-area .heading a {
    border: 2px solid #2B254B;
    padding: 12px 32px;
    border-radius: 17px;
    margin-bottom: 36px;
    color: #2B254B;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s all ease-in-out;
  }

.position-left {
  background: #fff;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid #D1D5DB;
}

  .position-left h2 {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #6B7280;
    margin-bottom: 16px;
  }

.flex-area2 ul.flex-ul {
  display: flex;
  align-items: center;
}

.flex-area2 .dropdown-toggle::after {
  display: none
}

.flex-area2 .dropdown-menu li {
  padding: 10px;
}

.flex-area2 a:hover, .header-area .heading a:hover {
  background: #E2A947;
  color: #fff;
}

.flex-area2 ul.flex-ul li {
  font-size: 12px;
  font-weight: 400;
  line-height: 14.4px;
  margin-right: 5px;
  color: #6B7280;
}

  .flex-area2 ul.flex-ul li img {
    margin-right: 4px;
  }

.flex-area2 ul.flex-ul .mim {
  background: #F6DBDA;
  padding: 4px;
  color: #6B7280;
  border-radius: 5px;
}

.position-left a {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #2B254B;
  display: block;
  width: 100%;
  border: 1px solid #2B254B;
  text-align: center;
  padding: 8px 0px;
  border-radius: 17px;
  margin-top: 16px;
  text-decoration: none;
}

/***========================
	third area start here
==========================***/

.third-area {
  padding: 40px 0px 10px 0px;
}

.border-b {
  border-bottom: 1px solid #E5E7EB;
}

.third-ctn h2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.44px;
  color: #6B7280;
  margin-bottom: 40px;
}

.third-pen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F4F4F6;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

  .third-pen h3 {
    font-size: 14px;
    font-weight: 500;
    line-height: 16.8px;
    color: #2B254B;
  }

.third-collum {
  display: flex;
  margin-top: 32px;
}

.tc-content h3 {
  font-size: 14px;
  font-weight: 300;
  line-height: 16.8px;
  color: #6B7280;
  margin-bottom: 8px;
}

.tc-content h2 {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  color: #6B7280;
}

.tc-content2 h2 {
  font-size: 12px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 16.8px;
  color: #6B7280;
}

.third-collum img {
  margin-left: 8px;
  margin-top: -19px;
}

.third-main {
  margin-bottom: 40px;
}

/***========================
	select area start here
==========================***/

.select-area {
  padding: 30px 0px 60px;
}

.form-group {
  display: block;
  margin-bottom: 15px;
}

  .form-group input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
  }

  .form-group label {
    position: relative;
    cursor: pointer;
  }

    .form-group label:before {
      content: '';
      -webkit-appearance: none;
      background-color: #F4F4F6;
      border: 2px solid #625B80;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
      padding: 10px;
      display: inline-block;
      position: relative;
      vertical-align: middle;
      cursor: pointer;
      margin-left: 10px;
      border-radius: 8px;
    }


  .form-group input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    right: 9px;
    width: 6px;
    height: 14px;
    border: solid #625B80;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .form-group:lang(en) input:checked + label:after {
    left: 19px !important;
    right: auto !important;
  }

  .form-group label {
    font-size: 14px;
    font-weight: 400;
    line-height: 26.04px;
    color: #6B7280;
  }

    .form-group label a {
      color: #423D56;
      text-decoration: underline;
    }

/* responsive */


/*
======================
For - Big - Screen
======================
*/

@media screen and (min-width: 1920px) {
}


/*
=======================
For - Dextop - Screen
=======================
*/

@media screen and (min-width: 1200px) and (max-width: 1919px) {
}


@media screen and (min-width: 1200px) and (max-width: 1399px) {
}


/*
=======================
For - Leptop - Screen
=======================
*/

@media screen and (min-width: 992px) and (max-width: 1199px) {

  .position-image button {
    top: 89px;
    left: -4px;
  }

  .position-ctn a {
    top: 75px;
  }

  .select-area {
    padding: 30px 0px 50px;
  }

  .main-main ul li span {
    padding: 0px 17px;
  }
}


/*
=======================
For - Ipad - Screen
=======================
*/

@media screen and (min-width: 768px) and (max-width: 991px) {


  .main-main ul li span {
    font-size: 13px;
    line-height: 1.5;
    padding: 0px 10px;
  }

  .header-area h2 {
    font-size: 15px;
    line-height: 20px;
  }

  .header-area .heading a {
    padding: 9px 25px;
    margin-bottom: 25px;
  }

  .position-image img {
    width: 80px;
  }

  .position-image button {
    top: 80px;
    left: 10px;
  }

  .position-ctn a {
    font-size: 12px;
    padding: 10px 5px;
    top: 50px;
  }

  .main-position {
    padding: 25px;
  }

  .position-left {
    margin-bottom: 20px;
  }

    .position-left h2 {
      font-size: 15px;
      margin-bottom: 15px;
    }

    .position-left a {
      font-size: 13px;
      border: 2px solid #2B254B;
      padding: 7px 0px;
    }

  .third-ctn h2 {
    font-size: 15px;
    margin-bottom: 25px;
  }

  .third-pen h3 {
    font-size: 13px;
  }

  .third-pen {
    padding: 10px 13px;
  }

  .third-area {
    padding: 30px 0px 10px 0px;
  }

  .select-area {
    padding: 20px 0px 30px;
  }
}





/*
=======================
For - Mobile - Screen
=======================
*/

@media screen and (max-width: 767px) {

  .main-main ul li {
    text-align: center;
    width: 25%;
  }

    .main-main ul li:last-child {
      width: 25%;
      text-align: center;
    }

    .main-main ul li span {
      font-size: 14px;
      padding: 0px 3px;
      text-align: center;
      top: 125%;
      left: 0;
      right: 0;
      background: transparent;
    }

    .main-main ul li img {
      width: 25%;
    }

    .main-main ul li:last-child span {
      left: 0;
      right: 0;
    }

  .header-area h2 {
    font-size: 12px;
    line-height: 1.5;
  }

  .header-area .heading a {
    border: 2px solid #2B254B;
    padding: 5px 5px;
    border-radius: 27px;
    margin-bottom: 30px;
  }

    .header-area .heading a img {
      width: 20px;
    }

  .position-left h2 {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
  }

  .position-ctn a {
    font-size: 12px;
    padding: 6px 5px;
    border-radius: 30px 0px 0px 30px;
    top: 48px;
  }

  .position-image img {
    width: 60px;
  }

  .position-image button {
    top: 60px;
    left: 13px;
  }

  .flex-area2 ul.flex-ul li {
    font-size: 9px;
    line-height: 1.5;
    margin-right: 2px;
  }

  .position-left a {
    font-size: 12px;
    line-height: 1.5;
    padding: 5px 0px;
    margin-top: 15px;
  }

  .position-left {
    padding: 13px;
    margin-bottom: 20px;
  }

  .main-position {
    padding: 25px;
    margin-top: 30px;
  }

  .third-ctn h2 {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
  }

  .third-pen {
    padding: 8px 10px;
    border-radius: 10px;
  }

  .tc-content h2 {
    font-size: 13px;
  }

  .flex-hobe {
    /*display: flex;*/
  }
}





@media screen and (max-width: 576px) {



  .main-main ul li {
    text-align: center;
    width: 25%;
  }

    .main-main ul li:last-child {
      width: 25%;
      text-align: center;
    }

    .main-main ul li span {
      font-size: 9.5px;
      padding: 0px 3px;
      text-align: center;
    }

    .main-main ul li img {
      width: 35%;
    }
}

.btn-primary.disabled {
  background-color: #ddd !important;
  border-color: inherit !important;
}
/*eportfolio*/
.Header-participate {
  padding: 10px;
}

.divjust {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px
}

.labelText-2 {
  background: #fff;
  border-radius: 5px;
  padding: 12px 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .1);
  margin-bottom: 10px
}

.sec-page .text-info {
  color: #4c80b6 !important
}

.sec-page .form-message a.text-info {
  color: #4B5563 !important;
  text-decoration: underline;
}

.sec-page .btn-info {
  background: #2B254B;
  border-color: transparent;
  color: #fff;
}

.sec-page .bg-info {
  background: #2B254B !important;
  color: #fff !important;
}

.main-body {
  background: #fff;
  padding: 2em;
}

.labelText {
  color: var(--main-color);
  background-color: #f7f7f7;
  padding: 0 5px;
  font-weight: 700;
  min-height: 35px;
  line-height: 35px;
  margin-bottom: 10px;
}

.lableform {
  margin-bottom: 10px;
  line-height: 35px;
}

.sec-page .nav-tabs .nav-item.show .nav-link, .sec-page .nav-tabs .nav-link.active {
  color: #006d7f;
  background-color: #fff;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: #002f3a !important;
}

.sec-page .nav-tabs .nav-link {
  color: #00a287;
}

.titleform, .titleform-secondary {
  border-bottom: 1px dotted #ccc;
  line-height: 33px;
  margin-bottom: 15px;
  margin-top: 15px;
}

.titleform {
  color: var(--main-color);
}

.font-weight-bold {
  font-weight: 700 !important;
}

.titleform-secondary .fa, .titleform .fa {
  padding-left: 5px;
  font-size: 20px;
  color: #f39f19;
}

/* adel */

.custom-select-item {
  background: #fff;
  padding: 12px 20px;
  box-shadow: 0px 2px 12px #00000017;
  border-radius: 12px;
  position: relative;
  margin-bottom: 15px;
  transition: all 0.2s;
  color: var(--contant-color)
}

  .custom-select-item.active {
    background-color: #E5E7EB;
  }

    .custom-select-item.active .custom-select-collapse .icon, .custom-select-item.active .custom-select-title {
      fill: var(--contant-color);
      color: var(--contant-color);
    }

      .custom-select-item.active .custom-select-title:before {
        right: 5px;
        width: 6px;
        height: 13px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        border-radius: 0px;
      }

.custom-select-title:lang(en):before {
  left: 0;
  right: auto;
}

.custom-select-link.bg-warning:after {
  content: '\0024';
  position: absolute;
  width: 10px;
  height: 10px;
  top: 4px;
  right: 6px;
  z-index: 5;
  font-size: 19px;
}

.custom-select-title:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #9A9AA2;
  top: 10px;
  right: 0;
}

.events-details-content .section-events .item {
  width: 100%;
}

.events-details-content .section-events .owl-carousel .owl-item img {
  height: 400px;
}

.events-details-content .owl-theme .owl-dots .owl-dot span {
  width: 15px;
  height: 15px;
  border: 1px dashed var(--blue-color);
}

.events-details-content .owl-theme .owl-dots .owl-dot:hover span {
  background: #000;
}

.events-details-content .owl-theme .owl-dots .owl-dot.active span {
  background-color: var(--blue-color);
}


.custom-select-link {
  color: var(--contant-color);
  font-family: var(--meduim-font);
  font-size: 15px;
  margin-left: 15px;
}

  .custom-select-link::after {
    content: "\25be";
  }

.custom-select .custom-select-link:not(.bg-warning)::after {
  content: "";
}

.custom-select-collapse .icon {
  width: 20px;
  height: 20px;
  fill: var(--contant-color);
}

.custom-select-title {
  font-family: var(--meduim-font);
  font-size: 15px;
  position: relative;
  padding: 10px 30px;
  color: #9A9AA2;
  cursor: pointer;
  color: var(--contant-color);
}

.accordion-button:not(.collapsed) {
  color: var(--contant-color);
  background-color: #E5E7EB;
}

.accordion-button:focus {
  border-color: #ddd;
}

.accordion-button.collapsed {
  border-bottom-width: thin;
}

.Header-participate img {
  width: 200px;
}
/* fix pagination */
.page-link {
  border: 0;
}

.sec-page .pagination li:hover {
  background: transparent
}

.sec-page .pagination li.active a {
  background: transparent;
}

.sec-page .pagination li.active:hover {
  background: #2B254B;
}



/* notifications */

/*
    Notifications
*/
.notifications-menu-container {
  position: absolute;
  width: 480px;
  left: 15px;
  top: 35px;
  display: none;
  z-index: 50000;
}

.notifications-container {
  position: relative;
}

.notifications-menu {
  border-radius: 18px;
  box-shadow: 0px 2px 12px #00000017;
  background-color: #fff;
  /*overflow: hidden;*/
}

.notifications-container.active .notifications-menu-container {
  display: block;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.notifications-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.notifications-menu li {
  font-size: 14px;
  border-bottom: 1px solid #ECEBEF;
  padding: 15px 20px;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
}

  .notifications-menu li:last-child {
    border-bottom: 0px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  .notifications-menu li .title {
    font-size: 13px;
    color: rgba(0,0,0,0.5);
    font-family: var(--meduim-font);
    /* flex: 0 0 auto; */
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .notifications-menu li .info {
    flex: 0 0 auto;
    width: auto;
  }

  .notifications-menu li.new {
    background-color: #d9d8df24;
  }

    .notifications-menu li.new .title, .notifications-menu li.new .date {
      color: var(--blue-color);
    }

      .notifications-menu li.new .date .icon {
        fill: var(--blue-color);
      }

.notifications-menu .date {
  font-size: 11px;
  color: rgba(0,0,0,0.5);
  display: inline-block;
}

  .notifications-menu .date .icon {
    width: 15px;
    height: 15px;
    fill: rgba(0,0,0,0.5);
    margin-left: 5px;
  }

.notifications-menu .more-options {
  margin-right: 10px;
  display: inline-block;
}
/*.notifications-menu .more-options-link {
  position: relative;
}
.notifications-menu .more-options-menu a {
  margin: 0px !important;
  top: 0px !important;
}
.notifications-menu .more-options-link .icon{
  width: 20px;
  height: 20px;
}*/
.notifications-menu .more-options-menu {
  left: 0;
  width: 160px;
}

@media (max-width: 767.98px) {
  .notifications-menu li .title, .notifications-menu li .info {
    width: 100%;
  }

  .notifications-menu-container {
    position: absolute;
    width: 325px;
    left: -60px;
    top: 35px;
    display: none;
  }

  .more-options-menu {
    right: 0
  }
}

.alert-warning {
  color: #4B5563;
  background-color: #F9EED8;
  border-color: #F9EED8;
  font-size: 13px !important;
}

.alert-danger {
  color: #4B5563;
  background-color: #F6DBDA;
  border-color: #F6DBDA;
  font-size: 13px !important;
}

.alert-primary {
  color: #4B5563;
  background-color: #DBE5F1;
  border-color: #DBE5F1;
  font-size: 13px !important;
}

.alert-success {
  color: #4B5563;
  background-color: #DFEEE1;
  border-color: #DFEEE1;
  font-size: 13px !important;
}

  .alert-warning span, .alert-danger span, .alert-primary span, .alert-success span {
    font-size: 13px !important;
  }

  .alert-warning a, .alert-danger a, .alert-primary a, .alert-success a {
    text-decoration: underline !important;
  }

/* 
    Card 
*/
.card {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  border: 0px;
  transition: box-shadow 0.5s;
  top: 0;
  /*height: 100%;*/
  position: relative;
  box-shadow: 0px 2px 18px #00000017;
}

.card-more-options {
  overflow: visible;
}

.card-overflow {
  overflow: hidden;
}

.card-content-grey {
  padding: 20px 25px;
  background-color: #fbfbfb;
  overflow: visible !important;
}

.card-trainers {
  position: relative;
}

  .card-trainers .card-body {
    position: relative;
    z-index: 9;
  }

.card-select-grey .whitebtn {
  background-color: #ffffff;
  width: 100%;
  /* height: 50px; */
  padding: 10px 20px;
  border-radius: 10px;
  margin: 10px 0;
  cursor: pointer;
  position: relative;
  font-size: 14px;
}

.card-select-grey .whitebtn {
  font-family: var(--meduim-font);
}
  /* card */

  .card-select-grey .whitebtn a {
    font-size: 13px;
  }
  /*icon */
  .card-select-grey .whitebtn .icon {
    width: 15px;
    height: 15px;
  }
/*card */
.card-select-grey {
  margin-top: 8px;
  background-color: #fbfbfb;
  border: 1px solid #d9d8df59;
  border-radius: 10px;
  width: 100%;
  height: 410px;
  overflow-y: auto;
}
/*card */
.img-card {
  margin-top: -220px;
}
  /*card*/
  .img-card img {
    width: 580px;
    height: 350px;
  }

.img-card-l img {
  width: 749px;
  height: 382px;
}

.card-light-grey {
  background-color: #fbfbfb;
  padding: 25px;
  overflow: visible !important;
}

.card-trainers .card-body:before {
  content: "";
  background: #e4f4ff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: -1;
}

.card-flex-height .card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card .more-options {
  position: absolute;
  left: 20px;
  top: 20px;
}

.card .more-options-menu {
  background-color: var(--purple-color);
}

  .card .more-options-menu a {
    color: #fff;
  }

    .card .more-options-menu a:hover {
      color: #fff;
    }

.card-rating {
  margin-bottom: 4px;
}

  .card-rating .rating-container {
    margin-bottom: 0px;
  }

  .card-rating .rating-input .icon {
    width: 14px !important;
    height: 14px !important;
  }

  .card-rating .rating-container .value {
    font-size: 14px !important;
    padding-right: 5px;
  }

.card-share {
  margin-bottom: 4px;
}

  .card-share .icon {
    fill: var(--blue-color);
    width: 15px;
    height: 15px;
  }

  .card-share span {
    font-size: 14px;
    font-family: var(--meduim-font);
  }

.card-list .card {
  margin-bottom: 30px;
  height: calc(100% - 30px);
}

.card-list .card-body {
  /*height: auto;*/
  /*margin-bottom: 30px;*/
  height: 100%;
}

.card-data {
  background: #fbfbfb;
  border: 1px solid #d9d8df;
  padding: 20px 25px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--meduim-font);
}

.card-info {
  background: #f2f1f780;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--meduim-font);
  padding: 12px 20px;
}

.card-mini {
  padding: 10px 15px;
  box-shadow: 0px 2px 12px #00000017;
  background-color: #fff;
  border-radius: 8px;
}

.card-green,
.card-green .card-body {
  background-color: var(--green-color);
  color: #fff;
}

.card-purple,
.card-purple .card-body {
  background-color: var(--purple-color);
  color: #fff;
}

.card-babyblue,
.card-babyblue .card-body {
  background-color: var(--babyblue-color);
}

.card-purple .card-title,
.card-purple .card-date {
  color: #fff;
}

.card-status {
  text-align: center;
  margin: 0 auto;
}

  .card-status .number {
    font-size: 40px;
    font-family: var(--bold-font);
    line-height: 1;
  }

  .card-status .title {
    font-family: var(--bold-font);
    font-size: 14px !important;
    display: block;
    margin-bottom: 16px;
  }

  .card-status .image {
    margin-bottom: 16px;
    margin: 0 auto 16px;
  }

  .card-status .brief {
    font-size: 13px;
  }

.card .registerdate {
  background-color: #259dd6;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  padding: 3px 10px;
  width: fit-content;
  position: relative;
  margin-bottom: 8px;
  padding-right: 30px;
}

  .card .registerdate:before {
    background: url("../../../images/clock.png") no-repeat;
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    right: 10px;
    background-size: contain;
    top: 6px;
  }

.card .category {
  font-size: 14px;
}

.card-date .box {
  background-color: #fff;
  border-radius: 12px;
  color: var(--purple-color);
  text-align: center;
  padding: 10px 0;
  width: 50px;
}

.card-date .date {
  margin-top: 8px;
}

.card-date .box span.day {
  display: block;
  font-size: 22px;
  line-height: 1;
  font-family: var(--meduim-font);
}

.card-date .box span.month {
  display: block;
  font-size: 13px;
  line-height: 1;
}

.card-date .date-icon {
  width: 35px;
  height: 35px;
  position: relative;
  top: 5px;
}

.card-date .title {
  font-size: 14px;
  font-family: var(--meduim-font);
  margin-top: 5px;
}

.card-white * {
  color: #fff;
}

.card-black {
  color: #fff;
}

.card-light {
  background-color: #f2f1f74d;
}

.card-container {
  margin-bottom: 30px;
}

.card-image {
  position: relative;
  /*height: 200px;*/
  overflow: hidden;
}

  .card-image .image {
    height: 200px;
    position: relative;
  }

.card .date {
  font-size: 11px;
  /*margin-top: 20px;*/
  margin-bottom: 10px;
}

.card-video {
  height: 100%;
}

.card-icon .image img {
  width: 100%;
  height: 100%;
}

.card-icon .image {
  width: 70px;
  position: relative;
  margin-bottom: 20px;
}

.card .status {
  margin-top: 8px;
}

  .card .status .title {
    font-size: 12px;
    font-family: var(--bold-font);
    line-height: 1;
    display: block;
  }

  .card .status .desc {
    font-size: 12px;
    color: rgba(30, 36, 50, 0.5) !important;
  }

.card .user {
  display: table;
}

  .card .user img {
    border-radius: 50%;
    width: 35px;
    display: table-cell;
    height: 35px;
    vertical-align: middle;
  }

  .card .user .title {
    font-size: 14px;
    font-family: var(--meduim-font);
    padding-right: 8px;
    display: table-cell;
    vertical-align: middle;
  }

.card-link {
  cursor: pointer;
}

  .card-link:hover {
    /*top: -10px;*/
    box-shadow: 0px 2px 18px rgba(0,0,0, 0.26);
  }

    .card-link:hover .card-title {
      color: var(--blue-color);
    }
/*.card-image:hover .video-container .video-image {
  transform: scale(1.2);
}*/
.card-image img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.card-image video {
  border-radius: 20px;
}

.card-image-gutter {
  margin-bottom: 20px;
}

.card-image .video-container {
  height: 200px;
}
/*.card-image  {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: 20px;
}

.card-image img {
    width: 100%;
    transform: none;
    transition: transform 0.4s;
    height: 100%;
}

.card-image:hover img {
    transform: scale(1.25);
}*/
.card-center {
  text-align: center;
}

.card-thumbinal {
  width: 70px;
  height: 70px;
}

.card-center .card-image,
.card-center .card-thumbinal,
.card-center .card-image,
.card-center .card-brief {
  margin-right: auto;
  margin-left: auto;
}

  .card-center .card-image img {
    margin: 0 auto;
  }

.card-body {
  padding: 25px;
  position: relative;
  background-color: #fff;
  border-radius: 20px;
}

.card-body-big {
  padding: 50px 25px;
  position: relative;
  border-radius: 20px;
}

.card-content {
  padding: 20px 25px;
}

/*.news-card .card-content{
    height: 140px;
}*/

.card-title {
  font-family: var(--meduim-font);
  font-size: 17px;
  color: var(--main-color);
  transition: all 0.2s;
}

.card-brief {
  line-height: 1.8;
  color: var(--light-color);
  font-size: 14px;
}

.card-more-menu {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 9;
  cursor: pointer;
}

  .card-more-menu .icon {
    color: rgba(0, 0, 0, 0.34);
  }

  .card-more-menu ul {
    padding: 2px 10px;
    margin: 0;
    list-style-type: none;
    background-color: var(--contant-color);
    position: absolute;
    border-radius: 8px;
    left: 0;
    width: 150px;
    text-align: right;
    display: none;
  }

    .card-more-menu ul.yellow {
      background-color: #FFDA55;
    }

      .card-more-menu ul.yellow a {
        color: #000;
      }

    .card-more-menu ul li a {
      font-size: 12px;
      color: #fff;
    }

  .card-more-menu:hover > ul {
    display: block;
  }

  .card-more-menu:focus-within > ul {
    display: block;
  }

.card-gutter {
  margin-bottom: 30px;
}

.card-blue,
.card-blue .card-body {
  background-color: var(--blue-color);
}

.card-button {
  position: absolute;
  top: 140px;
  right: 20px;
}
  /*button*/

  .card-button button {
    padding: 7px 20px !important;
  }

.events-card .card-eye {
  position: absolute;
  top: 15px;
  left: 20px;
  opacity: 1;
}
  /*title*/

  .events-card .card-eye span {
    color: #fff;
    font-size: 14px;
    font-family: var(--meduim-font);
  }

.card-bottom {
  padding: 0px 20px 15px;
}

.card-grey {
  background-color: #f2f1f780;
  border-radius: 25px;
  padding: 8px;
}
/*card*/

.card-skew {
  position: relative;
}

  /*image*/

  .card-skew img {
    width: 360px;
  }
/*card*/

.card-skew-container {
  position: absolute;
  top: 40px;
  width: 236px;
  right: 80px;
  transform: skew(0deg, 1deg);
}

.card ul {
  padding: 10px
}

.card li {
  list-style: disc;
}

@media (max-width: 767.98px) {
  /*image*/
  .img-card img {
    width: 280px;
    height: 250px;
  }
  /*card*/
  .img-card {
    margin-top: -180px;
  }
}
/*.card-container{
    margin-bottom: 30px;
}*/

/*.card-title{
    font-size: 20px;
    font-family: var(--meduim-font);
    color: var(--blue-color);
}
.card-name{
    font-family: var(--meduim-font);
    font-size: 20px;
    margin-bottom: 12px;
}*/
/*.card-small .card-body{
    padding: 10px;
}
.card-small .card-title{
    font-size: 14px;
}
.card-small .card-name{
    font-size: 14px;
    margin-bottom: 0px;
}
.card-small .card-image{
    width: 80px;
    height: 80px;
}

.card-details .card-details-image{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
.card-details .card-details-name {
    font-size: 18px;
    font-family: var(--meduim-font);
}
.card-details .card-details-title {
    font-size: 18px;
    font-family: var(--meduim-font);
    color: var(--blue-color);
}
.card-details-content{
    margin-top: 25px;
    font-size: 14px;
}*/
@media (max-width: 991.98px) {
  .card-link:hover {
    top: -10px;
  }
}


li.whitebtn.title-bold.active {
  background: #f5f4f4;
}


.btn-primary.disabled, .btn-primary:disabled {
  /* color: #4B5563; */
  background-color: #E5E7EB;
  border-color: #D1D5DB;
}



/*
 * Page
 */
.page {
  display: none;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.page-background {
  position: relative;
}

  .page-background::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url("../../../images/footer.png") no-repeat;
    background-size: 100%;
    background-size: unset;
    background-position: bottom;
    opacity: 0.4;
  }

.page-container {
  scroll-behavior: smooth;
  min-height: 800px;
}

.page-content {
  /*background: transparent linear-gradient(227deg, #FFFFFF 0%, #F8FBFC 100%);*/
  background: #fff;
  padding: 30px 0 50px;
  position: relative;
  min-height: 800px;
}

.page {
  padding-top: 95px;
}

  .page.full-width {
    padding-top: 85px;
  }

.page-light {
  background-color: rgba(242 246 249 / 30%);
}

.page-title {
  font-family: var(--meduim-font);
  font-size: 28px;
  margin-bottom: 30px;
  position: relative;
}

  .page-title img {
    margin-left: 5px;
  }

.page-title-small {
  font-size: 20px;
  margin-bottom: 15px;
  font-family: var(--meduim-font);
}

.page-content-light {
  background-color: #F9FBFC;
}

.page-card {
  display: block;
  border-radius: 20px;
  /* overflow: hidden; */
  position: relative;
  box-shadow: 0px 2px 12px #00000017;
  padding: 40px 40px 40px;
  background-color: #fff;
}

.page-search-input input {
  border-radius: 50px;
  background-color: #F4F4F8;
  padding: 7px 12px 5px 24px;
  font-size: 12px;
  border: 0px;
  width: 195px;
}

.page-search-input .icon {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 8px;
  left: 15px;
}

.page-search-input {
  position: relative;
}

  .page-search-input input::placeholder {
    font-size: 12px;
  }

.page-content-colorful {
  z-index: 9;
  position: relative;
}

  .page-content-colorful:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../../../images/footer.png) no-repeat;
    background-size: 100%;
    background-size: unset;
    background-position: bottom;
    opacity: 0.4;
    z-index: -1;
    top: 0;
  }

@media (max-width: 991.98px) {
  .page {
    padding-top: 75px;
  }
}

@media (max-width: 575.98px) {
  .page-card {
    padding: 30px 20px 50px;
  }
}

@media (max-width: 767.98px) {
  .page-title {
    font-size: 22px;
    margin-bottom: 12px;
  }
}

@media (max-width: 767.98px) {
  .page-content-sm-colorful {
    position: relative;
  }

    .page-content-sm-colorful:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 80%;
      background: url('../../../images/footer.png');
      background-position: left top;
      transform: scaleX(-1);
    }
}




/*
    COmmon Styles
*/
.brief {
  line-height: 2;
  font-size: 14px;
  color: #1e243280;
}

.overflow-hidden {
  overflow: hidden;
}

.py-50px {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

.right-icon {
  width: 170px;
}

hr {
  background: #b1b1b1;
}

.between {
  display: flex;
  justify-content: space-between
}

.w-70 {
  width: 70%;
}

.buttons-center.form-buttons .button {
  margin-left: auto !important;
  margin-right: auto !important;
}

.height-50px {
  height: 50px !important;
}

.dashboard-menu-link.active .icon-tkweem {
  stroke: #fff;
}

.width-260 {
  width: 260px;
}

.width-80 {
  width: 80px;
}

.scale-2 {
  transform: scale(2)
}

.w-150px {
  width: 150px !important;
}

.col-gutter {
  margin-bottom: 30px;
}

.h-200 {
  height: 200px !important;
}

.h-170 {
  height: 170px;
}

.w-px-50 {
  width: 50px !important
}

.line-height-1 {
  line-height: 1;
}

.g-10 {
  --bs-gutter-x: 10rem;
}

.mt-10 {
  margin-top: 10px;
}

.image-45 {
  width: 45px !important;
  object-fit: cover;
  height: 100%;
}

.mx-20 {
  margin: 0 20px;
}

.round {
  border-radius: 20px !important;
  overflow: hidden;
}

.padding-left-20 {
  padding-left: 20px;
}

.hidee {
  margin-left: 1rem;
  display: none;
}

.line-height-2 {
  line-height: 2;
}

ul {
  list-style-type: none;
}

.mt-200 {
  margin-top: 200px;
}

.mt-20 {
  margin-top: 20px;
}

.line-height {
  line-height: 0.9;
}

.border-raduis-20 {
  border-radius: 20px;
}

.width-60 {
  width: 60px;
}

.top-65 {
  top: 65px;
}

.contain {
  height: 15px;
  border-radius: 20px;
  margin: auto;
  background-color: #7d7d7d;
}

.grey-background {
  background-color: #fbfbfb;
  border-radius: 5px;
  padding: 8px 20px;
}

.mb-50 {
  margin-bottom: 50px;
}

.yActive {
  width: 35%;
  height: 100%;
  background-color: red;
  border-radius: 20px;
}

.top-5 {
  position: relative;
  top: 5px;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #8d8b8b;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.more-options {
  position: relative;
}

  .more-options .icon {
    width: 20px;
    height: 20px;
  }

.more-options-link {
  cursor: pointer;
}

.more-options-menu {
  text-align: right;
  min-width: 130px;
  position: absolute;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 2px 12px #00000017;
  z-index: 9;
  display: none;
  padding: 15px 15px;
}

  .more-options-menu a {
    display: block !important;
    font-size: 11px;
    margin-bottom: 7px !important;
    font-family: var(--bold-font);
  }

    .more-options-menu a:last-child {
      margin-bottom: 0px !important;
    }

    .more-options-menu a:hover {
      color: var(--blue-color);
    }

.w-90 {
  width: 90%;
}

.g-5.row > *,
.g-5.row {
  margin-top: 0px;
}

@media (min-width: 991.98px) {
  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-80 {
    width: 80% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-auto {
    width: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .w-md-75 {
    width: 75% !important;
  }

  .w-md-80 {
    width: 80% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-auto {
    width: auto !important;
  }
}

@media (max-width: 1199.98px) {
  .more-options-menu {
    /*left: 0;
        right: auto;*/
  }
}

@media (max-width: 567px) {
  .w-150px {
    width: 100px !important;
  }
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJtYWluL2dlbmVyYWwvY29tbW9uLmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKlxyXG4gICAgQ09tbW9uIFN0eWxlc1xyXG4qL1xyXG4uYnJpZWYge1xyXG4gIGxpbmUtaGVpZ2h0OiAyO1xyXG4gIGZvbnQtc2l6ZTogMTRweDtcclxuICBjb2xvcjogdmFyKC0tbGlnaHQtY29sb3IpO1xyXG59XHJcbi5vdmVyZmxvdy1oaWRkZW4ge1xyXG4gIG92ZXJmbG93OiBoaWRkZW47XHJcbn1cclxuLnB5LTUwcHh7XHJcbiAgICBwYWRkaW5nLXRvcDo1MHB4ICFpbXBvcnRhbnQ7XHJcbiAgICBwYWRkaW5nLWJvdHRvbTo1MHB4ICFpbXBvcnRhbnQ7XHJcbn1cclxuLnJpZ2h0LWljb24ge1xyXG4gICAgd2lkdGg6IDE3MHB4O1xyXG59XHJcbmhyIHtcclxuICAgIGJhY2tncm91bmQ6ICNiMWIxYjE7XHJcbn1cclxuLmJldHdlZW57XHJcbiAgICBkaXNwbGF5OmZsZXg7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6c3BhY2UtYmV0d2VlblxyXG59XHJcbi53LTcwIHtcclxuICAgIHdpZHRoOiA3MCU7XHJcbn1cclxuLmJ1dHRvbnMtY2VudGVyLmZvcm0tYnV0dG9ucyAuYnV0dG9uIHtcclxuICAgIG1hcmdpbi1sZWZ0OiBhdXRvICFpbXBvcnRhbnQ7XHJcbiAgICBtYXJnaW4tcmlnaHQ6IGF1dG8gIWltcG9ydGFudDtcclxufVxyXG4uaGVpZ2h0LTUwcHgge1xyXG4gICAgaGVpZ2h0OiA1MHB4ICFpbXBvcnRhbnQ7XHJcbn1cclxuLmRhc2hib2FyZC1tZW51LWxpbmsuYWN0aXZlIC5pY29uLXRrd2VlbSB7XHJcbiAgICBzdHJva2U6ICNmZmY7XHJcbn1cclxuLndpZHRoLTI2MCB7XHJcbiAgICB3aWR0aDogMjYwcHg7XHJcbn1cclxuLndpZHRoLTgwIHtcclxuICAgIHdpZHRoOiA4MHB4O1xyXG59XHJcbi5zY2FsZS0ye1xyXG4gICAgdHJhbnNmb3JtOnNjYWxlKDIpXHJcbn1cclxuLnctMTUwcHgge1xyXG4gICAgd2lkdGg6IDE1MHB4ICFpbXBvcnRhbnQ7XHJcbn1cclxuLmNvbC1ndXR0ZXIge1xyXG4gICAgbWFyZ2luLWJvdHRvbTogMzBweDtcclxufVxyXG4uaC0yMDB7XHJcbiAgICBoZWlnaHQ6MjAwcHggIWltcG9ydGFudDtcclxufVxyXG4uaC0xNzB7XHJcbiAgICBoZWlnaHQ6MTcwcHg7XHJcbn1cclxuLnctcHgtNTAge1xyXG4gICAgd2lkdGg6IDUwcHggIWltcG9ydGFudFxyXG59XHJcbi5saW5lLWhlaWdodC0xIHtcclxuICAgIGxpbmUtaGVpZ2h0OiAxO1xyXG59XHJcbi5nLTEwIHtcclxuICAgIC0tYnMtZ3V0dGVyLXg6IDEwcmVtO1xyXG59XHJcblxyXG4ubXQtMTB7XHJcbiAgICBtYXJnaW4tdG9wOjEwcHg7XHJcbn1cclxuLmltYWdlLTQ1e1xyXG4gICAgd2lkdGg6NDVweCAhaW1wb3J0YW50O1xyXG4gICAgb2JqZWN0LWZpdDpjb3ZlcjtcclxuICAgIGhlaWdodDoxMDAlO1xyXG59XHJcbi5teC0yMCB7XHJcbiAgICBtYXJnaW46IDAgMjBweDtcclxufVxyXG4ucm91bmQge1xyXG4gIGJvcmRlci1yYWRpdXM6IDIwcHggIWltcG9ydGFudDtcclxuICBvdmVyZmxvdzogaGlkZGVuO1xyXG59XHJcbi5wYWRkaW5nLWxlZnQtMjAge1xyXG4gIHBhZGRpbmctbGVmdDogMjBweDtcclxufVxyXG4uaGlkZWUge1xyXG4gIG1hcmdpbi1sZWZ0OiAxcmVtO1xyXG4gIGRpc3BsYXk6IG5vbmU7XHJcbn1cclxuLmxpbmUtaGVpZ2h0LTIge1xyXG4gIGxpbmUtaGVpZ2h0OiAyO1xyXG59XHJcbnVsIHtcclxuICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XHJcbn1cclxuLm10LTIwMCB7XHJcbiAgbWFyZ2luLXRvcDogMjAwcHg7XHJcbn1cclxuLm10LTIwIHtcclxuICAgIG1hcmdpbi10b3A6IDIwcHg7XHJcbn1cclxuLmxpbmUtaGVpZ2h0IHtcclxuICBsaW5lLWhlaWdodDogMC45O1xyXG59XHJcbi5ib3JkZXItcmFkdWlzLTIwIHtcclxuICBib3JkZXItcmFkaXVzOiAyMHB4O1xyXG59XHJcbi53aWR0aC02MCB7XHJcbiAgd2lkdGg6IDYwcHg7XHJcbn1cclxuXHJcbi50b3AtNjUge1xyXG4gIHRvcDogNjVweDtcclxufVxyXG4uY29udGFpbiB7XHJcbiAgaGVpZ2h0OiAxNXB4O1xyXG4gIGJvcmRlci1yYWRpdXM6IDIwcHg7XHJcbiAgbWFyZ2luOiBhdXRvO1xyXG4gIGJhY2tncm91bmQtY29sb3I6ICM3ZDdkN2Q7XHJcbn1cclxuLmdyZXktYmFja2dyb3VuZCB7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZiZmJmYjtcclxuICBib3JkZXItcmFkaXVzOiA1cHg7XHJcbiAgcGFkZGluZzogOHB4IDIwcHg7XHJcbn1cclxuLm1iLTUwIHtcclxuICBtYXJnaW4tYm90dG9tOiA1MHB4O1xyXG59XHJcbi55QWN0aXZlIHtcclxuICB3aWR0aDogMzUlO1xyXG4gIGhlaWdodDogMTAwJTtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7XHJcbiAgYm9yZGVyLXJhZGl1czogMjBweDtcclxufVxyXG4udG9wLTUge1xyXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICB0b3A6IDVweDtcclxufVxyXG5cclxuLmF1dG9jb21wbGV0ZS1pdGVtcyB7XHJcbiAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gIGJvcmRlcjogMXB4IHNvbGlkICM4ZDhiOGI7XHJcbiAgYm9yZGVyLWJvdHRvbTogbm9uZTtcclxuICBib3JkZXItdG9wOiBub25lO1xyXG4gIHotaW5kZXg6IDk5O1xyXG4gIC8qcG9zaXRpb24gdGhlIGF1dG9jb21wbGV0ZSBpdGVtcyB0byBiZSB0aGUgc2FtZSB3aWR0aCBhcyB0aGUgY29udGFpbmVyOiovXHJcbiAgdG9wOiAxMDAlO1xyXG4gIGxlZnQ6IDA7XHJcbiAgcmlnaHQ6IDA7XHJcbn1cclxuXHJcbi5tb3JlLW9wdGlvbnMge1xyXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxufVxyXG4ubW9yZS1vcHRpb25zIC5pY29uIHtcclxuICB3aWR0aDogMjBweDtcclxuICBoZWlnaHQ6IDIwcHg7XHJcbn1cclxuLm1vcmUtb3B0aW9ucy1saW5rIHtcclxuICBjdXJzb3I6IHBvaW50ZXI7XHJcbn1cclxuLm1vcmUtb3B0aW9ucy1tZW51IHtcclxuICB0ZXh0LWFsaWduOiByaWdodDtcclxuICBtaW4td2lkdGg6IDEzMHB4O1xyXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xyXG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XHJcbiAgYm94LXNoYWRvdzogMHB4IDJweCAxMnB4ICMwMDAwMDAxNztcclxuICB6LWluZGV4OiA5O1xyXG4gIGRpc3BsYXk6IG5vbmU7XHJcbiAgcGFkZGluZzogMTVweCAxNXB4O1xyXG59XHJcbi5tb3JlLW9wdGlvbnMtbWVudSBhIHtcclxuICBkaXNwbGF5OiBibG9jayAhaW1wb3J0YW50O1xyXG4gIGZvbnQtc2l6ZTogMTFweDtcclxuICBtYXJnaW4tYm90dG9tOiA3cHggIWltcG9ydGFudDtcclxuICBmb250LWZhbWlseTogdmFyKC0tYm9sZC1mb250KTtcclxufVxyXG4ubW9yZS1vcHRpb25zLW1lbnUgYTpsYXN0LWNoaWxkIHtcclxuICBtYXJnaW4tYm90dG9tOiAwcHggIWltcG9ydGFudDtcclxufVxyXG4ubW9yZS1vcHRpb25zLW1lbnUgYTpob3ZlciB7XHJcbiAgY29sb3I6IHZhcigtLWJsdWUtY29sb3IpO1xyXG59XHJcblxyXG4udy05MCB7XHJcbiAgd2lkdGg6IDkwJTtcclxufVxyXG4uZy01LnJvdyA+ICosXHJcbi5nLTUucm93IHtcclxuICBtYXJnaW4tdG9wOiAwcHg7XHJcbn1cclxuQG1lZGlhIChtaW4td2lkdGg6IDk5MS45OHB4KSB7XHJcbiAgLnctbGctNzUge1xyXG4gICAgd2lkdGg6IDc1JSAhaW1wb3J0YW50O1xyXG4gIH1cclxuICAudy1sZy04MCB7XHJcbiAgICB3aWR0aDogODAlICFpbXBvcnRhbnQ7XHJcbiAgfVxyXG4gIC53LWxnLTUwIHtcclxuICAgIHdpZHRoOiA1MCUgIWltcG9ydGFudDtcclxuICB9XHJcbiAgIC53LWxnLWF1dG97XHJcbiAgICAgIHdpZHRoOiBhdXRvICFpbXBvcnRhbnQ7XHJcbiAgfVxyXG59XHJcbkBtZWRpYSAobWluLXdpZHRoOiA3NjhweCkgYW5kIChtYXgtd2lkdGg6IDk5MS45OHB4KSB7XHJcbiAgLnctbWQtNzUge1xyXG4gICAgd2lkdGg6IDc1JSAhaW1wb3J0YW50O1xyXG4gIH1cclxuXHJcbiAgLnctbWQtODAge1xyXG4gICAgd2lkdGg6IDgwJSAhaW1wb3J0YW50O1xyXG4gIH1cclxuXHJcbiAgLnctbWQtNTAge1xyXG4gICAgd2lkdGg6IDUwJSAhaW1wb3J0YW50O1xyXG4gIH1cclxuICAudy1tZC1hdXRve1xyXG4gICAgICB3aWR0aDogYXV0byAhaW1wb3J0YW50O1xyXG4gIH1cclxufVxyXG5AbWVkaWEgKG1heC13aWR0aDogMTE5OS45OHB4KSB7XHJcbiAgLm1vcmUtb3B0aW9ucy1tZW51IHtcclxuICAgIC8qbGVmdDogMDtcclxuICAgICAgICByaWdodDogYXV0bzsqL1xyXG4gIH1cclxufVxyXG5AbWVkaWEgKG1heC13aWR0aDogNTY3cHgpIHtcclxuICAgIC53LTE1MHB4IHtcclxuICAgICAgICB3aWR0aDogMTAwcHggIWltcG9ydGFudDtcclxuICAgIH1cclxuXHJcbn0iXSwiZmlsZSI6Im1haW4vZ2VuZXJhbC9jb21tb24uY3NzIn0= */
/* .form-input.required:lang(en) .form-label:after{right: -13px;left: auto;} */
.form-input.required:lang(en) .form-label:after {
  content: "*";
  position: static !important;
}


.tc-content2 h3 {
  font-size: 12px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 16.8px;
  color: #4B5563;
}

.main-page:lang(en) {
  direction: ltr;
}

.dashboard-card-header {
  background-color: #006d7f !important;
  color: #fff !important;
}

a:not(.btn) {
  color: #00A287 !important;
}

a.nav-link.active:not(.btn,.tab-header) {
  color: #fff !important;
}

.btn {
  border-radius: 16px !important;
}