Files
sam-kd/css/style.css
hskwon aca1767eb9 초기 커밋: 5130 레거시 시스템
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경
- DB 연결 하드코딩 → .env 기반으로 변경
- MySQL strict mode DATE 오류 수정
2025-12-10 20:14:31 +09:00

1853 lines
35 KiB
CSS

@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;
}