body
{
    font-family: 'Kanit', sans-serif;
    /* background-color: #f1f1f1; */
    font-weight: bold;

}


.marquee-block{
	height: 88dvh;
}
.marquee-wrapper .marquee-block{
  width: 400px;
  height: 1500px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  margin: 20px 0 20px 220px;
  background:#1B2531;
  padding: 30px 0;
  float:left;
}
.marquee-inner{
  display: block;
 /* height: 200%;
  width:400px;*/
  position: absolute;
  margin:20px 0 20px 70px;
}
.marquee-item p{
  font-weight: 800;
  font-size: 30px;
  padding:100px;
  font-family: cursive;
}
.marquee-inner.to-left{
  animation: marqueeTop 15s linear infinite;
}
.marquee-inner.to-right{
  animation: marqueeBottom 25s linear infinite;
}
.marquee-item{
  width: 230px;
  height: 230px;
  display: block;
  margin:10px;
  transition: all .2s ease-out;
  background:#00cc00;
}
@keyframes marqueeTop{
  0% {
    top: 0;
  }
  100% {
    top: -100%;
  }
}
@keyframes marqueeBottom{
  0% { 
    top: -100%; 
  }
  100% {
   top: 0; 
  }
}
.fs-21{
	font-size:22px;
}
.fs-20{
	font-size:120px;
	font-weight:500;
}
.card {
	padding:20px;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
  text-align: left;
  border-radius: 0.5rem;
  max-width: 290px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
 @keyframes vertical-marquee {
   0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-100%);
            }
}

.vertical-marquee-container {
    overflow: hidden;
    height: 100vh; /* Set the height of the marquee container */
}

.vertical-marquee-content {
    animation: vertical-marquee 15s linear infinite; /* Adjust the duration and timing function as needed */
}


.lists-section {
/* background-color: #f8f9fa; */
border-radius: 10px;
padding: 10px;
margin-bottom: 20px;
display: inline-block;
width: 100%; /* Adjusted width calculation */
vertical-align: top;
box-sizing: border-box;
}

.lists-section h2 {
color: white;
padding: 10px;
margin: 0;
border-radius: 50px;
text-align: center;
background-color: #165260;
font-size: 34px;
}

.lists-section ul {
list-style-type: none;
margin-top: 20px;
padding: 0;
/* Display list items in a row */
flex-wrap: wrap; /* Allow items to wrap */
}

.lists-section li {
/* flex: 1; */
 /* Distribute equal width among list items */
/* display: flex; */
align-items: center;
	font-size: 90px;
/* justify-content: center;  */
color: #165260;
padding: 10px;
margin-bottom: 10px;
/*background-color: white;*/
border-radius: 5px;
position: relative;
}

.lists-section li::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: gray;
}



@media (max-width: 767px) {
.lists-section {
width: calc(50% - 10px); /* Adjusted width for mobile devices */
}
}



@media (max-width: 575px) {
.lists-section {
width: 100%; /* Full width for smaller mobile devices */
}
}



@media (max-width: 768px) and (max-height: 1024px),
   (max-width: 820px) and (max-height: 1180px),
   (max-width: 912px) and (max-height: 1368px) {
.lists-section {
width: 100%;
}
}

.lists-section .user-image {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}

.lists-section .badge {
/* background-color: #165260; */
color: white;
padding: 5px;
border-radius: 5px;
margin-right: 15px;
}
.badge img{
	width: 65px;
}
.lists-section .no {

color: #165260;
padding: 5px;
margin-right: 15px;
}

#mypieChart {
        max-width: 200px;
        margin: 0 auto;
    }

    .bg-teal {
background-color: #165260;
}
.nav-pad{
padding: 0.5rem 1rem;
}



.list-unstyled{
    font-size: 37px; /* Adjust the font size as per your requirements */
    font-weight: bold;
    list-style-type: none;
}

.employee-name {
  display: inline-block;
  margin-left: 10px; /* Adjust the margin as per your requirements */
}

.department-color-legend label{
font-size: 28px;
}
.department-color-legend label input{
 padding: 20px;
  }

.department-color-legend {
  display: flex;
  list-style: none !important;
  padding: 3px;
  margin: 0;
  justify-content: space-around;
  /* position: absolute; */
 
}
.erd-section {
  position: relative;
  align-items: center;
}
#popup-box {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
} 
#popup-box.show {
  display: block;
  animation: popup-animation 2s ease-in-out;
}

@keyframes popup-animation {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}