@font-face{
	src: url(fonts/Tajawal-Regular.ttf);
	font-family: Tajawal-Regular;
}
@font-face{
	src: url(fonts/Tajawal-Bold.ttf);
	font-family: Tajawal-Bold;
}
@font-face{
	src: url(fonts/Tajawal-Medium.ttf);
	font-family: Tajawal-Medium;
}
@font-face{
	src: url(fonts/GE_SS_TWO_BOLD-1.OTF);
	font-family: GEB;
}
@font-face{
	src: url(fonts/GE_SS_TWO_LIGHT.OTF);
	font-family: GEL;
}
@font-face{
	src: url(fonts/GE_SS_TWO_MEDIUM.OTF);
	font-family: GEM;
}
*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border:0;
	direction: rtl;
	font-family: Tajawal-Medium;
	letter-spacing: 1px;
}
body {
  min-height: 100vh;
}
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
	color: inherit;
}
button{
	cursor: pointer;
	box-shadow: 1px 1px 2.5px black;
}
button:focus{
	outline: 0;
}
input:focus{
	outline: 0;
}
.abtn{
	min-width: 40px;
    display: inline-block;
    padding: 6px;
    margin: 2px;
    border-radius: 6px;
    color: white;
    font-size: 16px;
    box-shadow: 1px 1px 2.5px black;
}
.abtn2{
    display: inline-block;
    margin: 4px;
    padding: 4px;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    box-shadow: 1px 1px 2.5px black;
}
.button{
	display: flex;
    border-radius: 6px;
    color: white;
    justify-content: center;
    align-items: center;
    padding: 8px;
    box-shadow: 1px 1px 2.5px black;
}
.prosbtn{
	display: block;
	margin: 2px auto;
	padding: 2px;
	border-radius: 4px;
	color: white;
	font-size: 14px;
}
.coursedate{
  padding: 5px;
  font-size: 18px;
  display: block;
  cursor: pointer;
  background-color: #0066ff;
  border-radius: 8px;
  color: white;
}
.coursedate::-webkit-calendar-picker-indicator {
  width: 70px;
  height: 35px;
  text-align: center;
  border: 1px dashed red;
  cursor: pointer;
}
.raido-con{
    border: 1px solid grey;
    border-radius: 8px;
    padding: 4px;
    margin: 5px;
}
:root {
  --one:#036C9C;	
  --two:#14293C;
  --three:#ffc107;
  --nav-Bcolor: #485460;
  --nav-color:#808e9b;
  --secoundry-color: #ffdd59;
  --aside-color: #1e272e;
  --light-color: #d2dae2;
}
.bg-spink{
	background-color: #be2edd;
	transition: all 0.3s linear;
}
.bg-info {
    background-color: #17a2b8!important;
    transition: all 0.3s linear;
}
.bg-info:hover{
	background-color: #117687!important;
}
.bg-danger {
    background-color: #dc3545!important;
    transition: all 0.3s linear;
}
.bg-danger:hover{
    background-color: #bb2432!important;
}
.bg-success {
    background-color: #28a745!important;
    transition: all 0.3s linear;
}
.bg-success:hover{
	background-color: #13762a!important;
}
.bg-dark{
	background-color: #343a40 !important;
	transition: all 0.3s linear;
}
.bg-dark:hover{
	background-color: #1b1c1e !important;
}
.bg-warning {
    background-color: #ffc107!important;
    transition: all 0.3s linear;
}
.bg-spink:hover{
	background-color: #e056fd!important;
}
.bg-warning:hover{
	background-color: #b98c08!important;
}
.bg-new{
     background-color:#d35800!important;
     transition: all 0.3s linear;
}
.bg-new:hover{
	background-color: #b14e08!important;
}
.bg-white{
     background-color:#ffffff!important;
}
.f-info {
    color: #17a2b8!important;
    transition: all 0.2s linear;
}
.f-spink {
    color: #be2edd!important;
    transition: all 0.2s linear;
}
.f-danger {
    color: #dc3545!important;
    transition: all 0.2s linear;
}
.f-success {
    color: #28a745!important;
    transition: all 0.2s linear;
}
.f-dark{
	color: #343a40 !important;
	transition: all 0.2s linear;
}
.f-warning {
    color: #ffc107!important;
    transition: all 0.2s linear;
}
.f-new{
     color:#d35800!important;
     transition: all 0.2s linear;
     letter-spacing: 2px;
    font-weight: bold;
}
.text-info {
    color: #17a2b8!important;
    transition: all 0.3s linear;
}
.text-info:hover{
	color: #117687!important;
}
.text-danger {
    color: #dc3545!important;
    transition: all 0.3s linear;
}
.text-danger:hover{
    color: #bb2432!important;
}
.text-success {
    color: #28a745!important;
    transition: all 0.3s linear;
}
.text-success:hover{
	color: #13762a!important;
}
.text-dark{
	color: #343a40 !important;
	transition: all 0.3s linear;
}
.text-dark:hover{
	color: #1b1c1e !important;
}
.text-warning {
    color: #ffc107!important;
    transition: all 0.3s linear;
}
.text-warning:hover{
	color: #b98c08!important;
}
.text-new{
    color:#d35800!important;
    transition: all 0.3s linear;
}
.text-new:hover{
	color: #b14e08!important;
}
.text-white{
     color:#ffffff!important;
}


