@import url(//devizzer.github.io/fonts/ko/notosanskr/font.css);
body {margin: 0; line-height: 150%; font-family: 'Noto Sans KR',sans-serif;}
h1,h2,h3,h4,h5,h6 {margin: 0;}
ul, ol {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}
.limit {overflow: hidden; width: 1680px;}
.header-logo {padding: 20px 0;}

.screen-info {width: 1680px;margin: 20px 0 10px;text-align: center;font-size: 14px;}
.screen-info li {display:inline-block; margin:0 20px}

.btn_state {padding: 3px 8px;border: 1px solid gray;border-radius: 3px;font-weight:bold;font-size:14px}

@keyframes blink-effect { 50% { opacity: 0; } }
.blink {animation: blink-effect 2s step-end infinite;}
.color-red {color:red}
.color-green {color:green}
.color-black {color:black}
.color-blue {color:blue}
.color-purple {color:purple}
.color-brown {color:brown}

.hover-pointer,
.hand-pointer {
    cursor: pointer;
}

.ui-button {text-align: right;}
.ui-button a {display: inline-block; background: #eee; font-size: 12px; color: #aaa; padding: 10px 20px; border-radius: 5px;}
/* index */
.section-index {margin-top: 50px;}
.section-index__title {padding: 5px 0;font-size: 18px;}



/* form */
.form-unit--ib {display: inline-block; margin-right: 20px;}
.work-order {margin-top: 20px; padding: 10px; border: 1px solid #000;}
.work-gubun {border-bottom: 1px solid #000;}


.component {padding: 10px;border: 1px solid #eee;}

.nav-group {overflow: hidden;}
.nav-item {float: left; margin-right: 15px;}

.main__title {padding: 30px 0;}
.sort {padding: 20px; border: 1px solid #eee; box-sizing: border-box;}
.sort__item {display: inline-block; margin-right: 20px;}

.pagenation {padding: 30px 0;text-align: center;}
.pagenation__arrow {display: inline-block;}
.pagenation__group {display: inline-block; margin: 0 30px;}
.pagenation__item {display: inline-block; margin: 0 10px;}



.footer {padding: 50px 0;}
@media screen and (max-width: 1279px) {}
@media screen and (min-width: 1280px) {}

h1,h2,h3,h4,h5,h6 {margin: 0;}
ul, ol {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}
a {color: gray;}

.inputWrap {
    position: relative;
    height: 30px;
    display: inline-block;
 }
  
.inputWrap input {
  padding-right: 30px;
  height: inherit;
}

.inputWrap .btnClear {
  position: absolute;  
  top: 0;
  right: 10px;
  width: 30px;
  height: inherit;
  background: url(https://img.icons8.com/pastel-glyph/2x/cancel.png) center center no-repeat;
  background-size: 50%;
  border: none;
  outline: none;
  cursor: pointer;
}

table th, 
table td,
.form-control
 {
	font-size: 13px; /* 원하는 폰트 크기로 설정 */
	padding : 2px;
    font-family: 'Noto Sans KR', sans-serif;  
}
table td {
   cursor: pointer;
   font-family: 'Noto Sans KR', sans-serif;
}

body {
	font-size: 13px; /* 원하는 폰트 크기로 설정 */	    
    font-family: 'Noto Sans KR', sans-serif;
	padding : 5px;
}


 /* 30 높이에 맞게 */
.inputWrap30 {
    position: relative;
    height: 30px;
    display: inline-block;
 }


.inputWrap30 input {
  padding-right: 20px;
  height: inherit;
}

.inputWrap30 .btnClear {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: inherit;
  background: url(https://img.icons8.com/pastel-glyph/2x/cancel.png) center center no-repeat;
  background-size: 50%;
  border: none;
  outline: none;
  cursor: pointer;
}

#showdate {
	display: inline-block;
	position: relative;
}
		
#showframe {
	display: none;
	position: absolute;
	width: 200px;
	z-index: 1000;
}
	
.w-10 {
    width: 10% !important;
}	
.w-15 {
    width: 15% !important;
}	
.w-20 {
    width: 20% !important;
}	

.modal .modal-full {
    max-width: 100%;
    max-height: 95vh; /* 모달 창의 최대 높이를 화면 높이의 90%로 설정합니다. */
    height: 900px; /* 모달 창의 최소 높이를 설정합니다. */
    overflow-y: auto; /* 세로 스크롤바가 필요한 경우 스크롤이 가능하도록 합니다. */
}

.modal .modal-fullsm {
    max-width: 75%;
    max-height: 90vh; /* 모달 창의 최대 높이를 화면 높이의 90%로 설정합니다. */
    height: 700px; /* 모달 창의 최소 높이를 설정합니다. */
    overflow-y: auto; /* 세로 스크롤바가 필요한 경우 스크롤이 가능하도록 합니다. */
}

 ::placeholder {
    font-style: italic;
    color: #b0c4de!important; /* Very light blue color */
  }


#myTable td, #myTable th {
    border-color: lightgray;
}

#loadingIndicator {
    position: fixed; /* 화면에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #28a745; /* Green */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 제이쿼리 UI 색상 변경 모든 정렬 버튼에 대한 스타일 */
table.dataTable thead .sorting {
    color: black; /* 기본 정렬 버튼 색상 */
    cursor: pointer;
}

/* 오름차순 정렬 버튼 스타일 */
table.dataTable thead .sorting_asc {
    color: red; /* 오름차순 정렬시 색상 */
}

/* 내림차순 정렬 버튼 스타일 */
table.dataTable thead .sorting_desc {
    color: blue; /* 내림차순 정렬시 색상 */
}

/* 오름차순 정렬 버튼의 삼각형 색상 변경 */
table.dataTable thead .sorting_asc::after {
    color: red; /* 색상 변경 */
    border-bottom-color: red; /* 하향 삼각형의 경우 */
}

/* 내림차순 정렬 버튼의 삼각형 색상 변경 */
table.dataTable thead .sorting_desc::after {
    color: blue; /* 색상 변경 */
    border-top-color: blue; /* 상향 삼각형의 경우 */
}
/* 초기 정렬 상태의 화살표 색상 변경 */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting::before {
    color: red !important;  /* 원하는 색상으로 변경 */
    border-color: black !important; /* 화살표 색상 변경 */
}

/* 초기 정렬 상태의 화살표 배경 이미지 색상 변경 */
table.dataTable thead .sorting {
    background-image: url('/img/arrowdown.png'); /* 화살표 이미지 경로를 커스텀 이미지로 변경 */
    background-repeat: no-repeat;
    background-position: center right;
}

input[readonly], textarea[readonly] {
    background-color: #e0e0e0; /* 옅은 회색으로 배경 설정 */
}

td, th, tr {
    vertical-align: middle;
    /* border: 1px solid rgba(0, 0, 0, 0.3); */ /* 50% 투명도의 검정색 테두리 */
}

select.form-control {
  border: 2px solid lightblue; /* 옅은 파란색 lightblue 테두리 */
  padding: 0.375rem 0.75rem;   /* 패딩 값 조정 (부트스트랩 기본값) */
  font-size: 0.75rem;             /* 글꼴 크기 설정 */
  line-height: 1;            /* 행 간격 설정 */
  color: #495057;              /* 텍스트 색상 */
  background-color: #fff;      /* 배경 색상 */
  background-clip: padding-box;/* 배경 클립 설정 */
  border-radius: 0.25rem;      /* 테두리 반경 설정 */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* 전환 효과 */
}

/* 포커스 시 테두리와 그림자 설정 */
select.form-control:focus {
  border-color: #80bdff;       /* 포커스 시 파란색 테두리 */
  outline: 0;                  /* 기본 포커스 스타일 제거 */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 포커스 시 그림자 */
}

/* 알람창 중심에 위치 */
.toastify-center {
    top: 50% !important;  			/* 화면의 수직 중심으로 이동 */
    transform: translateY(-50%);   /* 토스트의 높이의 절반을 올라가게 하여 완벽히 중앙에 위치하도록 함 */
}

/* Remove the default caret */
.nav-item .dropdown-toggle::after {
    display: none;
}

/* Change the font size and color on hover */
.nav-item .dropdown-toggle:hover,
.nav-item .dropdown-toggle:focus {
    color: #fff; /* 원하는 반전 색상 */
    background-color: #007bff; /* 원하는 배경색 */
    font-size: 1.3em; /* 원하는 폰트 크기 */
    transition: all 0.3s ease;
}


/* Dropdown menu styling */
.dropdown-menu {
    background-color: rgb(0, 0, 120); /* 진한 파란색 배경색 */
    border: 1px solid #e0e0e0; /* 기본 테두리 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

/* Dropdown items styling */
.dropdown-item {
    font-size: 1.2em; /* 기본 폰트 크기 */
    color: #ffffff; /* 기본 글자 색상 */
    transition: all 0.3s ease;
}

/* Dropdown items hover effect */
.dropdown-item:hover,
.dropdown-item:focus {
    color: #000000; /* 반전 글자 색상 */
    background-color: #d3d3d3; /* 반전 배경색 */
    font-size: 1.2em; /* 폰트 크기 증가 */
    transform: scale(1.03); /* 크기 확대 효과 */
}

/* Adding a more vibrant hover effect */
.dropdown-item:hover ion-icon,
.dropdown-item:focus ion-icon {
    color: #007bff; /* 아이콘 색상 변경 */
    transform: rotate(360deg); /* 회전 효과 */
    transition: transform 0.5s ease;
}

/* Add some padding and margin to the dropdown items */
.dropdown-item-home {
    padding: 8px 10px;
    margin: 5px 0;
}

/* Dropdown items styling */
.dropdown-item-home {
    font-size: 0.8em; /* 기본 폰트 크기 */
    color: #ffffff; /* 기본 글자 색상 */
    transition: all 0.3s ease;
}

/* Dropdown items hover effect */
.dropdown-item-home:hover,
.dropdown-item-home:focus {
    color: #000000; /* 반전 글자 색상 */
    background-color: #d3d3d3; /* 반전 배경색 */
    font-size: 1em; /* 폰트 크기 증가 */
    transform: scale(1.03); /* 크기 확대 효과 */
}

/* Adding a more vibrant hover effect */
.dropdown-item-home:hover ion-icon,
.dropdown-item-home:focus ion-icon {
    color: #007bff; /* 아이콘 색상 변경 */
    transform: rotate(360deg); /* 회전 효과 */
    transition: transform 0.5s ease;
}

/* Add some padding and margin to the dropdown items */
.dropdown-item-home {
    padding: 8px 10px;
    margin: 5px 0;
}


/* todolist 용 */
.red-day {
	color: red !important;
}
.today {
	background-color: red !important;
}

#calendar-container {
	display: flex;
	justify-content: center;
}

#new-todo {
	width: 100%;
}

.todolistclass:hover {
	background-color: #f1f1f1;
	cursor: pointer;
}

 #openModalBtn {
        padding: 10px 20px;
        font-size: 16px;
    }

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Changed from 'auto' to 'hidden' to prevent closing on outside click */
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 80px;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    border-radius: 10px;
    width: 80%;
    max-width: 1200px;
    animation: fadeIn 0.5s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}


    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .modal-header {
        background-color: #1f48d4;
        color: white;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-title {
        font-size: 18px;
    }

    .close {
        color: white;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }
    .todo-close {
        color: white;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
    }

    .modal-body {
        padding: 15px;
    }
	
	.custom-card {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}


.tooltip-inner {
    background-color: black !important; /* 배경색 */
    color: white !important; /* 글자색 */
}
.tooltip-arrow {
    color: black !important; /* 화살표 색상 */
} 

/* 입력창에 대한 설계 */
.ui-autocomplete {
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
}

.specialinputWrap {
	position: relative;
	display: inline-block;
	width:100%;
}

.specialbtnClear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: black;
	cursor: pointer;
}

.specialbtnClear:before {
	content: 'X';
	font-size: 12px;
}

.specialbtnClear:hover {
	color: black;
}

.btnClear_lot {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: black;
	cursor: pointer;
}

.btnClear_lot:before {
	content: 'X';
	font-size: 12px;
}

.btnClear_lot:hover {
	color: black;
}

/* 모달창 뒷배경이 침범하지 못하게 설정 */
.modal-backdrop {
	z-index: 0;
}

/* 오늘일때 배경을 주는 것 */
.today-bg {
    /*background-color: #AFFFEE !important;*/	   
    border: 3px solid #000080 !important; /* 진한 파란색 */
}

@media print {
    #Head {display:none;}
    div.manage{display:none;}
    div.bottom{display:none;}
    div.segmental{margin-top:0px;}
    div.composition{margin-top:0px;}
}

@media print{@page {size: portrait}}

@page {
    size: portrait;
    page-break-after: always; 
    counter-increment: page;

    @top-center {
        content: "Headline, yo!"
    }

    @bottom-right {
        counter-increment: page;
        content: "Page " counter(page);
    }
}

	.table, td, input {
      font-size: 13px !important;
	  vertical-align: middle;
	    padding: 2px; 
	    border-spacing: 2px; 
		text-align:center;
    }
	
  .table td input.form-control, textarea.form-control  {
    height: 20px;
    border: 1px solid #392f31; /* 테두리 스타일 추가 */
    border-radius: 4px; /* 테두리 라운드 처리 */
  }	
  
input[type="checkbox"] {
    transform: scale(1.6); /* 크기를 1.5배로 확대 */
    margin-right: 10px;   /* 확대 후의 여백 조정 */
}

table tr td {
    vertical-align: middle;
}


@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/*
#movingText {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
}
*/

/* Light mode styles */
body {
  background-color: #ffffff;
  color: #000000;
}

/* Dark mode styles */
[data-theme="dark"] {
  background-color: #000000;
  color: #ffffff;
}

/* Toggle switch styles */
.toggle-switch {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 34px;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.toggle-slider:before {
	  position: absolute;
	  content: "";
	  height: 26px;
	  width: 26px;
	  left: 4px;
	  bottom: 4px;
	  background-color: white;
	  transition: .4s;
	  border-radius: 50%;
}

input[type="checkbox"]:checked + .toggle-slider {
  background-color: #2196F3;
}

input[type="checkbox"]:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.hidden-field {
	display: none; /* 체크박스 체크 시 숨겨진 필드를 숨김 */
}
.part-field {
	display: none; /* 체크박스 체크 시 숨겨진 필드를 숨김 */
}
  
/* 기본적으로 숨김 처리 */

#movingTextContainer {
	cursor: pointer;
}

#autocomplete-list {
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	position: absolute;
	top: 93%;
	left: 59%;
	right: 30%;
	width : 10%;
	z-index: 999;
}
.autocomplete-item {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}
.autocomplete-item:hover {
	background-color: #e9e9e9;
}

.custom-tooltip {
    display: none;
    position: absolute;
    border: 1px solid #ddd;
    background-color: blue;
	color:white;
	font-size:25px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    top : 100;
}

/* 툴팁 위치 조정 */
#denkriModel:hover + .custom-tooltip {
    display: block;
    left: 70%; /* 화면 가로축의 중앙에 위치 */
    top: 90px; /* Y축은 절대 좌표에 따라 설정 */
    transform: translateX(-50%); /* 자신의 너비의 반만큼 왼쪽으로 이동 */
}
	
