*:not(#card *) { font-family: "Montserrat", sans-serif !important; } #card *:not(#card select, #card input, #card textarea, #card .textarea, #card .textarea *) { font-family: "Source Serif 4", serif !important; } #card input, #card select, #card textarea, #card .textarea, #card .textarea * { font-family: "Caveat", serif !important; } * { user-select: none; } a { color: #0078A8; text-decoration: none; } a:hover { text-decoration: underline; cursor: pointer; } * select:not(#card *), button, input:not(#card *), textarea:not(#card *) { font-size: 15px; height: 30px; padding: 5px; margin: 5px; border: 1px solid #ccc; border-radius: 4px; } button { background-color: #2DCB6F; color: white; cursor: pointer; } button:hover { background-color: #209350; } input:focus, select:focus, textarea:focus, .textarea:focus-visible { outline: none; } #card input:not([type="checkbox"]) { font-size: 23px; font-weight: 600; color: #0039A6; height: 16px; padding: 5px; margin: 5px; border: none; border-bottom: 1px solid black; } #card input[type="time"] { width: 100px; } #card select { font-size: 23px; font-weight: 600; color: #0039A6; height: 26.8px; margin: 5px; border: none; border-bottom: 1px solid black; } #card select option { font-size: 16px; font-weight: 400; color: black; } #card textarea, #card .textarea { font-size: 23px; font-weight: 600; color: #0039A6; padding: 5px; border: 1px solid black; resize: none; width: 100%; height: 100%; box-sizing: border-box; } #card .textarea { height: 140px; } input[type="checkbox"] { font-size: 26.8px; /* color: black; */ width: 26.8px; height: 26.8px; padding: 5px; margin: 5px; /* border: 1px solid black; -webkit-appearance: none; appearance: none; */ transform: translateY(-0.075em); display: grid; place-content: center; } /* input[type="checkbox"]::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); background-color: #0039A6; clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%); } input[type="checkbox"]:checked::before { transform: scale(1) rotate(45deg); } */ .driver-column #name, .driver-column #id { width: 190px; } .field-note { font-size: 12px; } hr { margin-top: 5px; margin-bottom: 5px; border: 1px solid gray; } .hidden { display: none !important; } #card { width: 1000px; margin: 0 auto; } #card .header .logo { height: 85px; } #card .title { margin: 20px; font-size: 40px; } div.center { margin: 0 auto; display: flex; justify-content: center; } #importButton { position: fixed; } .center { text-align: center; } .header { text-align: right; margin-bottom: 5px; position: relative; } .header .note { position: absolute; bottom: 0; text-align: left; } .header .note p { margin: 0; } .footer { margin-top: 20px; text-align: center; font-weight: bold; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #000; padding: 2px 5px 2px 5px; text-align: left; } table.no-border th, table.no-border td { border: none; padding: 0 5px 0 5px; } table.no-border td:first-child { width: 1%; white-space: nowrap; } th { background-color: #f4f4f4; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; width: 250px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; z-index: 1000; display: flex; flex-direction: column; align-items: center; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; } .modal .close-button { position: absolute; top: 0; right: 0; background: none; border: none; font-size: 18px; font-weight: bold; color: black; } .modal h3 { margin-top: 0; }