/* @import url('https://fonts.googleapis.com/css?family=Cairo|Inconsolata'); */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap');
body{
	background-color: #ffffff;
    /* color: #8a837a; */
    color: #2f2e41;
    /* font-variant: small-caps; */
    font-weight: 700;
    direction: rtl;
    font-family: "CAIRO";
}
h1,h2,h3,h4,h5{
	color:#03A9F4;
	color:#2da77d;
	font-family: 'Cairo', sans-serif;
}
.textarea100 {
  width: 337px;
  max-width: 100%;
  min-width: 100%;
  margin: 0px;
  min-height: 100px;
}
.mt-neg-20{margin-top:0;}
.p-clear{padding-right:0;padding-left:0;overflow: hidden;}
.pr-10{padding-right:10px}
.pl-10{padding-left:10px}
.dashboardPage{
	background-color: rgba(62, 62, 62, 0.22);
}
.savedExamNoteStatus {
  padding-left: 5px;
  font-weight: lighter;
  font-style: italic;
}
.custBtn, .btn-default, .btn-block{
  background-color: #34a77d;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  padding: 9px;
  -webkit-box-shadow: -7px 9px 11px -7px rgba(63,61,86,0.75); 
  box-shadow: -7px 9px 11px -7px rgba(63,61,86,0.75);
}
.btn-default:focus , .btn-block:focus {
  border-color: white;
  -webkit-box-shadow: -7px 9px 11px -7px rgba(63,61,86,0.75); 
  box-shadow: -7px 9px 11px -7px rgba(63,61,86,0.75);
}

.custBtn a{
    color: #dfe4e8;
	font-weight:bold;
}
.custBtn a:hover{
    color: burlywood;
    text-decoration-color: chocolate;
}
.mr{
	border-right:2px solid silver;
}
.loading{
	background-color:white;
	position:fixed;
	top:0;
	left:0;
	width:100%;
}
.error{
	border:2px solid maroon;padding:10px
}
/* header */
.header{
	background-color: black;
    height: 50px;
    max-height: 100px;
    line-height: 50px;
}
.lh-50{
	line-height: 50px;
}
/*sidebar*/
.sidebar{
	background-color: #b0b0b0;
    margin-top: -10px;
    padding-left: 12px
}
.navbar-default {
    background-color: #000000;
	/* border-color: #e7e7e7; */
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #000;
	  background-color: #5f9ea0;
}
.sidebar-nav .navbar li a {
	color: cadetblue;
  }
.sidebar-nav .navbar li a:hover {
    background-color: #e7e7e7;
  }