#showalign {
	display: inline-block;
	position: relative;
}
		
#showalignframe {
	display: none;
	position: absolute;
	width: 400px;
	z-index: 1000;
    left: 50%; /* 화면 가로축의 중앙에 위치 */    
    transform: translateX(-40%); /* 자신의 너비의 반만큼 왼쪽으로 이동 */		
}
	
#showextract {
	display: inline-block;
	position: relative;
}
		
#showextractframe {
	display: none;
	position: absolute;
	width: 20%;
	z-index: 1000;
    left: 50%; /* 화면 가로축의 중앙에 위치 */    
    transform: translateX(-40%); /* 자신의 너비의 반만큼 왼쪽으로 이동 */		
}		
#showstatus {
	display: inline-block;
	position: relative;
}
		
#showstatusframe {
	display: none;
	position: absolute;
	width: 40%;
	z-index: 1000;
    left: 50%; /* 화면 가로축의 중앙에 위치 */    
    transform: translateX(-40%); /* 자신의 너비의 반만큼 왼쪽으로 이동 */		
}	
	

th, td {
    vertical-align: middle !important;
}

/* 토스트 컨테이너의 너비와 높이를 늘리는 예시 */
@media (max-width: 534px) { /* 부트스트랩의 기본 모바일 장치 너비 */
    .toast {
        width: 500px; /* 원하는 너비 */
        height: 300px; /* 원하는 높이 */
    }
}