.border-info {
	border: 1px solid #17a2b8!important;
}
.border-danger {
    border: 1px solid #dc3545!important;
    transition: all 0.3s linear;
}
.border-success {
    border: 1px solid #28a745!important;
    transition: all 0.3s linear;
}

.border-dark{
	border: 1px solid #343a40 !important;
	transition: all 0.3s linear;
}
.border-warning {
    border: 1px solid #ffc107!important;
    transition: all 0.3s linear;
}
.border-new{
    border: 1px solid #d35800!important;
    transition: all 0.3s linear;
}
.border-white{
     border: 1px solid #ffffff!important;
}


.block-center{
	margin: 0 25%;
}
.alert-message{
    text-align: center;
    font-size: 25px;
    color: white;
    padding: 20px;
}
/* Start admin login form style */
.login-header{
	padding-top: 150px;
	text-align: center;
    font-size: 50px;
    font-weight: bold;
   	padding-bottom: 40px;
    color: white;
}
.login{
	width: 330px;
	margin: auto;
}
.login h4{
	color: #888;
}
.login input {
	margin-bottom: 10px;
	display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

element.style {
}
.login .form-control {
    background-color: #eaeaea;
    text-align: center;
}
.form-control:focus {
    color: #495057;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 
}
.login .btn{
	background-color: #008dde;
	color: white;
	cursor: pointer;
}

/* end admin login form style */
/*#####################################
######Start  dashbord Asside style#####
######################################*/
.all-con{
	max-width: 1350px;
    min-height: 100vh;
	margin: auto;
	overflow: hidden;
	display: flex;
}
aside{
	width: 225px;
	background: var(--two);
	transition: all .5s linear;
	min-height: 100vh;
}
.dashboard-menu a{
	position: relative;
    display: flex;
    align-items: center;
}
.dashboard-menu a span{
    background-color: #149e14;
    color: white;
    min-width: 30px;
    text-align: center;
    border-radius: 6px;
}
.dashboard-menu {
	padding: 10px;
	font-size: 18px;
}
.dashboard-menu li{
	font-family: Tajawal-Medium;
	padding: 12px 8px;
	color: white;
	cursor: pointer;
	transition: all 0.2s linear;
}
.dashboard-menu li:hover{
	color: #7adb30;
	transform: scale(1.1);
}
.dashboard-menu li i{
	width: 23px;
	text-align: center;
}
.active{
	color: #ffc107!important;
	transform: scale(1.05);
}

/*#####################################
###### End  dashbord Asside style######
######################################*/


/*######################################
###### Start  dashbord header style#####
#######################################*/
.closebut{
	width: 80px;
    padding: 5px;
    margin: 5px;
    border-radius: 8px;
    font-size: 22px;
    color: red !important;
}

header{
	background-color: #036C9C;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-shadow: 1px 2px 4px black;
	position: relative;
	padding: 2px;
	min-height: 75px;
}
.logo{
	position: relative;
	flex: 1;
}
.logo img{
	height: 75px;
	animation: myfirst6 4s linear 0s infinite;
}
.logo span{
	position: absolute;
	font-size: 28px;
	top: 15px;
    right: 85px;
    color: var(--three);
    font-family: Tajawal-Bold;
    animation: myfirst5 7s linear 0s infinite ;
    text-shadow: 1px 20px 14px black;
}
.header-menu{
	display: flex;
	font-size: 30px;
	justify-content: flex-end;
	height: 100%;
	align-items: center;
	position: relative;
}
.header-menu > li{
	margin-left: 35px;
	position: relative;
	color: #dfe6e9;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.header-menu li:hover{
	color: white;
	transform: scale(1.05);
}
.header-menu li span{
	position: absolute;
    top: 1px;
    left: -10px;
    font-size: 11px;
    width: 18px;
    height: 18px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #ff4b5a;
    color: white;
}
.header-menu li img{
	border-radius: 6px;
	width: 45px;
	height: 45px;
	box-shadow: 1px 1px 2px var(--nav-color);
}
.header-menu li name{
	font-size: 18px;
	padding: 10px;
	color: #dfe6e9;
}
.admin-option{
	position: absolute;
	left: 8px;
	border-radius: 6px;
	box-shadow: 1px 1px 3px var(--nav-color);
	overflow: hidden;
	display: none;
	z-index: 1009;
}
.admin-option li{
	padding: 8px 24px;
	background-color: white;
	font-size: 18px;
	width: 200px;
	color: var(--nav-Bcolor);
	cursor: pointer;
	transition: all .2s linear;
}
.admin-option li button{
	background-color: transparent;
	font-size: 18px;
	width: 100%;
	color: var(--nav-Bcolor);
	cursor: pointer;
	transition: all .3s linear;
	text-align: right;
}
.admin-option li button:hover{
	color: white;
}
.admin-option li:hover{
	background-color: var(--two);
	color: white;
	transform: scale(1.05);
}
.mgs-arrow , .mail-arrow, .nati-arrow{
	position: absolute;
	color: white;
	top: 110%;
	display: none;
	z-index: 1009;
}
.arrow i:first-child{
	display: block;
}
.mgs-drop , .mail-drop , .nati-drop{
	position: absolute;
	background-color: white;
    top: 100%;
    border-radius: 6px;
    display: none;
    z-index: 1009;
}
.mgs-drop{
    left: 145px;
    width: 277px;	
}
.mail-drop{
	left: 81px;
	width: 277px;
}
.nati-drop{
	left: 17px;
	width: 277px;
}
.all-msg , .new-msg , .message{
	padding: 11px 22px;
	font-size: 16px;
	border-radius: 8px;
	color: white;
}
.message > p{
	color: #555;
    line-height: 1;
    padding-top: 5px;
    margin-bottom: 2px;
}

.message img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.details{
	padding: 8px;
}
.details h6{
	font-size: 17px;
}
.details p{
	margin-bottom: 12px;
}
.all-msg{
	text-align: center;
	color: #4272d7;
}
.allnoti{
	height: 272px;
    overflow-y: scroll;
}
.allmail-link{
	cursor: pointer;
}
.allmail-link:hover{
    color: blue !important;
}
.mailmessage{
	display: none;
	position: fixed;
    width: 50%;
    top: 100px;
    right: 25%;
    background-color: var(--aside-color);
    color: white;
    padding: 20px;
    border-radius: 20px 0 20px 8px;
    z-index: 1017;
}
/*######################################
###### End  dashbord header style#######
#######################################*/


/*#######################################
###### Start  dashbord section style#####
#######################################*/


section{
	background-color: var(--light-color);
	flex: 1;
	padding: 20px;	
	min-height: 100vh;
}
section h1{
    width: 100%;
    text-align: center;
    padding: 8px;
    font-size: 26px;
    color: black;
    font-family: 'Tajawal-Bold';
}
.statistics{
    margin-bottom:10px;
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
}
.statistics div{
	width: 23%;
	display: flex;
	align-items: center;
	background-color: white;
	padding: 5px;
	border-radius: 6px;
	box-shadow: 1.5px 1.5px 3.5px #636e72;
}
.statistics div span{
	padding: 20px;
	color: white;
	font-size: 25px;
	border-radius: 6px;
	width: 65px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.statistics div ul{
	padding: 0 10px;
	font-size: 18px;
}
.statistics div ul li:last-child{
	font-size: 18px;
	font-weight: 700;
}
.latest{
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
}
.latest-table {
	border-radius: 6px;
	background-color: white;
	box-shadow: 1px 1px 3px #636e72;
	margin: 10px auto;
}
.latest-dash{
	width: calc(50% - 10px);
}
.latest-dash:first-child{
	margin-left: 20px;
}
.latest-dash:nth-child(3){
	margin: 20px auto;
}
.latest-table h3{
	 background-color: #636e72;
	 color: white;
	 text-align: center;
	 font-size: 22px;
	 padding: 10px;
}
.table-3{
	display: grid;
	grid-template-columns:  50px 1fr 1fr;
	align-items: center;
}
.table-4{
	position: relative;
	display: grid;
	grid-template-columns: 50px 1fr 1fr 1fr;
	align-items: center;
}
.comment-replay-box{
	border:2px solid #d88d05;
	position: fixed;
	display: none;
	padding: 10px;
	width: 300px;
	height: 250px;
	left: calc(50% - 150px);
	top: calc(50% - 125px);
	border-radius: 6px;
	background-color: #34495e ;
	z-index: 1080;

}
.comment-replay-box textarea{
	width: 100%;
    height: 180px;
    font-size: 18px;
    padding: 5px;
    border-radius: 6px;
    resize: none;
}
.comment-replay-box button{
	padding: 8px;
    border-radius: 6px;
    overflow: hidden;
    color: white;
    cursor: pointer;
    width: 77px;
    margin: 3px 0;
}
.comment-replay-box button:hover{
	transform: scale(1.02);
	box-shadow: 1px 1px 3px;
}
.all-comment{
	display: none;
}
.show{
	display: block !important;
}
.showf{
	display: flex !important;
}
.comment-rep{
	display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
}
.comment-rep img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 1px 1px 3px;
}
.comment-rep span{
	padding: 0 10px;
}
.table-5{
	display: grid;
	grid-template-columns: 60px 1fr 1fr 1fr 1fr;
	align-items: center;
}
.table-6{
	display: grid;
	grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr;
	align-items: center;
	position: relative;
}
.table-7{
	display: grid;
	grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr 1fr;
	align-items: center;
	position: relative;
}
.table-8{
	display: grid;
	grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	align-items: center;
	position: relative;
}
.table-9{
	display: grid;
	grid-template-columns: 50px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	align-items: center;
	position: relative;
}
.table-4 , .table-5, .table-6 , .table-3, .table-7, .table-8, .table-9{
	padding: 5px;
	cursor: pointer;
	text-align: center;
}
.latest-dash > ul:hover{
	transform: scale(1.03);
	color: #17a2b8;
}
.latest-table > ul:nth-child(odd) {
    background-color: #e0e0e0;
}
.t-header{
	background-color: #34495e !important;
	color: white;
}
.latest-table  > ul li img{
	width: 50px;
}
/*#######################################
###### Start  dashbord section style#####
#######################################*/


/*#######################################
###### Start  admin section style#####
#######################################*/
.latest-admin{
	font-size: 16px;
	font-weight: bold;
}
.t-body{
	position: relative;
}
.t-bodyr:hover{
	background-color: black!important;
	color: white!important;
}
.t-body li iframe{
	max-width: 100% !important;
	height: auto;
}
.editform{
	display: none;
	margin: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1090;
    overflow-y: scroll;
    min-height: 500px;
    transform: translate(-50%, -50%);
    min-width: 80%;
}
.editform2{
	height: -moz-fit-content;
	height: fit-content;
	display: none;
	margin: auto;
  	position: fixed;
  	top:50%;
  	left:50%;
  	transform: translate(-50%, -50%);
  	z-index: 1090;
  	overflow: scroll;
    max-height: 400px;
    width: 85%;
}
.editform label{
	color: white;
}
.t-body > li:nth-child(3):hover{
	transform: scale(1.04);
	color: #17a2b8;
}
.latest-admin .t-header{
	padding: 10px;
}
.t-body > li button , .mybutton{
	padding: 8px;
	border-radius: 6px;
	overflow: hidden;
	color: white;
	cursor:pointer;
	width: 40px;
	margin: 3px 0;
}
.t-body > li button:hover{
	color: black;
}
.add-search{
	gap: 4px;
	margin: 8px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}
.add-btn{
	padding: 10px;
	font-size: 17px;
	color: white;
	border-radius: 6px;
	background-color: #007bff;
}
.add-btn:hover{
	background-color: #0069d9;
}
.add-search div input{
	padding: 6px;
	font-size: 16px;
	border-radius: 6px;
}
.add-search div button{
	padding: 6px 20px;
	font-size: 16px;
	border-radius: 6px;
	background-color: #007bff;
	color: white;
}
.add-search div button:hover{
	background-color: #0069d9;
}
.add-form hr{
    height: 1px;
    background: black;
    width: 95%;
    margin: auto;	
}

.add-form > form {
	display: flex;
	flex-wrap: wrap;
}
.wide-input {
	width: 33.33%;
	display: grid;
	grid-template-columns: 95px auto;
	align-items: center;
	position: relative;
}
.wide-input  textarea{
    width: 100%;
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    background-color: white;
    resize: none;
    min-height: 100px;
}
.add-form {
	box-shadow: 0px 0px 2px var(--aside-color);
	border-radius: 6px;	
}
.add-form form > div{
	padding: 8px;
	font-size: 14px;
	color: var(--aside-color);
}
.wide-input input , question-input input, .wide-input select {
    width: 100%;
	font-size: 15px;
	padding: 4px;
	border-radius: 6px;
	background-color: white;
}
/* new Edit */
.question-input{
	width: 100%;
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;

}
.question-input label{
	width: 14%;
	margin-bottom: 5px;
}
.question-input div{
	width: 100%;
}
.question-input img{
	max-width: 100%;
	display: block;
	margin: auto;
}
#question{
	width: 80%;
}
.question-input input{
	width: 35%;
	margin-bottom: 5px;
}
.check-input h4{
	text-align: center;
}
.check-input{
	width: 20% !important;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.check-inputt{
	width: 50% !important;
	justify-content: center;
	align-items: center;
}
.check-inputtt{
	width: 15% !important;
	justify-content: center;
	align-items: center;
}
/* end new */
.subject-drop-list{
	position: relative;
}
.subject-drop-list input{
	cursor: pointer;
}
.subject-drop-list ul{
	position: absolute;
	border-radius: 6px;
	width: 95%;
	z-index: 1001;
    top: 40px;
    left: 10px;
    background-color: #34495e;
    color: white;
    display: none;
    overflow-y: scroll;
    height: 400px;
}
.subject-drop-list i{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.found-items{
	position: absolute;
	border-radius: 6px;
	width: 93%;
	z-index: 1001;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #34495e;
    color: white;
    display: none;
}
.subject-drop-list ul li ,.found-items li{
	padding: 5px 20px;
	border-bottom: .5px solid white;
}
.subject-drop-list ul li:hover{
	background-color: var(--aside-color);
	transform: scale(1.04);
	padding-right: 38px;
}
.subject-drop-list span{
	    position: absolute;
    left: 5px;
    top: 50%;
    color: black;
    transform: translateY(-50%);
}

/*#######################################
###### End  admin section style#####
#######################################*/
.codeprint{
	display: flex; 
	flex-wrap: wrap; 
	align-items: center;
}
.codeprint ul{
   width: 25%;
   padding: 20px;
   text-align: center;
   font-size: 16px;
   background-color: white;
   border: 1.5px solid black;
}
.codeprints ul img{
	width: 60%;
}
/*#######################################
###### Start  level section style#####
#######################################*/

.level-con{
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
.level{
    display: block;
    width: calc(25% - 20px);
    padding: 10px 20px;
    background-color: var(--aside-color);
    color: white;
    border-radius: 6px;
    margin: 10px;
    text-align: center;
    font-size: 15px;
    box-shadow: 2px 2px 2.5px #636e72;
    transition: all 0.2s linear;
}
.level:hover{
	background-color: var(--two);
}
.level img{
	width: 100%;
}
.level h3{
	cursor: pointer;
	margin: 3px 0px;
}
.level h3:hover{
	color: #ffa801;
	transform: scale(1.03);
}
.level div{
	margin: 4px 0;
} 
.level div button{
	padding: 6px;
	color: white;
	width: 77px;
	margin: 5px;
	border-radius: 6px;
}
.level div button:hover{
	color: black;
	transform: scale(1.03);
}
.submit-btn{
	width: 100%;
	text-align: center;
}
.submit-btn input ,.submit-btn button{
	padding: 8px 20px;
	font-size: 16px;
	color: white;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 1px 1px 2.5px black;
}
/*#######################################
###### End  level section style#####
#######################################*/


/*#######################################
###### Start  lesson section style#####
#######################################*/
.lesson-con{
	display: flex; 
	flex-wrap: wrap; 
	background-color: #01b198;
	margin: 20px 0 ;
	border-radius: 8px;
}
.lesson-level{
	padding: 15px;
    color: white;
    background-color: #2c3e50;
    width: calc(100% - 20px);
    margin: 20px 10px;
    border-radius: 6px;
    box-shadow: 1px 1px 3px #636e72;
}
.subject-con , .lesson-conn{
	display: none;
}
.lesson-conn{
	flex-wrap: wrap;
}
.lesson-subject{
	padding: 10px;
    color: white;
    background-color: #2980b9;
    width: calc(100% - 10px);
    margin: 10px 5px;
    border-radius: 6px;
    box-shadow: 1px 1px 3px #636e72;
}
.lesson-level h4{
	font-size: 24px;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.lesson-subject h3{
	font-size: 20px;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.lesson-level h4:hover{
	color: #f1c40f;
}
.lesson-level ul{
    overflow: hidden;
    height: 0;
    transition: all 0.5s linear; 
}
.lesson-level h5{
	padding: 10px 20px;
    display: flex;
    background-color: #27ae60;
	font-size: 20px;
    justify-content: space-between;
    align-items: center;
}
.lesson-teacher{
	font-size: 18px;
    padding: 5px 40px;
    background-color: #2980b9;
}	
.lesson-teacher span{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.lesson-teacher li{
	display: flex;
	flex-wrap: wrap;
}
.lesson{
	border: 1px solid var(--secoundry-color);
    margin: 5px;
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
    padding: 8px;
    width: calc(33.3% - 10px);
}
.lesson iframe{
	width: 100%;
    height: 250px;
}
.slesson{
	display: flex;
	flex-wrap: wrap;
}
.lesson img{
	max-width: 100%;
    height: 152px;
}
.lesson button{
	padding: 6px;
    border-radius: 6px;
    color: white;
    width: 77px;
    box-shadow: 1px 1px 3px #666;
    margin: 5px;
}
.lesson button:hover{
	transform: scale(1.03);
    color: black;
}
/*#######################################
###### End  lesson section style#####
#######################################*/		

/*#######################################
###### Start  package section style#####
#######################################*/


.subjects-check{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.techers-check{
	width: 100%;
}
/*#######################################
###### End  package section style#####
#######################################*/
/* Start Chat Style */
.chatsec{
	display: flex;
}
.chatmenu{
	width:20% ;
}
.chatmenu ul{
	height: 100%;
	max-height: 100%;
	overflow-y: scroll;
	padding: 5px;
    background-color: #353535;
}

.main-chat hr{
	width: 100%;
    margin: 3px 0;
    color: black;
    height: 3px;
    background-color: #ababab
}
.user-chat-tab{
	position: relative;
	background-color: black;
	width: calc(100% - 6px);
	display: flex;
	align-items: center;
	padding: 1px;
	border-radius: 6px;
	margin: 0 3px;
	cursor: pointer;
}
.unreadmsg{
	position: absolute;
    top: 0;
    background-color: green;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    line-height: 25px;
    text-align: center;
    font-size: 15px !important;
    color: white !important;
}
.user-chat-tab img{
	width: 70px;
	height: 70px;
	border-radius: 50%;
}
.user-chat-tab >div{
	display: flex;
	align-items: center;
}
.user-chat-tab span{
	font-size: 20px;
    padding: 0 5px;
    color: white;
}

.chatbut{
    position: fixed;
    bottom: 40px;
    right: 0;
}
.chatbut > button{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chatbut > button > i{
    font-size: 65px;
    color: var(--two);
}
.chatbut > button > span{
	position: absolute;
    color: white;
}

.con-chat{
	height: 100%;
	display: none;
    background-color: #171717;
    width: 80%;
    color: #e4e6eb;
    border-radius: 8px;
    border: 1px solid var(--two);
    overflow: hidden;
    height: fit-content;
    height: -moz-fit-content;    /* Firefox/Gecko */
  	height: -webkit-fit-content;
}
.chat-option{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	border-bottom: 1px solid #e4e6eb;
}
.chat-logo{
	display: flex;
	align-items: center;
}
.chat-logo img{
    width: 40px;
	height: 40px;
	border-radius: 50%;
}
.chat-logo span{
	font-size: 20px;
	padding: 0 8px;

}
.chat-close span{
	padding: 0 6px;
	font-size: 18px;
	cursor: pointer;
}
.chat-close span:hover{
	color: var(--two);
	transform: scale(1.02);
}
.chat-talk{
	padding: 5px;
	border-bottom: 1px solid #e4e6eb;
	min-height: 300px;
	max-height: 450px;
	overflow-y: scroll;
}
.chat-message{

}
.chat-message div{
	word-break: break-word;
	padding: 5px;
	border-radius: 8px;
	width: fit-content;
	width: -moz-fit-content;
	max-width: 70%;
	min-width: 10%;

}
.chat-message div img{
	max-width: 100%;
}
.companymsg{
	background-color: white;
    color: var(--aside-color);
    margin: 2px auto 2px 0px;
}
.user{
	background-color: lightgreen;
    color: black;
    margin: 2px 0px 2px auto;
}
.adminimage , .adminmsg{
	width: 60% !important;
	margin: auto !important;
	color: #ff6a6a !important;
	text-align: center !important;
}
.chat-writing{
	padding: 5px;
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}	
.chat-writing textarea{
	width: 80%;
    display: block;
    resize: none;
    height: 35px;
    padding: 5px;
    background-color:  #e4e6eb;
    font-size: 16px;
    color: #064796;
}
.chat-writing > button{
	width: 10%;
	font-size:24px;
	background-color: var(--two);
    border-radius: 6px;
    color: white;
}	
.chat-writing form{
	width: 10%;
}
.chat-writing form button{
	color: white;
	height: 100%;
	width: 100%;
	font-size:24px;
	background-color: var(--two);
    border-radius: 6px;
    margin: 0 2px;
}
/* End admin chat */

/*#######################################
###### Start  face section style#####
#######################################*/
.row{
	display: flex;
	flex-wrap: wrap;
	margin: auto;
    width: 100%;
}
.row img{
	border-radius: 8px;
	overflow: hidden;
	margin: 10px;
	cursor: pointer;
	transition: all 0.2 linear;
}
.row img:hover{
	transform: scale(1.05);
}
#newsmain{
    margin: 0px;
    height: 300px;
    resize: none;
    width: 750px;
    border-radius: 8px;
}
/* 

		Start responsive style

*/
.sildmenu{
	right: 0 !important;
	z-index: 1018;
}
.admin-bars{
	display: none;
	position: absolute;
    color: var(--light-color);
    font-size: 25px;
    top: calc(50% - 12.5px);
    right: 10px;
    background-color: transparent;
    z-index: 1100;
    box-shadow: none;
}
.package-con{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width:100%;
}
.package-con > div{
	width: calc(33.3% - 10px);
	margin: 5px;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    background-color: var(--secoundry-color);
}
.package-con h3 , h4 ,h5 {
	padding: 5px;
}
.package-con a{
	color: blue;
	cursor: pointer;
	margin: auto;
}
.package-con h5:hover{
	transform: scale(1.05);
}
.qicon{
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.qicon label {
    width:15%;
}
.qicon img {
    width:40%;
}
.qicon input {
    width:35%;
}
.teacher-com{
	display: block;
    width: 100%;
    background-color: var(--secoundry-color);
    resize: none;
    height: 60px;
    border-radius: 6px;
    padding: 4px;
}
.morecomment{
	width: calc(100% - 10px);
	margin: 0 5px ;
	display: none;
}
.morecomment > ul{
	width: 100%;
    display: flex;
    text-align: center;
    margin: 5px 0;
    border-radius: 6px;
}
.morecomment > ul > li {
	padding: 5px;
    color: white;
}
.pac30{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	text-align: center;
}
.pac30 > div{
	width: calc(33.33% - 10px);
	margin: 5px 5px;
	border: 1px solid;
}
.lessonview{
    list-style-type: none;
    display:flex;
    flex-wrap:wrap;
    width:100%;
}
.lessonview li{
    width: calc(50% - 10px);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid;
    border-radius: 6px;
    margin: 5px;
}
.lessonview li h3{
    width:100%;
    color: var(--four);
}
.lessonview li span{
    width:50%;
}
.grade{
    font-size:24px;
    color:red;
}
.lastexam{
	border:1px solid;
	padding: 20px;
	margin: 15px auto;
	border-radius: 8px;
	box-shadow: 2px 2px 3px #666;
}
.Follow {
	display: flex;
	flex-wrap: wrap;
	color: var(--five);
}
.Follow > li{
	width: 50%;
}
.lastexam legend{
	text-align: center;
	font-size: 18px;
	color: var(--five);
}
.lastexam ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	text-align: center;
	align-items: center;
	border-radius: 6px;
	cursor: pointer;
}
.lastexam ul li{
	width: 25%;
}

.lastexam ul:nth-child(even) {
    background-color: #e0e0e0;
}
.lastexam ul:nth-child(odd) {
    background-color: var(--four) 
}
.lastexam ul:hover{
	transform: scale(1.01);
	color: var(--three) !important;
}
.t-head-result{
	background-color: var(--aside-color) !important;
	color: white;
}

.question-con{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
.question{
	width: 100%;
}
.anser{
	width: 50%;
	padding: 20px;
}
.lastexam hr{
	width: 100%;
    background-color: #aba6a6;
    height: 2px;
}

.st1, .st5{
    animation: myfirst1 1.2s linear ;
}
.st2, .st3{
    animation: myfirst2 1.2s linear ;
}
.st4{
    animation: myfirst3 1.2s linear ;
}
.st1 i,.st2 i,.st3 i,.st4 i,.st5 i{
	    animation: myfirst4 4s linear 0s infinite ;
	}

/*###########################################
########## Start Table  Style #######
###########################################
*/
.mytable{
	width: 100%;
	background-color: white;
}
.mytable, .mytable th, .mytable td {
  border:2px solid var(--one);
  border-collapse: collapse;
}
.mytable td {
	width: 50%;
	padding: 6px;
	font-weight: bold;
}
.mytable td input{
	font-weight: bold;
    font-size: 16px;
    width: 100%;
}
.table-con{
 width: 100%;
}
.table-con input, .table-con select{
 width: calc(100% - 15px);
 margin: auto;
 padding: 2px;
 border-radius: 4px;
}
.removei{
	    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: red;
}
/*###########################################
########## End Table  Style #######
###########################################
*/
.start-main{ 
	display: block;
	background-image: url(../image/def/bg.gif);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}
.start-main > div{
	background-color: rgba(0, 0, 0, 0.65);
    position: relative;
}
.start-main > div > section{
	background-color: transparent;
	transition: all 0.7s linear;
	position: relative;
	left: 0;
}
.cust1{
	cursor: pointer;
	min-height: 100px;
}	
.cust1 > i{
	font-size: 30px;
	
}
.cust1 > span{
}
.arrow{
	opacity: 0;
	transition: all 0.3s linear;
}
.cust1:hover arrow{
	opacity: 1;
}
.start-form{
	background-color: #07a3f7;
    width: 600px;
    height: 300px;
    top: 50%;
    border-radius: 6px;
    box-shadow: 1px 1px 4px white, -0.2px -0.2px 1px white;
    position: absolute;
    right: 101%;
    transform: translate(0%, -50%);
    transition: all 0.7s linear;
}
.start-form .add-form{
	box-shadow: none;
    position: relative;
    height: 100%;
}
.start-form .add-form > button{
	position: absolute;
	right: 5px;
	bottom: 5px;
}
.start-form .wide-input {
	width: 50% !important;
	grid-template-columns: 110px auto;
}
.required{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: red;
}
/*###########################################
########## Start def  Style #######
###########################################
*/
.pointer{
	cursor: pointer;
}
.myProgress {
  width: 100%;
  background-color: #ddd;
  border-radius: 3px;
  margin: 4px 0;
}
.myBar {
  border-radius: 3px;
  width: 0%;
  height: 20px;
  background-color: #04AA6D;
  text-align: center;
  line-height: 20px;
  color: white;
}
.relative {
  position: relative;

 }
.container {
  position: relative;
  overflow: hidden;
  width: 50%;
  padding-top: 25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.main-box{
	box-shadow: 1px 1px 4px white, -0.2px -0.2px 1px white;
}
.main-box > *{
	display: block;
	margin-bottom: 4px;
}
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.tslider img{
	width: 100%;
	border-radius: 8px;
}
.splide__slide{
	margin: 10px;
	text-align: center;
}
.h{
	text-align: center;
	color: var(--two);
	text-shadow: 0.5px 0.5px 1px var(--three);
}
.h2{
	text-align: center;
	color: white;
	text-shadow: 0.5px 0.5px 3px var(--one);
}
.input{
    padding: 8px;
    border-radius: 6px;
    font-size: 16px;
    margin: 20px auto;
    box-shadow: 1px 1px 3px black;
}
 .mypad{
 	padding: 20px;
 }
.myhr{
	width: calc(100% - 40px);
    height: 1px;
    background-color: white;
    margin: auto;
}
.vertical{
    width: 2px;
    background-color: white;
    margin:  20px auto;
}
.nhr{
    overflow: visible;
    height: 30px;
    border-style: solid;
    border-color: white;
    border-width: 1px 0 0 0;
    border-radius: 20px;
    margin: 25px auto;	
}
.nhr:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: white;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}
.button{
	display: block;
	padding: 6px 14px;
	color: white;
	box-shadow: 1px 1px 3px black;
	margin: 2px;
	font-size: 16px;
	border-radius: 6px;
	background-color: var(--three);
	transition: all 0.1s linear;
}
.button:active {
  box-shadow: 0px 0px 0px ;
}
.linkbut{
	display: block;
	padding: 6px 14px;
	color: white;
	box-shadow: 1px 1px 3px black;
	margin: 2px;
	font-size: 16px;
	border-radius: 6px;
	background-color: var(--three);
	transition: all 0.1s linear;
}
.linkbut:active {
  box-shadow: 0px 0px 0px ;
}
.myflex1{
	gap: 2px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.myflex2{
	gap: 2px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.myflex3{
	gap: 2px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}
.stretch{
	align-items: stretch !important;
}
.start{
	justify-content: start !important;
}
.center{
	justify-content: center !important;
}
.qwidthmirg{
	width: calc(25% - 8px) !important;
}
.qwidth{
	width: 25% !important;
}
.width33{
	width: calc(33.3% - 4px) !important;
}
.hwidthn{
	width: calc(50% - 4px) !important;
}
.fwidthn{
	width: calc(100% - 4px) !important;
}
.qwidth-mirg6{
	width: calc(25% - 12px) !important;
}
.hwidthn-mirg6{
	width: calc(50% - 12px) !important;
}
.fwidthn-mirg6{
	width: calc(100 - 12px)% !important;
}
.auto{
	margin: auto !important;
}
.block{
	display: block;
}
.mirg4{
	margin: 4px;
}
.mirg6{
	margin: 6px;
}
.mirg8{
	margin: 8px;
}
.fsize14{
	font-size: 14px;
}
.fsize16{
	font-size: 16px;
}
.fsize18{
	font-size: 18px;
}
.fsize20{
	font-size: 20px;
}
.fsize22{
	font-size: 22px;
}
.fsize24{
	font-size: 24px;
}
.radius6{
	border-radius: 6px;
}
.radius8{
	border-radius: 8px;
}
.tc{
	text-align: center;
}
.padd4{
	padding: 4px;
}
.padd6{
	padding: 6px;
}
.padd8{
	padding: 8px;
}
.padd10{
	padding: 10px;
}
.shado{
	box-shadow: 1px 1px 3px black;
}
.over{
    overflow: hidden !important;
}
.hide{
    display: none !important;
}
.showb{
    display: block !important;
}
.showf{
    display: flex !important;
}
.ltr{
	direction: ltr !important;
}
.rtl{
	direction: rtl !important;
}
.dislink{
  	opacity: 0.5;
  	pointer-events: none;
}
.details{
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 26px !important;
}
/*
#########################################
########## End def  Style #######
#########################################
*/

.controll-menu > a:hover , .controll-menu > span:hover{
	transform: scaleX(1.3);
}

/*
#########################################
########## Start Receipt  Style #######
#########################################
*/
.receipt{
	padding: 20px;
	font-size: 18px;
}
.receipt > div{
	padding: 10px 0;
}
.receipt hr{
    border-top: dotted 1px;
    flex: 1;
    margin: 0 10px;
}
.moneybox{
    width: 110px;
    height: 35px;
    border-radius: 6px;
    border: 1px solid black;
    text-align: center;
    font-size: 18px;
}
.lineinput{
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    font-size: 20px;
    width: 50%;
    text-align: center;
}
/*
#########################################
########## End Receipt  Style #######
#########################################
*/

.a4{
	width: 595px;
}
@media print {
	aside{
		display: none;
	}
	.add-search{
		display: none;
	}
	.wide-input{
		width: 50%;
	}
     h1, .dashboard-menu, header{
        display:none;
    }
    .add-form{
    	width: 95%;
    	margin: 90px 5px auto;

    }
    .codeprint{
        page-break-inside: always;
        align-items: stretch;
    }
    ul {page-break-inside: avoid;}
    
    .codeprint ul{
        width:33.33%;
        page-break-before: always;
        page-break-after: always;
         page-break-inside: avoid;
         margin-bottom:100px;
    }
  body {
    margin: 0;
    padding: 0;
  }

}
.classmenu{
	width: 50%;
	position: fixed;
    top: 50%;
    background-color: var(--three);
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 1px 1px 3px black;
    font-size: 16px;
    color: var(--aside-color);
    z-index: 1009;
}
.closebu{
	cursor: pointer;
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 24px;
    color: red;
    width: 20%;
    text-align: right;
}
.classmenu > h3 {
	padding: 4px 0;
    cursor: auto;
}
.classmenu > h3:hover {
	color: inherit;
}
.classmenu  li {
	display: flex;
	width: 100%;
	padding: 4px 0;
	text-align: right;
}
.classmenu  li > * {
	width: 50%;
	display: block;
}
@media only screen and (max-width: 1200px) {
	.st1,.st2,.st3,.st4,.st5{
	    animation: none;
	}
}
@media only screen and (max-width: 992px) {
	
}
@media only screen and (max-width: 768px) {
	section{
		padding: 4px;
	}
    .lessonview li{
         width: calc(100% - 10px);
    }
	.pac30 > div{
	width: 100%;
}
	.all-con{
	    grid-template-columns: auto;
	}
	.admin-bars{
		display: flex;
	}
	aside{
		position: absolute;
		right: -100%;
		box-shadow: -1px -1px 3px #3e3e3e;
	}
	.statistics div {
	    width: 100%;
	    margin: 5px 0;
	}
	.latest-dash {
	    width: 100%;
	    font-size: 14px;
	}
	.latest-dash:first-child {
	    margin-left: 0;
	}
	.latest-admin {
	    font-size: 14px;
	}
	.wide-input {
    	width: 100%;
    	display: flex;
	    flex-wrap: wrap;
    }
 
	.t-body li button{
		font-size: 12px;
		width: 70px;
	}
	.latest-table ul li img {
	    width: 45px;
	}
	.lesson{
		width: 100%;
	}
	.block-center {
	    margin: 0 ;
	}
	.table-5 {
	    grid-template-columns: 30px 1fr 1fr 1fr 1fr;
	}
	.t-body li{
		word-break: break-word;
	}
	.level{
        width: 100%;
	}
	.logo{
	    display:none;
	}
	.adminmianmenu{
        position: relative;
        width: 100%;
	}
	section{
	    width:100%;
	}
	.table-6{
	    grid-template-columns: 40px 1fr 1fr 1fr 1fr 1fr;
	}
	.t-body li button{
	    width: fit-content;
	    width: -moz-max-content;   
        width: -webkit-max-content;
	}
	.package-con > div{
	    width:calc(100% - 10px);
	}
	.question-input label, .question-input input{
	    width:100%;
	}
	.qicon input, .qicon label{
	    width:100%;
	}
}
@media only screen and (max-width: 576px) {

}
.pagenation{
    display: flex;
    justify-content: center;
}
.pagenation button {
    font-size: 18px;
    padding: 10px;
    border-radius: 8px;
    background-color: #003be2;
    color: white;
    margin: 5px 15px;
    width:80px;
}
.pagenation span{
    font-size: 18px;
    padding: 10px;
    border-radius: 8px;
    background-color: #0c0c0c;
    color: white;
    text-align: center;
    margin: 5px 15px;
}


/* animation */
@keyframes myfirst1 {
  0%   {transform: translateX(+110%);}
  100% {transform: translateX(0);}
}

@keyframes myfirst2 {
  0%   {transform: translateY(-140%);}
  100% {transform: translateX(0);}
}

@keyframes myfirst3 {
  0%   {transform: translateX(-110%);}
  100% {transform: translateX(0);}
}

@keyframes myfirst4 {
  0%   {transform: rotateY(0deg);}
  50%  {transform: rotateY(180deg);}
  100% {transform: rotateY(360deg);}
}
@keyframes myfirst5 {
  0%   {transform: rotateY(0deg);}
  50%  {transform: rotateY(180deg);}
  100% {transform: rotateY(360deg);}
}
@keyframes myfirst6 {
  0%   {transform: scale(1);}
  50%  {transform: scale(0.8);}
  100% {transform: scale(1);}
}
.swapright{
	right: 50% !important;
	transform: translate(50%, -50%) !important;
}
.swapmain{
	left: 101% !important;
}