/* make sidebar nav vertical */ 
@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
	border-bottom:2px solid white;
  }
}
/* show the loading image when refreshing */
#loading {
   width: 100%;height: 100%;
   top: 0px;left: 0px;
   position: relative;display: block; z-index: 99;
}
#loading-image {position: absolute;top: 0;left: 0;z-index: 100;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
#hideAndShow{display:none}
.todayDate{
	line-height: 36px;
    padding-right: 8px;
    background-color: cadetblue;
    color: brown;
}
/*Copyright*/
.copyright{
	color:#607D8B;
}
/* .content {
  min-height: 100vh;
  overflow: auto;
} */
.navbar {
  border-radius: 0;
}
.sloganStyle{
  font-family: "CAIRO";
  /* font-style: italic; */
  color: #1f69a9;
}
.fahminy{
  position: relative;
  font-family: "CAIRO";
  padding: 15px;
}
.fahminyTitle{
  position: absolute;
  top: -16px;
  right: 51px;
  margin: 0 0 10px;
  background-color: white;
  padding: 0 15px;
  color: #009966;
  font-size: 16px;
}
.mainFooter {
  /* color: white;
  background-color: #2772b3; */
  /* padding: 5px; */
  width: 100%;
  height: 50px;
  margin-bottom: 0;
  margin-top: 5px;
  /* z-index: 11168;
  position: absolute; */
}
/* css main menu */
.input-group-addon:first-child {
  border-right: 0;
  background-color: inherit;
  border-radius: 0;
  border: 0;
}
.navbar-inverse {
  background-color: #2772b3;
  border-color:#2772b3;
}
.navbar-inverse .navbar-brand {
  color: #ffffff;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  border-color: #2f2e41;
}
.navbar-inverse .navbar-nav>li>a {
  color: #ffffff;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus,
 .navbar-inverse .navbar-nav>.active>a:hover {
  color: #2da77d;
  background-color: #ffffff;
  height: 52px;
}
.navbar-inverse .navbar-toggle {
  border-color: #fff; /*small screens*/
}
.navbarLogin {
  min-height: 51px;
  height: 53px;
}
/*turn off number spinner*/
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
@media only screen and (max-width: 500px) {
    body {
        margin-top:0;
    }
	.mr{
		border-right:0px;
		border-bottom:2px solid silver;
	}
	h1,h2,h3,h4,h5{
		font-size:1.5em;
	}
}
/*add and remove loading icon */
.loader {
  display: none;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.loading {
  border: 2px solid #ccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-top-color: #1ecd97;
  border-left-color: #1ecd97;
  animation: spin 1s infinite ease-in;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#userRegisterAgree
{
  width: 25px;
  height: 25px;
}
.bgGreen {
  background-color: #ffffff;
  color: #2f2e41;
  padding: 10px;
  border-radius: 50%;
  border: 2px solid #2da77d
}
.moveUpText
{
  vertical-align: super;
  margin-right: 10px;
}
.title img{
  width: 75px;
  height: 75px;
  border-radius: 50%;
  line-height: 75px;
  -webkit-box-shadow: 0 10px 10px rgba(0,0,0,.1);
  box-shadow: none;
}
.breadcrumb {background-color:#ffffff;}
.courseList{
  padding:5px;
  margin-top: 5px;
  border-top: 2px solid #2da77d;
}
/* main login form */
.mainLoginForm, .mainFormStyle {
  padding: 12px;
  margin: 20px 0 10px 0;
  -webkit-box-shadow: -7px 9px 11px -7px rgba(63,61,86,0.75);
  box-shadow: -7px 9px 11px -7px rgba(63,61,86,0.75);
}
#loginFormIcon {
  border: 2px solid #2da77d;
  padding: 16px;
  border-radius: 50%;
  margin-bottom: 14px;
  width: 100px;
}
.ml10 {  
  margin-left: 10px;
}
/*modal style */
.modal-content {
  background-color: #2772b3;
  background-color: #10567a;
}
.modal-content-lighter-color{
  background-color: #434749;
}
.modal-content-message-color {
  background: linear-gradient(-45deg,#13596e,#b7c530);
  background: linear-gradient(-45deg,#ffffff,#fbfbf9);
}
.inlineBlock {
  display: inline-block;
}
.vlineMiddle {
  vertical-align: text-top;
}
.mainComment {
  margin-right: 50px;
  /* 
  background-color: #515b600d;
  padding: 10px;
  color: #2f2e41;
  border-radius: 10px;
  padding-bottom: 30px; 
  */
  margin-bottom: 10px;
}
.mr10 {
  margin-right: 10px;
}
.mr50 {
  margin-right:50px;
}
.whiteLink {
  color:white;
  font-weight: bold;
  text-decoration: none;
}
.whiteLink:hover {
  text-decoration: none;
  color:white;
}
.responseText {
  margin-top: 10px;
}
.viewIconBtn {
  cursor: pointer;
  color: #2da77d;
}
.updateIconBtn {
  cursor: pointer;
  color: #FF9800
}
.whiteParagraph {
  padding-right: 7px;
    color: #5c5e70;
}
/*
Toggle Icons on click
Get Icons Content https://fontawesome.com/cheatsheet?from=io
*/
.whiteParagraph > i:before {
  /* font-family: FontAwesome; */
  content: "\f068";
  /* padding-right: 5px; */
}
.whiteParagraph > i.collapsed:before {
  content: "\f067";
} 
.faDarkBg{
  background-color: #b3a4a470;
  padding: 10px;
  font-size: 1.15em;
  border-radius: 3px;
  cursor: pointer;
  color: #5c5e70
}
.updateCameraIconCourseContent {
  /* border: 2px solid #5c5e70;
  border-radius: 50%; */
  padding-left: 13px;
  /* margin: auto 6px; */
  background-color: inherit;
  color: #5c5e70;
  cursor: pointer;
}
.pr0 {
  padding-right: 0;
}
.wh300 {
  width:300px;
  height:300px;
}
.newSingleChoiceAnswer {
  background-color: white;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 5px;
  box-shadow: 2px 2px 7px #777;
}
.p4-19 {
  padding: 4px 19px;
}
.eachQuestionPreview {
  /* background-color: #fafafa; */
  padding: 5px;
  border-radius: 8px;
  margin-bottom: 24px;

  background-color: #ffffff;
  /* color: white; */
  box-shadow: 2px 2px 7px #cbc5c5;
  transition: 0.1s none;
  animation: linear;
}
.eachQuestionPreview:hover, .questionType:hover {
  background-color: #fafafa;
  cursor: pointer;
  box-shadow: 2px 2px 7px #a29797;
  transition: background-color 0.5s ease;
}
.correctAnswerChoice {
  border: 1px solid #5cb85c;
  border-radius: 5px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 20px;
}
.wrongAnswerChoice {
  border: 1px solid #db1a1a;
  border-radius: 5px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 20px;
}
.eachAnswerChoice {
  border: 1px solid #140202;
  border-radius: 5px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 20px;
}
.color05595c {
  color: #05595c;
}
.p5 {
  padding: 5px;
}
.lightBoxShadow {
  box-shadow: 1px 2px 1px #dadddf;
}
.myTestFormStyle {
  border-radius: 5px;
  margin: 20px 0;
  padding: 10px;
  box-shadow: 2px 1px 2px #dadddf;
}
.examPhoto {
  height: 300px;
  width: 350px;
  margin: 6px;
  float: right;
  box-shadow: 2px 2px 7px #3d2828;
}
.exam-question-attached-photo {
  height: 300px;
  width: 350px;
  margin: 6px;
  box-shadow: 2px 2px 7px #3d2828;
}
.exam-question-attached-photo-preview{
  max-height: 300px;
  width: 300px;
  margin: 6px;
  box-shadow: 2px 2px 7px #3d2828;
}
.question-header{
  background-color: aliceblue;
  padding: 15px;
  margin-bottom: 15px;
  font-size: 1.1em;
  color: #535050;
}
.question-timeline {
  background-color: white;
  padding: 7px;
  margin-top: -7px;
  min-width: 150px;
}
.question-timeline::after { 
  content: "⏲ ";
  padding-right: 20px;
  padding-left: 20px;
}
/*custom btn light*/
.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle {
  color: #212529;
  background-color: #dae0e5;
  border-color: #d3d9df;
}
.btn-light.focus, .btn-light:focus {
  box-shadow: 0 0 0 0.2rem rgb(248 249 250 / 50%);
}
.btn-light:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}
/*end custom btn-light */
.mainExamInfoForTestReport{
  border: 1px solid #9E9E9E;
  padding: 26px 0 5px 0;
  margin: 30px 0;
  border-radius: 5px;
  color: #555;
  position: relative;
}
.iconReportColor {
  color: #2d8def;
  vertical-align: top;
  padding-left: 2px;
}
.mainExamInfoForTestAnswers{
  border: 1px solid #9E9E9E;
  padding: 10px;
  margin: 30px 0;
  border-radius: 5px;
  color: #555;
}
.exam-name-title-top {
  position: absolute;
  right: 5%;
  left: 5%;
  text-align: center;
  top: -11px;
  background-color: white;
  border: 1px solid #9E9E9E;
}
.color-555{
  color: #555;
}
.question-title{
  padding: 15px;
  font-size: 1.1em;
  /* border: 1px solid #eee2e2;
  border-radius: 5px; */
  /* margin-bottom: 15px; */
}
.answerNumRight{
  color: #226e13;
  background-color: #ffffff;
  padding: 4px;
  border-radius: 3px;
  position: absolute;
  top: 11px;
  right: -10px;
  border: 2px solid #226e13;
}
.answerNumLeft{
  color: #226e13;
  background-color: #ffffff;
  padding: 4px;
  border-radius: 3px;
  position: absolute;
  top: 11px;
  left: -10px;
  border: 2px solid #226e13;
}
.brGreen{
  border-right-color: #226e13 !important;
}
.blGreen {
  border-left-color: #226e13 !important;
}
.answer-title, .matching-title{
  border: 2px solid #eee2e2;
  border-radius: 5px;
  margin-bottom: 15px;
}
.text-muted-custom {
  color: #777;
  font-weight: initial;
}
.text-danger-custom {
  color: #a94442;
  font-weight: initial;
}
.custom-check-question {
  margin: 2px;
  min-width: 120px;
}
.chosen-answer-is, .correct-answer-selected {
  border: 2px solid #337ab7;
  cursor: pointer;
  color: #337ab7;
  background-color: aliceblue;
  transition: 0.5s all;
}
.hidden-visibility {
  visibility: hidden;
}
.btn-exit-custom {
  margin-top: -6px;
  margin-left: -14px;
}
.higherIndex {
  z-index: 15630;
}
.w250{
  width: 250px;
}
.mt-25{
  margin-top: 25px;
}
#testTimeLineSection {
  position: absolute;
  left: 50px;
  top: 10px;
  color: #121212;
}
#testTimeLineSection:after {
  content: " Time remaining ";
  display: inline-block;
  padding-right: 7px;
}
.answer-title:hover {
  border: 2px solid #337ab7;
  cursor: pointer;
  color: #337ab7;
  transition: 0.5s all;
}
.each-question-total-mark-points{
  font-size: 0.9em;
}
.listStyleLetters li {
  background-color: #ffffff;
  padding: 6px;
  margin: 3px;
  border: 1px solid #eee7e7a8;
  border-radius: 5px;
  color: #453e3e;
}
.liststyleLetters {
  list-style-type: upper-alpha !important;
}
.list-style-type-none {
  list-style-type: none;
}
.move-cursor{
  cursor: move !important;
}
.question-buttons{
  padding: 15px;
}
.horizontal-text-line {
  overflow: hidden;
  text-align: center;
  color: #337ab7;
}
.horizontal-text-line:before,
.horizontal-text-line:after {
  background-color: #337ab7;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 12%;
}

.horizontal-text-line:before {
  right: 0.5em;
  margin-left: -50%;
}

.horizontal-text-line:after {
  left: 0.5em;
  margin-right: -50%;
}
.m30-up-down {
  margin: 30px auto;
}
.middlePage {
  /* position: fixed;
  top: 40%;
  width: 90%;
  padding: 15px;
  background-color: #fefefe;
  text-align: center;
  margin: auto 50px;
  box-shadow: 2px 2px 5px #77777770;
  font-size: 1.2em;
  color: #166d70; */
  /* position: fixed;
  width: 98%; */
  background-color: #fefefe;
  text-align: center;
  /* top: 40%; */
  /* padding: 15px; */
}
.modalFullScreen .nav-tabs {
  border-bottom: none;
}
.m50 {
  margin: 50px
}
.eachVideoSection{
  box-shadow: 2px 2px 7px #333;
  padding: 5px;
  margin: 10px 20px 10px 0;
}
.eachVideoSection p {
  padding: 5px;
  font-family: 'CAIRO';
}
.eachSectionStyle{
  box-shadow: 2px 2px 7px #333;
  width: 100%;
  max-width: 90%;
  margin: 5px 5%;
  font-family: 'Cairo';
  padding: 10px;
}
.eachSectionStyle .fa-tags {
  color: #337ab7;
  margin-bottom: 15px;
}
.eachSectionStyle .lead {
  font-size: 16px;
}
.color0ba747 {
  color: #0ba747;
}
.mt7{
  margin-top: 7px;
}
.mb31 {
  margin-bottom: 31px;
}
/*Youtube videos setting - Start */
.ytp-pause-overlay .ytp-scroll-min .ytp-scroll-max, .ytp-chrome-top .ytp-show-cards-title, .ytp-right-controls, .ytp-hide-controls .ytp-watermark{
  display: none;
}
.videoWrapper {
  overflow: hidden;
}
@media (min-width: 1500px) {
  .videoWrapper {
    margin-top: -135px;
  }
}
@media (min-width: 1200px) {
  .videoWrapper {
    margin-top: -75px;
  }
}

/*Youtube videos setting  - End*/
.answerNum {
  color: #020d15;
  background-color: #f8f9fa;
  padding: 0 1px;
  border-radius: 3px;
  position: absolute;
  top: -14px;
  left: 48%;
  width: 20px;
  text-align: center;
  font-weight: 300;
  border: 1px solid #f8f9fa;
}
.modalFullScreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding-right:0 !important;
  overflow-y: auto;
}
.modalFullScreen-dialog {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}
.mtb15{
  margin: 15px 0;
}
.mh34{
  min-height: 34px;
}
.question-answers{
  position: relative;
}
.question-answers .show-question-correct-or-wrong {
  position: absolute;
  top: 0;
  /* left: 0; */
  
}
.show-question-correct-or-wrong {
  width: 100%;
  z-index: 1500;
  /* background-color: #fbfefa45;
  padding: 15px;
  color: #2da77d;
  display: flex;
  display: block; */
  /* left: -65px; */
  height: 100%;
  
}
.no-click-allowed {
  pointer-events: none;
}
.add-correct-answer-highlight {
  border : 2px solid #226e13;
  /* color: #fefffe; */
  background-color: #3bac240a;
}
.add-wrong-answer-highlight {
  border : 2px solid #d91345;
  /* color : #fefffe;
  background-color: #d30d0d; */
  background-color: #f8afb917;
}
.light-blue {
  color: #337ab7;
}
.correct-answer-show {
  font-size: 3em;
}
.modalFullScreen .modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #3c7dcf;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
}
.pr13 {
  padding-right: 13px;
}
.customAttachmentBox{
  margin-bottom: 16px;
  padding: 15px;
}
.attachedFileBTN{
  vertical-align: inherit;
  background-color: white;
  color: #4b6776;
  padding: 2px 5px;
  border-color: #4b6776;
}
.textarea90 {
  width: 337px;
  max-width: 90%;
  min-width: 90%;
  margin: 30px;
  min-height: 100px;
}
.customTextBoxTest{
  padding: 12px;
  border: 2px solid #337ab7;
}
.answerGrade {
  color: #5cb85c;
  background-color: #ffffff;
  padding: 4px;
  border-radius: 5px;
  position: absolute;
  top: -13px;
  left: 88%;
  border: 1px solid #5cb85c;
  font-weight: 300;
}
.reorderGrade {
  position: absolute;
  left: 50px;
  top: -9px;
  background-color: #b0b0b0;
  min-width: 40px;
  border-radius: 3px;
  color: white;
  text-align: center;
}
.deleteAndUpdateTestQuestionBtn {
  position: absolute;
  left: 8px;
  top: -11px;
  box-shadow: -1px -1px 3px #dbd5d5;
  background-color: white;
  padding: 0px 8px;
  font-size: 1.1em;
}
.answerGradePreview{
  color: #5cb85c;
  background-color: #ffffff;
  padding: 0 4px;
  border-radius: 5px;
  position: absolute;
  top: -12px;
  left: 88%;
  border: 1px solid #5cb85c;
  font-weight: 300;
}
.answerNumPreview{
  color: #2c0505;
  background-color: #ffffff;
  padding: 0 4px;
  border-radius: 5px;
  position: absolute;
  top: -12px;
  left: 48%;
  width: 20px;
  text-align: center;
  border: 1px solid #5cb85c;
}
.orginalQuestionsAndAnswers {
  color: #337ab7;
}
.p5rl{
  padding: 0 5px;
}
.studentChoiceAnswers {
  padding: 10px;
  margin: 14px;
  border-radius: 2px;
  box-shadow: 1px 1px 4px #333;
  color: #030000;
  font-family: 'Cairo';
  font-weight: 500;
}
.studentReorderingAnswers{
  padding: 10px;
  border-radius: 2px;
  box-shadow: 1px 1px 4px #333;
  color: #030000;
  font-family: 'Cairo';
  font-weight: 500;
}
.customRegisterPage{
  padding: 10px;
  border-radius: 2px;
  box-shadow: -1px -1px 4px #333;
  color: #0a5063;
  font-family: 'Cairo';
  font-weight: 500;
}
.p5 {
  padding: 5px;
}
.mt5{
  margin-top: 5px;
}
.wAuto {
  width: auto;
}
.examPhotoCenter {
  width: 350px;
  height: 300px;
  box-shadow: 2px 2px 7px #3d2828;
}
.examPhotoRow {
  width: 300px;
  height: 250px;
}
.mb10 {
  margin-bottom:10px;
}
.showMoreDetails{
  color: white;
  background-color: blue;
  padding:5px;
}
.eachQuestionType {
  position: absolute;
  right: 15px;
  top: -9px;
  background-color: #ffffff;
  min-width: 40px;
  border-radius: 3px;
  color: #777777;
  text-align: center;
  padding: 0 6px;
  /* box-shadow: 0px -2px 3px 1px #eee; */
}
.reorderGradeReview{
  position: absolute;
  left: 50px;
  top: -10px;
  background-color: #ffffff;
  min-width: 40px;
  border-radius: 3px;
  color: #5cb85c;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 0 4px;
}
.p15Review {
  padding: 15px 15px 0 15px;
}
.eachQuestionTypeReview {
  position: absolute;
  right: 15px;
  top: -9px;
  background-color: #2c0505;
  min-width: 40px;
  border-radius: 3px;
  color: #ffffff;
  text-align: center;
  padding: 0 6px;
  font-size: 13px;
}
.numOfWords {
  position: absolute;
  right: 40%;
  top: -9px;
  background-color: #ffffff;
  min-width: 40px;
  border-radius: 3px;
  color: #2da77d;
  text-align: center;
  padding: 0 6px;
  /* font-size: 13px; */
}
.eachQuestionAnswerReview {
  color: #030000;
  font-family: 'Cairo';
  font-weight: 500;
}
.eachQuestionReview {
  font-family: 'Cairo';
}
.color320707 {
  color: #320707;
}
.numOfWordsReview {
  position: absolute;
  right: 40%;
  top: -9px;
  background-color: #e9e9e9;
  min-width: 40px;
  border-radius: 3px;
  color: #2a0b0b;
  text-align: center;
  padding: 0 6px;
  font-size: 13px;
}
.questionTitleReview{
  padding-top: 10px;
}
.matchingAnswer {
  background-color: #faf9f9;
  padding: 6px;
  margin: 10px;
  border: 1px solid #eee7e7;
  border-radius: 5px;
}
.p15 {
  padding:15px;
}
.m10 {
  margin: 10px;
}
.f17 {
  font-size: 17px;
}
.f16 {
  font-size: 16px;
}
.updatedOnLink a{
  color: #2da77d;
  text-decoration: none;
  font-weight: initial;
  font-size: 14px;
}
.clearBtnBlueBorder {
  color: #337ab7;
  background-color: #ffffff;
  border-color: #2e6da4;
  padding: 3px;
}
.darkerTextMuted {
  color: #eedfdf;
}
.highlightGreen {
  background-color: #075c07ba;
  color: white;
  margin-bottom: 12px;
}
.mh250 {
  max-height: 250px;
  overflow: overlay;
}
/* End of toggling icons */
.fa-long-arrow-left, .fa-chevron-down {
  cursor: pointer;
  line-height: unset;
  color: #5c5e70;
  background-color: white;
  padding: 0 20px;
  border-radius: 5px;
  line-height: 1.25;
}
.mb10 {
  margin-bottom: 10px
}
.formBottom{
  background-color: #e5e5e570;
  padding: 21px;
  padding-bottom: 0;
}
.deleteIconBtn {
  cursor: pointer;
  color: #fe0847;
}
.textAreaTexts {
  white-space: pre-wrap;
  font-weight: 200;
  font-size: 15px;
  margin-bottom: 4px;
}

