.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;
		}