/* Responsive design */
@media only screen and (max-width: 768px) {

    .header {
        width: 95%;
        flex-direction: column;
        align-items: center;
        padding: 5px 10px;
        height: auto;
        justify-content: center;
    }
    .header-image img {
        display: none;
        /*width: 100%;
        height: 400px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 10px;*/
    }
    .header-image {
        background-image: url('../admin/upload/header_mobile.jpg');
    }
    .header-content {
        text-align: left;
        bottom: 10px;
        font-size: 14px;
    }
     
    .profile-container {
      overflow: hidden;
      width: 50%;
      height: 50%;
    }

    .profile-container img {
      border-radius: 50%;
      overflow: hidden;
      width: 40%;
      height: 40%;
    }
    
    #name{
        margin-top: inherit; 
        margin-bottom: 17px; 
        color: white; 
        font-weight: bolder; 
        font-size: 20px; 
        -webkit-text-stroke: 1px black; 
        background-color: transparent; 
    }
    
    
    .social-media i {
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
    	width: 20px;
    	height: 20px;
    	font-size: 20px;
    }
    .social-media a {
        margin: 0 3px;
    }
    .social-media {
    	display: flex;
    	justify-content: space-between;
    	margin: 0 0;
    	position: absolute;
    	top: 18px;
    	right: 10px;
    }
    
    .application-status {
        margin-bottom: 10px;
    }
    .buttons {
        display: flex;
    	justify-content: flex-end;
    	margin: 0;
    	position: relative;
    	bottom: 0;
    	left: 5px;
    }
    .btns {
        width: auto;
        margin-bottom: 0;
        font-size: 5px;
        bottom: 0;
        background-color: #f0f0f0;
      	color: black;
      	padding: 3px 3px;
      	border: none;
      	border-radius: 5px;
      	cursor: pointer;
      	text-align: center;
      	text-decoration: none;
    	transition: background-color 0.3s ease-in-out;
    }
    
    .btns:hover {
      background-color: #f0f0f0;
    }
    
    .btns a {
    	text-decoration: none;
    }
    
    .buttons button {
    	margin-left: 5px;
    	font-size: 9px;
    	color: black;
    	font-weight: bolder;
    }
    
    .header-content h1, h3 {
        font-size: 14px;
    }
    .footer {
        margin: 0 auto;
    }

    .footer p {
        color: red;
        font-size: 10px;
    }
}




@media only screen and (max-width: 768px) {
    /* For pop-up div */
    .pop-up-container {
        width: 90%;
        height: 80%;
    }
    .pop-up-content {
        width: 95%;
    }
    .pop-up-table {
        font-size: 14px;
    }
    /* For The Acknowledgement Form */
    form {
        width: 90%;
        padding: 20px;
    }
    label {
        font-size: 16px;
    }
    input, textarea {
        font-size: 16px;
    }
    input[type="submit"] {
        font-size: 16px;
    }
    p {
        font-size: 16px;
    }
}


@media only screen and (max-width: 768px) {
    .pop-up-table {
        font-size: 14px;
    }
    .table-header {
        padding: 5px;
    }
    .table-row {
        padding: 5px;
    }
    th, td {
        padding: 5px;
    }
    .pagination-box {
        padding: 5px;
    }
    .page-link {
        padding: 3px 5px;
    }
    .search-input {
        width: 70%;
    }
    .search-button {
        padding: 5px;
        font-size: 14px;
    }
    .sorting-link {
        margin: 0 5px;
        padding: 3px 5px;
    }
}


@media only screen and (max-width: 768px) {
  #example {
    overflow-x: auto;
    width: 100%;
  }
  #example table {
    width: 100%;
    min-width: 600px; /* adjust this value to your desired width */
  }
}


/* Mobile view */
@media only screen and (max-width: 768px) {
    .apply-button {
        max-width: 200px;
        height: 40px;
        font-size: 18px;
        padding: 30px;
        text-align: center;
    }
}