html, body {
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01rem;
  color:#000;
  background-color:#fdfdfd;
}
.redcard{
	  color: #C70039;
	  font-size:0.9rem;
}
.yellowcard{
	  color: #FFC300;
	  font-size:0.9rem;
}
.greencard{
	  color: #00ff7f;
	  font-size:0.9rem;
}
 .top_container{
	box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);

}

.logo{
	font-family: 'Pacifico', cursive;
	font-size: 2.5rem;
	background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); 	
       border:0px;
       color: transparent;
       box-sizing:border-box;
    -webkit-background-clip: text;
    - webkit-text-fill-color: transparent;
}
.highlight{
	background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); 	
       border:0px;
       color: transparent;
       box-sizing:border-box;
    -webkit-background-clip: text;
    - webkit-text-fill-color: transparent;
}
.righteous-regular {
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-size:3em;
  font-style: normal;
}
h3{
	padding-top: 0.5em;	
	padding-bottom: 0.5em;	
	font-weight: 600;
	font-size:2em;
	
}
h4{
	padding-top: 0.3em;	
	padding-bottom: 0.3em;	
	font-weight: 600;
	font-size:1.5em;
	
}
h5{
padding-top: 0.2em;	
padding-bottom: 0.2em;	
	font-size:1.2em;
	font-weight: 600;
	
}
p{
	font-weight: 600;
	font-size:0.8em;
	
}
.my_btn{
	color:#fff;
	background: linear-gradient(45deg, #4A9BE8 0%, #AE44F5 75%); 	 
	border:0px;
	font-weight:600;
	font-size:1em;
	min-width:150px;
	cursor: pointer;
    border-radius: 20px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Shadow effect */
}
.my_btn:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24); /* Shadow effect on hover */

}

.toggleSwitch {
  width: 40px;
  height: 20px;
  display: inline-block;
  position: relative;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);
  cursor: pointer;
}

.toggleSwitch .toggleButton {
  width: 13px;
  height: 13px;
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #04D7DE;
}

#toggle:checked ~ .toggleSwitch {
  background: #666;
}

#toggle:checked ~ .toggleSwitch .toggleButton {
  left: calc(100% - 18px);
  background: #fff;
}

.toggleSwitch, .toggleButton {
  transition: all 0.2s ease-in;
}
th{
	font-size:0.8em;
	background: #ddd;
	font-weight:400;
	padding:5px;
}
td{
	font-size:0.8em;
	font-weight:400;
	border:1px solid #ddd;
	text-align:left;
	padding:10px;
}
 ul, li {
  margin: 5px;
  border:0px solid black;
  line-height:1rem;
  padding: 0;
  list-style: none;   	    /* 해당 태그의 list-style을 none으로 하는 것으로 ●을 제거한다 */
	text-align:left;
}

.tree{
  --spacing : 1.5rem;
 --radius  : 10px;

}

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul{
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 0;
}

.tree ul li{
  border-left : 2px solid #ddd;
}

.tree ul li:last-child{
  border-color : transparent;
}

.tree ul li::before{
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid #ddd;
  border-width : 0 0 2px 2px;
}

.tree summary{
  display : block;
  cursor  : pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
}

.tree summary:focus{
  outline : none;
}

.tree summary:focus-visible{
  outline : 1px dotted #000;
}

.tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2* var(--radius));
  border-radius : 50%;
  background    : #ddd;
}

.tree summary::before{
  z-index    : 1;
 background : #aaa url('/cca/img/expand-collapse.svg') 0 0;
}

.tree details[open] > summary::before{
  background-position : calc(-2 * var(--radius)) 0;
}

.centered{
	text-align:center;
}

.action-button {
	color:#000;
	background: #ccc; 	 
	border:0.5px solid #aaa ;
	font-weight:600;
	font-size:0.9em;
	cursor: pointer;
    border-radius: 5px;
	padding:7px;
	min-width:100px;
	margin:1px;
}
.action-button:hover {
	background: #ddd; 	 
}
.ui-autocomplete {
    font-size: 0.7 rem; /* Ensure the font size is consistent */
  font-family: "Work Sans", sans-serif;
}

/* Optionally, you can also style the individual items */
.ui-menu-item {
    padding: 1px; /* Adjust padding if needed */
    font-size: 0.7 rem; /* Ensure the font size is consistent */
  font-family: "Work Sans", sans-serif;
}

/* If you want to style the hover effect */
.ui-menu-item:hover {
    background-color: #f0f0f0; /* Change background on hover */
}