.tooltip-inner {
    background-color: black !important; /* 배경색 */
    color: white !important; /* 글자색 */
}
.tooltip-arrow {
    color: black !important; /* 화살표 색상 */
} 

/* 입력창에 대한 설계 */
.ui-autocomplete {
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

.specialinputWrap {
	position: relative;
	display: inline-block;
	width:100%;
}

.specialbtnClear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: black;
	cursor: pointer;
}

.specialbtnClear:before {
	content: '✖';
	font-size: 12px;
}

.specialbtnClear:hover {
	color: black;
}

.w5px {  
  width: 5px;
}
.w10px {  
  width: 10px;
}
.w15px {  
  width: 15px;
}
.w20px {  
  width: 20px;
}
.w25px {  
  width: 25px;
}
.w30px {  
  width: 30px;
}
.w35px {  
  width: 35px;
}
.w40px {  
  width: 40px;
}
.w45px {  
  width: 45px;
}
.w50px {  
  width: 50px;
}
.w55px {  
  width: 55px;
}
.w60px {  
  width: 60px;
}
.w65px {  
  width: 65px;
}
.w60px {  
  width: 70px;
}
.w65px {  
  width: 65px;
}
.w70px {  
  width: 70px;
}
.w75px {  
  width: 75px;
}
.w80px {  
  width: 80px;
}
.w85px {  
  width: 85px;
}
.w90px {  
  width: 90px;
}
.w95px {  
  width: 95px;
}
.w100px {  
  width: 100px;
}
.w110px {  
  width: 110px;
}
.w120px {  
  width: 120px;
}
.w130px {  
  width: 130px;
}
.w140px {  
  width: 140px;
}
.w150px {  
  width: 150px;
}
.w160px {  
  width: 160px;
}
.w170px {  
  width: 170px;
}
.w180px {  
  width: 180px;
}
.w190px {  
  width: 190px;
}
.w200px {  
  width: 200px;
}
.w220px {  
  width: 220px;
}
.w240px {  
  width: 240px;
}
.w260px {  
  width: 260px;
}
.w280px {  
  width: 280px;
}
.w300px {  
  width: 300px;
}
.w320px {  
  width: 320px;
}
.w340px {  
  width: 340px;
}
.w360px {  
  width: 360px;
}
.w380px {  
  width: 380px;
}
.w400px {  
  width: 400px;
}


