@font-face {
    font-family:"Pyidaungsu";
    src:local('Pyidaungsu'),url('../fonts/Pyidaungsu.ttf') format('truetype');
}
.Pyidaungsu {
    font-family: "Pyidaungsu";
}

@font-face {
    font-family:"MyanmarAngoun";
    src:local('MyanmarAngoun'),url('../fonts/MyanmarAngoun.ttf') format('truetype');
}
.MyanmarAngoun {
    font-family: "MyanmarAngoun";
}
        
@font-face {
    font-family:"MyanmarChatu";
    src:local('MyanmarChatu'),url('../fonts/MyanmarChatu.ttf') format('truetype');
}
.MyanmarChatu {
    font-family: "MyanmarChatu";
}

@font-face {
    font-family:"MyanmarTaungyi";
    src:local('MyanmarTaungyi'),url('../fonts/MyanmarTaungyi.ttf') format('truetype');
}
.MyanmarTaungyi {
    font-family: "MyanmarTaungyi";
}


.custom-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000000;
    border: 5px solid #ced4da;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 10px;
    max-width: 600px;
    width: 100%;
    height: 600px; /* Set a fixed height */
    overflow-y: auto; /* Add overflow-y property to make it scrollable */
}


.custom-alert-title {
   font-size: 20px;
   font-family:"MyanmarTaungyi";
   font-weight: bold;
   margin-bottom: 10px;
   margin-right: 10px;
   /**background-color: #000000;**/
   padding: 20px 20px 20px 20px;
   color: yellow;
   position: relative; /* Add this line */
}

.custom-alert-title::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: #ffffff;
}

.custom-alert-content {
   font-family:"Pyidaungsu";
   margin-bottom: 10px;
   text-align: justify;
   color: white;
   padding: 30px 20px 20px 20px;
}
.custom-alert-content span {
   font-family:"Pyidaungsu";
   color: yellow;
}

.custom-alert-close {
   font-family:"MyanmarChatu";
   position: absolute;
   top: 5px;
   right: 5px;
   font-size: 30px;
   font-weight: bold;
   color: yellow;
   cursor: pointer;
}
/* Add this to your CSS */
table td {
     position: relative;
     padding-bottom: 40px;
     padding-left: 10px;  /* Adding padding to left */
     padding-right: 10px; /* Adding padding to right */
     text-align: center;  /* Ensure contents are centrally aligned */
}

#cellBtn {
     position: absolute;
     bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
     width: calc(100% - 20px); /* Take the full width minus 20 pixels (10px padding on each side) */
     box-sizing: border-box; /* This ensures padding and border are included in the total width and height */
}
/*-------------------------------------------------------------------------------------------------------------*/
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
	height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 60%; 
    font-size: 17px;
	overflow: hidden; /* Hide overflowing content */
}

.modal-content h4 {
    display: flex;
    align-items: center;
    gap: 10px; /* space between icon and text */
}

.modal-content i.fas {
    color: #f00; /* red color for the warning icon */
    font-size: 25px; /* adjust size if needed */
}


.close {
    color: #aaaaaa;
    position: absolute;  /* Absolute positioning */
    top: 10px;           /* 10px from the top */
    right: 10px;         /* 10px from the right */
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    background-color: transparent;
    border: none;
	float: right;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}
#alertMessageContainer {
    max-height: 100%; /* You can adjust this value as needed */
}

/*-------------------------------custom scoll bar style--------------------------------------------------------------*/
/* Define custom scrollbar width and color variables */
:root {
  --scrollbar-width: 10px;
  --scrollbar-color: #0073e6;
}

/* Style the scrollbar track */
.custom-alert::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

/* Style the scrollbar thumb (knob) */
.custom-alert::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: calc(var(--scrollbar-width) / 2); /* Make it round */
}

/* Style the scrollbar track on hover */
.custom-alert::-webkit-scrollbar-track:hover {
  background-color: #ccc;
}

/* Style the scrollbar thumb (knob) on hover */
.custom-alert::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}


/*-------------------------------custom scoll bar style--------------------------------------------------------------*/
/* Define a CSS variable with the path to your image */
/*
:root {
  --scrollbar-thumb-image: url('path-to-your-image.png');
}

.custom-alert::-webkit-scrollbar {
  width: 10px;
}

.custom-alert::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-image);
  background-size: cover;
  width: 20px; 
  height: 20px; 
}
*/
/*-------------------------------custom scoll bar style--------------------------------------------------------------*/

/* Shorter CSS for customizing scrollbar with a picture as the knob */
/*
:root {
  --scrollbar-thumb-image: url('path-to-your-image.png');
}

.custom-alert::-webkit-scrollbar {
  width: 10px;
}

.custom-alert::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-image);
  background-size: cover; 
}


.custom-alert::-webkit-scrollbar-track:hover {
  background-color: #ccc;
}
*/