.telegram_icon{
    top: 39%;
    position: fixed;
    right: 2%;
    color: white;
    background: #007bff;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    text-align: center;
    z-index: 100;
    cursor: pointer;
}
.facebook_icon{
        top: 47%;
    position: fixed;
    right: 2%;
    color: white;
    background: #007bff;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    text-align: center;
    z-index: 100;
    cursor: pointer;
}
    .top_menu{
            margin-bottom: 40px;
    }
    .bot_icon{
        top: 15%;
    position: fixed;
    right: 2%;
    color: white;
    background: black;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    text-align: center;
    z-index: 100;
    cursor: pointer; 
    }
    .profile_icon{
        top: 23%;
    position: fixed;
    right: 2%;
    color: white;
    background: black;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    text-align: center;
    z-index: 100;
    cursor: pointer;
    }
    .support_icon{
        display: none;
        top: 31%;
    position: fixed;
    right: 2%;
    color: white;
    background: #397f14;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    text-align: center;
    z-index: 100;
    cursor: pointer;
    }
    .users_icon{
        top: 65%;
    position: fixed;
    right: 2%;
    color: white;
    background: red;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    text-align: center;
    z-index: 100;
    cursor: pointer;
    }
    

.qr_button {
  background-color: #1d1d1f;
  color: #ffffff;
  padding: 17px;
  margin: 10px;
  font-size: xxx-large;
}

.alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
 
}

.alert-content {
 position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 30%;
    background-color: #ffffff;
    padding: 10px;
    text-align: center;
}






.teacher_img{
  
    background-size: contain;background-repeat: no-repeat;background-position-x: center;background-size: cover;width: 25%;height: 50%;
}

.data-table {
    font-size: 14px;
    min-width: 100%;
    margin-top: 1%;
    text-align: right;
}

.data-table th,.data-table td {
    border: 1px solid #e1edff;
    padding: 7px 5px;
    border-radius: 20px
}

.data-table caption {
    margin: 7px
}


.data-table tbody td {
    color: #353535
}

.data-table tbody td:first-child,.data-table tbody td:nth-child(4),.data-table tbody td:last-child {
    /* text-align:center; */
    direction: rtl;
}

.data-table tbody tr:nth-child(odd) td {
    background-color: #f4fbff;
    vertical-align: text-top;
    border-radius: 20px
}

.data-table tbody tr:hover td {
    background-color: #ffffa2;
    border-color: #ffff0f
}

.data-table tfoot th {
    background-color: #e5f5ff;
    text-align: right
}

.data-table tfoot th:first-child {
    text-align: left
}

.data-table tbody td:empty {
    background-color: #fcc
}






a{
        color: #000000;
    text-decoration: none;
    font-weight: bold;
        cursor: pointer;
}



    .all_contents{
         height: 90%;
    background: white;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
        
    }
    .file_des{
           text-align: right;
    width: 85%;
    padding: 10px;
    height: auto;
    }
    .side_bar{
       
    width: 30%;
    padding: 10px;
    height: auto;
    }
    .almanahj_footer{
        width: 85%;
        text-align: center;
    margin-top: 10px;
     
    }
    .almanahj_body{
        margin: 4%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
        background-color: #e9ebee;
    }
.here{
  
}

    @media screen and (max-width: 700px) {
        .all_contents{
                flex-direction: column;
        }
    
    .side_bar{
        width: 84%;
        margin: 0 auto;
    }
    .file_des{
    /*   display: inline-table; */
        width: 100%; 
        margin: 0 auto;
        
    }}
    img{
        width: 100%;
        padding: 8%;
    }
    .data-table thead th {
        font-size: inherit;
            text-shadow: 1px 1px 2px #060000, 0 0 1em #185f0c, 0 0 0.2em #080000;
    }
    
    p{
    text-align: right;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  font-family: 'Oswald', sans-serif;
}
.circle_menu{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
 /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
  /* clip-path: circle(25px at calc(0% + 45px) 45px); */
  background: #000;
  clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
  z-index: 200;
}
#active:checked ~ .circle_menu{
  clip-path: circle(75%);
}
.menu-btn{
  position: absolute;
  z-index: 201;
  right: 20px;
  /* left: 20px; */
  top: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
 /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
  background: #000;
  transition: all 0.3s ease-in-out;
}
#active:checked ~ .menu-btn{
  color: #fff;
}
#active:checked ~ .menu-btn i:before{
  content_menu: "\f00d";
}
.circle_menu ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}
.circle_menu ul li{
  margin: 15px 0;
}
.circle_menu ul li a{
  color: none;
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;

  color: #fff;
  border-radius: 50px;
  background: #000;
  position: relative;
  line-height: 34px;
  transition: all 0.3s ease;
}
.circle_menu ul li a:after{
  position: absolute;
  content_menu: "";
  background: #fff;
   background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
  width: 104%;
  height: 110%;
  left: -2%;
  top: -5%; /* if the font is 'Oswald'*/
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  animation: rotate 1.5s linear infinite;
  transition: transform 0.3s ease;
}
.circle_menu ul li a:hover:after{
  transform: scaleY(1);
}
.circle_menu ul li a:hover{
  color: #fff;
}
input[type="checkbox"]{
  display: none;
}
.content_menu{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  text-align: center;
  width: 100%;
  color: #202020;
}
.content_menu .title{
  font-size: 40px;
  font-weight: 700;
}
.content_menu p{
  font-size: 35px;
  font-weight: 600;
}

@keyframes rotate {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}

*{
  box-sizing: border-box;
}