.cursor-pointer {
	cursor:pointer;
}


/* 밝은 회색 배경을 가지는 th, td 요소에 적용할 클래스 */
.lightgray {
    background-color: #d3d3d3 !important; /* 기존 lightgray보다 밝은 회색 */
    color: black !important;
    font-weight: bold !important;	
}

/* 더 밝은 회색 배경을 가지는 th, td 요소에 적용할 클래스 */
.morelightgray {
    background-color: #e8e8e8 !important; /* 기존보다 더 밝은 회색 */
    color: black !important;
    font-weight: bold !important;	
}


/* 연한 노란색 배경에 검정색 굵은 글씨 */
.yellowBold {
    background-color: #ffffe0 !important; /* 연한 노란색 (light yellow) */
    color: black !important;
    font-weight: bold !important;
}
/* 연한 노란색 배경에 붉은색 굵은 글씨 */
.yellowredBold {
    background-color: #ffffe0 !important; /* 연한 노란색 (light yellow) */
    color: red !important;
    font-weight: bold !important;
}
/* 연한 파란색 배경에 적색 글씨 */
.blueBold {
    background-color: hsl(160, 5%, 85%) !important; /* 연한 파란색 */
    color: red !important;
    font-weight: bold !important;
}

/* 연한 파란색 배경에 검정색 글씨 */
.blueBlackBold {
    background-color: hsl(220, 60%, 90%) !important; /* 연한 파란색 */
    color: black !important;
    font-weight: bold !important;
}
/* 연한 파란색 배경에 붉은 글씨 */
.blueRedBold {
    background-color: hsl(220, 60%, 90%) !important; /* 연한 파란색 */
    color: red !important;
    font-weight: bold !important;
}

