.control-panel { background-color: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #ccc; width: 100%; margin: 0 auto; } /* Line styles for different digit lengths */ .line2digit { margin-top: -18px; font-family: cursive; } .bottomline { font-family: cursive; } .line3digit { margin-top: -18px; font-family: cursive; } .line4digit { margin-top: -18px; font-family: cursive; } .line5digit { margin-top: -18px; font-family: cursive; } .line6digit { margin-top: -18px; font-family: cursive; } button.fivepage:hover, .downlaodimage:hover, .downlaodpdf:hover, .printpage:hover { opacity: .8; } .form-group { margin-bottom: 0px; } .checkbox label, .form-group label { font-size: 17px; font-weight: 500; padding-left: 0; min-height: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .form-group input:focus, .form-group select:focus { outline: none; border-color: #2196F3; box-shadow: 0 0 3px rgba(33, 150, 243, 0.3); } .form-group input.error { border-color: #f44336; box-shadow: 0 0 3px rgba(244, 67, 54, 0.3); } .bottomlineans { margin-top: -20px; font-family: cursive; } .setgreen { margin-top: -4px; color: green; font-weight: 600; } .range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .button-group { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; } button.fivepage { background-color: #056209; color: #fff; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; transition: background-color 0.3s; display: flex; align-items: center; gap: 5px; } button.printpage { background-color: #004f8d; color: #fff; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; transition: background-color 0.3s; display: flex; align-items: center; gap: 5px; } .downlaodimage { background-color: #017180; color: #fff; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; transition: background-color 0.3s; display: flex; align-items: center; gap: 5px; } .downlaodpdf { background-color: #865000; color: #fff; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; transition: background-color 0.3s; display: flex; align-items: center; gap: 5px; } button.printpage { background-color: #004f8d; color: #fff; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; transition: background-color 0.3s; display: flex; align-items: center; gap: 5px; } .success-message { display: block; background-color: #056209; color: #fff; padding: 8px; border-radius: 5px; text-align: center; margin-top: 20px; width: 100%; min-width: 100%; max-width: 100%; margin: 16px auto; } .page-btn.active { background-color: #004f8d; color: #fff; border-color: #004f8d; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .worksheet { background-color: white; padding: 20px; border: 1px solid #ddd; margin-bottom: 20px; page-break-after: always; } .worksheet-header { display: flex; justify-content: space-between; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px; } .worksheet-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 20px; color: #000; } .name-date { display: flex; gap: 20px; justify-content: space-between; width: 100%; color: #000; font-weight: 600; } .name-date input { border: none; border-bottom: 1px solid #000; padding: 0 5px; width: 150px; } .problems-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .problems-table td { padding: 10px; text-align: left; border: 1px solid #ddd; height: 110px; font-size: 18px; vertical-align: top; } .vertical-problem { text-align: right; font-family: monospace; line-height: 1.5; } .worksheet-footer { text-align: center; margin-top: 20px; font-style: italic; color: #666; } .tabs { display: flex; margin-bottom: 20px; justify-content: center; margin-top: 23px; } .tab { padding: 10px 20px; cursor: pointer; background-color: #f1f1f1; border: 1px solid #ddd; border-bottom: none; margin-right: 5px; } .tab.active { background-color: white; font-weight: bold; } .tab-content { display: none; } .tab-content.active { display: block; width: 100%; min-width: 800px; max-width: 800px; margin: 0 auto; } .page-selector { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; } .page-btn { padding: 8px 15px; border: 1px solid #ddd; background-color: white; cursor: pointer; border-radius: 4px; transition: all 0.3s; } table.problems-table td { color: #000; font-weight: 600; } .page-btn:hover:not(.active) { background-color: #f1f1f1; } .loading { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; justify-content: center; align-items: center; flex-direction: column; } .loading.active { display: flex; } .spinner { border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 20px; } .loading-text { color: white; font-size: 18px; } .error-message { display: none; background-color: #f44336; color: white; padding: 15px; border-radius: 5px; margin-bottom: 20px; text-align: center; } .error-message.active { display: block; } .success-message { display: none; background-color: #4CAF50; color: white; padding: 15px; border-radius: 5px; margin-bottom: 20px; text-align: center; } .success-message.active { display: block; } .range-display { background-color: #1313141f; padding: 10px; border-radius: 4px; margin-top: 5px; font-size: 14px; color: #000; } .range-display.error { background-color: #ffebee; color: #c62828; } .range-display.warning { background-color: #fff8e1; color: #ff8f00; } .field-error { font-size: 12px; color: #f44336; margin-top: 5px; display: none; } .field-error.active { display: block; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media print { .control-panel { display: none; } .tabs { display: none; } .page-selector { display: none; } .tab-content { display: block !important; } .worksheet { page-break-after: always; } } @media (max-width: 600px) { .range-inputs { grid-template-columns: 1fr; } .button-group { flex-direction: column; } .btn { width: 100%; justify-content: center; } }