body {
          //font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          font-family: Arial, sans-serif;
          background-color: #f8f9fa;
          margin: 0;
          padding: 0;
      }

      .container {
          padding: 20px;
      }

      h4 {
			    text-align: center;
			    font-weight: bold;
			    color: #007bff;
			    line-height: 1; /* h4�� ���̸� ��Ʈ���ϱ� ���� line-height �߰� */
			}


  .refresh-icon {
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .refresh-icon:hover {
    transform: rotate(360deg);
  }
			
			.navbar-toggler {
					position: absolute;
			    right: 0;
			    top: 6px;
			    padding: 0.2rem 0.4rem; /* ��ư ���� ������ �е� ���� */
			    font-size: 0.875rem; /* ��ư ���� �ؽ�Ʈ ũ�� ���� */
			}

      .form-control {
          font-size: 20px; /* ��Ʈ ũ�⸦ Ű�� */
          border-radius: 10px; /* �׵θ��� �𼭸��� �� �ձ۰� ���� */
      }

      .input-group-append .btn {
          border-radius: 0 10px 10px 0;
          font-size: 20px; /* ��ư�� ��Ʈ ũ�⸦ Ű�� */
      }
			
      #header {
            margin-bottom: 20px;
            background-color: #fff;
            padding: 20px;
            border-radius: 20px; /* ����� �𼭸��� �� �ձ۰� ���� */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
								
				table {
			    width: 100%;
			    border-collapse: collapse;
			    border: 2px solid #ddd;
			    margin-bottom: 20px;
			  }
			  th, td {
			    padding: 12px;
			    text-align: left;
			    border-bottom: 1px solid #ddd;
			  }
			  th {
			    background-color: #f2f2f2;
			  }
			  td {
			    cursor: pointer;
			    vertical-align: middle; /* Vertically center content */
			  }
			  .bookmark-icon {
			    color: #8383ef;
			    margin-right: 5px;
			  }
			  .bus-number {
			    font-weight: bold;
			  }
			  .clock-icon , .fa-map-marker {
			    display: inline-block;
			    text-align: center;
			    width: 100%;
			  }
			  
			  .table td {
				    vertical-align:middle;
				}
				
			  
      .toggle-button-container {
			    display: flex;
			    justify-content: center; /* Horizontally center aligns the toggle button */
			    align-items: center; /* Vertically center aligns the toggle button */
			    height: 15px; /* Example height for container */
			    margin:15px;
			}
			
      .toggle-button {
          position: absolute;
          z-index: 999;
          background-color: #007bff;
          border-radius: 50%;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .toggle-button button {
          background-color: transparent;
          color: #fff;
          border: none;
          cursor: pointer;
          border-radius: 50%;
          transition: all 0.3s;
      }

      .toggle-button button:hover {
          background-color: rgba(255, 255, 255, 0.3);
      }

      #errMsgContainer {
			    position: relative; /* Make it a positioning context for absolute positioning */
			}
			
			#errMsg {
			    padding: 8px;
			    background-color: #f1f1f1;
			    border-radius: 15px; /* Rounded corners for the error message */
			    font-size: 15px;
			    color: #555;
			    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
			    position: relative; /* Ensure relative positioning for absolute child */
			}
			
			#errMsg i {
			    position: absolute;
			    top: 50%;
			    right: 10px; /* Adjust as needed */
			    transform: translateY(-50%);
			    transition: transform 0.3s ease; /* Apply a transition for smooth rotation */
			}
  
			.navbar-collapse {
	      position: fixed;
	      top: 70px; /* Initially hidden off-screen, but moved down slightly */
	      left: -100%; /* Initially hidden off-screen */
	      width: 200px; /* Adjust width as needed */
	      background-color: #ffffff; /* ���� ���� */
	      border-radius: 10px; /* �𼭸��� �ձ۰� ���� */
	      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* �ε巯�� �׸��� ȿ�� �߰� */
	      padding: 20px;
	      transition: left 0.3s ease; /* �ε巯�� �����̵� �ִϸ��̼� */
	      z-index: 1000; /* �ٸ� ������ ���� ǥ�� */
	    }
	
	    .navbar-collapse.show {
	      left: 0;
	    }
	
	    .navbar-collapse a {
	      display: block;
	      padding: 10px 0;
	      color: #333;
	      text-decoration: none;
	      transition: background-color 0.3s;
	      display: flex; /* �����ܰ� �ؽ�Ʈ�� ���� ���ο� �����ϱ� ���� �߰� */
	      align-items: center; /* ���� �߾� ���� */
	    }
	
	    .navbar-collapse a:hover {
	      background-color: #f8f9fa; /* ���콺�� �÷��� �� ���� ���� */
	    }
	
	    .navbar-collapse a i {
	      margin-right: 10px; /* �����ܰ� �ؽ�Ʈ ���� ���� ���� */
	    }
	    
	 
	/* Layer */
	.dimm {position:fixed; top:0; left:0; right:0; bottom:0; z-index:998; width:100%; height:100%; background-color:#000; opacity:.5;}
	.term {position:fixed; top:16px; left:50%; width:90%; height:auto; margin-left:-45%; margin-top:0px; background-color:#fff; z-index:999;}
	.term .btn_close {overflow:hidden; position:absolute; right:16px; top:16px; width:20px; height:20px; font-size:0; color:transparent; background: url(/images/btn_close.png)50% 50% no-repeat; background-size:80% auto; content:'';}
	.term h5 {font-size:18px; padding:15px 0; background-color:#009999; color:#fff; text-align:center; font-weight:normal; border-bottom: 1px solid #009090;}
	/* Layer_TA��ȣ����Ʈ */
	.tanm_list {width:100%; padding:5px 6px; background-color:#f1f1f1}
	.tanm_list .title{padding:15px 10px;}
	.tanm_list ul {display:inline-block; padding:0px 10px; width:100%; height:300px; overflow-y:scroll; scroll-behavior:smooth;}
	.tanm_list li{border:1px solid #e3e3e3; padding:10px 16px; border-radius:5px; margin-bottom:14px; background-color:#fff;}
	.tanm_list li a{display:inline-block; width:100%; color:#333;}
	.tanm_list dl {}
	.tanm_list dl.tatit{padding-bottom:5px;}
	.tanm_list dl.stext{font-size:12px; color:#999; padding-bottom:2px;}
	.tanm_list dl dt {clear:both; float:left; width:70px;}
	.tanm_list dl dd {margin-left:10px;}
	/* Layer_�۾��̷¸���Ʈ */
	.term_list {width:100%; padding:20px 16px 0 16px; display:inline-block; height:500px; overflow-y:scroll; scroll-behavior:smooth;}
	.term_list li{border:1px solid #e3e3e3; padding:16px 16px; border-radius:5px; margin-bottom:14px; background-color:#fff;}
	.term_list b{display:inline-block; width:100%; padding-bottom:10px; margin-bottom: 10px; border-bottom:1px dashed #ddd;}
	.term_list dl {padding-bottom:5px; font-size:14px;}
	.term_list dl dt {clear:both; float:left; width:70px; color:#999;}
	.term_list dl dd {margin-left:70px;}
	.term_list dl.day{font-size:12px; color:#999; padding-bottom:12px;}
	.term_list dl dd .time{margin-left:5px;}
	/* Layer_�Ϸ�,��һ��� */
	.term_write {width:100%; padding:5px 0; padding:20px 16px 0 16px;}
	.term_write dl {padding-bottom:10px;}
	.term_write dl dt {clear:both; float:left; width:80px; padding-top:11px;}
	.term_write dl dd {position:relative; margin-left:80px;}
	.term_write dl dd a.calendar{position:absolute; top:8px; right:16px; width:25px; height:25px; background:url(/images/btn_calendar.png) 95% 50% no-repeat; background-size:20px auto; -webkitbackground-size:20px auto; font-size:0}