@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@75..125,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@75..125,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@75..125,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@75..125,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@75..125,100..900&display=swap");
.m0 {
  margin: 0px;
}

.mt0 {
  margin-top: 0px;
}

.mr0 {
  margin-right: 0px;
}

.mb0 {
  margin-bottom: 0px;
}

.ml0 {
  margin-left: 0px;
}

.mtb0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.mrl0 {
  margin-right: 0px;
  margin-left: 0px;
}

.m5 {
  margin: 5px;
}

.mt5 {
  margin-top: 5px;
}

.mr5 {
  margin-right: 5px;
}

.mb5 {
  margin-bottom: 5px;
}

.ml5 {
  margin-left: 5px;
}

.mtb5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.mrl5 {
  margin-right: 5px;
  margin-left: 5px;
}

.m10 {
  margin: 10px;
}

.mt10 {
  margin-top: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.ml10 {
  margin-left: 10px;
}

.mtb10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mrl10 {
  margin-right: 10px;
  margin-left: 10px;
}

.m15 {
  margin: 15px;
}

.mt15 {
  margin-top: 15px;
}

.mr15 {
  margin-right: 15px;
}

.mb15 {
  margin-bottom: 15px;
}

.ml15 {
  margin-left: 15px;
}

.mtb15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.mrl15 {
  margin-right: 15px;
  margin-left: 15px;
}

.m20 {
  margin: 20px;
}

.mt20 {
  margin-top: 20px;
}

.mr20 {
  margin-right: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml20 {
  margin-left: 20px;
}

.mtb20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mrl20 {
  margin-right: 20px;
  margin-left: 20px;
}

.m25 {
  margin: 25px;
}

.mt25 {
  margin-top: 25px;
}

.mr25 {
  margin-right: 25px;
}

.mb25 {
  margin-bottom: 25px;
}

.ml25 {
  margin-left: 25px;
}

.mtb25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.mrl25 {
  margin-right: 25px;
  margin-left: 25px;
}

.m30 {
  margin: 30px;
}

.mt30 {
  margin-top: 30px;
}

.mr30 {
  margin-right: 30px;
}

.mb30 {
  margin-bottom: 30px;
}

.ml30 {
  margin-left: 30px;
}

.mtb30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.mrl30 {
  margin-right: 30px;
  margin-left: 30px;
}

.m35 {
  margin: 35px;
}

.mt35 {
  margin-top: 35px;
}

.mr35 {
  margin-right: 35px;
}

.mb35 {
  margin-bottom: 35px;
}

.ml35 {
  margin-left: 35px;
}

.mtb35 {
  margin-top: 35px;
  margin-bottom: 35px;
}

.mrl35 {
  margin-right: 35px;
  margin-left: 35px;
}

.m40 {
  margin: 40px;
}

.mt40 {
  margin-top: 40px;
}

.mr40 {
  margin-right: 40px;
}

.mb40 {
  margin-bottom: 40px;
}

.ml40 {
  margin-left: 40px;
}

.mtb40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mrl40 {
  margin-right: 40px;
  margin-left: 40px;
}

.m45 {
  margin: 45px;
}

.mt45 {
  margin-top: 45px;
}

.mr45 {
  margin-right: 45px;
}

.mb45 {
  margin-bottom: 45px;
}

.ml45 {
  margin-left: 45px;
}

.mtb45 {
  margin-top: 45px;
  margin-bottom: 45px;
}

.mrl45 {
  margin-right: 45px;
  margin-left: 45px;
}

.m50 {
  margin: 50px;
}

.mt50 {
  margin-top: 50px;
}

.mr50 {
  margin-right: 50px;
}

.mb50 {
  margin-bottom: 50px;
}

.ml50 {
  margin-left: 50px;
}

.mtb50 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.mrl50 {
  margin-right: 50px;
  margin-left: 50px;
}

.m55 {
  margin: 55px;
}

.mt55 {
  margin-top: 55px;
}

.mr55 {
  margin-right: 55px;
}

.mb55 {
  margin-bottom: 55px;
}

.ml55 {
  margin-left: 55px;
}

.mtb55 {
  margin-top: 55px;
  margin-bottom: 55px;
}

.mrl55 {
  margin-right: 55px;
  margin-left: 55px;
}

.m60 {
  margin: 60px;
}

.mt60 {
  margin-top: 60px;
}

.mr60 {
  margin-right: 60px;
}

.mb60 {
  margin-bottom: 60px;
}

.ml60 {
  margin-left: 60px;
}

.mtb60 {
  margin-top: 60px;
  margin-bottom: 60px;
}

.mrl60 {
  margin-right: 60px;
  margin-left: 60px;
}

@media screen and (max-width: 768px) {
  .m-xs-0 {
    margin: 0px;
  }
  .m-xs-t0 {
    margin-top: 0px;
  }
  .m-xs-r0 {
    margin-right: 0px;
  }
  .m-xs-b0 {
    margin-bottom: 0px;
  }
  .m-xs-l0 {
    margin-left: 0px;
  }
  .m-xs-tb0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .m-xs-rl0 {
    margin-right: 0px;
    margin-left: 0px;
  }
  .m-xs-5 {
    margin: 5px;
  }
  .m-xs-t5 {
    margin-top: 5px;
  }
  .m-xs-r5 {
    margin-right: 5px;
  }
  .m-xs-b5 {
    margin-bottom: 5px;
  }
  .m-xs-l5 {
    margin-left: 5px;
  }
  .m-xs-tb5 {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .m-xs-rl5 {
    margin-right: 5px;
    margin-left: 5px;
  }
  .m-xs-10 {
    margin: 10px;
  }
  .m-xs-t10 {
    margin-top: 10px;
  }
  .m-xs-r10 {
    margin-right: 10px;
  }
  .m-xs-b10 {
    margin-bottom: 10px;
  }
  .m-xs-l10 {
    margin-left: 10px;
  }
  .m-xs-tb10 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .m-xs-rl10 {
    margin-right: 10px;
    margin-left: 10px;
  }
  .m-xs-15 {
    margin: 15px;
  }
  .m-xs-t15 {
    margin-top: 15px;
  }
  .m-xs-r15 {
    margin-right: 15px;
  }
  .m-xs-b15 {
    margin-bottom: 15px;
  }
  .m-xs-l15 {
    margin-left: 15px;
  }
  .m-xs-tb15 {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .m-xs-rl15 {
    margin-right: 15px;
    margin-left: 15px;
  }
  .m-xs-20 {
    margin: 20px;
  }
  .m-xs-t20 {
    margin-top: 20px;
  }
  .m-xs-r20 {
    margin-right: 20px;
  }
  .m-xs-b20 {
    margin-bottom: 20px;
  }
  .m-xs-l20 {
    margin-left: 20px;
  }
  .m-xs-tb20 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .m-xs-rl20 {
    margin-right: 20px;
    margin-left: 20px;
  }
  .m-xs-25 {
    margin: 25px;
  }
  .m-xs-t25 {
    margin-top: 25px;
  }
  .m-xs-r25 {
    margin-right: 25px;
  }
  .m-xs-b25 {
    margin-bottom: 25px;
  }
  .m-xs-l25 {
    margin-left: 25px;
  }
  .m-xs-tb25 {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .m-xs-rl25 {
    margin-right: 25px;
    margin-left: 25px;
  }
  .m-xs-30 {
    margin: 30px;
  }
  .m-xs-t30 {
    margin-top: 30px;
  }
  .m-xs-r30 {
    margin-right: 30px;
  }
  .m-xs-b30 {
    margin-bottom: 30px;
  }
  .m-xs-l30 {
    margin-left: 30px;
  }
  .m-xs-tb30 {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .m-xs-rl30 {
    margin-right: 30px;
    margin-left: 30px;
  }
  .m-xs-35 {
    margin: 35px;
  }
  .m-xs-t35 {
    margin-top: 35px;
  }
  .m-xs-r35 {
    margin-right: 35px;
  }
  .m-xs-b35 {
    margin-bottom: 35px;
  }
  .m-xs-l35 {
    margin-left: 35px;
  }
  .m-xs-tb35 {
    margin-top: 35px;
    margin-bottom: 35px;
  }
  .m-xs-rl35 {
    margin-right: 35px;
    margin-left: 35px;
  }
  .m-xs-40 {
    margin: 40px;
  }
  .m-xs-t40 {
    margin-top: 40px;
  }
  .m-xs-r40 {
    margin-right: 40px;
  }
  .m-xs-b40 {
    margin-bottom: 40px;
  }
  .m-xs-l40 {
    margin-left: 40px;
  }
  .m-xs-tb40 {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .m-xs-rl40 {
    margin-right: 40px;
    margin-left: 40px;
  }
  .m-xs-45 {
    margin: 45px;
  }
  .m-xs-t45 {
    margin-top: 45px;
  }
  .m-xs-r45 {
    margin-right: 45px;
  }
  .m-xs-b45 {
    margin-bottom: 45px;
  }
  .m-xs-l45 {
    margin-left: 45px;
  }
  .m-xs-tb45 {
    margin-top: 45px;
    margin-bottom: 45px;
  }
  .m-xs-rl45 {
    margin-right: 45px;
    margin-left: 45px;
  }
  .m-xs-50 {
    margin: 50px;
  }
  .m-xs-t50 {
    margin-top: 50px;
  }
  .m-xs-r50 {
    margin-right: 50px;
  }
  .m-xs-b50 {
    margin-bottom: 50px;
  }
  .m-xs-l50 {
    margin-left: 50px;
  }
  .m-xs-tb50 {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .m-xs-rl50 {
    margin-right: 50px;
    margin-left: 50px;
  }
  .m-xs-55 {
    margin: 55px;
  }
  .m-xs-t55 {
    margin-top: 55px;
  }
  .m-xs-r55 {
    margin-right: 55px;
  }
  .m-xs-b55 {
    margin-bottom: 55px;
  }
  .m-xs-l55 {
    margin-left: 55px;
  }
  .m-xs-tb55 {
    margin-top: 55px;
    margin-bottom: 55px;
  }
  .m-xs-rl55 {
    margin-right: 55px;
    margin-left: 55px;
  }
  .m-xs-60 {
    margin: 60px;
  }
  .m-xs-t60 {
    margin-top: 60px;
  }
  .m-xs-r60 {
    margin-right: 60px;
  }
  .m-xs-b60 {
    margin-bottom: 60px;
  }
  .m-xs-l60 {
    margin-left: 60px;
  }
  .m-xs-tb60 {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .m-xs-rl60 {
    margin-right: 60px;
    margin-left: 60px;
  }
}
.p0 {
  padding: 0px;
}

.pt0 {
  padding-top: 0px;
}

.pr0 {
  padding-right: 0px;
}

.pb0 {
  padding-bottom: 0px;
}

.pl0 {
  padding-left: 0px;
}

.ptb0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.prl0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.p5 {
  padding: 5px;
}

.pt5 {
  padding-top: 5px;
}

.pr5 {
  padding-right: 5px;
}

.pb5 {
  padding-bottom: 5px;
}

.pl5 {
  padding-left: 5px;
}

.ptb5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.prl5 {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.p10 {
  padding: 10px;
}

.pt10 {
  padding-top: 10px;
}

.pr10 {
  padding-right: 10px;
}

.pb10 {
  padding-bottom: 10px;
}

.pl10 {
  padding-left: 10px;
}

.ptb10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.prl10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.p15 {
  padding: 15px;
}

.pt15 {
  padding-top: 15px;
}

.pr15 {
  padding-right: 15px;
}

.pb15 {
  padding-bottom: 15px;
}

.pl15 {
  padding-left: 15px;
}

.ptb15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.prl15 {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.p20 {
  padding: 20px;
}

.pt20 {
  padding-top: 20px;
}

.pr20 {
  padding-right: 20px;
}

.pb20 {
  padding-bottom: 20px;
}

.pl20 {
  padding-left: 20px;
}

.ptb20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.prl20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.p25 {
  padding: 25px;
}

.pt25 {
  padding-top: 25px;
}

.pr25 {
  padding-right: 25px;
}

.pb25 {
  padding-bottom: 25px;
}

.pl25 {
  padding-left: 25px;
}

.ptb25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.prl25 {
  padding-left: 25px !important;
  padding-right: 25px !important;
}

.p30 {
  padding: 30px;
}

.pt30 {
  padding-top: 30px;
}

.pr30 {
  padding-right: 30px;
}

.pb30 {
  padding-bottom: 30px;
}

.pl30 {
  padding-left: 30px;
}

.ptb30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.prl30 {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.p35 {
  padding: 35px;
}

.pt35 {
  padding-top: 35px;
}

.pr35 {
  padding-right: 35px;
}

.pb35 {
  padding-bottom: 35px;
}

.pl35 {
  padding-left: 35px;
}

.ptb35 {
  padding-top: 35px;
  padding-bottom: 35px;
}

.prl35 {
  padding-left: 35px !important;
  padding-right: 35px !important;
}

.p40 {
  padding: 40px;
}

.pt40 {
  padding-top: 40px;
}

.pr40 {
  padding-right: 40px;
}

.pb40 {
  padding-bottom: 40px;
}

.pl40 {
  padding-left: 40px;
}

.ptb40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.prl40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.p45 {
  padding: 45px;
}

.pt45 {
  padding-top: 45px;
}

.pr45 {
  padding-right: 45px;
}

.pb45 {
  padding-bottom: 45px;
}

.pl45 {
  padding-left: 45px;
}

.ptb45 {
  padding-top: 45px;
  padding-bottom: 45px;
}

.prl45 {
  padding-left: 45px !important;
  padding-right: 45px !important;
}

.p50 {
  padding: 50px;
}

.pt50 {
  padding-top: 50px;
}

.pr50 {
  padding-right: 50px;
}

.pb50 {
  padding-bottom: 50px;
}

.pl50 {
  padding-left: 50px;
}

.ptb50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.prl50 {
  padding-left: 50px !important;
  padding-right: 50px !important;
}

.p55 {
  padding: 55px;
}

.pt55 {
  padding-top: 55px;
}

.pr55 {
  padding-right: 55px;
}

.pb55 {
  padding-bottom: 55px;
}

.pl55 {
  padding-left: 55px;
}

.ptb55 {
  padding-top: 55px;
  padding-bottom: 55px;
}

.prl55 {
  padding-left: 55px !important;
  padding-right: 55px !important;
}

.p60 {
  padding: 60px;
}

.pt60 {
  padding-top: 60px;
}

.pr60 {
  padding-right: 60px;
}

.pb60 {
  padding-bottom: 60px;
}

.pl60 {
  padding-left: 60px;
}

.ptb60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.prl60 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

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

body {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  background: #F5F7FA;
}
body.purple-theme {
  background: #f4f2f7;
}
body.blue-theme {
  background: #e7f1f4;
}

.position_relative {
  position: relative;
}

.parent-portal-container::-webkit-scrollbar {
  width: 15px;
  scrollbar-width: 15px !important;
  height: 15px;
}

.scrollable-section::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(170, 170, 170, 0.5);
  border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(170, 170, 170, 0.8);
}

.main_heading {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #0A1E3E;
  margin-bottom: 15px;
}
.arabic .main_heading {
  text-align: right;
}

.sub_main_heading {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  font-weight: normal;
  color: #0A1E3E;
  margin-bottom: 15px;
}
.arabic .sub_main_heading {
  text-align: right;
}

.a {
  stroke-width: 0.5px !important;
}

.sub_heading {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #00A3E0;
  margin-bottom: 15px;
  line-height: 100%;
}
.arabic .sub_heading {
  text-align: right;
}

.page-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .page-title {
    padding-top: 20px;
  }
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:focus {
  outline: none;
}

.font-weight-bold {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}

.hidden-filters,
.hide-filters {
  display: none;
}

.main-content-heading {
  color: #0A1E3E;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-weight: normal;
  font-size: 1.375rem;
}

.mt40 {
  margin-top: 40px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.max_width_50 {
  max-width: 50% !important;
}
@media screen and (max-width: 768px) {
  .max_width_50 {
    max-width: 100% !important;
  }
}

.max_width_40 {
  max-width: 40% !important;
}

.max_width_35 {
  max-width: 35%;
}
@media screen and (max-width: 768px) {
  .max_width_35 {
    max-width: 100% !important;
  }
}

.max_width_60 {
  max-width: 60% !important;
}
@media screen and (max-width: 768px) {
  .max_width_60 {
    max-width: 100% !important;
  }
}

.hr-line {
  position: relative;
  border-top: 1px solid #dfe2eb;
  margin-top: 5px;
  padding-top: 18px;
}
.hr-line.mt15 {
  margin-top: 15px;
}
.hr-line.mt20 {
  margin-top: 20px;
}
.hr-line.mb0 {
  margin-bottom: 0;
}
.hr-line.mt0 {
  margin-top: 0;
}
.hr-line.pt0 {
  padding-top: 0;
}
.hr-line.mb5 {
  margin-bottom: 5px;
}
.hr-line.dashed {
  border-top: 2px dashed #b9becc;
}

.border-5 {
  border: 5px solid;
}

label {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
}
.arabic label {
  text-align: right;
}

.regular-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
}

.semibold-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
}

.medium-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
}

.light-text {
  color: #69738d !important;
}

.font11 {
  font-size: 0.6875rem !important;
}

.font12 {
  font-size: 0.75rem !important;
}

.font13 {
  font-size: 0.8125rem !important;
}

.font14 {
  font-size: 0.875rem !important;
}

.font17 {
  font-size: 1.0625rem !important;
}

.font18 {
  font-size: 1.125rem !important;
}

.font24 {
  font-size: 1.5rem !important;
}

.vertical-line {
  width: 0;
  height: 80px;
  border-right: 1px solid rgba(185, 190, 204, 0.5);
}

.button-group-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
}
.button-group-action .button {
  margin-bottom: 0;
}
.button-group-action .button:last-child {
  margin-right: 0;
  margin-left: 15px;
}
@media screen and (max-width: 768px) {
  .button-group-action {
    justify-content: flex-end;
    display: block;
    text-align: center;
  }
  .button-group-action .button {
    min-width: auto;
  }
  .button-group-action .button:last-child {
    margin-left: 0px;
  }
}
.button-group-action.more-actions {
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .button-group-action.more-actions {
    flex-direction: column;
  }
  .button-group-action.more-actions .button {
    margin-bottom: 10px;
    width: 100%;
  }
}
.button-group-action.no-border {
  border-top: 0;
}

a {
  /*  color: #8dc24c; */
  transition: all 150ms;
  color: #68788E;
}
a:hover {
  color: #525f71;
}

.theme-bg {
  background-color: #b9becc;
}

.theme-border {
  border-color: #b9becc;
}

.white-bg {
  background-color: white;
}

.grey-bg {
  background-color: #e9ecf7;
}

.theme-color {
  color: #b9becc;
}

.text-blue {
  color: #61acd5;
}

.text_capitalized {
  text-transform: capitalize !important;
}

.min-width-150 {
  min-width: 150px;
}

.page-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding-top: 10px;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .page-heading {
    flex-wrap: wrap;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 7px;
  }
}
.page-heading .page-actions .button:last-child {
  margin-right: 0;
}
.arabic .page-heading .page-actions .button:last-child {
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .page-heading .page-actions {
    padding-top: 5px;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .page-heading {
    min-height: auto;
  }
}

.page-subheading {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
}
.arabic .page-subheading {
  text-align: right;
}

.radio-btn-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  padding-bottom: 5px;
}
.arabic .radio-btn-title {
  text-align: right;
}
.radio-btn-title.adjustment-label {
  margin-bottom: -9px;
  padding-bottom: 0;
}
.radio-btn-title.pb10 {
  padding-bottom: 10px;
}

.page-content-container {
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #D8DFED;
  margin-bottom: 30px;
  padding: 20px;
  min-height: calc(100vh - 100px) !important;
}
.arabic .page-content-container.quick-links {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .page-content-container {
    padding: 15px;
  }
}

.svg-20 {
  width: 20px;
  height: 20px;
}

.svg-15 {
  width: 15px;
  height: 15px;
}

.svg-w-12 {
  width: 12px;
}

.svg.grey-fill path {
  fill: #69738d;
}
.svg.grey-stroke path {
  stroke: #69738d;
}

.shadow {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.12) !important;
}

.img-thumbnail {
  border: none !important;
}

.disabled-selected-options {
  background-color: #f4f4f7;
  border-radius: 6px;
  height: 40px;
  padding-right: 15px;
  padding-left: 15px;
}
.disabled-selected-options .option {
  background-color: #b9becc;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  height: 20px;
  line-height: 20px;
  margin-top: 10px;
  margin-right: 5px;
  padding-right: 5px;
  padding-left: 5px;
}
.disabled-selected-options .option i {
  cursor: pointer;
}

.wysibb {
  border-color: #dfe2eb;
}
.wysibb .wysibb-toolbar {
  border-bottom-color: #dfe2eb;
}
.arabic .wysibb .wysibb-toolbar {
  display: flex;
  padding-right: 0;
}
@media screen and (max-width: 768px) {
  .wysibb .wysibb-toolbar {
    max-height: 300px !important;
  }
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn .btn-tooltip ins {
  text-decoration: none !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-bold .btn-tooltip {
  width: 80px !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-bold .btn-tooltip ins .tthotkey {
  position: absolute;
  top: -28px;
  right: -60px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-italic .btn-tooltip {
  width: 75px !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-italic .btn-tooltip ins .tthotkey {
  position: absolute;
  top: -28px;
  right: -55px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-underline .btn-tooltip {
  width: 110px !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-underline .btn-tooltip ins .tthotkey {
  position: absolute;
  top: -28px;
  right: -90px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-img .btn-tooltip {
  width: 150px !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-img .btn-tooltip ins .tthotkey {
  position: absolute;
  top: -28px;
  right: -127px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-link .btn-tooltip {
  width: 110px !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-link .btn-tooltip ins .tthotkey {
  position: absolute;
  top: -28px;
  right: -85px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-quote .btn-tooltip {
  width: 112px !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-quote .btn-tooltip ins .tthotkey {
  position: absolute;
  top: -28px;
  right: -90px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-code .btn-tooltip {
  width: 112px !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.wbb-code .btn-tooltip ins .tthotkey {
  position: absolute;
  top: -28px;
  right: -90px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn:hover {
  background-color: #b9becc !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn:hover .fonticon,
.wysibb .wysibb-toolbar .wysibb-toolbar-btn:hover .val,
.wysibb .wysibb-toolbar .wysibb-toolbar-btn:hover .btn-inner {
  color: #fff !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn:active {
  background-color: #b9becc !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn:active .fonticon {
  color: #fff !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn:focus {
  outline: none;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.on {
  background-color: #b9becc !important;
  border-color: #b9becc !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.on .fonticon,
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.on .val,
.wysibb .wysibb-toolbar .wysibb-toolbar-btn.on .btn-inner {
  color: #fff !important;
}
.arabic .wysibb .wysibb-text {
  text-align: right;
}
.wysibb .wysibb-text-editor {
  min-height: 170px !important;
}
@media screen and (max-width: 768px) {
  .wysibb .wysibb-text-editor {
    min-height: 300px !important;
    padding: 5px;
  }
}

.width50 {
  width: 50%;
}

.width60 {
  width: 60%;
}

.width70 {
  width: 70%;
}

.width30 {
  width: 30%;
}

.justify-content-evenly {
  -ms-flex-pack: distribute !important;
  justify-content: space-evenly !important;
}

.payment_filters {
  justify-content: space-between;
  padding: 15px 0;
}
.payment_filters label {
  margin-bottom: 0;
}
.payment_filters .filters {
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  .payment_filters .filters {
    display: block;
  }
}
.payment_filters .filters .custom-input .title {
  margin-bottom: 0;
}

.phoenix-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999999;
}
.phoenix-loader img {
  height: 64px;
  width: 64px;
}

.button-align {
  margin-top: 25px;
}
@media screen and (max-width: 768px) {
  .button-align {
    margin-top: 0;
  }
}
.button-align.mt23 {
  margin-top: 23px;
}
@media screen and (max-width: 768px) {
  .button-align.mt23 {
    margin-top: 0;
  }
}

.table-filter-control {
  position: absolute;
  right: 330px;
  z-index: 99;
}
.arabic .table-filter-control {
  right: auto !important;
  left: 330px !important;
}
@media screen and (max-width: 768px) {
  .arabic .table-filter-control {
    right: 0;
    left: auto;
  }
}
.table-filter-control .custom-input {
  align-items: center;
  display: inline-flex;
  margin-right: 30px;
}
.arabic .table-filter-control .custom-input {
  margin-right: 0;
  margin-left: 30px;
}
.table-filter-control .custom-input:nth-child(1):after, .table-filter-control .custom-input:nth-child(2):after {
  content: "";
  background-color: #b9becc;
  height: calc(100% - 6px);
  position: absolute;
  top: 3px;
  right: -20px;
  width: 1px;
}
.arabic .table-filter-control .custom-input:nth-child(1):before, .arabic .table-filter-control .custom-input:nth-child(2):before {
  content: "";
  background-color: #b9becc;
  height: calc(100% - 6px);
  position: absolute;
  top: 3px;
  left: -20px;
  width: 1px;
}
@media screen and (max-width: 768px) {
  .arabic .table-filter-control .custom-input:nth-child(1):before, .arabic .table-filter-control .custom-input:nth-child(2):before {
    display: none;
  }
}
.arabic .table-filter-control .custom-input:nth-child(1):after, .arabic .table-filter-control .custom-input:nth-child(2):after {
  display: none;
}
.table-filter-control .custom-input .select {
  align-items: center;
  display: inline-flex;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .table-filter-control .custom-input {
    margin-right: 0;
  }
}
.table-filter-control .title {
  padding-right: 15px;
  color: #69738d;
}
.arabic .table-filter-control .title {
  padding-left: 15px;
  padding-right: 0;
}
.table-filter-control .options {
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .table-filter-control {
    top: 0;
    left: 0;
    width: 100%;
  }
  .table-filter-control .title {
    padding-right: 10px;
  }
  .table-filter-control .custom-input:after {
    content: none !important;
  }
}

.table-data-container {
  position: relative;
}

.toast {
  background-color: rgba(250, 79, 79, 0.8);
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  opacity: 1;
  position: fixed;
  top: 60px;
  right: 35px;
  width: 100%;
  z-index: 999;
}
.toast .toast-body {
  padding-top: 20px;
  padding-bottom: 20px;
}
.toast.error {
  background-color: rgba(250, 79, 79, 0.8);
}
.toast.warning {
  background-color: rgba(250, 162, 40, 0.8);
}
@media screen and (max-width: 768px) {
  .toast {
    right: 0;
  }
  .toast .toast-body {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.small_heading {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: #0A1E3E;
  margin-bottom: 15px;
}

.theme-text-color {
  color: #b9becc;
}

.black-text-color {
  color: #002B64 !important;
}

.float_left {
  float: left;
}

.dataTables_scrollBody {
  overflow: visible !important;
}
.dataTables_scrollBody::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: rgba(185, 190, 204, 0.5);
  border-radius: 4px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: rgba(185, 190, 204, 0.8);
}

@media screen and (max-width: 768px) {
  .mbr10 {
    margin-bottom: 10px !important;
  }
}

.mrgn_top_5 {
  margin-top: -5px;
}

.mrgn_top_10 {
  margin-top: -10px;
}

.mrgn_top_15 {
  margin-top: -15px;
}

.mrgn_top_20 {
  margin-top: -20px;
}

.mrgn_bottom_5 {
  margin-bottom: -5px;
}

.mrgn_bottom_10 {
  margin-bottom: -10px;
}

.mrgn_bottom_15 {
  margin-bottom: -15px;
}

.mrgn_bottom_20 {
  margin-bottom: -20px;
}

.width-100 {
  width: 100px;
}

.width-160 {
  width: 160px;
}

.width-200 {
  width: 200px;
}

.width-250 {
  width: 250px;
}

.margin-right {
  margin-right: 0 !important;
}

.no-fill-svg path {
  fill: rgba(255, 255, 255, 0) !important;
}

.adjust-cross .custom-input .k-state-focused:before {
  display: none;
}
.adjust-cross .custom-input .k-state-focused .k-i-close:before {
  top: 6px;
}

.border-bottom {
  border-bottom: 1px solid #b9becc;
}

.nav-tab-bg {
  background: #fff;
}

.zindex99 {
  z-index: 99 !important;
}

.bar-code-info {
  text-align: center;
}

.mrl-10 {
  margin-right: -10px;
  margin-left: -10px;
}

.arabic .alignRight {
  text-align: right;
}

.modeSwitch {
  right: auto;
  left: 0;
}
.modeSwitch .wysibb-toolbar-btn {
  float: right;
}
.arabic .modeSwitch .wysibb-toolbar-btn {
  float: left;
}

.arabic .close {
  position: absolute;
  right: 15px;
}

.arabic .no-left {
  margin-left: 0 !important;
}

.arabic .align-end {
  justify-content: flex-end;
  display: flex;
}

.arabic .dFlex {
  display: flex;
}

.arabic .flexBetw {
  display: flex;
  justify-content: space-between;
}
.arabic .flexBetw span {
  padding-right: 15px;
}

.arabic .noRight {
  margin-right: 0 !important;
}

.arabic .right15 {
  margin-right: 15px !important;
}

.arabic .filterAlign {
  display: flex;
  flex-direction: row-reverse;
}

.actionPt {
  padding-top: 5px !important;
}

.arabic .reverseIcon {
  transform: rotate(180deg);
  margin-right: 10px;
}

.arabic .alignLeft {
  text-align: left !important;
}

.arabic .amt20 {
  margin-top: 20px;
}

.arabic .amt10 {
  margin-top: 10px;
}

.arabic .aml15 {
  margin-left: 15px !important;
}

.arabic .amr10 {
  margin-right: 10px !important;
}

.arabic .amr15 {
  margin-right: 15px !important;
}

.arabic .amr1 {
  margin-right: 1px !important;
}

.arabic .aml20 {
  margin-left: 20px !important;
  margin-right: 0 !important;
}

.arabic .baml10 {
  margin-left: 10px !important;
  margin-right: 0 !important;
}

.arabic .amr60 {
  margin-right: 60px !important;
}

.modal-ptb0 {
  padding: 0 30px !important;
}

.noWrap {
  white-space: nowrap;
}

.no-border {
  border-bottom: none !important;
}

.noOverflowX {
  overflow-x: visible !important;
}

.search-filter-adjustment {
  position: relative;
}
.search-filter-adjustment .dataTables_filter .form-control {
  width: 250px !important;
}
.search-filter-adjustment.sm-size .dataTables_filter .form-control {
  width: 210px !important;
}
.search-filter-adjustment .export-btn {
  position: absolute;
  top: 10px;
}
.search-filter-adjustment .export-btn .svg {
  margin-right: 10px;
}
.arabic .search-filter-adjustment .export-btn .svg {
  margin-right: 0;
  margin-left: 10px;
}
.arabic .search-filter-adjustment .export-btn {
  right: 0;
}

.no-side-margin {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.no-side-padding {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.actions-column {
  white-space: nowrap;
}
.actions-column button {
  margin-right: 20px;
}
.actions-column button:last-child {
  margin-right: 0;
}
.arabic .actions-column button {
  margin-right: 0;
  margin-left: 20px;
}
.arabic .actions-column button:last-child {
  margin-left: 0;
}

.no-data-found {
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  justify-content: center;
  padding: 30px 15px;
}

.white-box {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  min-height: 246px;
}
.white-box.no-shadow {
  box-shadow: none;
}

.page-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #DFE6F4;
  padding-top: 16px;
}
@media screen and (max-width: 768px) {
  .page-footer {
    bottom: 5px;
    flex-direction: column;
    gap: 12px;
  }
}
.page-footer .gems-logo img {
  height: 32px;
}
.page-footer .terms-social {
  color: #68788E;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  display: flex;
  justify-content: end;
  align-items: end;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .page-footer .terms-social {
    flex-direction: column;
    gap: 8px;
  }
}
.page-footer .terms-social .terms-condition {
  margin-bottom: 6px;
}
.page-footer .terms-social .social-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.page-footer .terms-social .social-icons img {
  width: auto;
  height: 16px;
}
.page-footer .terms-social a {
  color: #68788E;
  text-decoration: none;
}
.page-footer .terms-social a:hover {
  text-decoration: underline;
}

.status_btn {
  border-radius: 6px;
  min-width: 100px;
  height: 30px;
  line-height: 26px;
  display: inline-block;
  text-align: center;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap !important;
  padding: 2px 12px;
}
.status_btn.initiated {
  background: #eaf2ff;
  color: #1667e8;
}
.status_btn.cancel {
  background: #fde5eb;
  color: #fb1e52;
}
.status_btn.completed {
  background: rgba(25, 172, 86, 0.1);
  color: #19AC56;
}
.status_btn.pending {
  background-color: rgba(250, 96, 0, 0.12);
  color: #FA6000;
}

.final_row {
  background: #F4F7FD;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  padding-right: 7%;
  margin-top: 7px;
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
}
.final_row .custom-input {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-right: 15px;
  margin-bottom: 16px;
  margin-left: 15px;
}
.final_row .custom-input label {
  margin-right: 10px;
  margin-bottom: 0;
}
.arabic .final_row .custom-input label {
  margin-right: 0;
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .final_row .custom-input {
    margin-right: 0;
    margin-left: 0;
  }
}

.filter_mobile_space {
  position: relative;
}
@media screen and (max-width: 768px) {
  .filter_mobile_space {
    padding-top: 20px;
  }
}

.form_elements ul {
  overflow: hidden;
  padding: 20px 0 20px 20px;
}
.form_elements ul li {
  list-style: none;
  width: 100%;
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}
.form_elements ul li input {
  border: 1px solid #bbc5c9;
  background: #fff;
  color: #1d4094;
  font-size: 0.75rem;
  border-radius: 8px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  padding: 10px 15px;
  width: 100%;
}
.form_elements ul li .select_box {
  display: block;
}
.form_elements ul li .select_box select {
  width: 100%;
  color: #777c80;
}
.form_elements ul li .custom-input input {
  width: 100%;
}

.terms_check {
  margin: 0 auto;
  display: flex;
  margin-bottom: 20px;
}
.terms_check .custom-checkbox {
  margin: 0;
}
.terms_check .custom-checkbox input:checked ~ label:before {
  background: #00A3E0;
  border-color: #00A3E0;
}
.terms_check p {
  color: #194064;
  font-size: 0.84rem;
  margin: 0;
  padding: 0;
}
.terms_check p a {
  color: #002B64;
}
@media screen and (max-width: 768px) {
  .terms_check {
    display: inline-block;
    width: 100%;
  }
}

.custom-input .textarea-field {
  border-radius: 8px;
  border-color: #BBC5C9;
}
.custom-input .radio-title {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.custom-input .radio-title span {
  display: block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
}

.info_icon {
  background: url("../assets/images/ques_icon.svg") no-repeat left top;
  width: 20px;
  height: 20px;
  background-size: cover;
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}
.arabic .info_icon {
  margin-left: 0;
  margin-right: 10px;
}

.page-top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .page-top-section {
    display: block;
  }
}

.right_section .forgot-password-btn {
  text-align: center;
}

.small-info {
  font-size: 0.75rem;
  background-color: #E6F6FE;
  border-radius: 4px;
  padding: 6px 12px;
  border: 1px solid #E6F6FE;
  display: flex;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #194064;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .small-info {
    margin-bottom: 10px;
    width: 100%;
    font-size: 0.7rem;
    padding: 6px;
    align-items: center;
  }
}
@media screen and (max-width: 1440px) {
  .small-info {
    margin-bottom: 10px;
  }
}
.small-info:last-child {
  margin-right: 0;
}
.small-info .info-img {
  height: 15px;
  display: inline-flex;
  margin-right: 4px;
}
.arabic .small-info .info-img {
  margin-left: 4px;
  margin-right: 0px;
}
.small-info .info-img .svg {
  height: 100%;
}
@media screen and (max-width: 768px) {
  .small-info .info-img {
    margin-right: 6px;
  }
}
.small-info .title-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  margin-right: 5px;
}
@media screen and (max-width: 768px) {
  .small-info .title-text {
    white-space: nowrap;
  }
}
.small-info .info-text {
  color: #436583;
}

.success-msg {
  background-color: #e2fce5;
  border: solid 1px #30c141;
  border-radius: 4px;
  color: #2b913a;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 15px;
  padding: 12px 30px 12px 15px;
}
.success-msg .check-icon {
  background-color: #23c436;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  width: 20px;
}
.success-msg .check-icon img {
  margin-top: -4px;
  margin-left: 4px;
}
.arabic .success-msg .check-icon {
  margin-right: 0;
  margin-left: 10px;
}
.success-msg.show {
  display: flex;
  max-width: 660px;
  width: 100%;
}
.arabic .success-msg {
  padding-right: 15px;
  padding-left: 30px;
}
@media screen and (max-width: 768px) {
  .success-msg {
    font-size: 0.75rem;
    padding-right: 20px;
  }
}

.header-bg-section {
  color: #fff;
  margin-bottom: 20px;
  max-height: 260px;
  position: relative;
  width: 100%;
}
.header-bg-section:after {
  content: "";
  border-radius: 20px;
  display: block;
  height: 260px;
  width: 100%;
}
.header-bg-section .information-details {
  position: absolute;
  top: 50px;
  left: 70px;
  width: 50%;
}
.header-bg-section .information-details .section-heading {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 1.625rem;
  font-weight: normal;
  padding-bottom: 15px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
  .header-bg-section .information-details .section-heading {
    font-size: 1rem;
  }
}
.header-bg-section .information-details .description {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 768px) {
  .header-bg-section .information-details {
    width: 70%;
  }
}
@media screen and (max-width: 768px) {
  .header-bg-section {
    margin-top: 24px;
    padding: 15px 10px;
  }
}

.scrollable-section {
  overflow-x: hidden;
  overflow-y: scroll;
}

.date-payment-info {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
@media screen and (max-width: 768px) {
  .date-payment-info {
    flex-direction: column;
  }
  .date-payment-info .date-info {
    margin-bottom: 10px;
  }
}
.date-payment-info .date-info {
  align-items: center;
  color: #68788E;
  background-color: #F1F6FC;
  border: solid 1px #D9E8F1;
  border-radius: 8px;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  padding: 15px 50px 15px 15px;
}
@media screen and (max-width: 768px) {
  .date-payment-info .date-info {
    padding: 15px !important;
  }
}
.date-payment-info .date-info img {
  margin-right: 10px;
}
.arabic .date-payment-info .date-info img {
  margin-right: 0;
  margin-left: 10px;
}
.date-payment-info .date-info .note-heading {
  color: #002B64;
  font-weight: 600;
  font-size: 0.75rem;
}
.date-payment-info .date-info ul li {
  list-style-type: none;
  padding-left: 16px;
  background: url(./../assets/images/notice-list-icon.png) no-repeat left center transparent;
  margin-bottom: 5px;
}
.arabic .date-payment-info .date-info ul li {
  padding-left: 0;
  padding-right: 15px;
}

.icon-wrap {
  width: 10%;
  display: inline-block;
}

.no-record-found {
  text-align: center;
  font-size: 0.75rem;
  color: #818898;
  padding: 20px 15px;
}

.bootstrap-select {
  width: 100% !important;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 100%;
  min-width: 150px;
}
.bootstrap-select.rounded-1x button[type=button].dropdown-toggle {
  border-radius: 8px !important;
  padding-left: 20px;
  padding-right: 15px;
}
.bootstrap-select.rounded-2x button[type=button].dropdown-toggle {
  border-radius: 16px !important;
  padding-left: 20px;
  padding-right: 15px;
}
.bootstrap-select.rounded-3x button[type=button].dropdown-toggle {
  border-radius: 24px !important;
  padding-left: 20px;
  padding-right: 15px;
}
.bootstrap-select.rounded-4x button[type=button].dropdown-toggle {
  border-radius: 32px !important;
  padding-left: 20px;
  padding-right: 15px;
}
.bootstrap-select.rounded-5x button[type=button].dropdown-toggle {
  border-radius: 40px !important;
  padding-left: 20px;
  padding-right: 15px;
}
.bootstrap-select.rounded-6x button[type=button].dropdown-toggle {
  border-radius: 48px !important;
  padding-left: 20px;
  padding-right: 15px;
}
.bootstrap-select.rounded-7x button[type=button].dropdown-toggle {
  border-radius: 56px !important;
  padding-left: 20px;
  padding-right: 15px;
}
.bootstrap-select.rounded-8x button[type=button].dropdown-toggle {
  border-radius: 64px !important;
  padding-left: 20px;
  padding-right: 15px;
}
.bootstrap-select button {
  margin: 0;
  padding: 10px 15px;
}
.bootstrap-select button[type=button].dropdown-toggle {
  box-shadow: none;
  border-radius: 8px;
  border: solid 1px #C8CCD1;
  padding: 9px 12px;
  text-transform: unset;
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: 400 !important;
  color: #333333;
  min-width: 110px;
  height: 48px;
  line-height: 28px;
}
.bootstrap-select button[type=button].dropdown-toggle:hover {
  color: #333333;
}
.bootstrap-select button[type=button].dropdown-toggle.bs-placeholder {
  color: #757575;
}
.bootstrap-select button[type=button] .filter-option-inner-inner {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
}
.bootstrap-select button.btn-light {
  background-color: #ffffff;
}
.bootstrap-select button.btn-light.dropdown-toggle {
  background-color: #ffffff;
}
.bootstrap-select button.btn:not([disabled]):not(.disabled):active, .bootstrap-select button.btn:not([disabled]):not(.disabled).active {
  box-shadow: none;
  outline: none;
}
.bootstrap-select button.btn:hover, .bootstrap-select button.btn:focus, .bootstrap-select button.btn:active, .bootstrap-select button.btn.focus {
  box-shadow: none !important;
  outline: none !important;
}
.bootstrap-select .bs-actionsbox {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: solid 1px #C8CCD1;
}
.bootstrap-select .bs-actionsbox .btn-group button.actions-btn {
  font-size: 12px;
  padding-left: 5px;
  padding-right: 5px;
}
.bootstrap-select .dropdown-menu {
  z-index: 1031;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 8px;
}
.bootstrap-select .dropdown-menu li {
  width: 100% !important;
  margin-bottom: 0px;
}
.bootstrap-select .dropdown-menu li a {
  font-size: 0.75rem;
  color: #585d65;
  font-weight: 400;
  padding: 10px;
}
.bootstrap-select .dropdown-menu li a:hover {
  background: #e3eefd;
}
.bootstrap-select .dropdown-menu li a.active {
  background: #e3eefd;
}
.bootstrap-select .dropdown-menu li a .text {
  font-weight: 500;
  font-size: -1.25rem;
}
.bootstrap-select .dropdown-menu li.selected .bs-ok-default {
  color: #1e89e5;
}
.bootstrap-select .dropdown-menu li.selected .bs-ok-default:after {
  border-width: 0 2px 2px 0;
  position: relative;
  right: 7px;
  top: 3px;
  width: 0.4em;
  height: 0.65em;
}
.bootstrap-select .dropdown-menu li.selected .text {
  color: #333333;
}
.bootstrap-select .dropdown-menu li.dropdown-header {
  font-weight: 600;
  color: #002B64;
}
.bootstrap-select.show button.dropdown-toggle {
  border-color: #C8CCD1;
  /* box-shadow: inset 0 0 0 1px $primary-color !important; */
  box-shadow: none !important;
}
.bootstrap-select.show + label {
  color: #354060;
}
.bootstrap-select.small-select {
  width: 105px !important;
  min-width: initial !important;
}
.bootstrap-select.small-select button[type=button].dropdown-toggle {
  padding: 3.5px 10px;
}
.bootstrap-select.small-select button[type=button].dropdown-toggle .filter-option-inner-inner {
  font-weight: 500;
}
.bootstrap-select.small-select .filter-option-inner-inner {
  font-weight: 500;
}
.bootstrap-select #AcademicYear .dropdown-menu {
  min-width: 100% !important;
  width: 100%;
}
@media (max-width: 768px) {
  .bootstrap-select .dropdown-menu {
    min-width: initial !important;
    max-width: 100%;
    width: 100%;
  }
  .bootstrap-select .dropdown-menu.show .dropdown-menu li span.text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bootstrap-select .dropdown-menu.inner {
    max-width: 370px;
  }
  .bootstrap-select.show-tick .dropdown-menu li a span.text {
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bootstrap-select.ddlSchoolGroup .dropdown-menu {
    min-width: initial !important;
  }
  .bootstrap-select.ddlSchoolGroup .dropdown-menu.show .dropdown-menu li span.text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bootstrap-select.ddlSchoolGroup .dropdown-menu.inner {
    max-width: 370px;
  }
  .bootstrap-select.ddlSchoolGroup.show-tick .dropdown-menu li a span.text {
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.bootstrap-select.small:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  min-width: initial;
}
.bootstrap-select.small button[type=button].dropdown-toggle {
  padding: 8px 12px;
}
.bootstrap-select.small .dropdown-toggle:after {
  width: 20px;
}
.bootstrap-select h6 {
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .modal-dialog.max_width_35 {
    width: 90% !important;
    margin: auto;
  }
}
@media screen and (max-width: 768px) {
  .modal-dialog.max_width_50 {
    width: 90% !important;
    margin: auto;
  }
}

.orange-table {
  background: #fff7e2;
  padding: 10px 20px;
  border-radius: 8px;
}
.orange-table table {
  margin-bottom: 0;
}
.orange-table thead th {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.625rem 0.625rem 0.1rem;
  border: none;
}
.orange-table tbody tr {
  border-bottom: solid 1px #E3E3E3;
}
.orange-table tbody tr:last-child {
  border-bottom: none;
}
.orange-table tbody tr td {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  padding: 0.625rem;
  border-top: none;
}
@media screen and (max-width: 768px) {
  .orange-table {
    padding: 5px;
    overflow-x: auto;
  }
}

.dotted-border {
  border: dotted 2px #bbc5c9 !important;
}

.page-notfound-wrapper {
  width: 75%;
}
.page-notfound-wrapper .page-notfound-container {
  margin: auto;
  display: grid;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
}
.page-notfound-wrapper .page-notfound-container .img-bulb {
  text-align: center;
}
.page-notfound-wrapper .page-notfound-container .img-bulb img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .page-notfound-wrapper .page-notfound-container .img-bulb {
    text-align: center;
  }
  .page-notfound-wrapper .page-notfound-container .img-bulb img {
    width: 85%;
  }
}
.page-notfound-wrapper .page-notfound-container .img-four {
  text-align: center;
}
.page-notfound-wrapper .page-notfound-container .img-four img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .page-notfound-wrapper .page-notfound-container .img-four {
    text-align: center;
  }
  .page-notfound-wrapper .page-notfound-container .img-four img {
    width: 65%;
  }
}
.page-notfound-wrapper .page-notfound-container .page-notfound-button {
  text-align: center;
}
.page-notfound-wrapper .page-notfound-container .page-notfound-text {
  text-align: center;
}
.page-notfound-wrapper .page-notfound-container .page-notfound-text h3 {
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .page-notfound-wrapper .page-notfound-container .page-notfound-text h3 {
    font-size: 1rem;
  }
}
.page-notfound-wrapper .page-notfound-container .page-notfound-text .desc-txt {
  color: #a5a6a6;
}

.button {
  align-items: center;
  background-color: transparent;
  border: 1px solid #002B64;
  border-radius: 100px;
  color: #002B64;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  height: 48px;
  min-width: 124px;
  line-height: 48px;
  outline: 0;
  padding-right: 20px;
  padding-left: 20px;
  text-align: center;
  text-transform: capitalize;
  user-select: none;
  white-space: nowrap;
}
.button.small-font {
  font-size: 0.5625rem;
}
.button.fill {
  background-color: #FEDB00;
  border: 1px solid #FEDB00;
  box-shadow: 0px 1px 2px 0px rgba(0, 43, 100, 0.051);
}
.button.fill:hover {
  background: #FFE333;
}
.button.filter {
  background-color: #fff;
  color: #002B64;
}
.button.filter:hover {
  background-color: #F1F6FC;
  color: #002B64;
}
.button.no-radius {
  border-radius: 0;
}
.button.caps-txt {
  text-transform: uppercase;
}
.button.full {
  display: block;
  width: 100%;
}
.button.pending {
  color: #fff;
  background-color: #F5881C;
  border-color: #F5881C;
  font-size: 12px;
}
.button.pending:hover {
  background-color: #c56505;
}
.button.pending i {
  font-size: 12px;
}
.button.approved {
  background-color: #FEDB00;
  border-color: #FEDB00;
}
.button.approved:hover {
  background-color: #FFE333;
}
.button.approved i {
  font-size: 12px;
}
.button.disabled, .button[disabled] {
  background: rgba(254, 219, 0, 0.3);
  border-color: rgba(254, 219, 0, 0.3);
  color: rgba(0, 43, 100, 0.3);
  cursor: default;
}
.button.disabled.fill, .button[disabled].fill {
  background: rgba(254, 219, 0, 0.3);
  border-color: rgba(254, 219, 0, 0.3);
  color: rgba(0, 43, 100, 0.3);
}
.button.disabled.fill:hover, .button[disabled].fill:hover {
  background: rgba(254, 219, 0, 0.3);
  border-color: rgba(254, 219, 0, 0.3);
  color: rgba(0, 43, 100, 0.3);
}
.button.disabled:hover, .button[disabled]:hover {
  background-color: rgba(254, 219, 0, 0.3);
  color: rgba(0, 43, 100, 0.3);
  box-shadow: none;
}
.green-theme .button.disabled:hover, .blue-theme .button.disabled:hover, .purple-theme .button.disabled:hover, .green-theme .button[disabled]:hover, .blue-theme .button[disabled]:hover, .purple-theme .button[disabled]:hover {
  background-color: rgba(254, 219, 0, 0.3);
  color: rgba(0, 43, 100, 0.3);
  box-shadow: none;
}
.button:focus {
  outline: none;
}
.button a {
  color: #002B64;
}

.text-btn {
  align-items: center;
  background-color: transparent;
  border: none;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  color: #b9becc;
}
.text-btn:focus {
  outline: none;
}
.text-btn.theme-color {
  color: #0099eb;
}

.border-btn {
  color: #FEDB00;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  border: 1px solid #FEDB00;
  padding: 8px 15px;
  border-radius: 8px;
  white-space: nowrap;
}
.border-btn:hover {
  color: #FEDB00;
}

.dataTable {
  border: 0;
  width: 100%;
}
.dataTable thead {
  background-color: #F1F6FC;
}
.dataTable thead th {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.625rem !important;
}
.dataTable thead th:nth-child(1) {
  border-radius: 8px 0 0 8px;
}
.arabic .dataTable thead th:nth-child(1) {
  border-radius: 0 8px 8px 0;
}
.dataTable thead th:nth-last-child(1) {
  border-radius: 0 8px 8px 0;
}
.arabic .dataTable thead th:nth-last-child(1) {
  border-radius: 8px 0 0 8px;
}
.dataTable tbody tr {
  background-color: #fff;
}
.dataTable tbody tr td {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.625rem;
}
.arabic .dataTable tbody tr td {
  text-align: right;
}
.dataTable tbody tr td.text-ellipsis-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dataTable tbody tr td.no-wrap-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dataTable tfoot {
  display: none;
}
.dataTable.no-wrap-data td,
.dataTable.no-wrap-data th {
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .dataTable.no-wrap-cell td,
  .dataTable.no-wrap-cell th {
    white-space: nowrap;
  }
}

.dataTables_paginate .pagination {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.dataTables_paginate .pagination .page-item .page-link {
  align-items: center;
  border: 0;
  color: #7182a8;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  justify-content: center;
  line-height: 1;
}
.dataTables_paginate .pagination .page-item .page-link:hover {
  background-color: transparent;
}
.dataTables_paginate .pagination .page-item.active .page-link {
  background-color: #e3eeff;
  border: solid 1.5px #214bac;
  border-radius: 4px;
  color: #214bac;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-weight: normal;
  height: 24px;
  width: 24px;
}
.dataTables_paginate .pagination .page-item.next .page-link, .dataTables_paginate .pagination .page-item.previous .page-link {
  border-radius: 4px;
  border: solid 1.5px #214bac;
  background-color: #e3eeff;
  color: #214bac;
  height: 24px;
  margin-right: 1px;
}
.dataTables_paginate .pagination .page-item.next.disabled, .dataTables_paginate .pagination .page-item.previous.disabled {
  display: none;
}
@media screen and (max-width: 768px) {
  .dataTables_paginate .pagination {
    justify-content: flex-start !important;
  }
}

.dataTables_wrapper {
  overflow-y: auto;
  position: relative;
}
.dataTables_wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.dataTables_wrapper::-webkit-scrollbar-thumb {
  background: rgba(185, 190, 204, 0.5);
  border-radius: 4px;
}
.dataTables_wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(185, 190, 204, 0.8);
}

.scrollable-table {
  overflow-x: auto;
}
.scrollable-table table {
  border-collapse: separate;
  width: 100%;
  border: 0 solid transparent;
  border-spacing: 0 12px;
}
.scrollable-table table thead {
  background-color: #F1F6FC;
}
.scrollable-table table thead th {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 10px;
}
.scrollable-table table thead th:nth-child(1) {
  border-radius: 8px 0 0 8px;
  padding-left: 10px;
}
.arabic .scrollable-table table thead th:nth-child(1) {
  border-radius: 0 8px 8px 0;
  padding-right: 10px;
  margin-left: 0;
}
.scrollable-table table thead th:nth-last-child(1) {
  border-radius: 0 8px 8px 0;
  padding-right: 10px;
}
.arabic .scrollable-table table thead th:nth-last-child(1) {
  border-radius: 8px 0 0 8px;
  padding-left: 10px;
}
@media screen and (max-width: 768px) {
  .scrollable-table table thead th {
    padding-right: 10px;
    padding-left: 10px;
  }
}
.scrollable-table table tbody tr {
  background-color: #fff;
  border: 1px solid #D9E8F1 !important;
}
.scrollable-table table tbody tr:nth-child(even) {
  background-color: #fff;
}
.scrollable-table table tbody tr.total_row td {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
.scrollable-table table tbody tr td {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  padding: 10px;
  border-top: 1px solid #D9E8F1;
  border-bottom: 1px solid #D9E8F1;
}
.scrollable-table table tbody tr td:first-child {
  padding: 10px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-left: 1px solid #D9E8F1;
}
.arabic .scrollable-table table tbody tr td:first-child {
  padding: 10px;
}
.scrollable-table table tbody tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-right: 1px solid #D9E8F1;
}
.arabic .scrollable-table table tbody tr td {
  text-align: right;
}
.scrollable-table table tbody tr td.text-ellipsis-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scrollable-table table tbody tr td.no-wrap-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scrollable-table table tbody tr td input {
  border: 1px solid #b7b7b7;
  border-radius: 48px;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  font-weight: normal;
  padding: 7px 15px;
}
.scrollable-table table tbody tr td input:focus {
  border-color: #389ddc;
  outline: none;
}
.scrollable-table table tbody tr td .info_text {
  color: #389ddc;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  display: block;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .scrollable-table table tbody tr td {
    padding-right: 10px;
    padding-left: 10px;
  }
}
.scrollable-table table tbody tr td.text-gray {
  color: #68788E;
}
@media screen and (max-width: 768px) {
  .scrollable-table table.no-wrap-cell td,
  .scrollable-table table.no-wrap-cell th {
    white-space: nowrap;
  }
}
.scrollable-table::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.scrollable-table::-webkit-scrollbar-thumb {
  background: rgba(185, 190, 204, 0.5);
  border-radius: 4px;
}
.scrollable-table::-webkit-scrollbar-thumb:hover {
  background: rgba(185, 190, 204, 0.8);
}

.custom-table table {
  border-collapse: separate;
  width: 100%;
  border: 0 solid transparent;
  border-spacing: 0 12px;
}
.custom-table table thead {
  background-color: #F1F6FC;
}
.custom-table table thead th {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.625rem;
  line-height: 180%;
}
.custom-table table thead th:last-child {
  padding-right: 10px !important;
}
.custom-table table thead th:nth-child(1) {
  border-radius: 8px 0 0 8px;
  padding-left: 10px !important;
}
.arabic .custom-table table thead th:nth-child(1) {
  border-radius: 0 8px 8px 0;
  padding-right: 10px;
  margin-left: 0;
}
.custom-table table thead th:nth-last-child(1) {
  border-radius: 0 8px 8px 0;
}
.arabic .custom-table table thead th:nth-last-child(1) {
  border-radius: 8px 0 0 8px;
}
@media screen and (max-width: 768px) {
  .custom-table table thead th {
    padding-right: 15px;
    padding-left: 15px;
  }
}
.custom-table table tbody.total_row td {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
.custom-table table tbody td {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.625rem;
  border-top: solid 1px #E3E3E3;
  border-bottom: solid 1px #E3E3E3;
}
.custom-table table tbody td:first-child {
  padding: 10px;
  border-left: solid 1px #E3E3E3;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.arabic .custom-table table tbody td:first-child {
  padding: 10px;
}
.custom-table table tbody td:last-child {
  border-right: solid 1px #E3E3E3;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.arabic .custom-table table tbody td {
  text-align: right;
}
.custom-table table tbody td.text-ellipsis-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-table table tbody td.no-wrap-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-table table tbody td input {
  border: 1px solid #b7b7b7;
  border-radius: 48px;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  font-weight: normal;
  padding: 7px 15px;
}
.custom-table table tbody td input:focus {
  border-color: #389ddc;
  outline: none;
}
.custom-table table tbody td .info_text {
  color: #389ddc;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  display: block;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .custom-table table tbody td {
    padding-right: 15px;
    padding-left: 15px;
  }
}
.custom-table table:before {
  /* This doesn't work because of border-collapse */
  color: white;
  /* bacground color */
  display: block;
}
.custom-table table tfoot {
  background-color: #F4F7FD;
}
.custom-table table tfoot tr {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #0A1E3E;
}
.custom-table table tfoot tr td {
  border: none;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 20px;
}
.custom-table table tfoot tr td .text {
  font-size: 0.8125rem;
  margin-right: 10px;
}
.custom-table table tfoot tr td:last-child {
  font-size: 1.3rem;
  color: #002B64;
}
.custom-table table.dataTable.no-footer {
  border-bottom: 0px solid transparent;
}
@media screen and (max-width: 768px) {
  .custom-table.no-wrap-cell td,
  .custom-table.no-wrap-cell th {
    white-space: nowrap;
  }
}
.custom-table .dataTables_wrapper .dataTables_paginate {
  float: right !important;
  text-align: right !important;
  line-height: 34px;
  margin-right: 16px;
}
.custom-table .dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 0px !important;
}
.custom-table .dataTables_wrapper .dataTables_paginate .paginate_button.previous {
  border: 0px !important;
}
.custom-table .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover {
  background: transparent !important;
  border: 0px !important;
}
.custom-table .dataTables_wrapper .dataTables_paginate .paginate_button.previous .previous-icon svg path {
  stroke: #002B64;
}
.custom-table .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled svg path {
  stroke: rgba(0, 43, 100, 0.4);
}
.custom-table .dataTables_wrapper .dataTables_paginate .paginate_button.next {
  border: 0px !important;
}
.custom-table .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
  background: transparent !important;
  border: 0px !important;
}
.custom-table .dataTables_wrapper .dataTables_paginate .paginate_button.next .next-icon svg path {
  stroke: #002B64;
}
.custom-table .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled svg path {
  stroke: rgba(0, 43, 100, 0.4);
}

.striped table tbody tr:nth-child(even) {
  background-color: #f2f4f7;
}
.striped table tbody tr:nth-child(even):hover {
  background-color: #fff !important;
}

.custom-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  list-style-type: none;
  overflow: auto hidden;
  background-color: #fff;
  border-radius: 0px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin: 8px -20px 15px -20px;
  padding: 0px 10px;
  border-bottom: 1px solid #D9E8F1;
  color: #68788E;
  width: 100%;
}
.custom-tabs .nav-item {
  align-items: center;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 0;
}
.custom-tabs .nav-item:last-child {
  margin-right: 0;
}
.custom-tabs .nav-item .nav-link {
  align-items: center;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.6875rem;
  padding-right: 20px;
  padding-left: 20px;
  white-space: nowrap;
  justify-content: center;
  min-width: 107px;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0px;
  box-shadow: none;
  color: #68788E;
  padding-top: 6px;
  padding-bottom: 8px;
}
.custom-tabs .nav-item .nav-link span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  padding-left: 4px;
}
.arabic .custom-tabs .nav-item .nav-link span {
  padding-right: 4px;
  padding-left: 0;
}
.custom-tabs .nav-item .nav-link.active, .custom-tabs .nav-item .nav-link:hover {
  background-color: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #002B64;
  border-bottom: 3px solid #00A3E0;
}
.custom-tabs .nav-item .nav-link.active .svg path, .custom-tabs .nav-item .nav-link:hover .svg path {
  fill: currentColor;
}
.custom-tabs .nav-item .nav-link.active {
  color: #002B64;
  border-bottom: 3px solid #00A3E0;
  font-weight: 600;
}
.custom-tabs .nav-item .nav-link .svg {
  margin-right: 10px;
  height: 15px;
  width: 15px;
}
.custom-tabs .nav-item .nav-link .svg path {
  fill: currentColor;
}
.arabic .custom-tabs .nav-item .nav-link .svg {
  margin-right: 0;
  margin-left: 10px;
}
.arabic .custom-tabs .nav-item {
  margin-right: 2px;
  margin-left: 10px;
}
.arabic .custom-tabs {
  padding-right: 10px;
}
@media screen and (max-width: 768px) {
  .custom-tabs {
    width: 100%;
  }
}

.custom-checkbox {
  display: inline-flex;
  color: #002B64;
  cursor: pointer;
  font-size: 0.875rem;
  margin-right: 20px;
  margin-bottom: 20px;
  padding-left: 30px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.arabic .custom-checkbox {
  margin-right: 20px;
  margin-left: 20px;
  padding-left: 0;
  padding-right: 30px;
  float: right;
}
.custom-checkbox input {
  cursor: pointer;
  height: 20px;
  opacity: 0;
  position: absolute;
  left: 0;
  width: 100%;
}
.custom-checkbox input:disabled {
  cursor: default;
}
.custom-checkbox input:disabled ~ label:before {
  background-color: #fff;
  border-color: #b9becc;
  cursor: inherit;
}
.custom-checkbox input:disabled ~ label:after {
  border: none;
  display: block;
}
.custom-checkbox input:checked {
  cursor: pointer;
}
.custom-checkbox input:checked ~ label:before {
  background-color: #00A3E0;
  border-color: #00A3E0;
  transition: all 0.3s ease-in-out;
}
.custom-checkbox input:checked ~ label:after {
  display: block;
}
.custom-checkbox input:checked:disabled {
  cursor: default;
}
.custom-checkbox input:checked:disabled ~ label:before {
  background-color: rgba(0, 163, 224, 0.5);
  border-color: rgba(0, 163, 224, 0.5);
  cursor: inherit;
}
.custom-checkbox input:checked:disabled ~ label:after {
  border: solid #fff;
  border-width: 0 1px 1px 0;
  display: block;
}
.custom-checkbox input:indeterminate {
  cursor: pointer;
}
.custom-checkbox input:indeterminate ~ label:before {
  background-color: #00A3E0;
  border-color: #00A3E0;
  transition: all 0.3s ease-in-out;
}
.custom-checkbox input:indeterminate ~ label:after {
  display: block;
  background: #fff;
  top: 3px;
  left: 8px;
  width: 2px;
  height: 12px;
  border-width: 0;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.custom-checkbox label:before {
  content: "";
  border: 1px solid #002B64;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: transparent;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.0509803922);
}
.arabic .custom-checkbox label:before {
  right: 0;
  left: auto;
}
.custom-checkbox label:after {
  content: "";
  position: absolute;
  display: none;
}
.custom-checkbox.white-bg {
  padding-left: 18px;
}
.custom-checkbox.white-bg label:before {
  background-color: #fff;
}
.custom-checkbox.mb0 {
  margin-bottom: 0;
}
.custom-checkbox.header-checkbox {
  margin-top: 0 !important;
  vertical-align: top;
}

.custom-checkbox label:after {
  border: solid #fff;
  top: 3px;
  left: 6px;
  width: 4.5px;
  height: 9px;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arabic .custom-checkbox label:after {
  right: 7px;
  left: auto;
}

.custom-radio {
  display: inline-flex;
  color: #002B64;
  cursor: pointer;
  font-size: 0.8125rem;
  margin-right: 20px;
  margin-bottom: 20px;
  padding-left: 30px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.arabic .custom-radio {
  margin-right: 0;
  margin-left: 20px;
  padding-left: 0;
  padding-right: 30px;
}
.custom-radio input {
  cursor: pointer;
  height: 20px;
  opacity: 0;
  position: absolute;
  left: 0;
  width: 100%;
}
.custom-radio input:disabled {
  cursor: default;
}
.custom-radio input:disabled ~ label:before {
  background-color: transparent;
  border-color: #b9becc;
  cursor: inherit;
}
.custom-radio input:disabled ~ label:after {
  background-color: #b9becc;
  display: block;
  height: 0;
  width: 0;
}
.custom-radio input:checked {
  cursor: pointer;
}
.custom-radio input:checked ~ label:before {
  background-color: transparent;
  border-color: #00A3E0;
  transition: all 0.3s ease-in-out;
}
.custom-radio input:checked ~ label:after {
  display: block;
}
.custom-radio input:checked:disabled {
  cursor: default;
}
.custom-radio input:checked:disabled ~ label:before {
  border-color: #b9becc;
  cursor: inherit;
}
.custom-radio input:checked:disabled ~ label:after {
  background-color: #b9becc;
  display: block;
  height: 8px;
  width: 8px;
}
.custom-radio label:before {
  content: "";
  border: 1px solid #69738d;
  cursor: pointer;
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: transparent;
  border-radius: 50%;
}
.arabic .custom-radio label:before {
  right: 0;
  left: auto;
}
.custom-radio label:after {
  content: "";
  position: absolute;
  display: none;
}
@media screen and (max-width: 768px) {
  .custom-radio {
    margin-bottom: 10px;
  }
}
.custom-radio.white-bg label:before {
  background-color: #fff;
}

.custom-radio label:after {
  background: #00A3E0;
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.arabic .custom-radio label:after {
  right: 1px;
  left: auto;
}

.custom-modal .modal-content {
  border-radius: 16px;
}
.custom-modal .modal-heading {
  padding: 13px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
@media screen and (max-width: 768px) {
  .custom-modal .modal-heading {
    display: block;
  }
}
.custom-modal .modal-heading .main-modal-heading {
  color: #38501b;
  font-size: 1rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
.custom-modal .modal-heading .cross-search-container {
  display: flex;
  align-items: start;
}
.custom-modal .modal-heading .cross-search-container .close {
  margin: -9px -5px 0 11px;
}
.custom-modal .modal-body {
  padding: 20px;
  text-align: left;
}
.custom-modal .modal-body.min-height {
  min-height: 300px;
}
.custom-modal .modal-body .confirmation-icon {
  margin-bottom: 20px;
}
.custom-modal .modal-body .message {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  padding-bottom: 25px;
  max-width: 250px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.custom-modal .modal-body .button {
  justify-content: center;
  margin-bottom: 0;
}
#center-list-modal .dataTables_wrapper {
  margin-top: -30px;
}
@media screen and (max-width: 768px) {
  #center-list-modal .dataTables_wrapper {
    margin: 0;
  }
}
#center-list-modal .modal-header {
  padding: 10px 10px 0px 0px;
  border: 0;
}
#center-list-modal .modal-header .close:focus {
  outline: none;
}
#center-list-modal .modal-body {
  padding: 10px 34px 40px 40px;
}

#confirmationModal .modal-body {
  padding: 20px 40px 40px;
  text-align: center;
}
#confirmationModal .button {
  width: 35%;
}

.notice-modal .modal-close {
  display: flex;
  justify-content: space-between;
  padding: 14px 10px;
  background-color: #002e59;
  align-items: center;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}
.notice-modal .modal-close .cross_icon {
  background: url(../assets/images/cross-icon-white.svg) no-repeat left top;
  width: 13px;
  height: 13px;
  display: block;
  background-size: cover;
}
.notice-modal .modal-header {
  display: flex;
  justify-content: space-between;
  border-bottom: none;
}
.notice-modal .sub_heading {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  margin-bottom: 0px;
  line-height: 25px;
}
.notice-modal .modal-body {
  min-height: 20vh;
}
.notice-modal .modal-body .description {
  font-size: 0.875rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
}

.custom-accordion {
  align-items: center;
  background-color: #fff;
  border: 1px solid #D9E8F1;
  border-radius: 8px;
  color: #002B64;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  height: 48px;
  justify-content: space-between;
  margin-bottom: 12px;
  outline: none;
  padding: 10px 20px;
  position: relative;
  text-align: left;
  transition: 0.4s;
  width: 100%;
}
.custom-accordion > .title {
  display: inline-block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  margin-bottom: 0;
}
.custom-accordion > .title .svg {
  margin-top: 0px;
  margin-right: 10px;
  width: 24px;
  height: auto;
}
.arabic .custom-accordion > .title .svg {
  margin-right: 0;
  margin-left: 10px;
}
.custom-accordion > .title .new-text {
  background: #FF577F;
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 30px;
  font-size: 10px;
}
@media screen and (max-width: 768px) {
  .custom-accordion > .title {
    display: inline-flex;
    margin-right: 15px;
  }
}
.custom-accordion:hover {
  opacity: 0.9;
  transition: opacity 0.3s ease-in-out;
}
.custom-accordion:focus {
  outline: 0;
}
.custom-accordion.active {
  background-color: #083169;
  border: solid 1px #8db4d9;
  color: #fff;
}
.custom-accordion.active .title .svg path, .custom-accordion.active .title .svg ellipse, .custom-accordion.active .title .svg circle {
  stroke: #fff;
}
.custom-accordion.active + .accordion-content {
  margin-right: 10px;
  margin-bottom: 12px;
  margin-left: 10px;
  overflow: unset;
  max-height: 3200px !important;
}
.arabic .custom-accordion.active + .accordion-content {
  text-align: right;
}
.custom-accordion.active + .accordion-content:last-of-type {
  margin-bottom: 0;
}
.custom-accordion.active:after {
  content: url("../assets/images/accordion-up-arrow-icon.svg");
  top: 10px;
}
.custom-accordion:after {
  content: url("../assets/images/accordion-down-arrow-icon.svg");
  position: absolute;
  top: 15px;
  right: 20px;
}
.arabic .custom-accordion:after {
  right: unset;
  left: 20px;
}
@media screen and (max-width: 768px) {
  .arabic .custom-accordion:after {
    left: 10px;
  }
}
@media screen and (max-width: 768px) {
  .custom-accordion:after {
    right: 10px;
  }
}
.custom-accordion > .information-text {
  padding-right: 40px;
}
.arabic .custom-accordion > .information-text {
  padding-right: 0;
  padding-left: 40px;
}
@media screen and (max-width: 768px) {
  .custom-accordion {
    height: auto;
    padding-right: 10px;
    padding-left: 10px;
  }
}

.accordion-content {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .accordion-content {
    max-height: 0 !important;
  }
}

.custom-input {
  margin-bottom: 16px;
  position: relative;
  /* Firefox */
}
.custom-input .search_icon {
  position: absolute;
  right: 15px;
  bottom: 10px;
}
.arabic .custom-input .search_icon {
  right: auto;
  left: 15px;
}
.custom-input .calender-icon {
  width: 20px;
}
.custom-input.sm input {
  width: auto;
}
.custom-input label {
  font-size: 14px;
}
.custom-input .title {
  display: block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 5px;
  text-align: left;
  color: #002B64;
}
.arabic .custom-input .title {
  text-align: right;
}
.custom-input .input-element {
  background-color: #fff;
  border: solid 1px #C8CCD1;
  border-radius: 8px;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  height: 48px;
  padding-right: 15px;
  padding-left: 15px;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.0509803922);
  width: 100%;
  /* Chrome, Safari, Edge, Opera */
}
.custom-input .input-element::-webkit-input-placeholder {
  /* Edge */
  color: #b9becc;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
}
.custom-input .input-element:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #b9becc;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
}
.custom-input .input-element::placeholder {
  color: #b9becc;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
}
.custom-input .input-element::-webkit-outer-spin-button, .custom-input .input-element::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.custom-input .input-element:read-only {
  background-color: #F5F9FF;
  border-color: #C8CCD1;
}
.custom-input .input-element:read-only:hover {
  border-color: #bbc5c9;
  box-shadow: none;
}
.custom-input .input-element:-moz-read-only {
  background-color: #f4f4f7;
}
.custom-input .input-element:-moz-read-only:hover {
  border-color: #dfe2eb;
  box-shadow: none;
}
.custom-input .input-element:focus {
  border-color: #69738d;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
  outline: none;
}
.custom-input .input-element.code {
  margin-right: 10px;
  padding-right: 5px;
  padding-left: 5px;
  text-align: center;
  width: 60px;
}
.arabic .custom-input .input-element.code {
  margin-right: auto;
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .custom-input .input-element.code {
    margin-right: 5px;
    width: 45px;
  }
}
.custom-input .input-element.s-hidden {
  display: none;
}
.custom-input .input-element.error {
  border-color: #fa4f4f;
  color: #fa4f4f;
}
.custom-input .input-element.error + .error-msg {
  color: #fa4f4f;
  float: right;
  font-size: 0.625rem;
  padding-bottom: 10px;
}
.custom-input .input-element.textarea-field {
  height: 60px;
  padding: 5px 10px;
}
.custom-input .input-element.textarea-field.extra-height {
  height: 80px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .custom-input .input-element[readonly] {
    background-color: #F5F7FF;
  }
}
.custom-input span.error-msg {
  color: #fa4f4f;
  float: right;
  font-size: 0.625rem;
  padding-bottom: 10px;
}
.custom-input input[type=number] {
  -moz-appearance: textfield;
}
.custom-input input::-ms-clear {
  display: none;
}
.custom-input .contact-input-field {
  display: flex;
}
.custom-input.bottom-space {
  margin-bottom: 0;
}
.custom-input.search-field {
  position: relative;
}
.custom-input.search-field:after {
  content: "";
  display: inline-block;
  background: url("../assets/search-icon.svg") no-repeat;
  height: 20px;
  position: absolute;
  bottom: 10px;
  right: 15px;
  width: 20px;
}
.arabic .custom-input.search-field:after {
  right: auto;
  left: 15px;
}
.custom-input.search-field .clear-search-field {
  display: none;
  position: absolute;
  bottom: 8px;
  right: 15px;
  cursor: pointer;
  font-size: 1rem;
}
.arabic .custom-input.search-field .clear-search-field {
  right: auto;
  left: 15px;
}
.custom-input.search-field.has-value:after {
  display: none;
}
.custom-input.search-field.has-value .clear-search-field {
  display: block;
}
.custom-input.search-field .search-field-results {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 0;
  z-index: 999;
}
.custom-input.search-field .search-field-results ul {
  list-style: none;
  margin-bottom: 0;
}
.custom-input.search-field .search-field-results ul li a {
  display: block;
  color: #222734;
  font-size: 0.8125rem;
  padding: 10px 25px;
}
.custom-input.search-field .search-field-results ul li a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.custom-input select.input-element {
  background-color: #fff !important;
  border-color: #dfe2eb !important;
}
.custom-input .dropdown .dropdown-toggle::after {
  content: "";
  background: url(./../assets/images/dropdown-arrow.png) no-repeat left top;
  background-size: cover;
  width: 16px;
  height: 8px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 20px;
  z-index: 0;
  border: 0px;
}
.custom-input .iti__arrow {
  margin-left: 6px;
  margin-right: 6px;
  width: 12px;
  height: 16px;
  content: url(https://qa-connect.phoenixhse.com/assets/images/accordion-down-arrow-icon.svg);
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  position: absolute;
  right: -18px;
  top: 15px;
  z-index: 10;
}

#selectLanguage {
  position: relative;
}
#selectLanguage .dropdown-toggle {
  background: #fff url("../assets/arrow-down.svg") no-repeat;
  background-position-x: calc(100% - 10px);
  background-position-y: 13px;
  border: solid 1px #dfe2eb;
  border-radius: 6px;
  color: #222734;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  height: 30px;
  line-height: 24px;
  padding-right: 30px;
  padding-left: 15px;
  width: 100%;
  cursor: pointer;
}
#selectLanguage .dropdown-toggle:focus {
  outline: none;
}
#selectLanguage .dropdown-toggle:after {
  display: none;
}
#selectLanguage .dropdown-menu {
  border: solid 1px #dfe2eb;
  max-height: 1000px;
  opacity: 1;
  padding: 20px;
  transition: max-height 1s ease-in;
  width: 76px;
  top: 28px;
  min-width: auto;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
}
#selectLanguage .dropdown-menu li {
  color: #69738D;
  cursor: pointer;
  font-size: 0.8125rem;
  margin-bottom: 10px;
  width: 100%;
}
#selectLanguage .dropdown-menu li:last-child {
  margin-bottom: 0;
}
#selectLanguage .dropdown-menu li a {
  color: #69738D;
}

.dataTables_filter {
  display: inline-block;
  float: right;
}
.arabic .dataTables_filter {
  float: left;
}
.dataTables_filter label {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 10px;
  position: relative;
}
.dataTables_filter label .form-control {
  border: solid 1px #dfe2eb;
  border-radius: 8px;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  height: 40px;
  margin-left: 0 !important;
  padding-top: 5px;
  padding-left: 15px;
  width: 210px !important;
}
.dataTables_filter label .form-control:focus {
  border-color: #69738d;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
  outline: none;
}
@media screen and (max-width: 768px) {
  .dataTables_filter label .form-control {
    width: 100% !important;
  }
}
.dataTables_filter label:after {
  content: "";
  display: inline-block;
  background: url("../assets/small-search.svg") no-repeat;
  height: 12px;
  position: absolute;
  top: 15px;
  right: 10px;
  width: 12px;
  z-index: 98;
}
.arabic .dataTables_filter label:after {
  right: auto;
  left: 10px;
}
.dataTables_filter label.handle-icon:after {
  content: none;
}
@media screen and (max-width: 768px) {
  .dataTables_filter {
    float: unset;
  }
}

.input-group.date, .input-group.time {
  display: inline-block;
  flex-direction: column;
  margin-bottom: 16px;
}
.input-group.date .form-control, .input-group.time .form-control {
  border-radius: 8px;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  height: 48px;
  padding-left: 15px;
}
.arabic .input-group.date .form-control, .arabic .input-group.time .form-control {
  text-align: right;
}
.input-group.date .form-control:focus, .input-group.time .form-control:focus {
  border-color: #69738d;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
  outline: none;
}
.input-group.date .form-control:disabled, .input-group.time .form-control:disabled {
  background-color: #f4f4f7;
  border-color: transparent;
}
.input-group.date .form-control:disabled:hover, .input-group.time .form-control:disabled:hover {
  border-color: #dfe2eb;
  box-shadow: none;
}
.input-group.date .form-control::-webkit-input-placeholder, .input-group.time .form-control::-webkit-input-placeholder {
  /* Edge */
  color: #b9becc;
}
.input-group.date .form-control:-ms-input-placeholder, .input-group.time .form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #b9becc;
}
.input-group.date .form-control::placeholder, .input-group.time .form-control::placeholder {
  color: #b9becc;
}
.input-group.date .input-group-addon, .input-group.time .input-group-addon {
  cursor: pointer;
  position: absolute;
  bottom: 14px;
  right: 15px;
  z-index: 9;
}
.arabic .input-group.date .input-group-addon, .arabic .input-group.time .input-group-addon {
  right: auto;
  left: 15px;
}
.arabic .input-group.date .input-group-addon:last-child, .arabic .input-group.time .input-group-addon:last-child {
  border: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .input-group.date .input-group-addon img, .input-group.time .input-group-addon img {
    height: 20px;
    width: 19px;
  }
}
.input-group.date.mt0, .input-group.time.mt0 {
  margin-top: 0;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .input-group.date, .input-group.time {
    transform: translateY(-5px);
  }
}
.input-group.time .input-group-addon {
  cursor: pointer;
}

.datepicker-dropdown {
  border: solid 1px #dfe2eb;
  border-radius: 8px;
  box-shadow: 0 3px 26px 0 rgba(0, 0, 0, 0.1);
  margin-top: 45px;
  z-index: 99999 !important;
}
.arabic .datepicker-dropdown {
  display: inline-table;
}
.datepicker-dropdown .table-condensed {
  width: 330px;
}
.datepicker-dropdown .table-condensed thead {
  border-bottom: 1px solid #f2f2f2;
}
.datepicker-dropdown .table-condensed th,
.datepicker-dropdown .table-condensed td {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  height: 30px;
}
.datepicker-dropdown .table-condensed th {
  font-weight: 400;
}
.datepicker-dropdown .table-condensed th.prev, .datepicker-dropdown .table-condensed th.next {
  color: #fff;
  position: relative;
}
.datepicker-dropdown .table-condensed th.prev:after, .datepicker-dropdown .table-condensed th.next:after {
  border-radius: 5px;
  border: solid 0.5px transparent;
  content: "";
  font-family: FontAwesome;
  height: 21px;
  line-height: 21px;
  position: absolute;
  left: 12px;
  width: 21px;
}
.datepicker-dropdown .table-condensed th.prev:hover, .datepicker-dropdown .table-condensed th.next:hover {
  background-color: #fff;
}
.datepicker-dropdown .table-condensed th.prev:after {
  content: "\f053";
}
.datepicker-dropdown .table-condensed th.next:after {
  content: "\f054";
  left: 8px;
}
.datepicker-dropdown .table-condensed td.day.active, .datepicker-dropdown .table-condensed td.day.today {
  background-image: none;
  color: #fff;
}
.datepicker-dropdown .table-condensed td.day.active:hover, .datepicker-dropdown .table-condensed td.day.today:hover {
  color: #fff;
  opacity: 0.9;
}
.datepicker-dropdown .table-condensed td.day:hover {
  background-image: unset;
  color: #002B64;
}
.datepicker-dropdown .datepicker-months .table-condensed th.next:after {
  left: -12px;
}
.datepicker-dropdown .datepicker-years .table-condensed th.next:after {
  left: -12px;
}
@media screen and (max-width: 768px) {
  .datepicker-dropdown {
    margin-top: 125px;
    left: auto !important;
    right: 20px;
  }
  .arabic .datepicker-dropdown {
    margin-top: 50px;
    direction: rtl;
  }
  .datepicker-dropdown .table-condensed {
    width: 250px;
  }
}

.filter_options {
  position: absolute;
  right: 0;
  top: -52px;
  display: flex;
}
.arabic .filter_options {
  right: auto;
  left: 0;
}
@media screen and (max-width: 768px) {
  .filter_options {
    display: block;
    top: 20px;
    text-align: right;
  }
}
.filter_options label {
  color: #818898;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.76rem;
  margin-right: 5px;
}
.arabic .filter_options label {
  margin-left: 5px;
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  .filter_options label {
    min-width: 60px;
  }
}
.filter_options .input-group {
  margin-right: 10px;
}
.arabic .filter_options .input-group {
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .filter_options .input-group {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.filter_options .input-group.date {
  align-items: center;
  display: flex;
  width: auto;
  flex-direction: row;
}

.select_box {
  display: flex;
  align-items: center;
  position: relative;
}
.arabic .select_box {
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  .select_box {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.select_box:before {
  width: 8px;
  height: 10px;
  pointer-events: none;
  position: absolute;
  right: 20px;
  bottom: 12px;
  z-index: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.23em solid;
  border-right: 0.23em solid transparent;
  border-bottom: 0;
  border-left: 0.23em solid transparent;
  opacity: 0;
}
.arabic .select_box:before {
  right: auto;
  left: 15px;
}
.select_box select {
  border: 1px solid #bbc5c9;
  background: #fff;
  font-size: 0.75rem;
  border-radius: 8px;
  color: #1d4094;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  padding: 10px 15px;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 100%;
}
.select_box select:focus {
  outline: none;
}

.custom-select:focus {
  border-color: #bbc5c9 !important;
  outline: 0;
  box-shadow: 0 0 0 0.2rem transparent !important;
}

.dropdown-item {
  padding: 0.25rem 0.75rem !important;
}

.parent-portal-header {
  align-items: center;
  background-color: #fff;
  box-shadow: -2.8px 5.3px 16px 0 rgba(175, 175, 175, 0.34);
  display: flex;
  display: -ms-flexbox;
  height: 68px;
  justify-content: space-between;
  padding-right: 40px;
  padding-left: 6px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .logo-profile {
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-header .logo-profile .school-logo {
    width: 100%;
  }
}
.parent-portal-header .home-logo-link .home-logo {
  height: 38px;
  max-width: 82px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .home-logo-link .home-logo {
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-header .home-logo-link {
    display: block;
    margin-bottom: 5px;
    position: relative;
  }
  .parent-portal-header .home-logo-link:after {
    content: "";
    background-color: #ddd;
    height: 1px;
    position: absolute;
    bottom: -2px;
    left: -15px;
    width: calc(100% + 150px);
  }
}
.parent-portal-header .home-logo-link img {
  max-width: 270px;
  padding: 10px 0;
  max-height: 88px;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .home-logo-link img {
    max-width: 206px;
    max-height: 60px;
    margin-left: 12px;
  }
}
.parent-portal-header .user-profiles {
  display: inline-flex;
  list-style-type: none;
  margin-bottom: 0;
  margin-left: 30px;
  max-width: 420px;
}
.parent-portal-header .user-profiles li {
  margin-right: 12px;
  position: relative;
  margin-left: 6px;
}
.parent-portal-header .user-profiles li img {
  border-radius: 50%;
  cursor: pointer;
  height: 34px;
  max-width: 34px;
  width: 34px;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .user-profiles li img {
    height: 34px;
    width: 34px;
  }
}
.parent-portal-header .user-profiles li.selected:after {
  content: "";
  border: 2px dashed #0099eb;
  border-radius: 50%;
  background-size: cover;
  height: 44px;
  width: 44px;
  position: absolute;
  top: -5px;
  right: -5px;
}
.parent-portal-header .user-profiles .prev-icon {
  margin-right: 10px;
}
.parent-portal-header .user-profiles .prev-icon.active {
  cursor: pointer;
}
.parent-portal-header .user-profiles .prev-icon.active .svg path {
  fill: #16479f;
}
.parent-portal-header .user-profiles .next-icon {
  margin-left: 3px;
}
.arabic .parent-portal-header .user-profiles .next-icon {
  margin-right: 15px;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .user-profiles {
    margin-left: 0;
    width: 170px;
    overflow: auto;
    overflow-y: hidden;
    height: 50px;
    padding-top: 10px;
  }
}
.arabic .parent-portal-header .user-profiles {
  margin-left: 0px;
  margin-right: 30px;
}
.parent-portal-header .user-details {
  display: inline-flex;
  flex-direction: column;
  padding-right: 15px;
  padding-left: 15px;
  max-width: 275px;
}
.parent-portal-header .user-details .name {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .user-details .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 160px;
  }
}
.parent-portal-header .user-details .branch {
  color: #878686;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.5625rem;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .user-details .branch {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 160px;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-header .user-details {
    padding-top: 4px;
    padding-right: 0;
    padding-left: 10px;
  }
}
.parent-portal-header .mobile-view {
  display: inline-flex;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .mobile-view {
    align-items: center;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .parent-portal-header .mobile-view {
    max-width: 560px;
  }
}
.parent-portal-header .mobile-view .custom-input .dropdown .dropdown-toggle::after {
  content: "";
  background: url(./../assets/images/dropdown-arrow.png) no-repeat left top;
  background-size: cover;
  width: 12px;
  height: 6px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 15px;
  z-index: 0;
  border: 0px;
}
.parent-portal-header .mobile-view .custom-input .dropdown .dropdown-toggle .filter-option-inner-inner {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  line-height: 1.25;
}
.parent-portal-header .right-align-data {
  align-items: center;
  display: inline-flex;
}
.parent-portal-header .right-align-data .font-size-control {
  align-items: center;
  background-color: #fff;
  display: inline-flex;
  height: 30px;
  width: 83px;
}
.parent-portal-header .right-align-data .font-size-control span {
  align-items: center;
  color: #262626;
  cursor: pointer;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  height: 30px;
  justify-content: center;
  line-height: 22px;
  text-align: center;
  width: 27px;
}
.parent-portal-header .right-align-data .font-size-control span:first-child {
  border: 1px solid #8e92a2;
  border-radius: 8px 0 0 8px;
}
.parent-portal-header .right-align-data .font-size-control span:first-child:hover {
  border-color: #1e89e5;
}
.arabic .parent-portal-header .right-align-data .font-size-control span:first-child {
  border-radius: 0 8px 8px 0;
}
.parent-portal-header .right-align-data .font-size-control span:nth-child(2) {
  border-top: 1px solid #8e92a2;
  border-bottom: 1px solid #8e92a2;
}
.parent-portal-header .right-align-data .font-size-control span:nth-child(2):hover {
  border-color: #1e89e5;
}
.parent-portal-header .right-align-data .font-size-control span:last-child {
  border: 1px solid #8e92a2;
  border-radius: 0 8px 8px 0;
}
.parent-portal-header .right-align-data .font-size-control span:last-child:hover {
  border-color: #1e89e5;
}
.arabic .parent-portal-header .right-align-data .font-size-control span:last-child {
  border-radius: 8px 0 0 8px;
}
.parent-portal-header .right-align-data .font-size-control span:hover {
  background-color: #c5e3ff;
  color: #1e89e5;
}
.parent-portal-header .right-align-data .font-size-control span.disabled {
  color: #69738d;
  pointer-events: none;
}
.parent-portal-header .right-align-data .notification_btn {
  cursor: pointer;
  line-height: 1;
  margin-right: 25px;
  margin-left: 25px;
  position: relative;
}
.parent-portal-header .right-align-data .notification_btn .count {
  align-items: center;
  background-color: #FF3759;
  border-radius: 100px;
  color: #fff;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  height: 20px;
  justify-content: center;
  position: absolute;
  top: -8px;
  right: -12px;
  letter-spacing: 0.12rem;
  width: 25px;
}
.parent-portal-header .right-align-data .user-action-dropdown .profile-img {
  margin-right: 8px;
  min-width: 40px;
  max-width: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.arabic .parent-portal-header .right-align-data .user-action-dropdown .profile-img {
  margin-left: 8px;
  margin-right: 0px;
}
.parent-portal-header .right-align-data .user-action-dropdown .down-arrow {
  cursor: pointer;
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  position: absolute;
  top: 18px;
  right: 70px;
  left: auto;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .right-align-data .user-action-dropdown .show-page-control {
    display: block;
    height: 15px;
    padding: 5px;
    width: 30px;
  }
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control:focus {
  outline: none;
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control.open {
  left: 175px;
  -webkit-transition: all ease-in-out 1s;
  transition: all ease-in-out 1s;
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control.open span {
  left: 0.6rem;
  width: 60%;
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control.open span:nth-child(1) {
  top: 1rem;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control.open span:nth-child(2) {
  opacity: 0;
  left: -3.75rem;
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control.open span:nth-child(3) {
  top: 1rem;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control span {
  display: block;
  position: absolute;
  height: 4px;
  width: 4px;
  opacity: 1;
  left: 5px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all ease-in-out 0.25s;
  transition: all ease-in-out 0.25s;
  background: #002B64;
  border-radius: 50%;
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control span:nth-child(1) {
  top: 0;
  left: 0;
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control span:nth-child(2) {
  top: 0;
  left: 7px;
}
.parent-portal-header .right-align-data .user-action-dropdown .show-page-control span:nth-child(3) {
  top: 0;
  left: 14px;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .right-align-data .user-action-dropdown {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  .parent-portal-header .right-align-data .user-action-dropdown .show-page-control {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-header .right-align-data {
    padding-top: 10px;
  }
  .parent-portal-header .right-align-data .page-control {
    background: #fff;
    display: none;
    height: 60px;
    padding-right: 15px;
    padding-left: 15px;
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    z-index: 999;
  }
  .parent-portal-header .right-align-data .page-control.open {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: end;
  }
}
.arabic .parent-portal-header {
  padding-left: 40px;
  padding-right: 6px;
}
@media screen and (max-width: 768px) {
  .parent-portal-header {
    align-items: center;
    flex-direction: column;
    height: auto;
    padding: 0 15px;
  }
}
.parent-portal-header .sibling-profile-card {
  margin-left: 12px;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .sibling-profile-card {
    margin-left: 0px;
  }
}
.parent-portal-header .sibling-profile-card .dropdown {
  width: 428px;
  height: 54px;
  border-radius: 100px;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .sibling-profile-card .dropdown {
    width: 390px;
  }
}
.parent-portal-header .sibling-profile-card .dropdown .selected-item {
  display: flex;
  align-items: center;
  background-color: #edf5fc;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
}
.parent-portal-header .sibling-profile-card .dropdown .selected-item .avatar {
  width: 40px;
  height: 40px;
  padding: 2px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 3px #ffffff inset;
  border: 1px solid var(--Text-Colour-Primary-Text, #041e42);
}
.parent-portal-header .sibling-profile-card .dropdown .selected-item .dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0px 0px 0px 3px #ffffff inset;
  border: 1px solid var(--Text-Colour-Primary-Text, #041e42);
}
.parent-portal-header .sibling-profile-card .dropdown .selected-item .info {
  flex-grow: 1;
  margin-left: 15px;
}
.parent-portal-header .sibling-profile-card .dropdown .selected-item .info .name {
  font-weight: 600;
  font-size: 14px;
  color: #041e42;
  line-height: 140%;
}
.parent-portal-header .sibling-profile-card .dropdown .selected-item .info .details {
  font-size: 12px;
  color: #5f708a;
  white-space: normal;
}
.parent-portal-header .sibling-profile-card .dropdown .selected-item .arrowouter {
  width: 26px;
  height: 26px;
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  rotate: 0deg;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list {
  background-color: white;
  border-radius: 12px;
  margin-top: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  width: 426px;
  align-items: anchor-center;
  padding: 0px;
}
@media screen and (max-width: 768px) {
  .parent-portal-header .sibling-profile-card .dropdown .dropdown-list {
    width: 390px;
  }
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px !important;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .info {
  flex-grow: 1;
  margin-left: 15px;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .info .name {
  font-weight: 600;
  font-size: 14px;
  color: #041e42;
  line-height: 140%;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .info .details {
  font-size: 12px;
  color: #5f708a;
  white-space: normal;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .dropdown-item:last-child {
  border-bottom: none;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .custom-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: auto;
  position: relative;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .custom-radio input[type=radio] {
  opacity: 0;
  position: absolute;
  cursor: pointer;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .custom-radio .checkmark {
  width: 20px;
  height: 20px;
  border: 1px solid #68788e;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transition: border-color 0.3s ease;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .custom-radio .checkmark::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #0c64e0;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .custom-radio input[type=radio]:checked + .checkmark {
  border-color: #0c64e0;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .dropdown-item .custom-radio input[type=radio]:checked + .checkmark::after {
  opacity: 1;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-list .separator {
  width: 386px;
  height: 2px;
  background: #d9e8f1;
}
.parent-portal-header .sibling-profile-card .dropdown .dropdown-item:hover {
  background-color: #f0f0f0;
}

.profile_options {
  width: 205px;
  border-radius: 6px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
  border: solid 1px #dfe2eb;
  right: 20px;
  position: absolute;
  background: #fff;
  top: 60px;
  padding: 20px;
  display: none;
}
.profile_options.show {
  display: block;
}
.profile_options ul {
  margin-bottom: 0px;
  padding-left: 0px;
}
.profile_options ul li {
  margin-bottom: 15px;
  width: 100%;
  list-style: none;
  line-height: 15px;
}
.profile_options ul li a {
  color: #69738d;
  cursor: pointer;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: none;
  display: block;
}
@media screen and (max-width: 768px) {
  .profile_options {
    z-index: 999;
  }
  .arabic .profile_options {
    right: 20px !important;
    left: auto !important;
    text-align: right;
  }
}

.notification-box {
  display: none;
  width: 400px;
  border-radius: 10px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
  border: solid 1px #dfe2eb;
  right: 0;
  position: absolute;
  background: #fff;
  top: 40px;
  overflow: hidden;
  overflow-y: auto;
}
.notification-box.show {
  display: block;
}
@media screen and (max-width: 768px) {
  .notification-box {
    width: 300px;
    right: 0px;
  }
  .arabic .notification-box {
    width: 300px;
    left: 0px !important;
  }
}

.notification-box .notify-detail {
  color: #002B64;
  padding: 10px 20px;
  border-radius: 10px 10px 0 0;
  font-family: Encode Sans;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid #E6EFF5;
}
.notification-box a {
  text-decoration: none;
}
.notification-box .notification-block {
  display: flex;
  padding: 20px;
  width: 100%;
  position: relative;
  align-items: self-start;
}
.notification-box .notification-block:before {
  content: "";
  width: 90%;
  background: rgba(0, 0, 0, 0.09);
  position: absolute;
  bottom: 0;
  height: 1px;
}
.notification-box .notification-block .svg path {
  fill: transparent;
}
.notification-box .notification-block:hover {
  background: rgba(0, 92, 178, 0.1);
}
.notification-box .notification-block .notify-content {
  width: 100%;
  color: #68788E;
  font-family: Encode Sans;
  font-weight: 400;
  font-size: 12px;
}
.notification-box .notification-block .notify-content .notify-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification-box .notification-block .notify-content .notify-title .heading {
  font-family: "Encode Sans", sans-serif;
  line-height: 100%;
  font-weight: 500;
  font-size: 14px;
  color: #002B64;
}
.notification-box .notification-block .notify-content .notify-title .sub_heading {
  color: #002B64;
}
.notification-box .notification-block .notify-content .notify-title span {
  font-weight: 400;
  font-size: 12px;
  color: #68788E;
}
.notification-box .notification-block.notification-highlight {
  background-color: #F1F6FC;
}
.notification-box .notification-block .notification-dot {
  width: 7px;
  height: 7px;
  background-color: #00A3E0;
  border-radius: 50%;
  margin-left: 10px;
  margin-top: 5px;
}
.notification-box .notify-link {
  font-family: Encode Sans;
  font-weight: 500;
  font-size: 15px;
  color: #002B64;
}

.sidebar-menu {
  margin-top: 15px;
}
.sidebar-menu ul {
  padding-left: 0px;
}
.sidebar-menu ul li {
  margin: 0;
  list-style: none;
  min-height: 54px;
  border-top: 1px solid #D9E8F1;
  background: #fff;
}
.sidebar-menu ul li a {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  display: inline-flex;
  width: 100%;
  height: 54px;
  text-decoration: none;
  align-items: center;
  position: relative;
  color: #68788E;
  background: #fff;
  padding: 10px 20px 10px 10px;
  margin-bottom: 0px;
}
.arabic .sidebar-menu ul li a {
  padding: 10px 14px 10px 30px;
}
.sidebar-menu ul li a:hover {
  background-color: #F1F6FC;
  color: #002B64;
}
.sidebar-menu ul li a:hover .svg path {
  stroke: #002B64;
}
.sidebar-menu ul li a:hover .svg circle {
  stroke: #002B64;
}
.sidebar-menu ul li a.active {
  font-weight: 600;
}
.sidebar-menu ul li a .svg {
  margin-right: 8px;
}
.arabic .sidebar-menu ul li a .svg {
  margin-right: 0px;
  margin-left: 10px;
}
.sidebar-menu ul li.active a {
  background-color: #F1F6FC;
  color: #002B64;
  border-right: 4px solid #FEDB00;
  font-weight: 400;
}
.sidebar-menu ul li.active a .svg path {
  stroke: #002B64;
}
.sidebar-menu ul li.active a .svg circle {
  stroke: #002B64;
}
.sidebar-menu ul li.active a:hover {
  background-color: #F1F6FC;
  color: #002B64;
  border-right: none;
}
.sidebar-menu ul li.active a:hover .svg path {
  stroke: #002B64;
}
.sidebar-menu ul li.active a:hover .svg circle {
  stroke: #002B64;
}
.sidebar-menu .sidebar-dropdown > a:after {
  font-family: "FontAwesome";
  font-weight: 900;
  content: "\f105";
  display: inline-flex;
  align-items: center;
  text-align: center;
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
}
.arabic .sidebar-menu .sidebar-dropdown > a:after {
  left: 15px;
  right: auto;
  transform: rotate(180deg);
}
.sidebar-menu .sidebar-dropdown.active > a {
  border-right: 0px solid transparent;
}
.sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  right: 15px;
}
.arabic .sidebar-menu .sidebar-dropdown.active > a:after {
  left: 15px;
  right: auto;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 0;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li {
  border-top: 0px solid transparent;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a {
  color: #68788E;
  background: #fff;
  padding-right: 10px;
  padding-left: 46px;
  border-right: none;
  list-style-type: circle;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a .svg {
  display: none;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a .svg path {
  display: none;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:hover {
  background-color: #F1F6FC;
  color: #00A3E0;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:hover .svg path {
  display: none;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:hover::after {
  font-family: "FontAwesome";
  font-weight: 900;
  content: "\f192";
  display: inline-flex;
  align-items: center;
  text-align: center;
  position: absolute;
  left: 22px;
  top: 1px;
  bottom: 0;
  color: #00A3E0;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a.active {
  background-color: #F1F6FC;
  color: #00A3E0;
  border-right: 4px solid #FEDB00;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a.active:hover {
  color: #194064;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a.active:hover .svg path {
  fill: #194064;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a.active::after {
  font-family: "FontAwesome";
  font-weight: 900;
  content: "\f111";
  display: inline-flex;
  align-items: center;
  text-align: center;
  position: absolute;
  left: 22px;
  top: 1;
  bottom: 0;
  color: #00A3E0;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a::after {
  font-family: "FontAwesome";
  font-weight: 900;
  content: "\f192";
  display: inline-flex;
  align-items: center;
  text-align: center;
  position: absolute;
  left: 22px;
  top: 1px;
  bottom: 0;
  color: #194064;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li.active a {
  background-color: #0099EB;
  color: #fff;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li.active a .svg path {
  fill: #fff;
}
.sidebar-menu .sidebar-submenu {
  display: none;
  margin: 0;
}
.sidebar-menu a {
  color: #00A3E0;
}

@media screen and (max-width: 768px) {
  .breadcrumb {
    padding: 1.5rem 1rem 0 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .breadcrumb .breadcrumb-item {
    margin-bottom: 0.5rem;
  }
}

.parent-portal-sidebar {
  background-color: #f2f4f7;
  border-right: solid 1px rgba(0, 0, 0, 0.081);
  min-height: calc(100vh - 68px);
  max-width: 250px;
  width: 100%;
  position: fixed;
  height: calc(100vh - 60px);
  z-index: 100;
  box-shadow: 0px 3px 16px 0px rgba(175, 175, 175, 0.34);
}
@media screen and (max-width: 768px) {
  .parent-portal-sidebar {
    height: calc(100vh - 240px);
  }
}
.parent-portal-sidebar .mCSB_inside > .mCSB_container {
  margin-right: 10px;
}
.arabic .parent-portal-sidebar .mCSB_inside > .mCSB_container {
  margin-right: 0px;
  margin-left: 10px;
}
.parent-portal-sidebar .menu-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(4, 30, 66, 0.6);
  margin: 0 14px;
  min-height: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
}
.parent-portal-sidebar .sidebar-main-logo {
  margin: 28px 23px 43px 49px;
}
.parent-portal-sidebar .sidebar-main-logo img {
  height: 34px;
  max-width: 119px;
  width: 100%;
}
.arabic .parent-portal-sidebar .sidebar-main-logo {
  margin-right: 49px;
  margin-left: 23px;
}
.parent-portal-sidebar > ul {
  list-style-type: none;
  margin-bottom: 0;
  margin-left: 2px;
  position: relative;
}
.parent-portal-sidebar > ul .nav-option {
  margin-bottom: 10px;
  position: relative;
  z-index: 3;
}
.parent-portal-sidebar > ul .nav-option > a {
  align-items: flex-end;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  padding: 10px 19px;
  width: 100%;
  align-items: center;
}
.parent-portal-sidebar > ul .nav-option > a:hover {
  color: #8bf6ff;
}
.parent-portal-sidebar > ul .nav-option .svg {
  margin-right: 10px;
  min-width: 20px;
  max-width: 20px;
}
.parent-portal-sidebar > ul .nav-option .svg path {
  fill: currentColor;
}
.arabic .parent-portal-sidebar > ul .nav-option .svg {
  margin-right: 0;
  margin-left: 10px;
}
.parent-portal-sidebar > ul .nav-option.active {
  background-color: #f5f8ff;
  border-radius: 20px 0 0 20px;
  color: #002B64;
  width: calc(100% + 2px);
}
.parent-portal-sidebar > ul .nav-option.active > a {
  background-color: #f5f8ff;
  border-radius: 20px 0 0 20px;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-weight: normal;
  position: relative;
  width: calc(100% + 2px);
}
.parent-portal-sidebar > ul .nav-option.active > a:before, .parent-portal-sidebar > ul .nav-option.active > a:after {
  content: "";
  background-color: #68788E;
  border-radius: 20px;
  height: 40px;
  position: absolute;
  right: 3px;
  width: 40px;
  z-index: 2;
}
.arabic .parent-portal-sidebar > ul .nav-option.active > a:before, .arabic .parent-portal-sidebar > ul .nav-option.active > a:after {
  right: unset;
  left: 3px;
}
.parent-portal-sidebar > ul .nav-option.active > a:before {
  top: -40px;
}
.parent-portal-sidebar > ul .nav-option.active > a:after {
  bottom: -40px;
}
.arabic .parent-portal-sidebar > ul .nav-option.active > a {
  border-radius: 0 20px 20px 0;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .parent-portal-sidebar > ul .nav-option.active > a {
    border: 1px solid #fff;
  }
}
.parent-portal-sidebar > ul .nav-option.active .svg .dashboard {
  stroke: currentColor;
}
.parent-portal-sidebar > ul .nav-option.active:after, .parent-portal-sidebar > ul .nav-option.active:before {
  content: "";
  background-color: #f5f8ff;
  height: 20px;
  position: absolute;
  right: -1px;
  width: 20px;
  z-index: 1;
}
.arabic .parent-portal-sidebar > ul .nav-option.active:after, .arabic .parent-portal-sidebar > ul .nav-option.active:before {
  right: unset;
  left: -1px;
}
.parent-portal-sidebar > ul .nav-option.active:before {
  top: -20px;
}
.parent-portal-sidebar > ul .nav-option.active:after {
  bottom: -20px;
}
.arabic .parent-portal-sidebar > ul .nav-option.active {
  border-radius: 0 20px 20px 0;
}
.parent-portal-sidebar > ul .nav-option.show-sub-menu > a {
  background-color: #fff;
}
.arabic .parent-portal-sidebar > ul .nav-option.show-sub-menu > a {
  background-color: #fff;
}
.parent-portal-sidebar > ul .nav-option.show-sub-menu:after, .parent-portal-sidebar > ul .nav-option.show-sub-menu:before {
  background-color: #fff;
}
.arabic .parent-portal-sidebar > ul .nav-option.show-sub-menu:after, .arabic .parent-portal-sidebar > ul .nav-option.show-sub-menu:before {
  background-color: #fff;
}
.parent-portal-sidebar > ul .nav-option.show-sub-menu .submenu-options {
  display: block;
}
.arabic .parent-portal-sidebar > ul {
  margin-right: 25px;
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .parent-portal-sidebar > ul {
    margin-left: 10px;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-sidebar {
    position: fixed;
    z-index: 999;
    transition: all 300ms;
    left: -250px;
  }
  .parent-portal-sidebar.open {
    top: 114px;
    left: 0;
  }
  .arabic .parent-portal-sidebar.open {
    right: 0;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .parent-portal-sidebar {
    max-width: 204px;
  }
}

.sidebar-toggle {
  display: none;
}
@media screen and (max-width: 768px) {
  .sidebar-toggle {
    width: 2.45rem;
    height: 2.4rem;
    position: absolute;
    top: 3px;
    left: 0;
    margin: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 300ms;
    transition: all 300ms;
    cursor: pointer;
    background: #fff;
    display: block;
    border-radius: 0 5px 5px 0;
    z-index: 9;
  }
  .arabic .sidebar-toggle {
    left: auto;
    right: 0;
  }
  .sidebar-toggle.open {
    left: 242px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
  }
  .arabic .sidebar-toggle.open {
    left: auto;
    right: 205px;
  }
  .sidebar-toggle.open span {
    left: 0.6rem;
    width: 60%;
  }
  .sidebar-toggle.open span:nth-child(1) {
    top: 1.1rem;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .sidebar-toggle.open span:nth-child(2) {
    opacity: 0;
    left: -3.75rem;
  }
  .sidebar-toggle.open span:nth-child(3) {
    top: 1.1rem;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .sidebar-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 45%;
    border-radius: 0.5625rem;
    opacity: 1;
    left: 10px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 300ms;
    transition: all 300ms;
    background: #000;
  }
  .sidebar-toggle span:nth-child(1) {
    top: 0.6rem;
  }
  .sidebar-toggle span:nth-child(2) {
    top: 1.1rem;
  }
  .sidebar-toggle span:nth-child(3) {
    top: 1.6rem;
  }
}

.submenu-options {
  background-color: #fff;
  box-shadow: 50px 0 50px rgba(0, 0, 0, 0.1);
  display: none;
  height: calc(100vh - 60px);
  list-style-type: none;
  margin-left: 1px !important;
  padding: 20px 10px 50px;
  position: fixed;
  top: 68px;
  left: 196px;
  z-index: 999;
  animation: 0.5s linear 0s slide;
}
.submenu-options > li {
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.submenu-options > li > a {
  color: #606d8d;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  padding: 14px 10px 11px 10px;
  margin-bottom: 10px;
  display: block;
}
.submenu-options > li > a .svg {
  margin-top: -5px;
  margin-right: 10px;
}
.submenu-options > li > a:hover {
  background-color: #68788E;
  border-bottom-color: #68788E;
  border-radius: 5px;
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.submenu-options > li:hover > a {
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.submenu-options > li:first-child {
  margin-top: 5px;
}
.submenu-options > li:last-child {
  margin-bottom: 5px;
}
.submenu-options > li:after {
  content: "";
  background-color: #dfe2eb;
  height: 1px;
  position: absolute;
  right: 5px;
  bottom: -5px;
  width: calc(100% - 10px);
}
.arabic .submenu-options {
  border-right-color: transparent;
  border-left-color: #68788E;
  border-radius: 10px 0 0 10px;
  margin-right: 1px;
  right: 196px;
  left: unset;
}
.arabic .submenu-options > li {
  text-align: right;
}
@keyframes slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .submenu-options {
    top: 126px;
  }
}

.parent-portal-wrapper {
  display: flex;
  display: -ms-flexbox;
  margin-top: 68px;
}
.parent-portal-wrapper .parent-portal-container {
  padding: 0px 24px 35px 45px;
  position: relative;
  width: 100%;
  margin-left: 234px;
  background-color: #F5F7FA;
}
.parent-portal-wrapper .parent-portal-container .user-info {
  display: flex;
  display: -ms-flexbox;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  padding-bottom: 5px;
  margin-top: 12px;
}
.parent-portal-wrapper .parent-portal-container .user-info .name {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600 !important;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .user-info {
    padding-left: 45px;
  }
  .arabic .parent-portal-wrapper .parent-portal-container .user-info {
    padding-right: 45px;
  }
}
.parent-portal-wrapper .parent-portal-container .reward-container {
  border-radius: 16px;
  margin-right: 13px;
  overflow: hidden;
  position: relative;
}
.parent-portal-wrapper .parent-portal-container .reward-container .header-content {
  /*padding: 10px 15px; */
  position: absolute;
  top: 22%;
  left: 4%;
  z-index: 2;
}
.parent-portal-wrapper .parent-portal-container .reward-container .header-content .title {
  color: #073f72;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 25px;
  /* max-width: 300px;*/
  padding-bottom: 22px;
}
.arabic .parent-portal-wrapper .parent-portal-container .reward-container .header-content .title {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .reward-container .header-content .title {
    font-size: 12px;
    padding-bottom: 5px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .parent-portal-wrapper .parent-portal-container .reward-container .header-content .title {
    font-size: 14px;
    padding-bottom: 5px;
  }
}
@media screen and (min-width: 1201px) and (max-width: 1560px) {
  .parent-portal-wrapper .parent-portal-container .reward-container .header-content .title {
    font-size: 18px !important;
    padding-bottom: 14px;
  }
}
.parent-portal-wrapper .parent-portal-container .reward-container .header-content .button {
  border-radius: 8px;
  border-color: #68788E;
}
.arabic .parent-portal-wrapper .parent-portal-container .reward-container .header-content .button {
  float: right;
}
@media screen and (max-width: 1440px) {
  .parent-portal-wrapper .parent-portal-container .reward-container .header-content .button {
    line-height: 20px;
    height: auto;
  }
}
.arabic .parent-portal-wrapper .parent-portal-container .reward-container .header-content {
  margin-right: 0;
}
.parent-portal-wrapper .parent-portal-container .reward-container .banner-right {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.parent-portal-wrapper .parent-portal-container .reward-container .banner-right.b-width {
  width: 50%;
}
@media screen and (max-width: 991px) {
  .parent-portal-wrapper .parent-portal-container .reward-container .banner-right.b-width {
    width: 40%;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .reward-container .banner-right.b-width {
    width: 30%;
  }
}
.parent-portal-wrapper .parent-portal-container .reward-container .owl-stage-outer {
  height: 100%;
}
.parent-portal-wrapper .parent-portal-container .reward-container .owl-stage-outer .owl-stage {
  height: 100%;
}
.parent-portal-wrapper .parent-portal-container .reward-container .owl-stage-outer .owl-stage .owl-item {
  height: 100%;
}
.parent-portal-wrapper .parent-portal-container .reward-container .owl-dots {
  position: absolute;
  bottom: 20px;
  left: 100px;
  right: 0;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .reward-container .owl-dots {
    left: 30px;
    bottom: 5px;
  }
}
.parent-portal-wrapper .parent-portal-container .reward-container .owl-dots .owl-dot.active span {
  border: 2px solid #FEDB00;
  background-color: #FEDB00;
  padding: 3px;
  border-radius: 50%;
  padding: 2px;
}
.parent-portal-wrapper .parent-portal-container .reward-container .owl-dots .owl-dot span {
  border: 2px solid #fff;
  background-color: transparent;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  padding: 2px;
  margin: 2px;
}
.parent-portal-wrapper .parent-portal-container .reward-container .owl-dots .owl-dot:hover span {
  border: 2px solid #FEDB00;
  background: #FEDB00;
  padding: 3px;
}
.arabic .parent-portal-wrapper .parent-portal-container .reward-container {
  margin-left: 13px;
  margin-right: 0px;
}
@media screen and (max-width: 991px) {
  .parent-portal-wrapper .parent-portal-container .reward-container {
    margin-right: 0;
    min-height: 94px;
  }
  .arabic .parent-portal-wrapper .parent-portal-container .reward-container {
    margin-left: 0px;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .reward-container {
    min-height: 94px;
  }
}
.parent-portal-wrapper .parent-portal-container .main-actions {
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.parent-portal-wrapper .parent-portal-container .main-actions .button {
  height: 60px;
  padding-left: 16px;
  position: relative;
  text-align: left;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 18px;
  border: 0px;
  justify-content: start;
}
@media screen and (max-width: 1366px) {
  .parent-portal-wrapper .parent-portal-container .main-actions .button {
    padding-left: 7px;
    padding-right: 10px;
    font-size: 0.575rem !important;
    margin-bottom: 18px;
  }
}
.parent-portal-wrapper .parent-portal-container .main-actions .button.quick-link {
  border-radius: 8px;
  min-height: 58px;
  background-color: #F1F6FC;
}
.parent-portal-wrapper .parent-portal-container .main-actions .button:first-child {
  margin-bottom: 18px;
}
.parent-portal-wrapper .parent-portal-container .main-actions .button .primary-icon {
  display: inline-block;
  margin-right: 10px;
  text-align: center;
}
@media screen and (max-width: 1366px) {
  .parent-portal-wrapper .parent-portal-container .main-actions .button .primary-icon {
    margin-right: 6px;
  }
}
.parent-portal-wrapper .parent-portal-container .main-actions .button .primary-icon .svg {
  margin-top: -4px;
}
.parent-portal-wrapper .parent-portal-container .main-actions .button .primary-icon .svg path {
  fill: #516fb9;
}
.arabic .parent-portal-wrapper .parent-portal-container .main-actions .button .primary-icon {
  margin-right: 0;
  margin-left: 10px;
}
.parent-portal-wrapper .parent-portal-container .main-actions .button .right-icon {
  height: 20px;
  position: absolute;
  top: 5px;
  right: 12px;
  text-align: center;
  width: 20px;
}
.parent-portal-wrapper .parent-portal-container .main-actions .button .right-icon .svg {
  height: 20px;
  width: 20px;
}
.parent-portal-wrapper .parent-portal-container .main-actions .button .right-icon .svg path {
  stroke: #002B64;
}
.arabic .parent-portal-wrapper .parent-portal-container .main-actions .button .right-icon {
  right: unset;
  left: 12px;
}
@media screen and (min-width: 1200px) and (max-width: 1560px) {
  .parent-portal-wrapper .parent-portal-container .main-actions .button {
    height: 50px;
  }
  .parent-portal-wrapper .parent-portal-container .main-actions .button .right-icon {
    top: 16px;
  }
}
.arabic .parent-portal-wrapper .parent-portal-container .main-actions {
  margin-right: 0;
  margin-left: 0px !important;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .main-actions {
    margin-top: 15px;
    margin-right: 0;
    margin-bottom: 15px;
    margin-left: 0px;
  }
  .arabic .parent-portal-wrapper .parent-portal-container .main-actions {
    margin-left: 0px;
  }
}
@media screen and (min-width: 769px) and (max-width: 991px) {
  .parent-portal-wrapper .parent-portal-container .main-actions {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
.parent-portal-wrapper .parent-portal-container .profile-status {
  background: url(./../assets/images/profile-bg.png) no-repeat top left #083169;
  background-size: cover;
  border-radius: 20px;
  display: inline-block;
  flex-direction: column;
  padding: 15px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .profile-status {
    width: 94% !important;
    margin-left: 8px;
  }
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-img {
  position: relative;
  margin-top: -50px;
  /*Student Status*/
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-img img {
  border-radius: 50%;
  height: 72px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-img .inactive-status {
  background: #FEEBEF;
  padding: 2px 10px;
  border: 1px solid #FB1F52;
  border-bottom-right-radius: 16px;
  border-top-left-radius: 16px;
  top: -15px;
  left: -15px;
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-img .inactive-status span.status-msg {
  font-size: 0.75rem;
  color: #FB1F52;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-name {
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 12px;
  padding-top: 12px;
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-name .svg {
  margin-top: -6px;
  margin-left: 5px;
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-name .svg path {
  fill: #8bf6ff;
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-name .selectimg {
  background: url(./../assets/images/dropdown-white-arrow.svg) no-repeat right center transparent !important;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #fff;
  border: none;
  outline: none;
  max-width: 230px;
  min-width: 180px;
  padding-right: 12px;
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-name .selectimg option {
  background: #0099EB;
}
.parent-portal-wrapper .parent-portal-container .profile-status .user-name .selectimg .select-selected {
  color: #f00;
}
.parent-portal-wrapper .parent-portal-container .profile-status .school-info {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  padding-bottom: 1rem;
  line-height: 140%;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
}
.parent-portal-wrapper .parent-portal-container .profile-status .profile-complet-status {
  font-size: 0.625rem;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 8px;
  min-width: 50%;
  min-height: 30px;
  display: inline-block;
  max-width: 100%;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  backdrop-filter: blur(4px);
  font-size: 12px;
}
.parent-portal-wrapper .parent-portal-container .profile-status .status-link {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
}
.parent-portal-wrapper .parent-portal-container .profile-status .status-link .value {
  background-color: #ffed8b;
  border-radius: 20px;
  color: #0044b2;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.625rem;
  font-weight: normal;
  height: 17px;
  margin-left: 5px;
  padding-top: 2px;
  text-align: center;
  width: 35px;
}
.parent-portal-wrapper .parent-portal-container .profile-status .status-link a {
  color: #002B64;
  text-decoration: none;
}
.parent-portal-wrapper .parent-portal-container .profile-status .status-link a:hover {
  color: #002B64;
  text-decoration: none;
}
.parent-portal-wrapper .parent-portal-container .profile-status .status-link .text-btn {
  color: #8bf6ff;
  font-size: 0.75rem;
  margin-top: 0.25rem !important;
}
.parent-portal-wrapper .parent-portal-container .profile-status .status-link .text-btn .icon-circle {
  background-color: rgba(139, 246, 255, 0.2);
  border-radius: 50%;
  height: 18px;
  margin-left: 7px;
  width: 18px;
}
.parent-portal-wrapper .parent-portal-container .profile-status .status-link .text-btn .icon-circle .svg {
  height: 10px;
  margin-top: -6px;
  margin-left: 0px;
  width: 10px;
}
.parent-portal-wrapper .parent-portal-container .profile-status .status-link .text-btn .icon-circle .svg path {
  fill: #8bf6ff;
}
.arabic .parent-portal-wrapper .parent-portal-container .profile-status .status-link .text-btn .icon-circle {
  margin-left: 0;
  margin-right: 7px;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .profile-status {
    margin-top: 42px;
    min-height: 228px;
  }
}
@media screen and (min-width: 769px) and (max-width: 991px) {
  .parent-portal-wrapper .parent-portal-container .profile-status {
    margin-top: 15px;
  }
}
.parent-portal-wrapper .parent-portal-container .view-all-btn {
  color: #00A3E0;
  font-size: 0.75rem;
  height: 25px;
  padding: 4px 14px;
  padding-right: 14px !important;
}
.parent-portal-wrapper .parent-portal-container .view-all-btn span {
  border-bottom: 1px solid #00A3E0;
}
.parent-portal-wrapper .parent-portal-container .view-all-btn .icon {
  height: 16px;
  margin-top: -8px;
  margin-left: 0px;
  width: 16px;
}
.parent-portal-wrapper .parent-portal-container .view-all-btn .icon .svg {
  height: 16px;
  width: 16px;
}
.parent-portal-wrapper .parent-portal-container .view-all-btn .icon .svg path {
  fill: transparent;
  stroke: #00A3E0;
}
.arabic .parent-portal-wrapper .parent-portal-container .view-all-btn .icon {
  margin-right: 5px;
  margin-left: 0;
}
.parent-portal-wrapper .parent-portal-container .line {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .line {
    align-items: center;
  }
}
.parent-portal-wrapper .parent-portal-container .sub-title {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600 !important;
  font-size: 0.875rem;
}
.parent-portal-wrapper .parent-portal-container .grade-container {
  min-height: 323px;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .grade-container {
    min-height: 405px;
  }
  .parent-portal-wrapper .parent-portal-container .grade-container .no-data-container {
    top: 38%;
  }
  .parent-portal-wrapper .parent-portal-container .grade-container .line {
    display: inline-grid !important;
  }
}
.parent-portal-wrapper .parent-portal-container .attendance-container {
  padding: 15px 20px 0 20px;
  min-height: 225px;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date {
  align-items: center;
  display: inline-flex;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .title-text {
  color: #989da2;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  padding-left: 13px;
  padding-right: 25px;
  white-space: nowrap;
}
.arabic .parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .title-text {
  padding-right: 13px;
  padding-left: 25px;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates {
  list-style-type: none;
  margin-top: -15px;
  margin-bottom: 0;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard {
  align-items: center;
  border: solid 1px transparent;
  border-radius: 20px;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  height: 31px;
  margin-bottom: 11px;
  padding-left: 39px;
  position: relative;
  width: 85px;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard span {
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  font-weight: normal;
  height: 26px;
  justify-content: center;
  margin-right: 10px;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 26px;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard:last-child {
  margin-bottom: 0;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard.absent {
  background-color: #fff2f2;
  border-color: #f8b2b2;
  color: #fb1616;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard.present {
  background-color: #e3fdee;
  border-color: #65d392;
  color: #33b267;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard.current-day {
  background-color: #40bc72;
  border-color: #40bc72;
  color: #fff;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard.current-day span {
  color: #40bc72;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard.upcoming {
  background-color: #f5f5f5;
  border-color: #e3e3e3;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard.upcoming span {
  color: #888;
}
.arabic .parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates .date-dashboard {
  padding-right: 20px;
}
.arabic .parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates {
  margin-left: 20px;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date .dates {
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .attendance-container .attendance-date {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container {
  border-radius: 12px;
  display: inline-flex;
  margin-bottom: 20px;
  padding-top: 25px;
  padding-left: 0px;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details {
  width: 100%;
  align-self: center;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details {
    width: 100%;
    justify-content: center;
    display: flex;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details {
    display: flex;
    justify-content: space-around;
  }
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .date-info {
  display: inline-flex;
  flex-direction: column;
  padding-bottom: 40px;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .date-info span {
  white-space: nowrap;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .date-info span:first-child {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .date-info span:last-child {
  color: #8593a0;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.625rem;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .graph-color-indicator {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 90%;
  margin: auto;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .graph-color-indicator .color-type {
  color: #68788E;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 10px;
  width: 50%;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .graph-color-indicator .color-type:last-child {
  padding-bottom: 0;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .graph-color-indicator .color-type .color-mark {
  border-radius: 20px;
  display: inline-block;
  height: 12px;
  margin-right: 7px;
  width: 12px;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .graph-color-indicator .color-type .color-mark.present {
  background-color: #00CD96;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .graph-color-indicator .color-type .color-mark.tardy {
  background-color: #FFAF4E;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .graph-color-indicator .color-type .color-mark.excused {
  background-color: #4664FF;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .graph-color-indicator .color-type .color-mark.unexcused {
  background-color: #FA0F07;
}
.arabic .parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-mark-details .graph-color-indicator .color-type .color-mark {
  margin-right: 0;
  margin-left: 7px;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .chart-value {
  display: inline-flex;
  flex-direction: column;
  margin-left: 5px;
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  transform: translateY(-45%);
  text-align: center;
  z-index: 99;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .chart-value .value-percentage {
  color: #093169;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 1rem;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .chart-value .label {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 43, 100, 0.7);
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .donut-chart svg {
  margin-top: -6px;
  overflow: visible !important;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .donut-chart svg > g > path {
  fill: transparent;
}
.parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-view {
  width: 100%;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .attendance-container .graph-container .graph-view {
    margin-left: -20px;
    margin: auto;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .attendance-container .graph-container {
    padding-bottom: 15px;
    padding-left: 10px;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .attendance-container {
    margin-bottom: 15px;
    padding-right: 10px;
    padding-left: 10px;
  }
}
.parent-portal-wrapper .parent-portal-container .fee-reminder {
  width: 100%;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .wrap {
  padding-bottom: 16px;
  border-bottom: 1px solid #D9E8F1;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .wrap .total-due {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 46px;
  padding: 0px 10px;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn {
  background-color: transparent;
  border-color: transparent;
  border-radius: 10px;
  height: 74px;
  position: relative;
  width: 100%;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn div {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.4;
  text-align: left;
  margin-left: 10px;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn div .label {
  color: #5b6d7e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn div .amount {
  color: #002B64;
  font-size: 0.75rem;
  font-weight: 600;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn .mark-icon {
  align-items: center;
  background-color: #F1F6FC;
  border: 0px;
  border-radius: 7px;
  display: inline-flex;
  height: 64px;
  justify-content: center;
  width: 64px;
  padding: 10px;
}
.arabic .parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn .mark-icon {
  margin-right: 0;
  margin-left: 16px;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn .mark-icon svg path.icon-fill {
  fill: #ef5350;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn .right-icon {
  background-color: #fff;
  border-radius: 50%;
  height: 22px;
  position: absolute;
  right: 13px;
  width: 22px;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn .right-icon .svg {
  margin-top: -17px;
  margin-left: 2px;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn .right-icon .svg path {
  fill: #00A3E0;
}
.arabic .parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn .right-icon {
  right: unset;
  left: 13px;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn .pay-now {
  color: #002B64;
  font-family: 0.75rem;
  font-weight: 600;
  height: 36px;
  padding: 4px 14px;
  padding-right: 14px !important;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn:first-child {
  margin-bottom: 0px;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn.no-due {
  border-color: transparent;
  background-color: transparent;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn.no-due div .amount {
  color: #002B64;
  font-size: 0.75rem;
  font-weight: 600;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn.no-due .mark-icon {
  border: 0px;
  background-color: #F1F6FC;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn.no-due .mark-icon svg path {
  fill: #548b30;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .total-outstanding-btn.no-due .mark-icon svg path.icon-fill {
  fill: #548b30;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .fee-reminder {
    padding-right: 10px;
    padding-left: 10px;
  }
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .gems-rewards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .gems-rewards .label {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .gems-rewards .label .arabic {
  text-align: right;
}
.parent-portal-wrapper .parent-portal-container .fee-reminder .gems-rewards .label .points {
  color: #19AC56;
}
.parent-portal-wrapper .parent-portal-container .report-header .select:before {
  content: "";
  background: url(./../assets/images/dropdown-arrow.png) no-repeat left top;
  background-size: cover;
  width: 16px;
  height: 8px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 20px;
  z-index: 0;
}
.parent-portal-wrapper .parent-portal-container .report-header select {
  background-color: #fff;
  border-color: #CFD5DE;
  border-radius: 8px;
  border-style: solid;
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  height: 48px;
  padding-right: 40px;
  padding-left: 15px;
}
.arabic .parent-portal-wrapper .parent-portal-container .report-header select {
  padding-right: 15px;
  padding-left: 30px;
  width: 100%;
}
.parent-portal-wrapper .parent-portal-container .reports-container {
  padding: 15px 20px 20px 20px;
}
.parent-portal-wrapper .parent-portal-container .reports-container .select:before {
  content: "";
  background: url(./../assets/images/dropdown-arrow.png) no-repeat left top;
  background-size: cover;
  width: 16px;
  height: 8px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 20px;
  z-index: 0;
}
.parent-portal-wrapper .parent-portal-container .reports-container select {
  background-color: #fff;
  border-color: #CFD5DE;
  border-radius: 8px;
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  height: 48px;
  padding-right: 40px;
  padding-left: 15px;
}
.arabic .parent-portal-wrapper .parent-portal-container .reports-container select {
  padding-right: 15px;
  padding-left: 30px;
  width: 100%;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .col-heading {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  padding-bottom: 10px;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .col-heading .arabic {
  text-align: right;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn {
  background-color: #fff;
  border-color: #D9E8F1;
  border-radius: 8px;
  color: #0a1e3e;
  font-size: 0.625rem;
  height: 72px;
  margin-bottom: 8px;
  padding-left: 10px;
  position: relative;
  text-align: center;
  width: 100%;
  justify-content: start;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn .document-info {
  width: 85%;
  line-height: 15px;
  display: inline-flex;
  text-align: left;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  white-space: normal;
}
.arabic .parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn .document-info {
  text-align: right;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn:last-child {
  margin-bottom: 0;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn .pdf-icon {
  margin-right: 8px;
  height: 50px;
  width: 50px;
  border-radius: 8px;
  background: #F1F6FC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arabic .parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn .pdf-icon {
  margin-right: 0;
  margin-left: 13px;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn .download-icon {
  background-color: transparent;
  border-radius: 50%;
  position: absolute;
  right: 14px;
  width: 26px;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn .download-icon .download-link svg.svg {
  margin-top: -15px;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn .download-icon img {
  vertical-align: super;
}
.arabic .parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .document-download-btn .download-icon {
  right: unset;
  left: 14px;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .col-md-6:first-child {
  position: relative;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .col-md-6:first-child:after {
  content: "";
  background-color: #ddd;
  height: calc(100% - 5px);
  position: absolute;
  top: 5px;
  right: -1px;
  width: 1px;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .col-md-6:first-child {
    padding-bottom: 15px;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .reports-container .documents-collection {
    min-height: 350px;
  }
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .custom-tabs {
  background-color: #fff;
  border-radius: 0px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin: 8px -20px 15px -20px;
  padding: 0px 10px;
  border-bottom: 1px solid #D9E8F1;
  color: #68788E;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .custom-tabs .nav-item .nav-link {
  justify-content: center;
  min-width: 107px;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0px;
  box-shadow: none;
  color: #68788E;
  padding-top: 6px;
  padding-bottom: 8px;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .custom-tabs .nav-item .nav-link.active {
  color: #002B64;
  border-bottom: 3px solid #00A3E0;
  font-weight: 600;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .custom-tabs .nav-item .nav-link .svg g {
  stroke: currentColor;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .custom-tabs .nav-item .nav-link .svg g circle {
  fill: transparent;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .custom-tabs .nav-item .nav-link .svg circle {
  fill: currentColor;
}
.parent-portal-wrapper .parent-portal-container .reports-container .documents-collection .report-max-height {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}
.parent-portal-wrapper .parent-portal-container .reports-container .line {
  display: inline-flex;
}
.parent-portal-wrapper .parent-portal-container .reports-container .line .documents-collection {
  min-height: 355px;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .reports-container {
    padding-right: 10px;
    padding-left: 10px;
  }
}
.parent-portal-wrapper .parent-portal-container .notice-container {
  min-height: 246px;
}
.parent-portal-wrapper .parent-portal-container .assignment-container {
  padding: 15px 20px 20px 20px;
  height: 100%;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail {
  list-style-type: none;
  margin-bottom: 0;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment {
  align-items: center;
  border-bottom: 1px solid #ddd;
  display: inline-flex;
  height: 60px;
  min-height: 70px;
  justify-content: space-between;
  width: 100%;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment:last-child {
  border-bottom: 0;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .title-with-date {
  display: inline-flex;
  flex-direction: column;
  width: 70%;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .title-with-date .name {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .title-with-date .date-info {
  color: #8b8787;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.625rem;
  margin-left: 15px;
}
.arabic .parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .title-with-date {
  text-align: right;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .right-align {
  display: inline-flex;
  justify-content: space-between;
  width: 30%;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .right-align .attachment-count {
  align-items: center;
  background-color: #f2f5f8;
  border-radius: 20px;
  color: #4480b7;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.5625rem;
  height: 19px;
  justify-content: center;
  line-height: 19px;
  width: 40px;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .right-align .attachment-count img {
  margin-right: 4px;
}
.arabic .parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .right-align .attachment-count img {
  margin-right: 0;
  margin-left: 4px;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .right-align .right-arrow {
  background-color: #e3f6ff;
  border-radius: 50%;
  height: 22px;
  width: 22px;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .right-align .right-arrow .svg {
  margin-top: -6px;
  margin-left: 8px;
}
.parent-portal-wrapper .parent-portal-container .assignment-container .assignments-detail .assignment .right-align .right-arrow .svg path {
  fill: #00A3E0;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .assignment-container {
    margin-bottom: 15px;
    padding-right: 10px;
    padding-left: 10px;
    min-height: 225px;
  }
}
.parent-portal-wrapper .parent-portal-container .activities-container {
  padding: 15px 20px 20px 20px;
}
.parent-portal-wrapper .parent-portal-container .activities-container table td:first-child img {
  height: 30px;
  margin-right: 15px;
  width: 30px;
  border-radius: 6px;
}
.arabic .parent-portal-wrapper .parent-portal-container .activities-container table td:first-child img {
  margin-right: 0;
  margin-left: 15px;
}
.parent-portal-wrapper .parent-portal-container .activities-container table td:first-child .title {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.parent-portal-wrapper .parent-portal-container .activities-container table td .icon {
  border-radius: 4px;
  width: 25px;
  height: 21px;
}
.parent-portal-wrapper .parent-portal-container .activities-container table td .icon.view {
  background-color: #e5f6fd;
}
.parent-portal-wrapper .parent-portal-container .activities-container table td .icon.cancel {
  background-color: #ffeced;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container .activities-container {
    padding-right: 10px;
    padding-left: 10px;
  }
}
.parent-portal-wrapper .parent-portal-container .activities-container .custom-tabs {
  background-color: #fff;
  border-radius: 0px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin: 8px -20px 15px -20px;
  padding: 0px 10px;
  border-bottom: 1px solid #D9E8F1;
  color: #68788E;
}
.parent-portal-wrapper .parent-portal-container .activities-container .custom-tabs .nav-item .nav-link {
  justify-content: center;
  min-width: 107px;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0px;
  box-shadow: none;
  color: #68788E;
  padding-top: 6px;
  padding-bottom: 8px;
}
.parent-portal-wrapper .parent-portal-container .activities-container .custom-tabs .nav-item .nav-link.active {
  color: #002B64;
  border-bottom: 3px solid #00A3E0;
}
.parent-portal-wrapper .parent-portal-container .activities-container .custom-tabs .nav-item .nav-link .svg g {
  stroke: currentColor;
}
.parent-portal-wrapper .parent-portal-container .activities-container .custom-tabs .nav-item .nav-link .svg g circle {
  fill: transparent;
}
.parent-portal-wrapper .parent-portal-container .activities-container .custom-tabs .nav-item .nav-link .svg circle {
  fill: currentColor;
}
.arabic .parent-portal-wrapper .parent-portal-container {
  margin-left: auto;
  margin-right: 198px;
  padding: 0px 45px 35px 0px;
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper .parent-portal-container {
    padding: 0 0 20px 10px;
    margin-left: 0px;
  }
  .arabic .parent-portal-wrapper .parent-portal-container {
    padding: 0px 10px 20px 0px;
    margin-left: auto;
    margin-right: 0px;
  }
}
@media screen and (max-width: 768px) {
  .parent-portal-wrapper {
    margin-top: 130px;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .parent-portal-wrapper {
    -ms-overflow-x: hidden;
  }
}

.select {
  line-height: 1;
  position: relative;
}
.select select {
  padding-right: 10px;
  padding-left: 10px;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  appearance: none;
}
.select select:focus {
  outline: none;
}
.select select::-ms-expand {
  display: none;
}
.select.language-dropdown {
  margin-right: 16px;
}
.select.language-dropdown select {
  color: #3a3a3a;
  border: solid 1px #8e92a2;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  height: 30px;
  min-width: 90px;
  border-radius: 14px;
  background-color: #fff;
  padding-right: 26px;
  padding-left: 14px;
}
.arabic .select.language-dropdown {
  margin-right: 0;
  margin-left: 16px;
}
.select.language-dropdown:before {
  background: url(./../assets/images/arrow-down.svg) no-repeat left top;
  width: 12px;
  height: 7px;
  top: 13px;
}
.select:before {
  content: "";
  background: url(./../assets/images/dropdown-arrow.png) no-repeat left top;
  background-size: cover;
  width: 16px;
  height: 8px;
  pointer-events: none;
  position: absolute;
  right: 18px;
  top: 20px;
  z-index: 0;
}
.arabic .select:before {
  right: unset;
  left: 10px;
}

.responsive-view {
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .responsive-view {
    flex-direction: column;
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .responsive-view {
    flex-wrap: nowrap !important;
  }
}

.notice-section {
  margin-right: 10px;
  margin-bottom: 0;
  list-style: none;
}
.notice-box {
  color: rgba(176, 173, 255, 0.3019607843);
  font-size: 0.75rem;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 10px;
  min-height: 86px;
}
.notice-box-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 245px;
  padding-left: 14px;
  background: url(./../assets/images/notice-list-icon.png) no-repeat left center transparent;
}
.notice-box .date-label {
  color: #68788E;
}
.notice-box-content {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  color: #68788E;
}
.notice-box.red-bg {
  background-color: rgba(176, 173, 255, 0.3019607843);
}
.notice-box.yellow-bg {
  background-color: rgba(176, 173, 255, 0.3019607843);
}
.notice-box.blue-bg {
  background-color: rgba(176, 173, 255, 0.3019607843);
}
.arabic .notice-box {
  border-right: 8px solid transparent;
  border-left: 0px solid transparent;
}
.arabic .notice-box.red-bg {
  border-color: #B73D91;
}
.arabic .notice-box.yellow-bg {
  border-color: #BCE938;
}
.arabic .notice-box.blue-bg {
  border-color: #68788E;
}

.progress-label {
  color: #194064;
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.arabic .progress-label {
  float: right;
}
.progress-startvalue, .progress-endvalue {
  color: #8b8787;
  font-size: 0.625rem;
  margin: 0 5px;
}
.progress-detail {
  border-radius: 0.25rem;
  display: flex;
  height: 0.75rem;
  font-size: 0.75rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.25rem;
}
.progress-detail.blue-bg {
  background-color: rgba(47, 155, 195, 0.2);
}
.progress-detail.blue-bg .progress-bar {
  background-color: #2F9BC3;
}
.progress-detail.blue-bg .progress-percent {
  border-color: #2F9BC3;
}
.progress-detail.green-bg {
  background-color: rgba(0, 205, 150, 0.2);
}
.progress-detail.green-bg .progress-bar {
  background-color: #00CD96;
}
.progress-detail.green-bg .progress-percent {
  border-color: #00CD96;
}
.progress-detail.yellow-bg {
  background-color: rgba(188, 233, 56, 0.2);
}
.progress-detail.yellow-bg .progress-bar {
  background-color: #BCE938;
}
.progress-detail.yellow-bg .progress-percent {
  border-color: #BCE938;
}
.progress-detail.pink-bg {
  background-color: rgba(244, 187, 59, 0.2);
}
.progress-detail.pink-bg .progress-bar {
  background-color: #f4bb3b;
}
.progress-detail.pink-bg .progress-percent {
  border-color: #f4bb3b;
}
.progress-detail.purple-bg {
  background-color: rgba(146, 63, 205, 0.2);
}
.progress-detail.purple-bg .progress-bar {
  background-color: #923FCD;
}
.progress-detail.purple-bg .progress-percent {
  border-color: #923FCD;
}
.progress-bar {
  position: relative;
  overflow: visible !important;
  border-radius: 0.25rem;
}
.progress-percent {
  position: absolute;
  top: -10px;
  right: -15px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  line-height: 36px;
  background: transparent;
  color: #002B64;
  border: none;
  text-align: center;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}

.today-event-details .assignment .title-with-date {
  width: 100% !important;
}
.today-event-details .assignment .title-with-date p span {
  width: 4px;
  height: 11px;
  background-color: #d8685f;
  display: inline-block;
  border-radius: 15px;
  margin-right: 7px;
}

.timetable-container {
  min-height: 338px;
}
.timetable-container .time-table-content table thead tr th {
  border: solid 1px #E6EFF5;
  padding: 5px;
}
.timetable-container .time-table-content table thead tr .blank-head {
  background-color: #fff;
}
.timetable-container .time-table-content table thead tr .reg-item {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  text-align: center;
  color: #68788E;
  height: 56px;
  vertical-align: middle;
}
.timetable-container .time-table-content table thead tr .reg-item:first-child {
  border-top-left-radius: 16px;
}
.timetable-container .time-table-content table thead tr .reg-item:last-child {
  border-top-right-radius: 16px;
}
.timetable-container .time-table-content table tbody tr td {
  border: solid 1px #E6EFF5;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  color: #194064;
  padding: 10px;
}
.timetable-container .time-table-content table tbody tr td:first-child {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500 !important;
  font-size: 14px;
  color: #194064;
  text-align: center;
  height: 60px;
  vertical-align: middle;
  position: relative;
}
.timetable-container .time-table-content table tbody tr .subject {
  min-width: 115px;
  width: 115px;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
}
.timetable-container .time-table-content table tbody tr .subject span {
  white-space: nowrap;
  width: 90px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
.timetable-container .time-table-content table tbody tr .sun-item-color {
  background-color: #FFFFFF;
}
.timetable-container .time-table-content table tbody tr .mon-item-color {
  background-color: #FFFFFF;
}
.timetable-container .time-table-content table tbody tr .tue-item-color {
  background-color: #FFFFFF;
}
.timetable-container .time-table-content table tbody tr .wed-item-color {
  background-color: #FFFFFF;
}
.timetable-container .time-table-content table tbody tr .thu-item-color {
  background-color: #FFFFFF;
}
.timetable-container .time-table-content table tbody tr .fri-item-color {
  background-color: #FFFFFF;
}
.timetable-container .time-table-content table tbody tr .sun-heaad-color .border-color {
  border-left: solid 3px #EDD8F0;
  position: absolute;
  left: -2px;
  top: 14px;
  bottom: 0;
  width: 3px;
  height: 33px;
}
.timetable-container .time-table-content table tbody tr .mon-heaad-color .border-color {
  border-left: solid 3px #16DBCC;
  position: absolute;
  left: -2px;
  top: 14px;
  bottom: 0;
  width: 3px;
  height: 33px;
}
.timetable-container .time-table-content table tbody tr .tue-heaad-color .border-color {
  border-left: solid 3px #166FDB;
  position: absolute;
  left: -2px;
  top: 14px;
  bottom: 0;
  width: 3px;
  height: 33px;
}
.timetable-container .time-table-content table tbody tr .wed-heaad-color .border-color {
  border-left: solid 3px #DB6216;
  position: absolute;
  left: -2px;
  top: 14px;
  bottom: 0;
  width: 3px;
  height: 33px;
}
.timetable-container .time-table-content table tbody tr .thu-heaad-color .border-color {
  border-left: solid 3px #FFAE4C;
  position: absolute;
  left: -2px;
  top: 14px;
  bottom: 0;
  width: 3px;
  height: 33px;
}
.timetable-container .time-table-content table tbody tr .fri-heaad-color .border-color {
  border-left: solid 3px #B7DB16;
  position: absolute;
  left: -2px;
  top: 14px;
  bottom: 0;
  width: 3px;
  height: 33px;
}

.owl-carousel-container .owl-carousel.owl-theme .owl-nav {
  position: absolute;
  top: unset;
  right: 0;
  margin-top: 0;
  bottom: -45px;
}
.owl-carousel-container .owl-carousel.owl-theme .owl-nav button {
  background: #fff !important;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  line-height: 20px;
  border: 1px solid #CED3DE;
}
.owl-carousel-container .owl-carousel.owl-theme .owl-nav button span {
  display: inline-block;
  margin-left: 1px;
  font-size: 40px;
  font-weight: 300;
  color: #222B45;
}
.owl-carousel-container .owl-carousel.owl-theme .owl-nav button:focus {
  border: 1px solid #CED3DE;
  outline: none;
}
.owl-carousel-container .owl-carousel.owl-theme .owl-nav .disabled {
  background-color: #f4f4f4 !important;
  opacity: 0.5;
}
.owl-carousel-container .owl-carousel.owl-theme .owl-nav .disabled span {
  color: #bfbfbf;
}
.owl-carousel-container .owl-carousel.owl-theme .owl-dots {
  display: none;
  height: 0px;
}

.owl-wrapper .custom-pagination {
  text-align: left;
  color: #68788E;
  margin-top: 23px;
  font-family: Encode Sans;
  font-weight: 400;
  font-size: 14px;
}

.no-data-container {
  width: 100%;
  height: 100%;
  top: 23%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-data-container .no-data-content {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
.no-data-container .no-data-content img {
  display: inline;
  width: 150px !important;
}
.no-data-container .no-data-content p {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  color: #5b6d7e;
}

@media screen and (max-width: 768px) {
  .m-mb20 {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .m-mb10 {
    margin-bottom: 10px;
  }
}

.m-ml-2 {
  margin-left: 0.5rem !important;
}
.arabic .m-ml-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}
@media screen and (max-width: 768px) {
  .m-ml-2 {
    margin-left: 0rem !important;
  }
  .arabic .m-ml-2 {
    margin-right: 0rem !important;
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .mob-drop-fix {
    flex-direction: column;
  }
}

.language-dropdown-box {
  position: relative;
}
.language-dropdown-box .language-arrow {
  border-radius: 8px;
  border: solid 1px #8e92a2;
  margin-right: 10px;
  height: 30px;
  padding-right: 12px;
  padding-left: 14px;
  cursor: pointer;
}
.arabic .language-dropdown-box .language-arrow {
  margin-left: 10px;
  margin-right: 0px;
  padding-left: 12px;
  padding-right: 14px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.language-dropdown-box .language-arrow .lang-title {
  color: #3a3a3a;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  padding-right: 5px;
}
.arabic .language-dropdown-box .language-arrow .lang-title {
  padding-left: 5px;
  padding-right: 0px;
}
.language-dropdown-box .language-dropdown {
  width: 110px;
  border-radius: 8px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
  border: solid 1px #dfe2eb;
  right: 0;
  position: absolute;
  background: #fff;
  top: 38px;
  padding: 20px;
  display: none;
}
.language-dropdown-box .language-dropdown.show {
  display: block;
}
.language-dropdown-box .language-dropdown ul {
  margin-bottom: 0;
}
.language-dropdown-box .language-dropdown ul li {
  margin-bottom: 15px;
  width: 100%;
  list-style: none;
  line-height: 15px;
}
.language-dropdown-box .language-dropdown ul li a {
  color: #8e92a2;
  cursor: pointer;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: none;
  display: block;
}
.language-dropdown-box .language-dropdown ul li:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .language-dropdown-box .language-dropdown {
    z-index: 999;
  }
}

.switch {
  background-color: rgba(255, 255, 255, 0.2);
  width: 150px;
  display: inline-block;
  border-radius: 8px;
  color: #1d2858;
  height: 32px;
  padding: 2px;
  position: relative;
  z-index: 10;
  text-align: center;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  zoom: 1;
  zoom: 1;
}
.switch:before, .switch:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.switch:after {
  clear: both;
}
.switch label {
  float: left;
  width: 50%;
  position: relative;
  z-index: 2;
  line-height: 30px;
  cursor: pointer;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  color: #1d2858;
  border-radius: 10px;
}
.switch input[type=radio] {
  display: none;
}
.switch input[type=radio]:checked + label {
  color: #1d2858;
}
.switch span {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  display: block;
  border-radius: 8px;
  background-color: #FFF;
  transition: all 200ms ease;
}
.switch span.right {
  left: 50%;
  border-radius: 8px;
  transition: all 200ms ease;
}

/* Spinner */
.newsfeeds .spinner {
  box-sizing: border-box;
  position: absolute;
  z-index: 101;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #f5ac5d;
  border-bottom-color: #f5ac5d;
  animation: spinner 0.7s ease infinite;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.newsfeeds .active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.newsfeeds .showShareIcons {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.newsfeeds .open {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.newsfeeds .hide {
  display: none;
}
.newsfeeds :any-link {
  text-decoration: none;
  outline: none;
  color: #f5ac5d;
  font-weight: 600;
  font-size: 96%;
}
@media (min-width: 48rem) {
  .newsfeeds :any-link {
    font-size: 100%;
  }
}
.newsfeeds :any-link:hover, .newsfeeds :any-link:focus-within {
  color: #2c3e50;
}
.newsfeeds *,
.newsfeeds *:before,
.newsfeeds *:after {
  box-sizing: border-box;
}
.newsfeeds .backdrop {
  display: none;
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: rgb(122, 122, 122);
  transition: opacity 0.2s linear;
}
.newsfeeds main {
  height: 100%;
  margin: 0;
  padding: 0;
}
@media (min-width: 60rem) {
  .newsfeeds .container {
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    grid-template-columns: minmax(320px, 1fr) 4fr;
    grid-template-rows: auto;
  }
}
@media only screen and (min-width: 1200px) {
  .newsfeeds .container {
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .newsfeeds .container {
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .newsfeeds .container {
    max-width: 100%;
  }
}
@media only screen and (min-width: 576px) {
  .newsfeeds .container {
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .newsfeeds .container,
  .newsfeeds .container-lg,
  .newsfeeds .container-md,
  .newsfeeds .container-sm,
  .newsfeeds .container-xl {
    width: 100% !important;
  }
}
.newsfeeds #logo {
  background: white;
  border-radius: 50%;
  width: 128px;
  height: 128px;
  padding: 0.25rem;
}
.newsfeeds .footer {
  margin: 3rem 0;
  font-size: 90%;
  text-transform: uppercase;
  text-align: center;
  color: #7f8c8d;
}
.newsfeeds #articles {
  position: relative;
}
@media (min-width: 60rem) {
  .newsfeeds #articles {
    overflow: auto;
    height: 300px;
  }
}
@media only screen and (max-width: 576px) {
  .newsfeeds #articles {
    height: 600px;
    overflow: auto;
  }
}
.newsfeeds .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-template-rows: none;
  grid-auto-rows: 30px;
  grid-gap: 3px;
}
.newsfeeds .content {
  margin: auto;
  width: 94%;
  border-bottom: solid 1px #f0efef;
}
.newsfeeds .content .article-img {
  height: 190px;
}
.newsfeeds .content .article-img img {
  width: 100%;
}
.newsfeeds .content .logo-n-title {
  display: flex;
  align-items: end;
}
.newsfeeds .content .logo-n-title .article-logo {
  width: 70px;
}
.newsfeeds .content .logo-n-title .article-logo img {
  width: 100%;
}
.newsfeeds .content .logo-n-title .title-n-time {
  margin-left: 10px;
}
.newsfeeds .content .logo-n-title .title-n-time h6 {
  margin: 0;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
}
.newsfeeds .content .logo-n-title .title-n-time p {
  margin: 0;
  color: #8b8787;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.625rem;
}
.newsfeeds .content .article-content {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
.newsfeeds .content .bottomicons .shareIcon {
  width: 60px;
  border: none;
  border-radius: 4px;
  padding: 3px 0 3px 0;
  color: rgb(145, 145, 145);
  position: relative;
}
.newsfeeds .content .bottomicons .shareIcon:focus {
  outline: none;
}
.newsfeeds .content .bottomicons .shareIcon::before {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 9px 6px;
  border-color: transparent transparent #f0efef transparent;
  position: absolute;
  top: -9px;
  left: 39%;
}
.newsfeeds .article-item {
  position: relative;
  background: white;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.25s, transform 50ms ease-out 0s;
}
@media (min-width: 48rem) {
  .newsfeeds .article-item {
    font-size: 90%;
    transform: translateY(150px);
    transition: opacity 0.5s, transform 150ms ease-out 0s;
  }
}
.newsfeeds .article-item .photothumb {
  width: 100%;
}
.newsfeeds .article-item .bottomicons {
  display: flex;
  justify-content: space-between;
  margin: 0.8rem 0 0.5rem 0;
  padding: 0;
  list-style: none;
}
.newsfeeds .article-item .bottomicons .custom-input textarea {
  height: auto;
  opacity: 0.5;
}
.newsfeeds .article-item .bottomicons .custom-input textarea:focus {
  opacity: 1;
}
.newsfeeds .article-item .socialIcons {
  position: absolute;
  right: 4.2rem;
  bottom: 4.5rem;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 100ms, transform 50ms ease-in-out 0s;
}
.newsfeeds .article-item .socialIcons li {
  margin: 0.12rem;
  text-align: center;
  cursor: pointer;
}
.newsfeeds .article-item .socialIcons li a {
  display: inline-block;
  width: 20px;
}
.newsfeeds .article-item .socialIcons li a img {
  width: 100%;
}
.newsfeeds #post {
  position: relative;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.newsfeeds .post {
  margin: auto;
  position: relative;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0.25rem;
}
@media (min-width: 60rem) {
  .newsfeeds .post {
    width: 90%;
    padding: 1.25rem;
  }
}
.newsfeeds .post .content {
  margin: auto;
  width: 90%;
}
@media (min-width: 60rem) {
  .newsfeeds .post .content {
    width: 80%;
  }
}
@media (min-width: 60rem) {
  .newsfeeds .post h1,
  .newsfeeds .post h2,
  .newsfeeds .post h3,
  .newsfeeds .post h4,
  .newsfeeds .post h5,
  .newsfeeds .post h6 {
    font-size: 200%;
  }
}
.newsfeeds .post blockquote {
  padding: 0.5rem 1rem 0.5rem 3rem;
  font-size: 100%;
}
@media (min-width: 48rem) {
  .newsfeeds .post blockquote {
    padding: 1rem 2rem 1rem 4rem;
    font-size: 130%;
  }
}
@media (min-width: 64rem) {
  .newsfeeds .post blockquote {
    font-size: 140%;
  }
}
.newsfeeds .post .bottomicons {
  display: flex;
  justify-content: flex-end;
  margin: 0.25rem 0;
  padding: 0;
  list-style: none;
}
.newsfeeds .post .bottomicons li {
  margin: 0.18rem;
  text-align: center;
  cursor: pointer;
  color: #535252;
  filter: opacity(75%) blur(0.02rem);
}
.newsfeeds .post .bottomicons li:hover, .newsfeeds .post .bottomicons li:focus-within {
  filter: opacity(100%) blur(0px) contrast(120%);
}
.newsfeeds .post .socialIcons {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
  background: white;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 100ms, transform 50ms ease-in-out 0s;
}
.newsfeeds .post .socialIcons li {
  margin: 0.12rem;
  text-align: center;
  cursor: pointer;
}
.newsfeeds .post .socialIcons li .fab {
  color: #535252;
  font-size: 1.1rem;
  filter: opacity(55%);
}
.newsfeeds .post .socialIcons li .fab:hover, .newsfeeds .post .socialIcons li .fab:focus-within {
  filter: opacity(100%) contrast(110%);
  color: #f5ac5d;
}
.newsfeeds .owl-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.quick-link-scroll {
  max-height: 205px;
  padding-right: 8px;
  overflow: hidden;
  overflow-y: auto;
}

.modal#telehealthConsentModal {
  /* Fix for modal body display issue */
  /* Fix for flickering transitions */
}
.modal#telehealthConsentModal .modal-body {
  display: block !important; /* Ensure modal body is visible */
}
.modal#telehealthConsentModal .modal-content {
  min-height: 450px;
}
.modal#telehealthConsentModal .modal-custom-header {
  color: #233F61 !important;
  font-size: 22px !important;
}
.modal#telehealthConsentModal .modal-custom-sub-label {
  color: #5D6168;
  font-size: 14px !important;
}
.modal#telehealthConsentModal .stud-card-bg {
  border-radius: 12px;
  background: #F1F6FC;
  border: 1px solid #E6EFF5;
}
.modal#telehealthConsentModal .modal-custom-desc {
  color: #233F61;
}
.modal#telehealthConsentModal .modal-student-card {
  max-width: 56%;
  margin: auto;
}
.modal#telehealthConsentModal .modal-body-desc {
  color: #233F61;
  font-size: 16px !important;
  font-weight: 600;
}
.modal#telehealthConsentModal .btn-outline-decline {
  color: #EB4949;
  border-color: #EB4949;
}

.container_login {
  background: #fff;
}

.header_login {
  padding: 20px 35px;
  position: absolute;
  top: 0;
  right: 27px;
}
@media screen and (max-width: 768px) {
  .header_login {
    padding: 20px 15px;
    width: 100%;
    left: 6px;
  }
}
.header_login .help_text {
  font-size: 12px;
  color: #1d2858;
  margin-right: 6px;
}
.header_login .button_container {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .header_login .button_container {
    display: flex;
    margin-top: 10px;
    justify-content: flex-end;
    margin-right: 10px;
  }
}
.header_login .button_container button {
  border: 1px solid #1d2858;
  border-radius: 8px;
  color: #1d2858;
  height: 32px;
  line-height: 31px;
  padding: 0 15px 0 12px;
  margin-right: 13px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .header_login .button_container button {
    padding: 0 10px 0 10px;
    margin-right: 10px;
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .header_login .button_container button:last-child {
    margin-right: 0;
  }
}
.header_login .button_container button:focus {
  outline: none;
}
.header_login .button_container button img {
  margin-right: 7px;
  margin-top: -4px;
  width: 20px;
}
.arabic .header_login {
  left: -5px;
  right: auto;
}
@media screen and (max-width: 768px) {
  .arabic .header_login {
    left: 6;
    right: auto;
  }
}

.banner {
  max-height: 100vh;
  overflow: hidden;
  width: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .banner {
    background-position: -40px bottom;
    display: block;
    padding-top: 90px;
    background-size: 128%;
    height: auto;
    background-color: #66a1b4;
  }
}
.banner .left_section {
  width: 50%;
  background: url(/assets/images/login-banner-bg.png) no-repeat top left !important;
  background-size: cover !important;
  position: relative;
  height: 100vh;
}
.banner .left_section .login-welcome {
  position: absolute;
  top: 65px;
  left: 65px;
  z-index: 10;
}
.banner .left_section .login-welcome .welcome-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 3px;
  color: #fff;
}
.banner .left_section .login-welcome .gems-connect-label {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 32px;
  color: #fff;
}
.banner .left_section .login-welcome .gems-connect-label span {
  font-weight: 700;
  border-bottom: 4px solid #FEDB00;
  padding-bottom: 6px;
}
.banner .left_section .banner-text {
  font-family: "Encode Sans", sans-serif;
  font-size: 20px;
  color: #fff;
  margin: 0px !important;
  line-height: 26px;
  max-width: 50%;
  position: absolute;
  bottom: 146px;
  left: 102px;
  z-index: 10;
}
.arabic .banner .left_section .banner-text {
  margin: 200px 90px 10px 50px;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .banner .left_section {
    display: none !important;
  }
}
.banner .left_section img {
  width: 38px;
  margin: 0 0 0 0;
  position: absolute;
  left: -42px;
  top: -4px;
}
@media screen and (max-width: 768px) {
  .banner .left_section img {
    margin-top: 20px;
    width: 100%;
  }
}
.banner .left_section .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.banner .left_section .video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%; /* Much larger to ensure full coverage */
  height: 150%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.banner .left_section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
  z-index: 2;
}
.banner .left_section .video-content {
  position: relative;
  z-index: 3;
  color: white;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.banner .right_section {
  width: 50%;
  padding: 60px 60px 60px 20px;
  background: url("../assets/images/login-right-bg.png") no-repeat right bottom #fff;
  display: flex;
  justify-content: center;
  height: 100vh;
  overflow: auto;
}
@media screen and (max-width: 768px) {
  .banner .right_section {
    width: 100%;
    padding: 10px 20px 75px 20px;
  }
}
.banner .right_section:before {
  background: url("../assets/images/login-right-top-bg.png") no-repeat left top #fff;
}
.banner .right_section .login_form {
  background-color: #ffffff;
  padding: 45px 50px;
  max-width: 75%;
  min-width: 70%;
}
@media screen and (max-width: 768px) {
  .banner .right_section .login_form {
    padding: 18px 0px !important;
    max-width: 100% !important;
    min-width: 90% !important;
  }
}
.banner .right_section .login_form .logo {
  width: 175px;
  margin-bottom: 26px;
  float: right;
}
@media screen and (max-width: 768px) {
  .banner .right_section .login_form .logo {
    float: inherit;
    width: 150px;
    display: block;
    margin: auto;
    padding-bottom: 20px;
  }
}
.arabic .banner .right_section .login_form .logo {
  float: left;
}
.banner .right_section .login_form .seperator {
  width: 53px;
  height: 4px;
  background-color: #FEDB00;
  text-align: center;
}
.banner .right_section .login_form h2 {
  font-size: 22px;
  font-weight: bolder;
  margin-bottom: 57px;
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
.banner .right_section .login_form h2 span {
  display: block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .banner .right_section .login_form h2 {
    padding-bottom: 57px;
    margin: auto;
    display: block;
    text-align: center;
    min-height: 109px !important;
  }
}
.banner .right_section .login_form .form_heading {
  color: #909090;
  font-size: 14px;
  margin-bottom: 13px;
  display: block;
}
.banner .right_section .login_form input {
  border: 1px solid #C8CCD1;
  border-radius: 8px;
  height: 48px;
  padding: 0 19px;
  font-size: 0.875rem;
  color: #7b7b7b;
  width: 100%;
}
.banner .right_section .login_form input:focus {
  outline: none;
}
.banner .right_section .login_form input.submit_btn {
  background: #FEDB00;
  border: 0px;
  text-align: center;
  color: #002B64;
  font-size: 16px;
  border-radius: 100px;
  font-weight: 600;
}
.banner .right_section .login_form input.submit_btn:hover {
  background-color: #FFE333;
}
.banner .right_section .login_form input.submit_btn:disabled, .banner .right_section .login_form input.submit_btn[disabled] {
  background-color: rgba(254, 219, 0, 0.5) !important;
  cursor: not-allowed;
}
.banner .right_section .login_form input[type=password i]::-ms-reveal {
  display: none !important;
}
.banner .right_section .login_form .login_form_icon {
  position: absolute;
  right: 20px;
  top: 12px;
}
.banner .right_section .login_form .eye-icon {
  position: absolute;
  right: 16px;
  top: 68%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.banner .right_section .login_form .login-with-email {
  margin-top: 4px;
  background: transparent;
  text-align: center;
  color: #002B64;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  border: 1px solid #002B64;
  border-radius: 100px;
  height: 48px;
  padding: 0 19px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner .right_section .login_form .login-with-email:hover {
  text-decoration: underline;
}
.banner .right_section .login_form .sub-text {
  font-family: "Encode Sans", sans-serif;
  font-size: 14px;
  color: #757575;
}
.banner .right_section .login_form .otp-input {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.banner .right_section .login_form .otp-input input.txt-otp {
  max-width: 48px;
}
.banner .right_section .login_form .verify-otp-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.banner .right_section .login_form .verify-otp-footer .back-to-login {
  color: #4397E4;
  font-size: 14px;
  font-weight: 500;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.banner .right_section .login_form .verify-otp-footer .timer {
  font-size: 14px;
  color: inherit;
}
.banner .right_section .login_form .verify-otp-footer .resend-otp-text {
  font-size: 16px;
  font-weight: 400;
  color: #68788E;
}
.banner .right_section .login_form .verify-otp-footer .resend-otp {
  color: rgba(67, 151, 228, 0.7);
  font-size: 14px;
  font-weight: 500;
}
.banner .right_section .login_form .verify-otp-footer .resend-otp.active {
  color: #4397E4 !important;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .banner .right_section .login_form .email-login {
    padding: 18px 0px !important;
    max-width: 100% !important;
    min-width: 90% !important;
  }
}
.banner .right_section .login_form .email-login .email-input input {
  padding-left: 46px;
}
.banner .right_section .login_form .email-login .email-input .email-id-icon {
  position: absolute;
  left: 20px;
  top: 12px;
}
.banner .right_section .login_form .phone-no {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  gap: 4px;
}
.banner .right_section a {
  color: #002B64;
  font-size: 14px;
  border-bottom: 1px solid #FEDB00;
}
.banner .explore_button {
  color: #ffffff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  position: absolute;
  bottom: 49px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .banner .explore_button {
    bottom: 40px;
  }
}
.banner .explore_button .arrow_down {
  background: url("../assets/images/arrow_icon.svg") no-repeat left top;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}

.key_points {
  background: url("../assets/images/right_bottom_shape.png") no-repeat right bottom;
  position: relative;
  display: flex;
  padding-top: 70px;
  background-size: 60%;
  padding-bottom: 90px;
}
.arabic .key_points {
  background: url("../assets/images/left_bottom_shape_blue.png") no-repeat left bottom;
  background-size: 60%;
}
@media screen and (max-width: 768px) {
  .key_points {
    display: block;
  }
  .arabic .key_points {
    background: url("../assets/images/left_bottom_shape_blue.png") no-repeat left bottom;
    background-size: 60%;
  }
}
.key_points:before {
  background: url("../assets/images/left_bottom_shape.png") no-repeat right bottom;
  content: "";
  position: absolute;
  width: 320px;
  height: 200px;
  bottom: -20px;
  background-size: 100%;
  left: -110px;
  transform: rotate(10deg);
}
.arabic .key_points:before {
  right: -110px;
  left: auto;
}
@media screen and (max-width: 768px) {
  .arabic .key_points:before {
    background-size: 60%;
    right: -46px;
    left: auto;
    transform: rotate(-10deg);
  }
}
@media screen and (max-width: 768px) {
  .key_points:before {
    background-size: 60%;
  }
}
.key_points .image_section {
  width: 50%;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .key_points .image_section {
    width: 100%;
  }
}
.key_points .image_section img {
  width: 85%;
  margin-left: 40px;
}
@media screen and (max-width: 768px) {
  .key_points .image_section img {
    width: 100%;
    margin-left: 0;
  }
}
@media screen and (max-width: 768px) {
  .key_points .points {
    width: 100%;
    z-index: 1;
    position: relative;
    padding: 0 20px 0 10px;
  }
}
.key_points .points ul {
  list-style: none;
}
.key_points .points ul li {
  display: flex;
}
.key_points .points ul li .image_container {
  width: 65px;
  margin-right: 20px;
}
.key_points .points ul li .image_container img {
  width: 100%;
}
.key_points .points ul li .details_section {
  max-width: 450px;
}
@media screen and (max-width: 768px) {
  .key_points .points ul li .details_section {
    max-width: calc(100% - 75px);
  }
}
.key_points .points ul li .details_section .heading {
  color: #2c6fb4;
  font-size: 18px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  margin-bottom: 10px;
}
.key_points .points ul li .details_section p {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 300;
  margin-bottom: 20px;
}
.key_points .points .key_msg {
  color: #637a91;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 15px;
  margin-left: 85px;
}

.login_footer {
  background: #fff;
  height: 98px;
  line-height: 98px;
  padding: 15px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .login_footer {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }
}
.login_footer .visitor_section {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login_footer .visitor_section span {
  line-height: normal;
  color: #7e8ca5;
  font-size: 11px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.login_footer .visitor_section .visitor_count {
  background: #234f8c;
  padding: 0 10px;
  border-radius: 8px;
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  height: 25px;
  width: max-content;
  line-height: 25px;
  display: inline-block;
  margin-bottom: 5px;
}
.login_footer p {
  font-size: 11px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  color: #68788E;
  margin-bottom: 0;
  height: fit-content;
  line-height: normal;
}

.connect-branding {
  background: #f5f5f5;
  padding: 76px 0 42px 0;
  box-shadow: 0px -1px 16px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid #e9e9e9;
}
.connect-branding .gems-connect-brand {
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  line-height: 1;
  display: flex;
}
.connect-branding .gems-connect-brand img.parent-img {
  margin: -43px 8px 8px;
}
@media screen and (max-width: 768px) {
  .connect-branding .gems-connect-brand img.parent-img {
    margin: 0 0 22px 0 !important;
  }
}
.connect-branding .gems-connect-brand img.connect-img {
  margin: -47px 8px 8px;
}
@media screen and (max-width: 768px) {
  .connect-branding .gems-connect-brand img.connect-img {
    margin: 22px 0 0 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .connect-branding .gems-connect-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .connect-branding {
    padding: 42px 0 !important;
  }
}

.macos input::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden;
}

.academic-container {
  padding: 15px 25px;
}
.academic-container .show-results-title {
  align-items: center;
  display: flex;
  display: -ms-flexbox;
  padding-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .academic-container .show-results-title {
    text-align: left;
  }
  .arabic .academic-container .show-results-title {
    text-align: right;
  }
}
.academic-container .show-results-title .show-count {
  color: #818898;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  padding-right: 6px;
  padding-bottom: 0.16rem;
  line-height: 21px;
}
.arabic .academic-container .show-results-title .show-count {
  padding-right: 0;
  padding-left: 6px;
}
.academic-container .show-results-title .academic-year-dropdown {
  align-items: baseline;
  display: inline-flex;
}
.academic-container .show-results-title .academic-year-dropdown label {
  color: #818898;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  padding-right: 5px;
}
.arabic .academic-container .show-results-title .academic-year-dropdown label {
  padding-right: 0;
  padding-left: 5px;
}
.academic-container .show-results-title .academic-year-dropdown select {
  width: 100px;
}
@media screen and (max-width: 768px) {
  .academic-container .show-results-title {
    padding-bottom: 15px;
    display: block;
  }
}
.academic-container .academic-reports {
  background-color: #fff;
  border: solid 1px #D9E8F1;
  border-radius: 12px;
  margin-bottom: 20px;
}
.academic-container .academic-reports .report-info {
  border-bottom: 1px solid #D9E8F1;
  display: flex;
  padding: 12px;
}
.academic-container .academic-reports .report-info span.report-icon {
  width: 40px;
  height: 40px;
  padding: 2px;
  margin-right: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.academic-container .academic-reports .report-info span.report-icon.open-book {
  background-color: #F2F9EB;
}
.academic-container .academic-reports .report-info span.report-icon.open-book img {
  height: 100%;
  max-width: 50px;
  margin-right: 30px;
  width: 100%;
}
.arabic .academic-container .academic-reports .report-info span.report-icon.open-book img {
  margin-left: 30px;
  margin-right: 0px;
}
.academic-container .academic-reports .report-info span.report-icon .report-media {
  height: auto;
}
.arabic .academic-container .academic-reports .report-info span.report-icon {
  margin-left: 10px;
  margin-right: 0px;
}
.academic-container .academic-reports .report-info img {
  height: 59px;
  max-width: 50px;
  margin-right: 6px;
  width: 100%;
  padding: 4px;
}
.arabic .academic-container .academic-reports .report-info img {
  margin-right: 0;
  margin-left: 20px;
}
.academic-container .academic-reports .report-info .document-info {
  justify-content: center;
  display: inline-flex;
  flex-direction: column;
}
.academic-container .academic-reports .report-info .document-info .name {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170px;
}
.arabic .academic-container .academic-reports .report-info .document-info .name {
  text-align: right;
}
.academic-container .academic-reports .report-info .document-info .date-value {
  align-items: center;
  color: #68788E;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.675rem;
}
.academic-container .academic-reports .report-info .document-info .date-value .svg {
  margin-top: -3px;
  margin-right: 5px;
  width: 15px;
  height: auto;
}
.arabic .academic-container .academic-reports .report-info .document-info .date-value .svg {
  margin-right: 0;
  margin-left: 5px;
}
.academic-container .academic-reports .report-info .document-info .date-value .svg path.calendar {
  stroke: #777c83;
  fill: none;
}
.arabic .academic-container .academic-reports .report-info .document-info .date-value .svg path.calendar {
  stroke: #777c83;
  fill: none;
}
.academic-container .academic-reports .report-action {
  display: inline-flex;
  position: relative;
  width: 100%;
  height: 40px;
  justify-content: center;
  align-items: center;
  color: #00A3E0;
}
.academic-container .academic-reports .report-action > div {
  color: #00A3E0 !important;
  cursor: pointer;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500 !important;
  font-size: 14px;
  font-weight: normal;
  margin: auto;
  border-right: 1px solid #D9E8F1 !important;
  width: 100%;
  height: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.academic-container .academic-reports .report-action > div:last-child {
  border-right: 0px !important;
}
.academic-container .academic-reports .report-action > div .svg {
  cursor: pointer;
  margin-top: -3px;
  margin-left: 0px;
}
.academic-container .academic-reports .report-action > div .svg path {
  stroke: #00A3E0;
}
.arabic .academic-container .academic-reports .report-action > div .svg {
  margin-right: 5px;
  margin-left: 0;
}
.academic-container .academic-reports .report-action > div .svg.svg-download path {
  fill: #00A3E0;
  stroke: transparent !important;
}
.academic-container .academic-reports .report-action > div a {
  color: #00A3E0 !important;
  font-size: 14px;
  font-weight: 500;
}
.academic-container .academic-reports .report-action > div:hover {
  background-color: #F1F6FC;
}
.academic-container .academic-reports .report-action > a {
  color: #00A3E0;
  cursor: pointer;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.6875rem;
  font-weight: normal;
}
.academic-container .academic-reports .report-action > a .svg {
  cursor: pointer;
  margin-top: 0px;
  margin-left: 0px;
}
.academic-container .academic-reports .report-action > a .svg path {
  stroke: #00A3E0;
}
.arabic .academic-container .academic-reports .report-action > a .svg {
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .academic-container .academic-reports .report-action > a .svg {
    margin-top: 0px;
    margin-left: 1px;
  }
  .arabic .academic-container .academic-reports .report-action > a .svg {
    margin-right: 0px;
    margin-left: 0;
  }
}
.academic-container .academic-reports .report-action .report-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  font-weight: normal;
  color: #585d65;
  cursor: initial;
}
.arabic .academic-container .academic-reports .report-action .report-text {
  padding-left: 20px;
  padding-right: 0px !important;
}
.academic-container .academic-reports .report-action .resource-popover {
  z-index: 1;
}
.academic-container .academic-reports .report-action .resource-popover-block {
  width: 300px;
  top: 40px;
  left: 10px;
  padding: 20px;
  color: #585d65;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  background: #fff;
  box-shadow: 0 0 60px rgba(2, 2, 2, 0.1);
  position: absolute;
  border-radius: 20px;
  z-index: 10;
}
.academic-container .academic-reports .report-action .resource-popover-block:after {
  content: "";
  left: 50%;
  top: -8px;
  width: 15px;
  height: 15px;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  transform: rotate(45deg);
  background: #fff;
  border-right: 0;
  border-bottom: 0;
}
.academic-container .academic-reports .report-action .resource-popover-block p {
  font-size: 0.6875rem;
}
.arabic .academic-container .academic-reports .report-action .resource-popover-block {
  right: 10px;
  left: auto;
}
@media screen and (max-width: 768px) {
  .academic-container .academic-reports .report-action .resource-popover-block {
    width: 100%;
  }
}
.academic-container .academic-reports .report-action .arrow-icon {
  background-color: #e3f6ff;
  border-radius: 50%;
  height: 16px;
  margin-left: 10px;
  width: 16px;
}
.academic-container .academic-reports .report-action .arrow-icon .svg {
  height: 8px;
  margin-top: -6px;
  margin-left: 2px;
  width: 8px;
  color: #1e89e5;
}
.academic-container .academic-reports .report-action .arrow-icon .svg path {
  fill: #1e89e5;
}
.arabic .academic-container .academic-reports .report-action .arrow-icon {
  transform: rotate(180deg);
}
​​​​​​ .arabic .academic-container .academic-reports .report-action {
  padding-right: 13px;
  padding-left: 20px;
}
.academic-container .academic-reports .report-action .download-icon {
  align-items: center;
  background-color: #0099eb;
  border-radius: 50%;
  box-shadow: 0 0 20px 0 rgba(33, 120, 175, 0.4);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  position: absolute;
  top: -18px;
  right: 15px;
  width: 36px;
  z-index: 9;
}
.academic-container .academic-reports .report-action .download-icon .svg path {
  fill: #fff;
}
.academic-container .academic-reports .report-action .download-icon .fa-icon {
  font-size: 16px;
  color: #fff;
}
.academic-container .academic-reports .report-action .download-icon .download-link {
  display: inline-flex;
}
@media screen and (max-width: 768px) {
  .academic-container .academic-reports {
    margin-right: 0;
    margin-bottom: 15px;
    max-width: 100%;
  }
  .arabic .academic-container .academic-reports {
    margin-left: 0;
  }
}
@media screen and (max-width: 768px) {
  .academic-container {
    margin-top: 25px;
    padding-right: 10px;
    padding-left: 10px;
  }
}
.academic-container .status {
  border-radius: 20px;
  display: inline-block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  height: 25px;
  line-height: 25px;
  padding-right: 15px;
  padding-left: 15px;
  white-space: nowrap;
}
.academic-container .status.pre-approved {
  background-color: #dbffe9;
  color: #16b96e;
}
.academic-container .status.pending {
  background-color: #fdf1d2;
  color: #ac7a0a;
}
.academic-container .payment-due {
  color: #fb1e52;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
.academic-container .payment-info {
  align-items: center;
  display: inline-flex;
}
.academic-container .payment-info span {
  display: inline-block;
  font-size: 0.75rem;
}
.academic-container .payment-info span:first-child {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  padding-right: 10px;
}
.arabic .academic-container .payment-info span:first-child {
  padding-right: 0;
  padding-left: 10px;
}
.academic-container .payment-info span:last-child {
  background-color: #f0f5fd;
  border-radius: 10px;
  color: rgba(0, 43, 100, 0.5);
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-weight: normal;
  padding: 15px 40px;
  white-space: nowrap;
}
.academic-container .exam-setting-table tr.checked {
  background-color: #f7faff !important;
}
.academic-container .remove-btn {
  color: #002B64;
}
.academic-container .remove-btn img {
  margin-right: 8px;
}
.arabic .academic-container .remove-btn img {
  margin-right: 0;
  margin-left: 8px;
}
.academic-container .selected-data {
  background-color: #f9f9f9 !important;
}

.confirm-selection-control {
  display: flex;
  display: -ms-flexbox;
  justify-content: flex-end;
  margin-bottom: 30px;
}

.amr20 {
  margin-right: 20px;
}
.arabic .amr20 {
  margin-right: 0;
  margin-left: 20px;
}

.child-profile-container {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  padding: 20px 20px 30px 20px;
}
.child-profile-container .custom-tabs {
  background-color: #fff;
  border-radius: 0px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin: 8px -20px 15px -20px;
  padding: 0px 10px;
  border-bottom: 1px solid #D9E8F1;
  color: #68788E;
}
@media screen and (max-width: 768px) {
  .child-profile-container .custom-tabs {
    margin-left: 12px;
  }
}
.child-profile-container .custom-tabs .nav-item .nav-link {
  justify-content: center;
  min-width: 107px;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0px;
  box-shadow: none;
  color: #68788E;
  padding-top: 6px;
  padding-bottom: 8px;
}
.child-profile-container .custom-tabs .nav-item .nav-link.active {
  color: #002B64;
  border-bottom: 3px solid #00A3E0;
}
.child-profile-container .custom-tabs .nav-item .nav-link .svg g {
  stroke: currentColor;
}
.child-profile-container .custom-tabs .nav-item .nav-link .svg g circle {
  fill: transparent;
}
.child-profile-container .custom-tabs .nav-item .nav-link .svg circle {
  fill: currentColor;
}
@media screen and (max-width: 768px) {
  .child-profile-container .accordion-content .scrollable-table table {
    white-space: nowrap;
  }
}
.child-profile-container .accordion-content .dataTable {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.child-profile-container .accordion-content .section-heading {
  color: #194064;
  display: flex;
  display: -ms-flexbox;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 10px 15px;
}
.child-profile-container .accordion-content .no-records-available {
  align-items: center;
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  padding-top: 20px;
  padding-bottom: 20px;
}
.child-profile-container .accordion-content .no-records-available img {
  margin-bottom: 10px;
}
.child-profile-container .accordion-content .no-records-available > span {
  color: #757c8e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
.child-profile-container .accordion-content .book-details {
  display: flex;
  display: -ms-flexbox;
  padding-top: 10px;
}
.child-profile-container .accordion-content .book-details img {
  height: 44px;
  margin-top: 4px;
  margin-right: 12px;
  max-width: 46px;
  width: 100%;
}
.arabic .child-profile-container .accordion-content .book-details img {
  margin-right: 0;
  margin-left: 12px;
}
.child-profile-container .accordion-content .book-details .book-info {
  display: inline-flex;
  display: -ms-inline-flexbox;
  flex-direction: column;
}
.child-profile-container .accordion-content .book-details .book-info span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .child-profile-container .accordion-content .book-details .book-info > div {
    white-space: nowrap;
  }
}
@media screen and (max-width: 768px) {
  .child-profile-container .accordion-content .book-details {
    display: block;
  }
}
.child-profile-container .accordion-content .contact-table {
  overflow-x: hidden;
}
.child-profile-container .accordion-content .contact-table table thead th {
  padding-right: 15px;
  padding-left: 15px;
}
.child-profile-container .accordion-content .contact-table table tbody td {
  padding-right: 15px;
  padding-left: 15px;
  border-right: 1px solid #dfe2eb;
}
.child-profile-container .accordion-content .contact-table table tbody td:last-child {
  border-right: 0;
}
.child-profile-container .accordion-content .card-wrapper .card-border {
  border: 1px solid #D9E8F1;
  padding: 12px 16px;
  border-radius: 12px;
}
.child-profile-container .accordion-content .card-wrapper .card-border .label-text {
  color: #68788E;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
}
.child-profile-container .accordion-content .card-wrapper .card-border .value-text {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
.child-profile-container .accordion-content .card-wrapper .card-border .value-text .active-text {
  color: #19AC56;
}
.child-profile-container .accordion-content .card-wrapper .card-border .value-text a {
  color: #00A3E0;
  text-decoration: none;
}
.child-profile-container .accordion-content .card-wrapper .card-border .value-text a:hover {
  text-decoration: underline;
}
.child-profile-container .accordion-content .card-wrapper .card-border .value-text .not-read-dot {
  width: 7px;
  height: 7px;
  background-color: #00A3E0;
  border-radius: 50%;
  margin-left: 0;
  margin-top: 1px;
}
.child-profile-container .student-info .label-text {
  color: #68788E;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
}
.child-profile-container .student-info .value-text {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
.child-profile-container .attendance-month-graph {
  padding: 30px;
}
@media screen and (max-width: 768px) {
  .child-profile-container .attendance-month-graph {
    padding: 15px 10px;
  }
}
.child-profile-container .details-btn {
  color: #002B64;
  margin-right: 12px;
  margin-left: 12px;
}
.child-profile-container .details-btn .arrow-icon {
  background-color: #e3f6ff;
  border-radius: 50%;
  height: 16px;
  margin-left: 10px;
  width: 16px;
}
.child-profile-container .details-btn .arrow-icon .svg {
  height: 8px;
  margin-top: -3px;
  margin-left: 2px;
  width: 5px;
}
.child-profile-container .details-btn .arrow-icon .svg path {
  fill: #68788E;
}
.arabic .child-profile-container .details-btn .arrow-icon {
  margin-right: 10px;
  margin-left: 0;
}
.child-profile-container .no-notifications {
  align-items: center;
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 30px;
}
.child-profile-container .no-notifications img {
  margin-bottom: 20px;
}
.child-profile-container .no-notifications span {
  color: #757c8e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
@media screen and (max-width: 768px) {
  .child-profile-container {
    margin-top: 20px;
    padding: 10px 10px 15px 10px;
  }
}
.child-profile-container .edit-stud-profile a {
  font-size: 12px;
  color: #1e89e5;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}

.sibling-profile-details {
  display: inline-flex;
  padding: 20px 10px;
  width: 32%;
  background-color: #F1F6FC;
  border-radius: 12px;
  margin-right: 16px;
  margin-bottom: 16px;
}
@media (resolution: 1.25dppx) {
  .sibling-profile-details {
    width: 31%;
  }
}
@media (resolution: 1.5dppx) {
  .sibling-profile-details {
    width: 31%;
  }
}
.sibling-profile-details img {
  border: solid 2px #fff;
  border-radius: 50%;
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
  height: 60px;
  margin-top: 5px;
  margin-right: 30px;
  min-width: 60px;
}
.arabic .sibling-profile-details img {
  margin-right: 0;
  margin-left: 30px;
}
@media screen and (max-width: 768px) {
  .sibling-profile-details img {
    margin: 0 auto 20px auto;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .sibling-profile-details img {
    margin: 0 auto 20px auto;
  }
}
@media (resolution: 1.5dppx) {
  .sibling-profile-details img {
    margin-right: 12px;
  }
}
@media screen and (max-width: 768px) {
  .sibling-profile-details .information {
    margin: auto;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .sibling-profile-details .information {
    margin: auto;
  }
}
.sibling-profile-details .information .info-row {
  display: inline-flex;
  font-size: 0.75rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .sibling-profile-details .information .info-row {
    display: flex;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .sibling-profile-details .information .info-row {
    display: flex;
  }
}
.sibling-profile-details .information .info-row .label-text {
  color: #002B64;
  display: inherit;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  justify-content: space-between;
  margin-right: 5px;
}
.sibling-profile-details .information .info-row .value {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
}
.sibling-profile-details .information .info-row .value.student-name {
  font-weight: 600;
  font-size: 1rem;
}
@media (resolution: 1.25dppx) {
  .sibling-profile-details .information .info-row .value.student-name {
    font-size: 0.875rem;
  }
}
@media (resolution: 1.5dppx) {
  .sibling-profile-details .information .info-row .value.student-name {
    font-size: 0.75rem;
  }
}
.arabic .sibling-profile-details .information .info-row .value {
  padding-right: 20px;
  padding-left: 0;
}
@media (resolution: 1.25dppx) {
  .sibling-profile-details .information .info-row.id-grade {
    display: flex;
    flex-direction: column;
  }
}
@media (resolution: 1.5dppx) {
  .sibling-profile-details .information .info-row.id-grade {
    display: flex;
    flex-direction: column;
  }
}
.sibling-profile-details + .action-section {
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
}
@media screen and (max-width: 768px) {
  .sibling-profile-details + .action-section {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (max-width: 768px) {
  .sibling-profile-details {
    flex-direction: column;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .sibling-profile-details {
    flex-direction: column;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
  }
}

.custom-accordion .active .title .svg path {
  fill: #fff;
}

.flip-flop-radinso-bt .custom-radio input[type=radio] + label span {
  display: inherit;
  width: inherit;
  height: inherit;
  margin: 0px;
}
.flip-flop-radinso-bt .custom-radio input[type=radio]:checked + label span {
  transform: none;
}
.flip-flop-radinso-bt .button_container .custom-radio {
  position: relative;
  width: 50px;
}
.arabic .flip-flop-radinso-bt .button_container .custom-radio {
  line-height: 35px;
}
@media screen and (max-width: 768px) {
  .flip-flop-radinso-bt .button_container .custom-radio {
    width: 27px;
  }
}
.flip-flop-radinso-bt .button_container .custom-radio label span {
  position: absolute;
  left: 27px;
  top: 9px;
}

.description_sec {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .description_sec {
    width: 100%;
  }
}

/*Datatable mark as read and checkbox dropdown style for student profile /comminincation tab*/
.checkbox-dropdown {
  cursor: pointer;
}

.checkbox_options {
  width: 104px;
  border-radius: 6px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
  border: solid 1px #dfe2eb;
  left: 40px;
  position: absolute;
  background: #fff;
  top: 70px;
  padding: 15px 10px;
  display: none;
  z-index: 1;
}
.checkbox_options.show {
  display: block;
}
.checkbox_options ul {
  margin-bottom: 0;
}
.checkbox_options ul li {
  margin-bottom: 15px;
  width: 100%;
  list-style: none;
  line-height: 15px;
}
.checkbox_options ul li a {
  color: #69738d;
  cursor: pointer;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: none;
  display: block;
}
@media screen and (max-width: 768px) {
  .checkbox_options {
    z-index: 999;
  }
  .arabic .checkbox_options {
    right: 20px !important;
    left: auto !important;
    text-align: right;
  }
}
.arabic .checkbox_options {
  right: 40px;
  left: auto;
}

.no-of-items-display {
  background-color: rgb(71, 92, 117);
  color: #fff;
  width: 100%;
  font-size: 0.75rem;
}
.no-of-items-display img {
  width: 20px;
  padding-bottom: 2px;
  margin-top: -3px;
}

.payment-date {
  color: #7c7b7b;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}
.arabic .payment-date {
  text-align: left;
}
@media screen and (max-width: 768px) {
  .payment-date {
    text-align: right;
    margin-top: 10px;
  }
}
.payment-date .header_text {
  color: #454c5c;
  display: block;
}
.arabic .payment-date {
  right: auto;
  left: 10px;
}
.payment-date .svg {
  width: 25px;
}

.profiles_container {
  display: flex;
  margin: 20px 0;
}
@media screen and (max-width: 1024px) {
  .profiles_container {
    overflow: hidden;
  }
}
@media screen and (max-width: 430px) {
  .profiles_container {
    display: block;
  }
}
.profiles_container .profile_card.selected {
  background: #fff;
  box-shadow: 3px 2px 25px #F1F6FC;
  color: #fff;
  border-color: transparent;
  background-image: url(../assets/images/feeselectedbackground.png);
  background-size: cover;
}

.pay-note {
  font-size: 0.75rem;
}
.arabic .pay-note {
  text-align: right;
}

.fee-payment .profile_card.selected .top_section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.fee-payment .profile_card .top_section {
  border-bottom: 1px solid rgba(217, 232, 241, 0.5);
}

#schoolFee-component .profile_card.selected .top_section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#schoolFee-component .profile_card .top_section {
  border-bottom: 1px solid rgba(217, 232, 241, 0.5);
}

.catring-prof-card.profile_card .bottom_section .detail_sec {
  justify-content: flex-end;
}
.catring-prof-card.profile_card .bottom_section .detail_sec .due-amount {
  line-height: 1.25;
  margin-top: 6px;
}

.profile_card {
  border-radius: 15px;
  border: 1px solid #D8DFED;
  background-color: #ffffff;
  padding: 15px 0;
  margin-left: 20px;
  position: relative;
}
.arabic .profile_card {
  margin-left: 25px;
  margin-right: 0;
}
.profile_card.selected {
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  color: #fff;
  border-color: transparent;
  background-size: cover;
  border-color: transparent;
  background-repeat: no-repeat;
  background-image: url(../assets/images/feeselectedbackground.png);
}
.profile_card.selected .top_section {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
  padding: 0 0 15px 15px;
}
.profile_card.selected .top_section .profile_title span {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.profile_card.selected .top_section .profile_title .name {
  color: #fff;
  opacity: 1 !important;
  font-size: 16px !important;
  font-weight: 600;
}
.profile_card.selected .top_section .profile_title .id {
  color: rgba(255, 255, 255, 0.8);
}
.profile_card.selected .bottom_section .detail_sec .schedulefees-btn {
  border: 1px solid #ffffff;
  color: #ffffff;
}
.profile_card.selected .bottom_section .detail_sec .schedulefees-btn a {
  color: #ffffff;
  display: flex;
  align-items: center;
}
.arabic .profile_card.selected .bottom_section .detail_sec .schedulefees-btn a i {
  padding-top: 0.25rem;
}
.profile_card.selected .bottom_section .detail_sec .amount {
  background: transparent;
  color: #fff;
  font-family: Encode Sans;
  font-weight: 600;
  font-size: 12px;
  line-height: 140%;
  text-align: right;
}
.profile_card.selected .bottom_section .detail_sec .amount span {
  color: #222222;
}
.profile_card.selected .bottom_section .detail_sec .amount.no-due {
  background: #ffffff;
  color: #222222;
}
.profile_card.selected .bottom_section .detail_sec .amount.no-due span {
  color: #222222;
}
.profile_card:first-child {
  margin-left: 0;
}
.profile_card.same-school {
  padding-bottom: 0;
}
.profile_card.other-school:before {
  border-left: 1px solid #818898;
  content: "";
  position: absolute;
  height: 100%;
  left: -15px;
  top: 0;
}
@media screen and (max-width: 768px) {
  .profile_card.other-school:before {
    left: 0;
    top: -6px;
    border-top: 1px solid #818898;
    border-left: 0px;
    width: 100%;
  }
}
.profile_card .top_section {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
  padding: 0 0 15px 15px;
}
.profile_card .top_section img {
  margin-right: 12px;
  width: 55px;
  min-width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #fff;
}
.arabic .profile_card .top_section img {
  margin-left: 12px;
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  .profile_card .top_section img {
    min-width: 55px;
    min-height: 55px;
  }
  .arabic .profile_card .top_section img {
    min-width: 55px;
    min-height: 55px;
  }
}
@media screen and (max-width: 768px) {
  .profile_card .top_section .profile_title {
    padding-right: 20px;
  }
  .arabic .profile_card .top_section .profile_title {
    padding-left: 20px;
    padding-right: 0px !important;
  }
}
.arabic .profile_card .top_section .profile_title {
  text-align: right;
}
.profile_card .top_section .name {
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 4px;
  display: block;
}
.profile_card .top_section .id {
  color: #585d65;
  font-size: 0.7rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  display: block;
}
.profile_card .top_section .upload-link {
  font-size: 0.7rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  display: block;
}
.profile_card .top_section .upload-link a {
  color: #007bff;
}
.profile_card .top_section .upload-link a:hover {
  color: #0099EB;
}
.profile_card .profile_title {
  padding-right: 20px;
}
.profile_card .bottom_section ul {
  list-style: none;
  margin-bottom: 5px;
}
.profile_card .bottom_section ul li {
  font-size: 0.675rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .profile_card .bottom_section ul li {
    text-align: center;
  }
  .arabic .profile_card .bottom_section ul li {
    text-align: center;
  }
}
.arabic .profile_card .bottom_section ul li {
  text-align: right;
}
.profile_card .bottom_section ul li span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
}
@media screen and (max-width: 375px) {
  .profile_card .bottom_section {
    text-align: center;
  }
}
.profile_card .bottom_section .detail_sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}
@media screen and (max-width: 375px) {
  .profile_card .bottom_section .detail_sec {
    flex-direction: column;
  }
}
@media screen and (max-width: 361px) {
  .profile_card .bottom_section .detail_sec {
    flex-direction: column;
  }
}
.profile_card .bottom_section .detail_sec .amount {
  text-align: right;
}
.profile_card .bottom_section .detail_sec .schedulefees-btn {
  border: 1px solid #0099eb;
  color: #0099eb;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  border-radius: 8px;
  font-size: 0.7rem;
  z-index: 1;
  position: relative;
  margin-right: 10px;
}
@media screen and (max-width: 375px) {
  .profile_card .bottom_section .detail_sec .schedulefees-btn {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 361px) {
  .profile_card .bottom_section .detail_sec .schedulefees-btn {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.profile_card .bottom_section .detail_sec .schedulefees-btn a {
  color: #0099eb;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  line-height: 25px;
}
.arabic .profile_card .bottom_section .detail_sec .schedulefees-btn a i {
  padding-top: 0.25rem;
}
.profile_card .bottom_section .detail_sec span {
  color: #0099eb;
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  display: inline-block;
  cursor: pointer;
}
.profile_card .bottom_section .detail_sec .amount {
  background: #fff2f5;
  border-radius: 12px;
  padding: 8px 20px 5px;
  font-size: 0.67rem;
  color: #cd2522;
  border: 1px solid #ffcdd2;
}
.arabic .profile_card .bottom_section .detail_sec .amount {
  text-align: right;
}
.profile_card .bottom_section .detail_sec .amount span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  display: block;
  color: #ef5350;
  line-height: 15px;
}
.profile_card .bottom_section .detail_sec .amount.no-due {
  border-color: #dcedc8;
  background-color: #f9fff8;
  color: #52a51c;
}
.profile_card .bottom_section .detail_sec .amount.no-due span {
  color: #548b30;
}
.profile_card .bottom_section .other-pay {
  background: #22262E;
  border-radius: 0px 0px 15px 15px;
  padding: 15px 12px;
  color: #fff;
  font-size: 0.8rem;
}
.profile_card .bottom_section .other-pay .svg {
  width: 30px;
  margin-right: 15px;
}

.history-link {
  font-size: 0.6875rem;
}

.title_heading {
  color: #0a1e3e;
  font-size: 1rem;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.arabic .title_heading {
  margin-right: 10px;
  margin-left: 0;
}

.card_container {
  display: flex;
  padding-top: 20px;
}
@media screen and (max-width: 768px) {
  .card_container {
    mnin-height: 110px !important;
  }
}
@media screen and (max-width: 1024px) {
  .card_container {
    overflow: hidden;
    display: block;
  }
}
@media screen and (max-width: 430px) {
  .card_container {
    display: block;
  }
}
.card_container .payment_card {
  width: 25%;
}
@media screen and (max-width: 768px) {
  .card_container .payment_card {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  .card_container .payment_card {
    width: 100%;
  }
}

.payment_card {
  width: 33%;
  margin-right: 25px;
}
@media screen and (max-width: 1024px) {
  .payment_card {
    width: 45.4545454545%;
    margin-bottom: 15px;
    float: left;
  }
}
@media screen and (max-width: 430px) {
  .payment_card {
    width: 100%;
    margin-bottom: 15px;
  }
}
.payment_card .card_title {
  color: #4b525d;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 430px) {
  .payment_card .card_title {
    font-size: 0.75rem;
  }
}
.payment_card .card_title span {
  color: #4B525D;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}
@media screen and (max-width: 430px) {
  .payment_card .card_title span {
    font-size: 0.625rem;
  }
}
.payment_card .card_title span .info_icon {
  background: url("../assets/images/ques-icon1.svg") no-repeat left top;
  width: 12px;
  height: 12px;
  background-size: cover;
  display: inline-block;
  margin-left: 5PX;
  cursor: pointer;
}

.card_design {
  padding: 10px 15px;
  border-radius: 15px;
  color: #6e7e84;
  position: relative;
}
.arabic .card_design {
  text-align: right;
}
.card_design.selected {
  color: #fff;
}
.card_design.selected .card_type {
  background-size: cover !important;
}
.card_design .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card_design .top .card_type {
  background: url("../assets/images/master_card.svg") no-repeat left top;
  width: 112px;
  height: 28px;
  background-size: cover;
}
.card_design .top .card_type.selected {
  background: url("../assets/images/master_card_selected.svg") no-repeat left top;
  background-size: cover;
}
.card_design .bottom {
  display: flex;
  justify-content: end;
  margin-top: -26px;
}
.card_design .bottom .card_type {
  background: url("../assets/images/gems-cobrand-logo.png") no-repeat left top;
  width: 112px;
  height: 28px;
  background-size: cover;
}
.card_design .bottom .card_type.selected {
  background: url("../assets/images/gems-cobrand-logo-selected.png") no-repeat left top;
  background-size: cover;
}
.card_design .card_number_label {
  font-size: 0.625rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  margin-bottom: 5px;
}
.card_design .card_number {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 10px;
}
.card_design .expiry_label {
  font-size: 0.625rem;
  margin-bottom: 5px;
}
.card_design .expiry_date {
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
.card_design span {
  display: block;
}
.card_design.card_design-gems-co {
  position: relative;
  background-size: cover !important;
}
.card_design.card_design-gems-co.selected {
  background-size: cover !important;
}
.card_design.card_design-gems-co.selected .top .card_type {
  background: url("../assets/images/gems-cobrand-selected.png") no-repeat left top !important;
  background-size: contain !important;
}
.card_design.card_design-gems-co.selected .bottom .card_type {
  background: url("../assets/images/gems-cobrand-logo-selected.png") no-repeat left top !important;
  background-size: contain !important;
}
.card_design.card_design-gems-co.selected .card_number_label {
  color: #54585a !important;
}
.card_design.card_design-gems-co.selected .card_number {
  color: #54585a;
}
.card_design.card_design-gems-co.selected .expiry_label {
  color: #54585a;
}
.card_design.card_design-gems-co.selected .expiry_date {
  color: #54585a;
}
.card_design.card_design-gems-co .top .card_type {
  background: url("../assets/images/gems-cobrand.png") no-repeat left top !important;
  background-size: contain !important;
  width: 104px;
}
.card_design.card_design-gems-co .bottom .card_type {
  background: url("../assets/images/gems-cobrand-logo.png") no-repeat left top !important;
  background-size: contain !important;
  width: 80px;
}

.card_info_layer {
  position: absolute;
  top: 50px;
  bottom: 0;
  left: -56px;
  right: 0;
  background: #002B64;
  color: #fff;
  display: none;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  transition: opacity 0.2s, visibility 0.2s;
  padding-top: 8px;
  padding-bottom: 16px;
  width: 421px;
  height: 100%;
  min-height: 100px;
  font-family: Encode Sans;
  font-weight: 500;
  font-size: 10px;
  z-index: 10;
}
.card_info_layer::before {
  content: "";
  position: absolute;
  top: -16%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
  rotate: 180deg;
}
.card_info_layer .cross_icon {
  position: absolute;
  top: 5px;
  right: 12px;
  cursor: pointer;
}

.card_info {
  transition: 0.2s;
  transform: translateY(1em);
  font-size: 0.75rem;
  padding: 0 20px;
}

.checkbox-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.check_box {
  border: solid 2px #979da5;
  background-color: #ffffff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
}
.arabic .check_box {
  left: 0;
  right: auto;
}
.selected .check_box.white {
  background: url("../assets/images/white_tick.svg") no-repeat left top;
  background-size: contain;
}
.selected .check_box {
  background: url("../assets/images/checkmark-circle.svg") no-repeat left top;
  background-size: cover;
  border: none !important;
}

.values {
  display: flex;
  width: 100%;
  justify-content: right;
  flex-direction: column;
  text-align: right;
  margin-top: 20px;
  padding-right: 10px;
}
.arabic .values {
  text-align: left;
  justify-content: left;
}
.values .title {
  color: #9b9b9b;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  margin-bottom: 15px;
  display: block;
}
.values form .custom-input {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-right: 15px;
  margin-bottom: 16px;
  margin-left: 15px;
}
.values form .custom-input label {
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  margin-right: 10px;
}
.arabic .values form .custom-input label {
  margin-right: 0;
  margin-left: 10px;
}
.values form .final_row span {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
}
.values .custom-input {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-right: 15px;
  margin-bottom: 16px;
  margin-left: 15px;
}
.values .custom-input label {
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  margin-right: 10px;
}
.arabic .values .custom-input label {
  margin-right: 0;
  margin-left: 10px;
}
.values .final_row span {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
}
.values .button-group-action {
  display: inline-flex;
}
.values .button-group-action .button:last-child {
  line-height: 1px;
  white-space: nowrap;
}

.message-body .status_progress-box {
  width: 700px;
}
@media screen and (max-width: 768px) {
  .message-body .status_progress-box {
    width: 50%;
  }
}

#newsletterPlainTextEmail .status_progress-box {
  width: 700px;
}
@media screen and (max-width: 768px) {
  #newsletterPlainTextEmail .status_progress-box {
    width: 50%;
  }
}

#parentNotifications .status_progress-box {
  width: 700px;
}
@media screen and (max-width: 768px) {
  #parentNotifications .status_progress-box {
    width: 50%;
  }
}

.status_progress {
  position: relative;
}
.status_progress-box {
  width: 700px;
}
.arabic .status_progress-box {
  right: 20px;
  left: auto;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .status_progress-box p {
    overflow: auto;
    max-height: 300px;
    white-space: normal;
  }
}
.status_progress-box.show {
  display: block;
}
.status_progress-box ul {
  list-style: none;
  display: flex;
}
.status_progress-box ul li {
  color: #7798ad;
  font-size: 0.8rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  position: relative;
  width: 100%;
  text-align: center;
}
.status_progress-box ul li.completed .bar {
  background: #fa608a;
}
.status_progress-box ul li.completed:first-child:after {
  background: #fa608a;
}
.status_progress-box ul li.active .bar {
  background: #fa608a;
}
.status_progress-box ul li.active .bar:before {
  content: "";
  background: url("../assets/images/pointer.svg") no-repeat left top;
  width: 30px;
  height: 30px;
  position: absolute;
  background-size: cover;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
}
.status_progress-box ul li.active .bar:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 7px;
  top: 0;
  right: 0;
  background: #f9e5eb;
  z-index: -1;
}
.arabic .status_progress-box ul li.active .bar:after {
  left: 0;
  right: auto;
}
.status_progress-box ul li.active:first-child:after {
  background: #fa608a;
}
.status_progress-box ul li:first-child:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 16px;
  top: -25px;
  left: -6px;
  background: #fae5eb;
  border-radius: 4px 0 0 4px;
}
.arabic .status_progress-box ul li:first-child:after {
  border-radius: 0 4px 4px 0;
  right: -6px;
  left: auto;
}
.status_progress-box ul li:last-child:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 16px;
  top: -25px;
  right: -6px;
  background: #fae5eb;
  border-radius: 0 4px 4px 0;
}
.arabic .status_progress-box ul li:last-child:after {
  border-radius: 4px 0 0 4px;
  right: auto;
  left: -6px;
}
.status_progress-box ul li .bar {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #fae5eb;
}
.status_progress-box ul li:before {
  content: "";
  width: 1px;
  height: 10px;
  background: #7798ad;
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
}
.status_progress-box .amount-sec span {
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  margin-right: 5px;
}
.status_progress-box .amount-sec input {
  color: #0a1e3e;
  font-size: 1.2rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  width: 150px;
  padding: 5px 10px;
}
.status_progress-box .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.modal-header .heading {
  color: #0a1e3e;
  font-size: 18px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.modal-header .cross_icon {
  background: url("../assets/images/close_icon.svg") no-repeat left top;
  width: 13px;
  height: 13px;
  display: block;
  background-size: cover;
}

.top_sec .name_sec {
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.top_sec .name_sec span {
  color: #333e50;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  display: block;
}

.card_details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card_details .card_design .top {
  margin-bottom: 5px;
}
.card_details .card_design .top .card_type {
  width: 40px;
  background-size: contain !important;
}
.card_details .card_design .card_number_label {
  font-size: 0.6rem;
  margin-bottom: 0;
}
.card_details .card_design .card_number {
  font-size: 1rem;
  margin-bottom: 6px;
}
.card_details .card_design .expiry_label {
  font-size: 0.6rem;
  margin-bottom: 0;
}
.card_details .card_design .expiry_date {
  font-size: 0.76rem;
  margin-bottom: 5px;
}
.card_details .detail {
  width: 65%;
}
.card_details .detail h4 {
  color: #0a1e3e;
  margin-bottom: 5px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
.card_details .detail p {
  color: #333a46;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  margin-bottom: 0;
}

#confirmation_popup .modal-header {
  justify-content: center;
}
#confirmation_popup .modal-body p {
  color: #0a1e3e;
  font-size: 0.9rem;
}
#confirmation_popup .modal-body p span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
#confirmation_popup .modal-body p .price {
  color: #214bac;
  display: block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
#confirmation_popup .modal-body .note {
  color: #6683C5;
  font-size: 0.8rem;
  margin-bottom: 35px;
  display: block;
}

.confirm-popup .modal-header {
  justify-content: center;
}
.confirm-popup .modal-body p {
  color: #0a1e3e;
  font-size: 0.9rem;
}
.confirm-popup .modal-body p span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
.confirm-popup .modal-body p .price {
  color: #214bac;
  display: block;
  font-family: "Encode Sans", sans-serif;
}
.confirm-popup .modal-body .note {
  color: #6683C5;
  font-size: 0.8rem;
  margin-bottom: 35px;
  display: block;
}

.StepProgress {
  position: relative;
  padding-left: 70px;
  list-style: none;
  font-size: 0.75rem;
}
.arabic .StepProgress {
  padding-left: 0px;
  padding-right: 70px;
}
@media screen and (max-width: 768px) {
  .StepProgress {
    padding-left: 60px;
  }
}
.StepProgress::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 10px;
  height: 100%;
  border-left: none;
}
.arabic .StepProgress::before {
  left: auto;
  right: 20px;
}
.StepProgress-title {
  display: inline-block;
  color: #0A1E3E;
  font-size: 0.8rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.arabic .StepProgress-title {
  display: block;
  text-align: right;
}
.StepProgress-item {
  position: relative;
  counter-increment: list;
}
.StepProgress-item:not(:last-child) {
  padding-bottom: 40px;
}
.StepProgress-item::before {
  display: inline-block;
  content: "";
  position: absolute;
  left: -55px;
  height: 100%;
  width: 10px;
}
.arabic .StepProgress-item::before {
  left: auto;
  right: -55px;
}
.StepProgress-item::after {
  content: counter(list);
  display: inline-block;
  position: absolute;
  top: 0;
  left: -70px;
  border-radius: 50%;
  background-color: #E2E8F2;
  text-align: center;
  color: #818898;
  padding: 6px 8px;
  height: 30px;
  width: 30px;
}
.arabic .StepProgress-item::after {
  left: auto;
  right: -60px;
}
.StepProgress-item.is-done::before, .StepProgress-item.current::before {
  border-left: 2px dashed #B6BFD3;
}
.StepProgress-item.is-done::after, .StepProgress-item.current::after {
  content: counter(list);
  color: #002B64;
}
.StepProgress-item.is-done::after {
  background-color: #D8DFED;
  color: #002B64;
}
.StepProgress-item.is-done:last-child::before {
  border: none;
}
.StepProgress-item.current::after {
  background-color: #454C5C;
}
.StepProgress .profiles_container {
  margin-left: -20px;
}
@media screen and (max-width: 768px) {
  .StepProgress .fees-table {
    padding-left: 2px;
    overflow: auto;
  }
}

.popover-box, .activity-popover-box, .message-body .status_progress-box, .status_progress-box {
  background: #fff;
  padding: 45px 25px 25px 25px;
  box-shadow: 0 0 60px rgba(2, 2, 2, 0.1);
  position: absolute;
  border-radius: 20px;
  top: 0;
  left: 0;
  z-index: 10;
}
.popover-box:after, .activity-popover-box:after, .message-body .status_progress-box:after, .status_progress-box:after {
  content: "";
  width: 15px;
  height: 15px;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  transform: rotate(45deg);
  top: -9px;
  background: #fff;
  border-right: 0;
  border-bottom: 0;
}

.activity-popover {
  position: relative;
}
.activity-popover-box {
  width: 500px;
}

.fees-table table {
  border-collapse: collapse;
  width: 100%;
  border: 0 solid transparent;
}
.fees-table table thead {
  background-color: #415D77;
}
.fees-table table thead th {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #fff;
  padding: 12px;
}
.fees-table table thead th:nth-child(1) {
  border-radius: 8px 0 0 8px;
  padding-left: 15px;
}
.arabic .fees-table table thead th:nth-child(1) {
  border-radius: 0 8px 8px 0;
  padding-right: 15px;
  margin-left: 0;
}
.fees-table table thead th:nth-last-child(1) {
  border-radius: 0 8px 8px 0;
}
.arabic .fees-table table thead th:nth-last-child(1) {
  border-radius: 8px 0 0 8px;
}
.fees-table table tbody tr {
  border-bottom: 2px solid #E1E6EA;
}
.fees-table table tbody tr:nth-child(even) {
  background-color: transparent;
}
.fees-table table tbody tr:last-child td:last-child {
  padding-left: 15px;
}
.fees-table table tbody tr td {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  padding: 10px;
  font-size: 0.75rem;
}
.fees-table table tbody tr input {
  border: 1px solid #b7b7b7;
  border-radius: 8px;
  color: #002B64;
  font-weight: 700;
  font-size: 0.75rem;
  font-weight: normal;
  padding: 10px 15px;
}
.fees-table table tbody tr input:focus {
  border-color: #389ddc;
  outline: none;
}
.fees-table table tbody tr .info_text {
  color: #389ddc;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  display: block;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .fees-table table tbody tr {
    padding-right: 15px;
    padding-left: 15px;
  }
}
.fees-table table th:first-child,
.fees-table table td:first-child {
  width: 10%;
}
.fees-table table th:last-child,
.fees-table table td:last-child {
  width: 23%;
}
@media screen and (max-width: 768px) {
  .fees-table table.no-wrap-cell td,
  .fees-table table.no-wrap-cell th {
    white-space: nowrap;
  }
}
.fees-table-img {
  width: 55px;
  margin: 0 auto;
}
.fees-table-img img {
  width: 100%;
  border-radius: 50%;
  box-shadow: 0px 3px 6px rgba(149, 145, 145, 0.16);
  border: 1px solid #fff;
}
.fees-table-img .svg {
  width: 100%;
  border-radius: 50%;
  box-shadow: 0px 3px 6px rgba(149, 145, 145, 0.16);
  border: 1px solid #fff;
}
.fees-table .gemsreward {
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .fees-table .gemsreward {
    margin-top: 0;
  }
}
.fees-table .gemsreward .gems-rewards-wrap {
  border: 1px solid #D9E8F1;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px !important;
  margin-top: 0px;
  flex-direction: column;
  min-height: 258px;
}
.fees-table .gemsreward .gems-rewards-wrap .separtor {
  border: 1px solid #D9E8F1;
  margin-top: 12px;
  margin-bottom: 2px;
  width: 100%;
}
.fees-table .gemsreward .values .custom-input {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fee-payement-plan {
  color: #354060;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  margin-bottom: 5px;
  display: block;
}
.fee-payement-plan.terms-container {
  background: #E6F6FE;
  padding: 20px;
  border-radius: 12px;
}

.student-info {
  border-top: solid 0px #E1E6EA;
  border-bottom: solid 0px #E1E6EA;
  padding-top: 20px;
}
@media (resolution: 1.5dppx) {
  .student-info .row .col-md-4 {
    max-width: 50%;
    flex: 0 0 50% !important;
  }
}
.student-info .profile_card {
  position: relative;
}
.student-info .profile_card .stu-img-wrap {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  border: 1px solid #041E42;
  display: flex;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0px 0px 0px 3px #FFFFFF inset;
}
@media (resolution: 1.25dppx) {
  .student-info .profile_card .stu-img-wrap {
    margin-left: -14px;
  }
}
@media (resolution: 1.5dppx) {
  .student-info .profile_card .stu-img-wrap {
    margin-left: -14px;
  }
}
@media (resolution: 1.25dppx) {
  .student-info .profile_card .detail-wrap {
    padding: 0 0.5rem;
  }
}
@media (resolution: 1.5dppx) {
  .student-info .profile_card .detail-wrap {
    padding: 0 0.5rem;
  }
}
.student-info .profile_card .detail-wrap .student-info-row {
  color: #002B64;
}
.student-info .profile_card .detail-wrap .student-info-row.grade-id {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  gap: 8px;
}
@media (resolution: 1.25dppx) {
  .student-info .profile_card .detail-wrap .student-info-row.grade-id {
    display: inline-block;
  }
}
.student-info .profile_card .detail-wrap .student-info-row .name {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  display: block;
}
.student-info .profile_card .detail-wrap .student-info-row .status-notapproved {
  color: #002B64;
}
.student-info .profile_card .custom-checkbox {
  color: #002B64 !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  margin-right: 0px !important;
  margin-bottom: 0px !important;
  padding-left: 0px !important;
  position: absolute !important;
  top: 30px !important;
  right: 36px !important;
  border-radius: 50% !important;
}
@media (resolution: 1.5dppx) {
  .student-info .profile_card.selected .detail-wrap {
    padding: 0 0.5rem;
  }
}
.student-info .profile_card.selected .detail-wrap .student-info-row {
  color: #fff;
}
.student-info .profile_card.selected .detail-wrap .student-info-row .name {
  color: #fff;
}
.student-info .profile_card.selected .detail-wrap .student-info-row .status-notapproved {
  color: #fff;
}
.student-info .profile_card.selected .detail-wrap .student-info-row .status-rejected {
  color: #fff;
}
.student-info .profile_card.selected .detail-wrap .student-info-row .status-pending {
  color: #fff;
}

.order-list {
  margin-left: 15px;
  line-height: 1.5rem;
}

.main-content {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
}

.redeem-points-container {
  position: relative;
  width: 100%;
}
.redeem-points-container .rewarding-bg-section {
  background-color: #fff;
  border-top: solid 1px #e9ecef;
  border-bottom: solid 1px #e9ecef;
  padding: 20px 30px;
}
.redeem-points-container .rewarding-bg-section:after {
  background: url("./../assets/images/redeem-points-bg.png") no-repeat;
  background-size: cover;
}
.redeem-points-container .reward-points-details {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  margin-right: 30px;
  margin-bottom: 70px;
  margin-left: 30px;
  padding: 25px 25px 100px 25px;
}
.redeem-points-container .reward-points-details .history-link {
  color: #70747b;
  display: flex;
  display: -ms-flexbox;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  justify-content: flex-end;
}
.redeem-points-container .reward-points-details .history-link .text-btn {
  color: #0099eb;
  padding-right: 4px;
  padding-left: 4px;
}
.redeem-points-container .reward-points-details .contact-table th:first-child,
.redeem-points-container .reward-points-details .contact-table td:first-child {
  width: 36.4%;
}
.redeem-points-container .reward-points-details .reward-info-table th:last-child,
.redeem-points-container .reward-points-details .reward-info-table td:last-child {
  width: 25%;
}
@media screen and (max-width: 768px) {
  .redeem-points-container .reward-points-details {
    margin-right: 10px;
    margin-left: 10px;
    padding: 15px;
  }
}
.redeem-points-container .card-container {
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
}
.redeem-points-container .card-container .user-details-card {
  border: solid 1px #eae8e8;
  border-radius: 10px;
  box-shadow: 3px 2px 20px 0 rgba(0, 0, 0, 0.08);
  display: inline-flex;
  flex-direction: column;
  margin-right: 25px;
  margin-bottom: 30px;
  max-width: 250px;
  padding: 15px;
  width: 100%;
}
.redeem-points-container .card-container .user-details-card .img-name-info {
  align-items: center;
  display: inline-flex;
  padding-bottom: 10px;
  position: relative;
  width: 100%;
}
.redeem-points-container .card-container .user-details-card .img-name-info img {
  border: 1px solid #fff;
  height: 50px;
  margin-right: 10px;
  max-width: 50px;
  width: 100%;
}
.arabic .redeem-points-container .card-container .user-details-card .img-name-info img {
  margin-right: 0;
  margin-left: 10px;
}
.redeem-points-container .card-container .user-details-card .img-name-info .name {
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  font-weight: normal;
}
.redeem-points-container .card-container .user-details-card .img-name-info .id {
  color: #585d65;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
}
.redeem-points-container .card-container .user-details-card .school-grade-name {
  color: #0a1e3e;
  font-size: 0.6875rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.redeem-points-container .card-container .user-details-card .school-grade-name span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  padding-right: 4px;
}
.arabic .redeem-points-container .card-container .user-details-card .school-grade-name span {
  padding-right: 0;
  padding-left: 4px;
}
.arabic .redeem-points-container .card-container .user-details-card {
  margin-right: 0;
  margin-left: 25px;
}
.redeem-points-container .card-container .user-details-card.selected {
  box-shadow: 3px 2px 25px 0 #a2c4d9;
  border-color: #389ddc;
}
@media screen and (max-width: 768px) {
  .redeem-points-container .card-container .user-details-card {
    margin-right: 0;
    margin-bottom: 15px;
    max-width: 100%;
  }
}
.redeem-points-container .fee-details-container {
  width: 100%;
}
.redeem-points-container .fee-details-container .fee-table {
  margin-bottom: 10px;
}
.redeem-points-container .fee-details-container .fee-table th:last-child,
.redeem-points-container .fee-details-container .fee-table td:last-child {
  width: 20.4%;
}
@media screen and (max-width: 768px) {
  .redeem-points-container .fee-details-container .fee-table {
    white-space: nowrap;
  }
}
.redeem-points-container .fee-details-container .redeem-btn {
  justify-content: center;
  width: 200px;
}

.health_checks {
  list-style: none;
}
.health_checks li {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  align-items: center;
}
.health_checks li:nth-child(even) {
  background: #fafafa;
}
.health_checks li .description_sec p {
  margin-bottom: 0;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
}
.health_checks li .description_sec .information_sec {
  margin-top: 10px;
}
.health_checks li .description_sec .information_sec label {
  color: #6e7a8e;
  font-size: 0.67rem;
  margin-bottom: 5px;
}
.health_checks li .description_sec .information_sec input {
  border: solid 1px #9cbdcc;
  background-color: #ffffff;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  height: 40px;
  font-size: 0.8rem;
}
.health_checks li .description_sec .information_sec input:focus {
  outline: none;
}
@media screen and (max-width: 768px) {
  .health_checks li .button_container {
    text-align: center;
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 768px) {
  .health_checks li {
    display: inline-block;
    width: 100%;
  }
}

.student_details {
  display: flex;
}
.student_details .profile_card {
  margin-left: 20px;
  width: 100%;
}
.arabic .student_details .profile_card {
  margin-left: 0;
  margin-right: 20px;
}
.student_details .profile_card ul li {
  font-size: 0.76rem;
  padding: 15px 0;
  border-bottom: 1px solid #efefef;
}
@media screen and (max-width: 768px) {
  .student_details .profile_card ul li {
    text-align: center !important;
  }
  .arabic .student_details .profile_card ul li {
    text-align: center !important;
  }
}
.arabic .student_details .profile_card ul li {
  text-align: right;
}
.student_details .profile_card ul li:last-child {
  border-bottom: none;
}
.student_details .profile_card ul li .label_text {
  color: #475f76;
}
.student_details .profile_card ul li .dof {
  color: #475f76;
  display: block;
}
.student_details .profile_card ul li .description_text {
  color: #194064;
  display: block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.student_details .profile_card ul li .profile_title .name {
  font-size: 1rem;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.student_details .profile_card ul li .other-details {
  font-size: 0.75rem;
  color: #68788E;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
}
.student_details .profile_card .top_section .profile-pic img {
  width: 86px !important;
  height: 86px !important;
  border: 2px solid #002B64;
  border-radius: 50%;
  margin-right: 0px;
}
.student_details .profile_card .top_section .info_icon {
  position: absolute;
  top: 0;
  right: 0;
}
.student_details .profile_card .popover-block-container {
  position: absolute;
  top: 0;
  right: 0;
}
.arabic .student_details .profile_card .popover-block-container {
  right: auto;
  left: 0;
}

.hr-line {
  margin-left: -30px;
  margin-right: -30px;
}

.button-group-action-small .button {
  height: 30px;
}

.profile-pic {
  position: relative;
  display: inline-block;
}
.profile-pic:hover .edit {
  display: block;
}
.profile-pic .edit {
  padding-top: 7px;
  padding-right: 7px;
  position: absolute;
  right: -10px;
  bottom: 10px;
  display: none;
}
.profile-pic .edit a {
  color: #343434;
  background-color: #e3e3e3;
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 4px;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .profile-pic {
    display: table;
    margin: auto;
  }
}

.accordion-content .custom-input label.error.fail-alert {
  position: absolute;
  right: 0;
}

.parent-profile-card {
  border: 1px solid #D9E8F1;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0px;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
}
.parent-profile-card .profile-img {
  background-color: #fff;
  margin-right: 10px;
}
.parent-profile-card .profile-img img {
  width: 100px;
  height: 100px;
  border-radius: 12px;
}
.parent-profile-card .profile-details {
  background-color: #fff;
  width: 90%;
  padding-left: 16px;
}
.parent-profile-card .profile-details .profile-name {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #002B64;
}
.parent-profile-card .update-profile {
  white-space: nowrap;
}

.activity-container .custom-accordion img.svg path {
  fill: #fff;
  stroke: #fff;
}
.activity-container .custom-accordion .information-text {
  font-size: 10px;
}
.activity-container .custom-tabs {
  background-color: #fff;
  border-radius: 0px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin: 8px -20px 15px -20px;
  padding: 0px 10px;
  border-bottom: 1px solid #D9E8F1;
  color: #68788E;
}
.activity-container .custom-tabs .nav-item .nav-link {
  justify-content: center;
  min-width: 107px;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0px;
  box-shadow: none;
  color: #68788E;
  padding-top: 6px;
  padding-bottom: 8px;
}
.activity-container .custom-tabs .nav-item .nav-link.active {
  color: #002B64;
  border-bottom: 3px solid #00A3E0;
}
.activity-container .modal-close {
  display: flex;
  justify-content: space-between;
  padding: 20px 15px;
  align-items: center;
}
.activity-container .custom-modal .modal-content {
  border-radius: 20px;
}

.activities-bg-section:after {
  background: url("./../assets/images/activities-bg.png") no-repeat;
  background-size: cover;
}
.activities-bg-section .information-details .description {
  font-size: 0.9375rem;
}

.activities-detailbox {
  background: #fff;
  border: 1px solid #D9E8F1;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
}
.activities-detailbox:last-child {
  margin-bottom: 0;
}
.activities-detailbox .childernoll-status {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.activities-detailbox .childenroll-text {
  margin-left: 10px;
}
.activities-detailbox .childenroll-text .pendstatus-color {
  color: #FA6000;
}
.activities-detailbox .full-height {
  height: 100%;
}

.activities-img {
  height: 167px;
  width: 242px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
}
.activities-img img {
  border-radius: 12px;
  width: auto;
}
@media screen and (max-width: 768px) {
  .activities-img {
    margin: auto;
    text-align: center;
  }
}

.activity-popover-box .activity-info-text {
  max-height: 54px;
  overflow-y: scroll;
  overflow: auto;
}

.activity-info {
  border-right: 0px dotted #9586A5;
  padding-right: 20px;
}
@media screen and (max-width: 768px) {
  .activity-info {
    border-right: 0px !important;
    padding-right: 0px;
  }
}
.activity-info-location {
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .activity-info-location {
    margin: 6px 0;
  }
}
.activity-info-location .svg {
  width: 12px;
  margin-right: 4px;
  vertical-align: middle;
}
.arabic .activity-info-location {
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .activity-info-location {
    justify-content: center;
  }
}
.activity-info-title {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.activity-info-text {
  font-size: 0.75rem;
  color: #666666;
}

.event-details {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .event-details {
    display: block;
  }
}

.available-activities .event-details, .upcoming-activities .event-details {
  display: block !important;
}
.available-activities .small-info, .upcoming-activities .small-info {
  width: fit-content;
}

.activity-enrollinfo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  background: #F1F6FC;
  border: 1px solid #E6EFF5;
  padding: 12px;
  border-radius: 12px;
}
.activity-enrollinfo-box {
  width: 100%;
}
.activity-enrollinfo-box .button.approved {
  color: #19AC56;
  background-color: transparent;
  border-color: transparent;
  font-weight: 500;
}
.activity-enrollinfo-box .button.approved:hover {
  background-color: transparent;
}
.activity-enrollinfo-box .button.pending {
  color: #002B64;
  background-color: #fff;
  border-color: #002B64;
  font-size: 12px;
}
.activity-enrollinfo-box .buttonpayonline.disabled {
  background-color: #FEDB00;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.0509803922);
  opacity: 0.4;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
  text-align: center;
}
.activity-enrollinfo-title {
  display: flex;
}
.activity-enrollinfo-img {
  width: 20px;
  margin-right: 10px;
  line-height: 10px;
}
@media screen and (max-width: 768px) {
  .activity-enrollinfo-img {
    line-height: 10px;
  }
}
.activity-enrollinfo-feedback {
  text-align: center;
  justify-content: space-evenly;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
.activity-enrollinfo .title-text {
  color: #696969;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .activity-enrollinfo .title-text {
    white-space: nowrap;
  }
}
.activity-enrollinfo .info-text {
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .activity-enrollinfo .info-text {
    padding-left: 2px;
    white-space: nowrap;
  }
}
.activity-enrollinfo .activity-enrollinfo-box a {
  color: #00A3E0;
  text-decoration: underline !important;
}
.activity-enrollinfo .activity-enrollinfo-box a:hover {
  text-decoration: none !important;
}

.enroll-status {
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  color: #0E365A;
}
.enroll-status.pending {
  background-color: #F5F9FF;
}
.enroll-status.approve {
  background-color: #E8EFFC;
}
.enroll-status .col-md-4:last-child .enroll-status-details {
  border-right: 1px dotted #9A89AD;
  height: 100%;
  align-items: center;
}
.enroll-status-details {
  border-right: 1px dotted #9A89AD;
  height: 100%;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .enroll-status-details {
    border: 0px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
  }
}
.enroll-status-details-last-one {
  border-right: 0px dotted #9A89AD;
  height: 100%;
  align-items: center;
}
.enroll-status .title-text {
  display: block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 4px;
}
.enroll-status .no-transform {
  text-transform: none;
}
.enroll-status .info-text {
  font-weight: normal;
}

.childenroll-detail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .childenroll-detail {
    text-align: center;
    display: block;
    justify-content: center;
  }
}

.unsubscribe-popover-img {
  width: 30px;
}
@media screen and (max-width: 768px) {
  .unsubscribe-popover-img {
    margin: auto;
    text-align: center;
  }
}
.unsubscribe-popover-img img {
  width: 100%;
}

.starrating > input {
  display: none;
}

.starrating > label:before {
  content: "\f005";
  margin: 0 8px;
  font-size: 18px;
  font-family: FontAwesome;
  display: inline-block;
}

.starrating > label {
  color: #222222;
  margin-bottom: 0;
}

.starrating > input:checked ~ label {
  color: #ffca08;
}

.starrating > input:hover ~ label {
  color: #ffca08;
}

/*
.starrating > {
  input {
    display: none;
  }

  label {
    &:before {
      content: "\f005";

      background: url(../assets/images/star.svg) no-repeat center center;
      margin: 2px;
      font-size: 3em;
      font-family: FontAwesome;
      display: inline-block;
    }

    color: #222222;

  }

  input {
    &:checked ~ label, &:hover ~ label {
      color: #ffca08;
    }
  }
}*/
.info-sec {
  font-size: 14px;
}
.info-sec .title-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  display: block;
}

.custom-input .textarea-field {
  border-radius: 8px;
  border-color: #BBC5C9;
}

.activity-select .select_box {
  display: block;
}
.activity-select .select_box select {
  width: 100%;
}

.activity-list-group {
  background: #F0F3F8;
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  padding: 20px 0;
}
.activity-list-group .activity-list {
  position: relative;
}
.activity-list-group .activity-list:before {
  content: "\f111";
  font-family: "FontAwesome";
  position: absolute;
  left: -15px;
  top: 2px;
  font-size: 8px;
}

@media screen and (max-width: 768px) {
  .activity-status .activity-list-group {
    display: inline;
    padding: 20px;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .activity-status {
    display: flex;
  }
}

.modal-close {
  display: flex;
  justify-content: flex-end;
  padding: 14px 10px;
}
.modal-close .cross_icon {
  background: url("../assets/images/close_icon.svg") no-repeat left top;
  width: 13px;
  height: 13px;
  display: block;
  background-size: cover;
}

#erollreqest_popup .modal-body {
  padding: 0 25px 25px;
}

.options-selection {
  padding: 20px 0;
}

.guideline .link {
  color: #0099eb;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  font-size: 0.75rem;
}

.info-small-title {
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
}

.popover-block-container .popover-icon {
  background: none;
  color: none;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
}
.popover-block-container .popover-icon i {
  width: 15px;
  height: 15px;
}
.popover-block-container.stud-info-icon {
  position: absolute;
  top: 0;
  right: 10px !important;
}
.arabic .popover-block-container.stud-info-icon {
  left: 10px !important;
  right: auto !important;
}

.popover-header {
  display: none;
}

.popover {
  max-width: 306.6px;
  border-radius: 6px;
  border: none;
  box-shadow: 0 0 6px 1px #eee;
}

.popover-body {
  border: none;
  padding: 20px;
  color: #5f6976;
  font-size: 0.75rem;
  z-index: 2;
}
.popover-body .popover-close {
  position: absolute;
  top: 5px;
  right: 10px;
  opacity: 1;
}
.popover-body ul {
  margin-bottom: 0;
}
.popover-body ul li span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}

.options-box {
  background-color: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.options-box-header {
  background-color: #083169;
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  padding: 15px;
  border-radius: 6px;
  position: relative;
}
.options-box-header:before {
  content: "";
  background-size: cover;
  height: 31px;
  position: absolute;
  right: 10px;
  width: 48px;
}
.options-box-wrapper {
  height: 260px;
  margin-bottom: 25px;
}
.options-box-content {
  height: 250px;
  margin-top: 8px;
}
.options-box-content.scrollable-section {
  margin-right: 5px;
}
.options-box-content .options-list-box {
  list-style: none;
  margin-bottom: 0;
}
.options-box-content .option-list {
  position: relative;
  border-bottom: 1px solid #e5e5e5;
  text-transform: uppercase;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  margin: 0 15px;
}
.options-box-content .option-list:last-child {
  border-bottom: none;
}
.options-box-content .option-list a {
  padding: 15px;
  display: block;
  color: #000;
}
.options-box-content .option-list a:before {
  content: "";
  background: url("../../assets/images/bullet.svg") no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  padding-right: 10px;
  width: 14px;
}
.options-box-content .option-list a:hover {
  background-color: #F1F6FC;
}
.options-box-content .option-list.selected {
  margin: 0;
  background-color: #DDECF8;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
.options-box-content .option-list.selected a {
  margin: 0 15px;
}
.options-box-content .option-list.selected a:before {
  left: 90%;
  background: url("../../assets/images/bullet-active.svg") no-repeat;
  background-size: cover;
  width: 15px;
  height: 15px;
  margin-left: -4px;
}
.arabic .options-box-content .option-list.selected a {
  right: 90%;
  left: auto !important;
}
.options-box-content .option-list.option-disabled a {
  cursor: default;
}
.options-box-content .option-list.option-disabled a:hover {
  background-color: #d3d3d3;
}

.book-sales-container a {
  color: #fff;
}
.book-sales-container a:hover {
  color: #fff;
}
.book-sales-container .bs-title-sec .bs-top-rt-txt {
  font-size: 12px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  color: #7C7B7B;
}
.book-sales-container .bs-title-sec .bs-top-rt-txt .header_text {
  color: #454C5C;
}
.book-sales-container .page-flow {
  margin-top: 20px;
}
.book-sales-container .page-flow .completed {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.arabic .book-sales-container .page-flow .completed {
  text-align: right;
}
.book-sales-container .page-flow .completed:before {
  content: "";
  border: dashed 1px #C8CEDE;
  width: 100%;
  position: absolute;
  left: 12%;
  top: 13px;
  z-index: 1;
}
.arabic .book-sales-container .page-flow .completed:before {
  right: 12%;
}
.book-sales-container .page-flow .completed .path-step {
  background-color: #86C800;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  width: 20px;
  font-size: 0.666rem;
  color: #fff;
  text-align: center;
  padding-top: 2px;
  position: relative;
  z-index: 2;
}
.book-sales-container .page-flow .completed .path-step img {
  margin-top: -4px;
}
.book-sales-container .page-flow .completed p {
  font-size: 0.666rem;
  color: #818898;
  margin-top: 10px;
}
.book-sales-container .page-flow .active {
  position: relative;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.book-sales-container .page-flow .active.payment-mode {
  border: 0px !important;
}
.book-sales-container .page-flow .active.payment-mode:before {
  border: 0px !important;
}
.book-sales-container .page-flow .active .path-step {
  background-color: #454C5C;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  width: 20px;
  color: #fff;
  font-size: 0.666rem;
  text-align: center;
  padding-top: 2px;
  position: relative;
  z-index: 2;
}
.book-sales-container .page-flow .active p {
  font-size: 0.666rem;
  color: #0A1E3E;
  margin-top: 10px;
}
.book-sales-container .page-flow .active:before {
  content: "";
  border: dashed 1px #C8CEDE;
  width: 100%;
  position: absolute;
  left: 12%;
  top: 13px;
  z-index: 1;
}
.arabic .book-sales-container .page-flow .active {
  text-align: right;
}
.arabic .book-sales-container .page-flow .active::after {
  display: none;
}
.book-sales-container .page-flow .pending {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.book-sales-container .page-flow .pending::before {
  width: 98%;
}
.book-sales-container .page-flow .pending .path-step {
  background-color: #C8CEDE;
  position: relative;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  width: 20px;
  color: #fff;
  font-size: 0.666rem;
  text-align: center;
  padding-top: 2px;
  position: relative;
  z-index: 2;
}
.book-sales-container .page-flow .pending p {
  font-size: 0.666rem;
  color: #818898;
  margin-top: 10px;
}
.book-sales-container .book-payment-details {
  border: 1px solid #C8CEDE;
  border-radius: 30px;
  padding: 20px;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table {
  margin-top: 30px;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table thead {
  color: #415D77;
  background-color: #E2E8F2;
  margin-bottom: 5px;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table thead tr th {
  border: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table thead tr th:first-child {
  border-radius: 8px 0 0 8px;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table thead tr th:last-child {
  border-radius: 0 8px 8px 0;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody {
  color: #0A1E3E;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr.border-row {
  border: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr.border-row td {
  padding: 3px;
  border: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr.border-row td:first-child {
  border-left: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr.border-row td:last-child {
  border-right: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr:last-child {
  border: none;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #0A1E3E;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr:last-child td {
  border: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr:last-child td:first-child {
  border-left: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr:last-child td:last-child {
  border-right: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr:nth-last-child(2) {
  border: none;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #0A1E3E;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr:nth-last-child(2) td:first-child {
  border-left: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr:nth-last-child(2) td:last-child {
  border-right: none;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr td {
  border-color: #E3E3E3;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr td:first-child {
  border-left-style: solid;
  border-left-width: 1px;
  border-top-left-radius: 8px;
  -moz-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr td:last-child {
  border-radius: 0 8px 8px 0;
  border-right-style: solid;
  border-right-width: 1px;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody tr td:nth-child(4) i {
  color: #0099EB;
  cursor: pointer;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tbody .quantity {
  margin: 0 0.5rem;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tfoot {
  background-color: #F4F7FD;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tfoot tr {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #0A1E3E;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tfoot tr td {
  border: none;
  padding-top: 20px;
  padding-bottom: 20px;
}
.book-sales-container .book-payment-details ​​​​​​ .custom-table table tfoot tr td:last-child {
  font-size: 1.3rem;
  color: #002B64;
}
.book-sales-container .book-payment-details .book-set-name {
  padding: 0px 6px !important;
}
.book-sales-container .check-box-set .enabled, .book-sales-container .check-box-set .disabled {
  background-color: #214BAC;
  border-radius: 24px;
  color: #fff;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 4px;
}
.book-sales-container .check-box-set .disabled {
  color: #454C5C;
  border: 1px dashed #818898;
  background-color: #fff;
}
.book-sales-container .check-box-set .selectedCustom {
  background-color: #214BAC;
  color: #fff;
}
.book-sales-container .check-box-set .checkbox-parent {
  cursor: pointer;
  padding: 0px 12px;
}
@media screen and (max-width: 768px) {
  .book-sales-container .check-box-set .checkbox-parent {
    margin-bottom: 4px;
  }
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox {
  display: inline-flex;
  color: #354060;
  cursor: pointer;
  font-size: 0.875rem;
  margin-right: 20px;
  position: relative;
  user-select: none;
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox input {
  cursor: pointer;
  height: 20px;
  opacity: 0;
  position: absolute;
  left: 0;
  width: 100%;
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox label:before {
  content: "";
  border: 1px solid #69738d;
  border-radius: 50%;
  cursor: pointer;
  margin-bottom: 0;
  position: absolute;
  top: 1px;
  right: -26px;
  height: 15px;
  width: 15px;
}
@media screen and (max-width: 768px) {
  .book-sales-container .check-box-set .checkbox-parent .creative-checkbox label:before {
    top: 4px;
  }
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox label:after {
  content: "✓";
  position: absolute;
  display: none;
  top: 2px;
  right: -22px;
  font-size: 11px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .book-sales-container .check-box-set .checkbox-parent .creative-checkbox label:after {
    top: 5px;
  }
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox input:disabled ~ label:before {
  background: #E2E8F2;
  top: 1px;
  background-color: #16479f;
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox input:checked ~ label:before {
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox input:checked ~ label:after {
  display: block;
  color: #16479f;
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox input:disabled ~ label:after {
  border: solid #fff;
  border-width: 0 1px 1px 0;
  top: 2px;
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox input:disabled ~ label {
  color: #454C5C;
}
.book-sales-container .check-box-set .checkbox-parent .creative-checkbox input:checked ~ label {
  color: #fff;
}
.book-sales-container .add-search-book {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.book-sales-container .add-search-book span {
  font-size: 0.727rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  color: #CCCCCC;
}
.book-sales-container .add-search-book .search-bar {
  border-radius: 100px;
  position: relative;
  padding: 3px 5px;
  margin-left: 10px;
  border: solid 1px #bbc5c9;
  height: 40px;
  display: flex;
  align-items: center;
}
.book-sales-container .add-search-book .search-bar input {
  border: none;
  font-size: 0.75rem;
}
.book-sales-container .add-search-book .search-bar input:focus {
  border: none;
  outline: none;
}
.book-sales-container .add-search-book .search-bar input::placeholder {
  font-size: 0.727rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  color: #797878;
}
.book-sales-container .add-search-book .search-bar .search-icon {
  position: absolute;
  right: 10px;
  top: 9px;
}
.book-sales-container .add-search-book .add-btn {
  padding-right: 14px;
  padding-left: 14px;
  margin-left: 10px;
}
.book-sales-container .delivery-mode-wrap {
  border: solid 1px #C8CEDE;
  border-radius: 30px;
  padding: 20px;
}
.book-sales-container .delivery-mode-wrap .tabs .tab-radio {
  opacity: 0;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.book-sales-container .delivery-mode-wrap .tabs .tab-radio-lb {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
  position: relative;
  padding-left: 34px;
}
.book-sales-container .delivery-mode-wrap .tabs .tab-radio + .tab-radio-lb:before {
  content: "";
  background: #fff;
  border: 2px solid #979DA5;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  left: 0;
}
.book-sales-container .delivery-mode-wrap .tabs .tab-radio:checked + .tab-radio-lb:before {
  content: "\f00c";
  font-family: "FontAwesome";
  color: #fff;
  background-color: #389DDC;
  border: none;
}
.book-sales-container .delivery-mode-wrap .tabs section {
  display: none;
  padding: 20px 0 0;
  border: none;
}
.book-sales-container .delivery-mode-wrap .tabs #tab1:checked ~ #content1 {
  display: block;
}
.book-sales-container .delivery-mode-wrap .tabs #tab2:checked ~ #content2 {
  display: block;
}
.book-sales-container .delivery-mode-wrap .tabs #tab3:checked ~ #content3 {
  display: block;
}
.book-sales-container .delivery-mode-wrap .tabs #tab4:checked ~ #content4 {
  display: block;
}
.book-sales-container .delivery-mode-wrap .tabs #content1 {
  padding-top: 18%;
}
.book-sales-container .delivery-mode-wrap .tabs #content1 img {
  width: 11%;
}
.book-sales-container .delivery-mode-wrap .tabs #content1 p {
  font-size: 0.8125rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  text-align: center;
  color: #585D65;
}
.book-sales-container .delivery-mode-wrap .tabs #content2 {
  padding-top: 18%;
}
.book-sales-container .delivery-mode-wrap .tabs #content2 img {
  width: 11%;
}
.book-sales-container .delivery-mode-wrap .tabs #content2 p {
  font-size: 0.8125rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  text-align: center;
  color: #585D65;
}
.book-sales-container .delivery-mode-wrap .tabs #content3 {
  border-top: solid 2px #E1E6EA;
  margin-top: 25px;
}
.book-sales-container .delivery-mode-wrap .tabs #content3 .custom-input input {
  width: 100%;
}
.book-sales-container .delivery-mode-wrap .tabs #content3 .custom-input input:focus {
  outline: none;
}
.book-sales-container .delivery-mode-wrap .tabs #content3 .custom-input label {
  color: #222734;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  margin-bottom: 5px;
  display: block;
}
.book-sales-container .delivery-mode-wrap .tabs #content3 .custom-input textarea:focus {
  box-shadow: none;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl {
  background-color: #F8F8F8;
  padding: 25px 20px;
  border-radius: 15px;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table thead {
  font-weight: 700;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  color: #22262E;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table thead tr th {
  border: none;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:last-child {
  border: none;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #002B64;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:last-child td {
  border: none;
  background-color: transparent;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:last-child td:first-child {
  border-left: none;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:last-child td:first-child {
  border-right: none;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:last-child td:last-child {
  border-right: none;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:last-child td:last-child {
  border-left: none;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(2) {
  border: none;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #002B64;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(2) td {
  background-color: transparent;
  border-top: none;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(2) td:first-child {
  border-left: none;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(2) td:first-child {
  border-right: none;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(2) td:last-child {
  border-right: none;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(2) td:last-child {
  border-left: none;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(3) {
  border: none;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #002B64;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(3) td {
  background-color: transparent;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(3) td:first-child {
  border-left: none;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(3) td:first-child {
  border-right: none;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(3) td:last-child {
  border-right: none;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr:nth-last-child(3) td:last-child {
  border-left: none;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr td {
  background-color: #FFFFFF;
  border-color: #E3E3E3;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr td:first-child {
  border-radius: 8px 0 0 8px;
  border-left-style: solid;
  border-left-width: 1px;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr td:first-child {
  border-radius: 0 8px 8px 0;
  border-right-style: solid;
  border-right-width: 1px;
  border-left-style: none;
  border-left-width: 0px;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr td:last-child {
  border-radius: 0 8px 8px 0;
  border-right-style: solid;
  border-right-width: 1px;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr td:last-child {
  border-radius: 8px 0 0 8px;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-style: none;
  border-right-width: 0px;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tbody tr td:nth-child(2) span {
  background-color: #E2E8F2;
  padding: 3px 12px;
  border-radius: 15px;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tfoot tr {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #002B64;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tfoot tr td {
  background-color: #fff;
  border: none;
  padding-top: 20px;
  padding-bottom: 20px;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tfoot tr td:first-child {
  border-radius: 8px 0 0 8px;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tfoot tr td:first-child {
  border-radius: 0 8px 8px 0;
}
.book-sales-container .delivery-mode-wrap .book-charges-tbl table tfoot tr td:last-child {
  font-size: 16px;
  color: #002B64;
  border-radius: 0 8px 8px 0;
}
.arabic .book-sales-container .delivery-mode-wrap .book-charges-tbl table tfoot tr td:last-child {
  border-radius: 8px 0 0 8px;
}
.book-sales-container .bs-payment-history .tab-content table thead th {
  padding: 0.625rem;
  /*10px */
}
.book-sales-container .bs-payment-history .tab-content table thead th:last-child {
  text-align: center;
}
.book-sales-container .bs-payment-history .tab-content table tbody .icon-wrap {
  width: 10%;
  display: inline-block;
}
.book-sales-container .bs-payment-history .tab-content table tbody tr:nth-child(even) {
  background-color: transparent;
}
.book-sales-container .bs-payment-history .tab-content table tbody tr:first-child td {
  border: none;
}
.book-sales-container .bs-payment-history .tab-content table tbody tr td {
  border-top: solid 1px #E3E3E3;
}
.book-sales-container .bs-payment-history .tab-content table tbody tr td:first-child {
  border-left: solid 1px #E3E3E3;
}
.book-sales-container .bs-payment-history .tab-content table tbody tr td:last-child {
  border-right: solid 1px #E3E3E3;
  text-align: center;
}
.book-sales-container .next-btn {
  color: #fff;
}
.book-sales-container .next-btn a {
  color: #fff;
}

.custom-input {
  margin-bottom: 16px;
}
.custom-input input {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.custom-input textarea {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  color: #194064;
  font-size: 0.75rem;
}

#confirmation_popup .modal-close {
  position: absolute;
  right: 4px;
  top: 4px;
}
#confirmation_popup .modal-dialog {
  max-width: 44% !important;
}
@media screen and (max-width: 768px) {
  #confirmation_popup .modal-dialog {
    max-width: 90% !important;
  }
}
#confirmation_popup .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#confirmation_popup .click-confirm {
  background-color: #fff;
  border-top: solid 1px #C8CEDE;
  border-bottom: solid 1px #C8CEDE;
  padding: 0 20px;
}
#confirmation_popup .click-confirm p {
  color: #002B64;
  font-size: 0.9rem;
  margin-top: 1rem;
}
#confirmation_popup .click-confirm p span {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
}
#confirmation_popup .click-confirm p .ref-no {
  background-color: #E2E8F2;
  border-radius: 4px;
  padding: 4px 8px;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  display: inline-block;
}
#confirmation_popup .click-confirm p .ref-no span {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
}
#confirmation_popup .modal-body .ref-no {
  background-color: #E2E8F2;
  border-radius: 20px;
  padding: 4px 8px;
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  display: inline-block;
}
#confirmation_popup .modal-body p {
  margin-top: 1rem;
  font-weight: 400;
  font-size: 16px;
  color: #002B64;
}
#confirmation_popup .modal-body .note {
  color: #002B64;
  padding-top: 20px;
  margin-bottom: 0;
  font-size: 1rem;
}
#confirmation_popup .modal-body .button-group-action {
  margin-top: 10px;
}

.confirm-popup .modal-close {
  position: absolute;
  right: 4px !important;
  top: 4px !important;
}
.confirm-popup .modal-dialog {
  max-width: 44%;
}
@media screen and (max-width: 768px) {
  .confirm-popup .modal-dialog {
    width: 90% !important;
  }
}
.confirm-popup .modal-header {
  padding-top: 25px;
  padding-bottom: 25px;
}
.confirm-popup .click-confirm {
  background-color: #F8FBFF;
  border-top: solid 1px #C8CEDE;
  border-bottom: solid 1px #C8CEDE;
}
.confirm-popup .click-confirm p {
  color: #0a1e3e;
  font-size: 0.9rem;
  margin-top: 1rem;
}
.confirm-popup .click-confirm p span {
  color: #214bac;
  display: block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
.confirm-popup .modal-body .ref-no {
  background-color: #E2E8F2;
  border-radius: 20px;
  padding: 6px 13px;
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
.confirm-popup .modal-body p {
  margin-top: 1rem;
}
.confirm-popup .modal-body .note {
  color: #EA6070;
  padding-top: 20px;
  margin-bottom: 0;
}
.confirm-popup .modal-body .button-group-action {
  margin-top: 10px;
}

.booksale-table thead tr th {
  border: 0px;
}
.booksale-table tbody tr:last-child td:first-child {
  border-left: solid 1px #E3E3E3 !important;
}
.booksale-table tbody tr:last-child td:last-child {
  border-right: solid 1px #E3E3E3 !important;
}
.booksale-table tbody tr:nth-last-child(2) td:first-child {
  border-left: solid 1px #E3E3E3 !important;
}
.booksale-table tbody tr:nth-last-child(2) td:last-child {
  border-right: solid 1px #E3E3E3 !important;
}
.booksale-table tbody tr td .plus-minus-wrap {
  background: #002B64;
  border-radius: 100px;
  padding: 8px !important;
  height: 40px !important;
}
.booksale-table tbody tr td .plus-minus-wrap .add-minus-bg {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 4px;
  border: 1px solid #002B64;
  color: #fff;
}
.booksale-table tbody tr td .plus-minus-wrap .quantity {
  border: 0px solid transparent;
  border-radius: 4px;
  padding: 2px 8px;
  min-width: 14px;
  width: 20px;
  color: #fff;
}
.booksale-table tbody tr td .add-minus-bg {
  background-color: #ededed;
  border-radius: 50%;
  padding: 4px;
  border: 1px solid #fff;
  color: #696969;
}
.booksale-table tbody tr td .quantity {
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  padding: 2px 8px;
  min-width: 14px;
  width: 20px;
}

.gray-box {
  background-color: #F5F9FF;
  border-radius: 8px;
  padding: 25px 20px;
  font-size: 14px;
  margin: 30px 0;
}
.gray-box ul {
  display: flex;
  justify-content: space-evenly;
  margin: 0;
  list-style: none;
}
@media screen and (max-width: 768px) {
  .gray-box ul {
    display: block;
    margin: 0 0 0 20px;
  }
}
.gray-box ul li {
  position: relative;
}
.gray-box ul li:before {
  content: "";
  position: absolute;
  top: 0;
  left: -25px;
  background: url(../assets/images/idea1.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-size: cover;
}

.hiftz-container .student-tabs {
  margin-top: 15px;
}
.hiftz-container .student-tabs .nav-item .nav-link span {
  padding-right: 0px;
  width: 20px;
}
.hiftz-container .student-tabs .nav-item .nav-link span .img-icon {
  width: 100% !important;
}
.hiftz-container .tab-content #tab-cont-1 .date-payment-info {
  margin-bottom: 15px;
}
.hiftz-container .tab-content #tab-cont-1 .date-payment-info .date-info {
  width: 100%;
}
.hiftz-container .tab-content #tab-cont-1 .date-payment-info .date-info img {
  margin-top: -3px;
  margin-right: 5px;
}

.hiftz-report {
  background-color: #fff;
  border: dashed 1px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  -webkit-box-shadow: 3px 2px 20px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 3px 2px 20px 0 rgba(0, 0, 0, 0.08);
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 17px;
  margin-bottom: 17px;
  max-width: 286px;
  padding-top: 13px;
  padding-bottom: 13px;
  width: 100%;
  position: relative;
}
.arabic .hiftz-report {
  display: flex;
  margin-right: 0px;
  margin-left: 17px;
}
.hiftz-report .check-icon {
  background-color: #23c436;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  width: 20px;
  position: absolute;
  right: 8px;
}
.hiftz-report .check-icon img {
  margin-top: -9px;
  margin-left: 4px;
}
.hiftz-report .report-info {
  display: inline-flex;
  padding: 0 15px 7px 15px;
}
.hiftz-report .report-info .open-book {
  background-color: #FEEACB;
}
.hiftz-report .report-info .report-icon {
  width: 40px;
  padding: 10px;
  margin-right: 10px;
  border-radius: 8px;
}
.hiftz-report .report-info .text-paper {
  background-color: #F2F9EB;
  padding-top: 5px;
}
.hiftz-report .report-info .document-info {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.hiftz-report .report-info .document-info .name {
  color: #0a1e3e;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  font-weight: normal;
  padding-bottom: 5px;
}
.hiftz-report .report-info .document-info .verses {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #585d65;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
}
.hiftz-report .report-info .document-info .verses strong {
  color: #0A1E3E;
  margin-left: 2px;
}
.hiftz-report .play-link {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}
.arabic .hiftz-report .play-link {
  text-align: right;
  padding-right: 15px;
}
.hiftz-report .play-link a {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  color: #4B5D7B;
  background-image: url(../assets/images/hiftz/play-btn-blue.svg);
  background-repeat: no-repeat;
  background-position: 15px center;
  padding-left: 30px;
  background-size: 11px;
}
.arabic .hiftz-report .play-link a {
  padding-left: 0;
  padding-right: 30px;
  background-image: url(../assets/images/hiftz/play-btn-blue-ar.svg);
  background-repeat: no-repeat;
  background-position: right center;
}
.hiftz-report .report-action {
  display: inline-flex;
  padding-top: 10px;
  padding-right: 20px;
  padding-left: 13px;
  position: relative;
  width: 100%;
}
.hiftz-report .report-action .report-inner-link a {
  color: #00A3E0;
  cursor: pointer;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  font-weight: normal;
  background-image: url(../assets/images/hiftz/view-report-icon.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 14px;
  padding-right: 23px;
}
.hiftz-report .report-action .report-inner-link .get-certificate-link {
  background-image: url(../assets/images/hiftz/certificate-icon.svg);
  background-repeat: no-repeat;
  background-position: -1px center;
  background-size: 12px;
  padding-left: 18px;
}
.hiftz-report .report-action .report-inner-link .pending-link {
  color: #fff;
  background-color: #F5881C;
  border-radius: 8px;
  background-image: none;
  padding: 5px 10px;
}
.hiftz-report .report-action .download-icon {
  -webkit-box-align: center;
  align-items: center;
  background-color: #0099eb;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 20px 0 rgba(33, 120, 175, 0.4);
  box-shadow: 0 0 20px 0 rgba(33, 120, 175, 0.4);
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  -webkit-box-pack: center;
  justify-content: center;
  position: absolute;
  top: -20px;
  right: 15px;
  width: 30px;
  z-index: 9;
  background-image: url(../assets/images/hiftz/download-icon-white.svg);
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: center center;
}
.arabic .hiftz-report .report-action .download-icon {
  right: auto;
  left: 15px;
}
.hiftz-report .report-action .upload-icon {
  transform: rotate(180deg);
}
.hiftz-report:hover {
  background-color: #0099eb;
  border-color: #0099eb;
  transition: 0.5s ease;
}
.hiftz-report:hover .document-info .name,
.hiftz-report:hover .document-info .verses {
  color: #fff;
}
.hiftz-report:hover .document-info .name strong,
.hiftz-report:hover .document-info .verses strong {
  color: #fff;
}
.hiftz-report:hover .play-link {
  border-bottom: 1px solid #5AB4ED;
}
.hiftz-report:hover .play-link a {
  color: #fff;
  background-image: url(../assets/images/hiftz/play-btn-white.svg);
}
.arabic .hiftz-report:hover .play-link a {
  background-image: url(../assets/images/hiftz/play-btn-white-ar.svg);
}
.hiftz-report:hover .report-inner-link a {
  color: #fff;
  background-image: url(../assets/images/hiftz/view-report-icon-white.svg);
}
.hiftz-report:hover .report-inner-link .get-certificate-link {
  background-image: url(../assets/images/hiftz/certificate-icon-white.svg);
}
.hiftz-report:hover .download-icon {
  background-color: #fff;
  background-image: url(../assets/images/hiftz/download-icon-blue.svg);
}
.hiftz-report:hover .report-icon {
  background-color: #fff;
}

#upload_popup .modal-dialog {
  max-width: 45%;
}
@media screen and (max-width: 768px) {
  #upload_popup .modal-dialog {
    width: 90% !important;
  }
}
#upload_popup .modal-dialog .extra-padding-cont {
  padding-bottom: 70px;
}
#upload_popup .modal-dialog .modal-content .modal-header {
  padding-bottom: 0;
  padding-top: 0;
  margin-top: 0.75rem !important;
  border-bottom: 1px solid #D9E8F1;
}
#upload_popup_profile .modal-dialog {
  max-width: 45%;
}
@media screen and (max-width: 768px) {
  #upload_popup_profile .modal-dialog {
    width: 90% !important;
  }
}
#upload_popup_profile .modal-dialog .extra-padding-cont {
  padding-bottom: 70px;
}
#upload_popup_profile .modal-dialog .modal-content .modal-header {
  padding-bottom: 0;
  padding-top: 0;
  margin-top: 0.75rem !important;
  border-bottom: 1px solid #D9E8F1;
}
.upload-popup-box .box.has-advanced-upload, #upload_popup .box.has-advanced-upload, #upload_popup_profile .box.has-advanced-upload {
  border: 1px dashed #68788E;
  border-radius: 8px;
  position: relative;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.upload-popup-box .box.has-advanced-upload .box__input .box__icon, #upload_popup .box.has-advanced-upload .box__input .box__icon, #upload_popup_profile .box.has-advanced-upload .box__input .box__icon {
  display: block;
  width: 12%;
  margin: 0 auto;
  margin-bottom: 25px;
}
.upload-popup-box .box.has-advanced-upload .box__input p, #upload_popup .box.has-advanced-upload .box__input p, #upload_popup_profile .box.has-advanced-upload .box__input p {
  font-size: 0.7rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  color: #555353;
  margin-bottom: 0;
}
.upload-popup-box .box.has-advanced-upload .box__input strong, #upload_popup .box.has-advanced-upload .box__input strong, #upload_popup_profile .box.has-advanced-upload .box__input strong {
  font-size: 0.7rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  color: #002B64;
}
.upload-popup-box .box.has-advanced-upload .box__input .or-divider, #upload_popup .box.has-advanced-upload .box__input .or-divider, #upload_popup_profile .box.has-advanced-upload .box__input .or-divider {
  width: 100%;
  position: relative;
}
.upload-popup-box .box.has-advanced-upload .box__input .or-divider::before, #upload_popup .box.has-advanced-upload .box__input .or-divider::before, #upload_popup_profile .box.has-advanced-upload .box__input .or-divider::before {
  content: "";
  border: solid 1px #D7DBDE;
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
}
.upload-popup-box .box.has-advanced-upload .box__input .or-divider span, #upload_popup .box.has-advanced-upload .box__input .or-divider span, #upload_popup_profile .box.has-advanced-upload .box__input .or-divider span {
  position: relative;
  z-index: 3;
  background-color: #fff;
  font-size: 0.654rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  width: 30px;
  height: 30px;
  border: solid 1px #707070;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 20px auto;
}
.upload-popup-box .box.has-advanced-upload .box__input .browse-record-btns, #upload_popup .box.has-advanced-upload .box__input .browse-record-btns, #upload_popup_profile .box.has-advanced-upload .box__input .browse-record-btns {
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-popup-box .box.has-advanced-upload .box__input .browse-record-btns .browse-btn .box__file, #upload_popup .box.has-advanced-upload .box__input .browse-record-btns .browse-btn .box__file, #upload_popup_profile .box.has-advanced-upload .box__input .browse-record-btns .browse-btn .box__file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.upload-popup-box .box.has-advanced-upload .box__input .browse-record-btns .browse-btn label, #upload_popup .box.has-advanced-upload .box__input .browse-record-btns .browse-btn label, #upload_popup_profile .box.has-advanced-upload .box__input .browse-record-btns .browse-btn label {
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-popup-box .box.has-advanced-upload .box__input .browse-record-btns .browse-btn label .box__dragndrop, #upload_popup .box.has-advanced-upload .box__input .browse-record-btns .browse-btn label .box__dragndrop, #upload_popup_profile .box.has-advanced-upload .box__input .browse-record-btns .browse-btn label .box__dragndrop {
  color: #fff;
  background-color: #1e89e5;
  text-align: center;
  border-radius: 8px;
  vertical-align: middle;
  padding: 5px 0;
  width: 118px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  margin-right: 35px;
}
.upload-popup-box .box.has-advanced-upload .box__input .browse-record-btns .record-btn .record-voice-btn, #upload_popup .box.has-advanced-upload .box__input .browse-record-btns .record-btn .record-voice-btn, #upload_popup_profile .box.has-advanced-upload .box__input .browse-record-btns .record-btn .record-voice-btn {
  color: #1e89e5;
  border: solid 1px #1e89e5;
  text-align: center;
  border-radius: 8px;
  vertical-align: middle;
  padding: 4px 0;
  width: 118px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  background-color: #fff;
}
.upload-popup-box .box.has-advanced-upload .box__input .browse-record-btns .record-btn .record-voice-btn img, #upload_popup .box.has-advanced-upload .box__input .browse-record-btns .record-btn .record-voice-btn img, #upload_popup_profile .box.has-advanced-upload .box__input .browse-record-btns .record-btn .record-voice-btn img {
  width: 10px;
  margin-right: 9px;
}
.upload-popup-box .box.has-advanced-upload .box__input .upload-btn, #upload_popup .box.has-advanced-upload .box__input .upload-btn, #upload_popup_profile .box.has-advanced-upload .box__input .upload-btn {
  position: absolute;
  bottom: -67px;
  right: 0;
  left: 0;
  margin: auto;
  width: 140px;
  justify-content: center;
}
.upload-popup-box .box.has-advanced-upload .box__uploading, #upload_popup .box.has-advanced-upload .box__uploading, #upload_popup_profile .box.has-advanced-upload .box__uploading {
  font-style: italic;
}
.upload-popup-box .box.has-advanced-upload .box__success, #upload_popup .box.has-advanced-upload .box__success, #upload_popup_profile .box.has-advanced-upload .box__success {
  -webkit-animation: appear-from-inside 0.25s ease-in-out;
  animation: appear-from-inside 0.25s ease-in-out;
}
@-webkit-keyframes appear-from-inside {
  from {
    -webkit-transform: translateY(-50%) scale(0);
  }
  75% {
    -webkit-transform: translateY(-50%) scale(1.1);
  }
  to {
    -webkit-transform: translateY(-50%) scale(1);
  }
}
@keyframes appear-from-inside {
  from {
    transform: translateY(-50%) scale(0);
  }
  75% {
    transform: translateY(-50%) scale(1.1);
  }
  to {
    transform: translateY(-50%) scale(1);
  }
}
.upload-popup-box .box.is-uploading .box__uploading, #upload_popup .box.is-uploading .box__uploading, #upload_popup_profile .box.is-uploading .box__uploading,
.upload-popup-box .box.is-success .box__success,
#upload_popup .box.is-success .box__success,
#upload_popup_profile .box.is-success .box__success,
.upload-popup-box .box.is-error .box__error,
#upload_popup .box.is-error .box__error,
#upload_popup_profile .box.is-error .box__error {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.upload-popup-box .box.is-uploading .box__input, #upload_popup .box.is-uploading .box__input, #upload_popup_profile .box.is-uploading .box__input,
.upload-popup-box .box.is-success .box__input,
#upload_popup .box.is-success .box__input,
#upload_popup_profile .box.is-success .box__input,
.upload-popup-box .box.is-error .box__input,
#upload_popup .box.is-error .box__input,
#upload_popup_profile .box.is-error .box__input {
  visibility: hidden;
}
.upload-popup-box .box__uploading, #upload_popup .box__uploading, #upload_popup_profile .box__uploading,
.upload-popup-box .box__success,
#upload_popup .box__success,
#upload_popup_profile .box__success,
.upload-popup-box .box__error,
#upload_popup .box__error,
#upload_popup_profile .box__error {
  display: none;
}

#upload_confirmation_popup .modal-body {
  padding-top: 0;
}
#upload_confirmation_popup .modal-body .text-center {
  padding: 0 44px;
}
#upload_confirmation_popup .modal-body .text-center img {
  width: 10%;
  margin-bottom: 25px;
}
#upload_confirmation_popup .modal-body .text-center p {
  color: #0A1E3E;
  font-size: 0.9rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
}
#upload_confirmation_popup .modal-body .text-center .update-success-msg {
  font-size: 1.2rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}

.leave-table th,
.leave-table td {
  text-align: center;
}
.leave-table .icon-wrap {
  width: 15%;
}

.attachment-box {
  display: flex;
  background: rgba(0, 153, 235, 0.1215686275) 0% 0% no-repeat padding-box;
  border: 2px solid #BEE0F5;
  border-radius: 12px;
  align-items: center;
  position: relative;
}
.attachment-box .attach-close {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #0099eb;
  border-radius: 50%;
  padding: 0px 8px;
}
.attachment-box .attach-close i {
  font-size: 12px;
  color: #fff;
  font-weight: normal;
}
.attachment-box .attach-img {
  padding: 20px 15px;
  border-right: 1px solid #BEE0F5;
}
.attachment-box .attach-title {
  font-size: 12px;
  color: #165983;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  padding: 20px 15px;
}

.tc-request-container .student-info {
  border-top: solid 2px #E1E6EA;
  border-bottom: solid 2px #E1E6EA;
  padding-top: 20px;
}
.tc-request-container .transfer-details {
  padding-top: 20px;
}
.tc-request-container .transfer-details .transfer-details-tooltip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 0px 0px 7px 1px rgba(136, 130, 130, 0.5);
  padding: 20px;
  background-color: #fff;
}
.tc-request-container .transfer-details .transfer-details-tooltip img {
  width: 30px;
  margin-right: 15px;
}
.tc-request-container .transfer-details .transfer-details-tooltip p {
  color: #1A1A1A;
  font-size: 0.625rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  margin-bottom: 0;
}
.tc-request-container .transfer-details .transfer-details-tooltip p span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
.tc-request-container .transfer-details .transfer-details-tooltip .popup-pointer {
  right: -8px;
  top: -9px;
  width: 95px;
  position: absolute;
}
.tc-request-container .transfer-details .transfer-details-tooltip .popup-pointer img {
  width: 100%;
}
.tc-request-container .transfer-details .transfer-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #687284;
  border-radius: 10px;
}
.tc-request-container .transfer-details .transfer-detail-head h6 {
  font-size: 0.75rem;
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
.tc-request-container .transfer-details .transfer-detail-head p {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.tc-request-container .transfer-details .transfer-detail-head p span {
  font-size: 0.625rem;
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  margin-right: 10px;
}
.tc-request-container .transfer-details .transfer-detail-head p img {
  width: 20px;
}
.tc-request-container .button-group-action {
  border-top: solid 2px #E1E6EA;
  margin-left: -20px;
  margin-right: -20px;
}

.student-info {
  background: #F5F9FF;
  border: 1px solid #E6F6FE;
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 12px;
}
.student-info .stu-img-wrap {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #002B64;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
@media (resolution: 1.25dppx) {
  .student-info .stu-img-wrap {
    width: 74px;
    height: 74px;
  }
}
@media (resolution: 1.5dppx) {
  .student-info .stu-img-wrap {
    width: 64px;
    height: 64px;
  }
}
.student-info .stu-img-wrap img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .student-info .stu-img-wrap {
    margin-bottom: 10px;
  }
}
.student-info .student-info-row label {
  margin-right: 2px;
  display: inline-block;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  color: #194064;
  width: 115px;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .student-info .student-info-row label {
    display: inline-flex;
  }
}
.student-info .student-info-row .st-info-lb-wd {
  width: 40px;
}
.student-info .student-info-row p {
  display: inline-flex;
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  color: #002B64;
  margin-bottom: 0;
}
.student-info .student-info-row p span {
  margin-right: 0.5rem;
}
.arabic .student-info .student-info-row p span {
  margin-left: 0.5rem;
  margin-right: 0px;
}
@media screen and (max-width: 768px) {
  .student-info .student-info-row p {
    width: 64%;
    margin-bottom: 5px;
    display: inline-flex;
    overflow-x: auto;
  }
}

.transfer-detail-form {
  padding-top: 20px;
}
.transfer-detail-form .meeting-select {
  width: 267px;
}
.transfer-detail-form .detail-form-bg-row {
  background-color: #E8EFFC;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.transfer-detail-form .detail-form-bg-row .custom-input input {
  border: none;
}
.transfer-detail-form .detail-form-bg-row .custom-input .dt-input {
  width: 100%;
}
.transfer-detail-form .detail-form-bg-row .custom-input select {
  border: none;
}

#student_exit_review_popup .modal-dialog {
  max-width: 85% !important;
}
#student_exit_review_popup .modal-dialog .modal-close {
  position: absolute;
  right: 0;
}
#student_exit_review_popup .modal-dialog .modal-body {
  padding: 0;
}
#student_exit_review_popup .modal-dialog .modal-body .request-success-part-col {
  background-color: #F2F6F8;
  display: flex;
  align-items: center;
}
#student_exit_review_popup .modal-dialog .modal-body .request-success-part-col .request-success-part {
  text-align: center;
  padding: 0 60px;
}
#student_exit_review_popup .modal-dialog .modal-body .request-success-part-col .request-success-part .success-icon {
  margin-bottom: 25px;
}
#student_exit_review_popup .modal-dialog .modal-body .request-success-part-col .request-success-part h6 {
  font-size: 1.2rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  color: #0A1E3E;
}
#student_exit_review_popup .modal-dialog .modal-body .request-success-part-col .request-success-part p {
  font-size: 0.9rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  color: #0A1E3E;
}
#student_exit_review_popup .modal-dialog .modal-body .request-success-part-col .request-success-part p a {
  color: #214BAC;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part {
  padding-right: 15px;
  padding-top: 35px;
  padding-bottom: 20px;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .note-block {
  background-color: #EDFCF7;
  border-radius: 10px;
  border: solid 1px #B9F5E1;
  padding: 15px;
  margin-top: 25px;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .note-block p {
  font-size: 0.666rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  color: #33462F;
  margin-bottom: 0;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .note-block p span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 2px #E1E6EA;
  padding: 15px 0;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row:last-child {
  border-bottom: none;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .text {
  width: 60%;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .text p {
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  color: #002B64;
  margin-bottom: 0;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .emoji form#smileys input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  width: 35px;
  height: 35px;
  border: none;
  cursor: pointer;
  transition: border 0.2s ease;
  filter: grayscale(100%);
  margin: 0 5px;
  transition: all 0.2s ease;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .emoji form#smileys input[type=radio]:checked {
  filter: grayscale(0);
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .emoji form#smileys input[type=radio]:focus {
  outline: 0;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .emoji form#smileys input[type=radio].excellent {
  background: url("../assets/images/tc-request/emoji-laugh-green.svg") center;
  background-size: cover;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .emoji form#smileys input[type=radio].good {
  background: url("../assets/images/tc-request/emoji-smile-blue.svg") center;
  background-size: cover;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .emoji form#smileys input[type=radio].bad {
  background: url("../assets/images/tc-request/emoji-sad-orange.svg") center;
  background-size: cover;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .emoji form#smileys input[type=radio].verybad {
  background: url("../assets/images/tc-request/emoji-sad-cross-red.svg") center;
  background-size: cover;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .review-section .review-row .emoji form#smileys input[type=radio].mute {
  background: url("../assets/images/tc-request/emoji-mute-yellow.svg") center;
  background-size: cover;
}
#student_exit_review_popup .modal-dialog .modal-body .review-part .button-group-action {
  border-top: solid 1px #E1E6EA;
  margin-right: -15px;
  margin-left: -15px;
}

.extra-school-provision .select_box .school-provision-select {
  white-space: nowrap;
}
.extra-school-provision .school-provision-tbl tr .pay-now-btn {
  height: 25px;
}
@media screen and (max-width: 768px) {
  .extra-school-provision .school-provision-tbl tr .pay-now-btn {
    white-space: nowrap;
  }
}
.extra-school-provision .school-provision-tbl tr .discontinue-link a {
  color: #0099eb;
}

.enroll-to-music-container .select-period-sub-heading {
  color: #1d4094;
}

.ambassador-accordian-sec .custom-accordion .acc-no {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #fff;
  background-color: #0A1E3E;
  display: inline-block;
  text-align: center;
  font-size: 10px;
}
.ambassador-accordian-sec .add-more-student {
  margin-top: 10px;
}
.ambassador-accordian-sec .add-more-student button {
  border: none;
  background: none;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}
.ambassador-accordian-sec .add-more-student button:focus {
  outline: none;
}
.ambassador-accordian-sec .add-more-student button span {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #0099eb;
  padding-top: 1px;
  padding-left: 1px;
}
.ambassador-accordian-sec .add-more-student button span img {
  width: 44%;
}

.reward-referal-sec .referals-added {
  background-color: #f4f4f4;
  border-radius: 10px;
  padding: 17px;
  margin-bottom: 10px;
}
.reward-referal-sec .referals-added .referrals-details {
  border-bottom: solid 1px #bbc5c9;
}
.reward-referal-sec .referals-added .referrals-details:last-child {
  border-bottom: none;
}
.reward-referal-sec .referals-added .referrals-details .referrals-name {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: #0A1E3E;
  line-height: 1;
}
.reward-referal-sec .referals-added .referrals-details .referrals-school {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  color: #0A1E3E;
}
.reward-referal-sec .get-reward-sec {
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 50px;
}
.reward-referal-sec .get-reward-sec .step-box {
  border: dashed 1px #bbc5c9;
  position: relative;
  padding: 20px;
  margin-bottom: 76px;
  border-radius: 8px;
}
.reward-referal-sec .get-reward-sec .step-box::after {
  content: "";
  width: 50px;
  border: dashed 1px #bbc5c9;
  z-index: 1;
  position: absolute;
  transform: rotate(90deg);
  right: 45%;
  bottom: -27px;
}
.reward-referal-sec .get-reward-sec .step-box:before {
  content: "";
  border-bottom: 1px dashed #8a8b8b;
  border-right: 1px dashed #8a8b8b;
  background-color: white;
  position: absolute;
  right: 48%;
  bottom: -10px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  border-top: 0;
  border-left: 0;
  z-index: 3;
}
.reward-referal-sec .get-reward-sec .step-box .step-icon {
  position: absolute;
  text-align: center;
  width: 100%;
  top: -28px;
  left: 0;
}
.reward-referal-sec .get-reward-sec .step-box p {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-align: center;
}
.reward-referal-sec .get-reward-sec .step-box.step-4::after {
  bottom: 0;
  border-color: transparent;
}
.reward-referal-sec .get-reward-sec .step-box.step-4::before {
  bottom: 0;
  border-color: transparent;
  background-color: transparent;
}
.reward-referal-sec .get-reward-sec .step-box.step-4 p {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
}

.gems-care-container .stepper-container .steps {
  position: relative;
}
.gems-care-container .stepper-container .steps::before {
  content: "";
  position: absolute;
  top: 0;
  height: 24px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.2);
  left: 25px;
  z-index: 1;
}
.arabic .gems-care-container .stepper-container .steps::before {
  right: 25px;
  left: auto;
}
.gems-care-container .stepper-container .steps::after {
  content: "";
  position: absolute;
  height: 13px;
  width: 13px;
  background-color: var(--primary-color);
  box-shadow: 0px 0px 5px 0px var(--primary-color);
  border-radius: 15px;
  left: 25px;
  bottom: 24px;
  transform: translateX(-45%);
  z-index: 2;
}
.arabic .gems-care-container .stepper-container .steps::after {
  right: 25px;
  left: auto;
}
.gems-care-container .stepper-container .steps .step {
  padding: 0 20px 24px 50px;
  position: relative;
  transition: all 0.4s ease-in-out;
  background-color: #FFF;
}
.arabic .gems-care-container .stepper-container .steps .step {
  padding: 0 50px 24px 20px;
}
.gems-care-container .stepper-container .steps .step::before {
  content: " ";
  position: absolute;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  left: 25px;
  transform: translateX(-45%);
  z-index: 2;
  font-size: 14px;
  text-align: center;
  line-height: 28px;
}
.arabic .gems-care-container .stepper-container .steps .step::before {
  right: 7px;
  left: auto;
}
.gems-care-container .stepper-container .steps .step::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  left: 25px;
  top: 0;
  z-index: 1;
  border: dashed 1px #c6c6c6;
}
.arabic .gems-care-container .stepper-container .steps .step::after {
  right: 25px;
  left: auto;
}
.gems-care-container .stepper-container .steps .step .step-header .sub_main_heading span {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.65rem;
}
.gems-care-container .stepper-container .steps .step .step-content {
  overflow: hidden;
  position: relative;
  margin-top: 10px;
}
.gems-care-container .stepper-container .steps .step .step-content .sub-title {
  color: #0a1e3e;
}
.gems-care-container .stepper-container .steps .step .step-content table thead th {
  border: none;
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
.gems-care-container .stepper-container .steps .step .step-content table tbody td {
  border: none;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}
.gems-care-container .stepper-container .steps .step .step-content table tbody td:first-child span {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: solid 1px #194064;
  text-align: center;
  margin-top: 8px;
}
.arabic .gems-care-container .stepper-container .steps .step .step-content table tbody td:first-child span {
  padding-left: 4px;
}
.gems-care-container .stepper-container .steps .step .step-content table tbody td:first-child span label {
  line-height: 26px;
}
.gems-care-container .stepper-container .steps .step .step-content table tfoot {
  background-color: #f6f6f6;
}
.gems-care-container .stepper-container .steps .step .step-content table tfoot td {
  border: none;
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  font-weight: bold;
  vertical-align: middle;
  text-align: right;
}
.gems-care-container .stepper-container .steps .step .step-content table tfoot td span {
  font-size: 1.2rem;
}
.gems-care-container .stepper-container .steps .step .step-content table tfoot .total {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  text-align: left;
}
.gems-care-container .stepper-container .steps .step .five table tbody td {
  border-top: 1px solid #dee2e6;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 10px;
}
.gems-care-container .stepper-container .steps .step .five table tbody td .custom-input {
  margin-bottom: 0;
}
.gems-care-container .stepper-container .steps .step .six table tbody tr:first-child td {
  border: none;
}
.gems-care-container .stepper-container .steps .step .six table tbody tr td {
  border-top: 1px solid #dee2e6;
  padding-top: 10px;
  padding-bottom: 10px;
}
.gems-care-container .stepper-container .steps .step .seven .doc-details {
  display: flex;
  padding-bottom: 15px;
  padding-top: 15px;
  border-bottom: solid 1px #c6c6c6;
}
@media screen and (max-width: 768px) {
  .gems-care-container .stepper-container .steps .step .seven .doc-details {
    display: inline-block;
    width: 100%;
  }
}
.gems-care-container .stepper-container .steps .step .seven .doc-details:last-child {
  border-bottom: none;
}
.gems-care-container .stepper-container .steps .step .seven .doc-details p {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  width: 60%;
}
@media screen and (max-width: 768px) {
  .gems-care-container .stepper-container .steps .step .seven .doc-details p {
    width: 100%;
  }
}
.gems-care-container .stepper-container .steps .step .seven .doc-details .button-group-action {
  width: 40%;
}
.gems-care-container .stepper-container .steps .step .seven .text-area-cont .sub-title span {
  color: #194064;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 0.65rem;
}
.gems-care-container .stepper-container .steps .active::before {
  background-color: #0a1e3e;
  color: #fff;
}
.gems-care-container .stepper-container .steps .inactive::before {
  background-color: #c6c6c6;
  color: #fff;
}
.gems-care-container .stepper-container .steps .step-1::before {
  content: "1";
}
.gems-care-container .stepper-container .steps .step-2::before {
  content: "2";
}
.gems-care-container .stepper-container .steps .step-3::before {
  content: "3";
}
.gems-care-container .stepper-container .steps .step-4::before {
  content: "4";
}
.gems-care-container .stepper-container .steps .step-5::before {
  content: "5";
}
.gems-care-container .stepper-container .steps .step-6::before {
  content: "6";
}
.gems-care-container .stepper-container .steps .step-7::before {
  content: "7";
}
.gems-care-container .stepper-container .steps .step-7::after {
  content: none;
}
.gems-care-container .stepper-container .steps .step.minimized {
  background-color: #FFF;
  transition: background-color 0.3s ease-in-out;
  cursor: pointer;
}
.gems-care-container .stepper-container .steps .step.minimized .step-header .sub_main_heading span {
  display: none;
}
.gems-care-container .stepper-container .steps .step.minimized .step-content {
  height: 0px;
}

.reenroll-wrapper p {
  color: #1A1A1A;
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.reenroll-wrapper .detail-form-bg-row {
  background-color: #E8EFFC;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.reenroll-wrapper .flip-flop-radinso-bt .button_container .custom-radio {
  position: relative;
  width: 50px;
}
.reenroll-wrapper .flip-flop-radinso-bt .button_container .custom-radio label span {
  position: absolute;
  left: 27px;
  top: 9px;
}
.reenroll-wrapper .description_sec {
  width: 50%;
}
.reenroll-wrapper .term-detail {
  list-style: none;
  color: #1A1A1A;
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.reenroll-wrapper .term-detail li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.reenroll-wrapper .button-group-action-small.button-margin {
  margin-top: -46px;
  margin-left: 20px;
}
.arabic .reenroll-wrapper .button-group-action-small.button-margin {
  margin-top: -46px;
  margin-right: 20px;
  margin-left: 0px;
}

.reenroll-modal .term-no {
  background: #e8e9ec;
  color: #2c517c;
  height: 16px;
  width: 16px;
  text-align: center;
  line-height: 13px;
  display: inline-block;
  padding: 3px 4px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 10px;
}
.reenroll-modal .request-detail {
  color: #1A1A1A;
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.reenroll-modal .request-detail li {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.reenroll-modal .request-detail li:last-child {
  border-bottom: none;
}
.reenroll-modal#confirmation_popup .close, .reenroll-modal#fab_gems_card_popup .close, .reenroll-modal#payment_confirmation_popup .close {
  font-size: 0.75rem;
}
.arabic .reenroll-modal#confirmation_popup .close, .arabic .reenroll-modal#fab_gems_card_popup .close, .arabic .reenroll-modal#payment_confirmation_popup .close {
  left: 15px;
  right: inherit;
}
.reenroll-modal#confirmation_popup .close img, .reenroll-modal#fab_gems_card_popup .close img {
  height: 10px;
  width: 10px;
}
.reenroll-modal#fab_gems_card_popup .modal-dialog {
  max-width: 44% !important;
}
.reenroll-modal .button-group-action-small.button-margin {
  margin-top: -46px;
  margin-left: 20px;
}
.arabic .reenroll-modal .button-group-action-small.button-margin {
  margin-top: -46px;
  margin-right: 20px;
  margin-left: 0px;
}
.reenroll-modal .fab-card-blue {
  background-color: #00458a;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.reenroll-modal .fab-card-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 1.75rem;
  width: 45%;
}
.reenroll-modal .fab-bold-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
}
.reenroll-modal .fab-card {
  border: 2px dashed #1e89e5;
  padding: 16px;
  border-radius: 12px;
  margin-right: 30px;
}
.reenroll-modal .fab-text {
  color: #1A1A1A;
  font-size: 0.75rem;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
}
.reenroll-modal .fab-text .title {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
}
.reenroll-modal .fab-yes-no {
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
}

.parent-portal-container-upload-photo .title_heading {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: #002B64;
}
.parent-portal-container-upload-photo .card-border {
  border: 1px solid #D9E8F1;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0px;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
}
.parent-portal-container-upload-photo .card-border .profile-img {
  background-color: #fff;
  width: 10%;
}
.parent-portal-container-upload-photo .card-border .profile-img img {
  width: 100px;
  height: 100px;
  border-radius: 12px;
}
.parent-portal-container-upload-photo .card-border .profile-details {
  background-color: #fff;
  display: flex;
  width: 60%;
}
.parent-portal-container-upload-photo .card-border .profile-details .information .name {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #002B64;
}
.parent-portal-container-upload-photo .card-border .profile-details .information .value {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: #002B64;
}

.spot-to-spot-parent .sts-banner img {
  border-radius: 20px;
}
.spot-to-spot-parent .sts-group-cont {
  background-color: #F5F9FF;
  border-radius: 16px;
  padding: 16px;
}
.spot-to-spot-parent .input-group.date .input-group-addon {
  top: 35px;
}
.spot-to-spot-parent .profile_card .top_section .id {
  color: #041E42;
  font-size: 14px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  display: contents;
  line-height: 140%;
}
.spot-to-spot-parent .bootstrap-select.dropdown .btn-light {
  margin: 0 !important;
}
.spot-to-spot-parent .bg-light-primary {
  background-color: #F5F9FF;
}
.spot-to-spot-parent .checkbox-label {
  font-size: 0.9rem;
}
.spot-to-spot-parent .link-text {
  color: #00A3E0;
  font-weight: 600;
}
.spot-to-spot-parent .terms-page-cont a {
  text-decoration: none;
  color: #00A3E0;
}
.spot-to-spot-parent .sts-group-cont-text {
  font-weight: 400;
  font-size: 14px;
  color: #002B64;
}

.white-bg-cont {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.05);
}
.white-bg-cont .sts-group-cont-text {
  font-weight: 400;
  font-size: 14px;
  color: #002B64;
}

.catering-family-first-container .btn-36 {
  height: 36px;
}
.catering-family-first-container .btn-36 svg {
  width: 20px;
  height: 20px;
}
.catering-family-first-container .btn-36.faq-btn {
  min-width: auto;
}
.catering-family-first-container .page-content-container {
  border: 1px solid #D9E8F1;
}
.catering-family-first-container .page-content-container .owl-carousel .family-first-banner.item {
  background: rgba(0, 0, 0, 0.2);
  padding: 0px;
  color: #fff;
  height: 100%;
  position: relative;
}
.catering-family-first-container .page-content-container .owl-carousel .family-first-banner .banner-label {
  background-color: #002B64;
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  padding: 5px 10px;
  display: inline;
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.catering-family-first-container .page-content-container .owl-carousel .owl-stage-outer {
  border-radius: 16px;
}
.catering-family-first-container .page-content-container .owl-carousel .owl-dots {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
.catering-family-first-container .page-content-container .owl-carousel .owl-dots .owl-dot span {
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 2px;
  margin: 2px;
  background-color: #00A3E0;
  height: 5px;
  width: 5px;
  opacity: 0.2;
}
.catering-family-first-container .page-content-container .owl-carousel .owl-dots button.owl-dot.active span {
  background-color: #00A3E0;
  border: 2px solid #00A3E0;
  width: 17px;
  height: 5px;
  border-radius: 999px;
  opacity: unset;
}
.catering-family-first-container .page-content-container .owl-carousel button.owl-dot {
  background: 0 0;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
  display: flex;
  zoom: 1;
  transition: background 0.3s;
}
.catering-family-first-container .page-content-container .child-card {
  display: flex;
  padding: 20px 15px;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  background-color: #E6F6FE;
  margin-top: 20px;
  min-height: 112px;
}
.catering-family-first-container .page-content-container .child-details {
  display: flex;
  align-items: center;
}
.catering-family-first-container .page-content-container .child-details img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.catering-family-first-container .page-content-container .child-details .child-name {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #002B64;
}
.catering-family-first-container .page-content-container .child-details .amount-details .wallet-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #68788E;
}
.catering-family-first-container .page-content-container .child-details .amount-details .child-amount {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1BAF88;
}
.catering-family-first-container .page-content-container .tabs {
  width: 100%;
  margin: 20px auto;
  border: 1px solid #D9E8F1;
  border-radius: 12px;
}
.catering-family-first-container .page-content-container .tab-buttons {
  display: flex;
  border-bottom: 1px solid #D9E8F1;
  padding: 0px 20px;
}
.catering-family-first-container .page-content-container .tab-btn {
  flex: 0;
  padding: 10px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
  width: 100%;
  white-space: nowrap;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #68788E;
  text-align: center;
}
.catering-family-first-container .page-content-container .tab-btn.active {
  border-bottom: 2px solid #00A3E0;
  color: #002B64;
  font-weight: 600;
}
.catering-family-first-container .page-content-container .tab-content {
  display: none;
  padding: 20px;
  border-top: none;
}
.catering-family-first-container .page-content-container .tab-content.active {
  display: block;
}
.catering-family-first-container .page-content-container .tab-content .tab-data {
  display: flex;
  border-bottom: 1px solid #D9E8F1;
  padding: 15px 0px;
}
.catering-family-first-container .page-content-container .tab-content .tab-data .food-menu {
  display: flex;
  justify-content: space-between;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #002B64;
}
.catering-family-first-container .page-content-container .tab-content .tab-data .food-menu-list {
  display: flex;
  justify-content: space-between;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #68788E;
  margin-top: 5px;
}
.catering-family-first-container .page-content-container .tab-content .view-all-link {
  padding: 20px 0px 0px 0px;
  display: flex;
  justify-content: center;
}
.catering-family-first-container .page-content-container .tab-content .view-all-link a {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: #00A3E0;
}
.catering-family-first-container .page-content-container .food-menu-card {
  height: 100%;
}
.catering-family-first-container .page-content-container .food-menu-card .card {
  background: #fff;
  padding: 0px;
  border-radius: 12px;
  border: 1px solid #D9E8F1;
  height: 100%;
}
.catering-family-first-container .page-content-container .food-menu-card .card .card-header {
  border-bottom: 0px solid rgba(0, 0, 0, 0.125);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: rgba(0, 43, 100, 0.4);
  padding: 0px;
}
.catering-family-first-container .page-content-container .food-menu-card .card .card-header .svg {
  width: 100%;
  height: 100%;
}
.catering-family-first-container .page-content-container .food-menu-card .card .card-content {
  padding: 10px;
}
.catering-family-first-container .page-content-container .food-menu-card .card .card-content .food-menu-name {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #002B64;
  margin-bottom: 0px;
}
.catering-family-first-container .page-content-container .food-menu-card .card .card-content .food-menu-name:after {
  content: "";
  width: 35px;
  display: flex;
  background-color: #FEDB00;
  height: 3px;
}
.catering-family-first-container .page-content-container .food-menu-card .card .card-content .food-menu-desc {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #68788E;
}
.catering-family-first-container .page-content-container .food-menu-card .card .card-footer {
  padding: 15px 10px;
  background-color: #fff;
  border-top: 0px solid rgba(0, 0, 0, 0.125);
  border-radius: 12px;
}
.catering-family-first-container .page-content-container .food-menu-card .card .card-footer:last-child {
  border-radius: 12px;
}
.catering-family-first-container .page-content-container .food-menu-card .subscribed-card .card-content .subscribed-status {
  margin-left: 10px;
  background-color: #1BAF88;
  padding: 5px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  border-radius: 3px;
}
.catering-family-first-container .page-content-container .food-menu-card .subscribed-card .card-footer .food-menu-desc {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #68788E;
}
.catering-family-first-container .top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.catering-family-first-container .top-section .page-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.catering-family-first-container .top-section img {
  max-height: 90px;
}
.catering-family-first-container button:focus {
  outline: 0px auto -webkit-focus-ring-color;
}
.catering-family-first-container .faq-card {
  border: 1px solid #DFE6F4;
  border-radius: 12px;
  padding: 20px;
}
.catering-family-first-container .faq-card:first-child {
  margin-top: 4px !important;
}
.catering-family-first-container .faq-card .question {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #002B64;
  margin-bottom: 16px;
}
.catering-family-first-container .faq-card .answer {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #002B64;
}
.catering-family-first-container .faq-card .answer ul li {
  margin-left: 20px;
}

/* <--------family-first-subscribe-screen--------> */
.family-first-subscribe-container label {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #002B64;
}
.family-first-subscribe-container .top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.family-first-subscribe-container .top-section img {
  max-height: 90px;
}
.family-first-subscribe-container .top-section .svg {
  width: 167px;
  height: 67px;
}
.family-first-subscribe-container .top-section .page-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.family-first-subscribe-container .page-content-container {
  border: 1px solid #D9E8F1;
}
.family-first-subscribe-container .page-content-container .subscription-plan-box {
  background: rgba(25, 172, 86, 0.0784313725);
  border: 1px solid #1BAF88;
  border-radius: 12px;
  margin-top: 10px;
  padding: 12px 0px;
}
.family-first-subscribe-container .page-content-container .subscription-plan-box .title {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #002B64;
}
.family-first-subscribe-container .page-content-container .subscription-plan-box .label-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #68788E;
}
.family-first-subscribe-container .page-content-container .subscription-plan-box .value-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #002B64;
}
.family-first-subscribe-container .page-content-container .custom-input .input-element {
  height: 145px !important;
  border: 1px solid #C8CCD1;
}
.family-first-subscribe-container button:focus {
  outline: 0px auto -webkit-focus-ring-color;
}

.family-first-payment-container label {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #002B64;
}
.family-first-payment-container .top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.family-first-payment-container .top-section .svg {
  width: 167px;
  height: 67px;
}
.family-first-payment-container .top-section .page-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.family-first-payment-container .page-content-container {
  border: 1px solid #D9E8F1;
}
.family-first-payment-container .page-content-container .min-h-100 {
  min-height: 100% !important;
}
.family-first-payment-container .page-content-container .mealplan-name {
  border: 1px solid #DFE6F4;
  padding: 10px 15px;
  border-radius: 12px;
}
.family-first-payment-container .page-content-container .mealplan-name .label-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #68788E;
}
.family-first-payment-container .page-content-container .mealplan-name .value-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #002B64;
}
.family-first-payment-container .page-content-container .wallet-balance {
  margin-top: 20px;
  border: 1px solid #D9E8F2;
  background-color: #F5F9FF;
  margin-right: 0px;
  margin-left: 0px;
  border-radius: 12px;
  padding: 10px 15px;
  align-items: center;
}
.family-first-payment-container .page-content-container .wallet-balance .wallet-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  vertical-align: middle;
  color: #002B64;
}
.family-first-payment-container .page-content-container .wallet-balance .child-amount {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  vertical-align: middle;
  color: #002B64;
}
.family-first-payment-container .page-content-container .wallet-balance .custom-checkbox {
  margin-bottom: 0px;
}
.family-first-payment-container .page-content-container .subscription-amount {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #D9E8F1;
  border-radius: 12px;
  background-color: #F5F9FF;
}
.family-first-payment-container .page-content-container .subscription-amount .sub-price, .family-first-payment-container .page-content-container .subscription-amount .dis-price, .family-first-payment-container .page-content-container .subscription-amount .vat-price, .family-first-payment-container .page-content-container .subscription-amount .total-price, .family-first-payment-container .page-content-container .subscription-amount .wal-price, .family-first-payment-container .page-content-container .subscription-amount .net-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.family-first-payment-container .page-content-container .subscription-amount .sub-price span, .family-first-payment-container .page-content-container .subscription-amount .dis-price span, .family-first-payment-container .page-content-container .subscription-amount .vat-price span, .family-first-payment-container .page-content-container .subscription-amount .total-price span, .family-first-payment-container .page-content-container .subscription-amount .wal-price span, .family-first-payment-container .page-content-container .subscription-amount .net-price span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #002B64;
}
.family-first-payment-container button:focus {
  outline: 0px auto -webkit-focus-ring-color;
}

/* <--------family-first-MealPlan-screen--------> */
.catering-first-meal-container .page-content-container {
  border: 1px solid #D9E8F1;
}
.catering-first-meal-container .page-content-container .firstmeal-card .card-header {
  border-bottom: 0px solid rgba(0, 0, 0, 0.125);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 0px;
}
.catering-first-meal-container .page-content-container .firstmeal-card .card-header .svg {
  width: 100%;
  height: 100%;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card {
  background: #fff;
  padding: 0px;
  border-radius: 12px;
  border: 1px solid #D9E8F1;
  height: 100%;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-content {
  padding: 10px;
  border-bottom: 1px solid #DFE6F4;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-content .food-menu-name {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #00A3E0;
  cursor: pointer;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .value-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #68788E;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .label-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #002B64;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer {
  padding: 15px 10px;
  background-color: #fff;
  border-top: 0px solid #DFE6F4;
  border-radius: 12px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card {
  background-color: #F5F9FF;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card .dis-per-violet {
  color: #fff;
  background-color: #923FCD;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  padding: 3px 10px;
  width: fit-content;
  border-radius: 3px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card .dis-per-blue {
  color: #fff;
  background-color: #3075BA;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  padding: 3px 10px;
  width: fit-content;
  border-radius: 3px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card .dis-per-light-green {
  color: #fff;
  background-color: #30B1BA;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  padding: 3px 10px;
  width: fit-content;
  border-radius: 3px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card .dis-per-dark-green {
  color: #fff;
  background-color: #1BAF88;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  padding: 3px 10px;
  width: fit-content;
  border-radius: 3px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card .dis-per-pink {
  color: #fff;
  background-color: #FF4E7A;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  padding: 3px 10px;
  width: fit-content;
  border-radius: 3px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card .dis-per-orange {
  color: #fff;
  background-color: #FA6000;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  padding: 3px 10px;
  width: fit-content;
  border-radius: 3px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card .amount-lab {
  color: #1BAF88;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  margin-right: 20px;
  margin-top: 5px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card label {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #002B64;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card-Subscribe {
  background-color: rgba(25, 172, 86, 0.0784313725);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #1BAF88;
  margin-bottom: 16px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card-Subscribe .status-subscribed {
  margin-left: 10px;
  background-color: #1BAF88;
  padding: 5px;
  font-family: Encode Sans;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #FFFFFF;
  border-radius: 3px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card-Subscribe .status-cancelled {
  margin-left: 10px;
  background-color: #EA4444;
  padding: 5px;
  font-family: Encode Sans;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #FFFFFF;
  border-radius: 3px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card-Subscribe .cancel-btn {
  color: #EA4444;
  border: 1px solid #EA4444;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card-Subscribe .pause-btn {
  color: #002B64;
  border: 1px solid #002B64;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card-Subscribe .menu-card-sub {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #68788E;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card-Subscribe .amount-lab {
  color: #1BAF88;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  margin-right: 20px;
  margin-top: 5px;
}
.catering-first-meal-container .page-content-container .firstmeal-card.card .card-footer .term-card-Subscribe label {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #002B64;
}
.catering-first-meal-container .top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.catering-first-meal-container .top-section .page-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.catering-first-meal-container .top-section .svg {
  width: 167px;
  height: 67px;
}
.catering-first-meal-container button:focus {
  outline: 0px auto -webkit-focus-ring-color;
}
.catering-first-meal-container .modal .modal-dialog .modal-content .modal-close {
  border-bottom: 1px solid #DFE6F4;
}
.catering-first-meal-container .modal .modal-dialog .modal-content .modal-header {
  border-bottom: 0px solid #dee2e6;
}

/* <--------family-first-MealPlan-menulist-screen--------> */
.catering-menu-item-container .page-content-container {
  border: 1px solid #D9E8F1;
  padding: 20px 0px;
}
.catering-menu-item-container .page-content-container .owl-carousel .family-first-banner.item {
  background: rgba(0, 0, 0, 0.2);
  padding: 0px;
  color: #fff;
  height: 100%;
  position: relative;
}
.catering-menu-item-container .page-content-container .owl-carousel .family-first-banner .banner-label {
  background-color: #002B64;
  color: #fff;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  padding: 5px 10px;
  display: inline;
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.catering-menu-item-container .page-content-container .owl-carousel.owl-loaded {
  display: block;
  padding: 0px 20px;
}
.catering-menu-item-container .page-content-container .owl-carousel .owl-stage-outer {
  border-radius: 16px;
}
.catering-menu-item-container .page-content-container .owl-carousel .owl-dots {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
.catering-menu-item-container .page-content-container .owl-carousel .owl-dots .owl-dot span {
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 2px;
  margin: 2px;
  background-color: #00A3E0;
  height: 5px;
  width: 5px;
  opacity: 0.2;
}
.catering-menu-item-container .page-content-container .owl-carousel .owl-dots button.owl-dot.active span {
  background-color: #00A3E0;
  border: 2px solid #00A3E0;
  width: 17px;
  height: 5px;
  border-radius: 999px;
  opacity: unset;
}
.catering-menu-item-container .page-content-container .owl-carousel button.owl-dot {
  background: 0 0;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
  display: flex;
  zoom: 1;
  transition: background 0.3s;
}
.catering-menu-item-container .page-content-container .tabs {
  width: 100%;
  margin: 20px auto;
  border-top: 1px solid #D9E8F1;
  border-radius: 0px;
}
.catering-menu-item-container .page-content-container .tab-buttons {
  display: flex;
  border-bottom: 1px solid #D9E8F1;
  padding: 0px 20px;
}
.catering-menu-item-container .page-content-container .tab-btn {
  flex: 0;
  padding: 10px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
  width: 100%;
  white-space: nowrap;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #68788E;
  text-align: center;
}
.catering-menu-item-container .page-content-container .tab-btn.active {
  border-bottom: 2px solid #00A3E0;
  color: #002B64;
  font-weight: 600;
}
.catering-menu-item-container .page-content-container .tab-content {
  display: none;
  padding: 20px;
  border-top: none;
}
.catering-menu-item-container .page-content-container .tab-content.active {
  display: block;
}
.catering-menu-item-container .page-content-container .food-menu-card {
  height: 100%;
}
.catering-menu-item-container .page-content-container .food-menu-card .card {
  background: #fff;
  padding: 0px;
  border-radius: 12px;
  border: 1px solid #D9E8F1;
  height: 100%;
}
.catering-menu-item-container .page-content-container .food-menu-card .card .card-header {
  border-bottom: 0px solid rgba(0, 0, 0, 0.125);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: rgba(0, 43, 100, 0.4);
  padding: 0px;
}
.catering-menu-item-container .page-content-container .food-menu-card .card .card-header .svg {
  width: 100%;
  height: 100%;
}
.catering-menu-item-container .page-content-container .food-menu-card .card .card-content {
  padding: 10px;
  border-bottom: 1px solid #D9E8F1;
}
.catering-menu-item-container .page-content-container .food-menu-card .card .card-content .food-menu-name {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
}
.catering-menu-item-container .page-content-container .food-menu-card .card .card-content .food-menu-desc {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #68788E;
}
.catering-menu-item-container .page-content-container .food-menu-card .card .card-footer {
  padding: 15px 10px;
  background-color: #fff;
  border-top: 0px solid rgba(0, 0, 0, 0.125);
  border-radius: 12px;
}
.catering-menu-item-container .page-content-container .food-menu-card .card .card-footer a {
  color: #00A3E0;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
}
.catering-menu-item-container .page-content-container .food-menu-card .subscribed-card .card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.catering-menu-item-container .page-content-container .food-menu-card .subscribed-card .card-content .subscribed-status {
  margin-left: 10px;
  background-color: #1BAF88;
  padding: 5px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  border-radius: 3px;
}
.catering-menu-item-container .page-content-container .school-calendar .cal-navigation {
  border-top: 1px solid #D9E8F1;
  border-bottom: 1px solid #D9E8F1;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 20px;
}
.catering-menu-item-container .page-content-container .school-calendar .card-header {
  background: #fff;
}
.catering-menu-item-container .page-content-container .school-calendar .mob-calendar .card-body .dates span.bg-danger {
  background-color: #00A3E0 !important;
  color: #fff !important;
  border-radius: 50%;
  display: inline-block;
  height: 32px;
  width: 32px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 32px;
}
.catering-menu-item-container .page-content-container .school-calendar .mob-calendar .card-body .dates span.showEventWeek {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 32px;
  color: #002B64;
  cursor: pointer;
}
.catering-menu-item-container .page-content-container .school-calendar .mob-calendar .card-body .days span.week-day {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #002B64;
}
.catering-menu-item-container .page-content-container .school-calendar .mob-calendar .card-body .table .dates .rounded-circle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.catering-menu-item-container .top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.catering-menu-item-container .top-section .page-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.catering-menu-item-container .top-section .svg {
  width: 167px;
  height: 67px;
}
.catering-menu-item-container button:focus {
  outline: 0px auto -webkit-focus-ring-color;
}
.catering-menu-item-container .modal {
  background-color: rgba(0, 0, 0, 0.5);
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body.food-details .card {
  background: #fff;
  padding: 0px;
  border-radius: 12px;
  border: 1px solid #D9E8F1;
  height: 100%;
  height: 100%;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body.food-details .card .card-content {
  padding: 10px;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body.food-details .card .card-content .food-menu-name {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body.food-details .card .card-content .food-menu-desc {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #68788E;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body.food-details .card .card-header {
  border-bottom: 0px solid rgba(0, 0, 0, 0.125);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 0px solid rgba(0, 0, 0, 0.125);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: rgba(0, 43, 100, 0.4);
  padding: 0px;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body.food-details .card .card-header .svg {
  width: 100%;
  height: 100%;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body.food-details .card .card-footer {
  padding: 15px 10px;
  background-color: #fff;
  border-top: 0px solid rgba(0, 0, 0, 0.125);
  border-radius: 12px;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body.food-details .card .card-footer span {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #002B64;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body.food-details .card .card-footer .total-cal {
  background-color: #F5F9FF;
  border: 1px solid #D9E8F1;
  padding: 10px;
  margin-top: 10px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-body .meal-image-wrapper img {
  height: 274px;
  width: 100%;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-header {
  border-bottom: 0px solid #dee2e6;
}
.catering-menu-item-container .modal .modal-dialog .modal-content .modal-close {
  border-bottom: 1px solid #DFE6F4;
}

/* <--------family-first-PauseSubscription-screen--------> */
.pause-subscription-container .page-content-container {
  border: 1px solid #D9E8F1;
}
.pause-subscription-container .page-content-container .subscription-plan-box {
  background: rgba(25, 172, 86, 0.0784313725);
  border: 1px solid #1BAF88;
  border-radius: 12px;
  margin-top: 10px;
  padding: 12px 0px;
}
.pause-subscription-container .page-content-container .subscription-plan-box .title {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #002B64;
}
.pause-subscription-container .page-content-container .subscription-plan-box .label-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #68788E;
}
.pause-subscription-container .page-content-container .subscription-plan-box .value-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #002B64;
}
.pause-subscription-container .top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.pause-subscription-container .top-section .page-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.pause-subscription-container .top-section .svg {
  width: 167px;
  height: 67px;
}
.pause-subscription-container button:focus {
  outline: 0px auto -webkit-focus-ring-color;
}

/* <--------family-first-PauseHistory-screen--------> */
.pause-history-container .page-content-container {
  border: 1px solid #D9E8F1;
}
.pause-history-container .page-content-container .pause-history-list .pause-history-box {
  background: #fff;
  border: 1px solid #D9E8F1;
  border-radius: 12px;
  margin-top: 10px;
  padding: 12px 0px;
}
.pause-history-container .page-content-container .pause-history-list .pause-history-box .title {
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #002B64;
}
.pause-history-container .page-content-container .pause-history-list .pause-history-box .label-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #68788E;
}
.pause-history-container .page-content-container .pause-history-list .pause-history-box .value-text {
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #002B64;
}
.pause-history-container .top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.pause-history-container .top-section .page-title {
  color: #002B64;
  font-family: "Encode Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.pause-history-container .top-section .svg {
  width: 167px;
  height: 67px;
}
.pause-history-container button:focus {
  outline: 0px auto -webkit-focus-ring-color;
}
.pause-history-container .pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pause-history-container .pagination-container .entries {
  display: flex;
  align-items: center;
}
.pause-history-container .pagination-container .entries select {
  padding: 5px 10px;
  margin-left: 10px;
  border: 1px solid #CFD5DE;
  border-radius: 8px;
  height: 40px;
  width: 63px;
  font-family: "Encode Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
}
.pause-history-container .pagination-container .pagination {
  display: flex;
  gap: 5px;
  margin-top: 20px;
  align-items: baseline;
}
.pause-history-container .pagination-container .pagination span {
  padding: 0px 10px;
  border: 0px solid #ccc;
  cursor: pointer;
}
.pause-history-container .pagination-container .pagination span.arrow {
  height: 20px;
  font-size: 16px;
}
.pause-history-container .pagination-container .pagination span.arrow.disabled {
  opacity: 0.5;
}
.pause-history-container .pagination-container .pagination .active {
  background-color: #0061f2;
  color: #fff;
  border: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}