.eachTestGeneralDetails:hover {
  background-color: #2f2e4108;
  transition: 0.5s all;
}
.eachTestGeneralDetails{
  position: relative;
  margin-bottom:50px;
  box-sizing: border-box;
  /* border-radius: 10px; */
  box-shadow: 2px 2px 5px #2222228f;
  padding: 10px 5px;
  background-color: #2f2e4100;  
}
.topLeft {
  position: absolute;
  top: -16px;
  left: -1px;
}
.takeNowBadge {
  color: #5cb85c;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid;
  background-color: white;
}
.upcomingBadge {
  color: #b87b0f;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid;
  background-color: white;
}
.examTitleMain {
  display: block;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.takenBadge {
  color: #e10808;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid;
  background-color: white;
}
.darkBlueCamera {
  color: #1a3d5c
}
.rtl {
  direction: rtl ;
}
.ltr {
  direction: ltr ;
}
.redIcon {
  color: #fe0847;
}
.greenIcon {
  color: #33b818;
}
.testReportIs {
  padding: 5px;
  margin-bottom: 25px;
  margin-top: 25px;
}
.mh24{
  min-height: 24px;
}
.highestGrade {
  color: #2da77d;
}
.lowestGrade {
  color: #fe0847;
}
.warningGrade {
  color: #d18513;
}
.avgGrade{
  color: #2956d5;
}
.numOfTimesTakingExam, .coolDarkBlue{
  color:#0e6586
}
.fw400{
  font-weight: 400;
}
.mb14{
  margin-bottom: 14px;
}
.fs48 {
  font-size: 48px;
  margin-top: -22px;
  margin-bottom: 38px;
}
.fs40{
  font-size: 40px;
  margin-top: 12px;
  margin-bottom: 15px;
  font-family: 'Dancing Script';
}
.bolder {
  font-weight: bolder;
}

#borderimg, .EnglishCertificate { 
  border: 26px solid #360a0a00;
  padding: 50px;
  border-image: url(../img/niceBorderImg.png) 50% round;
  border-image-slice: 41;
  border-width: 15px;
  margin-bottom: 50px;
  /* font-family: 'Courgette'; */
  /* font-family: 'Niconne', cursive; */
  font-size: 22px;
}
.signedBy {
  font-family: 'Dancing Script';
  font-size: 24px;
  font-weight: bolder;
}
.p6{
  padding: 6px;
}
.hAuto {
  height: auto;
}
.mw200{
  max-width: 200px;
}
.visibilityHidden {
  visibility: hidden;
}
.mh40 {
  min-height: 40px;
  height: 40px;
}
.p10 {padding: 10px}
.w95-percent{ width: 95%;}
.bm {
  border-bottom: 1px solid;
}
.modal-content-message-white-color{
  background: linear-gradient(-45deg,#ffffff,#ffffff)
}
.column2 {
  /* background-color: bisque; */
  padding: 30px 0 30px 0;
  margin-bottom: 20px;
  cursor: pointer;
  box-shadow: -7px 9px 11px -7px rgba(60, 59, 80, 0.75);
}
.eachCourse {
  color: #2f2e41;
  padding: 10px;
  margin: 50px;
  margin-bottom: 50px;
  border-bottom: 2px solid;
  border-radius: 11px;
  margin-top: 20px;
  box-shadow: -7px 9px 11px -7px rgba(60, 59, 80, 0.75);
}
.customProfileImage{
  margin-right: 11px;
  margin-top: 18px;
}
.customProfileImageMain {
  margin-right: 7px;
  margin-top: 5px;
}
.mainComments {
  /* background-color: aliceblue;
  padding: 10px;
  margin-right: 50px;
  color: #2f2e41;
  border-radius: 10px;
  margin-bottom: 10px;
  padding-bottom: 30px; */
  padding: 10px;
  margin-right: 50px;
}
.eachComments, .commenterProfilePic {
  /* background-color: #d3dada; */
  background-color: aliceblue;
  margin-bottom: 13px;
  padding-top: 0;
}
.responseBtn {
  padding-left: 30px;
}
.publicProfile {
  padding: 16px;
  /* background: linear-gradient(-45deg,#b7c530,#13596e);
  border-radius: 8px;
  color: #ffffff;
  margin: auto 21px;
  border-right: 1px solid;
  border-bottom: 1px solid; */
}
.fa-sort {
  cursor:  pointer;
}
.whiteBg {
  background-color:white;
}
.p10 {
  padding: 10px;
}
.white { 
  color: #ffffff; 
  color: #5c5e70; 
}
.close {
  color:#ffffff;
  float: right;
  font-size: 29px;
  font-weight: normal;
  line-height: 1;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: 0.8; 
}
.nav-pills > li > a {
    color: #ffffff;
    text-decoration: none;
}
.nav>li>a:focus, .nav>li>a:hover {
  text-decoration: none;
  background-color: #eeedf5;
  color: #2da77d;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
  color: #2da77d;
  background-color: #eeedf5;
}
/* Dashboard menu */
.dashboardMenuSmallScreen {
  background-color: #2772b3;
  /* min-height: 43px; */
}
.dashboardMenuSmallScreen li {
  /* line-height: 3;
  width: 50px;
  text-align: center;
  padding-top: 2px; */
  min-width: 10%;
  line-height: 3;
  width: auto;
  text-align: center;
  padding-top: 10px;
}
.pointer{
  
  cursor: pointer;
}
.dashboardMenuSmallScreen li a{
  color: #ffffff;
  font-size: 1.6em;
  border-bottom: none !important;
  outline: none !important;
  border-color: #2772b3;
}
.dashboardMenuSmallScreen li a:active,
.dashboardMenuSmallScreen li a:focus,
.dashboardMenuSmallScreen li a:hover,
.dashboardMenuSmallScreen li a:visited {
  outline: none !important;
  border-color: #2772b3;
}
.a:focus, a:hover,.a:active, a:visited {
  text-decoration: none;
}
.dashboardMenuSmallScreen>li.active {
  color: #2da77d;
  background-color: #ffffff;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  color:#2da77d;
  border: 1px solid #fff !important;
}

.dashboardMenuSmallScreen > li.pull-left {
  margin-left: 11px;
}
.navbar-brand span.glyphicon {
    position: relative;
    top: -3px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.toggleInputs {display:none;}
label.form-control {
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}
.darkGreen {
  color: #0d93a1
}
.profileForm {
  padding: 31px;
  -webkit-box-shadow: -7px 9px 11px -7px rgba(63,61,86,0.75);
  box-shadow: -7px 9px 11px -7px rgba(63,61,86,0.75);
}
.borderBottom {
  border-bottom: 2px solid #2da77d;
  padding-bottom: 12px;
}
.w150 { 
  border: 2px solid #2da77d;
  padding: 16px;
  border-radius: 50%;
  margin-bottom: 14px;
  width: 200px;
  height: 200px;
}
.table>tbody>tr>td  {
  line-height: 2.2;
}
.rltv { position: relative;}
.updateCameraIcon {
  position: absolute;
  top: 181px; 
  border: 2px solid #337ab7;
  border-radius: 50%;
  padding: 10px;
  left: 169px;
  z-index: 1;
  background-color: white;
  color: #337ab7;
  cursor: pointer;
}
/*Dashboard */
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
body{
  margin: 0;
  padding: 0;
 /* font-family: 'Roboto', sans-serif !important; */
 font-family: "CAIRO";
}
section{
  width: 100%;
  height: 100vh;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
          padding: 140px 0;
}
.eachCourseTitle {
  color: #0c0c99;
  margin-top: 12px;
  margin-bottom: 0;
}
.card{
  position: relative;
  /* max-width: 300px; */
  height: auto;
  background: linear-gradient(-45deg,#fe0847,#feae3f);
  border-radius: 15px;
  margin: 0 auto;
  padding: 20px;
  -webkit-box-shadow: 0 10px 15px rgba(0,0,0,.1) ;
          box-shadow: 0 10px 15px rgba(0,0,0,.1) ;
-webkit-transition: .5s;
transition: .5s;
margin-bottom: 10px;
}
.disregardColor {color:inherit;}
.classList{
  position: relative;
    max-width: 300px;
    height: auto;
    background: #ffffff;
    border-radius: 15px;
    margin: 0 auto;
    padding: 10px;
    -webkit-box-shadow: 0 10px 15px rgba(0,0,0,.1);
    box-shadow: none;
    /* -webkit-transition: .5s; */
    /* transition: .5s; */
    margin-bottom: 10px;
    border: 1px solid #9e9e9e;
}
.card:hover{ 
  /* -webkit-transform: scale(1.1);
          transform: scale(1.1); */
}
.col-sm-4:nth-child(1) .card ,
.col-sm-4:nth-child(1) .card .title .fa{
  background: linear-gradient(-45deg,#7a7ed9,#55d7a1);
  /* z-index: 15; */
}
.col-sm-4:nth-child(2) .card,
.col-sm-4:nth-child(2) .card .title .fa{
  background: linear-gradient(-45deg,#ffec61,#f321d7);

}
.col-sm-4:nth-child(3) .card,
.col-sm-4:nth-child(3) .card .title .fa{
  background: linear-gradient(-45deg,#24ff72,#9a4eff);

}
.col-sm-4:nth-child(1) .cardMainPage ,
.col-sm-4:nth-child(1) .cardMainPage .title .fa{
  background: linear-gradient(-45deg,#7a7ed9,#55d7a1);
  /* z-index: 15; */
}
.col-sm-4:nth-child(2) .cardMainPage,
.col-sm-4:nth-child(2) .cardMainPage .title .fa{
  background: linear-gradient(-45deg,#a14c93,#22beaf);

}
.col-sm-4:nth-child(3) .cardMainPage,
.col-sm-4:nth-child(3) .cardMainPage .title .fa{
  background: linear-gradient(-45deg,#24ff72,#9a4eff);

}
.card::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /* width: 100%; */
  height: 40%;
  background: rgba(255, 255, 255, .1);
  z-index: 1;
  -webkit-transform: skewY(-5deg) scale(1.5);
  transform: skewY(-5deg) scale(1.5);
}
.title .fa{
  color:#fff;
  font-size: 60px;
  width: 100px;
  height: 100px;
  border-radius:  50%;
  text-align: center;
  line-height: 100px;
  -webkit-box-shadow: 0 10px 10px rgba(0,0,0,.1) ;
          box-shadow: 0 10px 10px rgba(0,0,0,.1) ;

}
.title h2 {
  position: relative;
  margin: 20px  0 0;
  padding: 0;
  color: #fff;
  font-size: 28px;
 z-index: 2;
}
.price,.option{
  position: relative;
  z-index: 2;
}
.price h4 {
margin: 0;
padding: 20px 0 ;
color: #fff;
font-size: 60px;
}
.option ul {
  margin: 0;
  padding: 0;

}
.option ul li {
  margin: 8px -12px;
  padding: 0;
  list-style: none;
  color: #fff;
  font-size: 16px;
}
.card a {
  position: relative;
  z-index: 2;
  background: #fff;
  color : black;
  width: 150px;
  height: 40px;
  line-height: 40px;
  border-radius: 40px;
  display: block;
  text-align: center;
  margin: 20px auto 0 ;
  font-size: 16px;
  cursor: pointer;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .1);

}
.card a:hover{
    text-decoration: none;
}
.italicSilver {
  color: #9E9E9E;
  font-style: italic;
  font-weight: bold;
  padding-top: 10px;
}
.classList h2 {
  color: #2f2e41;
}
.btn-info .badge {
  color: #d9534f;
}
.w100Prcnt { width: 100%; }
.customNotificationPanel {
  /* background-color: #2f2e4105; */
  /*background-color: #2f2e4105; */
  padding: 10px;
  /* color: #2f2e41; */
  /* border-bottom: 1px solid; */
  cursor: pointer;
  margin-bottom: 14px;
  /* border-right: 1px solid;*/
}
.customNotificationPanel a {
  color: #2f2e41;
}
.customNotificationPanel:hover,
.customNotificationPanel a:hover, .customNotificationPanel a:active
.customNotificationPanel a:visited, .customNotificationPanel a:focus {
  text-decoration: none;
  background-color: aliceblue;
}
.bdDarker {
  background-color: aliceblue;
}
.mb10{
  margin-bottom: 10px;
}
.customHeadingTitle{
  background-color: aliceblue;
  padding: 9px 0px;
  width: 158px;
  margin: 5px 5px;
}
.moveUp {
  color: #F44336;
  position: absolute;
  top: 2px;
  left: 11px;
  font-size: 12px;
}
.blueColor {
  color: #337ab7;
}
.moveUpSmScreen {
  color: #F44336;
  position: relative;
  top: -14px;
  left: 9px;
  font-size: 12px;
}
@media (min-width: 768px){
  .navbar-nav>li {
      float: left;
      min-width: 60px;
      text-align: center;
  }
}
@media (max-width: 768px){
  .customHeadingTitle{
    background-color: aliceblue;
    padding: 9px 0px;
    width: 100%;
    margin: 5px 5px;
  }
}
.cardDarker {
  background: linear-gradient(-45deg,#7a7ed9,#55d7a1);
}
.inlineBlock img{
  display: inline-block;
}
.searchBoxInput {
  margin: auto 0;
}
/*
 Divider
*/
  
.astrodivider {
  margin:40px auto;
  width:400px; 
  max-width: 100%;
  position:relative;
}

.astrodividermask { 
    overflow:hidden; height:20px; 
}

.astrodividermask:after { 
      content:''; 
      display:block; margin:-25px auto 0;
      width:100%; height:25px;  
        border-radius:125px / 12px;
       box-shadow:0 0 8px #049372;
}
.astrodivider span {
    width:50px; height:50px; 
    position:absolute; 
    bottom:100%; margin-bottom:-25px;
    left:50%; margin-left:-25px;
    border-radius:100%;
   box-shadow:0 2px 4px #4fb39c;
    background:#fff;
}
.studentReorderingAnswersCustom{
  font-family: 'Cairo';
  font-weight: 500;
  text-align: right;
  color: white;
}
.color23b523{
  color: #23b523;
}
.customLogoHeader{
  max-width: 90px;
  position: relative;
  top: -1px;
  background-color: white;
  padding: 0px;
  height: 54px;
  left: 0px;
}
.infoItem {
  font-style: italic;
  font-size: 0.85em;
}
.cardMainPage {
  position: relative;
  /* max-width: 300px; */
  height: auto;
  background: linear-gradient(
    -45deg
    ,#819b7c,#37af93);
  border-radius: 15px;
  margin: 0 auto;
  padding: 40px 20px;
  padding: 0 0px;
  -webkit-box-shadow: 0 10px 15px rgb(0 0 0 / 10%);
  box-shadow: 0 10px 15px rgb(0 0 0 / 10%);
  -webkit-transition: .5s;
  transition: .5s;
  margin-bottom: 10px;
}
.astrodivider i {
    position:absolute;
    top:4px; bottom:4px;
    left:4px; right:4px;
    border-radius:100%;
    border:1px dashed #68beaa;
    text-align:center;
    line-height:40px;
    font-style:normal;
     color:#049372;
}
/*end of divider*/
.searchBar {
  outline: 0;
  /* float: left; */
  -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* margin: 0 18%; */
  /* width: 100%; */
  /* overflow: auto;*/
}

.searchBar > .textbox {
  outline: 0;
  height: 42px;
  width: 84%;
  /* line-height: 42px; */
  padding: 0 16px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #2f2e41;
  border: 0;
  /* float: left; */
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

.searchBar > .textbox:focus {
  outline: 0;
  background-color: #fff;
}

.searchBar > .button {
  background: none;
  background-color: rgb(14 90 128 / 80%);
  float: right;
  height: 42px;
  border: 0;
  color: #fff;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 21px;
  text-rendering: auto;
  -webkit-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
  /* -webkit-border-radius: 0 4px 4px 0; */
}

.searchBar > .button:hover {
  background-color: rgba(0, 150, 136, 0.8);
}
.btn-noBG {
  color: #0b4197;
  background-color: #5cb85c0d;
  border-color: none;
}
.placeTopIcon{
  position: relative;
}
.placeTextDownIcon {
  position: absolute;
  bottom: 1px;
  font-size: 13px;
  left: 20px;
}
.placeTextDownIconLessons{
  position: absolute;
  bottom: 1px;
  font-size: 13px;
  left: 10px;
}
.placeTextDownIconMessages{
  position: absolute;
  bottom: 0;
  font-size: 13px;
  left: 14px;
}
.placeTextDownIconNotifications{
  position: absolute;
  bottom: 0;
  font-size: 13px;
  left: 8px;
}
.placeTextDownIconAllLessons{
  position: absolute;
  bottom: 0;
  font-size: 13px;
  left: 8px;
}
.placeTopIconProfile{
  position: absolute;
  bottom: 1px;
  font-size: 13px;
  left: 9px;
}
.customGlyphiconTop{
  top: -3px;
}
thead.customTableTitle {
  background-color: #336b86;
  color: #ffff;
}
.form-control {
  padding: 2px 12px;
}
.mainMenuIcon {
  color: white;
  left: 3px;
  bottom: -1px;
}
.navBarHeaderCursor{
  cursor: pointer;
}
.modalParagraph {
  /* color: white;
  padding: 10px;
  margin-bottom: 50px; */
  color: #34a77d;
  padding: 15px;
  margin-bottom: 21px;
  background-color: white;
  border-radius: 6px;
  margin-top: 22px
}
.table>tbody>tr>td {
  padding: 8px;
  /* line-height: 1.42857143; */
  vertical-align: top;
  border-top: 1px solid #dcd6d6;
  color: #203b53;
  font-family: system-ui;
  font-size: 13px;
}
.eachSectionItem p.lead {
  background-color: #426fa9;
  padding: 10px;
  color: white;
}
.eachSectionItem span.smaller {
  color: white;
  /* font-size: 12px; */
}
.scratchText {
  text-decoration: line-through;
}
.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  -webkit-transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  -o-transform:rotate(-30deg);
  transform:rotate(-30deg);
  color: red;
}
.listItems {
  /* min-height:500px; */
  padding: 8px 8px;
}
/* .eachItemList {
  color: green;
  font-size: 1.2em;
} */
.strikethrough:after {
  position: absolute;
  content: "";
  left: 0px;
  top: 15px;
  right: 0%;
  border-top: 1px solid;
  border-color: inherit;
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
  color: red;
}
.mt13 {
  margin-top: 13px;
}
.customTableTitle tr {
  margin-bottom: 10px;
}
.smaller {
  font-size: 0.75em;
}
.color777 {
  color: #777777;
}
.myCourseContentTitle {
  position: relative;
  margin-top: 10px;
}
.myCourseContentTitle h3 {
  cursor: pointer;
  font-size: 1.3em;
}
.myCourseContentTitle:hover {
  background-color: #d4dbdd;
}
.myCourseContentTitle .deleteIconBtn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  color: #ffffff;
  background-color: #b50f0fe3;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  min-width: 55px;
  border-radius: 5px;
}
.myCourseContentTitle .editIconBtn {
  position: absolute;
  top: 0;
  right: 60px;
  font-size: 20px;
  color: #ffffff;
  background-color: #5cb85c;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  min-width: 55px;
  border-radius: 5px;

}
.myCourseContentTitle .exitIconBtn {
  position: absolute;
  top: 0;
  right: 120px;
  font-size: 20px;
  color: #ffffff;
  background-color: #161521e0;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  min-width: 55px;
  border-radius: 5px;
}
.myCourseContentTitle .optionsIconBtn {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 20px;
  cursor: pointer
}
#rightTopNotification {
  position: fixed;
  top: 50px;
  /* background-color: #f0f4f5; */
  /* padding: 10px; */
  z-index: 150;
  /* max-width: 150px; */
  /* min-height: 50px; */
  color: #2f2e41;
}
.panelTitleLink a {
  color:#337ab7;
  text-decoration: none;
}
.panelTitleLink a:link,.panelTitleLink a:visited,.panelTitleLink a:hover,.panelTitleLink a:active {
  color:#337ab7;
  text-decoration: none;
}
.panel-default>.panel-heading {
  color: #333;
  background-color: #dfdfe3;
  border-color: #dfdfe3;
}
.boxShadow {
  box-shadow: 2px 2px 7px #c5bcbc;
}
.green2da77d {
  color: #2da77d;
}
.imageContainer{
  position: relative;
}
.imageContainer .topMiddle {
  position: absolute;
  top:0;
  left:45%;
}
.customUl1 li {
  list-style-type: arabic-indic;
  list-style-position: inside;
  color: #0b416e;
  padding: 5px;
  background-color: #787a7b1f;
  margin-bottom: 6px
}
.contentDescriptionStyle{
  overflow: auto;
  padding:5px;
}
.addBorder {
  border: 2px solid #eee;
  border-radius: 14px;
  margin: auto 10%; 
  width: 75%;
  padding: 15px;
  text-align: center;
  box-shadow: 2px 2px 7px #eee;
  outline: none;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input {
  height: 40px;
  margin: auto;
  margin-bottom: 15px;
}
.custom-file-input::before{
  content: '+ انقر هنا لإضافة ملفات جديدة';
    display: inline-block;
    background-color: linear-gradient(top, #f9f9f9, #E3E3E4);
    border-radius: 5px;
    padding: 12px;
    -webkit-user-select: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    outline: none;
    color: white;
    background-color: #5cb85c;
}
.custom-file-input:hover::before {
  border-color: #5cb85c;
}
.custom-file-input:active::before {
  background-color: #5cb85c;
  color: white;
}
.custom-file-input:focus {
  outline: none
}
.numOfViews {
  color: #777777;
  padding-left: 10px;
}
.numOfViews .fa-eye {
  color: #5cb85c;
  font-size: larger;
}
.numOfViews-inline .numOfViews{
  color: #745144;
  padding-left:0;
}
.numOfViews-inline .numOfViews .fa-eye{
  color: #745144;
}
.faStarOff, .faStarOn {cursor: pointer}
.faStarOn {color: #daa520;}
.color337ab7 { color: #337ab7; }
.color1a222a { color: #1a222a; }
.addedOnDateTopLeft {
  position: absolute;
  top: 10px;
  left: 10px;
}

.w80P {width: 80%;}
.tabMenu>li.active>a, .tabMenu>li.active>a:focus, .tabMenu>li.active>a:hover{
  border: 1px solid #ddd !important;
  border-bottom-color: transparent !important;

}
/*starts star styling*/

.stars input {
  position: absolute;
  left: -999999px;
}

.stars a {
  display: inline-block;
  padding-right:4px;
  text-decoration: none;
  margin:0;
}

.stars a:after {
  position: relative;
  font-size: 18px;
  font-family: 'FontAwesome', serif;
  display: block;
  content: "\f005";
  color: #8c8585;
}


.spanStar {
font-size: 0; /* trick to remove inline-element's margin */
}

.stars a:hover ~ a:after{
color: #8c8585 !important;
}
.spanStar.active a.active ~ a:after{
color: #8c8585;
}

.spanStar:hover a:after{
color:#eabc3a !important;
}

.spanStar.active a:after,
.stars a.active:after{
color:#eabc3a;
}

/*end star styling*/
.checkedStars {
  color: #eabc3a;
}
.pr4{
  padding-right:4px;
}
/* Start Style Radio Buttons */
.customBlueRadioButton {
  margin-left: 26px;
  font-weight: bold;
  color: #5c5e70;
  position: relative;
  padding-right: 20px;
  margin-right: -11px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default radio button */
.customBlueRadioButton input {
  /* position: absolute; */
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkMark {
  position: absolute;
  top: 0;
  right: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  background-color: #e3e3e2;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.customBlueRadioButton:hover input ~ .checkMark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.customBlueRadioButton input:checked ~ .checkMark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkMark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.customBlueRadioButton input:checked ~ .checkMark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.customBlueRadioButton .checkMark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
/* End Style Radio Buttons */
ul.listStyleLetters {
  list-style-type: upper-alpha !important;
}
.color-095fd3{
  color: #095fd3;
}
.mb15 {
  margin-bottom: 15px;
}
pre code {
  background-color: #ffffff;
  border: 1px solid #336b86;
  color: #336b86;
  display: block;
  padding: 6px;
}
.color0e4778 {
  color: #0e4778;
}
.whiteColor {
  color: #fff;
}
@media (max-width: 767px) { 
  .lightBoxShadow {
    box-shadow: none;
  }
  .myTestFormStyle{
    border-radius: 5px;
    margin: 20px 0;
    padding: 10px 0;
    box-shadow: 2px 2px 7px #777;
  }
  .xsPullLeft{
    float: left !important;
  }
  /* .middlePage {
    width: 90%;
  } */
}
.showOnlyPrint {
  display: none !important;
}
.mt10 {
  margin-top: 10px;
}
.mtb10rl5{
  margin: 10px 5px;
}
.pr10{
  padding-right: 10px;
}
.noLongerExists {
  margin-top: 68px;
  background-color: rgb(255 255 255 / 15%);
  padding: 30px;
  box-shadow: 2px 2px 7px #eee;
}
.mb20 {
  margin-bottom: 20px;
}
.p-6-22 {
  padding: 6px 22px;
}
.yellowish {
  color: #ffc107 !important;
}
.faq .questions {
  font-size: 20px;
  margin-bottom: 6px;
  color: #1f69a9;
}
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
    .showOnlyPrint {
      display: block !important;
    }
    .hideWhenPrinting {
      display: none !important;
    }
    .answerGradePreview{
      color: #5cb85c;
      background-color: #ffffff;
      padding: 0 4px;
      border-radius: 5px;
      position: absolute;
      top: -12px;
      left: 88%;
      border: 1px solid #5cb85c;
      font-weight: 300;
    }
    .answerNumPreview{
      color: #2c0505;
      background-color: #ffffff;
      padding: 0 4px;
      border-radius: 5px;
      position: absolute;
      top: -12px;
      left: 48%;
      width: 20px;
      text-align: center;
      border: 1px solid #5cb85c;
    }
    /*This will break every part in new page when printing */
    .pagebreak {
      page-break-before: always; 
    }
    /*print every style as it it*/
    body {-webkit-print-color-adjust: exact !important;}
}

::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5
}

::-webkit-scrollbar-thumb {
  background-color: #009688;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #f5f5f5
}