body {
        margin: 1;
        padding: 1;
	    font-family: 'Sakkal Majalla', sans-serif;											  
    }
    .toolbar {
        display: flex;
        justify-content: right;
        text-align: right; /* Add this line */
        border: 1px solid #000;
        background-color: #f2f2f2;
        padding: 5px;
    }
    
    .toolbar .column {
        flex: 1;
        text-align: right; /* Add this line */
    }
    .toolbar button span {
        font-size: 0.6em; /* adjust as necessary */
        text-align: right; /* Add this line */
    }
    
    .toolbar img {
        height: 12px; /* adjust as necessary */
        width: 12px; /* adjust as necessary */
    }
    .textarea {
        width: 95%;
        height: 800px;
        resize: none;
        padding: 20px;
        font-size: 16px;
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        text-align: right;
    }
    .status-bar {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 20px; /* Adjust as necessary */
        background-color: #f2f2f2; /* Adjust color as necessary */
        display: flex;
        justify-content: space-between; /* Add this line */
        align-items: center; /* Change from right to center */
        border: 1px solid #000;
        padding: 2px;
        box-sizing: border-box; /* Uncomment this line */
        font-size: 12px; /* Adjust as necessary */
        text-align: right;
        padding: 2px;
        margin-right: 0; /* Add this line */
    }
    
    .status-bar-item {
        flex: 1; /* Make the items take up equal width */
        padding: 0 10px; /* Add some padding on the sides */
    }
    
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  font-size: 12px; 
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 460px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  font-size: 30px; 
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 90%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  font-size: 30px; 
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  animation: fadeIn 1s;
}


@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}