.search-box{
  width: fit-content;
  height: fit-content;
  position: absolute;
      top: 20px;
    left: 5%;
}
.input-search{
  height: 50px;
  width: 50px;
  border-style: none;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 2px;
  outline: none;
  border-radius: 25px;
  transition: all .5s ease-in-out;
  background-color: black;
  padding-right: 40px;
  color:black;
  text-align: center;
}
.input-search::placeholder{
  color:black;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 100;
  border-bottom: 2px;
  border-color: black;
}
.btn-search{
  width: 50px;
  height: 50px;
  border-style: none;
  font-size: 20px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  right: 0px;
  color:#ffffff ;
  background-color:black;
  pointer-events: painted;  
}
.btn-search:focus ~ .input-search{
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}
.input-search:focus{
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}

 
.copy_link{
    top: 20px;
    position: absolute;
    color: white;
    background-color: black;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    left: 20px;
    z-index: 202;
        cursor: pointer;
       
}
.logo_circle{
 
    top: 20px;
    position: absolute;
    color: white;
    background-color: black;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    z-index: 202;
    background-image: url(/chat/images/main2.png);
    background-size: 60px;
        cursor: pointer;
         margin-right: 47%;
}
.history{
    top: 3%;
    position: absolute;
    color: white;
    background-color: black;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    left: 80px;
    z-index: 202;
        cursor: pointer;
}

@media (max-width: 700px) {
  .logo_circle {    
margin-right: 41%;
}
     
        
        
        .noti_txt{
    width: 80%;
    height: 84px;
}
.noti_mail {
    width: 61%;
    height: 33px;
    text-align: center;
}
.content{
        z-index: 100;
    width: 90%;
    margin-left: 35px;
    position: relative;
    background-color: white;
    margin-top: 50px;
}
  .typewriter{
      width: fit-content;
  }  
.typewriter h3 {
    font-size: unset;
    direction: rtl;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-left: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
 /*   text-align: center;*/
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
    float: right;
    margin-right: 3%;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}




button{
        border: none;
    border-radius: 6px;
    font-size: 17px;
    line-height: 48px;
    padding: 0 16px;
    background-color: #1877f2;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    text-align: center;
    text-shadow: none;
    vertical-align: middle;
    color: #fff;
    width: 64%;
    cursor: pointer;
}
select {
    font-size: 17px;
    padding: 14px 16px;
    width: 95%;
}

.button{
    width: 80%;
color: #fff;
cursor: pointer;
background-color: #1877f2;
padding: 1%;
border-radius: 10%;
}
	/* Table */
		.data-table {
			
			font-size: 14px;
			min-width: 100%;
			margin-top: 1%;
		}

		.data-table th, 
		.data-table td {
			border: 1px solid #e1edff;
			padding: 7px 5px;
			border-radius: 20px;
		}
		.data-table caption {
			margin: 7px;
		}

		/* Table Header */
		.data-table thead th {    background: black;
    text-shadow: 1px 1px 2px #060000, 0 0 1em #185f0c, 0 0 0.2em #080000;
    text-align: center;
  
    color: white;
		}

		/* Table Body */
		.data-table tbody td {
			color: #353535;
		}
		.data-table tbody td:first-child,
		.data-table tbody td:nth-child(4),
		.data-table tbody td:last-child {
			text-align: center;
			    padding: 5px;
		}

		.data-table tbody tr:nth-child(odd) td {
			background-color: #f4fbff;
			     vertical-align: text-top;
			     border-radius: 20px;
		}
		.data-table tbody tr:hover td {
			background-color: #ffffa2;
			border-color: #ffff0f;
		}

		/* Table Footer */
		.data-table tfoot th {
			background-color: #e5f5ff;
			text-align: right;
		}
		.data-table tfoot th:first-child {
			text-align: left;
		}
		.data-table tbody td:empty
		{
			background-color: #ffcccc;
		}



.footer-basic {
    padding: 40px 0;
    background-color: #f5f5f5;
    color: #4b4c4d;
    text-align: center;
    font-family: 'Arial', sans-serif;
    direction: rtl;
}

.footer-basic .social {
    padding-bottom: 25px;
}

.footer-basic .social a {
    font-size: 24px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    margin: 0 8px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background-color: #4b4c4d;
    transition: all 0.3s ease-in-out;
}

.footer-basic .social a:hover {
    background-color: #007bff;
}

.footer-basic .list-inline {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-bottom: 20px;
}

.footer-basic .list-inline-item {
    display: inline-block;
    margin: 0 10px;
}

.footer-basic .list-inline-item a {
    color: #4b4c4d;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-basic .list-inline-item a:hover {
    color: #007bff;
}

.footer-basic .copyright {
    margin-top: 15px;
    font-size: 14px;
    color: #aaa;
}


   .footer-basic {
  padding:40px 0;
 
  color:#4b4c4d;
  width: 100%;
  
     bottom: 0;
    position: relative;
}

.footer-basic ul {
padding: 0;
    list-style: none;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.footer-basic li {
  padding:0 10px;
}

.footer-basic ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.8;
}

.footer-basic ul a:hover {
  opacity:1;
}

.footer-basic .social {
  text-align:center;
  padding-bottom:25px;
}

.footer-basic .social > a {
  font-size:30px;
  width:40px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  border:1px solid #ccc;
  margin:0 8px;
  color:inherit;
  opacity:0.75;
}

.footer-basic .social > a:hover {
  opacity:0.9;
}

.footer-basic .copyright {
  margin-top:15px;
  text-align:center;
  font-size:13px;
  color:#aaa;
  margin-bottom:0;
}