/* 연한 주황색 배경에 붉은색 글씨 */
.orangeBold {
    background-color: hsl(30, 100%, 85%) !important; /* 연한 주황색 */
    color: red !important;
    font-weight: bold !important;
}

/* 연한 주황색 배경에 검정 글씨 */
.orangeBlackBold {
    background-color: hsl(30, 100%, 85%) !important; /* 연한 주황색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 주황색 배경에 파랑 글씨 */
.orangeBlueBold {
    background-color: hsl(30, 100%, 85%) !important; /* 연한 주황색 */
    color: blue !important;
    font-weight: bold !important;
}

/* 연한 노란색 배경에 검정 굵은 글씨 */
.yellowblackBold {
    background-color: #ffffe0 !important; /* 연한 노란색 (light yellow) */
    color: black !important;
    font-weight: bold !important;
}
/* 연한 노란색 배경에 적색 굵은 글씨 */
.yellowredBold {
    background-color: #ffffe0 !important; /* 연한 노란색 (light yellow) */
    color: red !important;
    font-weight: bold !important;
}

/* 연한 녹색 배경에 붉은색 글씨 */
.greenredBold {
    background-color: #90ee90 !important; /* 연한 녹색 (light green) */
    color: red !important;
    font-weight: bold !important;
}
/* 더 연한 녹색 배경에 검정 글씨 */
.greenblackBold {
    background-color: hsl(120, 73%, 92%) !important; /* 기존보다 50% 더 연한 녹색 */
    color: black !important;
    font-weight: bold !important;
}

/* 더 연한 보라색 배경에 검정 글씨 */
.purpleblackBold {
    background-color: hsl(270, 100%, 95%) !important; /* 연한 보라색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 핑크색 배경에 검정색 글씨 */
.pinkblackBold {
    background-color: #ffe4e1 !important; /* 연한 핑크색 (light pink) */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 핑크색 배경에 붉은색 글씨 */
.pinkredBold {
    background-color: #ffe4e1 !important; /* 연한 핑크색 (light pink) */
    color: red !important;
    font-weight: bold !important;
}

/* 밝은 자홍색 배경에 검정 글씨 */
.magentaBlackBold {
    background-color: hsl(300, 50%, 90%) !important; /* 밝은 자홍색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 갈색 배경에 검정 글씨 */
.brownblackBold {
    background-color: hsl(30, 38%, 85%) !important; /* 연한 갈색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 갈색 배경에 붉은 글씨 */
.brownredBold {
    background-color: hsl(30, 38%, 85%) !important; /* 연한 갈색 */
    color: red !important;
    font-weight: bold !important;
}

/* 연한 청록색 배경에 검정 글씨 */
.cyanBlackBold {
    background-color: hsl(180, 60%, 90%) !important; /* 연한 청록색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 청록색 배경에 파랑 글씨 */
.cyanBlueBold {
    background-color: hsl(180, 60%, 90%) !important; /* 연한 청록색 */
    color: blue !important;
    font-weight: bold !important;
}

/* 연한 라임색 배경에 검정 글씨 */
.limeblackBold {
    background-color: #f0fff0 !important; /* 연한 라임색 (light lime) */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 라임색 배경에 초록 글씨 */
.limegreenBold {
    background-color: #f0fff0 !important; /* 연한 라임색 (light lime) */
    color: green !important;
    font-weight: bold !important;
}

/* 연한 금색 배경에 검정 글씨 */
.goldblackBold {
    background-color: hsl(50, 80%, 85%) !important; /* 연한 금색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 금색 배경에 빨강 글씨 */
.goldredBold {
    background-color: hsl(50, 80%, 85%) !important; /* 연한 금색 */
    color: red !important;
    font-weight: bold !important;
}

/* 연한 은색 배경에 검정 글씨 */
.silverblackBold {
    background-color: hsl(0, 0%, 92%) !important; /* 연한 은색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 보라핑크 배경에 검정 글씨 */
.purplepinkBlackBold {
    background-color: hsl(300, 40%, 90%) !important; /* 연한 보라핑크 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 파스텔 핑크 배경에 검정 글씨 */
.pastelpinkBlackBold {
    background-color: #ffdab9 !important; /* 연한 파스텔 핑크 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 올리브색 배경에 검정 글씨 */
.oliveblackBold {
    background-color: hsl(60, 30%, 85%) !important; /* 연한 올리브색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 베이지색 배경에 검정 글씨 */
.beigeblackBold {
    background-color: #f5f5dc !important; /* 연한 베이지색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 민트색 배경에 검정 글씨 */
.mintblackBold {
    background-color: #e0fff0 !important; /* 연한 민트색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 민트색 배경에 초록 글씨 */
.mintgreenBold {
    background-color: #e0fff0 !important; /* 연한 민트색 */
    color: green !important;
    font-weight: bold !important;
}

/* 연한 살구색 배경에 검정 글씨 */
.apricotblackBold {
    background-color: #ffebcd !important; /* 연한 살구색 */
    color: black !important;
    font-weight: bold !important;
}

/* 연한 살구색 배경에 주황 글씨 */
.apricotorangeBold {
    background-color: #ffebcd !important; /* 연한 살구색 */
    color: orange !important;
    font-weight: bold !important;
}

.noborder-input,
.noborderinput {
    border: none !important;
    flex: 1; /* 부모 높이와 너비를 채움 */
    height: 100%; /* 부모 높이를 채움 */    
    background-color: transparent;
    width: 100%;
    padding: 0;
    text-align: left; 
    box-sizing: border-box; /* 패딩 포함한 전체 너비 맞추기 */
}


.w5px {  
  width: 5px!important;
}
.w10px {  
  width: 10px!important;
}
.w15px {  
  width: 15px!important;
}
.w20px {  
  width: 20px!important;
}
.w25px {  
  width: 25px!important;
}
.w30px {  
  width: 30px!important;
}
.w35px {  
  width: 35px!important;
}
.w40px {  
  width: 40px!important;
}
.w45px {  
  width: 45px!important;
}
.w50px {  
  width: 50px!important;
}
.w55px {  
  width: 55px!important;
}
.w60px {  
  width: 60px!important;
}
.w65px {  
  width: 65px!important;
}
.w70px {  
  width: 70px!important;
}
.w75px {  
  width: 75px!important;
}
.w80px {  
  width: 80px!important;
}
.w85px {  
  width: 85px!important;
}
.w90px {  
  width: 90px!important;
}
.w95px {  
  width: 95px!important;
}
.w100px {  
  width: 100px!important;
}
.w105px {  
  width: 105px!important;
}
.w110px {  
  width: 110px!important;
}
.w115px {  
  width: 115px!important;
}
.w120px {  
  width: 120px!important;
}
.w125px {  
  width: 125px!important;
}
.w130px {  
  width: 130px!important;
}
.w135px {  
  width: 135px!important;
}
.w140px {  
  width: 140px!important;
}
.w145px {  
  width: 145px!important;
}
.w150px {  
  width: 150px!important;
}
.w155px {  
  width: 155px!important;
}
.w160px {  
  width: 160px!important;
}
.w165px {  
  width: 165px!important;
}
.w170px {  
  width: 170px!important;
}
.w175px {  
  width: 175px!important;
}
.w180px {  
  width: 180px!important;
}
.w185px {  
  width: 185px!important;
}
.w190px {  
  width: 190px!important;
}
.w195px {  
  width: 195px!important;
}
.w200px {  
  width: 200px!important;
}
.w205px {  
  width: 205px!important;
}
.w210px {  
  width: 210px!important;
}
.w215px {  
  width: 215px!important;
}
.w220px {  
  width: 220px!important;
}
.w225px {  
  width: 225px!important;
}
.w230px {  
  width: 230px!important;
}
.w235px {  
  width: 235px!important;
}
.w240px {  
  width: 240px!important;
}
.w245px {  
  width: 245px!important;
}
.w250px {  
  width: 250px!important;
}
.w255px {  
  width: 255px!important;
}
.w260px {  
  width: 260px!important;
}
.w265px {  
  width: 265px!important;
}
.w270px {  
  width: 270px!important;
}
.w275px {  
  width: 275px!important;
}
.w280px {  
  width: 280px!important;
}
.w285px {  
  width: 285px!important;
}
.w290px {  
  width: 290px!important;
}
.w295px {  
  width: 295px!important;
}
.w300px {  
  width: 300px!important;
}
.w305px {  
  width: 305px!important;
}
.w310px {  
  width: 310px!important;
}
.w315px {  
  width: 315px!important;
}
.w320px {  
  width: 320px!important;
}
.w325px {  
  width: 325px!important;
}
.w330px {  
  width: 330px!important;
}
.w335px {  
  width: 335px!important;
}
.w340px {  
  width: 340px!important;
}
.w345px {  
  width: 345px!important;
}
.w350px {  
  width: 350px!important;
}
.w355px {  
  width: 355px!important;
}
.w360px {  
  width: 360px!important;
}
.w365px {  
  width: 365px!important;
}
.w370px {  
  width: 370px!important;
}
.w375px {  
  width: 375px!important;
}
.w380px {  
  width: 380px!important;
}
.w385px {  
  width: 385px!important;
}
.w390px {  
  width: 390px!important;
}
.w395px {  
  width: 395px!important;
}
.w400px {  
  width: 400px!important;
}
.w405px {  
  width: 405px!important;
}
.w410px {  
  width: 410px!important;
}
.w415px {  
  width: 415px!important;
}
.w420px {  
  width: 420px!important;
}
.w425px {  
  width: 425px!important;
}
.w430px {  
  width: 430px!important;
}
.w435px {  
  width: 435px!important;
}
.w440px {  
  width: 440px!important;
}
.w445px {  
  width: 445px!important;
}
.w450px {  
  width: 450px!important;
}
.w455px {  
  width: 455px!important;
}
.w460px {  
  width: 460px!important;
}
.w465px {  
  width: 465px!important;
}
.w470px {  
  width: 470px!important;
}
.w475px {  
  width: 475px!important;
}
.w480px {  
  width: 480px!important;
}
.w485px {  
  width: 485px!important;
}
.w490px {  
  width: 490px!important;
}
.w495px {  
  width: 495px!important;
}
.w500px {  
  width: 500px!important;
}
.w505px {  
  width: 505px!important;
}
.w510px {  
  width: 510px!important;
}
.w515px {  
  width: 515px!important;
}
.w520px {  
  width: 520px!important;
}
.w525px {  
  width: 525px!important;
}
.w530px {  
  width: 530px!important;
}
.w535px {  
  width: 535px!important;
}
.w540px {  
  width: 540px!important;
}
.w545px {  
  width: 545px!important;
}
.w550px {  
  width: 550px!important;
}
.w555px {  
  width: 555px!important;
}
.w560px {  
  width: 560px!important;
}
.w565px {  
  width: 565px!important;
}
.w570px {  
  width: 570px!important;
}
.w575px {  
  width: 575px!important;
}
.w580px {  
  width: 580px!important;
}
.w585px {  
  width: 585px!important;
}
.w590px {  
  width: 590px!important;
}
.w595px {  
  width: 595px!important;
}
.w600px {  
  width: 600px!important;
}
.w605px {  
  width: 605px!important;
}
.w610px {  
  width: 610px!important;
}
.w615px {  
  width: 615px!important;
}
.w620px {  
  width: 620px!important;
}
.w625px {  
  width: 625px!important;
}
.w630px {  
  width: 630px!important;
}
.w635px {  
  width: 635px!important;
}
.w640px {  
  width: 640px!important;
}
.w645px {  
  width: 645px!important;
}
.w650px {  
  width: 650px!important;
}
.w655px {  
  width: 655px!important;
}
.w660px {  
  width: 660px!important;
}
.w665px {  
  width: 665px!important;
}
.w670px {  
  width: 670px!important;
}
.w675px {  
  width: 675px!important;
}
.w680px {  
  width: 680px!important;
}
.w685px {  
  width: 685px!important;
}
.w690px {  
  width: 690px!important;
}
.w695px {  
  width: 695px!important;
}
.w700px {  
  width: 700px!important;
}
.w705px {  
  width: 705px!important;
}
.w710px {  
  width: 710px!important;
}
.w715px {  
  width: 715px!important;
}
.w720px {  
  width: 720px!important;
}
.w725px {  
  width: 725px!important;
}
.w730px {  
  width: 730px!important;
}
.w735px {  
  width: 735px!important;
}
.w740px {  
  width: 740px!important;
}
.w745px {  
  width: 745px!important;
}
.w750px {  
  width: 750px!important;
}
.w755px {  
  width: 755px!important;
}
.w760px {  
  width: 760px!important;
}
.w765px {  
  width: 765px!important;
}
.w770px {  
  width: 770px!important;
}
.w775px {  
  width: 775px!important;
}
.w780px {  
  width: 780px!important;
}
.w785px {  
  width: 785px!important;
}
.w790px {  
  width: 790px!important;
}
.w795px {  
  width: 795px!important;
}
.w800px {  
  width: 800px!important;
}
.w805px {  
  width: 805px!important;
}
.w810px {  
  width: 810px!important;
}
.w815px {  
  width: 815px!important;
}
.w820px {  
  width: 820px!important;
}
.w825px {  
  width: 825px!important;
}
.w830px {  
  width: 830px!important;
}
.w835px {  
  width: 835px!important;
}
.w840px {  
  width: 840px!important;
}
.w845px {  
  width: 845px!important;
}
.w850px {  
  width: 850px!important;
}
.w855px {  
  width: 855px!important;
}
.w860px {  
  width: 860px!important;
}
.w865px {  
  width: 865px!important;
}
.w870px {  
  width: 870px!important;
}
.w875px {  
  width: 875px!important;
}
.w880px {  
  width: 880px!important;
}
.w885px {  
  width: 885px!important;
}
.w890px {  
  width: 890px!important;
}
.w895px {  
  width: 895px!important;
}
.w900px {  
  width: 900px!important;
}
.w905px {  
  width: 905px!important;
}
.w910px {  
  width: 910px!important;
}
.w915px {  
  width: 915px!important;
}
.w920px {  
  width: 920px!important;
}
.w925px {  
  width: 925px!important;
}
.w930px {  
  width: 930px!important;
}
.w935px {  
  width: 935px!important;
}
.w940px {  
  width: 940px!important;
}
.w945px {  
  width: 945px!important;
}

.w950px {  
  width: 950px!important;
}

.w955px {  
  width: 955px!important;
}

.w960px {  
  width: 960px!important;
}

.w965px {  
  width: 965px!important;
}

.w970px {  
  width: 970px!important;
}

.w975px {  
  width: 975px!important;
}

.w980px {  
  width: 980px!important;
}
.w985px {  
  width: 985px!important;
}

.w990px {  
  width: 990px!important;
}

.w995px {  
  width: 995px!important;
}

.w1000px {  
  width: 1000px!important;
}

.w-30 {  
  width: 65%;
}
.w-35 {  
  width: 65%;
}
.w-40 {  
  width: 65%;
}
.w-45 {  
  width: 65%;
}
.w-60 {  
  width: 65%;
}
.w-65 {  
  width: 65%;
}
.w-70 {  
  width: 70%;
}
.w-75 {  
  width: 70%;
}
.w-80 {  
  width: 80%;
}
.w-85 {  
  width: 80%;
}
.w-90 {  
  width: 90%;
}
.w-95 {  
  width: 95%;
}

.todobody {
    max-height: 660px;
    overflow-y: auto;
	padding : 1;
	
}