#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: 95%; 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; } .close:hover, .close:focus { color: #bbb; text-decoration: none; } .modal-body { padding: 10px; } .custom-card { background-color: #f9f9f9; padding: 15px; 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; }